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