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