Mercurial > hg > webaudioevaluationtool
comparison core.js @ 814:22ad83e232f7
Fixing Win/OSX differences for APE slider, unstable.
author | Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk> |
---|---|
date | Mon, 23 Nov 2015 17:44:25 +0000 |
parents | |
children | 1db3dd91fb26 |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 814:22ad83e232f7 |
---|---|
1 /** | |
2 * core.js | |
3 * | |
4 * Main script to run, calls all other core functions and manages loading/store to backend. | |
5 * Also contains all global variables. | |
6 */ | |
7 | |
8 /* create the web audio API context and store in audioContext*/ | |
9 var audioContext; // Hold the browser web audio API | |
10 var projectXML; // Hold the parsed setup XML | |
11 var specification; | |
12 var interfaceContext; | |
13 var popup; // Hold the interfacePopup object | |
14 var testState; | |
15 var currentTrackOrder = []; // Hold the current XML tracks in their (randomised) order | |
16 var audioEngineContext; // The custome AudioEngine object | |
17 var projectReturn; // Hold the URL for the return | |
18 | |
19 | |
20 // Add a prototype to the bufferSourceNode to reference to the audioObject holding it | |
21 AudioBufferSourceNode.prototype.owner = undefined; | |
22 | |
23 window.onload = function() { | |
24 // Function called once the browser has loaded all files. | |
25 // This should perform any initial commands such as structure / loading documents | |
26 | |
27 // Create a web audio API context | |
28 // Fixed for cross-browser support | |
29 var AudioContext = window.AudioContext || window.webkitAudioContext; | |
30 audioContext = new AudioContext; | |
31 | |
32 // Create test state | |
33 testState = new stateMachine(); | |
34 | |
35 // Create the audio engine object | |
36 audioEngineContext = new AudioEngine(); | |
37 | |
38 // Create the popup interface object | |
39 popup = new interfacePopup(); | |
40 | |
41 // Create the specification object | |
42 specification = new Specification(); | |
43 | |
44 // Create the interface object | |
45 interfaceContext = new Interface(specification); | |
46 }; | |
47 | |
48 function interfacePopup() { | |
49 // Creates an object to manage the popup | |
50 this.popup = null; | |
51 this.popupContent = null; | |
52 this.popupTitle = null; | |
53 this.popupResponse = null; | |
54 this.buttonProceed = null; | |
55 this.buttonPrevious = null; | |
56 this.popupOptions = null; | |
57 this.currentIndex = null; | |
58 this.responses = null; | |
59 | |
60 this.createPopup = function(){ | |
61 // Create popup window interface | |
62 var insertPoint = document.getElementById("topLevelBody"); | |
63 var blank = document.createElement('div'); | |
64 blank.className = 'testHalt'; | |
65 | |
66 this.popup = document.createElement('div'); | |
67 this.popup.id = 'popupHolder'; | |
68 this.popup.className = 'popupHolder'; | |
69 this.popup.style.position = 'absolute'; | |
70 this.popup.style.left = (window.innerWidth/2)-250 + 'px'; | |
71 this.popup.style.top = (window.innerHeight/2)-125 + 'px'; | |
72 | |
73 this.popupContent = document.createElement('div'); | |
74 this.popupContent.id = 'popupContent'; | |
75 this.popupContent.style.marginTop = '20px'; | |
76 this.popupContent.align = 'center'; | |
77 this.popup.appendChild(this.popupContent); | |
78 | |
79 var titleHolder = document.createElement('div'); | |
80 titleHolder.id = 'popupTitleHolder'; | |
81 titleHolder.style.width = 'inherit'; | |
82 titleHolder.style.height = '25px'; | |
83 titleHolder.style.marginBottom = '5px'; | |
84 | |
85 this.popupTitle = document.createElement('span'); | |
86 this.popupTitle.id = 'popupTitle'; | |
87 titleHolder.appendChild(this.popupTitle); | |
88 this.popupContent.appendChild(titleHolder); | |
89 | |
90 this.popupResponse = document.createElement('div'); | |
91 this.popupResponse.id = 'popupResponse'; | |
92 this.popupResponse.style.width = 'inherit'; | |
93 this.popupResponse.style.minHeight = '170px'; | |
94 this.popupResponse.style.maxHeight = '320px'; | |
95 this.popupResponse.style.overflow = 'auto'; | |
96 this.popupContent.appendChild(this.popupResponse); | |
97 | |
98 var buttonHolder = document.createElement('div'); | |
99 buttonHolder.id='buttonHolder'; | |
100 buttonHolder.width = 'inherit'; | |
101 buttonHolder.style.height= '30px'; | |
102 buttonHolder.align = 'left'; | |
103 this.popupContent.appendChild(buttonHolder); | |
104 | |
105 this.buttonProceed = document.createElement('button'); | |
106 this.buttonProceed.className = 'popupButton'; | |
107 this.buttonProceed.style.left = '390px'; | |
108 this.buttonProceed.style.top = '2px'; | |
109 this.buttonProceed.innerHTML = 'Next'; | |
110 this.buttonProceed.onclick = function(){popup.proceedClicked();}; | |
111 | |
112 this.buttonPrevious = document.createElement('button'); | |
113 this.buttonPrevious.className = 'popupButton'; | |
114 this.buttonPrevious.style.left = '10px'; | |
115 this.buttonPrevious.style.top = '2px'; | |
116 this.buttonPrevious.innerHTML = 'Back'; | |
117 this.buttonPrevious.onclick = function(){popup.previousClick();}; | |
118 | |
119 buttonHolder.appendChild(this.buttonPrevious); | |
120 buttonHolder.appendChild(this.buttonProceed); | |
121 | |
122 this.popup.style.zIndex = -1; | |
123 this.popup.style.visibility = 'hidden'; | |
124 blank.style.zIndex = -2; | |
125 blank.style.visibility = 'hidden'; | |
126 insertPoint.appendChild(this.popup); | |
127 insertPoint.appendChild(blank); | |
128 }; | |
129 | |
130 this.showPopup = function(){ | |
131 if (this.popup == null) { | |
132 this.createPopup(); | |
133 } | |
134 this.popup.style.zIndex = 3; | |
135 this.popup.style.visibility = 'visible'; | |
136 var blank = document.getElementsByClassName('testHalt')[0]; | |
137 blank.style.zIndex = 2; | |
138 blank.style.visibility = 'visible'; | |
139 $(window).keypress(function(e){ | |
140 if (e.keyCode == 13 && popup.popup.style.visibility == 'visible') | |
141 { | |
142 // Enter key pressed | |
143 var textarea = $(popup.popupContent).find('textarea'); | |
144 if (textarea.length != 0) | |
145 { | |
146 if (textarea[0] == document.activeElement) | |
147 {return;} | |
148 } | |
149 popup.buttonProceed.onclick(); | |
150 } | |
151 }); | |
152 }; | |
153 | |
154 this.hidePopup = function(){ | |
155 this.popup.style.zIndex = -1; | |
156 this.popup.style.visibility = 'hidden'; | |
157 var blank = document.getElementsByClassName('testHalt')[0]; | |
158 blank.style.zIndex = -2; | |
159 blank.style.visibility = 'hidden'; | |
160 this.buttonPrevious.style.visibility = 'inherit'; | |
161 }; | |
162 | |
163 this.postNode = function() { | |
164 // This will take the node from the popupOptions and display it | |
165 var node = this.popupOptions[this.currentIndex]; | |
166 this.popupResponse.innerHTML = null; | |
167 if (node.type == 'statement') { | |
168 this.popupTitle.textContent = null; | |
169 var statement = document.createElement('span'); | |
170 statement.textContent = node.statement; | |
171 this.popupResponse.appendChild(statement); | |
172 } else if (node.type == 'question') { | |
173 this.popupTitle.textContent = node.question; | |
174 var textArea = document.createElement('textarea'); | |
175 switch (node.boxsize) { | |
176 case 'small': | |
177 textArea.cols = "20"; | |
178 textArea.rows = "1"; | |
179 break; | |
180 case 'normal': | |
181 textArea.cols = "30"; | |
182 textArea.rows = "2"; | |
183 break; | |
184 case 'large': | |
185 textArea.cols = "40"; | |
186 textArea.rows = "5"; | |
187 break; | |
188 case 'huge': | |
189 textArea.cols = "50"; | |
190 textArea.rows = "10"; | |
191 break; | |
192 } | |
193 document.onkeydown=function(){ | |
194 if(window.event.keyCode=='13'){ // when you hit enter | |
195 window.event.preventDefault(); // don't make newline | |
196 popup.proceedClicked(); // go to the next window (or start the test or submit) | |
197 } | |
198 } | |
199 this.popupResponse.appendChild(textArea); | |
200 textArea.focus(); | |
201 } else if (node.type == 'checkbox') { | |
202 this.popupTitle.textContent = node.statement; | |
203 var optHold = this.popupResponse; | |
204 for (var i=0; i<node.options.length; i++) { | |
205 var option = node.options[i]; | |
206 var input = document.createElement('input'); | |
207 input.id = option.id; | |
208 input.type = 'checkbox'; | |
209 var span = document.createElement('span'); | |
210 span.textContent = option.text; | |
211 var hold = document.createElement('div'); | |
212 hold.setAttribute('name','option'); | |
213 hold.style.padding = '4px'; | |
214 hold.appendChild(input); | |
215 hold.appendChild(span); | |
216 optHold.appendChild(hold); | |
217 } | |
218 } else if (node.type == 'radio') { | |
219 this.popupTitle.textContent = node.statement; | |
220 var optHold = this.popupResponse; | |
221 for (var i=0; i<node.options.length; i++) { | |
222 var option = node.options[i]; | |
223 var input = document.createElement('input'); | |
224 input.id = option.name; | |
225 input.type = 'radio'; | |
226 input.name = node.id; | |
227 var span = document.createElement('span'); | |
228 span.textContent = option.text; | |
229 var hold = document.createElement('div'); | |
230 hold.setAttribute('name','option'); | |
231 hold.style.padding = '4px'; | |
232 hold.appendChild(input); | |
233 hold.appendChild(span); | |
234 optHold.appendChild(hold); | |
235 } | |
236 } else if (node.type == 'number') { | |
237 this.popupTitle.textContent = node.statement; | |
238 var input = document.createElement('input'); | |
239 input.type = 'textarea'; | |
240 if (node.min != null) {input.min = node.min;} | |
241 if (node.max != null) {input.max = node.max;} | |
242 if (node.step != null) {input.step = node.step;} | |
243 this.popupResponse.appendChild(input); | |
244 } | |
245 if(this.currentIndex+1 == this.popupOptions.length) { | |
246 if (this.responses.nodeName == "PRETEST") { | |
247 this.buttonProceed.textContent = 'Start'; | |
248 } else { | |
249 this.buttonProceed.textContent = 'Submit'; | |
250 } | |
251 } else { | |
252 this.buttonProceed.textContent = 'Next'; | |
253 } | |
254 if(this.currentIndex > 0) | |
255 this.buttonPrevious.style.visibility = 'visible'; | |
256 else | |
257 this.buttonPrevious.style.visibility = 'hidden'; | |
258 }; | |
259 | |
260 this.initState = function(node) { | |
261 //Call this with your preTest and postTest nodes when needed to | |
262 // initialise the popup procedure. | |
263 this.popupOptions = node.options; | |
264 if (this.popupOptions.length > 0) { | |
265 if (node.type == 'pretest') { | |
266 this.responses = document.createElement('PreTest'); | |
267 } else if (node.type == 'posttest') { | |
268 this.responses = document.createElement('PostTest'); | |
269 } else { | |
270 console.log ('WARNING - popup node neither pre or post!'); | |
271 this.responses = document.createElement('responses'); | |
272 } | |
273 this.currentIndex = 0; | |
274 this.showPopup(); | |
275 this.postNode(); | |
276 } else { | |
277 advanceState(); | |
278 } | |
279 }; | |
280 | |
281 this.proceedClicked = function() { | |
282 // Each time the popup button is clicked! | |
283 var node = this.popupOptions[this.currentIndex]; | |
284 if (node.type == 'question') { | |
285 // Must extract the question data | |
286 var textArea = $(popup.popupContent).find('textarea')[0]; | |
287 if (node.mandatory == true && textArea.value.length == 0) { | |
288 alert('This question is mandatory'); | |
289 return; | |
290 } else { | |
291 // Save the text content | |
292 var hold = document.createElement('comment'); | |
293 hold.id = node.id; | |
294 hold.innerHTML = textArea.value; | |
295 console.log("Question: "+ node.question); | |
296 console.log("Question Response: "+ textArea.value); | |
297 this.responses.appendChild(hold); | |
298 } | |
299 } else if (node.type == 'checkbox') { | |
300 // Must extract checkbox data | |
301 var optHold = this.popupResponse; | |
302 var hold = document.createElement('checkbox'); | |
303 console.log("Checkbox: "+ node.statement); | |
304 hold.id = node.id; | |
305 for (var i=0; i<optHold.childElementCount; i++) { | |
306 var input = optHold.childNodes[i].getElementsByTagName('input')[0]; | |
307 var statement = optHold.childNodes[i].getElementsByTagName('span')[0]; | |
308 var response = document.createElement('option'); | |
309 response.setAttribute('name',input.id); | |
310 response.textContent = input.checked; | |
311 hold.appendChild(response); | |
312 console.log(input.id +': '+ input.checked); | |
313 } | |
314 this.responses.appendChild(hold); | |
315 } else if (node.type == "radio") { | |
316 var optHold = this.popupResponse; | |
317 var hold = document.createElement('radio'); | |
318 var responseID = null; | |
319 var i=0; | |
320 while(responseID == null) { | |
321 var input = optHold.childNodes[i].getElementsByTagName('input')[0]; | |
322 if (input.checked == true) { | |
323 responseID = i; | |
324 } | |
325 i++; | |
326 } | |
327 hold.id = node.id; | |
328 hold.setAttribute('name',node.options[responseID].name); | |
329 hold.textContent = node.options[responseID].text; | |
330 this.responses.appendChild(hold); | |
331 } else if (node.type == "number") { | |
332 var input = this.popupContent.getElementsByTagName('input')[0]; | |
333 if (node.mandatory == true && input.value.length == 0) { | |
334 alert('This question is mandatory. Please enter a number'); | |
335 return; | |
336 } | |
337 var enteredNumber = Number(input.value); | |
338 if (isNaN(enteredNumber)) { | |
339 alert('Please enter a valid number'); | |
340 return; | |
341 } | |
342 if (enteredNumber < node.min && node.min != null) { | |
343 alert('Number is below the minimum value of '+node.min); | |
344 return; | |
345 } | |
346 if (enteredNumber > node.max && node.max != null) { | |
347 alert('Number is above the maximum value of '+node.max); | |
348 return; | |
349 } | |
350 var hold = document.createElement('number'); | |
351 hold.id = node.id; | |
352 hold.textContent = input.value; | |
353 this.responses.appendChild(hold); | |
354 } | |
355 this.currentIndex++; | |
356 if (this.currentIndex < this.popupOptions.length) { | |
357 this.postNode(); | |
358 } else { | |
359 // Reached the end of the popupOptions | |
360 this.hidePopup(); | |
361 if (this.responses.nodeName == testState.stateResults[testState.stateIndex].nodeName) { | |
362 testState.stateResults[testState.stateIndex] = this.responses; | |
363 } else { | |
364 testState.stateResults[testState.stateIndex].appendChild(this.responses); | |
365 } | |
366 advanceState(); | |
367 } | |
368 }; | |
369 | |
370 this.previousClick = function() { | |
371 // Triggered when the 'Back' button is clicked in the survey | |
372 if (this.currentIndex > 0) { | |
373 this.currentIndex--; | |
374 var node = this.popupOptions[this.currentIndex]; | |
375 if (node.type != 'statement') { | |
376 var prevResp = this.responses.childNodes[this.responses.childElementCount-1]; | |
377 this.responses.removeChild(prevResp); | |
378 } | |
379 this.postNode(); | |
380 if (node.type == 'question') { | |
381 this.popupContent.getElementsByTagName('textarea')[0].value = prevResp.textContent; | |
382 } else if (node.type == 'checkbox') { | |
383 var options = this.popupContent.getElementsByTagName('input'); | |
384 var savedOptions = prevResp.getElementsByTagName('option'); | |
385 for (var i=0; i<options.length; i++) { | |
386 var id = options[i].id; | |
387 for (var j=0; j<savedOptions.length; j++) { | |
388 if (savedOptions[j].getAttribute('name') == id) { | |
389 if (savedOptions[j].textContent == 'true') {options[i].checked = true;} | |
390 else {options[i].checked = false;} | |
391 break; | |
392 } | |
393 } | |
394 } | |
395 } else if (node.type == 'number') { | |
396 this.popupContent.getElementsByTagName('input')[0].value = prevResp.textContent; | |
397 } else if (node.type == 'radio') { | |
398 var options = this.popupContent.getElementsByTagName('input'); | |
399 var name = prevResp.getAttribute('name'); | |
400 for (var i=0; i<options.length; i++) { | |
401 if (options[i].id == name) { | |
402 options[i].checked = true; | |
403 break; | |
404 } | |
405 } | |
406 } | |
407 } | |
408 }; | |
409 } | |
410 | |
411 function advanceState() | |
412 { | |
413 // Just for complete clarity | |
414 testState.advanceState(); | |
415 } | |
416 | |
417 function stateMachine() | |
418 { | |
419 // Object prototype for tracking and managing the test state | |
420 this.stateMap = []; | |
421 this.stateIndex = null; | |
422 this.currentStateMap = []; | |
423 this.currentIndex = null; | |
424 this.currentTestId = 0; | |
425 this.stateResults = []; | |
426 this.timerCallBackHolders = null; | |
427 this.initialise = function(){ | |
428 if (this.stateMap.length > 0) { | |
429 if(this.stateIndex != null) { | |
430 console.log('NOTE - State already initialise'); | |
431 } | |
432 this.stateIndex = -1; | |
433 var that = this; | |
434 var aH_pId = 0; | |
435 for (var id=0; id<this.stateMap.length; id++){ | |
436 var name = this.stateMap[id].type; | |
437 var obj = document.createElement(name); | |
438 if (name == 'audioHolder') { | |
439 obj.id = this.stateMap[id].id; | |
440 obj.setAttribute('presentedid',aH_pId); | |
441 aH_pId+=1; | |
442 } | |
443 this.stateResults.push(obj); | |
444 } | |
445 } else { | |
446 console.log('FATAL - StateMap not correctly constructed. EMPTY_STATE_MAP'); | |
447 } | |
448 }; | |
449 this.advanceState = function(){ | |
450 if (this.stateIndex == null) { | |
451 this.initialise(); | |
452 } | |
453 if (this.stateIndex == -1) { | |
454 console.log('Starting test...'); | |
455 } | |
456 if (this.currentIndex == null){ | |
457 if (this.currentStateMap.type == "audioHolder") { | |
458 // Save current page | |
459 this.testPageCompleted(this.stateResults[this.stateIndex],this.currentStateMap,this.currentTestId); | |
460 this.currentTestId++; | |
461 } | |
462 this.stateIndex++; | |
463 if (this.stateIndex >= this.stateMap.length) { | |
464 console.log('Test Completed'); | |
465 createProjectSave(specification.projectReturn); | |
466 } else { | |
467 this.currentStateMap = this.stateMap[this.stateIndex]; | |
468 if (this.currentStateMap.type == "audioHolder") { | |
469 console.log('Loading test page'); | |
470 loadTest(this.currentStateMap); | |
471 this.initialiseInnerState(this.currentStateMap); | |
472 } else if (this.currentStateMap.type == "pretest" || this.currentStateMap.type == "posttest") { | |
473 if (this.currentStateMap.options.length >= 1) { | |
474 popup.initState(this.currentStateMap); | |
475 } else { | |
476 this.advanceState(); | |
477 } | |
478 } else { | |
479 this.advanceState(); | |
480 } | |
481 } | |
482 } else { | |
483 this.advanceInnerState(); | |
484 } | |
485 }; | |
486 | |
487 this.testPageCompleted = function(store, testXML, testId) { | |
488 // Function called each time a test page has been completed | |
489 // Can be used to over-rule default behaviour | |
490 | |
491 pageXMLSave(store, testXML); | |
492 }; | |
493 | |
494 this.initialiseInnerState = function(node) { | |
495 // Parses the received testXML for pre and post test options | |
496 this.currentStateMap = []; | |
497 var preTest = node.preTest; | |
498 var postTest = node.postTest; | |
499 if (preTest == undefined) {preTest = document.createElement("preTest");} | |
500 if (postTest == undefined){postTest= document.createElement("postTest");} | |
501 this.currentStateMap.push(preTest); | |
502 this.currentStateMap.push(node); | |
503 this.currentStateMap.push(postTest); | |
504 this.currentIndex = -1; | |
505 this.advanceInnerState(); | |
506 }; | |
507 | |
508 this.advanceInnerState = function() { | |
509 this.currentIndex++; | |
510 if (this.currentIndex >= this.currentStateMap.length) { | |
511 this.currentIndex = null; | |
512 this.currentStateMap = this.stateMap[this.stateIndex]; | |
513 this.advanceState(); | |
514 } else { | |
515 if (this.currentStateMap[this.currentIndex].type == "audioHolder") { | |
516 console.log("Loading test page"+this.currentTestId); | |
517 } else if (this.currentStateMap[this.currentIndex].type == "pretest") { | |
518 popup.initState(this.currentStateMap[this.currentIndex]); | |
519 } else if (this.currentStateMap[this.currentIndex].type == "posttest") { | |
520 popup.initState(this.currentStateMap[this.currentIndex]); | |
521 } else { | |
522 this.advanceInnerState(); | |
523 } | |
524 } | |
525 }; | |
526 | |
527 this.previousState = function(){}; | |
528 } | |
529 | |
530 function testEnded(testId) | |
531 { | |
532 pageXMLSave(testId); | |
533 if (testXMLSetups.length-1 > testId) | |
534 { | |
535 // Yes we have another test to perform | |
536 testId = (Number(testId)+1); | |
537 currentState = 'testRun-'+testId; | |
538 loadTest(testId); | |
539 } else { | |
540 console.log('Testing Completed!'); | |
541 currentState = 'postTest'; | |
542 // Check for any post tests | |
543 var xmlSetup = projectXML.find('setup'); | |
544 var postTest = xmlSetup.find('PostTest')[0]; | |
545 popup.initState(postTest); | |
546 } | |
547 } | |
548 | |
549 function loadProjectSpec(url) { | |
550 // Load the project document from the given URL, decode the XML and instruct audioEngine to get audio data | |
551 // If url is null, request client to upload project XML document | |
552 var r = new XMLHttpRequest(); | |
553 r.open('GET',url,true); | |
554 r.onload = function() { | |
555 loadProjectSpecCallback(r.response); | |
556 }; | |
557 r.send(); | |
558 }; | |
559 | |
560 function loadProjectSpecCallback(response) { | |
561 // Function called after asynchronous download of XML project specification | |
562 //var decode = $.parseXML(response); | |
563 //projectXML = $(decode); | |
564 | |
565 var parse = new DOMParser(); | |
566 projectXML = parse.parseFromString(response,'text/xml'); | |
567 | |
568 // Build the specification | |
569 specification.decode(); | |
570 | |
571 testState.stateMap.push(specification.preTest); | |
572 | |
573 $(specification.audioHolders).each(function(index,elem){ | |
574 testState.stateMap.push(elem); | |
575 }); | |
576 | |
577 testState.stateMap.push(specification.postTest); | |
578 | |
579 // Obtain the metrics enabled | |
580 $(specification.metrics).each(function(index,node){ | |
581 var enabled = node.textContent; | |
582 switch(node.enabled) | |
583 { | |
584 case 'testTimer': | |
585 sessionMetrics.prototype.enableTestTimer = true; | |
586 break; | |
587 case 'elementTimer': | |
588 sessionMetrics.prototype.enableElementTimer = true; | |
589 break; | |
590 case 'elementTracker': | |
591 sessionMetrics.prototype.enableElementTracker = true; | |
592 break; | |
593 case 'elementListenTracker': | |
594 sessionMetrics.prototype.enableElementListenTracker = true; | |
595 break; | |
596 case 'elementInitialPosition': | |
597 sessionMetrics.prototype.enableElementInitialPosition = true; | |
598 break; | |
599 case 'elementFlagListenedTo': | |
600 sessionMetrics.prototype.enableFlagListenedTo = true; | |
601 break; | |
602 case 'elementFlagMoved': | |
603 sessionMetrics.prototype.enableFlagMoved = true; | |
604 break; | |
605 case 'elementFlagComments': | |
606 sessionMetrics.prototype.enableFlagComments = true; | |
607 break; | |
608 } | |
609 }); | |
610 | |
611 | |
612 | |
613 // Detect the interface to use and load the relevant javascripts. | |
614 var interfaceJS = document.createElement('script'); | |
615 interfaceJS.setAttribute("type","text/javascript"); | |
616 if (specification.interfaceType == 'APE') { | |
617 interfaceJS.setAttribute("src","ape.js"); | |
618 | |
619 // APE comes with a css file | |
620 var css = document.createElement('link'); | |
621 css.rel = 'stylesheet'; | |
622 css.type = 'text/css'; | |
623 css.href = 'ape.css'; | |
624 | |
625 document.getElementsByTagName("head")[0].appendChild(css); | |
626 } else if (specification.interfaceType == "MUSHRA") | |
627 { | |
628 interfaceJS.setAttribute("src","mushra.js"); | |
629 | |
630 // MUSHRA comes with a css file | |
631 var css = document.createElement('link'); | |
632 css.rel = 'stylesheet'; | |
633 css.type = 'text/css'; | |
634 css.href = 'mushra.css'; | |
635 | |
636 document.getElementsByTagName("head")[0].appendChild(css); | |
637 } | |
638 document.getElementsByTagName("head")[0].appendChild(interfaceJS); | |
639 | |
640 // Define window callbacks for interface | |
641 window.onresize = function(event){interfaceContext.resizeWindow(event);}; | |
642 } | |
643 | |
644 function createProjectSave(destURL) { | |
645 // Save the data from interface into XML and send to destURL | |
646 // If destURL is null then download XML in client | |
647 // Now time to render file locally | |
648 var xmlDoc = interfaceXMLSave(); | |
649 var parent = document.createElement("div"); | |
650 parent.appendChild(xmlDoc); | |
651 var file = [parent.innerHTML]; | |
652 if (destURL == "null" || destURL == undefined) { | |
653 var bb = new Blob(file,{type : 'application/xml'}); | |
654 var dnlk = window.URL.createObjectURL(bb); | |
655 var a = document.createElement("a"); | |
656 a.hidden = ''; | |
657 a.href = dnlk; | |
658 a.download = "save.xml"; | |
659 a.textContent = "Save File"; | |
660 | |
661 popup.showPopup(); | |
662 popup.popupContent.innerHTML = null; | |
663 popup.popupContent.appendChild(a); | |
664 } else { | |
665 var xmlhttp = new XMLHttpRequest; | |
666 xmlhttp.open("POST",destURL,true); | |
667 xmlhttp.setRequestHeader('Content-Type', 'text/xml'); | |
668 xmlhttp.onerror = function(){ | |
669 console.log('Error saving file to server! Presenting download locally'); | |
670 createProjectSave(null); | |
671 }; | |
672 xmlhttp.onreadystatechange = function() { | |
673 console.log(xmlhttp.status); | |
674 if (xmlhttp.status != 200 && xmlhttp.readyState == 4) { | |
675 createProjectSave(null); | |
676 } else { | |
677 if (xmlhttp.responseXML == null) | |
678 { | |
679 return createProjectSave(null); | |
680 } | |
681 var response = xmlhttp.responseXML.childNodes[0]; | |
682 if (response.getAttribute('state') == "OK") | |
683 { | |
684 var file = response.getElementsByTagName('file')[0]; | |
685 console.log('Save OK: Filename '+file.textContent+','+file.getAttribute('bytes')+'B'); | |
686 popup.showPopup(); | |
687 popup.popupContent.innerHTML = null; | |
688 popup.popupContent.textContent = "Thank you!"; | |
689 } else { | |
690 var message = response.getElementsByTagName('message')[0]; | |
691 errorSessionDump(message.textContent); | |
692 } | |
693 } | |
694 }; | |
695 xmlhttp.send(file); | |
696 } | |
697 } | |
698 | |
699 function errorSessionDump(msg){ | |
700 // Create the partial interface XML save | |
701 // Include error node with message on why the dump occured | |
702 var xmlDoc = interfaceXMLSave(); | |
703 var err = document.createElement('error'); | |
704 err.textContent = msg; | |
705 xmlDoc.appendChild(err); | |
706 var parent = document.createElement("div"); | |
707 parent.appendChild(xmlDoc); | |
708 var file = [parent.innerHTML]; | |
709 var bb = new Blob(file,{type : 'application/xml'}); | |
710 var dnlk = window.URL.createObjectURL(bb); | |
711 var a = document.createElement("a"); | |
712 a.hidden = ''; | |
713 a.href = dnlk; | |
714 a.download = "save.xml"; | |
715 a.textContent = "Save File"; | |
716 | |
717 popup.showPopup(); | |
718 popup.popupContent.innerHTML = "ERROR : "+msg; | |
719 popup.popupContent.appendChild(a); | |
720 } | |
721 | |
722 // Only other global function which must be defined in the interface class. Determines how to create the XML document. | |
723 function interfaceXMLSave(){ | |
724 // Create the XML string to be exported with results | |
725 var xmlDoc = document.createElement("BrowserEvaluationResult"); | |
726 var projectDocument = specification.projectXML; | |
727 projectDocument.setAttribute('file-name',url); | |
728 xmlDoc.appendChild(projectDocument); | |
729 xmlDoc.appendChild(returnDateNode()); | |
730 for (var i=0; i<testState.stateResults.length; i++) | |
731 { | |
732 xmlDoc.appendChild(testState.stateResults[i]); | |
733 } | |
734 | |
735 return xmlDoc; | |
736 } | |
737 | |
738 function AudioEngine() { | |
739 | |
740 // Create two output paths, the main outputGain and fooGain. | |
741 // Output gain is default to 1 and any items for playback route here | |
742 // Foo gain is used for analysis to ensure paths get processed, but are not heard | |
743 // because web audio will optimise and any route which does not go to the destination gets ignored. | |
744 this.outputGain = audioContext.createGain(); | |
745 this.fooGain = audioContext.createGain(); | |
746 this.fooGain.gain = 0; | |
747 | |
748 // Use this to detect playback state: 0 - stopped, 1 - playing | |
749 this.status = 0; | |
750 | |
751 // Connect both gains to output | |
752 this.outputGain.connect(audioContext.destination); | |
753 this.fooGain.connect(audioContext.destination); | |
754 | |
755 // Create the timer Object | |
756 this.timer = new timer(); | |
757 // Create session metrics | |
758 this.metric = new sessionMetrics(this); | |
759 | |
760 this.loopPlayback = false; | |
761 | |
762 // Create store for new audioObjects | |
763 this.audioObjects = []; | |
764 | |
765 this.play = function(id) { | |
766 // Start the timer and set the audioEngine state to playing (1) | |
767 if (this.status == 0 && this.loopPlayback) { | |
768 // Check if all audioObjects are ready | |
769 if(this.checkAllReady()) | |
770 { | |
771 this.status = 1; | |
772 this.setSynchronousLoop(); | |
773 } | |
774 } | |
775 else | |
776 { | |
777 this.status = 1; | |
778 } | |
779 if (this.status== 1) { | |
780 this.timer.startTest(); | |
781 if (id == undefined) { | |
782 id = -1; | |
783 console.log('FATAL - Passed id was undefined - AudioEngineContext.play(id)'); | |
784 return; | |
785 } else { | |
786 interfaceContext.playhead.setTimePerPixel(this.audioObjects[id]); | |
787 } | |
788 if (this.loopPlayback) { | |
789 for (var i=0; i<this.audioObjects.length; i++) | |
790 { | |
791 this.audioObjects[i].play(this.timer.getTestTime()+1); | |
792 if (id == i) { | |
793 this.audioObjects[i].loopStart(); | |
794 } else { | |
795 this.audioObjects[i].loopStop(); | |
796 } | |
797 } | |
798 } else { | |
799 for (var i=0; i<this.audioObjects.length; i++) | |
800 { | |
801 if (i != id) { | |
802 this.audioObjects[i].outputGain.gain.value = 0.0; | |
803 this.audioObjects[i].stop(); | |
804 } else if (i == id) { | |
805 this.audioObjects[id].outputGain.gain.value = 1.0; | |
806 this.audioObjects[id].play(audioContext.currentTime+0.01); | |
807 } | |
808 } | |
809 } | |
810 interfaceContext.playhead.start(); | |
811 } | |
812 }; | |
813 | |
814 this.stop = function() { | |
815 // Send stop and reset command to all playback buffers and set audioEngine state to stopped (1) | |
816 if (this.status == 1) { | |
817 for (var i=0; i<this.audioObjects.length; i++) | |
818 { | |
819 this.audioObjects[i].stop(); | |
820 } | |
821 interfaceContext.playhead.stop(); | |
822 this.status = 0; | |
823 } | |
824 }; | |
825 | |
826 this.newTrack = function(element) { | |
827 // Pull data from given URL into new audio buffer | |
828 // URLs must either be from the same source OR be setup to 'Access-Control-Allow-Origin' | |
829 | |
830 // Create the audioObject with ID of the new track length; | |
831 audioObjectId = this.audioObjects.length; | |
832 this.audioObjects[audioObjectId] = new audioObject(audioObjectId); | |
833 | |
834 // AudioObject will get track itself. | |
835 this.audioObjects[audioObjectId].specification = element; | |
836 this.audioObjects[audioObjectId].constructTrack(element.parent.hostURL + element.url); | |
837 return this.audioObjects[audioObjectId]; | |
838 }; | |
839 | |
840 this.newTestPage = function() { | |
841 this.state = 0; | |
842 this.audioObjectsReady = false; | |
843 this.metric.reset(); | |
844 this.audioObjects = []; | |
845 }; | |
846 | |
847 this.checkAllPlayed = function() { | |
848 arr = []; | |
849 for (var id=0; id<this.audioObjects.length; id++) { | |
850 if (this.audioObjects[id].metric.wasListenedTo == false) { | |
851 arr.push(this.audioObjects[id].id); | |
852 } | |
853 } | |
854 return arr; | |
855 }; | |
856 | |
857 this.checkAllReady = function() { | |
858 var ready = true; | |
859 for (var i=0; i<this.audioObjects.length; i++) { | |
860 if (this.audioObjects[i].state == 0) { | |
861 // Track not ready | |
862 console.log('WAIT -- audioObject '+i+' not ready yet!'); | |
863 ready = false; | |
864 }; | |
865 } | |
866 return ready; | |
867 }; | |
868 | |
869 this.setSynchronousLoop = function() { | |
870 // Pads the signals so they are all exactly the same length | |
871 var length = 0; | |
872 var lens = []; | |
873 var maxId; | |
874 for (var i=0; i<this.audioObjects.length; i++) | |
875 { | |
876 lens.push(this.audioObjects[i].buffer.length); | |
877 if (length < this.audioObjects[i].buffer.length) | |
878 { | |
879 length = this.audioObjects[i].buffer.length; | |
880 maxId = i; | |
881 } | |
882 } | |
883 // Perform difference | |
884 for (var i=0; i<lens.length; i++) | |
885 { | |
886 lens[i] = length - lens[i]; | |
887 } | |
888 // Extract the audio and zero-pad | |
889 for (var i=0; i<lens.length; i++) | |
890 { | |
891 var orig = this.audioObjects[i].buffer; | |
892 var hold = audioContext.createBuffer(orig.numberOfChannels,length,orig.sampleRate); | |
893 for (var c=0; c<orig.numberOfChannels; c++) | |
894 { | |
895 var inData = hold.getChannelData(c); | |
896 var outData = orig.getChannelData(c); | |
897 for (var n=0; n<orig.length; n++) | |
898 {inData[n] = outData[n];} | |
899 } | |
900 this.audioObjects[i].buffer = hold; | |
901 delete orig; | |
902 } | |
903 }; | |
904 | |
905 } | |
906 | |
907 function audioObject(id) { | |
908 // The main buffer object with common control nodes to the AudioEngine | |
909 | |
910 this.specification; | |
911 this.id = id; | |
912 this.state = 0; // 0 - no data, 1 - ready | |
913 this.url = null; // Hold the URL given for the output back to the results. | |
914 this.metric = new metricTracker(this); | |
915 | |
916 // Bindings for GUI | |
917 this.interfaceDOM = null; | |
918 this.commentDOM = null; | |
919 | |
920 // Create a buffer and external gain control to allow internal patching of effects and volume leveling. | |
921 this.bufferNode = undefined; | |
922 this.outputGain = audioContext.createGain(); | |
923 | |
924 // Default output gain to be zero | |
925 this.outputGain.gain.value = 0.0; | |
926 | |
927 // Connect buffer to the audio graph | |
928 this.outputGain.connect(audioEngineContext.outputGain); | |
929 | |
930 // the audiobuffer is not designed for multi-start playback | |
931 // When stopeed, the buffer node is deleted and recreated with the stored buffer. | |
932 this.buffer; | |
933 | |
934 this.loopStart = function() { | |
935 this.outputGain.gain.value = 1.0; | |
936 this.metric.startListening(audioEngineContext.timer.getTestTime()); | |
937 }; | |
938 | |
939 this.loopStop = function() { | |
940 if (this.outputGain.gain.value != 0.0) { | |
941 this.outputGain.gain.value = 0.0; | |
942 this.metric.stopListening(audioEngineContext.timer.getTestTime()); | |
943 } | |
944 }; | |
945 | |
946 this.play = function(startTime) { | |
947 if (this.bufferNode == undefined) { | |
948 this.bufferNode = audioContext.createBufferSource(); | |
949 this.bufferNode.owner = this; | |
950 this.bufferNode.connect(this.outputGain); | |
951 this.bufferNode.buffer = this.buffer; | |
952 this.bufferNode.loop = audioEngineContext.loopPlayback; | |
953 this.bufferNode.onended = function(event) { | |
954 // Safari does not like using 'this' to reference the calling object! | |
955 //event.currentTarget.owner.metric.stopListening(audioEngineContext.timer.getTestTime(),event.currentTarget.owner.getCurrentPosition()); | |
956 event.currentTarget.owner.stop(); | |
957 }; | |
958 if (this.bufferNode.loop == false) { | |
959 this.metric.startListening(audioEngineContext.timer.getTestTime()); | |
960 } | |
961 this.bufferNode.start(startTime); | |
962 } | |
963 }; | |
964 | |
965 this.stop = function() { | |
966 if (this.bufferNode != undefined) | |
967 { | |
968 this.metric.stopListening(audioEngineContext.timer.getTestTime(),this.getCurrentPosition()); | |
969 this.bufferNode.stop(0); | |
970 this.bufferNode = undefined; | |
971 } | |
972 }; | |
973 | |
974 this.getCurrentPosition = function() { | |
975 var time = audioEngineContext.timer.getTestTime(); | |
976 if (this.bufferNode != undefined) { | |
977 if (this.bufferNode.loop == true) { | |
978 if (audioEngineContext.status == 1) { | |
979 return time%this.buffer.duration; | |
980 } else { | |
981 return 0; | |
982 } | |
983 } else { | |
984 if (this.metric.listenHold) { | |
985 return time - this.metric.listenStart; | |
986 } else { | |
987 return 0; | |
988 } | |
989 } | |
990 } else { | |
991 return 0; | |
992 } | |
993 }; | |
994 | |
995 this.constructTrack = function(url) { | |
996 var request = new XMLHttpRequest(); | |
997 this.url = url; | |
998 request.open('GET',url,true); | |
999 request.responseType = 'arraybuffer'; | |
1000 | |
1001 var audioObj = this; | |
1002 | |
1003 // Create callback to decode the data asynchronously | |
1004 request.onloadend = function() { | |
1005 audioContext.decodeAudioData(request.response, function(decodedData) { | |
1006 audioObj.buffer = decodedData; | |
1007 audioObj.state = 1; | |
1008 if (audioObj.specification.type != 'outsidereference') | |
1009 {audioObj.interfaceDOM.enable();} | |
1010 }, function(){ | |
1011 // Should only be called if there was an error, but sometimes gets called continuously | |
1012 // Check here if the error is genuine | |
1013 if (audioObj.state == 0 || audioObj.buffer == undefined) { | |
1014 // Genuine error | |
1015 console.log('FATAL - Error loading buffer on '+audioObj.id); | |
1016 if (request.status == 404) | |
1017 { | |
1018 console.log('FATAL - Fragment '+audioObj.id+' 404 error'); | |
1019 console.log('URL: '+audioObj.url); | |
1020 errorSessionDump('Fragment '+audioObj.id+' 404 error'); | |
1021 } | |
1022 } | |
1023 }); | |
1024 }; | |
1025 request.send(); | |
1026 }; | |
1027 | |
1028 this.exportXMLDOM = function() { | |
1029 var root = document.createElement('audioElement'); | |
1030 root.id = this.specification.id; | |
1031 root.setAttribute('url',this.url); | |
1032 var file = document.createElement('file'); | |
1033 file.setAttribute('sampleRate',this.buffer.sampleRate); | |
1034 file.setAttribute('channels',this.buffer.numberOfChannels); | |
1035 file.setAttribute('sampleCount',this.buffer.length); | |
1036 file.setAttribute('duration',this.buffer.duration); | |
1037 root.appendChild(file); | |
1038 if (this.specification.type != 'outsidereference') { | |
1039 root.appendChild(this.interfaceDOM.exportXMLDOM(this)); | |
1040 root.appendChild(this.commentDOM.exportXMLDOM(this)); | |
1041 if(this.specification.type == 'anchor') { | |
1042 root.setAttribute('anchor',true); | |
1043 } else if(this.specification.type == 'reference') { | |
1044 root.setAttribute('reference',true); | |
1045 } | |
1046 } | |
1047 root.appendChild(this.metric.exportXMLDOM()); | |
1048 return root; | |
1049 }; | |
1050 } | |
1051 | |
1052 function timer() | |
1053 { | |
1054 /* Timer object used in audioEngine to keep track of session timings | |
1055 * Uses the timer of the web audio API, so sample resolution | |
1056 */ | |
1057 this.testStarted = false; | |
1058 this.testStartTime = 0; | |
1059 this.testDuration = 0; | |
1060 this.minimumTestTime = 0; // No minimum test time | |
1061 this.startTest = function() | |
1062 { | |
1063 if (this.testStarted == false) | |
1064 { | |
1065 this.testStartTime = audioContext.currentTime; | |
1066 this.testStarted = true; | |
1067 this.updateTestTime(); | |
1068 audioEngineContext.metric.initialiseTest(); | |
1069 } | |
1070 }; | |
1071 this.stopTest = function() | |
1072 { | |
1073 if (this.testStarted) | |
1074 { | |
1075 this.testDuration = this.getTestTime(); | |
1076 this.testStarted = false; | |
1077 } else { | |
1078 console.log('ERR: Test tried to end before beginning'); | |
1079 } | |
1080 }; | |
1081 this.updateTestTime = function() | |
1082 { | |
1083 if (this.testStarted) | |
1084 { | |
1085 this.testDuration = audioContext.currentTime - this.testStartTime; | |
1086 } | |
1087 }; | |
1088 this.getTestTime = function() | |
1089 { | |
1090 this.updateTestTime(); | |
1091 return this.testDuration; | |
1092 }; | |
1093 } | |
1094 | |
1095 function sessionMetrics(engine) | |
1096 { | |
1097 /* Used by audioEngine to link to audioObjects to minimise the timer call timers; | |
1098 */ | |
1099 this.engine = engine; | |
1100 this.lastClicked = -1; | |
1101 this.data = -1; | |
1102 this.reset = function() { | |
1103 this.lastClicked = -1; | |
1104 this.data = -1; | |
1105 }; | |
1106 this.initialiseTest = function(){}; | |
1107 } | |
1108 | |
1109 function metricTracker(caller) | |
1110 { | |
1111 /* Custom object to track and collect metric data | |
1112 * Used only inside the audioObjects object. | |
1113 */ | |
1114 | |
1115 this.listenedTimer = 0; | |
1116 this.listenStart = 0; | |
1117 this.listenHold = false; | |
1118 this.initialPosition = -1; | |
1119 this.movementTracker = []; | |
1120 this.listenTracker =[]; | |
1121 this.wasListenedTo = false; | |
1122 this.wasMoved = false; | |
1123 this.hasComments = false; | |
1124 this.parent = caller; | |
1125 | |
1126 this.initialised = function(position) | |
1127 { | |
1128 if (this.initialPosition == -1) { | |
1129 this.initialPosition = position; | |
1130 } | |
1131 }; | |
1132 | |
1133 this.moved = function(time,position) | |
1134 { | |
1135 this.wasMoved = true; | |
1136 this.movementTracker[this.movementTracker.length] = [time, position]; | |
1137 }; | |
1138 | |
1139 this.startListening = function(time) | |
1140 { | |
1141 if (this.listenHold == false) | |
1142 { | |
1143 this.wasListenedTo = true; | |
1144 this.listenStart = time; | |
1145 this.listenHold = true; | |
1146 | |
1147 var evnt = document.createElement('event'); | |
1148 var testTime = document.createElement('testTime'); | |
1149 testTime.setAttribute('start',time); | |
1150 var bufferTime = document.createElement('bufferTime'); | |
1151 bufferTime.setAttribute('start',this.parent.getCurrentPosition()); | |
1152 evnt.appendChild(testTime); | |
1153 evnt.appendChild(bufferTime); | |
1154 this.listenTracker.push(evnt); | |
1155 | |
1156 console.log('slider ' + this.parent.id + ' played (' + time + ')'); // DEBUG/SAFETY: show played slider id | |
1157 } | |
1158 }; | |
1159 | |
1160 this.stopListening = function(time,bufferStopTime) | |
1161 { | |
1162 if (this.listenHold == true) | |
1163 { | |
1164 var diff = time - this.listenStart; | |
1165 this.listenedTimer += (diff); | |
1166 this.listenStart = 0; | |
1167 this.listenHold = false; | |
1168 | |
1169 var evnt = this.listenTracker[this.listenTracker.length-1]; | |
1170 var testTime = evnt.getElementsByTagName('testTime')[0]; | |
1171 var bufferTime = evnt.getElementsByTagName('bufferTime')[0]; | |
1172 testTime.setAttribute('stop',time); | |
1173 if (bufferStopTime == undefined) { | |
1174 bufferTime.setAttribute('stop',this.parent.getCurrentPosition()); | |
1175 } else { | |
1176 bufferTime.setAttribute('stop',bufferStopTime); | |
1177 } | |
1178 console.log('slider ' + this.parent.id + ' played for (' + diff + ')'); // DEBUG/SAFETY: show played slider id | |
1179 } | |
1180 }; | |
1181 | |
1182 this.exportXMLDOM = function() { | |
1183 var root = document.createElement('metric'); | |
1184 if (audioEngineContext.metric.enableElementTimer) { | |
1185 var mElementTimer = document.createElement('metricresult'); | |
1186 mElementTimer.setAttribute('name','enableElementTimer'); | |
1187 mElementTimer.textContent = this.listenedTimer; | |
1188 root.appendChild(mElementTimer); | |
1189 } | |
1190 if (audioEngineContext.metric.enableElementTracker) { | |
1191 var elementTrackerFull = document.createElement('metricResult'); | |
1192 elementTrackerFull.setAttribute('name','elementTrackerFull'); | |
1193 for (var k=0; k<this.movementTracker.length; k++) | |
1194 { | |
1195 var timePos = document.createElement('timePos'); | |
1196 timePos.id = k; | |
1197 var time = document.createElement('time'); | |
1198 time.textContent = this.movementTracker[k][0]; | |
1199 var position = document.createElement('position'); | |
1200 position.textContent = this.movementTracker[k][1]; | |
1201 timePos.appendChild(time); | |
1202 timePos.appendChild(position); | |
1203 elementTrackerFull.appendChild(timePos); | |
1204 } | |
1205 root.appendChild(elementTrackerFull); | |
1206 } | |
1207 if (audioEngineContext.metric.enableElementListenTracker) { | |
1208 var elementListenTracker = document.createElement('metricResult'); | |
1209 elementListenTracker.setAttribute('name','elementListenTracker'); | |
1210 for (var k=0; k<this.listenTracker.length; k++) { | |
1211 elementListenTracker.appendChild(this.listenTracker[k]); | |
1212 } | |
1213 root.appendChild(elementListenTracker); | |
1214 } | |
1215 if (audioEngineContext.metric.enableElementInitialPosition) { | |
1216 var elementInitial = document.createElement('metricResult'); | |
1217 elementInitial.setAttribute('name','elementInitialPosition'); | |
1218 elementInitial.textContent = this.initialPosition; | |
1219 root.appendChild(elementInitial); | |
1220 } | |
1221 if (audioEngineContext.metric.enableFlagListenedTo) { | |
1222 var flagListenedTo = document.createElement('metricResult'); | |
1223 flagListenedTo.setAttribute('name','elementFlagListenedTo'); | |
1224 flagListenedTo.textContent = this.wasListenedTo; | |
1225 root.appendChild(flagListenedTo); | |
1226 } | |
1227 if (audioEngineContext.metric.enableFlagMoved) { | |
1228 var flagMoved = document.createElement('metricResult'); | |
1229 flagMoved.setAttribute('name','elementFlagMoved'); | |
1230 flagMoved.textContent = this.wasMoved; | |
1231 root.appendChild(flagMoved); | |
1232 } | |
1233 if (audioEngineContext.metric.enableFlagComments) { | |
1234 var flagComments = document.createElement('metricResult'); | |
1235 flagComments.setAttribute('name','elementFlagComments'); | |
1236 if (this.parent.commentDOM == null) | |
1237 {flag.textContent = 'false';} | |
1238 else if (this.parent.commentDOM.textContent.length == 0) | |
1239 {flag.textContent = 'false';} | |
1240 else | |
1241 {flag.textContet = 'true';} | |
1242 root.appendChild(flagComments); | |
1243 } | |
1244 | |
1245 return root; | |
1246 }; | |
1247 } | |
1248 | |
1249 function randomiseOrder(input) | |
1250 { | |
1251 // This takes an array of information and randomises the order | |
1252 var N = input.length; | |
1253 | |
1254 var inputSequence = []; // For safety purposes: keep track of randomisation | |
1255 for (var counter = 0; counter < N; ++counter) | |
1256 inputSequence.push(counter) // Fill array | |
1257 var inputSequenceClone = inputSequence.slice(0); | |
1258 | |
1259 var holdArr = []; | |
1260 var outputSequence = []; | |
1261 for (var n=0; n<N; n++) | |
1262 { | |
1263 // First pick a random number | |
1264 var r = Math.random(); | |
1265 // Multiply and floor by the number of elements left | |
1266 r = Math.floor(r*input.length); | |
1267 // Pick out that element and delete from the array | |
1268 holdArr.push(input.splice(r,1)[0]); | |
1269 // Do the same with sequence | |
1270 outputSequence.push(inputSequence.splice(r,1)[0]); | |
1271 } | |
1272 console.log(inputSequenceClone.toString()); // print original array to console | |
1273 console.log(outputSequence.toString()); // print randomised array to console | |
1274 return holdArr; | |
1275 } | |
1276 | |
1277 function returnDateNode() | |
1278 { | |
1279 // Create an XML Node for the Date and Time a test was conducted | |
1280 // Structure is | |
1281 // <datetime> | |
1282 // <date year="##" month="##" day="##">DD/MM/YY</date> | |
1283 // <time hour="##" minute="##" sec="##">HH:MM:SS</time> | |
1284 // </datetime> | |
1285 var dateTime = new Date(); | |
1286 var year = document.createAttribute('year'); | |
1287 var month = document.createAttribute('month'); | |
1288 var day = document.createAttribute('day'); | |
1289 var hour = document.createAttribute('hour'); | |
1290 var minute = document.createAttribute('minute'); | |
1291 var secs = document.createAttribute('secs'); | |
1292 | |
1293 year.nodeValue = dateTime.getFullYear(); | |
1294 month.nodeValue = dateTime.getMonth()+1; | |
1295 day.nodeValue = dateTime.getDate(); | |
1296 hour.nodeValue = dateTime.getHours(); | |
1297 minute.nodeValue = dateTime.getMinutes(); | |
1298 secs.nodeValue = dateTime.getSeconds(); | |
1299 | |
1300 var hold = document.createElement("datetime"); | |
1301 var date = document.createElement("date"); | |
1302 date.textContent = year.nodeValue+'/'+month.nodeValue+'/'+day.nodeValue; | |
1303 var time = document.createElement("time"); | |
1304 time.textContent = hour.nodeValue+':'+minute.nodeValue+':'+secs.nodeValue; | |
1305 | |
1306 date.setAttributeNode(year); | |
1307 date.setAttributeNode(month); | |
1308 date.setAttributeNode(day); | |
1309 time.setAttributeNode(hour); | |
1310 time.setAttributeNode(minute); | |
1311 time.setAttributeNode(secs); | |
1312 | |
1313 hold.appendChild(date); | |
1314 hold.appendChild(time); | |
1315 return hold | |
1316 | |
1317 } | |
1318 | |
1319 function Specification() { | |
1320 // Handles the decoding of the project specification XML into a simple JavaScript Object. | |
1321 | |
1322 this.interfaceType = null; | |
1323 this.commonInterface = null; | |
1324 this.projectReturn = null; | |
1325 this.randomiseOrder = null; | |
1326 this.collectMetrics = null; | |
1327 this.testPages = null; | |
1328 this.preTest = null; | |
1329 this.postTest = null; | |
1330 this.metrics =[]; | |
1331 | |
1332 this.audioHolders = []; | |
1333 | |
1334 this.decode = function() { | |
1335 // projectXML - DOM Parsed document | |
1336 this.projectXML = projectXML.childNodes[0]; | |
1337 var setupNode = projectXML.getElementsByTagName('setup')[0]; | |
1338 this.interfaceType = setupNode.getAttribute('interface'); | |
1339 this.projectReturn = setupNode.getAttribute('projectReturn'); | |
1340 this.testPages = setupNode.getAttribute('testPages'); | |
1341 if (setupNode.getAttribute('randomiseOrder') == "true") { | |
1342 this.randomiseOrder = true; | |
1343 } else {this.randomiseOrder = false;} | |
1344 if (setupNode.getAttribute('collectMetrics') == "true") { | |
1345 this.collectMetrics = true; | |
1346 } else {this.collectMetrics = false;} | |
1347 if (isNaN(Number(this.testPages)) || this.testPages == undefined) | |
1348 { | |
1349 this.testPages = null; | |
1350 } else { | |
1351 this.testPages = Number(this.testPages); | |
1352 if (this.testPages == 0) {this.testPages = null;} | |
1353 } | |
1354 var metricCollection = setupNode.getElementsByTagName('Metric'); | |
1355 | |
1356 this.preTest = new this.prepostNode('pretest',setupNode.getElementsByTagName('PreTest')); | |
1357 this.postTest = new this.prepostNode('posttest',setupNode.getElementsByTagName('PostTest')); | |
1358 | |
1359 if (metricCollection.length > 0) { | |
1360 metricCollection = metricCollection[0].getElementsByTagName('metricEnable'); | |
1361 for (var i=0; i<metricCollection.length; i++) { | |
1362 this.metrics.push(new this.metricNode(metricCollection[i].textContent)); | |
1363 } | |
1364 } | |
1365 | |
1366 var commonInterfaceNode = setupNode.getElementsByTagName('interface'); | |
1367 if (commonInterfaceNode.length > 0) { | |
1368 commonInterfaceNode = commonInterfaceNode[0]; | |
1369 } else { | |
1370 commonInterfaceNode = undefined; | |
1371 } | |
1372 | |
1373 this.commonInterface = new function() { | |
1374 this.OptionNode = function(child) { | |
1375 this.type = child.nodeName; | |
1376 if (this.type == 'option') | |
1377 { | |
1378 this.name = child.getAttribute('name'); | |
1379 } | |
1380 else if (this.type == 'check') { | |
1381 this.check = child.getAttribute('name'); | |
1382 if (this.check == 'scalerange') { | |
1383 this.min = child.getAttribute('min'); | |
1384 this.max = child.getAttribute('max'); | |
1385 if (this.min == null) {this.min = 1;} | |
1386 else if (Number(this.min) > 1 && this.min != null) { | |
1387 this.min = Number(this.min)/100; | |
1388 } else { | |
1389 this.min = Number(this.min); | |
1390 } | |
1391 if (this.max == null) {this.max = 0;} | |
1392 else if (Number(this.max) > 1 && this.max != null) { | |
1393 this.max = Number(this.max)/100; | |
1394 } else { | |
1395 this.max = Number(this.max); | |
1396 } | |
1397 } | |
1398 } else if (this.type == 'anchor' || this.type == 'reference') { | |
1399 Console.log("WARNING: Anchor and Reference tags in the <interface> node are depricated"); | |
1400 } | |
1401 }; | |
1402 this.options = []; | |
1403 if (commonInterfaceNode != undefined) { | |
1404 var child = commonInterfaceNode.firstElementChild; | |
1405 while (child != undefined) { | |
1406 this.options.push(new this.OptionNode(child)); | |
1407 child = child.nextElementSibling; | |
1408 } | |
1409 } | |
1410 }; | |
1411 | |
1412 var audioHolders = projectXML.getElementsByTagName('audioHolder'); | |
1413 for (var i=0; i<audioHolders.length; i++) { | |
1414 this.audioHolders.push(new this.audioHolderNode(this,audioHolders[i])); | |
1415 } | |
1416 | |
1417 // New check if we need to randomise the test order | |
1418 if (this.randomiseOrder) | |
1419 { | |
1420 this.audioHolders = randomiseOrder(this.audioHolders); | |
1421 for (var i=0; i<this.audioHolders.length; i++) | |
1422 { | |
1423 this.audioHolders[i].presentedId = i; | |
1424 } | |
1425 } | |
1426 | |
1427 if (this.testPages != null || this.testPages != undefined) | |
1428 { | |
1429 if (this.testPages > audioHolders.length) | |
1430 { | |
1431 console.log('Warning: You have specified '+audioHolders.length+' tests but requested '+this.testPages+' be completed!'); | |
1432 this.testPages = audioHolders.length; | |
1433 } | |
1434 var aH = this.audioHolders; | |
1435 this.audioHolders = []; | |
1436 for (var i=0; i<this.testPages; i++) | |
1437 { | |
1438 this.audioHolders.push(aH[i]); | |
1439 } | |
1440 } | |
1441 }; | |
1442 | |
1443 this.prepostNode = function(type,Collection) { | |
1444 this.type = type; | |
1445 this.options = []; | |
1446 | |
1447 this.OptionNode = function(child) { | |
1448 | |
1449 this.childOption = function(element) { | |
1450 this.type = 'option'; | |
1451 this.id = element.id; | |
1452 this.name = element.getAttribute('name'); | |
1453 this.text = element.textContent; | |
1454 }; | |
1455 | |
1456 this.type = child.nodeName; | |
1457 if (child.nodeName == "question") { | |
1458 this.id = child.id; | |
1459 this.mandatory; | |
1460 if (child.getAttribute('mandatory') == "true") {this.mandatory = true;} | |
1461 else {this.mandatory = false;} | |
1462 this.question = child.textContent; | |
1463 if (child.getAttribute('boxsize') == null) { | |
1464 this.boxsize = 'normal'; | |
1465 } else { | |
1466 this.boxsize = child.getAttribute('boxsize'); | |
1467 } | |
1468 } else if (child.nodeName == "statement") { | |
1469 this.statement = child.textContent; | |
1470 } else if (child.nodeName == "checkbox" || child.nodeName == "radio") { | |
1471 var element = child.firstElementChild; | |
1472 this.id = child.id; | |
1473 if (element == null) { | |
1474 console.log('Malformed' +child.nodeName+ 'entry'); | |
1475 this.statement = 'Malformed' +child.nodeName+ 'entry'; | |
1476 this.type = 'statement'; | |
1477 } else { | |
1478 this.options = []; | |
1479 while (element != null) { | |
1480 if (element.nodeName == 'statement' && this.statement == undefined){ | |
1481 this.statement = element.textContent; | |
1482 } else if (element.nodeName == 'option') { | |
1483 this.options.push(new this.childOption(element)); | |
1484 } | |
1485 element = element.nextElementSibling; | |
1486 } | |
1487 } | |
1488 } else if (child.nodeName == "number") { | |
1489 this.statement = child.textContent; | |
1490 this.id = child.id; | |
1491 this.min = child.getAttribute('min'); | |
1492 this.max = child.getAttribute('max'); | |
1493 this.step = child.getAttribute('step'); | |
1494 } | |
1495 }; | |
1496 | |
1497 // On construction: | |
1498 if (Collection.length != 0) { | |
1499 Collection = Collection[0]; | |
1500 if (Collection.childElementCount != 0) { | |
1501 var child = Collection.firstElementChild; | |
1502 this.options.push(new this.OptionNode(child)); | |
1503 while (child.nextElementSibling != null) { | |
1504 child = child.nextElementSibling; | |
1505 this.options.push(new this.OptionNode(child)); | |
1506 } | |
1507 } | |
1508 } | |
1509 }; | |
1510 | |
1511 this.metricNode = function(name) { | |
1512 this.enabled = name; | |
1513 }; | |
1514 | |
1515 this.audioHolderNode = function(parent,xml) { | |
1516 this.type = 'audioHolder'; | |
1517 this.presentedId = parent.audioHolders.length; | |
1518 this.interfaceNode = function(DOM) { | |
1519 var title = DOM.getElementsByTagName('title'); | |
1520 if (title.length == 0) {this.title = null;} | |
1521 else {this.title = title[0].textContent;} | |
1522 this.options = parent.commonInterface.options; | |
1523 var scale = DOM.getElementsByTagName('scale'); | |
1524 this.scale = []; | |
1525 for (var i=0; i<scale.length; i++) { | |
1526 var arr = [null, null]; | |
1527 arr[0] = scale[i].getAttribute('position'); | |
1528 arr[1] = scale[i].textContent; | |
1529 this.scale.push(arr); | |
1530 } | |
1531 }; | |
1532 | |
1533 this.audioElementNode = function(parent,xml) { | |
1534 this.url = xml.getAttribute('url'); | |
1535 this.id = xml.id; | |
1536 this.parent = parent; | |
1537 this.type = xml.getAttribute('type'); | |
1538 if (this.type == null) {this.type = "normal";} | |
1539 if (this.type == 'anchor') {this.anchor = true;} | |
1540 else {this.anchor = false;} | |
1541 if (this.type == 'reference') {this.reference = true;} | |
1542 else {this.reference = false;} | |
1543 | |
1544 if (this.anchor == true || this.reference == true) | |
1545 { | |
1546 this.marker = xml.getAttribute('marker'); | |
1547 if (this.marker != undefined) | |
1548 { | |
1549 this.marker = Number(this.marker); | |
1550 if (isNaN(this.marker) == false) | |
1551 { | |
1552 if (this.marker > 1) | |
1553 { this.marker /= 100.0;} | |
1554 if (this.marker >= 0 && this.marker <= 1) | |
1555 { | |
1556 this.enforce = true; | |
1557 return; | |
1558 } else { | |
1559 console.log("ERROR - Marker of audioElement "+this.id+" is not between 0 and 1 (float) or 0 and 100 (integer)!"); | |
1560 console.log("ERROR - Marker not enforced!"); | |
1561 } | |
1562 } else { | |
1563 console.log("ERROR - Marker of audioElement "+this.id+" is not a number!"); | |
1564 console.log("ERROR - Marker not enforced!"); | |
1565 } | |
1566 } | |
1567 } | |
1568 this.marker = false; | |
1569 this.enforce = false; | |
1570 }; | |
1571 | |
1572 this.commentQuestionNode = function(xml) { | |
1573 this.childOption = function(element) { | |
1574 this.type = 'option'; | |
1575 this.name = element.getAttribute('name'); | |
1576 this.text = element.textContent; | |
1577 }; | |
1578 this.id = xml.id; | |
1579 if (xml.getAttribute('mandatory') == 'true') {this.mandatory = true;} | |
1580 else {this.mandatory = false;} | |
1581 this.type = xml.getAttribute('type'); | |
1582 if (this.type == undefined) {this.type = 'text';} | |
1583 switch (this.type) { | |
1584 case 'text': | |
1585 this.question = xml.textContent; | |
1586 break; | |
1587 case 'radio': | |
1588 var child = xml.firstElementChild; | |
1589 this.options = []; | |
1590 while (child != undefined) { | |
1591 if (child.nodeName == 'statement' && this.statement == undefined) { | |
1592 this.statement = child.textContent; | |
1593 } else if (child.nodeName == 'option') { | |
1594 this.options.push(new this.childOption(child)); | |
1595 } | |
1596 child = child.nextElementSibling; | |
1597 } | |
1598 break; | |
1599 case 'checkbox': | |
1600 var child = xml.firstElementChild; | |
1601 this.options = []; | |
1602 while (child != undefined) { | |
1603 if (child.nodeName == 'statement' && this.statement == undefined) { | |
1604 this.statement = child.textContent; | |
1605 } else if (child.nodeName == 'option') { | |
1606 this.options.push(new this.childOption(child)); | |
1607 } | |
1608 child = child.nextElementSibling; | |
1609 } | |
1610 break; | |
1611 } | |
1612 }; | |
1613 | |
1614 this.id = xml.id; | |
1615 this.hostURL = xml.getAttribute('hostURL'); | |
1616 this.sampleRate = xml.getAttribute('sampleRate'); | |
1617 if (xml.getAttribute('randomiseOrder') == "true") {this.randomiseOrder = true;} | |
1618 else {this.randomiseOrder = false;} | |
1619 this.repeatCount = xml.getAttribute('repeatCount'); | |
1620 if (xml.getAttribute('loop') == 'true') {this.loop = true;} | |
1621 else {this.loop == false;} | |
1622 if (xml.getAttribute('elementComments') == "true") {this.elementComments = true;} | |
1623 else {this.elementComments = false;} | |
1624 | |
1625 this.preTest = new parent.prepostNode('pretest',xml.getElementsByTagName('PreTest')); | |
1626 this.postTest = new parent.prepostNode('posttest',xml.getElementsByTagName('PostTest')); | |
1627 | |
1628 this.interfaces = []; | |
1629 var interfaceDOM = xml.getElementsByTagName('interface'); | |
1630 for (var i=0; i<interfaceDOM.length; i++) { | |
1631 this.interfaces.push(new this.interfaceNode(interfaceDOM[i])); | |
1632 } | |
1633 | |
1634 this.commentBoxPrefix = xml.getElementsByTagName('commentBoxPrefix'); | |
1635 if (this.commentBoxPrefix.length != 0) { | |
1636 this.commentBoxPrefix = this.commentBoxPrefix[0].textContent; | |
1637 } else { | |
1638 this.commentBoxPrefix = "Comment on track"; | |
1639 } | |
1640 | |
1641 this.audioElements =[]; | |
1642 var audioElementsDOM = xml.getElementsByTagName('audioElements'); | |
1643 this.outsideReference = null; | |
1644 for (var i=0; i<audioElementsDOM.length; i++) { | |
1645 if (audioElementsDOM[i].getAttribute('type') == 'outsidereference') { | |
1646 if (this.outsideReference == null) { | |
1647 this.outsideReference = new this.audioElementNode(this,audioElementsDOM[i]); | |
1648 } else { | |
1649 console.log('Error only one audioelement can be of type outsidereference per audioholder'); | |
1650 this.audioElements.push(new this.audioElementNode(this,audioElementsDOM[i])); | |
1651 console.log('Element id '+audioElementsDOM[i].id+' made into normal node'); | |
1652 } | |
1653 } else { | |
1654 this.audioElements.push(new this.audioElementNode(this,audioElementsDOM[i])); | |
1655 } | |
1656 } | |
1657 | |
1658 if (this.randomiseOrder) { | |
1659 this.audioElements = randomiseOrder(this.audioElements); | |
1660 } | |
1661 | |
1662 this.commentQuestions = []; | |
1663 var commentQuestionsDOM = xml.getElementsByTagName('CommentQuestion'); | |
1664 for (var i=0; i<commentQuestionsDOM.length; i++) { | |
1665 this.commentQuestions.push(new this.commentQuestionNode(commentQuestionsDOM[i])); | |
1666 } | |
1667 }; | |
1668 } | |
1669 | |
1670 function Interface(specificationObject) { | |
1671 // This handles the bindings between the interface and the audioEngineContext; | |
1672 this.specification = specificationObject; | |
1673 this.insertPoint = document.getElementById("topLevelBody"); | |
1674 | |
1675 // Bounded by interface!! | |
1676 // Interface object MUST have an exportXMLDOM method which returns the various DOM levels | |
1677 // For example, APE returns the slider position normalised in a <value> tag. | |
1678 this.interfaceObjects = []; | |
1679 this.interfaceObject = function(){}; | |
1680 | |
1681 this.resizeWindow = function(event) | |
1682 { | |
1683 for(var i=0; i<this.commentBoxes.length; i++) | |
1684 {this.commentBoxes[i].resize();} | |
1685 for(var i=0; i<this.commentQuestions.length; i++) | |
1686 {this.commentQuestions[i].resize();} | |
1687 try | |
1688 { | |
1689 resizeWindow(event); | |
1690 } | |
1691 catch(err) | |
1692 { | |
1693 console.log("Warning - Interface does not have Resize option"); | |
1694 console.log(err); | |
1695 } | |
1696 }; | |
1697 | |
1698 this.commentBoxes = []; | |
1699 this.elementCommentBox = function(audioObject) { | |
1700 var element = audioObject.specification; | |
1701 this.audioObject = audioObject; | |
1702 this.id = audioObject.id; | |
1703 var audioHolderObject = audioObject.specification.parent; | |
1704 // Create document objects to hold the comment boxes | |
1705 this.trackComment = document.createElement('div'); | |
1706 this.trackComment.className = 'comment-div'; | |
1707 this.trackComment.id = 'comment-div-'+audioObject.id; | |
1708 // Create a string next to each comment asking for a comment | |
1709 this.trackString = document.createElement('span'); | |
1710 this.trackString.innerHTML = audioHolderObject.commentBoxPrefix+' '+audioObject.id; | |
1711 // Create the HTML5 comment box 'textarea' | |
1712 this.trackCommentBox = document.createElement('textarea'); | |
1713 this.trackCommentBox.rows = '4'; | |
1714 this.trackCommentBox.cols = '100'; | |
1715 this.trackCommentBox.name = 'trackComment'+audioObject.id; | |
1716 this.trackCommentBox.className = 'trackComment'; | |
1717 var br = document.createElement('br'); | |
1718 // Add to the holder. | |
1719 this.trackComment.appendChild(this.trackString); | |
1720 this.trackComment.appendChild(br); | |
1721 this.trackComment.appendChild(this.trackCommentBox); | |
1722 | |
1723 this.exportXMLDOM = function() { | |
1724 var root = document.createElement('comment'); | |
1725 if (this.audioObject.specification.parent.elementComments) { | |
1726 var question = document.createElement('question'); | |
1727 question.textContent = this.trackString.textContent; | |
1728 var response = document.createElement('response'); | |
1729 response.textContent = this.trackCommentBox.value; | |
1730 console.log("Comment frag-"+this.id+": "+response.textContent); | |
1731 root.appendChild(question); | |
1732 root.appendChild(response); | |
1733 } | |
1734 return root; | |
1735 }; | |
1736 this.resize = function() | |
1737 { | |
1738 var boxwidth = (window.innerWidth-100)/2; | |
1739 if (boxwidth >= 600) | |
1740 { | |
1741 boxwidth = 600; | |
1742 } | |
1743 else if (boxwidth < 400) | |
1744 { | |
1745 boxwidth = 400; | |
1746 } | |
1747 this.trackComment.style.width = boxwidth+"px"; | |
1748 this.trackCommentBox.style.width = boxwidth-6+"px"; | |
1749 }; | |
1750 this.resize(); | |
1751 }; | |
1752 | |
1753 this.commentQuestions = []; | |
1754 | |
1755 this.commentBox = function(commentQuestion) { | |
1756 this.specification = commentQuestion; | |
1757 // Create document objects to hold the comment boxes | |
1758 this.holder = document.createElement('div'); | |
1759 this.holder.className = 'comment-div'; | |
1760 // Create a string next to each comment asking for a comment | |
1761 this.string = document.createElement('span'); | |
1762 this.string.innerHTML = commentQuestion.question; | |
1763 // Create the HTML5 comment box 'textarea' | |
1764 this.textArea = document.createElement('textarea'); | |
1765 this.textArea.rows = '4'; | |
1766 this.textArea.cols = '100'; | |
1767 this.textArea.className = 'trackComment'; | |
1768 var br = document.createElement('br'); | |
1769 // Add to the holder. | |
1770 this.holder.appendChild(this.string); | |
1771 this.holder.appendChild(br); | |
1772 this.holder.appendChild(this.textArea); | |
1773 | |
1774 this.exportXMLDOM = function() { | |
1775 var root = document.createElement('comment'); | |
1776 root.id = this.specification.id; | |
1777 root.setAttribute('type',this.specification.type); | |
1778 root.textContent = this.textArea.value; | |
1779 console.log("Question: "+this.string.textContent); | |
1780 console.log("Response: "+root.textContent); | |
1781 return root; | |
1782 }; | |
1783 this.resize = function() | |
1784 { | |
1785 var boxwidth = (window.innerWidth-100)/2; | |
1786 if (boxwidth >= 600) | |
1787 { | |
1788 boxwidth = 600; | |
1789 } | |
1790 else if (boxwidth < 400) | |
1791 { | |
1792 boxwidth = 400; | |
1793 } | |
1794 this.holder.style.width = boxwidth+"px"; | |
1795 this.textArea.style.width = boxwidth-6+"px"; | |
1796 }; | |
1797 this.resize(); | |
1798 }; | |
1799 | |
1800 this.radioBox = function(commentQuestion) { | |
1801 this.specification = commentQuestion; | |
1802 // Create document objects to hold the comment boxes | |
1803 this.holder = document.createElement('div'); | |
1804 this.holder.className = 'comment-div'; | |
1805 // Create a string next to each comment asking for a comment | |
1806 this.string = document.createElement('span'); | |
1807 this.string.innerHTML = commentQuestion.statement; | |
1808 var br = document.createElement('br'); | |
1809 // Add to the holder. | |
1810 this.holder.appendChild(this.string); | |
1811 this.holder.appendChild(br); | |
1812 this.options = []; | |
1813 this.inputs = document.createElement('div'); | |
1814 this.span = document.createElement('div'); | |
1815 this.inputs.align = 'center'; | |
1816 this.inputs.style.marginLeft = '12px'; | |
1817 this.span.style.marginLeft = '12px'; | |
1818 this.span.align = 'center'; | |
1819 this.span.style.marginTop = '15px'; | |
1820 | |
1821 var optCount = commentQuestion.options.length; | |
1822 for (var i=0; i<optCount; i++) | |
1823 { | |
1824 var div = document.createElement('div'); | |
1825 div.style.width = '80px'; | |
1826 div.style.float = 'left'; | |
1827 var input = document.createElement('input'); | |
1828 input.type = 'radio'; | |
1829 input.name = commentQuestion.id; | |
1830 input.setAttribute('setvalue',commentQuestion.options[i].name); | |
1831 input.className = 'comment-radio'; | |
1832 div.appendChild(input); | |
1833 this.inputs.appendChild(div); | |
1834 | |
1835 | |
1836 div = document.createElement('div'); | |
1837 div.style.width = '80px'; | |
1838 div.style.float = 'left'; | |
1839 div.align = 'center'; | |
1840 var span = document.createElement('span'); | |
1841 span.textContent = commentQuestion.options[i].text; | |
1842 span.className = 'comment-radio-span'; | |
1843 div.appendChild(span); | |
1844 this.span.appendChild(div); | |
1845 this.options.push(input); | |
1846 } | |
1847 this.holder.appendChild(this.span); | |
1848 this.holder.appendChild(this.inputs); | |
1849 | |
1850 this.exportXMLDOM = function() { | |
1851 var root = document.createElement('comment'); | |
1852 root.id = this.specification.id; | |
1853 root.setAttribute('type',this.specification.type); | |
1854 var question = document.createElement('question'); | |
1855 question.textContent = this.string.textContent; | |
1856 var response = document.createElement('response'); | |
1857 var i=0; | |
1858 while(this.options[i].checked == false) { | |
1859 i++; | |
1860 if (i >= this.options.length) { | |
1861 break; | |
1862 } | |
1863 } | |
1864 if (i >= this.options.length) { | |
1865 response.textContent = 'null'; | |
1866 } else { | |
1867 response.textContent = this.options[i].getAttribute('setvalue'); | |
1868 response.setAttribute('number',i); | |
1869 } | |
1870 console.log('Comment: '+question.textContent); | |
1871 console.log('Response: '+response.textContent); | |
1872 root.appendChild(question); | |
1873 root.appendChild(response); | |
1874 return root; | |
1875 }; | |
1876 this.resize = function() | |
1877 { | |
1878 var boxwidth = (window.innerWidth-100)/2; | |
1879 if (boxwidth >= 600) | |
1880 { | |
1881 boxwidth = 600; | |
1882 } | |
1883 else if (boxwidth < 400) | |
1884 { | |
1885 boxwidth = 400; | |
1886 } | |
1887 this.holder.style.width = boxwidth+"px"; | |
1888 var text = this.holder.children[2]; | |
1889 var options = this.holder.children[3]; | |
1890 var optCount = options.children.length; | |
1891 var spanMargin = Math.floor(((boxwidth-20-(optCount*80))/(optCount))/2)+'px'; | |
1892 var options = options.firstChild; | |
1893 var text = text.firstChild; | |
1894 options.style.marginRight = spanMargin; | |
1895 options.style.marginLeft = spanMargin; | |
1896 text.style.marginRight = spanMargin; | |
1897 text.style.marginLeft = spanMargin; | |
1898 while(options.nextSibling != undefined) | |
1899 { | |
1900 options = options.nextSibling; | |
1901 text = text.nextSibling; | |
1902 options.style.marginRight = spanMargin; | |
1903 options.style.marginLeft = spanMargin; | |
1904 text.style.marginRight = spanMargin; | |
1905 text.style.marginLeft = spanMargin; | |
1906 } | |
1907 }; | |
1908 this.resize(); | |
1909 }; | |
1910 | |
1911 this.checkboxBox = function(commentQuestion) { | |
1912 this.specification = commentQuestion; | |
1913 // Create document objects to hold the comment boxes | |
1914 this.holder = document.createElement('div'); | |
1915 this.holder.className = 'comment-div'; | |
1916 // Create a string next to each comment asking for a comment | |
1917 this.string = document.createElement('span'); | |
1918 this.string.innerHTML = commentQuestion.statement; | |
1919 var br = document.createElement('br'); | |
1920 // Add to the holder. | |
1921 this.holder.appendChild(this.string); | |
1922 this.holder.appendChild(br); | |
1923 this.options = []; | |
1924 this.inputs = document.createElement('div'); | |
1925 this.span = document.createElement('div'); | |
1926 this.inputs.align = 'center'; | |
1927 this.inputs.style.marginLeft = '12px'; | |
1928 this.span.style.marginLeft = '12px'; | |
1929 this.span.align = 'center'; | |
1930 this.span.style.marginTop = '15px'; | |
1931 | |
1932 var optCount = commentQuestion.options.length; | |
1933 for (var i=0; i<optCount; i++) | |
1934 { | |
1935 var div = document.createElement('div'); | |
1936 div.style.width = '80px'; | |
1937 div.style.float = 'left'; | |
1938 var input = document.createElement('input'); | |
1939 input.type = 'checkbox'; | |
1940 input.name = commentQuestion.id; | |
1941 input.setAttribute('setvalue',commentQuestion.options[i].name); | |
1942 input.className = 'comment-radio'; | |
1943 div.appendChild(input); | |
1944 this.inputs.appendChild(div); | |
1945 | |
1946 | |
1947 div = document.createElement('div'); | |
1948 div.style.width = '80px'; | |
1949 div.style.float = 'left'; | |
1950 div.align = 'center'; | |
1951 var span = document.createElement('span'); | |
1952 span.textContent = commentQuestion.options[i].text; | |
1953 span.className = 'comment-radio-span'; | |
1954 div.appendChild(span); | |
1955 this.span.appendChild(div); | |
1956 this.options.push(input); | |
1957 } | |
1958 this.holder.appendChild(this.span); | |
1959 this.holder.appendChild(this.inputs); | |
1960 | |
1961 this.exportXMLDOM = function() { | |
1962 var root = document.createElement('comment'); | |
1963 root.id = this.specification.id; | |
1964 root.setAttribute('type',this.specification.type); | |
1965 var question = document.createElement('question'); | |
1966 question.textContent = this.string.textContent; | |
1967 root.appendChild(question); | |
1968 console.log('Comment: '+question.textContent); | |
1969 for (var i=0; i<this.options.length; i++) { | |
1970 var response = document.createElement('response'); | |
1971 response.textContent = this.options[i].checked; | |
1972 response.setAttribute('name',this.options[i].getAttribute('setvalue')); | |
1973 root.appendChild(response); | |
1974 console.log('Response '+response.getAttribute('name') +': '+response.textContent); | |
1975 } | |
1976 return root; | |
1977 }; | |
1978 this.resize = function() | |
1979 { | |
1980 var boxwidth = (window.innerWidth-100)/2; | |
1981 if (boxwidth >= 600) | |
1982 { | |
1983 boxwidth = 600; | |
1984 } | |
1985 else if (boxwidth < 400) | |
1986 { | |
1987 boxwidth = 400; | |
1988 } | |
1989 this.holder.style.width = boxwidth+"px"; | |
1990 var text = this.holder.children[2]; | |
1991 var options = this.holder.children[3]; | |
1992 var optCount = options.children.length; | |
1993 var spanMargin = Math.floor(((boxwidth-20-(optCount*80))/(optCount))/2)+'px'; | |
1994 var options = options.firstChild; | |
1995 var text = text.firstChild; | |
1996 options.style.marginRight = spanMargin; | |
1997 options.style.marginLeft = spanMargin; | |
1998 text.style.marginRight = spanMargin; | |
1999 text.style.marginLeft = spanMargin; | |
2000 while(options.nextSibling != undefined) | |
2001 { | |
2002 options = options.nextSibling; | |
2003 text = text.nextSibling; | |
2004 options.style.marginRight = spanMargin; | |
2005 options.style.marginLeft = spanMargin; | |
2006 text.style.marginRight = spanMargin; | |
2007 text.style.marginLeft = spanMargin; | |
2008 } | |
2009 }; | |
2010 this.resize(); | |
2011 }; | |
2012 | |
2013 this.createCommentBox = function(audioObject) { | |
2014 var node = new this.elementCommentBox(audioObject); | |
2015 this.commentBoxes.push(node); | |
2016 audioObject.commentDOM = node; | |
2017 return node; | |
2018 }; | |
2019 | |
2020 this.sortCommentBoxes = function() { | |
2021 var holder = []; | |
2022 while (this.commentBoxes.length > 0) { | |
2023 var node = this.commentBoxes.pop(0); | |
2024 holder[node.id] = node; | |
2025 } | |
2026 this.commentBoxes = holder; | |
2027 }; | |
2028 | |
2029 this.showCommentBoxes = function(inject, sort) { | |
2030 if (sort) {interfaceContext.sortCommentBoxes();} | |
2031 for (var i=0; i<interfaceContext.commentBoxes.length; i++) { | |
2032 inject.appendChild(this.commentBoxes[i].trackComment); | |
2033 } | |
2034 }; | |
2035 | |
2036 this.deleteCommentBoxes = function() { | |
2037 this.commentBoxes = []; | |
2038 }; | |
2039 | |
2040 this.createCommentQuestion = function(element) { | |
2041 var node; | |
2042 if (element.type == 'text') { | |
2043 node = new this.commentBox(element); | |
2044 } else if (element.type == 'radio') { | |
2045 node = new this.radioBox(element); | |
2046 } else if (element.type == 'checkbox') { | |
2047 node = new this.checkboxBox(element); | |
2048 } | |
2049 this.commentQuestions.push(node); | |
2050 return node; | |
2051 }; | |
2052 | |
2053 this.deleteCommentQuestions = function() | |
2054 { | |
2055 this.commentQuestions = []; | |
2056 }; | |
2057 | |
2058 this.playhead = new function() | |
2059 { | |
2060 this.object = document.createElement('div'); | |
2061 this.object.className = 'playhead'; | |
2062 this.object.align = 'left'; | |
2063 var curTime = document.createElement('div'); | |
2064 curTime.style.width = '50px'; | |
2065 this.curTimeSpan = document.createElement('span'); | |
2066 this.curTimeSpan.textContent = '00:00'; | |
2067 curTime.appendChild(this.curTimeSpan); | |
2068 this.object.appendChild(curTime); | |
2069 this.scrubberTrack = document.createElement('div'); | |
2070 this.scrubberTrack.className = 'playhead-scrub-track'; | |
2071 | |
2072 this.scrubberHead = document.createElement('div'); | |
2073 this.scrubberHead.id = 'playhead-scrubber'; | |
2074 this.scrubberTrack.appendChild(this.scrubberHead); | |
2075 this.object.appendChild(this.scrubberTrack); | |
2076 | |
2077 this.timePerPixel = 0; | |
2078 this.maxTime = 0; | |
2079 | |
2080 this.playbackObject; | |
2081 | |
2082 this.setTimePerPixel = function(audioObject) { | |
2083 //maxTime must be in seconds | |
2084 this.playbackObject = audioObject; | |
2085 this.maxTime = audioObject.buffer.duration; | |
2086 var width = 490; //500 - 10, 5 each side of the tracker head | |
2087 this.timePerPixel = this.maxTime/490; | |
2088 if (this.maxTime < 60) { | |
2089 this.curTimeSpan.textContent = '0.00'; | |
2090 } else { | |
2091 this.curTimeSpan.textContent = '00:00'; | |
2092 } | |
2093 }; | |
2094 | |
2095 this.update = function() { | |
2096 // Update the playhead position, startPlay must be called | |
2097 if (this.timePerPixel > 0) { | |
2098 var time = this.playbackObject.getCurrentPosition(); | |
2099 if (time > 0) { | |
2100 var width = 490; | |
2101 var pix = Math.floor(time/this.timePerPixel); | |
2102 this.scrubberHead.style.left = pix+'px'; | |
2103 if (this.maxTime > 60.0) { | |
2104 var secs = time%60; | |
2105 var mins = Math.floor((time-secs)/60); | |
2106 secs = secs.toString(); | |
2107 secs = secs.substr(0,2); | |
2108 mins = mins.toString(); | |
2109 this.curTimeSpan.textContent = mins+':'+secs; | |
2110 } else { | |
2111 time = time.toString(); | |
2112 this.curTimeSpan.textContent = time.substr(0,4); | |
2113 } | |
2114 } else { | |
2115 this.scrubberHead.style.left = '0px'; | |
2116 if (this.maxTime < 60) { | |
2117 this.curTimeSpan.textContent = '0.00'; | |
2118 } else { | |
2119 this.curTimeSpan.textContent = '00:00'; | |
2120 } | |
2121 } | |
2122 } | |
2123 }; | |
2124 | |
2125 this.interval = undefined; | |
2126 | |
2127 this.start = function() { | |
2128 if (this.playbackObject != undefined && this.interval == undefined) { | |
2129 if (this.maxTime < 60) { | |
2130 this.interval = setInterval(function(){interfaceContext.playhead.update();},10); | |
2131 } else { | |
2132 this.interval = setInterval(function(){interfaceContext.playhead.update();},100); | |
2133 } | |
2134 } | |
2135 }; | |
2136 this.stop = function() { | |
2137 clearInterval(this.interval); | |
2138 this.interval = undefined; | |
2139 if (this.maxTime < 60) { | |
2140 this.curTimeSpan.textContent = '0.00'; | |
2141 } else { | |
2142 this.curTimeSpan.textContent = '00:00'; | |
2143 } | |
2144 }; | |
2145 }; | |
2146 | |
2147 // Global Checkers | |
2148 // These functions will help enforce the checkers | |
2149 this.checkHiddenAnchor = function() | |
2150 { | |
2151 var audioHolder = testState.currentStateMap[testState.currentIndex]; | |
2152 if (audioHolder.anchorId != null) | |
2153 { | |
2154 var audioObject = audioEngineContext.audioObjects[audioHolder.anchorId]; | |
2155 if (audioObject.interfaceDOM.getValue() > audioObject.specification.marker && audioObject.interfaceDOM.enforce == true) | |
2156 { | |
2157 // Anchor is not set below | |
2158 console.log('Anchor node not below marker value'); | |
2159 alert('Please keep listening'); | |
2160 return false; | |
2161 } | |
2162 } | |
2163 return true; | |
2164 }; | |
2165 | |
2166 this.checkHiddenReference = function() | |
2167 { | |
2168 var audioHolder = testState.currentStateMap[testState.currentIndex]; | |
2169 if (audioHolder.referenceId != null) | |
2170 { | |
2171 var audioObject = audioEngineContext.audioObjects[audioHolder.referenceId]; | |
2172 if (audioObject.interfaceDOM.getValue() < audioObject.specification.marker && audioObject.interfaceDOM.enforce == true) | |
2173 { | |
2174 // Anchor is not set below | |
2175 console.log('Reference node not above marker value'); | |
2176 alert('Please keep listening'); | |
2177 return false; | |
2178 } | |
2179 } | |
2180 return true; | |
2181 }; | |
2182 } |