Mercurial > hg > webaudioevaluationtool

comparison test_create/test_create.html @ 813:f452455b5977

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Resolved #1394: Python returns same XML responses as the PHP server
author Nicholas Jillings <nicholas.jillings@eecs.qmul.ac.uk>
date Fri, 27 Nov 2015 12:09:49 +0000
parents
children 1b6fa37d46a4
comparison
equal deleted inserted replaced
-1:000000000000 813:f452455b5977
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5
6 <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
7 Remove this if you use the .htaccess -->
8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9
10 <title>WAET: Test Creator</title>
11
12 <meta name="viewport" content="width=device-width; initial-scale=1.0">
13 <script type="text/javascript">
14
15 var APEInterfaceOptions = [["playhead","page-count"],["Show the playhead/scrubber bar", "Show test page count"]];
16 var APEInterfaceChecks = [["fragmentPlayed","fragmentFullPlayback","fragmentMoved","fragmentComments"],["All Fragments Played","All Fragments Played in entirety","All sliders moved","All fragments have comments"]];
17 var APEInterfaceMetrics = [["testTimer","elementTimer","elementTracker","elementTrackerFull","elementFlagListenedTo","elementFlagMoved","elementFlagComments"],["Test Duration","Total time each fragment was listened to","Return initialised position of marker","Fragment movement tracker with timestamps","Flag if fragment listened to","Flag if fragment moved","Flag if fragment has comments"]];
18 var MUSHRAInterfaceOptions = [[],[]];
19 var MUSHRAInterfaceChecks = [["fragmentPlayed","fragmentMoved","fragmentComments"],["All Fragments Played","All sliders moved","All fragments have comments"]];
20 var MUSHRAInterfaceMetrics = [["testTimer","elementTimer","elementTracker","elementTrackerFull","elementFlagListenedTo","elementFlagMoved","elementFlagComments"],["Test Duration","Total time each fragment was listened to","Return initialised position of marker","Fragment movement tracker with timestamps","Flag if fragment listened to","Flag if fragment moved","Flag if fragment has comments"]];
21 var popupInstance;
22 var specificationNode;
23 var audioContext;
24 var audioObjects = [];
25 window.onload = function()
26 {
27 var AudioContext = window.AudioContext || window.webkitAudioContext;
28 audioContext = new AudioContext;
29 popupInstance = new popup();
30 popupInstance.advanceState();
31 specificationNode = new Specification();
32 specificationNode.projectReturn = "null";
33 };
34
35 function popup()
36 {
37 var x = window.innerWidth;
38 var y = window.innerHeight;
39 this.popupHolder = document.createElement('div');
40 this.popupHolder.style.visibility = 'hidden';
41 this.popupContent = document.createElement('div');
42 this.popupTitle = document.createElement('div');
43 this.popupBody = document.createElement('div');
44 this.popupFooter = document.createElement('div');
45 this.popupTitleText = document.createElement('span');
46 this.popupTitle.appendChild(this.popupTitleText);
47
48 this.popupHolder.className = "popup";
49 this.popupHolder.style.left = (x-500)/2 +'px';
50 this.popupHolder.style.top = (y-400)/2 + 'px';
51 this.popupContent.style.padding = "20px";
52 this.popupHolder.appendChild(this.popupContent);
53
54 this.popupTitle.style.width = "100%";
55 this.popupTitle.style.height = "50px";
56 this.popupTitle.style.fontSize = "xx-large";
57 this.popupContent.appendChild(this.popupTitle);
58
59 this.popupBody.style.width = "100%";
60 this.popupBody.style.height = "280px";
61 this.popupContent.appendChild(this.popupBody);
62
63 this.popupFooter.style.width = "100%";
64 this.popupFooter.style.height = "30px";
65 this.popupContent.appendChild(this.popupFooter);
66 var body = document.getElementsByTagName('body')[0];
67 body.appendChild(this.popupHolder);
68
69 this.pageBlank = document.createElement('div');
70 body.appendChild(this.pageBlank);
71 this.pageBlank.style.width = "100%";
72 this.pageBlank.style.height = "100%";
73 this.pageBlank.style.position = "absolute";
74 this.pageBlank.style.left = "0px";
75 this.pageBlank.style.top = "0px";
76 this.pageBlank.style.backgroundColor = "rgba(0,0,0,0.5)";
77 this.pageBlank.style.visibility = 'hidden';
78
79 this.state = 0;
80 this.dataTransfer = null;
81
82 this.showPopup = function()
83 {
84 this.popupHolder.style.visibility = 'visible';
85 this.popupHolder.style.zIndex = "3";
86 this.pageBlank.style.visibility = 'visible';
87 this.pageBlank.style.zIndex = "2";
88 };
89
90 this.hidePopup = function()
91 {
92 this.popupHolder.style.visibility = 'hidden';
93 this.popupHolder.style.zIndex = "-1";
94 this.pageBlank.style.visibility = 'hidden';
95 this.pageBlank.style.zIndex = "-2";
96 };
97
98 this.init = function()
99 {
100 this.popupTitleText.textContent = "Welcome";
101 var text = document.createElement('span');
102 text.textContent = "Thank you for downloading the Web Audio Evaluation Toolbox. This page will help guide you through creating the documents required to run a test. If you have an existing XML file you wish to edit, please drag and drop it into the box below";
103 var dnd = document.createElement('div');
104 dnd.style.width = "100%";
105 dnd.style.height = "50px";
106 dnd.className = "dragndrop";
107 this.popupBody.appendChild(text);
108 this.popupBody.appendChild(dnd);
109 this.showPopup();
110
111 var button = document.createElement('button');
112 button.className = "popupButton";
113 button.textContent = "New File";
114 button.onclick = function(event) {
115 popupInstance.advanceState();
116 };
117 this.popupFooter.appendChild(button);
118 };
119
120 this.advanceState = function()
121 {
122 this.popupBody.innerHTML = null;
123 this.popupFooter.innerHTML = null;
124 this.popupTitleText.textContent = null;
125 switch(this.state)
126 {
127 case 0:
128 this.init();
129 break;
130 case 1:
131 this.popupTitleText.textContent = "Test Type";
132 var text = document.createElement("span");
133 text.textContent = "What type of test would you like to use. Currently APE (Audio Perceptual Evaluation) and MUSHRA style interfaces are available";
134 this.popupBody.appendChild(text);
135 var select = document.createElement("select");
136 select.id="interface-select";
137 var opt1 = document.createElement("option");
138 opt1.value = "APE";
139 opt1.textContent = "APE";
140 select.appendChild(opt1);
141 var opt2 = document.createElement("option");
142 opt2.value = "MUSHRA";
143 opt2.textContent = "MUSHRA";
144 select.appendChild(opt2);
145 this.popupBody.appendChild(select);
146
147 var button = document.createElement('button');
148 button.className = "popupButton";
149 button.textContent = "Submit";
150 button.onclick = function(event) {
151 var select = document.getElementById("interface-select");
152 specificationNode.interfaceType = select.value;
153 specificationNode.collectMetrics = true;
154 popupInstance.advanceState();
155 };
156 this.popupFooter.appendChild(button);
157 break;
158 case 2:
159 this.popupTitleText.textContent = "Test Options";
160 var holder = document.createElement('div');
161 holder.style.margin = "5px";
162 var checkbox = document.createElement('input');
163 checkbox.type = 'checkbox';
164 checkbox.id = "Randomise-Page";
165 var text = document.createElement('span');
166 text.textContent = "Randomise Page Order";
167 holder.appendChild(checkbox);
168 holder.appendChild(text);
169 this.popupBody.appendChild(holder);
170 switch(specificationNode.interfaceType)
171 {
172 case "APE":
173 for (var i=0; i<APEInterfaceOptions[0].length; i++)
174 {
175 holder = document.createElement('div');
176 holder.style.margin = "5px";
177 checkbox = document.createElement('input');
178 checkbox.type = 'checkbox';
179 checkbox.setAttribute("name","option");
180 checkbox.id = APEInterfaceOptions[0][i];
181 text = document.createElement('span');
182 text.textContent = APEInterfaceOptions[1][i];
183 holder.appendChild(checkbox);
184 holder.appendChild(text);
185 this.popupBody.appendChild(holder);
186 }
187 for (var i=0; i<APEInterfaceChecks[0].length; i++)
188 {
189 holder = document.createElement('div');
190 holder.style.margin = "5px";
191 checkbox = document.createElement('input');
192 checkbox.type = 'checkbox';
193 checkbox.setAttribute("name","check");
194 checkbox.id = APEInterfaceChecks[0][i];
195 text = document.createElement('span');
196 text.textContent = APEInterfaceChecks[1][i];
197 holder.appendChild(checkbox);
198 holder.appendChild(text);
199 this.popupBody.appendChild(holder);
200 }
201 break;
202 case "MUSHRA":
203 for (var i=0; i<MUSHRAInterfaceOptions[0].length; i++)
204 {
205 holder = document.createElement('div');
206 holder.style.margin = "5px";
207 checkbox = document.createElement('input');
208 checkbox.type = 'checkbox';
209 checkbox.setAttribute("name","option");
210 checkbox.id = MUSHRAInterfaceOptions[0][i];
211 text = document.createElement('span');
212 text.textContent = MUSHRAInterfaceOptions[1][i];
213 holder.appendChild(checkbox);
214 holder.appendChild(text);
215 this.popupBody.appendChild(holder);
216 }
217 for (var i=0; i<MUSHRAInterfaceChecks[0].length; i++)
218 {
219 holder = document.createElement('div');
220 holder.style.margin = "5px";
221 checkbox = document.createElement('input');
222 checkbox.type = 'checkbox';
223 checkbox.setAttribute("name","check");
224 checkbox.id = MUSHRAInterfaceChecks[0][i];
225 text = document.createElement('span');
226 text.textContent = MUSHRAInterfaceChecks[1][i];
227 holder.appendChild(checkbox);
228 holder.appendChild(text);
229 this.popupBody.appendChild(holder);
230 }
231 }
232 var button = document.createElement('button');
233 button.className = "popupButton";
234 button.textContent = "Submit";
235 button.onclick = function(event) {
236 var optHold = popupInstance.popupBody;
237 var opt = optHold.firstChild;
238 var input = opt.getElementsByTagName('input')[0];
239 specificationNode.randomiseOrder = input.checked;
240 while(opt.nextSibling != null)
241 {
242 opt = opt.nextSibling;
243 input = opt.getElementsByTagName('input')[0];
244 if (input.checked)
245 {
246 specificationNode.commonInterface.options.push(new specificationNode.commonInterface.optionNode(input));
247 }
248
249 }
250 popupInstance.advanceState();
251 };
252 this.popupFooter.appendChild(button);
253 break;
254 case 3:
255 audioObjects = [];
256 this.popupTitleText.textContent = "Test Page";
257 var span = document.createElement('span');
258 span.textContent = "Drag and drop your audio files into the box below to add them to a test page";
259 this.popupBody.appendChild(span);
260 var dnd = document.createElement('div');
261 dnd.id = "audio-holder-drop";
262 dnd.style.width = "100%";
263 dnd.style.minHeight = "50px";
264 dnd.style.maxHeight = "220px";
265 dnd.style.overflow = 'auto';
266 dnd.className = "dragndrop";
267 dnd.ondragover = function(e) {
268 if(e.preventDefault) {e.preventDefault();}
269 return false;
270 };
271 dnd.ondragenter = function(e) {
272 if(e.preventDefault) {e.preventDefault();}
273 return false;
274 };
275 dnd.ondrop = function(e) {
276 if(e.preventDefault) {e.preventDefault();}
277 var dt = e.dataTransfer;
278 var body = document.getElementById("audio-holder-drop");
279 var files = dt.files;
280 for (var i = 0, f; f = files[i]; i++)
281 {
282 var ao = new audioObject();
283 ao.constructTrack(f);
284 audioObjects.push(ao);
285 var dndHeader = document.createElement('div');
286 dndHeader.style.width = "100%";
287 dndHeader.style.height = "20px";
288 dndHeader.style.borderBottom = "#DDD";
289 dndHeader.style.borderBottomWidth = "1px";
290 dndHeader.style.borderBottomStyle = "solid";
291 dndHeader.setAttribute('aoID',audioObjects.length-1);
292 var dndHInclude = document.createElement('div');
293 dndHInclude.style.width = "30px";
294 dndHInclude.className = "dndheaderelement";
295 var includeCheck = document.createElement('input');
296 includeCheck.type = "checkbox";
297 includeCheck.name = "include-check";
298 includeCheck.checked = true;
299 includeCheck.onchange = function()
300 {
301 var i = event.currentTarget.parentElement.parentElement.getAttribute('aoID');
302 audioObjects[i].include = event.currentTarget.checked;
303 };
304 dndHInclude.appendChild(includeCheck);
305 dndHeader.appendChild(dndHInclude);
306 var dndHTitle = document.createElement('div');
307 dndHTitle.style.width = "180px";
308 dndHTitle.className = "dndheaderelement";
309 var text = document.createElement('span');
310 text.textContent = f.name;
311 dndHTitle.appendChild(text);
312 dndHeader.appendChild(dndHTitle);
313 var dndHID = document.createElement('div');
314 dndHID.style.width = "100px";
315 dndHID.className = "dndheaderelement";
316 var IDInput = document.createElement('input');
317 IDInput.name = "audio-fragment-ID";
318 IDInput.value = f.name.split('.')[0];
319 IDInput.onchange = function()
320 {
321 var allIDInput = document.getElementsByName("audio-fragment-ID");
322 var isCopy = new Array(allIDInput.length);
323 isCopy.fill(0,0,this.length);
324 if (allIDInput.length > 1)
325 {
326 for (var j=0; j<allIDInput.length; j++)
327 {
328 var textCompare1 = allIDInput[j].value;
329 for (var k=j+1; k<allIDInput.length; k++)
330 {
331 var textCompare2 = allIDInput[k].value;
332 if (textCompare1 == textCompare2)
333 {
334 isCopy[j] = 1;
335 isCopy[k] = 1;
336 }
337 }
338 }
339 }
340 var button = document.getElementById('submit');
341 button.disabled = false;
342 for (var j=0; j<allIDInput.length; j++)
343 {
344 if (isCopy[j] == 1)
345 {
346 allIDInput[j].style.backgroundColor = '#F22';
347 button.disabled = true;
348 }
349 else
350 {
351 allIDInput[j].style.backgroundColor = '#FFF';
352 audioObjects[j].id = allIDInput[j].value;
353 }
354 }
355 };
356 IDInput.style.width = "96px";
357 dndHID.appendChild(IDInput);
358 dndHeader.appendChild(dndHID);
359 var dndHPlay = document.createElement('div');
360 dndHPlay.style.width = "100px";
361 dndHPlay.className = "dndheaderelement";
362 var audio = document.createElement('button');
363 audio.textContent = 'Play';
364 audio.className = "popupButton";
365 audio.style.height = "inherit";
366 audio.onclick = function()
367 {
368 var i = event.currentTarget.parentElement.parentElement.getAttribute('aoID');
369 audioObjects[i].play();
370 };
371 dndHPlay.appendChild(audio);
372 dndHeader.appendChild(dndHPlay);
373 dnd.appendChild(dndHeader);
374 IDInput.onchange();
375 }
376 };
377 var dndHeader = document.createElement('div');
378 dndHeader.style.width = "100%";
379 dndHeader.style.height = "15px";
380 dndHeader.style.borderBottom = "#DDD";
381 dndHeader.style.borderBottomWidth = "1px";
382 dndHeader.style.borderBottomStyle = "solid";
383 var dndHInclude = document.createElement('div');
384 dndHInclude.style.width = "30px";
385 dndHInclude.className = "dndheaderelement";
386 var text = document.createElement('span');
387 text.textContent = "Inc.";
388 dndHInclude.appendChild(text);
389 dndHeader.appendChild(dndHInclude);
390 var dndHTitle = document.createElement('div');
391 dndHTitle.style.width = "180px";
392 dndHTitle.className = "dndheaderelement";
393 text = document.createElement('span');
394 text.textContent = "File Name";
395 dndHTitle.appendChild(text);
396 dndHeader.appendChild(dndHTitle);
397 var dndHID = document.createElement('div');
398 dndHID.style.width = "100px";
399 dndHID.className = "dndheaderelement";
400 text = document.createElement('span');
401 text.textContent = "ID";
402 dndHID.appendChild(text);
403 dndHeader.appendChild(dndHID);
404 var dndHPlay = document.createElement('div');
405 dndHPlay.style.width = "100px";
406 dndHPlay.className = "dndheaderelement";
407 text = document.createElement('span');
408 text.textContent = "Sample";
409 dndHPlay.appendChild(text);
410 dndHeader.appendChild(dndHPlay);
411 dnd.appendChild(dndHeader);
412 this.popupBody.appendChild(dnd);
413 var button = document.createElement('button');
414 button.id = 'submit';
415 button.className = "popupButton";
416 button.textContent = "Submit";
417 button.onclick = function(event)
418 {
419 // Construct the audio-holder nodes;
420 for (var i=0; i<audioObjects.length; i++)
421 {
422 if (!audioObjects[i].include)
423 {
424 audioObjects.pop(audioObjects[i]);
425 }
426 }
427 if (audioObjects.length != 0)
428 {
429 popupInstance.advanceState();
430 }
431 };
432 this.popupFooter.appendChild(button);
433 break;
434 case 4:
435 this.popupTitleText.textContent = "Test Page - Options";
436 var span = document.createElement('span');
437 span.textContent = "Set your test page options here";
438 this.popupBody.appendChild(span);
439 var pair = document.createElement('div');
440 pair.style.margin = '5px';
441 var text = document.createElement('span');
442 text.textContent = "Page ID:";
443 var input = document.createElement('input');
444 input.value = specificationNode.audioHolders.length;
445 input.id = "id";
446 pair.appendChild(text);
447 pair.appendChild(input);
448 this.popupBody.appendChild(pair);
449 pair = document.createElement('div');
450 pair.style.margin = '5px';
451 text = document.createElement('span');
452 text.textContent = "Randomise Fragment Order";
453 input = document.createElement('input');
454 input.type = "checkbox";
455 input.id = "randomiseOrder";
456 pair.appendChild(input);
457 pair.appendChild(text);
458 this.popupBody.appendChild(pair);
459 pair = document.createElement('div');
460 pair.style.margin = '5px';
461 text = document.createElement('span');
462 text.textContent = "Loop Fragment Playback";
463 input = document.createElement('input');
464 input.type = "checkbox";
465 input.id = "loop";
466 pair.appendChild(input);
467 pair.appendChild(text);
468 this.popupBody.appendChild(pair);
469 pair = document.createElement('div');
470 pair.style.margin = '5px';
471 text = document.createElement('span');
472 text.textContent = "Show fragment comment boxes";
473 input = document.createElement('input');
474 input.type = "checkbox";
475 input.id = "elementComments";
476 pair.appendChild(input);
477 pair.appendChild(text);
478 this.popupBody.appendChild(pair);
479 var button = document.createElement('button');
480 button.id = 'submit';
481 button.className = "popupButton";
482 button.textContent = "Next";
483 button.onclick = function(event)
484 {
485 var ah = new specificationNode.audioHolderNode(specificationNode);
486 ah.id = document.getElementById('id').value;
487 ah.presentedId = specificationNode.audioHolders.length;
488 ah.hostURL = ah.id+'/';
489 ah.randomiseOrder = document.getElementById('randomiseOrder').checked;
490 ah.loop = document.getElementById('loop').checked;
491 ah.elementComments = document.getElementById('elementComments').checked;
492 for (var i=0; i<audioObjects.length; i++)
493 {
494 ah.audioElements.push(new ah.audioElementNode(ah,audioObjects[i]));
495 }
496 specificationNode.audioHolders.push(ah);
497 popupInstance.advanceState();
498 };
499 this.popupFooter.appendChild(button);
500 break;
501 case 5:
502 this.dataTransfer = null;
503 this.popupTitleText.textContent = "Test Page - Pre/Post Survey";
504 var span = document.createElement('span');
505 span.textContent = "Add your pre test page options here";
506 this.popupBody.appendChild(span);
507 var preHolder = document.createElement('div');
508 preHolder.id = "preHolder";
509 preHolder.style.width = "460px";
510 preHolder.style.minHeight = "100px";
511 preHolder.style.maxHeight = "220px";
512 preHolder.style.overflow = 'auto';
513 preHolder.style.border = "black";
514 preHolder.style.borderStyle = "solid";
515 preHolder.style.borderWidth = "1px";
516 this.popupBody.appendChild(preHolder);
517 var audioHolder = specificationNode.audioHolders[specificationNode.audioHolders.length-1];
518 var preHeaderHolder = document.createElement('div');
519 preHeaderHolder.style.width = "456px";
520 preHeaderHolder.style.height= "20px";
521 preHeaderHolder.style.margin= "2px";
522 preHeaderHolder.style.borderBottom = "#DDD";
523 preHeaderHolder.style.borderBottomWidth = "1px";
524 preHeaderHolder.style.borderBottomStyle = "solid";
525 var mvH = document.createElement('div');
526 mvH.className = "dndheaderelement";
527 mvH.style.width = "50px";
528 var text = document.createElement('span');
529 text.textContent = "Order";
530 mvH.appendChild(text);
531 preHeaderHolder.appendChild(mvH);
532 var idH = document.createElement('div');
533 idH.className = "dndheaderelement";
534 idH.style.width = "150px";
535 text = document.createElement('span');
536 text.textContent = "ID";
537 idH.appendChild(text);
538 preHeaderHolder.appendChild(idH);
539 var tH = document.createElement('div');
540 tH.className = "dndheaderelement";
541 tH.style.width = "150px";
542 text = document.createElement('span');
543 text.textContent = "Type";
544 tH.appendChild(text);
545 preHeaderHolder.appendChild(tH);
546 var editH = document.createElement('div');
547 editH.className = "dndheaderelement";
548 editH.style.width = "50px";
549 text = document.createElement('span');
550 text.textContent = "Edit";
551 editH.appendChild(text);
552 preHeaderHolder.appendChild(editH);
553 var deleteH = document.createElement('div');
554 deleteH.className = "dndheaderelement";
555 deleteH.style.width = "50px";
556 text = document.createElement('span');
557 text.textContent = "Delete";
558 deleteH.appendChild(text);
559 preHeaderHolder.appendChild(deleteH);
560 preHolder.appendChild(preHeaderHolder);
561
562
563 for (var i=0; i<audioHolder.preTest.options.length; i++)
564 {
565 var optionNode = audioHolder.preTest.options[i];
566 var entry = document.createElement('div');
567 entry.style.width = "456px";
568 entry.style.height= "20px";
569 entry.style.margin= "2px";
570 entry.style.borderBottom = "#DDD";
571 entry.style.borderBottomWidth = "1px";
572 entry.style.borderBottomStyle = "solid";
573 entry.setAttribute("node-id",i);
574 var node = audioHolder.preTest.options[i];
575 var mvH = document.createElement('div');
576 mvH.className = "dndheaderelement";
577 mvH.style.width = "50px";
578 var mvup = document.createElement("button");
579 mvup.textContent = "Up";
580 mvup.style.width = "25px";
581 mvup.style.padding = "1px 0px";
582 mvup.onclick = function()
583 {
584 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
585 if (i != 0)
586 {
587 var next = audioHolder.preTest.options[i-1];
588 var cur = audioHolder.preTest.options[i];
589 audioHolder.preTest.options[i-1] = cur;
590 audioHolder.preTest.options[i] = next;
591 popupInstance.state = 5;
592 popupInstance.advanceState();
593 }
594 };
595 mvH.appendChild(mvup);
596 var mvdn = document.createElement("button");
597 mvdn.textContent = "Dn";
598 mvdn.style.width = "25px";
599 mvdn.style.padding = "1px 0px";
600 mvdn.onclick = function()
601 {
602 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
603 if (i != audioHolder.preTest.options.length-1)
604 {
605 var next = audioHolder.preTest.options[i+1];
606 var cur = audioHolder.preTest.options[i];
607 audioHolder.preTest.options[i+1] = cur;
608 audioHolder.preTest.options[i] = next;
609 popupInstance.state = 5;
610 popupInstance.advanceState();
611 }
612 };
613 mvH.appendChild(mvdn);
614 entry.appendChild(mvH);
615 var idH = document.createElement('div');
616 idH.className = "dndheaderelement";
617 idH.style.width = "150px";
618 if (optionNode.type != "statement")
619 {
620 var span = document.createElement('span');
621 span.textContent = optionNode.id;
622 idH.appendChild(span);
623 }
624 entry.appendChild(idH);
625 var typeH = document.createElement('div');
626 typeH.className = "dndheaderelement";
627 typeH.style.width = "150px";
628 var span = document.createElement('span');
629 span.textContent = optionNode.type;
630 typeH.appendChild(span);
631 entry.appendChild(typeH);
632 var editH = document.createElement('div');
633 editH.className = "dndheaderelement";
634 editH.style.width = "50px";
635 var editButton = document.createElement("button");
636 editButton.textContent = "Edit";
637 editButton.style.width = "48px";
638 editButton.style.padding = "1px 0px";
639 editButton.onclick = function()
640 {
641 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
642 popupInstance.dataTransfer = new function() {
643 this.title = "Edit Test Node";
644 this.parent = specificationNode.audioHolders[specificationNode.audioHolders.length-1].preTest;
645 this.node = this.parent.options[i];
646 this.previousState = 5;
647 };
648 popupInstance.advanceState();
649 };
650 editH.appendChild(editButton);
651 entry.appendChild(editH);
652 var deleteH = document.createElement('div');
653 deleteH.className = "dndheaderelement";
654 deleteH.style.width = "50px";
655 var deleteButton = document.createElement("button");
656 deleteButton.textContent = "Del";
657 deleteButton.style.width = "48px";
658 deleteButton.style.padding = "1px 0px";
659 deleteButton.onclick = function()
660 {
661 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
662 var j = i+1;
663 while(j < audioHolder.preTest.options.length)
664 {
665 audioHolder.preTest.options[i] = audioHolder.preTest.options[j];
666 j++;
667 i++;
668 }
669 audioHolder.preTest.options.pop();
670 popupInstance.state = 5;
671 popupInstance.advanceState();
672 };
673 deleteH.appendChild(deleteButton);
674 entry.appendChild(deleteH);
675 preHolder.appendChild(entry);
676 }
677 var entry = document.createElement('div');
678 entry.style.width = "456px";
679 entry.style.height= "20px";
680 entry.style.margin= "2px";
681 entry.style.borderBottom = "#DDD";
682 entry.style.borderBottomWidth = "1px";
683 entry.style.borderBottomStyle = "solid";
684 entry.align = "center";
685 var addPre = document.createElement('button');
686 addPre.className = "popupButton";
687 addPre.textContent = "Add New Entry";
688 addPre.style.height = "20px";
689 addPre.onclick = function()
690 {
691 popupInstance.dataTransfer = new function() {
692 this.title = "New Pre Test Node";
693 this.parent = specificationNode.audioHolders[specificationNode.audioHolders.length-1].preTest;
694 this.node = null;
695 this.previousState = 5;
696 };
697 popupInstance.advanceState();
698 };
699 entry.appendChild(addPre);
700 preHolder.appendChild(entry);
701
702 var span = document.createElement('span');
703 span.textContent = "Add your post test page options here";
704 this.popupBody.appendChild(span);
705 var postHolder = document.createElement('div');
706 postHolder.id = "preHolder";
707 postHolder.style.width = "100%";
708 postHolder.style.minHeight = "100px";
709 postHolder.style.maxHeight = "220px";
710 postHolder.style.overflow = 'auto';
711 postHolder.style.border = "black";
712 postHolder.style.borderStyle = "solid";
713 postHolder.style.borderWidth = "1px";
714 this.popupBody.appendChild(postHolder);
715 var postHeaderHolder = document.createElement('div');
716 postHeaderHolder.style.width = "456px";
717 postHeaderHolder.style.height= "20px";
718 postHeaderHolder.style.margin= "2px";
719 postHeaderHolder.style.borderBottom = "#DDD";
720 postHeaderHolder.style.borderBottomWidth = "1px";
721 postHeaderHolder.style.borderBottomStyle = "solid";
722 var mvH = document.createElement('div');
723 mvH.className = "dndheaderelement";
724 mvH.style.width = "50px";
725 var text = document.createElement('span');
726 text.textContent = "Order";
727 mvH.appendChild(text);
728 postHeaderHolder.appendChild(mvH);
729 var idH = document.createElement('div');
730 idH.className = "dndheaderelement";
731 idH.style.width = "150px";
732 text = document.createElement('span');
733 text.textContent = "ID";
734 idH.appendChild(text);
735 postHeaderHolder.appendChild(idH);
736 var tH = document.createElement('div');
737 tH.className = "dndheaderelement";
738 tH.style.width = "150px";
739 text = document.createElement('span');
740 text.textContent = "Type";
741 tH.appendChild(text);
742 postHeaderHolder.appendChild(tH);
743 var editH = document.createElement('div');
744 editH.className = "dndheaderelement";
745 editH.style.width = "50px";
746 text = document.createElement('span');
747 text.textContent = "Edit";
748 editH.appendChild(text);
749 postHeaderHolder.appendChild(editH);
750 var deleteH = document.createElement('div');
751 deleteH.className = "dndheaderelement";
752 deleteH.style.width = "50px";
753 text = document.createElement('span');
754 text.textContent = "Delete";
755 deleteH.appendChild(text);
756 postHeaderHolder.appendChild(deleteH);
757 postHolder.appendChild(postHeaderHolder);
758
759 for (var i=0; i<audioHolder.postTest.options.length; i++)
760 {
761 var optionNode = audioHolder.postTest.options[i];
762 var entry = document.createElement('div');
763 entry.style.width = "456px";
764 entry.style.height= "20px";
765 entry.style.margin= "2px";
766 entry.style.borderBottom = "#DDD";
767 entry.style.borderBottomWidth = "1px";
768 entry.style.borderBottomStyle = "solid";
769 entry.setAttribute("node-id",i);
770 var node = audioHolder.postTest.options[i];
771 var mvH = document.createElement('div');
772 mvH.className = "dndheaderelement";
773 mvH.style.width = "50px";
774 var mvup = document.createElement("button");
775 mvup.textContent = "Up";
776 mvup.style.width = "25px";
777 mvup.style.padding = "1px 0px";
778 mvup.onclick = function()
779 {
780 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
781 if (i != 0)
782 {
783 var next = audioHolder.postTest.options[i-1];
784 var cur = audioHolder.postTest.options[i];
785 audioHolder.postTest.options[i-1] = cur;
786 audioHolder.postTest.options[i] = next;
787 popupInstance.state = 5;
788 popupInstance.advanceState();
789 }
790 };
791 mvH.appendChild(mvup);
792 var mvdn = document.createElement("button");
793 mvdn.textContent = "Dn";
794 mvdn.style.width = "25px";
795 mvdn.style.padding = "1px 0px";
796 mvdn.onclick = function()
797 {
798 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
799 if (i != audioHolder.postTest.options.length-1)
800 {
801 var next = audioHolder.postTest.options[i+1];
802 var cur = audioHolder.postTest.options[i];
803 audioHolder.postTest.options[i+1] = cur;
804 audioHolder.postTest.options[i] = next;
805 popupInstance.state = 5;
806 popupInstance.advanceState();
807 }
808 };
809 mvH.appendChild(mvdn);
810 entry.appendChild(mvH);
811 var idH = document.createElement('div');
812 idH.className = "dndheaderelement";
813 idH.style.width = "150px";
814 if (optionNode.type != "statement")
815 {
816 var span = document.createElement('span');
817 span.textContent = optionNode.id;
818 idH.appendChild(span);
819 }
820 entry.appendChild(idH);
821 var typeH = document.createElement('div');
822 typeH.className = "dndheaderelement";
823 typeH.style.width = "150px";
824 var span = document.createElement('span');
825 span.textContent = optionNode.type;
826 typeH.appendChild(span);
827 entry.appendChild(typeH);
828 var editH = document.createElement('div');
829 editH.className = "dndheaderelement";
830 editH.style.width = "50px";
831 var editButton = document.createElement("button");
832 editButton.textContent = "Edit";
833 editButton.style.width = "48px";
834 editButton.style.padding = "1px 0px";
835 editButton.onclick = function()
836 {
837 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
838 popupInstance.dataTransfer = new function() {
839 this.title = "Edit Test Node";
840 this.parent = specificationNode.audioHolders[specificationNode.audioHolders.length-1].postTest;
841 this.node = this.parent.options[i];
842 this.previousState = 5;
843 };
844 popupInstance.advanceState();
845 };
846 editH.appendChild(editButton);
847 entry.appendChild(editH);
848 var deleteH = document.createElement('div');
849 deleteH.className = "dndheaderelement";
850 deleteH.style.width = "50px";
851 var deleteButton = document.createElement("button");
852 deleteButton.textContent = "Del";
853 deleteButton.style.width = "48px";
854 deleteButton.style.padding = "1px 0px";
855 deleteButton.onclick = function()
856 {
857 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
858 var j = i+1;
859 while(j < audioHolder.postTest.options.length)
860 {
861 audioHolder.postTest.options[i] = audioHolder.postTest.options[j];
862 j++;
863 i++;
864 }
865 audioHolder.postTest.options.pop();
866 popupInstance.state = 5;
867 popupInstance.advanceState();
868 };
869 deleteH.appendChild(deleteButton);
870 entry.appendChild(deleteH);
871 postHolder.appendChild(entry);
872 }
873
874 var entry = document.createElement('div');
875 entry.style.width = "456px";
876 entry.style.height= "20px";
877 entry.style.margin= "2px";
878 entry.style.borderBottom = "#DDD";
879 entry.style.borderBottomWidth = "1px";
880 entry.style.borderBottomStyle = "solid";
881 entry.align = "center";
882 var addPost = document.createElement('button');
883 addPost.className = "popupButton";
884 addPost.textContent = "Add New Entry";
885 addPost.style.height = "20px";
886 addPost.onclick = function()
887 {
888 popupInstance.dataTransfer = new function() {
889 this.title = "New Pre Test Node";
890 this.parent = specificationNode.audioHolders[specificationNode.audioHolders.length-1].postTest;
891 this.node = null;
892 this.previousState = 5;
893 };
894 popupInstance.advanceState();
895 };
896 entry.appendChild(addPost);
897 postHolder.appendChild(entry);
898
899 var button = document.createElement('button');
900 button.id = 'submit';
901 button.className = "popupButton";
902 button.textContent = "Finish";
903 button.onclick = function(event)
904 {
905 popupInstance.state = 7;
906 popupInstance.advanceState();
907 };
908 this.popupFooter.appendChild(button);
909 button = document.createElement('button');
910 button.id = 'submit';
911 button.className = "popupButton";
912 button.textContent = "Add Another Page";
913 button.onclick = function(event)
914 {
915 popupInstance.state = 3;
916 popupInstance.advanceState();
917 };
918 this.popupFooter.appendChild(button);
919 break;
920 case 6:
921 this.popupTitleText.textContent = this.dataTransfer.title;
922 var span = document.createElement('span');
923 span.textContent = "Select survey settings here";
924 this.popupBody.appendChild(span);
925 var div = document.createElement('div');
926 span = document.createElement("span");
927 span.textContent = "Survey Type";
928 var select = document.createElement("select");
929 select.id="survey-select";
930 var option = document.createElement('option');
931 option.textContent = "Statement";
932 option.value = "statement";
933 select.appendChild(option);
934 option = document.createElement('option');
935 option.textContent = "Question";
936 option.value = "question";
937 select.appendChild(option);
938 option = document.createElement('option');
939 option.textContent = "Number";
940 option.value = "number";
941 select.appendChild(option);
942 option = document.createElement('option');
943 option.textContent = "Radio";
944 option.value = "radio";
945 select.appendChild(option);
946 option = document.createElement('option');
947 option.textContent = "Checkbox";
948 option.value = "checkbox";
949 select.appendChild(option);
950 this.popupBody.appendChild(select);
951 var options = document.createElement('div');
952 options.id = "survey-options";
953 this.popupBody.appendChild(options);
954 var button = document.createElement('button');
955 button.id = 'submit';
956 button.className = "popupButton";
957 button.textContent = "Add";
958 button.onclick = function(event)
959 {
960 var parent = popupInstance.dataTransfer.parent;
961 if (popupInstance.dataTransfer.node == null)
962 {
963 var node = new parent.OptionNode();
964 } else
965 {
966 var node = popupInstance.dataTransfer.node;
967 }
968 node.type = document.getElementById("survey-select").value;
969 switch(node.type)
970 {
971 case "statement":
972 node.statement = document.getElementById("statement").value;
973 break;
974 case "question":
975 node.question = document.getElementById("question").value;
976 node.id = document.getElementById("ID").value;
977 node.mandatory = document.getElementById("mandatory").checked;
978 node.boxsize = document.getElementById("boxsize").value;
979 break;
980 }
981 if (popupInstance.dataTransfer.node == null)
982 {parent.options.push(node);}
983 popupInstance.state = popupInstance.dataTransfer.previousState;
984 popupInstance.advanceState();
985 };
986 this.popupFooter.appendChild(button);
987 select.onchange = function()
988 {
989 var options = document.getElementById("survey-options");
990 options.innerHTML = null;
991 switch(this.value)
992 {
993 case "statement":
994 var span = document.createElement('span');
995 span.textContent = "Enter Statement";
996 var tA = document.createElement('textarea');
997 tA.id = "statement";
998 tA.style.width = "460px";
999 tA.style.height = "96px";
1000 if (popupInstance.dataTransfer.node != null)
1001 {tA.value = this.dataTransfer.node.statement;}
1002 options.appendChild(span);
1003 options.appendChild(tA);
1004 break;
1005 case "question":
1006 var span = document.createElement('span');
1007 span.textContent = "Enter Question";
1008 var tA = document.createElement('textarea');
1009 tA.style.width = "460px";
1010 tA.style.height = "54px";
1011 tA.id = "question";
1012 options.appendChild(span);
1013 options.appendChild(tA);
1014 var div = document.createElement('div');
1015 var input = document.createElement('input');
1016 input.id = "ID";
1017 span = document.createElement('span');
1018 span.textContent = "ID:";
1019 div.appendChild(span);
1020 div.appendChild(input);
1021 options.appendChild(div);
1022 div = document.createElement('div');
1023 input = document.createElement('input');
1024 input.type = "checkbox";
1025 input.id = "mandatory";
1026 span = document.createElement('span');
1027 span.textContent = "Mandatory";
1028 div.appendChild(span);
1029 div.appendChild(input);
1030 options.appendChild(div);
1031 div = document.createElement('div');
1032 var boxsize = document.createElement("select");
1033 boxsize.id = "boxsize";
1034 var selOpt = document.createElement("option");
1035 selOpt.value = "normal";
1036 selOpt.textContent = "Normal";
1037 boxsize.appendChild(selOpt);
1038 selOpt = document.createElement("option");
1039 selOpt.value = "small";
1040 selOpt.textContent = "Small";
1041 boxsize.appendChild(selOpt);
1042 selOpt = document.createElement("option");
1043 selOpt.value = "large";
1044 selOpt.textContent = "Large";
1045 boxsize.appendChild(selOpt);
1046 selOpt = document.createElement("option");
1047 selOpt.value = "huge";
1048 selOpt.textContent = "Huge";
1049 boxsize.appendChild(selOpt);
1050 span = document.createElement('span');
1051 span.textContent = "Response Text Area";
1052 div.appendChild(span);
1053 div.appendChild(boxsize);
1054 options.appendChild(div);
1055 if (popupInstance.dataTransfer.node != null)
1056 {
1057 tA.value = popupInstance.dataTransfer.node.question;
1058 document.getElementById("ID").value = popupInstance.dataTransfer.node.id;
1059 document.getElementById("mandatory").value = popupInstance.dataTransfer.node.mandatory;
1060 document.getElementById("boxsize").value = popupInstance.dataTransfer.node.boxsize;
1061 }
1062 break;
1063 case "number":
1064 var span = document.createElement('span');
1065 span.textContent = "Enter Question";
1066 var tA = document.createElement('textarea');
1067 tA.style.width = "460px";
1068 tA.style.height = "54px";
1069 tA.id = "question";
1070 options.appendChild(span);
1071 options.appendChild(tA);
1072 var div = document.createElement('div');
1073 var input = document.createElement('input');
1074 input.id = "ID";
1075 span = document.createElement('span');
1076 span.textContent = "ID:";
1077 div.appendChild(span);
1078 div.appendChild(input);
1079 options.appendChild(div);
1080 div = document.createElement('div');
1081 input = document.createElement('input');
1082 input.type = "checkbox";
1083 input.id = "mandatory";
1084 span = document.createElement('span');
1085 span.textContent = "Mandatory";
1086 div.appendChild(span);
1087 div.appendChild(input);
1088 options.appendChild(div);
1089 div = document.createElement('div');
1090 break;
1091 }
1092 };
1093 if (this.dataTransfer.node != null)
1094 {
1095 select.value = this.dataTransfer.node.type;
1096 }
1097 select.onchange();
1098 break;
1099 case 7:
1100 this.dataTransfer = null;
1101 this.popupTitleText.textContent = "Test Session - Pre/Post Survey";
1102 var span = document.createElement('span');
1103 span.textContent = "Add your pre test session and post test session survey options here";
1104 this.popupBody.appendChild(span);
1105 var preHolder = document.createElement('div');
1106 preHolder.id = "preHolder";
1107 preHolder.style.width = "460px";
1108 preHolder.style.minHeight = "100px";
1109 preHolder.style.maxHeight = "220px";
1110 preHolder.style.overflow = 'auto';
1111 preHolder.style.border = "black";
1112 preHolder.style.borderStyle = "solid";
1113 preHolder.style.borderWidth = "1px";
1114 this.popupBody.appendChild(preHolder);
1115 var preHeaderHolder = document.createElement('div');
1116 preHeaderHolder.style.width = "456px";
1117 preHeaderHolder.style.height= "20px";
1118 preHeaderHolder.style.margin= "2px";
1119 preHeaderHolder.style.borderBottom = "#DDD";
1120 preHeaderHolder.style.borderBottomWidth = "1px";
1121 preHeaderHolder.style.borderBottomStyle = "solid";
1122 var mvH = document.createElement('div');
1123 mvH.className = "dndheaderelement";
1124 mvH.style.width = "50px";
1125 var text = document.createElement('span');
1126 text.textContent = "Order";
1127 mvH.appendChild(text);
1128 preHeaderHolder.appendChild(mvH);
1129 var idH = document.createElement('div');
1130 idH.className = "dndheaderelement";
1131 idH.style.width = "150px";
1132 text = document.createElement('span');
1133 text.textContent = "ID";
1134 idH.appendChild(text);
1135 preHeaderHolder.appendChild(idH);
1136 var tH = document.createElement('div');
1137 tH.className = "dndheaderelement";
1138 tH.style.width = "150px";
1139 text = document.createElement('span');
1140 text.textContent = "Type";
1141 tH.appendChild(text);
1142 preHeaderHolder.appendChild(tH);
1143 var editH = document.createElement('div');
1144 editH.className = "dndheaderelement";
1145 editH.style.width = "50px";
1146 text = document.createElement('span');
1147 text.textContent = "Edit";
1148 editH.appendChild(text);
1149 preHeaderHolder.appendChild(editH);
1150 var deleteH = document.createElement('div');
1151 deleteH.className = "dndheaderelement";
1152 deleteH.style.width = "50px";
1153 text = document.createElement('span');
1154 text.textContent = "Delete";
1155 deleteH.appendChild(text);
1156 preHeaderHolder.appendChild(deleteH);
1157 preHolder.appendChild(preHeaderHolder);
1158
1159
1160 for (var i=0; i<specificationNode.preTest.options.length; i++)
1161 {
1162 var optionNode = specificationNode.preTest.options[i];
1163 var entry = document.createElement('div');
1164 entry.style.width = "456px";
1165 entry.style.height= "20px";
1166 entry.style.margin= "2px";
1167 entry.style.borderBottom = "#DDD";
1168 entry.style.borderBottomWidth = "1px";
1169 entry.style.borderBottomStyle = "solid";
1170 entry.setAttribute("node-id",i);
1171 var node = specificationNode.preTest.options[i];
1172 var mvH = document.createElement('div');
1173 mvH.className = "dndheaderelement";
1174 mvH.style.width = "50px";
1175 var mvup = document.createElement("button");
1176 mvup.textContent = "Up";
1177 mvup.style.width = "25px";
1178 mvup.style.padding = "1px 0px";
1179 mvup.onclick = function()
1180 {
1181 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
1182 if (i != 0)
1183 {
1184 var next = specificationNode.preTest.options[i-1];
1185 var cur = specificationNode.preTest.options[i];
1186 specificationNode.preTest.options[i-1] = cur;
1187 specificationNode.preTest.options[i] = next;
1188 popupInstance.state = 7;
1189 popupInstance.advanceState();
1190 }
1191 };
1192 mvH.appendChild(mvup);
1193 var mvdn = document.createElement("button");
1194 mvdn.textContent = "Dn";
1195 mvdn.style.width = "25px";
1196 mvdn.style.padding = "1px 0px";
1197 mvdn.onclick = function()
1198 {
1199 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
1200 if (i != specificationNode.preTest.options.length-1)
1201 {
1202 var next = specificationNode.preTest.options[i+1];
1203 var cur = specificationNode.preTest.options[i];
1204 specificationNode.preTest.options[i+1] = cur;
1205 specificationNode.preTest.options[i] = next;
1206 popupInstance.state = 7;
1207 popupInstance.advanceState();
1208 }
1209 };
1210 mvH.appendChild(mvdn);
1211 entry.appendChild(mvH);
1212 var idH = document.createElement('div');
1213 idH.className = "dndheaderelement";
1214 idH.style.width = "150px";
1215 if (optionNode.type != "statement")
1216 {
1217 var span = document.createElement('span');
1218 span.textContent = optionNode.id;
1219 idH.appendChild(span);
1220 }
1221 entry.appendChild(idH);
1222 var typeH = document.createElement('div');
1223 typeH.className = "dndheaderelement";
1224 typeH.style.width = "150px";
1225 var span = document.createElement('span');
1226 span.textContent = optionNode.type;
1227 typeH.appendChild(span);
1228 entry.appendChild(typeH);
1229 var editH = document.createElement('div');
1230 editH.className = "dndheaderelement";
1231 editH.style.width = "50px";
1232 var editButton = document.createElement("button");
1233 editButton.textContent = "Edit";
1234 editButton.style.width = "48px";
1235 editButton.style.padding = "1px 0px";
1236 editButton.onclick = function()
1237 {
1238 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
1239 popupInstance.dataTransfer = new function() {
1240 this.title = "Edit Test Node";
1241 this.parent = specificationNode.preTest;
1242 this.node = this.parent.options[i];
1243 this.previousState = 7;
1244 };
1245 popupInstace.state = 6;
1246 popupInstance.advanceState();
1247 };
1248 editH.appendChild(editButton);
1249 entry.appendChild(editH);
1250 var deleteH = document.createElement('div');
1251 deleteH.className = "dndheaderelement";
1252 deleteH.style.width = "50px";
1253 var deleteButton = document.createElement("button");
1254 deleteButton.textContent = "Del";
1255 deleteButton.style.width = "48px";
1256 deleteButton.style.padding = "1px 0px";
1257 deleteButton.onclick = function()
1258 {
1259 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
1260 var j = i+1;
1261 while(j < specificationNode.preTest.options.length)
1262 {
1263 specificationNode.preTest.options[i] = specificationNode.preTest.options[j];
1264 j++;
1265 i++;
1266 }
1267 specificationNode.preTest.options.pop();
1268 popupInstance.state = 7;
1269 popupInstance.advanceState();
1270 };
1271 deleteH.appendChild(deleteButton);
1272 entry.appendChild(deleteH);
1273 preHolder.appendChild(entry);
1274 }
1275 var entry = document.createElement('div');
1276 entry.style.width = "456px";
1277 entry.style.height= "20px";
1278 entry.style.margin= "2px";
1279 entry.style.borderBottom = "#DDD";
1280 entry.style.borderBottomWidth = "1px";
1281 entry.style.borderBottomStyle = "solid";
1282 entry.align = "center";
1283 var addPre = document.createElement('button');
1284 addPre.className = "popupButton";
1285 addPre.textContent = "Add New Entry";
1286 addPre.style.height = "20px";
1287 addPre.onclick = function()
1288 {
1289 popupInstance.dataTransfer = new function() {
1290 this.title = "New Pre Test Node";
1291 this.parent = specificationNode.preTest;
1292 this.node = null;
1293 this.previousState = 7;
1294 };
1295 popupInstance.state = 6;
1296 popupInstance.advanceState();
1297 };
1298 entry.appendChild(addPre);
1299 preHolder.appendChild(entry);
1300
1301 var span = document.createElement('span');
1302 span.textContent = "Add your post test page options here";
1303 this.popupBody.appendChild(span);
1304 var postHolder = document.createElement('div');
1305 postHolder.id = "preHolder";
1306 postHolder.style.width = "100%";
1307 postHolder.style.minHeight = "100px";
1308 postHolder.style.maxHeight = "220px";
1309 postHolder.style.overflow = 'auto';
1310 postHolder.style.border = "black";
1311 postHolder.style.borderStyle = "solid";
1312 postHolder.style.borderWidth = "1px";
1313 this.popupBody.appendChild(postHolder);
1314 var postHeaderHolder = document.createElement('div');
1315 postHeaderHolder.style.width = "456px";
1316 postHeaderHolder.style.height= "20px";
1317 postHeaderHolder.style.margin= "2px";
1318 postHeaderHolder.style.borderBottom = "#DDD";
1319 postHeaderHolder.style.borderBottomWidth = "1px";
1320 postHeaderHolder.style.borderBottomStyle = "solid";
1321 var mvH = document.createElement('div');
1322 mvH.className = "dndheaderelement";
1323 mvH.style.width = "50px";
1324 var text = document.createElement('span');
1325 text.textContent = "Order";
1326 mvH.appendChild(text);
1327 postHeaderHolder.appendChild(mvH);
1328 var idH = document.createElement('div');
1329 idH.className = "dndheaderelement";
1330 idH.style.width = "150px";
1331 text = document.createElement('span');
1332 text.textContent = "ID";
1333 idH.appendChild(text);
1334 postHeaderHolder.appendChild(idH);
1335 var tH = document.createElement('div');
1336 tH.className = "dndheaderelement";
1337 tH.style.width = "150px";
1338 text = document.createElement('span');
1339 text.textContent = "Type";
1340 tH.appendChild(text);
1341 postHeaderHolder.appendChild(tH);
1342 var editH = document.createElement('div');
1343 editH.className = "dndheaderelement";
1344 editH.style.width = "50px";
1345 text = document.createElement('span');
1346 text.textContent = "Edit";
1347 editH.appendChild(text);
1348 postHeaderHolder.appendChild(editH);
1349 var deleteH = document.createElement('div');
1350 deleteH.className = "dndheaderelement";
1351 deleteH.style.width = "50px";
1352 text = document.createElement('span');
1353 text.textContent = "Delete";
1354 deleteH.appendChild(text);
1355 postHeaderHolder.appendChild(deleteH);
1356 postHolder.appendChild(postHeaderHolder);
1357
1358 for (var i=0; i<specificationNode.postTest.options.length; i++)
1359 {
1360 var optionNode = specificationNode.postTest.options[i];
1361 var entry = document.createElement('div');
1362 entry.style.width = "456px";
1363 entry.style.height= "20px";
1364 entry.style.margin= "2px";
1365 entry.style.borderBottom = "#DDD";
1366 entry.style.borderBottomWidth = "1px";
1367 entry.style.borderBottomStyle = "solid";
1368 entry.setAttribute("node-id",i);
1369 var node = specificationNode.postTest.options[i];
1370 var mvH = document.createElement('div');
1371 mvH.className = "dndheaderelement";
1372 mvH.style.width = "50px";
1373 var mvup = document.createElement("button");
1374 mvup.textContent = "Up";
1375 mvup.style.width = "25px";
1376 mvup.style.padding = "1px 0px";
1377 mvup.onclick = function()
1378 {
1379 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
1380 if (i != 0)
1381 {
1382 var next = specificationNode.postTest.options[i-1];
1383 var cur = specificationNode.postTest.options[i];
1384 specificationNode.postTest.options[i-1] = cur;
1385 specificationNode.postTest.options[i] = next;
1386 popupInstance.state = 7;
1387 popupInstance.advanceState();
1388 }
1389 };
1390 mvH.appendChild(mvup);
1391 var mvdn = document.createElement("button");
1392 mvdn.textContent = "Dn";
1393 mvdn.style.width = "25px";
1394 mvdn.style.padding = "1px 0px";
1395 mvdn.onclick = function()
1396 {
1397 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
1398 if (i != specificationNode.postTest.options.length-1)
1399 {
1400 var next = specificationNode.postTest.options[i+1];
1401 var cur = specificationNode.postTest.options[i];
1402 specificationNode.postTest.options[i+1] = cur;
1403 specificationNode.postTest.options[i] = next;
1404 popupInstance.state = 7;
1405 popupInstance.advanceState();
1406 }
1407 };
1408 mvH.appendChild(mvdn);
1409 entry.appendChild(mvH);
1410 var idH = document.createElement('div');
1411 idH.className = "dndheaderelement";
1412 idH.style.width = "150px";
1413 if (optionNode.type != "statement")
1414 {
1415 var span = document.createElement('span');
1416 span.textContent = optionNode.id;
1417 idH.appendChild(span);
1418 }
1419 entry.appendChild(idH);
1420 var typeH = document.createElement('div');
1421 typeH.className = "dndheaderelement";
1422 typeH.style.width = "150px";
1423 var span = document.createElement('span');
1424 span.textContent = optionNode.type;
1425 typeH.appendChild(span);
1426 entry.appendChild(typeH);
1427 var editH = document.createElement('div');
1428 editH.className = "dndheaderelement";
1429 editH.style.width = "50px";
1430 var editButton = document.createElement("button");
1431 editButton.textContent = "Edit";
1432 editButton.style.width = "48px";
1433 editButton.style.padding = "1px 0px";
1434 editButton.onclick = function()
1435 {
1436 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
1437 popupInstance.dataTransfer = new function() {
1438 this.title = "Edit Test Node";
1439 this.parent = specificationNode.postTest;
1440 this.node = this.parent.options[i];
1441 this.previousState = 7;
1442 };
1443 popupInstance.state = 6;
1444 popupInstance.advanceState();
1445 };
1446 editH.appendChild(editButton);
1447 entry.appendChild(editH);
1448 var deleteH = document.createElement('div');
1449 deleteH.className = "dndheaderelement";
1450 deleteH.style.width = "50px";
1451 var deleteButton = document.createElement("button");
1452 deleteButton.textContent = "Del";
1453 deleteButton.style.width = "48px";
1454 deleteButton.style.padding = "1px 0px";
1455 deleteButton.onclick = function()
1456 {
1457 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
1458 var j = i+1;
1459 while(j < specificationNode.postTest.options.length)
1460 {
1461 specificationNode.postTest.options[i] = specificationNode.postTest.options[j];
1462 j++;
1463 i++;
1464 }
1465 audioHolder.postTest.options.pop();
1466 popupInstance.state = 7;
1467 popupInstance.advanceState();
1468 };
1469 deleteH.appendChild(deleteButton);
1470 entry.appendChild(deleteH);
1471 postHolder.appendChild(entry);
1472 }
1473
1474 var entry = document.createElement('div');
1475 entry.style.width = "456px";
1476 entry.style.height= "20px";
1477 entry.style.margin= "2px";
1478 entry.style.borderBottom = "#DDD";
1479 entry.style.borderBottomWidth = "1px";
1480 entry.style.borderBottomStyle = "solid";
1481 entry.align = "center";
1482 var addPost = document.createElement('button');
1483 addPost.className = "popupButton";
1484 addPost.textContent = "Add New Entry";
1485 addPost.style.height = "20px";
1486 addPost.onclick = function()
1487 {
1488 popupInstance.dataTransfer = new function() {
1489 this.title = "New Pre Test Node";
1490 this.parent = specificationNode.postTest;
1491 this.node = null;
1492 this.previousState = 7;
1493 };
1494 popupInstance.state = 6;
1495 popupInstance.advanceState();
1496 };
1497 entry.appendChild(addPost);
1498 postHolder.appendChild(entry);
1499
1500 var button = document.createElement('button');
1501 button.id = 'submit';
1502 button.className = "popupButton";
1503 button.textContent = "Finish";
1504 button.onclick = function(event)
1505 {
1506 popupInstance.state = 8;
1507 popupInstance.advanceState();
1508 };
1509 this.popupFooter.appendChild(button);
1510 break;
1511 case 8:
1512 this.hidePopup();
1513 this.state = 0;
1514 SpecficationToHTML();
1515 }
1516 this.state++;
1517 };
1518 };
1519
1520 function audioObject()
1521 {
1522 // Used to hold audio information in buffers for quick playback
1523 this.bufferObject;
1524 this.bufferNode = undefined;
1525 this.state = 0;
1526 this.gain = audioContext.createGain();
1527 this.gain.connect(audioContext.destination);
1528 this.include = true;
1529 this.id = undefined;
1530 this.file = undefined;
1531
1532 this.play = function()
1533 {
1534 if (this.bufferNode != undefined)
1535 {
1536 this.bufferNode.stop(0);
1537 this.bufferNode = undefined;
1538 }
1539 if(this.state == 1)
1540 {
1541 this.bufferNode = audioContext.createBufferSource();
1542 this.bufferNode.connect(this.gain);
1543 this.bufferNode.buffer = this.bufferObject;
1544 this.bufferNode.onended = function(event) {
1545 // Safari does not like using 'this' to reference the calling object!
1546 event.currentTarget = undefined;
1547 };
1548 this.bufferNode.start(audioContext.currentTime);
1549 this.bufferNode.stop(audioContext.currentTime+3);
1550 }
1551 };
1552
1553 this.constructTrack = function(file) {
1554 var reader = new FileReader();
1555 this.file = file;
1556 var audioObj = this;
1557 // Create callback to decode the data asynchronously
1558 reader.onloadend = function() {
1559 audioContext.decodeAudioData(reader.result, function(decodedData) {
1560 audioObj.bufferObject = decodedData;
1561 audioObj.state = 1;
1562 }, function(){});
1563 };
1564 reader.readAsArrayBuffer(file);
1565 };
1566 };
1567
1568 function Specification() {
1569 // Handles the decoding of the project specification XML into a simple JavaScript Object.
1570
1571 this.interfaceType = null;
1572 this.commonInterface = new function()
1573 {
1574 this.options = [];
1575 this.optionNode = function(input)
1576 {
1577 var name = input.getAttribute('name');
1578 this.type = name;
1579 if(this.type == "option")
1580 {
1581 this.name = input.id;
1582 } else if (this.type == "check")
1583 {
1584 this.check = input.id;
1585 }
1586 };
1587 };
1588 this.projectReturn = null;
1589 this.randomiseOrder = null;
1590 this.collectMetrics = null;
1591 this.testPages = null;
1592 this.audioHolders = [];
1593 this.metrics = [];
1594
1595 this.decode = function() {
1596 // projectXML - DOM Parsed document
1597 this.projectXML = projectXML.childNodes[0];
1598 var setupNode = projectXML.getElementsByTagName('setup')[0];
1599 this.interfaceType = setupNode.getAttribute('interface');
1600 this.projectReturn = setupNode.getAttribute('projectReturn');
1601 this.testPages = setupNode.getAttribute('testPages');
1602 if (setupNode.getAttribute('randomiseOrder') == "true") {
1603 this.randomiseOrder = true;
1604 } else {this.randomiseOrder = false;}
1605 if (setupNode.getAttribute('collectMetrics') == "true") {
1606 this.collectMetrics = true;
1607 } else {this.collectMetrics = false;}
1608 if (isNaN(Number(this.testPages)) || this.testPages == undefined)
1609 {
1610 this.testPages = null;
1611 } else {
1612 this.testPages = Number(this.testPages);
1613 if (this.testPages == 0) {this.testPages = null;}
1614 }
1615 var metricCollection = setupNode.getElementsByTagName('Metric');
1616
1617 this.preTest = new this.prepostNode('pretest',setupNode.getElementsByTagName('PreTest'));
1618 this.postTest = new this.prepostNode('posttest',setupNode.getElementsByTagName('PostTest'));
1619
1620 if (metricCollection.length > 0) {
1621 metricCollection = metricCollection[0].getElementsByTagName('metricEnable');
1622 for (var i=0; i<metricCollection.length; i++) {
1623 this.metrics.push(new this.metricNode(metricCollection[i].textContent));
1624 }
1625 }
1626
1627 var commonInterfaceNode = setupNode.getElementsByTagName('interface');
1628 if (commonInterfaceNode.length > 0) {
1629 commonInterfaceNode = commonInterfaceNode[0];
1630 } else {
1631 commonInterfaceNode = undefined;
1632 }
1633
1634 this.commonInterface = new function() {
1635 this.OptionNode = function(child) {
1636 this.type = child.nodeName;
1637 if (this.type == 'option')
1638 {
1639 this.name = child.getAttribute('name');
1640 }
1641 else if (this.type == 'check') {
1642 this.check = child.getAttribute('name');
1643 if (this.check == 'scalerange') {
1644 this.min = child.getAttribute('min');
1645 this.max = child.getAttribute('max');
1646 if (this.min == null) {this.min = 1;}
1647 else if (Number(this.min) > 1 && this.min != null) {
1648 this.min = Number(this.min)/100;
1649 } else {
1650 this.min = Number(this.min);
1651 }
1652 if (this.max == null) {this.max = 0;}
1653 else if (Number(this.max) > 1 && this.max != null) {
1654 this.max = Number(this.max)/100;
1655 } else {
1656 this.max = Number(this.max);
1657 }
1658 }
1659 } else if (this.type == 'anchor' || this.type == 'reference') {
1660 this.value = Number(child.textContent);
1661 this.enforce = child.getAttribute('enforce');
1662 if (this.enforce == 'true') {this.enforce = true;}
1663 else {this.enforce = false;}
1664 }
1665 };
1666 this.options = [];
1667 if (commonInterfaceNode != undefined) {
1668 var child = commonInterfaceNode.firstElementChild;
1669 while (child != undefined) {
1670 this.options.push(new this.OptionNode(child));
1671 child = child.nextElementSibling;
1672 }
1673 }
1674 };
1675
1676 var audioHolders = projectXML.getElementsByTagName('audioHolder');
1677 for (var i=0; i<audioHolders.length; i++) {
1678 this.audioHolders.push(new this.audioHolderNode(this,audioHolders[i]));
1679 }
1680
1681 // New check if we need to randomise the test order
1682 if (this.randomiseOrder)
1683 {
1684 this.audioHolders = randomiseOrder(this.audioHolders);
1685 for (var i=0; i<this.audioHolders.length; i++)
1686 {
1687 this.audioHolders[i].presentedId = i;
1688 }
1689 }
1690
1691 if (this.testPages != null || this.testPages != undefined)
1692 {
1693 if (this.testPages > audioHolders.length)
1694 {
1695 console.log('Warning: You have specified '+audioHolders.length+' tests but requested '+this.testPages+' be completed!');
1696 this.testPages = audioHolders.length;
1697 }
1698 var aH = this.audioHolders;
1699 this.audioHolders = [];
1700 for (var i=0; i<this.testPages; i++)
1701 {
1702 this.audioHolders.push(aH[i]);
1703 }
1704 }
1705 };
1706
1707 this.prepostNode = function(type) {
1708 this.type = type;
1709 this.options = [];
1710
1711 this.OptionNode = function() {
1712
1713 this.childOption = function() {
1714 this.type = 'option';
1715 this.id = element.id;
1716 this.name = element.getAttribute('name');
1717 this.text = element.textContent;
1718 };
1719
1720 this.type = undefined;
1721 this.id = undefined;
1722 this.mandatory = undefined;
1723 this.question = undefined;
1724 this.statement = undefined;
1725 this.boxsize = undefined;
1726 this.options = [];
1727 this.min = undefined;
1728 this.max = undefined;
1729 this.step = undefined;
1730
1731 };
1732 };
1733
1734 this.metricNode = function(name) {
1735 this.enabled = name;
1736 };
1737
1738 this.audioHolderNode = function(parent) {
1739 this.type = 'audioHolder';
1740 this.presentedId = undefined;
1741 this.id = undefined;
1742 this.hostURL = undefined;
1743 this.sampleRate = undefined;
1744 this.randomiseOrder = undefined;
1745 this.loop = undefined;
1746 this.elementComments = undefined;
1747 this.preTest = new parent.prepostNode('pretest');
1748 this.postTest = new parent.prepostNode('posttest');
1749 this.interfaces = [];
1750 this.commentBoxPrefix = "Comment on track";
1751 this.audioElements = [];
1752 this.commentQuestions = [];
1753
1754 this.interfaceNode = function(DOM) {
1755 var title = DOM.getElementsByTagName('title');
1756 if (title.length == 0) {this.title = null;}
1757 else {this.title = title[0].textContent;}
1758 this.options = parent.commonInterface.options;
1759 var scale = DOM.getElementsByTagName('scale');
1760 this.scale = [];
1761 for (var i=0; i<scale.length; i++) {
1762 var arr = [null, null];
1763 arr[0] = scale[i].getAttribute('position');
1764 arr[1] = scale[i].textContent;
1765 this.scale.push(arr);
1766 }
1767 };
1768
1769 this.audioElementNode = function(parent,audioObject) {
1770 this.url = audioObject.file.name;
1771 this.id = audioObject.id;
1772 this.parent = parent;
1773 this.type = "normal";
1774
1775 this.marker = undefined;
1776 };
1777
1778 this.commentQuestionNode = function(xml) {
1779 this.childOption = function(element) {
1780 this.type = 'option';
1781 this.name = element.getAttribute('name');
1782 this.text = element.textContent;
1783 };
1784 this.id = xml.id;
1785 if (xml.getAttribute('mandatory') == 'true') {this.mandatory = true;}
1786 else {this.mandatory = false;}
1787 this.type = xml.getAttribute('type');
1788 if (this.type == undefined) {this.type = 'text';}
1789 switch (this.type) {
1790 case 'text':
1791 this.question = xml.textContent;
1792 break;
1793 case 'radio':
1794 var child = xml.firstElementChild;
1795 this.options = [];
1796 while (child != undefined) {
1797 if (child.nodeName == 'statement' && this.statement == undefined) {
1798 this.statement = child.textContent;
1799 } else if (child.nodeName == 'option') {
1800 this.options.push(new this.childOption(child));
1801 }
1802 child = child.nextElementSibling;
1803 }
1804 break;
1805 case 'checkbox':
1806 var child = xml.firstElementChild;
1807 this.options = [];
1808 while (child != undefined) {
1809 if (child.nodeName == 'statement' && this.statement == undefined) {
1810 this.statement = child.textContent;
1811 } else if (child.nodeName == 'option') {
1812 this.options.push(new this.childOption(child));
1813 }
1814 child = child.nextElementSibling;
1815 }
1816 break;
1817 }
1818 };
1819 };
1820
1821 this.preTest = new this.prepostNode("pretest");
1822 this.postTest = new this.prepostNode("posttest");
1823 }
1824
1825 function createDeleteNodeButton(node)
1826 {
1827 var button = document.createElement("button");
1828 button.textContent = "Delete";
1829 button.onclick = function(event)
1830 {
1831 var node = event.target.parentElement;
1832 node.parentElement.removeChild(node);
1833 }
1834 return button;
1835 }
1836
1837 function SpecficationToHTML()
1838 {
1839 // Take information from Specification Node and format it into an HTML layout
1840 var destination = document.getElementById("content");
1841 // Setup Header Node
1842 var setupNode = document.createElement("div");
1843 setupNode.className = "topLevel";
1844 setupNode.name = "setup";
1845 var title = document.createElement("h2");
1846 title.textContent = "Setup";
1847 setupNode.appendChild(title);
1848 // Interface Type
1849 var div = document.createElement("div");
1850 div.name = "attributes";
1851 div.style.margin = "5px";
1852 var select = document.createElement("select");
1853 select.id = "interfaceSelect";
1854 select.style.margin = "5px";
1855 var option = document.createElement("option");
1856 option.value = "APE";
1857 option.textContent = "APE";
1858 select.appendChild(option);
1859 option = document.createElement("option");
1860 option.value = "MUSHRA";
1861 option.textContent = "MUSHRA";
1862 select.appendChild(option);
1863 select.value = specificationNode.interfaceType;
1864 var span = document.createElement("span");
1865 span.textContent = "Interface Type";
1866 div.appendChild(span);
1867 div.appendChild(select);
1868 // Project Return Attribute
1869 span = document.createElement("span");
1870 span.style.margin = "5px";
1871 span.textContent = "Project Return";
1872 var input = document.createElement("input");
1873 input.value = specificationNode.projectReturn;
1874 input.id = "projectReturn";
1875 input.style.margin = "5px";
1876 div.appendChild(span);
1877 div.appendChild(input);
1878 // Randomise Order
1879 span = document.createElement("span");
1880 span.textContent = "Randomise Order";
1881 input = document.createElement("input");
1882 input.id = "randomiseOrder";
1883 input.style.margin = "5px";
1884 input.type = "checkbox";
1885 input.value = specificationNode.projectReturn;
1886 div.appendChild(span);
1887 div.appendChild(input);
1888 setupNode.appendChild(div);
1889
1890 // Now create the common Interface Node
1891 var commonInterface = document.createElement("div");
1892 commonInterface.id = "interface";
1893 commonInterface.className = "SecondLevel";
1894 var title = document.createElement("h3");
1895 title.textContent = "Common Interface";
1896 commonInterface.appendChild(title);
1897 var div = document.createElement("div");
1898 div.name = "attributes";
1899 var interfaceOptions;
1900 var interfaceChecks;
1901 switch(select.value)
1902 {
1903 case "APE":
1904 interfaceOptions = APEInterfaceOptions;
1905 interfaceChecks = APEInterfaceChecks;
1906 break;
1907 case "MUSHRA":
1908 interfaceOptions = MUSHRAInterfaceOptions;
1909 interfaceChecks = MUSHRAInterfaceChecks;
1910 break;
1911 }
1912 for (var i=0; i<interfaceOptions[0].length; i++)
1913 {
1914 var span = document.createElement("span");
1915 span.textContent = interfaceOptions[1][i];
1916 var input = document.createElement("input");
1917 input.type = "checkbox";
1918 input.id = interfaceOptions[0][i];
1919 div.appendChild(input);
1920 div.appendChild(span);
1921 commonInterface.appendChild(div);
1922 for (var j=0; j<specificationNode.commonInterface.options.length; j++)
1923 {
1924 if (specificationNode.commonInterface.options[j].name == interfaceOptions[0][i])
1925 {
1926 input.checked = true;
1927 break;
1928 }
1929 }
1930 }
1931 for (var i=0; i<interfaceChecks[0].length; i++)
1932 {
1933 var span = document.createElement("span");
1934 span.textContent = interfaceChecks[1][i];
1935 var input = document.createElement("input");
1936 input.type = "checkbox";
1937 input.id = interfaceChecks[0][i];
1938 div.appendChild(input);
1939 div.appendChild(span);
1940 commonInterface.appendChild(div);
1941 for (var j=0; j<specificationNode.commonInterface.options.length; j++)
1942 {
1943 if (specificationNode.commonInterface.options[j].check == interfaceChecks[0][i])
1944 {
1945 input.checked = true;
1946 break;
1947 }
1948 }
1949 }
1950 setupNode.appendChild(commonInterface);
1951 // Now the Metric Node
1952 var metrics = document.createElement("div");
1953 metrics.id = "metrics";
1954 metrics.className = "SecondLevel";
1955 var title = document.createElement("h3");
1956 title.textContent = "Metric Collections";
1957 metrics.appendChild(title);
1958 var div = document.createElement("div");
1959 div.name = "attributes";
1960 metrics.appendChild(div);
1961 var supportedMetrics;
1962 switch(select.value)
1963 {
1964 case "APE":
1965 supportedMetrics = APEInterfaceMetrics;
1966 break;
1967 case "MUSHRA":
1968 supportedMetrics = MUSHRAInterfaceMetrics;
1969 break;
1970 }
1971
1972 for (var i=0; i<supportedMetrics[0].length; i++)
1973 {
1974 var span = document.createElement("span");
1975 span.textContent = supportedMetrics[1][i];
1976 var input = document.createElement("input");
1977 input.type = "checkbox";
1978 input.id = supportedMetrics[0][i];
1979 div.appendChild(input);
1980 div.appendChild(span);
1981 for (var j=0; j<specificationNode.metrics.length; j++)
1982 {
1983 if (specificationNode.metrics[j].enabled == supportedMetrics[0][i])
1984 {
1985 input.checked = true;
1986 }
1987 }
1988 }
1989
1990 setupNode.appendChild(metrics);
1991
1992 // Test Session Pre Test
1993 var preTest = document.createElement("div");
1994 preTest.id = "preTest";
1995 preTest.className = "SecondLevel";
1996 var title = document.createElement("h3");
1997 title.textContent = "Pre test Survey";
1998 preTest.appendChild(title);
1999 var div = document.createElement("div");
2000 div.name = "attributes";
2001 for (var j=0; j<specificationNode.preTest.options.length; j++)
2002 {
2003 var node = PPSurveyToHTML(specificationNode.preTest.options[j]);
2004 node.className = "SecondLevel";
2005 node.id = preTest.id+"-"+j;
2006 node.appendChild(createDeleteNodeButton());
2007 preTest.appendChild(node);
2008 }
2009 setupNode.appendChild(preTest);
2010
2011 // Test Session Post Test
2012 var postTest = document.createElement("div");
2013 postTest.id = "postTest";
2014 postTest.className = "SecondLevel";
2015 var title = document.createElement("h3");
2016 title.textContent = "Post test Survey";
2017 postTest.appendChild(title);
2018 var div = document.createElement("div");
2019 div.name = "attributes";
2020
2021 for (var j=0; j<specificationNode.postTest.options.length; j++)
2022 {
2023 var node = PPSurveyToHTML(specificationNode.postTest.options[j]);
2024 node.className = "SecondLevel";
2025 node.id = postTest.id+"-"+j;
2026 node.appendChild(createDeleteNodeButton());
2027 postTest.appendChild(node);
2028 }
2029
2030 setupNode.appendChild(postTest);
2031
2032 destination.appendChild(setupNode);
2033
2034 // Now we step through the AudioHolders
2035 for (var i=0; i<specificationNode.audioHolders.length; i++)
2036 {
2037 var aH = specificationNode.audioHolders[i];
2038 var aHTML = document.createElement("div");
2039 aHTML.name = "audioHolder";
2040 aHTML.id = "audioHolder-"+aH.id;
2041 aHTML.className = "topLevel";
2042 aHTML.appendChild(createDeleteNodeButton());
2043 destination.appendChild(aHTML);
2044 var title = document.createElement("h2");
2045 title.textContent = "Audio Holder "+aH.id;
2046 aHTML.appendChild(title);
2047 var attributes = document.createElement("div");
2048 attributes.name = "attributes";
2049 aHTML.appendChild(attributes);
2050 var text = document.createElement("span");
2051 text.textContent = "ID: ";
2052 var input = document.createElement("input");
2053 input.id = aHTML.id+"-id";
2054 input.value = aH.id;
2055 input.onchange = function()
2056 {
2057 event.currentTarget.parentElement.parentElement.childNodes[0].textContent = "Audio Holder "+event.currentTarget.value;
2058 };
2059 text.style.margin = "5px";
2060 input.style.margin = "5px";
2061 attributes.appendChild(text);
2062 attributes.appendChild(input);
2063 text = document.createElement("span");
2064 text.textContent = "Host URL: ";
2065 input = document.createElement("input");
2066 input.id = aHTML.id+"-hostURL";
2067 input.value = aH.hostURL;
2068 text.style.margin = "5px";
2069 input.style.margin = "5px";
2070 attributes.appendChild(text);
2071 attributes.appendChild(input);
2072 text = document.createElement("span");
2073 text.textContent = "Loop Fragments: ";
2074 input = document.createElement("input");
2075 input.id = aHTML.id+"-loop";
2076 input.type = "checkbox";
2077 input.checked = aH.loop;
2078 text.style.margin = "5px";
2079 input.style.margin = "5px";
2080 attributes.appendChild(text);
2081 attributes.appendChild(input);
2082 text = document.createElement("span");
2083 text.textContent = "Randomise Order: ";
2084 input = document.createElement("input");
2085 input.id = aHTML.id+"-randomiseOrder";
2086 input.type = "checkbox";
2087 input.checked = aH.randomiseOrder;
2088 text.style.margin = "5px";
2089 input.style.margin = "5px";
2090 attributes.appendChild(text);
2091 attributes.appendChild(input);
2092 text = document.createElement("span");
2093 text.textContent = "Show Fragment Comments";
2094 input = document.createElement("input");
2095 input.id = aHTML.id+"-elementComments";
2096 input.type = "checkbox";
2097 input.checked = aH.elementComments;
2098 text.style.margin = "5px";
2099 input.style.margin = "5px";
2100 attributes.appendChild(text);
2101 attributes.appendChild(input);
2102
2103 // Test Session Pre Test
2104 var preTest = document.createElement("div");
2105 preTest.id = aHTML.id+"-pretest";
2106 preTest.className = "SecondLevel";
2107 var title = document.createElement("h3");
2108 title.textContent = "Pre test Survey";
2109 preTest.appendChild(title);
2110 var div = document.createElement("div");
2111 div.name = "attributes";
2112
2113 for (var j=0; j<aH.preTest.options.length; j++)
2114 {
2115 var node = PPSurveyToHTML(aH.preTest.options[j]);
2116 node.className = "SecondLevel";
2117 node.id = preTest.id+"-"+j;
2118 node.appendChild(createDeleteNodeButton());
2119 preTest.appendChild(node);
2120 }
2121
2122 aHTML.appendChild(preTest);
2123
2124 // Test Session Post Test
2125 var postTest = document.createElement("div");
2126 postTest.id = aHTML.id+"-postTest";
2127 postTest.className = "SecondLevel";
2128 var title = document.createElement("h3");
2129 title.textContent = "Post test Survey";
2130 postTest.appendChild(title);
2131 var div = document.createElement("div");
2132 div.name = "attributes";
2133
2134 for (var j=0; j<aH.postTest.options.length; j++)
2135 {
2136 var node = PPSurveyToHTML(aH.postTest.options[j]);
2137 node.className = "SecondLevel";
2138 node.id = postTest.id+"-"+j;
2139 node.appendChild(createDeleteNodeButton());
2140 postTest.appendChild(node);
2141 }
2142
2143 aHTML.appendChild(postTest);
2144
2145 //Audio Elements
2146 var audioElems = document.createElement("div");
2147 audioElems.id = aHTML.id+"-audioElements";
2148 audioElems.className = "SecondLevel";
2149 var title = document.createElement("h3");
2150 title.textContent = "Audio Elements";
2151 audioElems.appendChild(title);
2152 for (var i=0; i<aH.audioElements.length; i++)
2153 {
2154 var entry = document.createElement("div");
2155 entry.className = "SecondLevel";
2156 entry.id = audioElems.id+"-"+aH.audioElements[i].id;
2157 var text = document.createElement("span");
2158 text.textContent = "ID:";
2159 var input = document.createElement("input");
2160 input.id = entry.id+"-id";
2161 input.value = aH.audioElements[i].id;
2162 text.style.margin = "5px";
2163 input.style.margin = "5px";
2164 entry.appendChild(text);
2165 entry.appendChild(input);
2166 text = document.createElement("span");
2167 text.textContent = "URL:";
2168 input = document.createElement("input");
2169 input.id = entry.id+"-URL";
2170 input.value = aH.audioElements[i].url;
2171 text.style.margin = "5px";
2172 input.style.margin = "5px";
2173 entry.appendChild(text);
2174 entry.appendChild(input);
2175 entry.appendChild(createDeleteNodeButton());
2176 audioElems.appendChild(entry);
2177 }
2178 aHTML.appendChild(audioElems);
2179 }
2180
2181 function PPSurveyToHTML(node)
2182 {
2183 var holder = document.createElement("div");
2184 var title = document.createElement("h4");
2185 holder.appendChild(title);
2186 var attributes = document.createElement("div");
2187 holder.appendChild(attributes);
2188 switch(node.type)
2189 {
2190 case "statement":
2191 title.textContent = "Statement";
2192 var tA = document.createElement("textarea");
2193 attributes.style.height = "150px";
2194 tA.style.width = "500px";
2195 tA.style.height = "100px";
2196 tA.value = node.statement;
2197 attributes.appendChild(tA);
2198 break;
2199 case "question":
2200 title.textContent = "Question";
2201 var text = document.createElement("span");
2202 text.textContent = "ID :";
2203 var input = document.createElement("input");
2204 input.name = "id";
2205 input.value = node.id;
2206 text.style.margin = "5px";
2207 input.style.margin = "5px";
2208 attributes.appendChild(text);
2209 attributes.appendChild(input);
2210 text = document.createElement("span");
2211 text.textContent = "Question";
2212 input = document.createElement("input");
2213 input.name = "question";
2214 input.style.width = "400px";
2215 input.value = node.question;
2216 text.style.margin = "5px";
2217 input.style.margin = "5px";
2218 attributes.appendChild(text);
2219 attributes.appendChild(input);
2220 text = document.createElement("span");
2221 text.textContent = "Mandatory";
2222 input = document.createElement("input");
2223 input.name = "mandatory";
2224 input.type = "checkbox";
2225 input.checked = node.mandatory;
2226 text.style.margin = "5px";
2227 input.style.margin = "5px";
2228 attributes.appendChild(text);
2229 attributes.appendChild(input);
2230 text = document.createElement("span");
2231 text.textContent = "Reply box size";
2232 input = document.createElement("select");
2233 input.name = "boxsize";
2234 var option = document.createElement("option");
2235 option.textContent = "Normal";
2236 option.value = "normal";
2237 input.appendChild(option);
2238 option = document.createElement("option");
2239 option.textContent = "Large";
2240 option.value = "large";
2241 input.appendChild(option);
2242 option = document.createElement("option");
2243 option.textContent = "Small";
2244 option.value = "small";
2245 input.appendChild(option);
2246 option = document.createElement("option");
2247 option.textContent = "Huge";
2248 option.value = "huge";
2249 input.appendChild(option);
2250 text.style.margin = "5px";
2251 input.style.margin = "5px";
2252 attributes.appendChild(text);
2253 attributes.appendChild(input);
2254 input.value = node.boxsize;
2255 break;
2256 }
2257 return holder;
2258 }
2259 }
2260 </script>
2261 <style>
2262 div.popup {
2263 width: 500px;
2264 position: absolute;
2265 height: 400px;
2266 background-color: #fff;
2267 border-radius: 10px;
2268 box-shadow: 0px 0px 50px #000;
2269 z-index: 2;
2270 }
2271
2272 button.popupButton {
2273 /* Button for popup window
2274 */
2275 min-width: 50px;
2276 height: 25px;
2277 position: relative;
2278 border-radius: 5px;
2279 border: #444;
2280 border-width: 1px;
2281 border-style: solid;
2282 background-color: #fff;
2283 }
2284
2285 div.dragndrop {
2286 margin-top: 10px;
2287 border:#000000;
2288 border-style: dashed;
2289 border-width: 2px;
2290 }
2291 div.dndheaderelement {
2292 float: left;
2293 height: 100%;
2294 border-right: #DDDDDD;
2295 border-right-width: 1px;
2296 border-right-style: solid;
2297 }
2298 div.dndheaderelement span{
2299 padding-left: 5px;
2300 }
2301
2302 div.topLevel {
2303 border: #000;
2304 border-style: solid;
2305 border-width: 5px;
2306 padding: 10px;
2307 margin: 10px;
2308 }
2309
2310 div.SecondLevel {
2311 border: #000;
2312 border-style: solid;
2313 border-width: 1px;
2314 padding: 10px;
2315 margin: 10px;
2316 }
2317 </style>
2318 </head>
2319
2320 <body>
2321 <div id="content"></div>
2322 </body>
2323 </html>