Mercurial > hg > webaudioevaluationtool
comparison interfaces/AB.js @ 2538:464c6c6692d6
Beautified entire project.
author | Nicholas Jillings <nicholas.jillings@mail.bcu.ac.uk> |
---|---|
date | Mon, 14 Nov 2016 14:17:03 +0000 |
parents | 42abe6eddfb5 |
children | e352d52f9237 1c8aac0ee5e9 |
comparison
equal
deleted
inserted
replaced
2536:527020a63203 | 2538:464c6c6692d6 |
---|---|
1 // Once this is loaded and parsed, begin execution | 1 // Once this is loaded and parsed, begin execution |
2 loadInterface(); | 2 loadInterface(); |
3 | 3 |
4 function loadInterface() { | 4 function loadInterface() { |
5 // Get the dimensions of the screen available to the page | 5 // Get the dimensions of the screen available to the page |
6 var width = window.innerWidth; | 6 var width = window.innerWidth; |
7 var height = window.innerHeight; | 7 var height = window.innerHeight; |
8 interfaceContext.insertPoint.innerHTML = ""; // Clear the current schema | 8 interfaceContext.insertPoint.innerHTML = ""; // Clear the current schema |
9 | 9 |
10 // Custom comparator Object | 10 // Custom comparator Object |
11 Interface.prototype.comparator = null; | 11 Interface.prototype.comparator = null; |
12 | 12 |
13 Interface.prototype.checkScaleRange = function(min, max) { | 13 Interface.prototype.checkScaleRange = function (min, max) { |
14 var page = testState.getCurrentTestPage(); | 14 var page = testState.getCurrentTestPage(); |
15 var audioObjects = audioEngineContext.audioObjects; | 15 var audioObjects = audioEngineContext.audioObjects; |
16 var state = true; | 16 var state = true; |
17 var str = "Please keep listening. "; | 17 var str = "Please keep listening. "; |
18 var minRanking = Infinity; | 18 var minRanking = Infinity; |
19 var maxRanking = -Infinity; | 19 var maxRanking = -Infinity; |
20 for (var ao of audioObjects) { | 20 for (var ao of audioObjects) { |
21 var rank = ao.interfaceDOM.getValue(); | 21 var rank = ao.interfaceDOM.getValue(); |
22 if (rank < minRanking) {minRanking = rank;} | 22 if (rank < minRanking) { |
23 if (rank > maxRanking) {maxRanking = rank;} | 23 minRanking = rank; |
24 } | 24 } |
25 if (maxRanking*100 < max) { | 25 if (rank > maxRanking) { |
26 maxRanking = rank; | |
27 } | |
28 } | |
29 if (maxRanking * 100 < max) { | |
26 str += "At least one fragment must be selected." | 30 str += "At least one fragment must be selected." |
27 state = false; | 31 state = false; |
28 } | 32 } |
29 if (!state) { | 33 if (!state) { |
30 console.log(str); | 34 console.log(str); |
31 this.storeErrorNode(str); | 35 this.storeErrorNode(str); |
32 interfaceContext.lightbox.post("Message",str); | 36 interfaceContext.lightbox.post("Message", str); |
33 } | 37 } |
34 return state; | 38 return state; |
35 } | 39 } |
36 | 40 |
37 // The injection point into the HTML page | 41 // The injection point into the HTML page |
38 interfaceContext.insertPoint = document.getElementById("topLevelBody"); | 42 interfaceContext.insertPoint = document.getElementById("topLevelBody"); |
39 var testContent = document.createElement('div'); | 43 var testContent = document.createElement('div'); |
40 testContent.id = 'testContent'; | 44 testContent.id = 'testContent'; |
41 | 45 |
42 // Create the top div for the Title element | 46 // Create the top div for the Title element |
43 var titleAttr = specification.title; | 47 var titleAttr = specification.title; |
44 var title = document.createElement('div'); | 48 var title = document.createElement('div'); |
45 title.className = "title"; | 49 title.className = "title"; |
46 title.align = "center"; | 50 title.align = "center"; |
47 var titleSpan = document.createElement('span'); | 51 var titleSpan = document.createElement('span'); |
48 titleSpan.id = "test-title"; | 52 titleSpan.id = "test-title"; |
49 | 53 |
50 // Set title to that defined in XML, else set to default | 54 // Set title to that defined in XML, else set to default |
51 if (titleAttr != undefined) { | 55 if (titleAttr != undefined) { |
52 titleSpan.textContent = titleAttr; | 56 titleSpan.textContent = titleAttr; |
53 } else { | 57 } else { |
54 titleSpan.textContent = 'Listening test'; | 58 titleSpan.textContent = 'Listening test'; |
55 } | 59 } |
56 // Insert the titleSpan element into the title div element. | 60 // Insert the titleSpan element into the title div element. |
57 title.appendChild(titleSpan); | 61 title.appendChild(titleSpan); |
58 | 62 |
59 var pagetitle = document.createElement('div'); | 63 var pagetitle = document.createElement('div'); |
60 pagetitle.className = "pageTitle"; | 64 pagetitle.className = "pageTitle"; |
61 pagetitle.align = "center"; | 65 pagetitle.align = "center"; |
62 var titleSpan = document.createElement('span'); | 66 var titleSpan = document.createElement('span'); |
63 titleSpan.id = "pageTitle"; | 67 titleSpan.id = "pageTitle"; |
64 pagetitle.appendChild(titleSpan); | 68 pagetitle.appendChild(titleSpan); |
65 | 69 |
66 // Create Interface buttons! | 70 // Create Interface buttons! |
67 var interfaceButtons = document.createElement('div'); | 71 var interfaceButtons = document.createElement('div'); |
68 interfaceButtons.id = 'interface-buttons'; | 72 interfaceButtons.id = 'interface-buttons'; |
69 interfaceButtons.style.height = '25px'; | 73 interfaceButtons.style.height = '25px'; |
70 | 74 |
71 // Create playback start/stop points | 75 // Create playback start/stop points |
72 var playback = document.createElement("button"); | 76 var playback = document.createElement("button"); |
73 playback.innerHTML = 'Stop'; | 77 playback.innerHTML = 'Stop'; |
74 playback.id = 'playback-button'; | 78 playback.id = 'playback-button'; |
75 playback.style.float = 'left'; | 79 playback.style.float = 'left'; |
76 // onclick function. Check if it is playing or not, call the correct function in the | 80 // onclick function. Check if it is playing or not, call the correct function in the |
77 // audioEngine, change the button text to reflect the next state. | 81 // audioEngine, change the button text to reflect the next state. |
78 playback.onclick = function() { | 82 playback.onclick = function () { |
79 if (audioEngineContext.status == 1) { | 83 if (audioEngineContext.status == 1) { |
80 audioEngineContext.stop(); | 84 audioEngineContext.stop(); |
81 this.innerHTML = 'Stop'; | 85 this.innerHTML = 'Stop'; |
82 var time = audioEngineContext.timer.getTestTime(); | 86 var time = audioEngineContext.timer.getTestTime(); |
83 console.log('Stopped at ' + time); // DEBUG/SAFETY | 87 console.log('Stopped at ' + time); // DEBUG/SAFETY |
84 } | 88 } |
85 }; | 89 }; |
86 // Append the interface buttons into the interfaceButtons object. | 90 // Append the interface buttons into the interfaceButtons object. |
87 interfaceButtons.appendChild(playback); | 91 interfaceButtons.appendChild(playback); |
88 | 92 |
89 // Global parent for the comment boxes on the page | 93 // Global parent for the comment boxes on the page |
90 var feedbackHolder = document.createElement('div'); | 94 var feedbackHolder = document.createElement('div'); |
91 feedbackHolder.id = 'feedbackHolder'; | 95 feedbackHolder.id = 'feedbackHolder'; |
92 | 96 |
93 // Create outside reference holder | 97 // Create outside reference holder |
94 var outsideRef = document.createElement("div"); | 98 var outsideRef = document.createElement("div"); |
95 outsideRef.id = "outside-reference-holder"; | 99 outsideRef.id = "outside-reference-holder"; |
96 | 100 |
97 // Construct the AB Boxes | 101 // Construct the AB Boxes |
98 var boxes = document.createElement('div'); | 102 var boxes = document.createElement('div'); |
99 boxes.align = "center"; | 103 boxes.align = "center"; |
100 boxes.id = "box-holders"; | 104 boxes.id = "box-holders"; |
101 boxes.style.float = "left"; | 105 boxes.style.float = "left"; |
102 | 106 |
103 var submit = document.createElement('button'); | 107 var submit = document.createElement('button'); |
104 submit.id = "submit"; | 108 submit.id = "submit"; |
105 submit.onclick = buttonSubmitClick; | 109 submit.onclick = buttonSubmitClick; |
106 submit.className = "big-button"; | 110 submit.className = "big-button"; |
107 submit.textContent = "submit"; | 111 submit.textContent = "submit"; |
108 submit.style.position = "relative"; | 112 submit.style.position = "relative"; |
109 submit.style.left = (window.innerWidth-250)/2 + 'px'; | 113 submit.style.left = (window.innerWidth - 250) / 2 + 'px'; |
110 | 114 |
111 feedbackHolder.appendChild(boxes); | 115 feedbackHolder.appendChild(boxes); |
112 | 116 |
113 // Create holder for comment boxes | 117 // Create holder for comment boxes |
114 var comments = document.createElement("div"); | 118 var comments = document.createElement("div"); |
115 comments.id = "comment-box-holder"; | 119 comments.id = "comment-box-holder"; |
116 | 120 |
117 // Inject into HTML | 121 // Inject into HTML |
118 testContent.appendChild(title); // Insert the title | 122 testContent.appendChild(title); // Insert the title |
119 testContent.appendChild(pagetitle); | 123 testContent.appendChild(pagetitle); |
120 testContent.appendChild(interfaceButtons); | 124 testContent.appendChild(interfaceButtons); |
121 testContent.appendChild(outsideRef); | 125 testContent.appendChild(outsideRef); |
122 testContent.appendChild(feedbackHolder); | 126 testContent.appendChild(feedbackHolder); |
123 testContent.appendChild(submit); | 127 testContent.appendChild(submit); |
124 testContent.appendChild(comments); | 128 testContent.appendChild(comments); |
125 interfaceContext.insertPoint.appendChild(testContent); | 129 interfaceContext.insertPoint.appendChild(testContent); |
126 | 130 |
127 // Load the full interface | 131 // Load the full interface |
128 testState.initialise(); | 132 testState.initialise(); |
129 testState.advanceState(); | 133 testState.advanceState(); |
130 } | 134 } |
131 | 135 |
132 function loadTest(audioHolderObject) | 136 function loadTest(audioHolderObject) { |
133 { | 137 var feedbackHolder = document.getElementById('feedbackHolder'); |
134 var feedbackHolder = document.getElementById('feedbackHolder'); | 138 var interfaceObj = audioHolderObject.interfaces; |
135 var interfaceObj = audioHolderObject.interfaces; | 139 if (interfaceObj.length > 1) { |
136 if (interfaceObj.length > 1) | 140 console.log("WARNING - This interface only supports one <interface> node per page. Using first interface node"); |
137 { | 141 } |
138 console.log("WARNING - This interface only supports one <interface> node per page. Using first interface node"); | 142 interfaceObj = interfaceObj[0]; |
139 } | 143 |
140 interfaceObj = interfaceObj[0]; | |
141 | |
142 var commentHolder = document.getElementById('comment-box-holder'); | 144 var commentHolder = document.getElementById('comment-box-holder'); |
143 commentHolder.innerHTML = ""; | 145 commentHolder.innerHTML = ""; |
144 | 146 |
145 // Delete outside reference | 147 // Delete outside reference |
146 var outsideReferenceHolder = document.getElementById("outside-reference-holder"); | 148 var outsideReferenceHolder = document.getElementById("outside-reference-holder"); |
147 outsideReferenceHolder.innerHTML = ""; | 149 outsideReferenceHolder.innerHTML = ""; |
148 | 150 |
149 // Set the page title | 151 // Set the page title |
150 if (typeof audioHolderObject.title == "string" && audioHolderObject.title.length > 0) { | 152 if (typeof audioHolderObject.title == "string" && audioHolderObject.title.length > 0) { |
151 document.getElementById("test-title").textContent = audioHolderObject.title | 153 document.getElementById("test-title").textContent = audioHolderObject.title |
152 } | 154 } |
153 | 155 |
154 if(interfaceObj.title != null) | 156 if (interfaceObj.title != null) { |
155 { | 157 document.getElementById("pageTitle").textContent = interfaceObj.title; |
156 document.getElementById("pageTitle").textContent = interfaceObj.title; | 158 } |
157 } | 159 |
158 | |
159 var interfaceOptions = specification.interfaces.options.concat(interfaceObj.options); | 160 var interfaceOptions = specification.interfaces.options.concat(interfaceObj.options); |
160 // Clear the interfaceElements | 161 // Clear the interfaceElements |
161 { | 162 { |
162 var node = document.getElementById('playback-holder'); | 163 var node = document.getElementById('playback-holder'); |
163 if (node){feedbackHolder.removeChild(node);} | 164 if (node) { |
165 feedbackHolder.removeChild(node); | |
166 } | |
164 node = document.getElementById('page-count'); | 167 node = document.getElementById('page-count'); |
165 if (node){document.getElementById('interface-buttons').removeChild(node);} | 168 if (node) { |
169 document.getElementById('interface-buttons').removeChild(node); | |
170 } | |
166 node = document.getElementById('master-volume-holder-float'); | 171 node = document.getElementById('master-volume-holder-float'); |
167 if (node){feedbackHolder.removeChild(node);} | 172 if (node) { |
168 } | 173 feedbackHolder.removeChild(node); |
169 | 174 } |
175 } | |
176 | |
170 // Populate the comparator object | 177 // Populate the comparator object |
171 interfaceContext.comparator = new comparator(audioHolderObject); | 178 interfaceContext.comparator = new comparator(audioHolderObject); |
172 | 179 |
173 for (var option of interfaceOptions) | 180 for (var option of interfaceOptions) { |
174 { | 181 if (option.type == "show") { |
175 if (option.type == "show") | 182 switch (option.name) { |
176 { | |
177 switch(option.name) { | |
178 case "playhead": | 183 case "playhead": |
179 var playbackHolder = document.getElementById('playback-holder'); | 184 var playbackHolder = document.getElementById('playback-holder'); |
180 if (playbackHolder == null) | 185 if (playbackHolder == null) { |
181 { | |
182 playbackHolder = document.createElement('div'); | 186 playbackHolder = document.createElement('div'); |
183 playbackHolder.id = 'playback-holder'; | 187 playbackHolder.id = 'playback-holder'; |
184 playbackHolder.style.width = "100%"; | 188 playbackHolder.style.width = "100%"; |
185 playbackHolder.style.float = "left"; | 189 playbackHolder.style.float = "left"; |
186 playbackHolder.align = 'center'; | 190 playbackHolder.align = 'center'; |
188 feedbackHolder.appendChild(playbackHolder); | 192 feedbackHolder.appendChild(playbackHolder); |
189 } | 193 } |
190 break; | 194 break; |
191 case "page-count": | 195 case "page-count": |
192 var pagecountHolder = document.getElementById('page-count'); | 196 var pagecountHolder = document.getElementById('page-count'); |
193 if (pagecountHolder == null) | 197 if (pagecountHolder == null) { |
194 { | |
195 pagecountHolder = document.createElement('div'); | 198 pagecountHolder = document.createElement('div'); |
196 pagecountHolder.id = 'page-count'; | 199 pagecountHolder.id = 'page-count'; |
197 document.getElementById('interface-buttons').appendChild(pagecountHolder); | 200 document.getElementById('interface-buttons').appendChild(pagecountHolder); |
198 } | 201 } |
199 pagecountHolder.innerHTML = '<span>Page '+(testState.stateIndex+1)+' of '+testState.stateMap.length+'</span>'; | 202 pagecountHolder.innerHTML = '<span>Page ' + (testState.stateIndex + 1) + ' of ' + testState.stateMap.length + '</span>'; |
200 break; | 203 break; |
201 case "volume": | 204 case "volume": |
202 if (document.getElementById('master-volume-holder-float') == null) | 205 if (document.getElementById('master-volume-holder-float') == null) { |
203 { | |
204 feedbackHolder.appendChild(interfaceContext.volume.object); | 206 feedbackHolder.appendChild(interfaceContext.volume.object); |
205 } | 207 } |
206 break; | 208 break; |
207 case "comments": | 209 case "comments": |
208 // Generate one comment box per presented page | 210 // Generate one comment box per presented page |
209 for (var element of audioEngineContext.audioObjects) | 211 for (var element of audioEngineContext.audioObjects) { |
210 { | |
211 interfaceContext.commentBoxes.createCommentBox(element); | 212 interfaceContext.commentBoxes.createCommentBox(element); |
212 } | 213 } |
213 interfaceContext.commentBoxes.showCommentBoxes(commentHolder,true); | 214 interfaceContext.commentBoxes.showCommentBoxes(commentHolder, true); |
214 break; | 215 break; |
215 } | 216 } |
216 } | 217 } |
217 } | 218 } |
218 | 219 |
219 $(audioHolderObject.commentQuestions).each(function(index,element) { | 220 $(audioHolderObject.commentQuestions).each(function (index, element) { |
220 var node = interfaceContext.createCommentQuestion(element); | 221 var node = interfaceContext.createCommentQuestion(element); |
221 commentHolder.appendChild(node.holder); | 222 commentHolder.appendChild(node.holder); |
222 }); | 223 }); |
223 | 224 |
224 resizeWindow(null); | 225 resizeWindow(null); |
225 } | 226 } |
226 | 227 |
227 function comparator(audioHolderObject) | 228 function comparator(audioHolderObject) { |
228 { | 229 this.comparatorBox = function (audioElement, id, text) { |
229 this.comparatorBox = function(audioElement,id,text) | 230 this.parent = audioElement; |
230 { | 231 this.id = id; |
231 this.parent = audioElement; | 232 this.value = 0; |
232 this.id = id; | 233 this.disabled = true; |
233 this.value = 0; | 234 this.box = document.createElement('div'); |
234 this.disabled = true; | 235 this.box.className = 'comparator-holder'; |
235 this.box = document.createElement('div'); | 236 this.box.setAttribute('track-id', audioElement.id); |
236 this.box.className = 'comparator-holder'; | 237 this.box.id = 'comparator-' + text; |
237 this.box.setAttribute('track-id',audioElement.id); | 238 this.selector = document.createElement('div'); |
238 this.box.id = 'comparator-'+text; | 239 this.selector.className = 'comparator-selector disabled'; |
239 this.selector = document.createElement('div'); | 240 var selectorText = document.createElement('span'); |
240 this.selector.className = 'comparator-selector disabled'; | 241 selectorText.textContent = text; |
241 var selectorText = document.createElement('span'); | 242 this.selector.appendChild(selectorText); |
242 selectorText.textContent = text; | 243 this.playback = document.createElement('button'); |
243 this.selector.appendChild(selectorText); | 244 this.playback.className = 'comparator-button'; |
244 this.playback = document.createElement('button'); | 245 this.playback.disabled = true; |
245 this.playback.className = 'comparator-button'; | 246 this.playback.textContent = "Listen"; |
246 this.playback.disabled = true; | 247 this.box.appendChild(this.selector); |
247 this.playback.textContent = "Listen"; | 248 this.box.appendChild(this.playback); |
248 this.box.appendChild(this.selector); | 249 this.selector.onclick = function (event) { |
249 this.box.appendChild(this.playback); | 250 var time = audioEngineContext.timer.getTestTime(); |
250 this.selector.onclick = function(event) | 251 if ($(event.currentTarget).hasClass('disabled')) { |
251 { | 252 console.log("Please wait until sample has loaded"); |
252 var time = audioEngineContext.timer.getTestTime(); | 253 return; |
253 if ($(event.currentTarget).hasClass('disabled')) | 254 } |
254 { | 255 if (audioEngineContext.status == 0) { |
255 console.log("Please wait until sample has loaded"); | 256 interfaceContext.lightbox.post("Message", "Please listen to the samples before making a selection"); |
256 return; | 257 console.log("Please listen to the samples before making a selection"); |
257 } | 258 return; |
258 if (audioEngineContext.status == 0) | 259 } |
259 { | 260 var id = event.currentTarget.parentElement.getAttribute('track-id'); |
260 interfaceContext.lightbox.post("Message","Please listen to the samples before making a selection"); | 261 interfaceContext.comparator.selected = id; |
261 console.log("Please listen to the samples before making a selection"); | |
262 return; | |
263 } | |
264 var id = event.currentTarget.parentElement.getAttribute('track-id'); | |
265 interfaceContext.comparator.selected = id; | |
266 if ($(event.currentTarget).hasClass("selected")) { | 262 if ($(event.currentTarget).hasClass("selected")) { |
267 $(".comparator-selector").removeClass('selected'); | 263 $(".comparator-selector").removeClass('selected'); |
268 for (var i=0; i<interfaceContext.comparator.comparators.length; i++) | 264 for (var i = 0; i < interfaceContext.comparator.comparators.length; i++) { |
269 { | |
270 var obj = interfaceContext.comparator.comparators[i]; | 265 var obj = interfaceContext.comparator.comparators[i]; |
271 obj.parent.metric.moved(time,0); | 266 obj.parent.metric.moved(time, 0); |
272 obj.value = 0; | 267 obj.value = 0; |
273 } | 268 } |
274 } else { | 269 } else { |
275 $(".comparator-selector").removeClass('selected'); | 270 $(".comparator-selector").removeClass('selected'); |
276 $(event.currentTarget).addClass('selected'); | 271 $(event.currentTarget).addClass('selected'); |
277 for (var i=0; i<interfaceContext.comparator.comparators.length; i++) | 272 for (var i = 0; i < interfaceContext.comparator.comparators.length; i++) { |
278 { | |
279 var obj = interfaceContext.comparator.comparators[i]; | 273 var obj = interfaceContext.comparator.comparators[i]; |
280 if (i == id) { | 274 if (i == id) { |
281 obj.value = 1; | 275 obj.value = 1; |
282 } else { | 276 } else { |
283 obj.value = 0; | 277 obj.value = 0; |
284 } | 278 } |
285 obj.parent.metric.moved(time,obj.value); | 279 obj.parent.metric.moved(time, obj.value); |
286 } | 280 } |
287 console.log("Selected "+id+' ('+time+')'); | 281 console.log("Selected " + id + ' (' + time + ')'); |
288 } | 282 } |
289 }; | 283 }; |
290 this.playback.setAttribute("playstate","ready"); | 284 this.playback.setAttribute("playstate", "ready"); |
291 this.playback.onclick = function(event) | 285 this.playback.onclick = function (event) { |
292 { | 286 var id = event.currentTarget.parentElement.getAttribute('track-id'); |
293 var id = event.currentTarget.parentElement.getAttribute('track-id'); | 287 if (event.currentTarget.getAttribute("playstate") == "ready") { |
294 if (event.currentTarget.getAttribute("playstate") == "ready") | |
295 { | |
296 audioEngineContext.play(id); | 288 audioEngineContext.play(id); |
297 } else if (event.currentTarget.getAttribute("playstate") == "playing") { | 289 } else if (event.currentTarget.getAttribute("playstate") == "playing") { |
298 audioEngineContext.stop(); | 290 audioEngineContext.stop(); |
299 } | 291 } |
300 | 292 |
301 }; | 293 }; |
302 | 294 |
303 this.enable = function() | 295 this.enable = function () { |
304 { | 296 if (this.parent.state == 1) { |
305 if (this.parent.state == 1) | 297 $(this.selector).removeClass('disabled'); |
306 { | 298 this.playback.disabled = false; |
307 $(this.selector).removeClass('disabled'); | 299 } |
308 this.playback.disabled = false; | 300 }; |
309 } | 301 this.updateLoading = function (progress) { |
310 }; | 302 if (progress != 100) { |
311 this.updateLoading = function(progress) | 303 progress = String(progress); |
312 { | 304 progress = progress.split('.')[0]; |
313 if (progress != 100) | 305 this.playback.textContent = progress + '%'; |
314 { | 306 } else { |
315 progress = String(progress); | 307 this.playback.textContent = "Play"; |
316 progress = progress.split('.')[0]; | 308 } |
317 this.playback.textContent = progress+'%'; | 309 }; |
318 } else { | 310 this.error = function () { |
319 this.playback.textContent = "Play"; | |
320 } | |
321 }; | |
322 this.error = function() { | |
323 // audioObject has an error!! | 311 // audioObject has an error!! |
324 this.playback.textContent = "Error"; | 312 this.playback.textContent = "Error"; |
325 $(this.playback).addClass("error-colour"); | 313 $(this.playback).addClass("error-colour"); |
326 } | 314 } |
327 this.startPlayback = function() | 315 this.startPlayback = function () { |
328 { | |
329 if (this.parent.specification.parent.playOne || specification.playOne) { | 316 if (this.parent.specification.parent.playOne || specification.playOne) { |
330 $('.comparator-button').text('Wait'); | 317 $('.comparator-button').text('Wait'); |
331 $('.comparator-button').attr("disabled","true"); | 318 $('.comparator-button').attr("disabled", "true"); |
332 $(this.playback).removeAttr("disabled"); | 319 $(this.playback).removeAttr("disabled"); |
333 } else { | 320 } else { |
334 $('.comparator-button').text('Listen'); | 321 $('.comparator-button').text('Listen'); |
335 } | 322 } |
336 $(this.playback).text('Stop'); | 323 $(this.playback).text('Stop'); |
337 this.playback.setAttribute("playstate","playing"); | 324 this.playback.setAttribute("playstate", "playing"); |
338 }; | 325 }; |
339 this.stopPlayback = function() | 326 this.stopPlayback = function () { |
340 { | |
341 if (this.playback.getAttribute("playstate") == "playing") { | 327 if (this.playback.getAttribute("playstate") == "playing") { |
342 $('.comparator-button').text('Listen'); | 328 $('.comparator-button').text('Listen'); |
343 $('.comparator-button').removeAttr("disabled"); | 329 $('.comparator-button').removeAttr("disabled"); |
344 this.playback.setAttribute("playstate","ready"); | 330 this.playback.setAttribute("playstate", "ready"); |
345 } | 331 } |
346 }; | 332 }; |
347 this.exportXMLDOM = function(audioObject) | 333 this.exportXMLDOM = function (audioObject) { |
348 { | 334 var node = storage.document.createElement('value'); |
349 var node = storage.document.createElement('value'); | 335 node.textContent = this.value; |
350 node.textContent = this.value; | 336 return node; |
351 return node; | 337 }; |
352 }; | 338 this.getValue = function () { |
353 this.getValue = function() { | 339 return this.value; |
354 return this.value; | 340 }; |
355 }; | 341 this.getPresentedId = function () { |
356 this.getPresentedId = function() | 342 return this.selector.children[0].textContent; |
357 { | 343 }; |
358 return this.selector.children[0].textContent; | 344 this.canMove = function () { |
359 }; | 345 return false; |
360 this.canMove = function() | 346 }; |
361 { | 347 }; |
362 return false; | 348 |
363 }; | 349 this.boxHolders = document.getElementById('box-holders'); |
364 }; | 350 this.boxHolders.innerHTML = ""; |
365 | 351 this.comparators = []; |
366 this.boxHolders = document.getElementById('box-holders'); | 352 this.selected = null; |
367 this.boxHolders.innerHTML = ""; | 353 |
368 this.comparators = []; | 354 // First generate the Audio Objects for the Audio Engine |
369 this.selected = null; | 355 for (var index = 0; index < audioHolderObject.audioElements.length; index++) { |
370 | 356 var element = audioHolderObject.audioElements[index]; |
371 // First generate the Audio Objects for the Audio Engine | |
372 for (var index=0; index<audioHolderObject.audioElements.length; index++) | |
373 { | |
374 var element = audioHolderObject.audioElements[index]; | |
375 var audioObject = audioEngineContext.newTrack(element); | 357 var audioObject = audioEngineContext.newTrack(element); |
376 if (index == audioHolderObject.outsideReference || element.type == 'outside-reference') | 358 if (index == audioHolderObject.outsideReference || element.type == 'outside-reference') { |
377 { | 359 var orNode = new interfaceContext.outsideReferenceDOM(audioObject, index, document.getElementById("outside-reference-holder")); |
378 var orNode = new interfaceContext.outsideReferenceDOM(audioObject,index,document.getElementById("outside-reference-holder")); | 360 audioObject.bindInterface(orNode); |
379 audioObject.bindInterface(orNode); | |
380 } else { | 361 } else { |
381 var label; | 362 var label; |
382 switch(audioObject.specification.parent.label) { | 363 switch (audioObject.specification.parent.label) { |
383 case "none": | 364 case "none": |
384 label = ""; | 365 label = ""; |
385 break; | 366 break; |
386 case "number": | 367 case "number": |
387 label = ""+index; | 368 label = "" + index; |
388 break; | 369 break; |
389 case "letter": | 370 case "letter": |
390 label = String.fromCharCode(97 + index); | 371 label = String.fromCharCode(97 + index); |
391 break; | 372 break; |
392 default: | 373 default: |
393 label = String.fromCharCode(65 + index); | 374 label = String.fromCharCode(65 + index); |
394 break; | 375 break; |
395 } | 376 } |
396 var node = new this.comparatorBox(audioObject,index,label); | 377 var node = new this.comparatorBox(audioObject, index, label); |
397 audioObject.bindInterface(node); | 378 audioObject.bindInterface(node); |
398 this.comparators.push(node); | 379 this.comparators.push(node); |
399 this.boxHolders.appendChild(node.box); | 380 this.boxHolders.appendChild(node.box); |
400 } | 381 } |
401 } | 382 } |
402 return this; | 383 return this; |
403 } | 384 } |
404 | 385 |
405 function resizeWindow(event) | 386 function resizeWindow(event) { |
406 { | 387 document.getElementById('submit').style.left = (window.innerWidth - 250) / 2 + 'px'; |
407 document.getElementById('submit').style.left = (window.innerWidth-250)/2 + 'px'; | 388 var numObj = interfaceContext.comparator.comparators.length; |
408 var numObj = interfaceContext.comparator.comparators.length; | 389 var boxW = numObj * 312; |
409 var boxW = numObj*312; | |
410 var diff = window.innerWidth - boxW; | 390 var diff = window.innerWidth - boxW; |
411 while (diff < 0) | 391 while (diff < 0) { |
412 { | 392 numObj = Math.ceil(numObj / 2); |
413 numObj = Math.ceil(numObj/2); | 393 boxW = numObj * 312; |
414 boxW = numObj*312; | |
415 diff = window.innerWidth - boxW; | 394 diff = window.innerWidth - boxW; |
416 } | 395 } |
417 document.getElementById('box-holders').style.marginLeft = diff/2 + 'px'; | 396 document.getElementById('box-holders').style.marginLeft = diff / 2 + 'px'; |
418 document.getElementById('box-holders').style.marginRight = diff/2 + 'px'; | 397 document.getElementById('box-holders').style.marginRight = diff / 2 + 'px'; |
419 document.getElementById('box-holders').style.width = boxW + 'px'; | 398 document.getElementById('box-holders').style.width = boxW + 'px'; |
420 | 399 |
421 var outsideRef = document.getElementById('outside-reference'); | 400 var outsideRef = document.getElementById('outside-reference'); |
422 if(outsideRef != null) | 401 if (outsideRef != null) { |
423 { | 402 outsideRef.style.left = (window.innerWidth - 120) / 2 + 'px'; |
424 outsideRef.style.left = (window.innerWidth-120)/2 + 'px'; | 403 } |
425 } | 404 } |
426 } | 405 |
427 | 406 function buttonSubmitClick() { |
428 function buttonSubmitClick() | 407 var checks = []; |
429 { | 408 checks = checks.concat(testState.currentStateMap.interfaces[0].options); |
430 var checks = []; | 409 checks = checks.concat(specification.interfaces.options); |
431 checks = checks.concat(testState.currentStateMap.interfaces[0].options); | 410 var canContinue = true; |
432 checks = checks.concat(specification.interfaces.options); | 411 |
433 var canContinue = true; | 412 for (var i = 0; i < checks.length; i++) { |
434 | 413 if (checks[i].type == 'check') { |
435 for (var i=0; i<checks.length; i++) { | 414 switch (checks[i].name) { |
436 if (checks[i].type == 'check') | 415 case 'fragmentPlayed': |
437 { | 416 // Check if all fragments have been played |
438 switch(checks[i].name) { | 417 var checkState = interfaceContext.checkAllPlayed(); |
439 case 'fragmentPlayed': | 418 if (checkState == false) { |
440 // Check if all fragments have been played | 419 canContinue = false; |
441 var checkState = interfaceContext.checkAllPlayed(); | 420 } |
442 if (checkState == false) {canContinue = false;} | 421 break; |
443 break; | 422 case 'fragmentFullPlayback': |
444 case 'fragmentFullPlayback': | 423 // Check all fragments have been played to their full length |
445 // Check all fragments have been played to their full length | 424 var checkState = interfaceContext.checkFragmentsFullyPlayed(); |
446 var checkState = interfaceContext.checkFragmentsFullyPlayed(); | 425 if (checkState == false) { |
447 if (checkState == false) {canContinue = false;} | 426 canContinue = false; |
448 break; | 427 } |
449 case 'fragmentMoved': | 428 break; |
450 // Check all fragment sliders have been moved. | 429 case 'fragmentMoved': |
451 var checkState = interfaceContext.checkAllMoved(); | 430 // Check all fragment sliders have been moved. |
452 if (checkState == false) {canContinue = false;} | 431 var checkState = interfaceContext.checkAllMoved(); |
453 break; | 432 if (checkState == false) { |
454 case 'fragmentComments': | 433 canContinue = false; |
455 // Check all fragment sliders have been moved. | 434 } |
456 var checkState = interfaceContext.checkAllCommented(); | 435 break; |
457 if (checkState == false) {canContinue = false;} | 436 case 'fragmentComments': |
458 break; | 437 // Check all fragment sliders have been moved. |
459 case 'scalerange': | 438 var checkState = interfaceContext.checkAllCommented(); |
460 // Check the scale has been used effectively | 439 if (checkState == false) { |
461 var checkState = interfaceContext.checkScaleRange(checks[i].min,checks[i].max); | 440 canContinue = false; |
462 if (checkState == false) {canContinue = false;} | 441 } |
463 break; | 442 break; |
464 default: | 443 case 'scalerange': |
465 console.log("WARNING - Check option "+checks[i].check+" is not supported on this interface"); | 444 // Check the scale has been used effectively |
466 break; | 445 var checkState = interfaceContext.checkScaleRange(checks[i].min, checks[i].max); |
467 } | 446 if (checkState == false) { |
468 | 447 canContinue = false; |
469 } | 448 } |
470 if (!canContinue) {break;} | 449 break; |
471 } | 450 default: |
472 if (canContinue) | 451 console.log("WARNING - Check option " + checks[i].check + " is not supported on this interface"); |
473 { | 452 break; |
474 if (audioEngineContext.status == 1) { | 453 } |
475 var playback = document.getElementById('playback-button'); | 454 |
476 playback.click(); | 455 } |
477 // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options | 456 if (!canContinue) { |
478 } else | 457 break; |
479 { | 458 } |
480 if (audioEngineContext.timer.testStarted == false) | 459 } |
481 { | 460 if (canContinue) { |
482 interfaceContext.lightbox.post("Warning",'You have not started the test! Please click play on a sample to begin the test!'); | 461 if (audioEngineContext.status == 1) { |
483 return; | 462 var playback = document.getElementById('playback-button'); |
484 } | 463 playback.click(); |
485 } | 464 // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options |
486 testState.advanceState(); | 465 } else { |
487 } | 466 if (audioEngineContext.timer.testStarted == false) { |
488 } | 467 interfaceContext.lightbox.post("Warning", 'You have not started the test! Please click play on a sample to begin the test!'); |
489 | 468 return; |
490 function pageXMLSave(store, pageSpecification) | 469 } |
491 { | 470 } |
492 // MANDATORY | 471 testState.advanceState(); |
493 // Saves a specific test page | 472 } |
494 // You can use this space to add any extra nodes to your XML <audioHolder> saves | 473 } |
495 // Get the current <page> information in store (remember to appendChild your data to it) | 474 |
496 // pageSpecification is the current page node configuration | 475 function pageXMLSave(store, pageSpecification) { |
497 // To create new XML nodes, use storage.document.createElement(); | 476 // MANDATORY |
498 } | 477 // Saves a specific test page |
478 // You can use this space to add any extra nodes to your XML <audioHolder> saves | |
479 // Get the current <page> information in store (remember to appendChild your data to it) | |
480 // pageSpecification is the current page node configuration | |
481 // To create new XML nodes, use storage.document.createElement(); | |
482 } |