Mercurial > hg > webaudioevaluationtool
comparison ape.js @ 1478:82f43919f385
Paper: Added interface screenshot and box plot example
author | Brecht De Man <b.deman@qmul.ac.uk> |
---|---|
date | Thu, 15 Oct 2015 20:10:00 +0100 |
parents | |
children | 6fb0b21d6f85 |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 1478:82f43919f385 |
---|---|
1 /** | |
2 * ape.js | |
3 * Create the APE interface | |
4 */ | |
5 | |
6 | |
7 // Once this is loaded and parsed, begin execution | |
8 loadInterface(); | |
9 | |
10 function loadInterface() { | |
11 | |
12 // Get the dimensions of the screen available to the page | |
13 var width = window.innerWidth; | |
14 var height = window.innerHeight; | |
15 | |
16 // The injection point into the HTML page | |
17 interfaceContext.insertPoint = document.getElementById("topLevelBody"); | |
18 var testContent = document.createElement('div'); | |
19 | |
20 testContent.id = 'testContent'; | |
21 | |
22 | |
23 // Create APE specific metric functions | |
24 audioEngineContext.metric.initialiseTest = function() | |
25 { | |
26 }; | |
27 | |
28 audioEngineContext.metric.sliderMoved = function() | |
29 { | |
30 var id = this.data; | |
31 this.data = -1; | |
32 var position = convSliderPosToRate(id); | |
33 console.log('slider ' + id + ': '+ position + ' (' + time + ')'); // DEBUG/SAFETY: show position and slider id | |
34 if (audioEngineContext.timer.testStarted) | |
35 { | |
36 audioEngineContext.audioObjects[id].metric.moved(time,position); | |
37 } | |
38 }; | |
39 | |
40 audioEngineContext.metric.sliderPlayed = function(id) | |
41 { | |
42 var time = audioEngineContext.timer.getTestTime(); | |
43 if (audioEngineContext.timer.testStarted) | |
44 { | |
45 if (this.lastClicked >= 0) | |
46 { | |
47 audioEngineContext.audioObjects[this.lastClicked].metric.listening(time); | |
48 } | |
49 this.lastClicked = id; | |
50 audioEngineContext.audioObjects[id].metric.listening(time); | |
51 } | |
52 console.log('slider ' + id + ' played (' + time + ')'); // DEBUG/SAFETY: show played slider id | |
53 }; | |
54 | |
55 // Bindings for interfaceContext | |
56 Interface.prototype.checkAllPlayed = function() | |
57 { | |
58 hasBeenPlayed = audioEngineContext.checkAllPlayed(); | |
59 if (hasBeenPlayed.length > 0) // if a fragment has not been played yet | |
60 { | |
61 str = ""; | |
62 if (hasBeenPlayed.length > 1) { | |
63 for (var i=0; i<hasBeenPlayed.length; i++) { | |
64 str = str + hasBeenPlayed[i]; | |
65 if (i < hasBeenPlayed.length-2){ | |
66 str += ", "; | |
67 } else if (i == hasBeenPlayed.length-2) { | |
68 str += " or "; | |
69 } | |
70 } | |
71 alert('You have not played fragments ' + str + ' yet. Please listen, rate and comment all samples before submitting.'); | |
72 } else { | |
73 alert('You have not played fragment ' + hasBeenPlayed[0] + ' yet. Please listen, rate and comment all samples before submitting.'); | |
74 } | |
75 return false; | |
76 } | |
77 return true; | |
78 }; | |
79 | |
80 Interface.prototype.checkAllMoved = function() { | |
81 var audioObjs = audioEngineContext.audioObjects; | |
82 var state = true; | |
83 var strNums = []; | |
84 for (var i=0; i<audioObjs.length; i++) | |
85 { | |
86 if (audioObjs[i].metric.wasMoved == false && audioObjs[i].specification.type != 'outsidereference') { | |
87 state = false; | |
88 strNums.push(i); | |
89 } | |
90 } | |
91 if (state == false) { | |
92 if (strNums.length > 1) { | |
93 var str = ""; | |
94 for (var i=0; i<strNums.length; i++) { | |
95 str = str + strNums[i]; | |
96 if (i < strNums.length-2){ | |
97 str += ", "; | |
98 } else if (i == strNums.length-2) { | |
99 str += " or "; | |
100 } | |
101 } | |
102 alert('You have not moved fragments ' + str + ' yet. Please listen, rate and comment all samples before submitting.'); | |
103 } else { | |
104 alert('You have not moved fragment ' + strNums[0] + ' yet. Please listen, rate and comment all samples before submitting.'); | |
105 } | |
106 } | |
107 return state; | |
108 }; | |
109 | |
110 Interface.prototype.checkAllCommented = function() { | |
111 var audioObjs = audioEngineContext.audioObjects; | |
112 var audioHolder = testState.stateMap[testState.stateIndex]; | |
113 var state = true; | |
114 if (audioHolder.elementComments) { | |
115 var strNums = []; | |
116 for (var i=0; i<audioObjs.length; i++) | |
117 { | |
118 if (audioObjs[i].commentDOM.trackCommentBox.value.length == 0) { | |
119 state = false; | |
120 strNums.push(i); | |
121 } | |
122 } | |
123 if (state == false) { | |
124 if (strNums.length > 1) { | |
125 var str = ""; | |
126 for (var i=0; i<strNums.length; i++) { | |
127 str = str + strNums[i]; | |
128 if (i < strNums.length-2){ | |
129 str += ", "; | |
130 } else if (i == strNums.length-2) { | |
131 str += " or "; | |
132 } | |
133 } | |
134 alert('You have not commented on fragments ' + str + ' yet. Please listen, rate and comment all samples before submitting.'); | |
135 } else { | |
136 alert('You have not commented on fragment ' + strNums[0] + ' yet. Please listen, rate and comment all samples before submitting.'); | |
137 } | |
138 } | |
139 } | |
140 return state; | |
141 }; | |
142 | |
143 Interface.prototype.checkScaleRange = function() | |
144 { | |
145 var audioObjs = audioEngineContext.audioObjects; | |
146 var audioHolder = testState.stateMap[testState.stateIndex]; | |
147 var interfaces = audioHolder.interfaces; | |
148 | |
149 var minRanking = audioObjs[0].interfaceDOM.getValue(); | |
150 var maxRanking = minRanking; | |
151 | |
152 var minScale; | |
153 var maxScale; | |
154 for (var i=0; i<interfaces[0].options.length; i++) | |
155 { | |
156 if (interfaces[0].options[i].check == "scalerange") { | |
157 minScale = interfaces[0].options[i].min; | |
158 maxScale = interfaces[0].options[i].max; | |
159 } | |
160 } | |
161 | |
162 for (var i=1; i<audioObjs.length; i++){ | |
163 if (audioObjs[i].specification.type != 'outsidereference') { | |
164 var ranking = audioObjs[i].interfaceDOM.getValue(); | |
165 if (ranking < minRanking) { minRanking = ranking;} | |
166 if (ranking > maxRanking) { maxRanking = ranking;} | |
167 } | |
168 } | |
169 if (minRanking > minScale || maxRanking < maxScale) { | |
170 alert('Please use the full width of the scale'); | |
171 return false; | |
172 } else { | |
173 return true; | |
174 } | |
175 }; | |
176 | |
177 // Bindings for audioObjects | |
178 | |
179 // Create the top div for the Title element | |
180 var titleAttr = specification.title; | |
181 var title = document.createElement('div'); | |
182 title.className = "title"; | |
183 title.align = "center"; | |
184 var titleSpan = document.createElement('span'); | |
185 | |
186 // Set title to that defined in XML, else set to default | |
187 if (titleAttr != undefined) { | |
188 titleSpan.textContent = titleAttr; | |
189 } else { | |
190 titleSpan.textContent = 'Listening test'; | |
191 } | |
192 // Insert the titleSpan element into the title div element. | |
193 title.appendChild(titleSpan); | |
194 | |
195 var pagetitle = document.createElement('div'); | |
196 pagetitle.className = "pageTitle"; | |
197 pagetitle.align = "center"; | |
198 var titleSpan = document.createElement('span'); | |
199 titleSpan.id = "pageTitle"; | |
200 pagetitle.appendChild(titleSpan); | |
201 | |
202 // Create Interface buttons! | |
203 var interfaceButtons = document.createElement('div'); | |
204 interfaceButtons.id = 'interface-buttons'; | |
205 | |
206 // Create playback start/stop points | |
207 var playback = document.createElement("button"); | |
208 playback.innerHTML = 'Stop'; | |
209 playback.id = 'playback-button'; | |
210 // onclick function. Check if it is playing or not, call the correct function in the | |
211 // audioEngine, change the button text to reflect the next state. | |
212 playback.onclick = function() { | |
213 if (audioEngineContext.status == 1) { | |
214 audioEngineContext.stop(); | |
215 this.innerHTML = 'Stop'; | |
216 var time = audioEngineContext.timer.getTestTime(); | |
217 console.log('Stopped at ' + time); // DEBUG/SAFETY | |
218 } | |
219 }; | |
220 // Create Submit (save) button | |
221 var submit = document.createElement("button"); | |
222 submit.innerHTML = 'Submit'; | |
223 submit.onclick = buttonSubmitClick; | |
224 submit.id = 'submit-button'; | |
225 // Append the interface buttons into the interfaceButtons object. | |
226 interfaceButtons.appendChild(playback); | |
227 interfaceButtons.appendChild(submit); | |
228 | |
229 // Now create the slider and HTML5 canvas boxes | |
230 | |
231 // Create the div box to center align | |
232 var sliderBox = document.createElement('div'); | |
233 sliderBox.className = 'sliderCanvasDiv'; | |
234 sliderBox.id = 'sliderCanvasHolder'; | |
235 | |
236 // Create the slider box to hold the slider elements | |
237 var canvas = document.createElement('div'); | |
238 canvas.id = 'slider'; | |
239 canvas.align = "left"; | |
240 canvas.addEventListener('dragover',function(event){ | |
241 event.preventDefault(); | |
242 event.dataTransfer.effectAllowed = 'none'; | |
243 event.dataTransfer.dropEffect = 'copy'; | |
244 return false; | |
245 },false); | |
246 var sliderMargin = document.createAttribute('marginsize'); | |
247 sliderMargin.nodeValue = 42; // Set default margins to 42px either side | |
248 // Must have a known EXACT width, as this is used later to determine the ratings | |
249 var w = (Number(sliderMargin.nodeValue)+8)*2; | |
250 canvas.style.width = width - w +"px"; | |
251 canvas.style.marginLeft = sliderMargin.nodeValue +'px'; | |
252 canvas.setAttributeNode(sliderMargin); | |
253 sliderBox.appendChild(canvas); | |
254 | |
255 // Create the div to hold any scale objects | |
256 var scale = document.createElement('div'); | |
257 scale.className = 'sliderScale'; | |
258 scale.id = 'sliderScaleHolder'; | |
259 scale.align = 'left'; | |
260 sliderBox.appendChild(scale); | |
261 | |
262 // Global parent for the comment boxes on the page | |
263 var feedbackHolder = document.createElement('div'); | |
264 feedbackHolder.id = 'feedbackHolder'; | |
265 | |
266 testContent.style.zIndex = 1; | |
267 interfaceContext.insertPoint.innerHTML = null; // Clear the current schema | |
268 | |
269 // Inject into HTML | |
270 testContent.appendChild(title); // Insert the title | |
271 testContent.appendChild(pagetitle); | |
272 testContent.appendChild(interfaceButtons); | |
273 testContent.appendChild(sliderBox); | |
274 testContent.appendChild(feedbackHolder); | |
275 interfaceContext.insertPoint.appendChild(testContent); | |
276 | |
277 // Load the full interface | |
278 testState.initialise(); | |
279 testState.advanceState(); | |
280 | |
281 } | |
282 | |
283 function loadTest(audioHolderObject) | |
284 { | |
285 | |
286 // Reset audioEngineContext.Metric globals for new test | |
287 audioEngineContext.newTestPage(); | |
288 | |
289 var id = audioHolderObject.id; | |
290 | |
291 var feedbackHolder = document.getElementById('feedbackHolder'); | |
292 var canvas = document.getElementById('slider'); | |
293 feedbackHolder.innerHTML = null; | |
294 canvas.innerHTML = null; | |
295 | |
296 var interfaceObj = audioHolderObject.interfaces; | |
297 for (var k=0; k<interfaceObj.length; k++) { | |
298 for (var i=0; i<interfaceObj[k].options.length; i++) | |
299 { | |
300 if (interfaceObj[k].options[i].type == 'option' && interfaceObj[k].options[i].name == 'playhead') | |
301 { | |
302 var playbackHolder = document.getElementById('playback-holder'); | |
303 if (playbackHolder == null) | |
304 { | |
305 playbackHolder = document.createElement('div'); | |
306 playbackHolder.style.width = "100%"; | |
307 playbackHolder.align = 'center'; | |
308 playbackHolder.appendChild(interfaceContext.playhead.object); | |
309 feedbackHolder.appendChild(playbackHolder); | |
310 } | |
311 } else if (interfaceObj[k].options[i].type == 'option' && interfaceObj[k].options[i].name == 'page-count') | |
312 { | |
313 var pagecountHolder = document.getElementById('page-count'); | |
314 if (pagecountHolder == null) | |
315 { | |
316 pagecountHolder = document.createElement('div'); | |
317 pagecountHolder.id = 'page-count'; | |
318 } | |
319 pagecountHolder.innerHTML = '<span>Test '+(audioHolderObject.presentedId+1)+' of '+specification.audioHolders.length+'</span>'; | |
320 var inject = document.getElementById('interface-buttons'); | |
321 inject.appendChild(pagecountHolder); | |
322 } | |
323 } | |
324 } | |
325 // Setup question title | |
326 | |
327 var commentBoxPrefix = "Comment on track"; | |
328 if (interfaceObj.length != 0) { | |
329 interfaceObj = interfaceObj[0]; | |
330 var titleNode = interfaceObj.title; | |
331 if (titleNode != undefined) | |
332 { | |
333 document.getElementById('pageTitle').textContent = titleNode; | |
334 } | |
335 var positionScale = canvas.style.width.substr(0,canvas.style.width.length-2); | |
336 var offset = Number(document.getElementById('slider').attributes['marginsize'].value); | |
337 var scale = document.getElementById('sliderScaleHolder'); | |
338 scale.innerHTML = null; | |
339 $(interfaceObj.scale).each(function(index,scaleObj){ | |
340 var value = document.createAttribute('value'); | |
341 var position = Number(scaleObj[0])*0.01; | |
342 value.nodeValue = position; | |
343 var pixelPosition = (position*positionScale)+offset; | |
344 var scaleDOM = document.createElement('span'); | |
345 scaleDOM.textContent = scaleObj[1]; | |
346 scale.appendChild(scaleDOM); | |
347 scaleDOM.style.left = Math.floor((pixelPosition-($(scaleDOM).width()/2)))+'px'; | |
348 scaleDOM.setAttributeNode(value); | |
349 }); | |
350 | |
351 if (interfaceObj.commentBoxPrefix != undefined) { | |
352 commentBoxPrefix = interfaceObj.commentBoxPrefix; | |
353 } | |
354 } | |
355 | |
356 /// CHECK FOR SAMPLE RATE COMPATIBILITY | |
357 if (audioHolderObject.sampleRate != undefined) { | |
358 if (Number(audioHolderObject.sampleRate) != audioContext.sampleRate) { | |
359 var errStr = 'Sample rates do not match! Requested '+Number(audioHolderObject.sampleRate)+', got '+audioContext.sampleRate+'. Please set the sample rate to match before completing this test.'; | |
360 alert(errStr); | |
361 return; | |
362 } | |
363 } | |
364 | |
365 var commentShow = audioHolderObject.elementComments; | |
366 | |
367 var loopPlayback = audioHolderObject.loop; | |
368 | |
369 audioEngineContext.loopPlayback = loopPlayback; | |
370 // Create AudioEngine bindings for playback | |
371 audioEngineContext.selectedTrack = function(id) { | |
372 console.log('Deprecated'); | |
373 }; | |
374 | |
375 currentTestHolder = document.createElement('audioHolder'); | |
376 currentTestHolder.id = audioHolderObject.id; | |
377 currentTestHolder.repeatCount = audioHolderObject.repeatCount; | |
378 | |
379 // Delete any previous audioObjects associated with the audioEngine | |
380 audioEngineContext.audioObjects = []; | |
381 interfaceContext.deleteCommentBoxes(); | |
382 interfaceContext.deleteCommentQuestions(); | |
383 | |
384 // Find all the audioElements from the audioHolder | |
385 $(audioHolderObject.audioElements).each(function(index,element){ | |
386 // Find URL of track | |
387 // In this jQuery loop, variable 'this' holds the current audioElement. | |
388 | |
389 // Now load each audio sample. First create the new track by passing the full URL | |
390 var trackURL = audioHolderObject.hostURL + element.url; | |
391 var audioObject = audioEngineContext.newTrack(element); | |
392 | |
393 var node = interfaceContext.createCommentBox(audioObject); | |
394 | |
395 // Create a slider per track | |
396 audioObject.interfaceDOM = new sliderObject(audioObject); | |
397 | |
398 // Distribute it randomnly | |
399 var w = window.innerWidth - (offset+8)*2; | |
400 w = Math.random()*w; | |
401 w = Math.floor(w+(offset+8)); | |
402 audioObject.interfaceDOM.trackSliderObj.style.left = w+'px'; | |
403 | |
404 canvas.appendChild(audioObject.interfaceDOM.trackSliderObj); | |
405 audioObject.metric.initialised(convSliderPosToRate(audioObject.interfaceDOM.trackSliderObj)); | |
406 | |
407 }); | |
408 if (commentShow) { | |
409 interfaceContext.showCommentBoxes(feedbackHolder,true); | |
410 } | |
411 | |
412 $(audioHolderObject.commentQuestions).each(function(index,element) { | |
413 var node = interfaceContext.createCommentQuestion(element); | |
414 feedbackHolder.appendChild(node.holder); | |
415 }); | |
416 | |
417 // Construct outside reference; | |
418 if (audioHolderObject.outsideReference != null) { | |
419 var outsideReferenceHolder = document.createElement('div'); | |
420 outsideReferenceHolder.id = 'outside-reference'; | |
421 outsideReferenceHolderspan = document.createElement('span'); | |
422 outsideReferenceHolderspan.textContent = 'Reference'; | |
423 outsideReferenceHolder.appendChild(outsideReferenceHolderspan); | |
424 | |
425 var audioObject = audioEngineContext.newTrack(audioHolderObject.outsideReference); | |
426 | |
427 outsideReferenceHolder.onclick = function(event) | |
428 { | |
429 audioEngineContext.play(audioEngineContext.audioObjects.length-1); | |
430 $('.track-slider').removeClass('track-slider-playing'); | |
431 $('.comment-div').removeClass('comment-box-playing'); | |
432 if (event.currentTarget.nodeName == 'DIV') { | |
433 $(event.currentTarget).addClass('track-slider-playing'); | |
434 } else { | |
435 $(event.currentTarget.parentElement).addClass('track-slider-playing'); | |
436 } | |
437 }; | |
438 | |
439 document.getElementById('interface-buttons').appendChild(outsideReferenceHolder); | |
440 } | |
441 | |
442 | |
443 //testWaitIndicator(); | |
444 } | |
445 | |
446 function sliderObject(audioObject) { | |
447 // Create a new slider object; | |
448 this.parent = audioObject; | |
449 this.trackSliderObj = document.createElement('div'); | |
450 this.trackSliderObj.className = 'track-slider track-slider-disabled'; | |
451 this.trackSliderObj.id = 'track-slider-'+audioObject.id; | |
452 | |
453 this.trackSliderObj.setAttribute('trackIndex',audioObject.id); | |
454 this.trackSliderObj.innerHTML = '<span>'+audioObject.id+'</span>'; | |
455 this.trackSliderObj.draggable = true; | |
456 this.trackSliderObj.ondragend = dragEnd; | |
457 | |
458 this.trackSliderObj.ondragstart = function(event){ | |
459 event.dataTransfer.setData('Text',null); | |
460 }; | |
461 | |
462 this.trackSliderObj.ondrop = function(event) | |
463 { | |
464 if(event.stopPropagation) {event.stopPropagation();} | |
465 return false; | |
466 }; | |
467 | |
468 // Onclick, switch playback to that track | |
469 this.trackSliderObj.onclick = function(event) { | |
470 // Cannot continue to issue play command until audioObjects reported as ready! | |
471 // Get the track ID from the object ID | |
472 var element; | |
473 if (event.currentTarget.nodeName == "SPAN") { | |
474 element = event.currentTarget.parentNode; | |
475 } else { | |
476 element = event.currentTarget; | |
477 } | |
478 var id = Number(element.attributes['trackIndex'].value); | |
479 //audioEngineContext.metric.sliderPlayed(id); | |
480 audioEngineContext.play(id); | |
481 // Currently playing track red, rest green | |
482 | |
483 //document.getElementById('track-slider-'+index).style.backgroundColor = "#FF0000"; | |
484 $('.track-slider').removeClass('track-slider-playing'); | |
485 $(element).addClass('track-slider-playing'); | |
486 $('.comment-div').removeClass('comment-box-playing'); | |
487 $('#comment-div-'+id).addClass('comment-box-playing'); | |
488 var outsideReference = document.getElementById('outside-reference'); | |
489 if (outsideReference != undefined) | |
490 $(outsideReference).removeClass('track-slider-playing'); | |
491 }; | |
492 | |
493 this.enable = function() { | |
494 if (this.parent.state == 1) | |
495 { | |
496 $(this.trackSliderObj).removeClass('track-slider-disabled'); | |
497 } | |
498 }; | |
499 | |
500 this.exportXMLDOM = function(audioObject) { | |
501 // Called by the audioObject holding this element. Must be present | |
502 var node = document.createElement('value'); | |
503 node.textContent = convSliderPosToRate(this.trackSliderObj); | |
504 return node; | |
505 }; | |
506 this.getValue = function() { | |
507 return convSliderPosToRate(this.trackSliderObj); | |
508 }; | |
509 } | |
510 | |
511 function dragEnd(ev) { | |
512 // Function call when a div has been dropped | |
513 var slider = document.getElementById('slider'); | |
514 var marginSize = Number(slider.attributes['marginsize'].value); | |
515 var w = slider.style.width; | |
516 w = Number(w.substr(0,w.length-2)); | |
517 var x = ev.screenX; | |
518 | |
519 x += Math.abs(window.screenX); | |
520 x = x % window.outerWidth; | |
521 | |
522 if (x >= marginSize && x < w+marginSize) { | |
523 this.style.left = (x)+'px'; | |
524 } else { | |
525 if (x<marginSize) { | |
526 this.style.left = marginSize+'px'; | |
527 } else { | |
528 this.style.left = (w+marginSize) + 'px'; | |
529 } | |
530 } | |
531 var time = audioEngineContext.timer.getTestTime(); | |
532 var id = Number(ev.currentTarget.getAttribute('trackindex')); | |
533 audioEngineContext.audioObjects[id].metric.moved(time,convSliderPosToRate(ev.currentTarget)); | |
534 console.log('slider '+id+' moved to '+convSliderPosToRate(ev.currentTarget)+' ('+time+')'); | |
535 } | |
536 | |
537 function buttonSubmitClick() | |
538 { | |
539 var checks = testState.currentStateMap[testState.currentIndex].interfaces[0].options; | |
540 var canContinue = true; | |
541 | |
542 // Check that the anchor and reference objects are correctly placed | |
543 if (interfaceContext.checkHiddenAnchor() == false) {return;} | |
544 if (interfaceContext.checkHiddenReference() == false) {return;} | |
545 | |
546 for (var i=0; i<checks.length; i++) { | |
547 if (checks[i].type == 'check') | |
548 { | |
549 switch(checks[i].check) { | |
550 case 'fragmentPlayed': | |
551 // Check if all fragments have been played | |
552 var checkState = interfaceContext.checkAllPlayed(); | |
553 if (checkState == false) {canContinue = false;} | |
554 break; | |
555 case 'fragmentFullPlayback': | |
556 // Check all fragments have been played to their full length | |
557 var checkState = interfaceContext.checkAllPlayed(); | |
558 if (checkState == false) {canContinue = false;} | |
559 console.log('NOTE: fragmentFullPlayback not currently implemented, performing check fragmentPlayed instead'); | |
560 break; | |
561 case 'fragmentMoved': | |
562 // Check all fragment sliders have been moved. | |
563 var checkState = interfaceContext.checkAllMoved(); | |
564 if (checkState == false) {canContinue = false;} | |
565 break; | |
566 case 'fragmentComments': | |
567 // Check all fragment sliders have been moved. | |
568 var checkState = interfaceContext.checkAllCommented(); | |
569 if (checkState == false) {canContinue = false;} | |
570 break; | |
571 case 'scalerange': | |
572 // Check the scale is used to its full width outlined by the node | |
573 var checkState = interfaceContext.checkScaleRange(); | |
574 if (checkState == false) {canContinue = false;} | |
575 break; | |
576 } | |
577 | |
578 } | |
579 if (!canContinue) {break;} | |
580 } | |
581 | |
582 if (canContinue) { | |
583 if (audioEngineContext.status == 1) { | |
584 var playback = document.getElementById('playback-button'); | |
585 playback.click(); | |
586 // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options | |
587 } else | |
588 { | |
589 if (audioEngineContext.timer.testStarted == false) | |
590 { | |
591 alert('You have not started the test! Please press start to begin the test!'); | |
592 return; | |
593 } | |
594 } | |
595 testState.advanceState(); | |
596 } | |
597 } | |
598 | |
599 function convSliderPosToRate(slider) | |
600 { | |
601 var w = document.getElementById('slider').style.width; | |
602 var marginsize = Number(document.getElementById('slider').attributes['marginsize'].value); | |
603 var maxPix = w.substr(0,w.length-2); | |
604 var pix = slider.style.left; | |
605 pix = pix.substr(0,pix.length-2); | |
606 var rate = (pix-marginsize)/maxPix; | |
607 return rate; | |
608 } | |
609 | |
610 function resizeWindow(event){ | |
611 // Function called when the window has been resized. | |
612 // MANDATORY FUNCTION | |
613 | |
614 // Store the slider marker values | |
615 var holdValues = []; | |
616 $(".track-slider").each(function(index,sliderObj){ | |
617 holdValues.push(convSliderPosToRate(sliderObj)); | |
618 }); | |
619 | |
620 var width = event.target.innerWidth; | |
621 var canvas = document.getElementById('sliderCanvasHolder'); | |
622 var sliderDiv = canvas.children[0]; | |
623 var sliderScaleDiv = canvas.children[1]; | |
624 var marginsize = Number(sliderDiv.attributes['marginsize'].value); | |
625 var w = (marginsize+8)*2; | |
626 sliderDiv.style.width = width - w + 'px'; | |
627 var width = width - w; | |
628 // Move sliders into new position | |
629 $(".track-slider").each(function(index,sliderObj){ | |
630 var pos = holdValues[index]; | |
631 var pix = pos * width; | |
632 sliderObj.style.left = pix+marginsize+'px'; | |
633 }); | |
634 | |
635 // Move scale labels | |
636 $(sliderScaleDiv.children).each(function(index,scaleObj){ | |
637 var position = Number(scaleObj.attributes['value'].value); | |
638 var pixelPosition = (position*width)+marginsize; | |
639 scaleObj.style.left = Math.floor((pixelPosition-($(scaleObj).width()/2)))+'px'; | |
640 }); | |
641 } | |
642 | |
643 function pageXMLSave(store, testXML) | |
644 { | |
645 // Saves a specific test page | |
646 var xmlDoc = store; | |
647 // Check if any session wide metrics are enabled | |
648 | |
649 var commentShow = testXML.elementComments; | |
650 | |
651 var metric = document.createElement('metric'); | |
652 if (audioEngineContext.metric.enableTestTimer) | |
653 { | |
654 var testTime = document.createElement('metricResult'); | |
655 testTime.id = 'testTime'; | |
656 testTime.textContent = audioEngineContext.timer.testDuration; | |
657 metric.appendChild(testTime); | |
658 } | |
659 xmlDoc.appendChild(metric); | |
660 var audioObjects = audioEngineContext.audioObjects; | |
661 for (var i=0; i<audioObjects.length; i++) | |
662 { | |
663 var audioElement = audioEngineContext.audioObjects[i].exportXMLDOM(); | |
664 audioElement.setAttribute('presentedId',i); | |
665 xmlDoc.appendChild(audioElement); | |
666 } | |
667 | |
668 $(interfaceContext.commentQuestions).each(function(index,element){ | |
669 var node = element.exportXMLDOM(); | |
670 xmlDoc.appendChild(node); | |
671 }); | |
672 store = xmlDoc; | |
673 } |