Mercurial > hg > webaudioevaluationtool
comparison ape.js @ 749:07c996307cbd
Bug #1510 Fixed.
author | Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk> |
---|---|
date | Mon, 21 Dec 2015 11:53:05 +0000 |
parents | |
children | 56ee920d5d85 |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 749:07c996307cbd |
---|---|
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 // Bindings for interfaceContext | |
23 interfaceContext.checkAllPlayed = function() | |
24 { | |
25 hasBeenPlayed = audioEngineContext.checkAllPlayed(); | |
26 if (hasBeenPlayed.length > 0) // if a fragment has not been played yet | |
27 { | |
28 str = ""; | |
29 if (hasBeenPlayed.length > 1) { | |
30 for (var i=0; i<hasBeenPlayed.length; i++) { | |
31 str = str + hasBeenPlayed[i]; | |
32 if (i < hasBeenPlayed.length-2){ | |
33 str += ", "; | |
34 } else if (i == hasBeenPlayed.length-2) { | |
35 str += " or "; | |
36 } | |
37 } | |
38 alert('You have not played fragments ' + str + ' yet. Please listen, rate and comment all samples before submitting.'); | |
39 } else { | |
40 alert('You have not played fragment ' + hasBeenPlayed[0] + ' yet. Please listen, rate and comment all samples before submitting.'); | |
41 } | |
42 return false; | |
43 } | |
44 return true; | |
45 }; | |
46 | |
47 interfaceContext.checkAllMoved = function() { | |
48 var state = true; | |
49 var str = 'You have not moved the following sliders. '; | |
50 for (var i=0; i<this.interfaceSliders.length; i++) | |
51 { | |
52 var interfaceTID = []; | |
53 for (var j=0; j<this.interfaceSliders[i].metrics.length; j++) | |
54 { | |
55 if (this.interfaceSliders[i].metrics[j].wasMoved == false) | |
56 { | |
57 state = false; | |
58 interfaceTID.push(j); | |
59 } | |
60 } | |
61 if (interfaceTID.length != 0) | |
62 { | |
63 var interfaceName = this.interfaceSliders[i].interfaceObject.title; | |
64 if (interfaceName == undefined) { | |
65 str += 'On axis '+String(i+1)+' you must move '; | |
66 } else { | |
67 str += 'On axis "'+interfaceName+'" you must move '; | |
68 } | |
69 if (interfaceTID.length == 1) | |
70 { | |
71 str += 'slider '+interfaceTID[0]+'. '; | |
72 } | |
73 else { | |
74 str += 'sliders '; | |
75 for (var k=0; k<interfaceTID.length-1; k++) | |
76 { | |
77 str += interfaceTID[k]+', '; | |
78 } | |
79 str += interfaceTID[interfaceTID.length-1] +'. '; | |
80 } | |
81 } | |
82 } | |
83 if (state != true) | |
84 { | |
85 alert(str); | |
86 console.log(str); | |
87 } | |
88 return state; | |
89 }; | |
90 | |
91 Interface.prototype.checkAllCommented = function() { | |
92 var audioObjs = audioEngineContext.audioObjects; | |
93 var audioHolder = testState.stateMap[testState.stateIndex]; | |
94 var state = true; | |
95 if (audioHolder.elementComments) { | |
96 var strNums = []; | |
97 for (var i=0; i<audioObjs.length; i++) | |
98 { | |
99 if (audioObjs[i].commentDOM.trackCommentBox.value.length == 0) { | |
100 state = false; | |
101 strNums.push(i); | |
102 } | |
103 } | |
104 if (state == false) { | |
105 if (strNums.length > 1) { | |
106 var str = ""; | |
107 for (var i=0; i<strNums.length; i++) { | |
108 str = str + strNums[i]; | |
109 if (i < strNums.length-2){ | |
110 str += ", "; | |
111 } else if (i == strNums.length-2) { | |
112 str += " or "; | |
113 } | |
114 } | |
115 alert('You have not commented on fragments ' + str + ' yet. Please listen, rate and comment all samples before submitting.'); | |
116 } else { | |
117 alert('You have not commented on fragment ' + strNums[0] + ' yet. Please listen, rate and comment all samples before submitting.'); | |
118 } | |
119 } | |
120 } | |
121 return state; | |
122 }; | |
123 | |
124 Interface.prototype.checkScaleRange = function() | |
125 { | |
126 var audioObjs = audioEngineContext.audioObjects; | |
127 var audioHolder = testState.stateMap[testState.stateIndex]; | |
128 var state = true; | |
129 var str = ''; | |
130 for (var i=0; i<this.interfaceSliders.length; i++) | |
131 { | |
132 var minScale; | |
133 var maxScale; | |
134 var interfaceObject = interfaceContext.interfaceSliders[0].interfaceObject; | |
135 for (var j=0; j<interfaceObject.options.length; j++) | |
136 { | |
137 if (interfaceObject.options[j].check == "scalerange") { | |
138 minScale = interfaceObject.options[j].min; | |
139 maxScale = interfaceObject.options[j].max; | |
140 break; | |
141 } | |
142 } | |
143 var minRanking = convSliderPosToRate(this.interfaceSliders[i].sliders[0]); | |
144 var maxRanking = minRanking; | |
145 for (var j=1; j<this.interfaceSliders[i].sliders.length; j++) | |
146 { | |
147 var ranking = convSliderPosToRate(this.interfaceSliders[i].sliders[j]); | |
148 if (ranking < minRanking) | |
149 { | |
150 minRanking = ranking; | |
151 } else if (ranking > maxRanking) | |
152 { | |
153 maxRanking = ranking; | |
154 } | |
155 } | |
156 if (minRanking > minScale || maxRanking < maxScale) | |
157 { | |
158 state = false; | |
159 str += 'On axis "'+this.interfaceSliders[i].interfaceObject.title+'" you have not used the full width of the scale. '; | |
160 } | |
161 } | |
162 if (state != true) | |
163 { | |
164 alert(str); | |
165 console.log(str); | |
166 } | |
167 return state; | |
168 }; | |
169 | |
170 Interface.prototype.objectSelected = null; | |
171 Interface.prototype.objectMoved = false; | |
172 Interface.prototype.selectObject = function(object) | |
173 { | |
174 if (this.objectSelected == null) | |
175 { | |
176 this.objectSelected = object; | |
177 this.objectMoved = false; | |
178 } | |
179 }; | |
180 Interface.prototype.moveObject = function() | |
181 { | |
182 if (this.objectMoved == false) | |
183 { | |
184 this.objectMoved = true; | |
185 } | |
186 }; | |
187 Interface.prototype.releaseObject = function() | |
188 { | |
189 this.objectSelected = null; | |
190 this.objectMoved = false; | |
191 }; | |
192 Interface.prototype.getSelectedObject = function() | |
193 { | |
194 return this.objectSelected; | |
195 }; | |
196 Interface.prototype.hasSelectedObjectMoved = function() | |
197 { | |
198 return this.objectMoved; | |
199 }; | |
200 | |
201 // Bindings for slider interfaces | |
202 Interface.prototype.interfaceSliders = []; | |
203 | |
204 // Bindings for audioObjects | |
205 | |
206 // Create the top div for the Title element | |
207 var titleAttr = specification.title; | |
208 var title = document.createElement('div'); | |
209 title.className = "title"; | |
210 title.align = "center"; | |
211 var titleSpan = document.createElement('span'); | |
212 | |
213 // Set title to that defined in XML, else set to default | |
214 if (titleAttr != undefined) { | |
215 titleSpan.textContent = titleAttr; | |
216 } else { | |
217 titleSpan.textContent = 'Listening test'; | |
218 } | |
219 // Insert the titleSpan element into the title div element. | |
220 title.appendChild(titleSpan); | |
221 | |
222 // Create Interface buttons! | |
223 var interfaceButtons = document.createElement('div'); | |
224 interfaceButtons.id = 'interface-buttons'; | |
225 | |
226 // Create playback start/stop points | |
227 var playback = document.createElement("button"); | |
228 playback.innerHTML = 'Stop'; | |
229 playback.id = 'playback-button'; | |
230 // onclick function. Check if it is playing or not, call the correct function in the | |
231 // audioEngine, change the button text to reflect the next state. | |
232 playback.onclick = function() { | |
233 if (audioEngineContext.status == 1) { | |
234 audioEngineContext.stop(); | |
235 this.innerHTML = 'Stop'; | |
236 var time = audioEngineContext.timer.getTestTime(); | |
237 console.log('Stopped at ' + time); // DEBUG/SAFETY | |
238 } | |
239 }; | |
240 // Create Submit (save) button | |
241 var submit = document.createElement("button"); | |
242 submit.innerHTML = 'Submit'; | |
243 submit.onclick = buttonSubmitClick; | |
244 submit.id = 'submit-button'; | |
245 // Append the interface buttons into the interfaceButtons object. | |
246 interfaceButtons.appendChild(playback); | |
247 interfaceButtons.appendChild(submit); | |
248 | |
249 var sliderHolder = document.createElement("div"); | |
250 sliderHolder.id = "slider-holder"; | |
251 | |
252 | |
253 // Global parent for the comment boxes on the page | |
254 var feedbackHolder = document.createElement('div'); | |
255 feedbackHolder.id = 'feedbackHolder'; | |
256 | |
257 testContent.style.zIndex = 1; | |
258 interfaceContext.insertPoint.innerHTML = null; // Clear the current schema | |
259 | |
260 // Inject into HTML | |
261 testContent.appendChild(title); // Insert the title | |
262 testContent.appendChild(interfaceButtons); | |
263 testContent.appendChild(sliderHolder); | |
264 testContent.appendChild(feedbackHolder); | |
265 interfaceContext.insertPoint.appendChild(testContent); | |
266 | |
267 // Load the full interface | |
268 testState.initialise(); | |
269 testState.advanceState(); | |
270 | |
271 } | |
272 | |
273 function loadTest(audioHolderObject) | |
274 { | |
275 var width = window.innerWidth; | |
276 var height = window.innerHeight; | |
277 var id = audioHolderObject.id; | |
278 | |
279 interfaceContext.interfaceSliders = []; | |
280 | |
281 var feedbackHolder = document.getElementById('feedbackHolder'); | |
282 var sliderHolder = document.getElementById('slider-holder'); | |
283 feedbackHolder.innerHTML = null; | |
284 sliderHolder.innerHTML = null; | |
285 | |
286 // Delete outside reference | |
287 var outsideReferenceHolder = document.getElementById('outside-reference'); | |
288 if (outsideReferenceHolder != null) { | |
289 document.getElementById('interface-buttons').removeChild(outsideReferenceHolder); | |
290 } | |
291 | |
292 var interfaceObj = audioHolderObject.interfaces; | |
293 for (var k=0; k<interfaceObj.length; k++) { | |
294 // Create the div box to center align | |
295 interfaceContext.interfaceSliders.push(new interfaceSliderHolder(interfaceObj[k])); | |
296 for (var i=0; i<interfaceObj[k].options.length; i++) | |
297 { | |
298 if (interfaceObj[k].options[i].type == 'option' && interfaceObj[k].options[i].name == 'playhead') | |
299 { | |
300 var playbackHolder = document.getElementById('playback-holder'); | |
301 if (playbackHolder == null) | |
302 { | |
303 playbackHolder = document.createElement('div'); | |
304 playbackHolder.style.width = "100%"; | |
305 playbackHolder.align = 'center'; | |
306 playbackHolder.appendChild(interfaceContext.playhead.object); | |
307 feedbackHolder.appendChild(playbackHolder); | |
308 } | |
309 } else if (interfaceObj[k].options[i].type == 'option' && interfaceObj[k].options[i].name == 'page-count') | |
310 { | |
311 var pagecountHolder = document.getElementById('page-count'); | |
312 if (pagecountHolder == null) | |
313 { | |
314 pagecountHolder = document.createElement('div'); | |
315 pagecountHolder.id = 'page-count'; | |
316 } | |
317 pagecountHolder.innerHTML = '<span>Page '+(audioHolderObject.presentedId+1)+' of '+specification.audioHolders.length+'</span>'; | |
318 var inject = document.getElementById('interface-buttons'); | |
319 inject.appendChild(pagecountHolder); | |
320 } | |
321 } | |
322 } | |
323 | |
324 var commentBoxPrefix = "Comment on track"; | |
325 | |
326 var commentShow = audioHolderObject.elementComments; | |
327 | |
328 var loopPlayback = audioHolderObject.loop; | |
329 | |
330 currentTestHolder = document.createElement('audioHolder'); | |
331 currentTestHolder.id = audioHolderObject.id; | |
332 currentTestHolder.repeatCount = audioHolderObject.repeatCount; | |
333 | |
334 // Find all the audioElements from the audioHolder | |
335 $(audioHolderObject.audioElements).each(function(index,element){ | |
336 // Find URL of track | |
337 // In this jQuery loop, variable 'this' holds the current audioElement. | |
338 | |
339 // Check if an outside reference | |
340 if (index == audioHolderObject.outsideReference) | |
341 { | |
342 return; | |
343 } | |
344 | |
345 // Now load each audio sample. First create the new track by passing the full URL | |
346 var trackURL = audioHolderObject.hostURL + element.url; | |
347 var audioObject = audioEngineContext.newTrack(element); | |
348 | |
349 var node = interfaceContext.createCommentBox(audioObject); | |
350 | |
351 // Create a slider per track | |
352 audioObject.interfaceDOM = new sliderObject(audioObject,interfaceObj); | |
353 audioObject.metric.initialPosition = convSliderPosToRate(audioObject.interfaceDOM.trackSliderObjects[0]); | |
354 if (audioObject.state == 1) | |
355 { | |
356 audioObject.interfaceDOM.enable(); | |
357 } | |
358 | |
359 }); | |
360 | |
361 $('.track-slider').mousedown(function(event) { | |
362 interfaceContext.selectObject($(this)[0]); | |
363 }); | |
364 | |
365 $('.track-slider').mousemove(function(event) { | |
366 event.preventDefault(); | |
367 }); | |
368 | |
369 $('.slider').mousemove(function(event) { | |
370 event.preventDefault(); | |
371 var obj = interfaceContext.getSelectedObject(); | |
372 if (obj == null) {return;} | |
373 $(obj).css("left",event.clientX + "px"); | |
374 interfaceContext.moveObject(); | |
375 }); | |
376 | |
377 $(document).mouseup(function(event){ | |
378 event.preventDefault(); | |
379 var obj = interfaceContext.getSelectedObject(); | |
380 if (obj == null) {return;} | |
381 var interfaceID = obj.parentElement.getAttribute("interfaceid"); | |
382 var trackID = obj.getAttribute("trackindex"); | |
383 if (interfaceContext.hasSelectedObjectMoved() == true) | |
384 { | |
385 var l = $(obj).css("left"); | |
386 var id = obj.getAttribute('trackIndex'); | |
387 var time = audioEngineContext.timer.getTestTime(); | |
388 var rate = convSliderPosToRate(obj); | |
389 audioEngineContext.audioObjects[id].metric.moved(time,rate); | |
390 interfaceContext.interfaceSliders[interfaceID].metrics[trackID].moved(time,rate); | |
391 console.log("slider "+id+" moved to "+rate+' ('+time+')'); | |
392 } else { | |
393 var id = Number(obj.attributes['trackIndex'].value); | |
394 //audioEngineContext.metric.sliderPlayed(id); | |
395 audioEngineContext.play(id); | |
396 // Currently playing track red, rest green | |
397 | |
398 $('.track-slider').removeClass('track-slider-playing'); | |
399 var name = ".track-slider-"+obj.getAttribute("trackindex"); | |
400 $(name).addClass('track-slider-playing'); | |
401 $('.comment-div').removeClass('comment-box-playing'); | |
402 $('#comment-div-'+id).addClass('comment-box-playing'); | |
403 var outsideReference = document.getElementById('outside-reference'); | |
404 if (outsideReference != undefined) | |
405 $(outsideReference).removeClass('track-slider-playing'); | |
406 } | |
407 interfaceContext.releaseObject(); | |
408 }); | |
409 | |
410 | |
411 if (commentShow) { | |
412 interfaceContext.showCommentBoxes(feedbackHolder,true); | |
413 } | |
414 | |
415 $(audioHolderObject.commentQuestions).each(function(index,element) { | |
416 var node = interfaceContext.createCommentQuestion(element); | |
417 feedbackHolder.appendChild(node.holder); | |
418 }); | |
419 | |
420 // Construct outside reference; | |
421 if (audioHolderObject.outsideReference != null) { | |
422 var outsideReferenceHolder = document.createElement('div'); | |
423 outsideReferenceHolder.id = 'outside-reference'; | |
424 outsideReferenceHolder.className = 'outside-reference'; | |
425 outsideReferenceHolderspan = document.createElement('span'); | |
426 outsideReferenceHolderspan.textContent = 'Reference'; | |
427 outsideReferenceHolder.appendChild(outsideReferenceHolderspan); | |
428 | |
429 var audioObject = audioEngineContext.newTrack(audioHolderObject.audioElements[audioHolderObject.outsideReference]); | |
430 | |
431 outsideReferenceHolder.onclick = function(event) | |
432 { | |
433 audioEngineContext.play(audioEngineContext.audioObjects.length-1); | |
434 $('.track-slider').removeClass('track-slider-playing'); | |
435 $('.comment-div').removeClass('comment-box-playing'); | |
436 if (event.currentTarget.nodeName == 'DIV') { | |
437 $(event.currentTarget).addClass('track-slider-playing'); | |
438 } else { | |
439 $(event.currentTarget.parentElement).addClass('track-slider-playing'); | |
440 } | |
441 }; | |
442 | |
443 document.getElementById('interface-buttons').appendChild(outsideReferenceHolder); | |
444 } | |
445 | |
446 | |
447 //testWaitIndicator(); | |
448 } | |
449 | |
450 function interfaceSliderHolder(interfaceObject) | |
451 { | |
452 this.sliders = []; | |
453 this.metrics = []; | |
454 this.id = document.getElementsByClassName("sliderCanvasDiv").length; | |
455 this.name = interfaceObject.name; | |
456 this.interfaceObject = interfaceObject; | |
457 this.sliderDOM = document.createElement('div'); | |
458 this.sliderDOM.className = 'sliderCanvasDiv'; | |
459 this.sliderDOM.id = 'sliderCanvasHolder-'+this.id; | |
460 | |
461 var pagetitle = document.createElement('div'); | |
462 pagetitle.className = "pageTitle"; | |
463 pagetitle.align = "center"; | |
464 var titleSpan = document.createElement('span'); | |
465 titleSpan.id = "pageTitle-"+this.id; | |
466 if (interfaceObject.title != undefined && typeof interfaceObject.title == "string") | |
467 { | |
468 titleSpan.textContent = interfaceObject.title; | |
469 } else { | |
470 titleSpan.textContent = "Axis "+String(this.id+1); | |
471 } | |
472 pagetitle.appendChild(titleSpan); | |
473 this.sliderDOM.appendChild(pagetitle); | |
474 | |
475 // Create the slider box to hold the slider elements | |
476 this.canvas = document.createElement('div'); | |
477 if (this.name != undefined) | |
478 this.canvas.id = 'slider-'+this.name; | |
479 else | |
480 this.canvas.id = 'slider-'+this.id; | |
481 this.canvas.setAttribute("interfaceid",this.id); | |
482 this.canvas.className = 'slider'; | |
483 this.canvas.align = "left"; | |
484 this.canvas.addEventListener('dragover',function(event){ | |
485 event.preventDefault(); | |
486 event.dataTransfer.effectAllowed = 'none'; | |
487 event.dataTransfer.dropEffect = 'copy'; | |
488 return false; | |
489 },false); | |
490 var sliderMargin = document.createAttribute('marginsize'); | |
491 sliderMargin.nodeValue = 42; // Set default margins to 42px either side | |
492 // Must have a known EXACT width, as this is used later to determine the ratings | |
493 var w = (Number(sliderMargin.nodeValue)+8)*2; | |
494 this.canvas.style.width = window.innerWidth - w +"px"; | |
495 this.canvas.style.marginLeft = sliderMargin.nodeValue +'px'; | |
496 this.canvas.setAttributeNode(sliderMargin); | |
497 this.sliderDOM.appendChild(this.canvas); | |
498 | |
499 // Create the div to hold any scale objects | |
500 this.scale = document.createElement('div'); | |
501 this.scale.className = 'sliderScale'; | |
502 this.scale.id = 'sliderScaleHolder-'+this.id; | |
503 this.scale.align = 'left'; | |
504 this.sliderDOM.appendChild(this.scale); | |
505 var positionScale = this.canvas.style.width.substr(0,this.canvas.style.width.length-2); | |
506 var offset = Number(this.canvas.attributes['marginsize'].value); | |
507 for (var index=0; index<interfaceObject.scale.length; index++) | |
508 { | |
509 var scaleObj = interfaceObject.scale[index]; | |
510 var value = document.createAttribute('value'); | |
511 var position = Number(scaleObj[0])*0.01; | |
512 value.nodeValue = position; | |
513 var pixelPosition = (position*positionScale)+offset; | |
514 var scaleDOM = document.createElement('span'); | |
515 scaleDOM.textContent = scaleObj[1]; | |
516 this.scale.appendChild(scaleDOM); | |
517 scaleDOM.style.left = Math.floor((pixelPosition-($(scaleDOM).width()/2)))+'px'; | |
518 scaleDOM.setAttributeNode(value); | |
519 } | |
520 | |
521 var dest = document.getElementById("slider-holder"); | |
522 dest.appendChild(this.sliderDOM); | |
523 | |
524 this.createSliderObject = function(audioObject) | |
525 { | |
526 var trackObj = document.createElement('div'); | |
527 trackObj.className = 'track-slider track-slider-disabled track-slider-'+audioObject.id; | |
528 trackObj.id = 'track-slider-'+this.id+'-'+audioObject.id; | |
529 trackObj.setAttribute('trackIndex',audioObject.id); | |
530 trackObj.innerHTML = '<span>'+audioObject.id+'</span>'; | |
531 if (this.name != undefined) { | |
532 trackObj.setAttribute('interface-name',this.name); | |
533 } else { | |
534 trackObj.setAttribute('interface-name',this.id); | |
535 } | |
536 var offset = Number(this.canvas.attributes['marginsize'].value); | |
537 // Distribute it randomnly | |
538 var w = window.innerWidth - (offset+8)*2; | |
539 w = Math.random()*w; | |
540 w = Math.floor(w+(offset+8)); | |
541 trackObj.style.left = w+'px'; | |
542 this.canvas.appendChild(trackObj); | |
543 this.sliders.push(trackObj); | |
544 this.metrics.push(new metricTracker(this)); | |
545 this.metrics[this.metrics.length-1].initialPosition = convSliderPosToRate(trackObj); | |
546 return trackObj; | |
547 }; | |
548 | |
549 this.resize = function(event) | |
550 { | |
551 var holdValues = []; | |
552 for (var index = 0; index < this.sliders.length; index++) | |
553 { | |
554 holdValues.push(convSliderPosToRate(this.sliders[index])); | |
555 } | |
556 var width = event.target.innerWidth; | |
557 var sliderDiv = this.canvas; | |
558 var sliderScaleDiv = this.scale; | |
559 var marginsize = Number(sliderDiv.attributes['marginsize'].value); | |
560 var w = (marginsize+8)*2; | |
561 sliderDiv.style.width = width - w + 'px'; | |
562 var width = width - w; | |
563 // Move sliders into new position | |
564 for (var index = 0; index < this.sliders.length; index++) | |
565 { | |
566 var pos = holdValues[index]; | |
567 var pix = pos * width; | |
568 this.sliders[index].style.left = pix+marginsize+'px'; | |
569 } | |
570 | |
571 // Move scale labels | |
572 for (var index = 0; index < this.scale.children.length; index++) | |
573 { | |
574 var scaleObj = this.scale.children[index]; | |
575 var position = Number(scaleObj.attributes['value'].value); | |
576 var pixelPosition = (position*width)+marginsize; | |
577 scaleObj.style.left = Math.floor((pixelPosition-($(scaleObj).width()/2)))+'px'; | |
578 } | |
579 }; | |
580 } | |
581 | |
582 function sliderObject(audioObject,interfaceObjects) { | |
583 // Create a new slider object; | |
584 this.parent = audioObject; | |
585 this.trackSliderObjects = []; | |
586 for (var i=0; i<interfaceContext.interfaceSliders.length; i++) | |
587 { | |
588 var trackObj = interfaceContext.interfaceSliders[i].createSliderObject(audioObject); | |
589 this.trackSliderObjects.push(trackObj); | |
590 } | |
591 | |
592 // Onclick, switch playback to that track | |
593 | |
594 this.enable = function() { | |
595 if (this.parent.state == 1) | |
596 { | |
597 $(this.trackSliderObjects).each(function(i,trackObj){ | |
598 $(trackObj).removeClass('track-slider-disabled'); | |
599 }); | |
600 } | |
601 }; | |
602 this.updateLoading = function(progress) | |
603 { | |
604 if (progress != 100) | |
605 { | |
606 progress = String(progress); | |
607 progress = progress.split('.')[0]; | |
608 this.trackSliderObjects[0].children[0].textContent = progress+'%'; | |
609 } else { | |
610 this.trackSliderObjects[0].children[0].textContent = this.parent.id; | |
611 } | |
612 }; | |
613 this.exportXMLDOM = function(audioObject) { | |
614 // Called by the audioObject holding this element. Must be present | |
615 var obj = []; | |
616 $(this.trackSliderObjects).each(function(i,trackObj){ | |
617 var node = document.createElement('value'); | |
618 node.setAttribute("inteerface-name",trackObj.getAttribute("interface-name")); | |
619 node.textContent = convSliderPosToRate(trackObj); | |
620 obj.push(node); | |
621 }); | |
622 | |
623 return obj; | |
624 }; | |
625 this.getValue = function() { | |
626 return convSliderPosToRate(this.trackSliderObj); | |
627 }; | |
628 } | |
629 | |
630 function buttonSubmitClick() | |
631 { | |
632 var checks = testState.currentStateMap[testState.currentIndex].interfaces[0].options; | |
633 var canContinue = true; | |
634 | |
635 // Check that the anchor and reference objects are correctly placed | |
636 if (interfaceContext.checkHiddenAnchor() == false) {return;} | |
637 if (interfaceContext.checkHiddenReference() == false) {return;} | |
638 | |
639 for (var i=0; i<checks.length; i++) { | |
640 if (checks[i].type == 'check') | |
641 { | |
642 switch(checks[i].check) { | |
643 case 'fragmentPlayed': | |
644 // Check if all fragments have been played | |
645 var checkState = interfaceContext.checkAllPlayed(); | |
646 if (checkState == false) {canContinue = false;} | |
647 break; | |
648 case 'fragmentFullPlayback': | |
649 // Check all fragments have been played to their full length | |
650 var checkState = interfaceContext.checkFragmentsFullyPlayed(); | |
651 if (checkState == false) {canContinue = false;} | |
652 break; | |
653 case 'fragmentMoved': | |
654 // Check all fragment sliders have been moved. | |
655 var checkState = interfaceContext.checkAllMoved(); | |
656 if (checkState == false) {canContinue = false;} | |
657 break; | |
658 case 'fragmentComments': | |
659 // Check all fragment sliders have been moved. | |
660 var checkState = interfaceContext.checkAllCommented(); | |
661 if (checkState == false) {canContinue = false;} | |
662 break; | |
663 case 'scalerange': | |
664 // Check the scale is used to its full width outlined by the node | |
665 var checkState = interfaceContext.checkScaleRange(); | |
666 if (checkState == false) {canContinue = false;} | |
667 break; | |
668 default: | |
669 console.log("WARNING - Check option "+checks[i].check+" is not supported on this interface"); | |
670 break; | |
671 } | |
672 | |
673 } | |
674 if (!canContinue) {break;} | |
675 } | |
676 | |
677 if (canContinue) { | |
678 if (audioEngineContext.status == 1) { | |
679 var playback = document.getElementById('playback-button'); | |
680 playback.click(); | |
681 // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options | |
682 } else | |
683 { | |
684 if (audioEngineContext.timer.testStarted == false) | |
685 { | |
686 alert('You have not started the test! Please click a fragment to begin the test!'); | |
687 return; | |
688 } | |
689 } | |
690 testState.advanceState(); | |
691 } | |
692 } | |
693 | |
694 function convSliderPosToRate(trackSlider) | |
695 { | |
696 var slider = trackSlider.parentElement; | |
697 var w = slider.style.width; | |
698 var marginsize = Number(slider.attributes['marginsize'].value); | |
699 var maxPix = w.substr(0,w.length-2); | |
700 var pix = trackSlider.style.left; | |
701 pix = pix.substr(0,pix.length-2); | |
702 var rate = (pix-marginsize)/maxPix; | |
703 return rate; | |
704 } | |
705 | |
706 function resizeWindow(event){ | |
707 // Function called when the window has been resized. | |
708 // MANDATORY FUNCTION | |
709 | |
710 // Resize the slider objects | |
711 for (var i=0; i<interfaceContext.interfaceSliders.length; i++) | |
712 { | |
713 interfaceContext.interfaceSliders[i].resize(event); | |
714 } | |
715 } | |
716 | |
717 function pageXMLSave(store, testXML) | |
718 { | |
719 // MANDATORY | |
720 // Saves a specific test page | |
721 // You can use this space to add any extra nodes to your XML <audioHolder> saves | |
722 // Get the current <audioHolder> information in store (remember to appendChild your data to it) | |
723 if (interfaceContext.interfaceSliders.length == 1) | |
724 { | |
725 // If there is only one axis, there only needs to be one metric return | |
726 return; | |
727 } | |
728 var audioelements = store.getElementsByTagName("audioelement"); | |
729 for (var i=0; i<audioelements.length; i++) | |
730 { | |
731 // Have to append the metric specific nodes | |
732 if (testXML.outsideReference == null || testXML.outsideReference.id != audioelements[i].id) | |
733 { | |
734 var inject = audioelements[i].getElementsByTagName("metric"); | |
735 if (inject.length == 0) | |
736 { | |
737 inject = document.createElement("metric"); | |
738 } else { | |
739 inject = inject[0]; | |
740 } | |
741 for (var k=0; k<interfaceContext.interfaceSliders.length; k++) | |
742 { | |
743 var node = interfaceContext.interfaceSliders[k].metrics[i].exportXMLDOM(); | |
744 var mrnodes = node.getElementsByTagName("metricresult"); | |
745 for (var j=0; j<mrnodes.length; j++) | |
746 { | |
747 var name = mrnodes[j].getAttribute("name"); | |
748 if (name == "elementTracker" || name == "elementTrackerFull" || name == "elementInitialPosition" || name == "elementFlagMoved") | |
749 { | |
750 mrnodes[j].setAttribute("interface-name",interfaceContext.interfaceSliders[k].name); | |
751 mrnodes[j].setAttribute("interface-id",k); | |
752 inject.appendChild(mrnodes[j]); | |
753 } | |
754 } | |
755 } | |
756 } | |
757 } | |
758 } |