comparison core.js @ 816:9c579fc05a09

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