Mercurial > hg > webaudioevaluationtool
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 } |