magic-spells/index.html at master · detain/magic-spells · GitHub

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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width">
		<title>Magic Spells</title>
		<style type="text/css">
			* {
				box-sizing: border-box;
			}

			html, body {
				margin: 0 auto;
				position: relative;
				width: 100%;
				height: 100%;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

			header {
				position: relative;
				width: 100%;
				margin: 0 auto;
				height: auto;
				margin-bottom: 7px;
				padding: 7px;
			}

			input[type=text] {
				display: block;
				text-align: center;
				border: none;
				border-bottom: 4px dashed lightblue;
				outline: none;
				width: 98%;
				color: tomato;
				margin: 0 auto;
				margin-top: 5px;
				margin-bottom: 10px;
				font-size: 1.6em;
				font-family: sans-serif;
				padding: 5px;
			}

			#contentContainer {
				display: block;
				position: absolute;
				width: 98%;
				height: 100%;
				max-width: 1200px;
				margin: 0 auto;
			}

			.macy-img {
				width: 150px;
				height: 150px;
			}

			.macy-img img {
				-o-object-fit: cover;
				object-fit: cover;
			}

			h1, p {
				font-family: sans-serif;
				text-align: center;
			}
			div p {
				padding: 20px;
				background-color: rgba(0,0,0,0.2);
			}
			div {
				overflow: auto;
				position: absolute;
				bottom: 0;
				right: 0;
				left: 0;
			}
			button {
				margin: 0 auto;
				display: block;
				font-size: 1.1rem;
				width: 170px;
				line-height: 2;
				margin-top: 30px;
			}
			@media all and (max-height: 410px) {
				div {
					position: static;
				}
			}
			.word {
				font-weight: bold;
			}
			.output {
				font-style: italic;
			}
		</style>
		<!--[if lt IE 9]>
		<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		<h1>Magic Spells</h1>
		<p>Press the button then say the word to test the recognition.</p>
		<button>Start new test</button>
		<div id = 'contentContainer'>
			<div class = 'macy-img'><a><img></a></div>
			<div class = 'macy-img'><a><img></a></div>
			<div class = 'macy-img'><a><img></a></div>
			<div class = 'macy-img'><a><img></a></div>
			<div class = 'macy-img'><a><img></a></div>
			<div class = 'macy-img'><a><img></a></div>
			<div class = 'macy-img'><a><img></a></div>
			<div class = 'macy-img'><a><img></a></div>
			<div class = 'macy-img'><a><img></a></div>
			<div class = 'macy-img'><a><img></a></div>
			<div class = 'macy-img'><a><img></a></div>
			<div class = 'macy-img'><a><img></a></div>
		</div>
		<div>
			<p class="word">word...</p>
			<p class="result">Right or wrong?</p>
			<p class="output">...diagnostic messages</p>
		</div>
		<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
		<script src='https://cdn.jsdelivr.net/npm/macy@2.3.0/dist/macy.min.js'></script>
		<script type="text/javascript">
			// pixabay API key
			var pixabayAPI_KEY = "7126297-c5a1bdd21b4ba1a7d9969984b";
			var currentPage = 1;
			var macy = null;
			// gets all img elments inside the macy container
			// each img element has an a element as a parent
			var $macyImg = $(".macy-img a img");
			var RawJSONData = {};

			var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
			var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList;
			var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent;
			var letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
			var actions = ['go', 'back', 'undo', 'delete', 'backspace', 'reset'];
			var words = ['bridge', 'apple', 'where', 'funny'];
			var spells = [];
			var score = 0;
			var wordIdx = 0;
			var word;
			var speechRecognitionList = new SpeechGrammarList();
			var recognition = new SpeechRecognition();
			var grammar;
			var wordPara = document.querySelector('.word');
			var resultPara = document.querySelector('.result');
			var diagnosticPara = document.querySelector('.output');
			var testBtn = document.querySelector('button');
			for (var x = 0, xMax = words.length, wordArray = []; x < xMax; x++) {
				for (var y = 0, yMax = words[x].length; y < yMax; y++) {
					wordArray[wordArray.length] = words[x][y];
				}
				spells[spells.length] = wordArray.join(' ');
			}
			grammar = '#JSGF V1.0; grammar letters; public <color> = ' + letters.join(' | ') + ' ;'
			speechRecognitionList.addFromString(grammar, 1);
			grammar = '#JSGF V1.0; grammar actions; public <color> = ' + actions.join(' | ') + ' ;'
			speechRecognitionList.addFromString(grammar, 1);
			grammar = '#JSGF V1.0; grammar words; public <word> = ' + spells.join(' | ') + ' ;'
			speechRecognitionList.addFromString(grammar, 1);
			recognition.grammars = speechRecognitionList;
			recognition.lang = 'en-US';
			recognition.continuous = true;
			recognition.interimResults = true;
			recognition.maxAlternatives = 3;
			recognition.onresult = function(event) {
				// The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
				// The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
				// It has a getter so it can be accessed like an array
				// The first [0] returns the SpeechRecognitionResult at position 0.
				// Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain individual results.
				// These also have getters so they can be accessed like arrays.
				// The second [0] returns the SpeechRecognitionAlternative at position 0.
				// We then return the transcript property of the SpeechRecognitionAlternative object
				console.log(event);
				var speechResult = event.results[0][0].transcript.toLowerCase();
				console.log('Speech Constent:'+speechResult);
				diagnosticPara.textContent = 'Speech received: ' + speechResult + '.';
				if(speechResult === spell) {
					resultPara.textContent = 'I heard the correct word!';
					resultPara.style.background = 'lime';
					speechSynthesis.speak(new SpeechSynthesisUtterance('Correct Spelling'));
				} else {
					resultPara.textContent = 'That didn\'t sound right.';
					resultPara.style.background = 'red';
				}
				//console.log('Confidence: ' + event.results[0][0].confidence);
			}
			recognition.onspeechend = function() {
				recognition.stop();
				testBtn.disabled = false;
				testBtn.textContent = 'Start new test';
			}
			recognition.onerror = function(event) {
				testBtn.disabled = false;
				testBtn.textContent = 'Start new test';
				diagnosticPara.textContent = 'Error occurred in recognition: ' + event.error;
			}
			recognition.onaudiostart = function(event) {
				//Fired when the user agent has started to capture audio.
				console.log('SpeechRecognition.onaudiostart');
			}
			recognition.onaudioend = function(event) {
				//Fired when the user agent has finished capturing audio.
				console.log('SpeechRecognition.onaudioend');
			}
			recognition.onend = function(event) {
				//Fired when the speech recognition service has disconnected.
				console.log('SpeechRecognition.onend');
			}
			recognition.onnomatch = function(event) {
				//Fired when the speech recognition service returns a final result with no significant recognition. This may involve some degree of recognition, which doesn't meet or exceed the confidence threshold.
				console.log('SpeechRecognition.onnomatch');
			}
			recognition.onsoundstart = function(event) {
				//Fired when any sound — recognisable speech or not — has been detected.
				console.log('SpeechRecognition.onsoundstart');
			}
			recognition.onsoundend = function(event) {
				//Fired when any sound — recognisable speech or not — has stopped being detected.
				console.log('SpeechRecognition.onsoundend');
			}
			recognition.onspeechstart = function (event) {
				//Fired when sound that is recognised by the speech recognition service as speech has been detected.
				console.log('SpeechRecognition.onspeechstart');
			}
			recognition.onstart = function(event) {
				//Fired when the speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition.
				console.log('SpeechRecognition.onstart');
			}
			$(document).ready(function() {
				//requestJSONData(searchUrl, window.currentPageAPI);//////////////////////////!!!
				// initialization of macy.js
				window.macy = Macy({
					container: "#contentContainer",
					trueOrder: false,
					waitForImages: false,
					margin: 10,
					columns: 4,
					breakAt: {
						1200: 4,
						940: 4,
						520: 2,
						400: 1
					}
				});
				macy.reInit();
			}); // close $(document).ready function
			testBtn.addEventListener('click', testSpeech);

			function requestJSONData(searchQuery) {
				// gets the value from the text input
				console.log("searchQuery: " + searchQuery);
				searchUrl = "https://pixabay.com/api/?key=" + pixabayAPI_KEY + "&page=1&per_page=12&q=" + encodeURIComponent(searchQuery);
				$.getJSON(searchUrl, function(data) {
					console.log("URL: " + searchUrl);
					// gets the JSON data
					window.RawJSONData = data;
					// data.totalHits contains the total number of results for our query
					console.log("total hits: " + data.totalHits);
					// if there are results..
					if (parseInt(data.totalHits) > 0) {
						// if search results exist....
						data.hits.forEach(function(searchResult, index) {
							$macyImg[index].src = searchResult.previewURL;
							$macyImg[index].parentNode.href = searchResult.largeImageURL;
							$macyImg[index].style.width = "100%";
							$macyImg[index].style.height = "100%";
							$macyImg[index].parentNode.target = "#";
							// macy.reInit();

						});
						macy.reInit();
					}
					else {
						alert("No results!");
						console.log("No results");
						return null;
					}
				});
			} // close function

			function testSpeech() {
				word = words[wordIdx];
				console.log('working on word '+word);
				requestJSONData(word);
				spell = spells[wordIdx];
				testBtn.disabled = true;
				testBtn.textContent = 'Test in progress';
				//var word = words[Math.floor(Math.random() * words.length)];
				// To ensure case consistency while checking with the returned output text
				//word = words[wordIdx];
				word = word.toLowerCase();
				wordPara.textContent = word;
				speechSynthesis.speak(new SpeechSynthesisUtterance('How do you spell the word '+word));
				resultPara.textContent = 'Right or wrong?';
				resultPara.style.background = 'rgba(0,0,0,0.2)';
				diagnosticPara.textContent = '...diagnostic messages';
				recognition.start();
			}
		</script>
	</body>
</html>