forked from googlecreativelab/morse-learn
-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
172 lines (161 loc) · 6.69 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="canonical" href="https://morse-learn.acecentre.net/"/>
<!-- Primary Meta Tags -->
<title>Learn Morse Code | Ace Centre</title>
<meta name="title" content="Learn Morse Code | Ace Centre">
<meta name="description" content="Morse Code is a useful tool to help people access technology. Play our game to see how quickly you can learn Morse Code with help from our visual and phonetic hints!">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://morse-learn.acecentre.net/">
<meta property="og:title" content="Learn Morse Code | Ace Centre">
<meta property="og:description" content="Morse Code is a useful tool to help people access technology. Play our game to see how quickly you can learn Morse Code with help from our visual and phonetic hints!">
<meta property="og:image" content="https://morse-learn.acecentre.net/assets/images/meta.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://morse-learn.acecentre.net/">
<meta property="twitter:title" content="Learn Morse Code | Ace Centre">
<meta property="twitter:description" content="Morse Code is a useful tool to help people access technology. Play our game to see how quickly you can learn Morse Code with help from our visual and phonetic hints!">
<meta property="twitter:image" content="https://morse-learn.acecentre.net/assets/images/meta.png">
<meta
name="viewport"
content="width=device-width, user-scalable=yes">
<link rel="stylesheet" href="build/style.css" />
<link rel="icon" href="assets/images/favicon.png" />
<link
href="https://fonts.googleapis.com/css?family=Poppins:600,700"
rel="stylesheet"
/>
</head>
<body>
<div id="landscape">Please rotate back to portrait mode.</div>
<a id="button" class="about-button">?</a>
<div class="tl-btn-group">
<h2>Settings</h2>
<p>Click the buttons below to turn the settings off and on.</p>
<a href title="Audio toggle" class="item audio-toggle"
><i class="fa fa-2x fa-volume-up"></i><span>Sound</span></a
>
<a href title="Speech toggle" class="item speech-toggle"
><i class="fa fa-2x fa-assistive-listening-systems"></i
><span>Speech Hints</span></a
>
<a href title="Visual toggle" class="item visual-toggle"
><i class="fa fa-2x fa-eye"></i><span>Visual Hints</span></a
>
<a href title="Reset Progress" class="item reset-button"
><i class="fa fa-2x fa-redo"></i><span>Reset Progress</span></a
>
<a href title="Tracking Consent" class="item consent-toggle"
><i class="fa fa-2x fa-binoculars"></i><span>Tracking Consent</span></a
>
</div>
<div id="overlay">
<div class="wrapper">
<div class="title">About</div>
<p>
We created this trainer to make learning Morse code more fun. Give it
a try using the on screen buttons or input device of your choice.
</p>
<p>
This experiment was originally developed by Google to support Morse
code for accessible communication. Learn More at
<a href="http://morse.withgoogle.com/">g.co/morse</a>.
</p>
<p>
Built by Tania Finlayson, Use All Five, Google Creative Lab and
AceCentre
</p>
<img src="assets/images/logos-new.png" alt="The Ace Centre and Google logos" />
</div>
</div>
<div id="loading-overlay">
<div class="content">
<div class="sk-circle-fade">
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
</div>
</div>
</div>
<script src="third-party/phaser/phaser.js"></script>
<script src="build/bundle.js"></script>
<div id="morseboard" data-children-count="1">
<input id="output" readonly="true" tabindex="-1" />
<div class="keyboard-controls">
<h3>Keyboard Controls</h3>
<div>
<p>Dot Keys</p>
<div>
<button class="keybutton">.</button>
<button class="keybutton">j</button>
<button class="keybutton longkey">space</button>
</div>
</div>
<div>
<p>Dash Keys</p>
<div>
<button class="keybutton">-</button>
<button class="keybutton">k</button>
<button class="keybutton longkey">enter</button>
</div>
</div>
</div>
<div class="button-container">
<div id="button-box">
<div class="dot-box">
<button id="dot" tabindex="0">
<span></span>
</button>
</div>
<div class="dash-box">
<button id="dash" tabindex="0">
<span></span>
</button>
</div>
</div>
</div>
</div>
<div id="consent-modal" class="modal-container">
<div id="inner-modal" class="modal">
<h1>Data Collection Consent</h1>
<p>
Ace Centre are researching into the time it takes people to learn
morse code with different learning methods. To enable this we need to collect
some <strong>anonymous</strong> data as you learn.
</p>
<p>
We will only collect your play time, your progress and your game
settings. You will be tracked with a cookie, but we won’t save any
personal data.
</p>
<p>
For our collection we need to collect data from a variety of game setting configurations. To achieve this we would like to randomise your settings. You can change your settings at any time.
</p>
<label>
<input type="checkbox" id="randomiseSettings" checked/>
Randomise my settings
</label>
<p class="strong">
If you are okay with us collecting this data press the button below
and get playing!
</p>
<div class="consent-button-container">
<button id="consent-no" class="secondary">No, opt out</button>
<button id="consent-yes" class="primary">Yes, use my data</button>
</div>
</div>
</div>
</body>
</html>