webaudioevaluationtool: test_create/test

annotate test_create/test_create.html @ 372:5ec4279bf846 Dev_main

test_create: Specification Node handles complete XML to DOM and DOM to XML conversions

author	Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
date	Fri, 04 Dec 2015 18:34:04 +0000
parents	fe049caed3ae
children	5ca2b999be88

rev	line source
n@156	1 <!DOCTYPE html>
n@156	2 <html lang="en">
n@156	3 <head>
n@156	4 <meta charset="utf-8">
n@156	5
n@156	6 <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
n@156	7 Remove this if you use the .htaccess -->
n@156	8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
n@156	9
n@311	10 <title>WAET: Test Creator</title>
n@156	11
n@156	12 <meta name="viewport" content="width=device-width; initial-scale=1.0">
n@311	13 <script type="text/javascript">
n@157	14
n@311	15 var APEInterfaceOptions = [["playhead","page-count"],["Show the playhead/scrubber bar", "Show test page count"]];
n@311	16 var APEInterfaceChecks = [["fragmentPlayed","fragmentFullPlayback","fragmentMoved","fragmentComments"],["All Fragments Played","All Fragments Played in entirety","All sliders moved","All fragments have comments"]];
n@319	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"]];
n@311	18 var MUSHRAInterfaceOptions = [[],[]];
n@311	19 var MUSHRAInterfaceChecks = [["fragmentPlayed","fragmentMoved","fragmentComments"],["All Fragments Played","All sliders moved","All fragments have comments"]];
n@319	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"]];
n@311	21 var popupInstance;
n@311	22 var specificationNode;
n@311	23 var audioContext;
n@319	24 var audioObjects = [];
n@311	25 window.onload = function()
n@311	26 {
n@311	27 var AudioContext = window.AudioContext \|\| window.webkitAudioContext;
n@311	28 audioContext = new AudioContext;
n@311	29 popupInstance = new popup();
n@311	30 popupInstance.advanceState();
n@311	31 specificationNode = new Specification();
n@325	32 specificationNode.projectReturn = "null";
n@157	33 };
n@157	34
n@311	35 function popup()
n@311	36 {
n@311	37 var x = window.innerWidth;
n@311	38 var y = window.innerHeight;
n@311	39 this.popupHolder = document.createElement('div');
n@311	40 this.popupHolder.style.visibility = 'hidden';
n@311	41 this.popupContent = document.createElement('div');
n@311	42 this.popupTitle = document.createElement('div');
n@311	43 this.popupBody = document.createElement('div');
n@311	44 this.popupFooter = document.createElement('div');
n@311	45 this.popupTitleText = document.createElement('span');
n@311	46 this.popupTitle.appendChild(this.popupTitleText);
n@311	47
n@311	48 this.popupHolder.className = "popup";
n@311	49 this.popupHolder.style.left = (x-500)/2 +'px';
n@311	50 this.popupHolder.style.top = (y-400)/2 + 'px';
n@311	51 this.popupContent.style.padding = "20px";
n@311	52 this.popupHolder.appendChild(this.popupContent);
n@311	53
n@311	54 this.popupTitle.style.width = "100%";
n@311	55 this.popupTitle.style.height = "50px";
n@311	56 this.popupTitle.style.fontSize = "xx-large";
n@311	57 this.popupContent.appendChild(this.popupTitle);
n@311	58
n@311	59 this.popupBody.style.width = "100%";
n@311	60 this.popupBody.style.height = "280px";
n@311	61 this.popupContent.appendChild(this.popupBody);
n@311	62
n@311	63 this.popupFooter.style.width = "100%";
n@311	64 this.popupFooter.style.height = "30px";
n@311	65 this.popupContent.appendChild(this.popupFooter);
n@311	66 var body = document.getElementsByTagName('body')[0];
n@311	67 body.appendChild(this.popupHolder);
n@311	68
n@311	69 this.pageBlank = document.createElement('div');
n@311	70 body.appendChild(this.pageBlank);
n@311	71 this.pageBlank.style.width = "100%";
n@311	72 this.pageBlank.style.height = "100%";
n@311	73 this.pageBlank.style.position = "absolute";
n@311	74 this.pageBlank.style.left = "0px";
n@311	75 this.pageBlank.style.top = "0px";
n@311	76 this.pageBlank.style.backgroundColor = "rgba(0,0,0,0.5)";
n@311	77 this.pageBlank.style.visibility = 'hidden';
n@311	78
n@311	79 this.state = 0;
n@319	80 this.dataTransfer = null;
n@311	81
n@311	82 this.showPopup = function()
n@311	83 {
n@311	84 this.popupHolder.style.visibility = 'visible';
n@311	85 this.popupHolder.style.zIndex = "3";
n@311	86 this.pageBlank.style.visibility = 'visible';
n@311	87 this.pageBlank.style.zIndex = "2";
n@311	88 };
n@311	89
n@311	90 this.hidePopup = function()
n@311	91 {
n@311	92 this.popupHolder.style.visibility = 'hidden';
n@311	93 this.popupHolder.style.zIndex = "-1";
n@311	94 this.pageBlank.style.visibility = 'hidden';
n@311	95 this.pageBlank.style.zIndex = "-2";
n@311	96 };
n@311	97
n@311	98 this.init = function()
n@311	99 {
n@311	100 this.popupTitleText.textContent = "Welcome";
n@311	101 var text = document.createElement('span');
n@311	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";
n@311	103 var dnd = document.createElement('div');
n@311	104 dnd.style.width = "100%";
n@311	105 dnd.style.height = "50px";
n@311	106 dnd.className = "dragndrop";
n@372	107 dnd.ondragover = function(e) {
n@372	108 e.stopPropagation();
n@372	109 e.preventDefault();
n@372	110 };
n@372	111 dnd.ondragenter = function(e) {
n@372	112 e.stopPropagation();
n@372	113 e.preventDefault();
n@372	114 this.style.backgroundColor = '#AAFFAA';
n@372	115 };
n@372	116 dnd.ondragleave = function(e) {
n@372	117 e.stopPropagation();
n@372	118 e.preventDefault();
n@372	119 this.style.backgroundColor = "#FFFFFF";
n@372	120 };
n@372	121 dnd.ondrop = function(e) {
n@372	122 e.stopPropagation();
n@372	123 e.preventDefault();
n@372	124
n@372	125 var file = e.dataTransfer.files[0];
n@372	126
n@372	127 // Uses HTML5 FileAPI - https://w3c.github.io/FileAPI/#filereader-interface
n@372	128 var reader = new FileReader();
n@372	129 reader.onload = function() {
n@372	130 var parse = new DOMParser();
n@372	131 var xml = parse.parseFromString(reader.result,'text/xml');
n@372	132 specificationNode.decode(xml);
n@372	133 popupInstance.hidePopup();
n@372	134 SpecificationToHTML();
n@372	135 };
n@372	136 reader.readAsText(file);
n@372	137
n@372	138 };
n@311	139 this.popupBody.appendChild(text);
n@311	140 this.popupBody.appendChild(dnd);
n@311	141 this.showPopup();
n@311	142
n@311	143 var button = document.createElement('button');
n@311	144 button.className = "popupButton";
n@311	145 button.textContent = "New File";
n@311	146 button.onclick = function(event) {
n@311	147 popupInstance.advanceState();
n@311	148 };
n@311	149 this.popupFooter.appendChild(button);
n@311	150 };
n@311	151
n@311	152 this.advanceState = function()
n@311	153 {
n@311	154 this.popupBody.innerHTML = null;
n@311	155 this.popupFooter.innerHTML = null;
n@311	156 this.popupTitleText.textContent = null;
n@311	157 switch(this.state)
n@311	158 {
n@311	159 case 0:
n@311	160 this.init();
n@311	161 break;
n@311	162 case 1:
n@311	163 this.popupTitleText.textContent = "Test Type";
n@311	164 var text = document.createElement("span");
n@311	165 text.textContent = "What type of test would you like to use. Currently APE (Audio Perceptual Evaluation) and MUSHRA style interfaces are available";
n@311	166 this.popupBody.appendChild(text);
n@311	167 var select = document.createElement("select");
n@311	168 select.id="interface-select";
n@311	169 var opt1 = document.createElement("option");
n@311	170 opt1.value = "APE";
n@311	171 opt1.textContent = "APE";
n@311	172 select.appendChild(opt1);
n@311	173 var opt2 = document.createElement("option");
n@311	174 opt2.value = "MUSHRA";
n@311	175 opt2.textContent = "MUSHRA";
n@311	176 select.appendChild(opt2);
n@311	177 this.popupBody.appendChild(select);
n@311	178
n@311	179 var button = document.createElement('button');
n@311	180 button.className = "popupButton";
n@311	181 button.textContent = "Submit";
n@311	182 button.onclick = function(event) {
n@311	183 var select = document.getElementById("interface-select");
n@311	184 specificationNode.interfaceType = select.value;
n@311	185 specificationNode.collectMetrics = true;
n@311	186 popupInstance.advanceState();
n@311	187 };
n@311	188 this.popupFooter.appendChild(button);
n@311	189 break;
n@311	190 case 2:
n@311	191 this.popupTitleText.textContent = "Test Options";
n@311	192 var holder = document.createElement('div');
n@311	193 holder.style.margin = "5px";
n@311	194 var checkbox = document.createElement('input');
n@311	195 checkbox.type = 'checkbox';
n@311	196 checkbox.id = "Randomise-Page";
n@311	197 var text = document.createElement('span');
n@311	198 text.textContent = "Randomise Page Order";
n@311	199 holder.appendChild(checkbox);
n@311	200 holder.appendChild(text);
n@311	201 this.popupBody.appendChild(holder);
n@311	202 switch(specificationNode.interfaceType)
n@311	203 {
n@311	204 case "APE":
n@311	205 for (var i=0; i<APEInterfaceOptions[0].length; i++)
n@311	206 {
n@311	207 holder = document.createElement('div');
n@311	208 holder.style.margin = "5px";
n@311	209 checkbox = document.createElement('input');
n@311	210 checkbox.type = 'checkbox';
n@311	211 checkbox.setAttribute("name","option");
n@311	212 checkbox.id = APEInterfaceOptions[0][i];
n@311	213 text = document.createElement('span');
n@311	214 text.textContent = APEInterfaceOptions[1][i];
n@311	215 holder.appendChild(checkbox);
n@311	216 holder.appendChild(text);
n@311	217 this.popupBody.appendChild(holder);
n@311	218 }
n@311	219 for (var i=0; i<APEInterfaceChecks[0].length; i++)
n@311	220 {
n@311	221 holder = document.createElement('div');
n@311	222 holder.style.margin = "5px";
n@311	223 checkbox = document.createElement('input');
n@311	224 checkbox.type = 'checkbox';
n@311	225 checkbox.setAttribute("name","check");
n@311	226 checkbox.id = APEInterfaceChecks[0][i];
n@311	227 text = document.createElement('span');
n@311	228 text.textContent = APEInterfaceChecks[1][i];
n@311	229 holder.appendChild(checkbox);
n@311	230 holder.appendChild(text);
n@311	231 this.popupBody.appendChild(holder);
n@311	232 }
n@311	233 break;
n@311	234 case "MUSHRA":
n@311	235 for (var i=0; i<MUSHRAInterfaceOptions[0].length; i++)
n@311	236 {
n@311	237 holder = document.createElement('div');
n@311	238 holder.style.margin = "5px";
n@311	239 checkbox = document.createElement('input');
n@311	240 checkbox.type = 'checkbox';
n@311	241 checkbox.setAttribute("name","option");
n@311	242 checkbox.id = MUSHRAInterfaceOptions[0][i];
n@311	243 text = document.createElement('span');
n@311	244 text.textContent = MUSHRAInterfaceOptions[1][i];
n@311	245 holder.appendChild(checkbox);
n@311	246 holder.appendChild(text);
n@311	247 this.popupBody.appendChild(holder);
n@311	248 }
n@311	249 for (var i=0; i<MUSHRAInterfaceChecks[0].length; i++)
n@311	250 {
n@311	251 holder = document.createElement('div');
n@311	252 holder.style.margin = "5px";
n@311	253 checkbox = document.createElement('input');
n@311	254 checkbox.type = 'checkbox';
n@311	255 checkbox.setAttribute("name","check");
n@311	256 checkbox.id = MUSHRAInterfaceChecks[0][i];
n@311	257 text = document.createElement('span');
n@311	258 text.textContent = MUSHRAInterfaceChecks[1][i];
n@311	259 holder.appendChild(checkbox);
n@311	260 holder.appendChild(text);
n@311	261 this.popupBody.appendChild(holder);
n@311	262 }
n@311	263 }
n@311	264 var button = document.createElement('button');
n@311	265 button.className = "popupButton";
n@311	266 button.textContent = "Submit";
n@311	267 button.onclick = function(event) {
n@311	268 var optHold = popupInstance.popupBody;
n@311	269 var opt = optHold.firstChild;
n@311	270 var input = opt.getElementsByTagName('input')[0];
n@311	271 specificationNode.randomiseOrder = input.checked;
n@311	272 while(opt.nextSibling != null)
n@311	273 {
n@311	274 opt = opt.nextSibling;
n@311	275 input = opt.getElementsByTagName('input')[0];
n@311	276 if (input.checked)
n@311	277 {
n@311	278 specificationNode.commonInterface.options.push(new specificationNode.commonInterface.optionNode(input));
n@311	279 }
n@311	280
n@311	281 }
n@311	282 popupInstance.advanceState();
n@311	283 };
n@311	284 this.popupFooter.appendChild(button);
n@311	285 break;
n@311	286 case 3:
n@319	287 audioObjects = [];
n@311	288 this.popupTitleText.textContent = "Test Page";
n@311	289 var span = document.createElement('span');
n@311	290 span.textContent = "Drag and drop your audio files into the box below to add them to a test page";
n@311	291 this.popupBody.appendChild(span);
n@311	292 var dnd = document.createElement('div');
n@311	293 dnd.id = "audio-holder-drop";
n@311	294 dnd.style.width = "100%";
n@311	295 dnd.style.minHeight = "50px";
n@311	296 dnd.style.maxHeight = "220px";
n@311	297 dnd.style.overflow = 'auto';
n@311	298 dnd.className = "dragndrop";
n@311	299 dnd.ondragover = function(e) {
n@311	300 if(e.preventDefault) {e.preventDefault();}
n@311	301 return false;
n@311	302 };
n@311	303 dnd.ondragenter = function(e) {
n@311	304 if(e.preventDefault) {e.preventDefault();}
n@311	305 return false;
n@311	306 };
n@311	307 dnd.ondrop = function(e) {
n@311	308 if(e.preventDefault) {e.preventDefault();}
n@311	309 var dt = e.dataTransfer;
n@311	310 var body = document.getElementById("audio-holder-drop");
n@311	311 var files = dt.files;
n@311	312 for (var i = 0, f; f = files[i]; i++)
n@311	313 {
n@319	314 var ao = new audioObject();
n@319	315 ao.constructTrack(f);
n@319	316 audioObjects.push(ao);
n@311	317 var dndHeader = document.createElement('div');
n@311	318 dndHeader.style.width = "100%";
n@311	319 dndHeader.style.height = "20px";
n@311	320 dndHeader.style.borderBottom = "#DDD";
n@311	321 dndHeader.style.borderBottomWidth = "1px";
n@311	322 dndHeader.style.borderBottomStyle = "solid";
n@319	323 dndHeader.setAttribute('aoID',audioObjects.length-1);
n@311	324 var dndHInclude = document.createElement('div');
n@311	325 dndHInclude.style.width = "30px";
n@311	326 dndHInclude.className = "dndheaderelement";
n@311	327 var includeCheck = document.createElement('input');
n@311	328 includeCheck.type = "checkbox";
n@311	329 includeCheck.name = "include-check";
n@311	330 includeCheck.checked = true;
n@319	331 includeCheck.onchange = function()
n@319	332 {
n@319	333 var i = event.currentTarget.parentElement.parentElement.getAttribute('aoID');
n@319	334 audioObjects[i].include = event.currentTarget.checked;
n@319	335 };
n@311	336 dndHInclude.appendChild(includeCheck);
n@311	337 dndHeader.appendChild(dndHInclude);
n@311	338 var dndHTitle = document.createElement('div');
n@311	339 dndHTitle.style.width = "180px";
n@311	340 dndHTitle.className = "dndheaderelement";
n@311	341 var text = document.createElement('span');
n@311	342 text.textContent = f.name;
n@311	343 dndHTitle.appendChild(text);
n@311	344 dndHeader.appendChild(dndHTitle);
n@311	345 var dndHID = document.createElement('div');
n@311	346 dndHID.style.width = "100px";
n@311	347 dndHID.className = "dndheaderelement";
n@311	348 var IDInput = document.createElement('input');
n@319	349 IDInput.name = "audio-fragment-ID";
n@311	350 IDInput.value = f.name.split('.')[0];
n@319	351 IDInput.onchange = function()
n@319	352 {
n@319	353 var allIDInput = document.getElementsByName("audio-fragment-ID");
n@319	354 var isCopy = new Array(allIDInput.length);
n@319	355 isCopy.fill(0,0,this.length);
n@319	356 if (allIDInput.length > 1)
n@319	357 {
n@319	358 for (var j=0; j<allIDInput.length; j++)
n@319	359 {
n@319	360 var textCompare1 = allIDInput[j].value;
n@319	361 for (var k=j+1; k<allIDInput.length; k++)
n@319	362 {
n@319	363 var textCompare2 = allIDInput[k].value;
n@319	364 if (textCompare1 == textCompare2)
n@319	365 {
n@319	366 isCopy[j] = 1;
n@319	367 isCopy[k] = 1;
n@319	368 }
n@319	369 }
n@319	370 }
n@319	371 }
n@319	372 var button = document.getElementById('submit');
n@319	373 button.disabled = false;
n@319	374 for (var j=0; j<allIDInput.length; j++)
n@319	375 {
n@319	376 if (isCopy[j] == 1)
n@319	377 {
n@319	378 allIDInput[j].style.backgroundColor = '#F22';
n@319	379 button.disabled = true;
n@319	380 }
n@319	381 else
n@319	382 {
n@319	383 allIDInput[j].style.backgroundColor = '#FFF';
n@319	384 audioObjects[j].id = allIDInput[j].value;
n@319	385 }
n@319	386 }
n@319	387 };
n@311	388 IDInput.style.width = "96px";
n@311	389 dndHID.appendChild(IDInput);
n@311	390 dndHeader.appendChild(dndHID);
n@311	391 var dndHPlay = document.createElement('div');
n@311	392 dndHPlay.style.width = "100px";
n@311	393 dndHPlay.className = "dndheaderelement";
n@319	394 var audio = document.createElement('button');
n@319	395 audio.textContent = 'Play';
n@319	396 audio.className = "popupButton";
n@319	397 audio.style.height = "inherit";
n@319	398 audio.onclick = function()
n@319	399 {
n@319	400 var i = event.currentTarget.parentElement.parentElement.getAttribute('aoID');
n@319	401 audioObjects[i].play();
n@319	402 };
n@311	403 dndHPlay.appendChild(audio);
n@311	404 dndHeader.appendChild(dndHPlay);
n@311	405 dnd.appendChild(dndHeader);
n@319	406 IDInput.onchange();
n@311	407 }
n@311	408 };
n@311	409 var dndHeader = document.createElement('div');
n@311	410 dndHeader.style.width = "100%";
n@311	411 dndHeader.style.height = "15px";
n@311	412 dndHeader.style.borderBottom = "#DDD";
n@311	413 dndHeader.style.borderBottomWidth = "1px";
n@311	414 dndHeader.style.borderBottomStyle = "solid";
n@311	415 var dndHInclude = document.createElement('div');
n@311	416 dndHInclude.style.width = "30px";
n@311	417 dndHInclude.className = "dndheaderelement";
n@311	418 var text = document.createElement('span');
n@311	419 text.textContent = "Inc.";
n@311	420 dndHInclude.appendChild(text);
n@311	421 dndHeader.appendChild(dndHInclude);
n@311	422 var dndHTitle = document.createElement('div');
n@311	423 dndHTitle.style.width = "180px";
n@311	424 dndHTitle.className = "dndheaderelement";
n@311	425 text = document.createElement('span');
n@311	426 text.textContent = "File Name";
n@311	427 dndHTitle.appendChild(text);
n@311	428 dndHeader.appendChild(dndHTitle);
n@311	429 var dndHID = document.createElement('div');
n@311	430 dndHID.style.width = "100px";
n@311	431 dndHID.className = "dndheaderelement";
n@311	432 text = document.createElement('span');
n@311	433 text.textContent = "ID";
n@311	434 dndHID.appendChild(text);
n@311	435 dndHeader.appendChild(dndHID);
n@311	436 var dndHPlay = document.createElement('div');
n@311	437 dndHPlay.style.width = "100px";
n@311	438 dndHPlay.className = "dndheaderelement";
n@311	439 text = document.createElement('span');
n@311	440 text.textContent = "Sample";
n@311	441 dndHPlay.appendChild(text);
n@311	442 dndHeader.appendChild(dndHPlay);
n@311	443 dnd.appendChild(dndHeader);
n@311	444 this.popupBody.appendChild(dnd);
n@311	445 var button = document.createElement('button');
n@319	446 button.id = 'submit';
n@311	447 button.className = "popupButton";
n@311	448 button.textContent = "Submit";
n@311	449 button.onclick = function(event)
n@311	450 {
n@319	451 // Construct the audio-holder nodes;
n@319	452 for (var i=0; i<audioObjects.length; i++)
n@319	453 {
n@319	454 if (!audioObjects[i].include)
n@319	455 {
n@319	456 audioObjects.pop(audioObjects[i]);
n@319	457 }
n@319	458 }
n@319	459 if (audioObjects.length != 0)
n@319	460 {
n@319	461 popupInstance.advanceState();
n@319	462 }
n@311	463 };
n@311	464 this.popupFooter.appendChild(button);
n@319	465 break;
n@319	466 case 4:
n@319	467 this.popupTitleText.textContent = "Test Page - Options";
n@319	468 var span = document.createElement('span');
n@319	469 span.textContent = "Set your test page options here";
n@319	470 this.popupBody.appendChild(span);
n@319	471 var pair = document.createElement('div');
n@319	472 pair.style.margin = '5px';
n@319	473 var text = document.createElement('span');
n@319	474 text.textContent = "Page ID:";
n@319	475 var input = document.createElement('input');
n@319	476 input.value = specificationNode.audioHolders.length;
n@319	477 input.id = "id";
n@319	478 pair.appendChild(text);
n@319	479 pair.appendChild(input);
n@319	480 this.popupBody.appendChild(pair);
n@319	481 pair = document.createElement('div');
n@319	482 pair.style.margin = '5px';
n@319	483 text = document.createElement('span');
n@319	484 text.textContent = "Randomise Fragment Order";
n@319	485 input = document.createElement('input');
n@319	486 input.type = "checkbox";
n@319	487 input.id = "randomiseOrder";
n@319	488 pair.appendChild(input);
n@319	489 pair.appendChild(text);
n@319	490 this.popupBody.appendChild(pair);
n@319	491 pair = document.createElement('div');
n@319	492 pair.style.margin = '5px';
n@319	493 text = document.createElement('span');
n@319	494 text.textContent = "Loop Fragment Playback";
n@319	495 input = document.createElement('input');
n@319	496 input.type = "checkbox";
n@319	497 input.id = "loop";
n@319	498 pair.appendChild(input);
n@319	499 pair.appendChild(text);
n@319	500 this.popupBody.appendChild(pair);
n@319	501 pair = document.createElement('div');
n@319	502 pair.style.margin = '5px';
n@319	503 text = document.createElement('span');
n@319	504 text.textContent = "Show fragment comment boxes";
n@319	505 input = document.createElement('input');
n@319	506 input.type = "checkbox";
n@319	507 input.id = "elementComments";
n@319	508 pair.appendChild(input);
n@319	509 pair.appendChild(text);
n@319	510 this.popupBody.appendChild(pair);
n@319	511 var button = document.createElement('button');
n@319	512 button.id = 'submit';
n@319	513 button.className = "popupButton";
n@319	514 button.textContent = "Next";
n@319	515 button.onclick = function(event)
n@319	516 {
n@319	517 var ah = new specificationNode.audioHolderNode(specificationNode);
n@319	518 ah.id = document.getElementById('id').value;
n@319	519 ah.presentedId = specificationNode.audioHolders.length;
n@319	520 ah.hostURL = ah.id+'/';
n@319	521 ah.randomiseOrder = document.getElementById('randomiseOrder').checked;
n@319	522 ah.loop = document.getElementById('loop').checked;
n@319	523 ah.elementComments = document.getElementById('elementComments').checked;
n@319	524 for (var i=0; i<audioObjects.length; i++)
n@319	525 {
n@319	526 ah.audioElements.push(new ah.audioElementNode(ah,audioObjects[i]));
n@319	527 }
n@319	528 specificationNode.audioHolders.push(ah);
n@319	529 popupInstance.advanceState();
n@319	530 };
n@319	531 this.popupFooter.appendChild(button);
n@319	532 break;
n@319	533 case 5:
n@319	534 this.dataTransfer = null;
n@319	535 this.popupTitleText.textContent = "Test Page - Pre/Post Survey";
n@319	536 var span = document.createElement('span');
n@319	537 span.textContent = "Add your pre test page options here";
n@319	538 this.popupBody.appendChild(span);
n@319	539 var preHolder = document.createElement('div');
n@319	540 preHolder.id = "preHolder";
n@319	541 preHolder.style.width = "460px";
n@319	542 preHolder.style.minHeight = "100px";
n@319	543 preHolder.style.maxHeight = "220px";
n@319	544 preHolder.style.overflow = 'auto';
n@319	545 preHolder.style.border = "black";
n@319	546 preHolder.style.borderStyle = "solid";
n@319	547 preHolder.style.borderWidth = "1px";
n@319	548 this.popupBody.appendChild(preHolder);
n@319	549 var audioHolder = specificationNode.audioHolders[specificationNode.audioHolders.length-1];
n@319	550 var preHeaderHolder = document.createElement('div');
n@319	551 preHeaderHolder.style.width = "456px";
n@319	552 preHeaderHolder.style.height= "20px";
n@319	553 preHeaderHolder.style.margin= "2px";
n@319	554 preHeaderHolder.style.borderBottom = "#DDD";
n@319	555 preHeaderHolder.style.borderBottomWidth = "1px";
n@319	556 preHeaderHolder.style.borderBottomStyle = "solid";
n@319	557 var mvH = document.createElement('div');
n@319	558 mvH.className = "dndheaderelement";
n@319	559 mvH.style.width = "50px";
n@319	560 var text = document.createElement('span');
n@319	561 text.textContent = "Order";
n@319	562 mvH.appendChild(text);
n@319	563 preHeaderHolder.appendChild(mvH);
n@319	564 var idH = document.createElement('div');
n@319	565 idH.className = "dndheaderelement";
n@319	566 idH.style.width = "150px";
n@319	567 text = document.createElement('span');
n@319	568 text.textContent = "ID";
n@319	569 idH.appendChild(text);
n@319	570 preHeaderHolder.appendChild(idH);
n@319	571 var tH = document.createElement('div');
n@319	572 tH.className = "dndheaderelement";
n@319	573 tH.style.width = "150px";
n@319	574 text = document.createElement('span');
n@319	575 text.textContent = "Type";
n@319	576 tH.appendChild(text);
n@319	577 preHeaderHolder.appendChild(tH);
n@319	578 var editH = document.createElement('div');
n@319	579 editH.className = "dndheaderelement";
n@319	580 editH.style.width = "50px";
n@319	581 text = document.createElement('span');
n@319	582 text.textContent = "Edit";
n@319	583 editH.appendChild(text);
n@319	584 preHeaderHolder.appendChild(editH);
n@319	585 var deleteH = document.createElement('div');
n@319	586 deleteH.className = "dndheaderelement";
n@319	587 deleteH.style.width = "50px";
n@319	588 text = document.createElement('span');
n@319	589 text.textContent = "Delete";
n@319	590 deleteH.appendChild(text);
n@319	591 preHeaderHolder.appendChild(deleteH);
n@319	592 preHolder.appendChild(preHeaderHolder);
n@319	593
n@319	594
n@319	595 for (var i=0; i<audioHolder.preTest.options.length; i++)
n@319	596 {
n@319	597 var optionNode = audioHolder.preTest.options[i];
n@319	598 var entry = document.createElement('div');
n@319	599 entry.style.width = "456px";
n@319	600 entry.style.height= "20px";
n@319	601 entry.style.margin= "2px";
n@319	602 entry.style.borderBottom = "#DDD";
n@319	603 entry.style.borderBottomWidth = "1px";
n@319	604 entry.style.borderBottomStyle = "solid";
n@319	605 entry.setAttribute("node-id",i);
n@319	606 var node = audioHolder.preTest.options[i];
n@319	607 var mvH = document.createElement('div');
n@319	608 mvH.className = "dndheaderelement";
n@319	609 mvH.style.width = "50px";
n@319	610 var mvup = document.createElement("button");
n@319	611 mvup.textContent = "Up";
n@319	612 mvup.style.width = "25px";
n@319	613 mvup.style.padding = "1px 0px";
n@319	614 mvup.onclick = function()
n@319	615 {
n@319	616 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
n@319	617 if (i != 0)
n@319	618 {
n@319	619 var next = audioHolder.preTest.options[i-1];
n@319	620 var cur = audioHolder.preTest.options[i];
n@319	621 audioHolder.preTest.options[i-1] = cur;
n@319	622 audioHolder.preTest.options[i] = next;
n@319	623 popupInstance.state = 5;
n@319	624 popupInstance.advanceState();
n@319	625 }
n@319	626 };
n@319	627 mvH.appendChild(mvup);
n@319	628 var mvdn = document.createElement("button");
n@319	629 mvdn.textContent = "Dn";
n@319	630 mvdn.style.width = "25px";
n@319	631 mvdn.style.padding = "1px 0px";
n@319	632 mvdn.onclick = function()
n@319	633 {
n@319	634 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
n@319	635 if (i != audioHolder.preTest.options.length-1)
n@319	636 {
n@319	637 var next = audioHolder.preTest.options[i+1];
n@319	638 var cur = audioHolder.preTest.options[i];
n@319	639 audioHolder.preTest.options[i+1] = cur;
n@319	640 audioHolder.preTest.options[i] = next;
n@319	641 popupInstance.state = 5;
n@319	642 popupInstance.advanceState();
n@319	643 }
n@319	644 };
n@319	645 mvH.appendChild(mvdn);
n@319	646 entry.appendChild(mvH);
n@319	647 var idH = document.createElement('div');
n@319	648 idH.className = "dndheaderelement";
n@319	649 idH.style.width = "150px";
n@319	650 if (optionNode.type != "statement")
n@319	651 {
n@319	652 var span = document.createElement('span');
n@319	653 span.textContent = optionNode.id;
n@319	654 idH.appendChild(span);
n@319	655 }
n@319	656 entry.appendChild(idH);
n@319	657 var typeH = document.createElement('div');
n@319	658 typeH.className = "dndheaderelement";
n@319	659 typeH.style.width = "150px";
n@319	660 var span = document.createElement('span');
n@319	661 span.textContent = optionNode.type;
n@319	662 typeH.appendChild(span);
n@319	663 entry.appendChild(typeH);
n@319	664 var editH = document.createElement('div');
n@319	665 editH.className = "dndheaderelement";
n@319	666 editH.style.width = "50px";
n@319	667 var editButton = document.createElement("button");
n@319	668 editButton.textContent = "Edit";
n@319	669 editButton.style.width = "48px";
n@319	670 editButton.style.padding = "1px 0px";
n@319	671 editButton.onclick = function()
n@319	672 {
n@319	673 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
n@319	674 popupInstance.dataTransfer = new function() {
n@319	675 this.title = "Edit Test Node";
n@319	676 this.parent = specificationNode.audioHolders[specificationNode.audioHolders.length-1].preTest;
n@319	677 this.node = this.parent.options[i];
n@319	678 this.previousState = 5;
n@319	679 };
n@319	680 popupInstance.advanceState();
n@319	681 };
n@319	682 editH.appendChild(editButton);
n@319	683 entry.appendChild(editH);
n@319	684 var deleteH = document.createElement('div');
n@319	685 deleteH.className = "dndheaderelement";
n@319	686 deleteH.style.width = "50px";
n@319	687 var deleteButton = document.createElement("button");
n@319	688 deleteButton.textContent = "Del";
n@319	689 deleteButton.style.width = "48px";
n@319	690 deleteButton.style.padding = "1px 0px";
n@319	691 deleteButton.onclick = function()
n@319	692 {
n@319	693 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
n@319	694 var j = i+1;
n@319	695 while(j < audioHolder.preTest.options.length)
n@319	696 {
n@319	697 audioHolder.preTest.options[i] = audioHolder.preTest.options[j];
n@319	698 j++;
n@319	699 i++;
n@319	700 }
n@319	701 audioHolder.preTest.options.pop();
n@319	702 popupInstance.state = 5;
n@319	703 popupInstance.advanceState();
n@319	704 };
n@319	705 deleteH.appendChild(deleteButton);
n@319	706 entry.appendChild(deleteH);
n@319	707 preHolder.appendChild(entry);
n@319	708 }
n@319	709 var entry = document.createElement('div');
n@319	710 entry.style.width = "456px";
n@319	711 entry.style.height= "20px";
n@319	712 entry.style.margin= "2px";
n@319	713 entry.style.borderBottom = "#DDD";
n@319	714 entry.style.borderBottomWidth = "1px";
n@319	715 entry.style.borderBottomStyle = "solid";
n@319	716 entry.align = "center";
n@319	717 var addPre = document.createElement('button');
n@319	718 addPre.className = "popupButton";
n@319	719 addPre.textContent = "Add New Entry";
n@319	720 addPre.style.height = "20px";
n@319	721 addPre.onclick = function()
n@319	722 {
n@319	723 popupInstance.dataTransfer = new function() {
n@319	724 this.title = "New Pre Test Node";
n@319	725 this.parent = specificationNode.audioHolders[specificationNode.audioHolders.length-1].preTest;
n@319	726 this.node = null;
n@319	727 this.previousState = 5;
n@319	728 };
n@319	729 popupInstance.advanceState();
n@319	730 };
n@319	731 entry.appendChild(addPre);
n@319	732 preHolder.appendChild(entry);
n@319	733
n@319	734 var span = document.createElement('span');
n@319	735 span.textContent = "Add your post test page options here";
n@319	736 this.popupBody.appendChild(span);
n@319	737 var postHolder = document.createElement('div');
n@319	738 postHolder.id = "preHolder";
n@319	739 postHolder.style.width = "100%";
n@319	740 postHolder.style.minHeight = "100px";
n@319	741 postHolder.style.maxHeight = "220px";
n@319	742 postHolder.style.overflow = 'auto';
n@319	743 postHolder.style.border = "black";
n@319	744 postHolder.style.borderStyle = "solid";
n@319	745 postHolder.style.borderWidth = "1px";
n@319	746 this.popupBody.appendChild(postHolder);
n@319	747 var postHeaderHolder = document.createElement('div');
n@319	748 postHeaderHolder.style.width = "456px";
n@319	749 postHeaderHolder.style.height= "20px";
n@319	750 postHeaderHolder.style.margin= "2px";
n@319	751 postHeaderHolder.style.borderBottom = "#DDD";
n@319	752 postHeaderHolder.style.borderBottomWidth = "1px";
n@319	753 postHeaderHolder.style.borderBottomStyle = "solid";
n@319	754 var mvH = document.createElement('div');
n@319	755 mvH.className = "dndheaderelement";
n@319	756 mvH.style.width = "50px";
n@319	757 var text = document.createElement('span');
n@319	758 text.textContent = "Order";
n@319	759 mvH.appendChild(text);
n@319	760 postHeaderHolder.appendChild(mvH);
n@319	761 var idH = document.createElement('div');
n@319	762 idH.className = "dndheaderelement";
n@319	763 idH.style.width = "150px";
n@319	764 text = document.createElement('span');
n@319	765 text.textContent = "ID";
n@319	766 idH.appendChild(text);
n@319	767 postHeaderHolder.appendChild(idH);
n@319	768 var tH = document.createElement('div');
n@319	769 tH.className = "dndheaderelement";
n@319	770 tH.style.width = "150px";
n@319	771 text = document.createElement('span');
n@319	772 text.textContent = "Type";
n@319	773 tH.appendChild(text);
n@319	774 postHeaderHolder.appendChild(tH);
n@319	775 var editH = document.createElement('div');
n@319	776 editH.className = "dndheaderelement";
n@319	777 editH.style.width = "50px";
n@319	778 text = document.createElement('span');
n@319	779 text.textContent = "Edit";
n@319	780 editH.appendChild(text);
n@319	781 postHeaderHolder.appendChild(editH);
n@319	782 var deleteH = document.createElement('div');
n@319	783 deleteH.className = "dndheaderelement";
n@319	784 deleteH.style.width = "50px";
n@319	785 text = document.createElement('span');
n@319	786 text.textContent = "Delete";
n@319	787 deleteH.appendChild(text);
n@319	788 postHeaderHolder.appendChild(deleteH);
n@319	789 postHolder.appendChild(postHeaderHolder);
n@319	790
n@319	791 for (var i=0; i<audioHolder.postTest.options.length; i++)
n@319	792 {
n@319	793 var optionNode = audioHolder.postTest.options[i];
n@319	794 var entry = document.createElement('div');
n@319	795 entry.style.width = "456px";
n@319	796 entry.style.height= "20px";
n@319	797 entry.style.margin= "2px";
n@319	798 entry.style.borderBottom = "#DDD";
n@319	799 entry.style.borderBottomWidth = "1px";
n@319	800 entry.style.borderBottomStyle = "solid";
n@319	801 entry.setAttribute("node-id",i);
n@319	802 var node = audioHolder.postTest.options[i];
n@319	803 var mvH = document.createElement('div');
n@319	804 mvH.className = "dndheaderelement";
n@319	805 mvH.style.width = "50px";
n@319	806 var mvup = document.createElement("button");
n@319	807 mvup.textContent = "Up";
n@319	808 mvup.style.width = "25px";
n@319	809 mvup.style.padding = "1px 0px";
n@319	810 mvup.onclick = function()
n@319	811 {
n@319	812 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
n@319	813 if (i != 0)
n@319	814 {
n@319	815 var next = audioHolder.postTest.options[i-1];
n@319	816 var cur = audioHolder.postTest.options[i];
n@319	817 audioHolder.postTest.options[i-1] = cur;
n@319	818 audioHolder.postTest.options[i] = next;
n@319	819 popupInstance.state = 5;
n@319	820 popupInstance.advanceState();
n@319	821 }
n@319	822 };
n@319	823 mvH.appendChild(mvup);
n@319	824 var mvdn = document.createElement("button");
n@319	825 mvdn.textContent = "Dn";
n@319	826 mvdn.style.width = "25px";
n@319	827 mvdn.style.padding = "1px 0px";
n@319	828 mvdn.onclick = function()
n@319	829 {
n@319	830 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
n@319	831 if (i != audioHolder.postTest.options.length-1)
n@319	832 {
n@319	833 var next = audioHolder.postTest.options[i+1];
n@319	834 var cur = audioHolder.postTest.options[i];
n@319	835 audioHolder.postTest.options[i+1] = cur;
n@319	836 audioHolder.postTest.options[i] = next;
n@319	837 popupInstance.state = 5;
n@319	838 popupInstance.advanceState();
n@319	839 }
n@319	840 };
n@319	841 mvH.appendChild(mvdn);
n@319	842 entry.appendChild(mvH);
n@319	843 var idH = document.createElement('div');
n@319	844 idH.className = "dndheaderelement";
n@319	845 idH.style.width = "150px";
n@319	846 if (optionNode.type != "statement")
n@319	847 {
n@319	848 var span = document.createElement('span');
n@319	849 span.textContent = optionNode.id;
n@319	850 idH.appendChild(span);
n@319	851 }
n@319	852 entry.appendChild(idH);
n@319	853 var typeH = document.createElement('div');
n@319	854 typeH.className = "dndheaderelement";
n@319	855 typeH.style.width = "150px";
n@319	856 var span = document.createElement('span');
n@319	857 span.textContent = optionNode.type;
n@319	858 typeH.appendChild(span);
n@319	859 entry.appendChild(typeH);
n@319	860 var editH = document.createElement('div');
n@319	861 editH.className = "dndheaderelement";
n@319	862 editH.style.width = "50px";
n@319	863 var editButton = document.createElement("button");
n@319	864 editButton.textContent = "Edit";
n@319	865 editButton.style.width = "48px";
n@319	866 editButton.style.padding = "1px 0px";
n@319	867 editButton.onclick = function()
n@319	868 {
n@319	869 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
n@319	870 popupInstance.dataTransfer = new function() {
n@319	871 this.title = "Edit Test Node";
n@319	872 this.parent = specificationNode.audioHolders[specificationNode.audioHolders.length-1].postTest;
n@319	873 this.node = this.parent.options[i];
n@319	874 this.previousState = 5;
n@319	875 };
n@319	876 popupInstance.advanceState();
n@319	877 };
n@319	878 editH.appendChild(editButton);
n@319	879 entry.appendChild(editH);
n@319	880 var deleteH = document.createElement('div');
n@319	881 deleteH.className = "dndheaderelement";
n@319	882 deleteH.style.width = "50px";
n@319	883 var deleteButton = document.createElement("button");
n@319	884 deleteButton.textContent = "Del";
n@319	885 deleteButton.style.width = "48px";
n@319	886 deleteButton.style.padding = "1px 0px";
n@319	887 deleteButton.onclick = function()
n@319	888 {
n@319	889 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
n@319	890 var j = i+1;
n@319	891 while(j < audioHolder.postTest.options.length)
n@319	892 {
n@319	893 audioHolder.postTest.options[i] = audioHolder.postTest.options[j];
n@319	894 j++;
n@319	895 i++;
n@319	896 }
n@319	897 audioHolder.postTest.options.pop();
n@319	898 popupInstance.state = 5;
n@319	899 popupInstance.advanceState();
n@319	900 };
n@319	901 deleteH.appendChild(deleteButton);
n@319	902 entry.appendChild(deleteH);
n@319	903 postHolder.appendChild(entry);
n@319	904 }
n@319	905
n@319	906 var entry = document.createElement('div');
n@319	907 entry.style.width = "456px";
n@319	908 entry.style.height= "20px";
n@319	909 entry.style.margin= "2px";
n@319	910 entry.style.borderBottom = "#DDD";
n@319	911 entry.style.borderBottomWidth = "1px";
n@319	912 entry.style.borderBottomStyle = "solid";
n@319	913 entry.align = "center";
n@319	914 var addPost = document.createElement('button');
n@319	915 addPost.className = "popupButton";
n@319	916 addPost.textContent = "Add New Entry";
n@319	917 addPost.style.height = "20px";
n@319	918 addPost.onclick = function()
n@319	919 {
n@319	920 popupInstance.dataTransfer = new function() {
n@319	921 this.title = "New Pre Test Node";
n@319	922 this.parent = specificationNode.audioHolders[specificationNode.audioHolders.length-1].postTest;
n@319	923 this.node = null;
n@319	924 this.previousState = 5;
n@319	925 };
n@319	926 popupInstance.advanceState();
n@319	927 };
n@319	928 entry.appendChild(addPost);
n@319	929 postHolder.appendChild(entry);
n@319	930
n@319	931 var button = document.createElement('button');
n@319	932 button.id = 'submit';
n@319	933 button.className = "popupButton";
n@319	934 button.textContent = "Finish";
n@319	935 button.onclick = function(event)
n@319	936 {
n@319	937 popupInstance.state = 7;
n@319	938 popupInstance.advanceState();
n@319	939 };
n@319	940 this.popupFooter.appendChild(button);
n@319	941 button = document.createElement('button');
n@319	942 button.id = 'submit';
n@319	943 button.className = "popupButton";
n@319	944 button.textContent = "Add Another Page";
n@319	945 button.onclick = function(event)
n@319	946 {
n@319	947 popupInstance.state = 3;
n@319	948 popupInstance.advanceState();
n@319	949 };
n@319	950 this.popupFooter.appendChild(button);
n@319	951 break;
n@319	952 case 6:
n@319	953 this.popupTitleText.textContent = this.dataTransfer.title;
n@319	954 var span = document.createElement('span');
n@319	955 span.textContent = "Select survey settings here";
n@319	956 this.popupBody.appendChild(span);
n@319	957 var div = document.createElement('div');
n@319	958 span = document.createElement("span");
n@319	959 span.textContent = "Survey Type";
n@319	960 var select = document.createElement("select");
n@319	961 select.id="survey-select";
n@319	962 var option = document.createElement('option');
n@319	963 option.textContent = "Statement";
n@319	964 option.value = "statement";
n@319	965 select.appendChild(option);
n@319	966 option = document.createElement('option');
n@319	967 option.textContent = "Question";
n@319	968 option.value = "question";
n@319	969 select.appendChild(option);
n@319	970 option = document.createElement('option');
n@319	971 option.textContent = "Number";
n@319	972 option.value = "number";
n@319	973 select.appendChild(option);
n@319	974 option = document.createElement('option');
n@319	975 option.textContent = "Radio";
n@319	976 option.value = "radio";
n@319	977 select.appendChild(option);
n@319	978 option = document.createElement('option');
n@319	979 option.textContent = "Checkbox";
n@319	980 option.value = "checkbox";
n@319	981 select.appendChild(option);
n@319	982 this.popupBody.appendChild(select);
n@319	983 var options = document.createElement('div');
n@319	984 options.id = "survey-options";
n@319	985 this.popupBody.appendChild(options);
n@319	986 var button = document.createElement('button');
n@319	987 button.id = 'submit';
n@319	988 button.className = "popupButton";
n@319	989 button.textContent = "Add";
n@319	990 button.onclick = function(event)
n@319	991 {
n@319	992 var parent = popupInstance.dataTransfer.parent;
n@319	993 if (popupInstance.dataTransfer.node == null)
n@319	994 {
n@319	995 var node = new parent.OptionNode();
n@319	996 } else
n@319	997 {
n@319	998 var node = popupInstance.dataTransfer.node;
n@319	999 }
n@319	1000 node.type = document.getElementById("survey-select").value;
n@319	1001 switch(node.type)
n@319	1002 {
n@319	1003 case "statement":
n@319	1004 node.statement = document.getElementById("statement").value;
n@319	1005 break;
n@319	1006 case "question":
n@319	1007 node.question = document.getElementById("question").value;
n@319	1008 node.id = document.getElementById("ID").value;
n@319	1009 node.mandatory = document.getElementById("mandatory").checked;
n@319	1010 node.boxsize = document.getElementById("boxsize").value;
n@319	1011 break;
n@319	1012 }
n@319	1013 if (popupInstance.dataTransfer.node == null)
n@319	1014 {parent.options.push(node);}
n@319	1015 popupInstance.state = popupInstance.dataTransfer.previousState;
n@319	1016 popupInstance.advanceState();
n@319	1017 };
n@319	1018 this.popupFooter.appendChild(button);
n@319	1019 select.onchange = function()
n@319	1020 {
n@319	1021 var options = document.getElementById("survey-options");
n@319	1022 options.innerHTML = null;
n@319	1023 switch(this.value)
n@319	1024 {
n@319	1025 case "statement":
n@319	1026 var span = document.createElement('span');
n@319	1027 span.textContent = "Enter Statement";
n@319	1028 var tA = document.createElement('textarea');
n@319	1029 tA.id = "statement";
n@319	1030 tA.style.width = "460px";
n@319	1031 tA.style.height = "96px";
n@319	1032 if (popupInstance.dataTransfer.node != null)
n@319	1033 {tA.value = this.dataTransfer.node.statement;}
n@319	1034 options.appendChild(span);
n@319	1035 options.appendChild(tA);
n@319	1036 break;
n@319	1037 case "question":
n@319	1038 var span = document.createElement('span');
n@319	1039 span.textContent = "Enter Question";
n@319	1040 var tA = document.createElement('textarea');
n@319	1041 tA.style.width = "460px";
n@319	1042 tA.style.height = "54px";
n@319	1043 tA.id = "question";
n@319	1044 options.appendChild(span);
n@319	1045 options.appendChild(tA);
n@319	1046 var div = document.createElement('div');
n@319	1047 var input = document.createElement('input');
n@319	1048 input.id = "ID";
n@319	1049 span = document.createElement('span');
n@319	1050 span.textContent = "ID:";
n@319	1051 div.appendChild(span);
n@319	1052 div.appendChild(input);
n@319	1053 options.appendChild(div);
n@319	1054 div = document.createElement('div');
n@319	1055 input = document.createElement('input');
n@319	1056 input.type = "checkbox";
n@319	1057 input.id = "mandatory";
n@319	1058 span = document.createElement('span');
n@319	1059 span.textContent = "Mandatory";
n@319	1060 div.appendChild(span);
n@319	1061 div.appendChild(input);
n@319	1062 options.appendChild(div);
n@319	1063 div = document.createElement('div');
n@319	1064 var boxsize = document.createElement("select");
n@319	1065 boxsize.id = "boxsize";
n@319	1066 var selOpt = document.createElement("option");
n@319	1067 selOpt.value = "normal";
n@319	1068 selOpt.textContent = "Normal";
n@319	1069 boxsize.appendChild(selOpt);
n@319	1070 selOpt = document.createElement("option");
n@319	1071 selOpt.value = "small";
n@319	1072 selOpt.textContent = "Small";
n@319	1073 boxsize.appendChild(selOpt);
n@319	1074 selOpt = document.createElement("option");
n@319	1075 selOpt.value = "large";
n@319	1076 selOpt.textContent = "Large";
n@319	1077 boxsize.appendChild(selOpt);
n@319	1078 selOpt = document.createElement("option");
n@319	1079 selOpt.value = "huge";
n@319	1080 selOpt.textContent = "Huge";
n@319	1081 boxsize.appendChild(selOpt);
n@319	1082 span = document.createElement('span');
n@319	1083 span.textContent = "Response Text Area";
n@319	1084 div.appendChild(span);
n@319	1085 div.appendChild(boxsize);
n@319	1086 options.appendChild(div);
n@319	1087 if (popupInstance.dataTransfer.node != null)
n@319	1088 {
n@319	1089 tA.value = popupInstance.dataTransfer.node.question;
n@319	1090 document.getElementById("ID").value = popupInstance.dataTransfer.node.id;
n@319	1091 document.getElementById("mandatory").value = popupInstance.dataTransfer.node.mandatory;
n@319	1092 document.getElementById("boxsize").value = popupInstance.dataTransfer.node.boxsize;
n@319	1093 }
n@319	1094 break;
n@319	1095 case "number":
n@319	1096 var span = document.createElement('span');
n@319	1097 span.textContent = "Enter Question";
n@319	1098 var tA = document.createElement('textarea');
n@319	1099 tA.style.width = "460px";
n@319	1100 tA.style.height = "54px";
n@319	1101 tA.id = "question";
n@319	1102 options.appendChild(span);
n@319	1103 options.appendChild(tA);
n@319	1104 var div = document.createElement('div');
n@319	1105 var input = document.createElement('input');
n@319	1106 input.id = "ID";
n@319	1107 span = document.createElement('span');
n@319	1108 span.textContent = "ID:";
n@319	1109 div.appendChild(span);
n@319	1110 div.appendChild(input);
n@319	1111 options.appendChild(div);
n@319	1112 div = document.createElement('div');
n@319	1113 input = document.createElement('input');
n@319	1114 input.type = "checkbox";
n@319	1115 input.id = "mandatory";
n@319	1116 span = document.createElement('span');
n@319	1117 span.textContent = "Mandatory";
n@319	1118 div.appendChild(span);
n@319	1119 div.appendChild(input);
n@319	1120 options.appendChild(div);
n@319	1121 div = document.createElement('div');
n@319	1122 break;
n@319	1123 }
n@319	1124 };
n@319	1125 if (this.dataTransfer.node != null)
n@319	1126 {
n@319	1127 select.value = this.dataTransfer.node.type;
n@319	1128 }
n@319	1129 select.onchange();
n@319	1130 break;
n@319	1131 case 7:
n@319	1132 this.dataTransfer = null;
n@319	1133 this.popupTitleText.textContent = "Test Session - Pre/Post Survey";
n@319	1134 var span = document.createElement('span');
n@319	1135 span.textContent = "Add your pre test session and post test session survey options here";
n@319	1136 this.popupBody.appendChild(span);
n@319	1137 var preHolder = document.createElement('div');
n@319	1138 preHolder.id = "preHolder";
n@319	1139 preHolder.style.width = "460px";
n@319	1140 preHolder.style.minHeight = "100px";
n@319	1141 preHolder.style.maxHeight = "220px";
n@319	1142 preHolder.style.overflow = 'auto';
n@319	1143 preHolder.style.border = "black";
n@319	1144 preHolder.style.borderStyle = "solid";
n@319	1145 preHolder.style.borderWidth = "1px";
n@319	1146 this.popupBody.appendChild(preHolder);
n@319	1147 var preHeaderHolder = document.createElement('div');
n@319	1148 preHeaderHolder.style.width = "456px";
n@319	1149 preHeaderHolder.style.height= "20px";
n@319	1150 preHeaderHolder.style.margin= "2px";
n@319	1151 preHeaderHolder.style.borderBottom = "#DDD";
n@319	1152 preHeaderHolder.style.borderBottomWidth = "1px";
n@319	1153 preHeaderHolder.style.borderBottomStyle = "solid";
n@319	1154 var mvH = document.createElement('div');
n@319	1155 mvH.className = "dndheaderelement";
n@319	1156 mvH.style.width = "50px";
n@319	1157 var text = document.createElement('span');
n@319	1158 text.textContent = "Order";
n@319	1159 mvH.appendChild(text);
n@319	1160 preHeaderHolder.appendChild(mvH);
n@319	1161 var idH = document.createElement('div');
n@319	1162 idH.className = "dndheaderelement";
n@319	1163 idH.style.width = "150px";
n@319	1164 text = document.createElement('span');
n@319	1165 text.textContent = "ID";
n@319	1166 idH.appendChild(text);
n@319	1167 preHeaderHolder.appendChild(idH);
n@319	1168 var tH = document.createElement('div');
n@319	1169 tH.className = "dndheaderelement";
n@319	1170 tH.style.width = "150px";
n@319	1171 text = document.createElement('span');
n@319	1172 text.textContent = "Type";
n@319	1173 tH.appendChild(text);
n@319	1174 preHeaderHolder.appendChild(tH);
n@319	1175 var editH = document.createElement('div');
n@319	1176 editH.className = "dndheaderelement";
n@319	1177 editH.style.width = "50px";
n@319	1178 text = document.createElement('span');
n@319	1179 text.textContent = "Edit";
n@319	1180 editH.appendChild(text);
n@319	1181 preHeaderHolder.appendChild(editH);
n@319	1182 var deleteH = document.createElement('div');
n@319	1183 deleteH.className = "dndheaderelement";
n@319	1184 deleteH.style.width = "50px";
n@319	1185 text = document.createElement('span');
n@319	1186 text.textContent = "Delete";
n@319	1187 deleteH.appendChild(text);
n@319	1188 preHeaderHolder.appendChild(deleteH);
n@319	1189 preHolder.appendChild(preHeaderHolder);
n@319	1190
n@319	1191
n@319	1192 for (var i=0; i<specificationNode.preTest.options.length; i++)
n@319	1193 {
n@319	1194 var optionNode = specificationNode.preTest.options[i];
n@319	1195 var entry = document.createElement('div');
n@319	1196 entry.style.width = "456px";
n@319	1197 entry.style.height= "20px";
n@319	1198 entry.style.margin= "2px";
n@319	1199 entry.style.borderBottom = "#DDD";
n@319	1200 entry.style.borderBottomWidth = "1px";
n@319	1201 entry.style.borderBottomStyle = "solid";
n@319	1202 entry.setAttribute("node-id",i);
n@319	1203 var node = specificationNode.preTest.options[i];
n@319	1204 var mvH = document.createElement('div');
n@319	1205 mvH.className = "dndheaderelement";
n@319	1206 mvH.style.width = "50px";
n@319	1207 var mvup = document.createElement("button");
n@319	1208 mvup.textContent = "Up";
n@319	1209 mvup.style.width = "25px";
n@319	1210 mvup.style.padding = "1px 0px";
n@319	1211 mvup.onclick = function()
n@319	1212 {
n@319	1213 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
n@319	1214 if (i != 0)
n@319	1215 {
n@319	1216 var next = specificationNode.preTest.options[i-1];
n@319	1217 var cur = specificationNode.preTest.options[i];
n@319	1218 specificationNode.preTest.options[i-1] = cur;
n@319	1219 specificationNode.preTest.options[i] = next;
n@319	1220 popupInstance.state = 7;
n@319	1221 popupInstance.advanceState();
n@319	1222 }
n@319	1223 };
n@319	1224 mvH.appendChild(mvup);
n@319	1225 var mvdn = document.createElement("button");
n@319	1226 mvdn.textContent = "Dn";
n@319	1227 mvdn.style.width = "25px";
n@319	1228 mvdn.style.padding = "1px 0px";
n@319	1229 mvdn.onclick = function()
n@319	1230 {
n@319	1231 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
n@319	1232 if (i != specificationNode.preTest.options.length-1)
n@319	1233 {
n@319	1234 var next = specificationNode.preTest.options[i+1];
n@319	1235 var cur = specificationNode.preTest.options[i];
n@319	1236 specificationNode.preTest.options[i+1] = cur;
n@319	1237 specificationNode.preTest.options[i] = next;
n@319	1238 popupInstance.state = 7;
n@319	1239 popupInstance.advanceState();
n@319	1240 }
n@319	1241 };
n@319	1242 mvH.appendChild(mvdn);
n@319	1243 entry.appendChild(mvH);
n@319	1244 var idH = document.createElement('div');
n@319	1245 idH.className = "dndheaderelement";
n@319	1246 idH.style.width = "150px";
n@319	1247 if (optionNode.type != "statement")
n@319	1248 {
n@319	1249 var span = document.createElement('span');
n@319	1250 span.textContent = optionNode.id;
n@319	1251 idH.appendChild(span);
n@319	1252 }
n@319	1253 entry.appendChild(idH);
n@319	1254 var typeH = document.createElement('div');
n@319	1255 typeH.className = "dndheaderelement";
n@319	1256 typeH.style.width = "150px";
n@319	1257 var span = document.createElement('span');
n@319	1258 span.textContent = optionNode.type;
n@319	1259 typeH.appendChild(span);
n@319	1260 entry.appendChild(typeH);
n@319	1261 var editH = document.createElement('div');
n@319	1262 editH.className = "dndheaderelement";
n@319	1263 editH.style.width = "50px";
n@319	1264 var editButton = document.createElement("button");
n@319	1265 editButton.textContent = "Edit";
n@319	1266 editButton.style.width = "48px";
n@319	1267 editButton.style.padding = "1px 0px";
n@319	1268 editButton.onclick = function()
n@319	1269 {
n@319	1270 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
n@319	1271 popupInstance.dataTransfer = new function() {
n@319	1272 this.title = "Edit Test Node";
n@319	1273 this.parent = specificationNode.preTest;
n@319	1274 this.node = this.parent.options[i];
n@319	1275 this.previousState = 7;
n@319	1276 };
n@319	1277 popupInstace.state = 6;
n@319	1278 popupInstance.advanceState();
n@319	1279 };
n@319	1280 editH.appendChild(editButton);
n@319	1281 entry.appendChild(editH);
n@319	1282 var deleteH = document.createElement('div');
n@319	1283 deleteH.className = "dndheaderelement";
n@319	1284 deleteH.style.width = "50px";
n@319	1285 var deleteButton = document.createElement("button");
n@319	1286 deleteButton.textContent = "Del";
n@319	1287 deleteButton.style.width = "48px";
n@319	1288 deleteButton.style.padding = "1px 0px";
n@319	1289 deleteButton.onclick = function()
n@319	1290 {
n@319	1291 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
n@319	1292 var j = i+1;
n@319	1293 while(j < specificationNode.preTest.options.length)
n@319	1294 {
n@319	1295 specificationNode.preTest.options[i] = specificationNode.preTest.options[j];
n@319	1296 j++;
n@319	1297 i++;
n@319	1298 }
n@319	1299 specificationNode.preTest.options.pop();
n@319	1300 popupInstance.state = 7;
n@319	1301 popupInstance.advanceState();
n@319	1302 };
n@319	1303 deleteH.appendChild(deleteButton);
n@319	1304 entry.appendChild(deleteH);
n@319	1305 preHolder.appendChild(entry);
n@319	1306 }
n@319	1307 var entry = document.createElement('div');
n@319	1308 entry.style.width = "456px";
n@319	1309 entry.style.height= "20px";
n@319	1310 entry.style.margin= "2px";
n@319	1311 entry.style.borderBottom = "#DDD";
n@319	1312 entry.style.borderBottomWidth = "1px";
n@319	1313 entry.style.borderBottomStyle = "solid";
n@319	1314 entry.align = "center";
n@319	1315 var addPre = document.createElement('button');
n@319	1316 addPre.className = "popupButton";
n@319	1317 addPre.textContent = "Add New Entry";
n@319	1318 addPre.style.height = "20px";
n@319	1319 addPre.onclick = function()
n@319	1320 {
n@319	1321 popupInstance.dataTransfer = new function() {
n@319	1322 this.title = "New Pre Test Node";
n@319	1323 this.parent = specificationNode.preTest;
n@319	1324 this.node = null;
n@319	1325 this.previousState = 7;
n@319	1326 };
n@319	1327 popupInstance.state = 6;
n@319	1328 popupInstance.advanceState();
n@319	1329 };
n@319	1330 entry.appendChild(addPre);
n@319	1331 preHolder.appendChild(entry);
n@319	1332
n@319	1333 var span = document.createElement('span');
n@319	1334 span.textContent = "Add your post test page options here";
n@319	1335 this.popupBody.appendChild(span);
n@319	1336 var postHolder = document.createElement('div');
n@319	1337 postHolder.id = "preHolder";
n@319	1338 postHolder.style.width = "100%";
n@319	1339 postHolder.style.minHeight = "100px";
n@319	1340 postHolder.style.maxHeight = "220px";
n@319	1341 postHolder.style.overflow = 'auto';
n@319	1342 postHolder.style.border = "black";
n@319	1343 postHolder.style.borderStyle = "solid";
n@319	1344 postHolder.style.borderWidth = "1px";
n@319	1345 this.popupBody.appendChild(postHolder);
n@319	1346 var postHeaderHolder = document.createElement('div');
n@319	1347 postHeaderHolder.style.width = "456px";
n@319	1348 postHeaderHolder.style.height= "20px";
n@319	1349 postHeaderHolder.style.margin= "2px";
n@319	1350 postHeaderHolder.style.borderBottom = "#DDD";
n@319	1351 postHeaderHolder.style.borderBottomWidth = "1px";
n@319	1352 postHeaderHolder.style.borderBottomStyle = "solid";
n@319	1353 var mvH = document.createElement('div');
n@319	1354 mvH.className = "dndheaderelement";
n@319	1355 mvH.style.width = "50px";
n@319	1356 var text = document.createElement('span');
n@319	1357 text.textContent = "Order";
n@319	1358 mvH.appendChild(text);
n@319	1359 postHeaderHolder.appendChild(mvH);
n@319	1360 var idH = document.createElement('div');
n@319	1361 idH.className = "dndheaderelement";
n@319	1362 idH.style.width = "150px";
n@319	1363 text = document.createElement('span');
n@319	1364 text.textContent = "ID";
n@319	1365 idH.appendChild(text);
n@319	1366 postHeaderHolder.appendChild(idH);
n@319	1367 var tH = document.createElement('div');
n@319	1368 tH.className = "dndheaderelement";
n@319	1369 tH.style.width = "150px";
n@319	1370 text = document.createElement('span');
n@319	1371 text.textContent = "Type";
n@319	1372 tH.appendChild(text);
n@319	1373 postHeaderHolder.appendChild(tH);
n@319	1374 var editH = document.createElement('div');
n@319	1375 editH.className = "dndheaderelement";
n@319	1376 editH.style.width = "50px";
n@319	1377 text = document.createElement('span');
n@319	1378 text.textContent = "Edit";
n@319	1379 editH.appendChild(text);
n@319	1380 postHeaderHolder.appendChild(editH);
n@319	1381 var deleteH = document.createElement('div');
n@319	1382 deleteH.className = "dndheaderelement";
n@319	1383 deleteH.style.width = "50px";
n@319	1384 text = document.createElement('span');
n@319	1385 text.textContent = "Delete";
n@319	1386 deleteH.appendChild(text);
n@319	1387 postHeaderHolder.appendChild(deleteH);
n@319	1388 postHolder.appendChild(postHeaderHolder);
n@319	1389
n@319	1390 for (var i=0; i<specificationNode.postTest.options.length; i++)
n@319	1391 {
n@319	1392 var optionNode = specificationNode.postTest.options[i];
n@319	1393 var entry = document.createElement('div');
n@319	1394 entry.style.width = "456px";
n@319	1395 entry.style.height= "20px";
n@319	1396 entry.style.margin= "2px";
n@319	1397 entry.style.borderBottom = "#DDD";
n@319	1398 entry.style.borderBottomWidth = "1px";
n@319	1399 entry.style.borderBottomStyle = "solid";
n@319	1400 entry.setAttribute("node-id",i);
n@319	1401 var node = specificationNode.postTest.options[i];
n@319	1402 var mvH = document.createElement('div');
n@319	1403 mvH.className = "dndheaderelement";
n@319	1404 mvH.style.width = "50px";
n@319	1405 var mvup = document.createElement("button");
n@319	1406 mvup.textContent = "Up";
n@319	1407 mvup.style.width = "25px";
n@319	1408 mvup.style.padding = "1px 0px";
n@319	1409 mvup.onclick = function()
n@319	1410 {
n@319	1411 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
n@319	1412 if (i != 0)
n@319	1413 {
n@319	1414 var next = specificationNode.postTest.options[i-1];
n@319	1415 var cur = specificationNode.postTest.options[i];
n@319	1416 specificationNode.postTest.options[i-1] = cur;
n@319	1417 specificationNode.postTest.options[i] = next;
n@319	1418 popupInstance.state = 7;
n@319	1419 popupInstance.advanceState();
n@319	1420 }
n@319	1421 };
n@319	1422 mvH.appendChild(mvup);
n@319	1423 var mvdn = document.createElement("button");
n@319	1424 mvdn.textContent = "Dn";
n@319	1425 mvdn.style.width = "25px";
n@319	1426 mvdn.style.padding = "1px 0px";
n@319	1427 mvdn.onclick = function()
n@319	1428 {
n@319	1429 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
n@319	1430 if (i != specificationNode.postTest.options.length-1)
n@319	1431 {
n@319	1432 var next = specificationNode.postTest.options[i+1];
n@319	1433 var cur = specificationNode.postTest.options[i];
n@319	1434 specificationNode.postTest.options[i+1] = cur;
n@319	1435 specificationNode.postTest.options[i] = next;
n@319	1436 popupInstance.state = 7;
n@319	1437 popupInstance.advanceState();
n@319	1438 }
n@319	1439 };
n@319	1440 mvH.appendChild(mvdn);
n@319	1441 entry.appendChild(mvH);
n@319	1442 var idH = document.createElement('div');
n@319	1443 idH.className = "dndheaderelement";
n@319	1444 idH.style.width = "150px";
n@319	1445 if (optionNode.type != "statement")
n@319	1446 {
n@319	1447 var span = document.createElement('span');
n@319	1448 span.textContent = optionNode.id;
n@319	1449 idH.appendChild(span);
n@319	1450 }
n@319	1451 entry.appendChild(idH);
n@319	1452 var typeH = document.createElement('div');
n@319	1453 typeH.className = "dndheaderelement";
n@319	1454 typeH.style.width = "150px";
n@319	1455 var span = document.createElement('span');
n@319	1456 span.textContent = optionNode.type;
n@319	1457 typeH.appendChild(span);
n@319	1458 entry.appendChild(typeH);
n@319	1459 var editH = document.createElement('div');
n@319	1460 editH.className = "dndheaderelement";
n@319	1461 editH.style.width = "50px";
n@319	1462 var editButton = document.createElement("button");
n@319	1463 editButton.textContent = "Edit";
n@319	1464 editButton.style.width = "48px";
n@319	1465 editButton.style.padding = "1px 0px";
n@319	1466 editButton.onclick = function()
n@319	1467 {
n@319	1468 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
n@319	1469 popupInstance.dataTransfer = new function() {
n@319	1470 this.title = "Edit Test Node";
n@319	1471 this.parent = specificationNode.postTest;
n@319	1472 this.node = this.parent.options[i];
n@319	1473 this.previousState = 7;
n@319	1474 };
n@319	1475 popupInstance.state = 6;
n@319	1476 popupInstance.advanceState();
n@319	1477 };
n@319	1478 editH.appendChild(editButton);
n@319	1479 entry.appendChild(editH);
n@319	1480 var deleteH = document.createElement('div');
n@319	1481 deleteH.className = "dndheaderelement";
n@319	1482 deleteH.style.width = "50px";
n@319	1483 var deleteButton = document.createElement("button");
n@319	1484 deleteButton.textContent = "Del";
n@319	1485 deleteButton.style.width = "48px";
n@319	1486 deleteButton.style.padding = "1px 0px";
n@319	1487 deleteButton.onclick = function()
n@319	1488 {
n@319	1489 var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
n@319	1490 var j = i+1;
n@319	1491 while(j < specificationNode.postTest.options.length)
n@319	1492 {
n@319	1493 specificationNode.postTest.options[i] = specificationNode.postTest.options[j];
n@319	1494 j++;
n@319	1495 i++;
n@319	1496 }
n@319	1497 audioHolder.postTest.options.pop();
n@319	1498 popupInstance.state = 7;
n@319	1499 popupInstance.advanceState();
n@319	1500 };
n@319	1501 deleteH.appendChild(deleteButton);
n@319	1502 entry.appendChild(deleteH);
n@319	1503 postHolder.appendChild(entry);
n@319	1504 }
n@319	1505
n@319	1506 var entry = document.createElement('div');
n@319	1507 entry.style.width = "456px";
n@319	1508 entry.style.height= "20px";
n@319	1509 entry.style.margin= "2px";
n@319	1510 entry.style.borderBottom = "#DDD";
n@319	1511 entry.style.borderBottomWidth = "1px";
n@319	1512 entry.style.borderBottomStyle = "solid";
n@319	1513 entry.align = "center";
n@319	1514 var addPost = document.createElement('button');
n@319	1515 addPost.className = "popupButton";
n@319	1516 addPost.textContent = "Add New Entry";
n@319	1517 addPost.style.height = "20px";
n@319	1518 addPost.onclick = function()
n@319	1519 {
n@319	1520 popupInstance.dataTransfer = new function() {
n@319	1521 this.title = "New Pre Test Node";
n@319	1522 this.parent = specificationNode.postTest;
n@319	1523 this.node = null;
n@319	1524 this.previousState = 7;
n@319	1525 };
n@325	1526 popupInstance.state = 6;
n@319	1527 popupInstance.advanceState();
n@319	1528 };
n@319	1529 entry.appendChild(addPost);
n@319	1530 postHolder.appendChild(entry);
n@319	1531
n@319	1532 var button = document.createElement('button');
n@319	1533 button.id = 'submit';
n@319	1534 button.className = "popupButton";
n@319	1535 button.textContent = "Finish";
n@319	1536 button.onclick = function(event)
n@319	1537 {
n@319	1538 popupInstance.state = 8;
n@319	1539 popupInstance.advanceState();
n@319	1540 };
n@319	1541 this.popupFooter.appendChild(button);
n@319	1542 break;
n@319	1543 case 8:
n@319	1544 this.hidePopup();
n@319	1545 this.state = 0;
n@372	1546 SpecificationToHTML ();
n@162	1547 }
n@311	1548 this.state++;
n@311	1549 };
n@311	1550 };
n@311	1551
n@319	1552 function audioObject()
n@319	1553 {
n@319	1554 // Used to hold audio information in buffers for quick playback
n@319	1555 this.bufferObject;
n@319	1556 this.bufferNode = undefined;
n@319	1557 this.state = 0;
n@319	1558 this.gain = audioContext.createGain();
n@319	1559 this.gain.connect(audioContext.destination);
n@319	1560 this.include = true;
n@319	1561 this.id = undefined;
n@319	1562 this.file = undefined;
n@319	1563
n@319	1564 this.play = function()
n@319	1565 {
n@319	1566 if (this.bufferNode != undefined)
n@319	1567 {
n@319	1568 this.bufferNode.stop(0);
n@319	1569 this.bufferNode = undefined;
n@319	1570 }
n@319	1571 if(this.state == 1)
n@319	1572 {
n@319	1573 this.bufferNode = audioContext.createBufferSource();
n@319	1574 this.bufferNode.connect(this.gain);
n@319	1575 this.bufferNode.buffer = this.bufferObject;
n@319	1576 this.bufferNode.onended = function(event) {
n@319	1577 // Safari does not like using 'this' to reference the calling object!
n@319	1578 event.currentTarget = undefined;
n@319	1579 };
n@319	1580 this.bufferNode.start(audioContext.currentTime);
n@319	1581 this.bufferNode.stop(audioContext.currentTime+3);
n@319	1582 }
n@319	1583 };
n@319	1584
n@319	1585 this.constructTrack = function(file) {
n@319	1586 var reader = new FileReader();
n@319	1587 this.file = file;
n@319	1588 var audioObj = this;
n@319	1589 // Create callback to decode the data asynchronously
n@319	1590 reader.onloadend = function() {
n@319	1591 audioContext.decodeAudioData(reader.result, function(decodedData) {
n@319	1592 audioObj.bufferObject = decodedData;
n@319	1593 audioObj.state = 1;
n@319	1594 }, function(){});
n@319	1595 };
n@319	1596 reader.readAsArrayBuffer(file);
n@319	1597 };
n@319	1598 };
n@319	1599
n@311	1600 function Specification() {
n@311	1601 // Handles the decoding of the project specification XML into a simple JavaScript Object.
n@311	1602
n@311	1603 this.interfaceType = null;
n@311	1604 this.commonInterface = new function()
n@311	1605 {
n@311	1606 this.options = [];
n@311	1607 this.optionNode = function(input)
n@311	1608 {
n@311	1609 var name = input.getAttribute('name');
n@311	1610 this.type = name;
n@311	1611 if(this.type == "option")
n@311	1612 {
n@311	1613 this.name = input.id;
n@311	1614 } else if (this.type == "check")
n@311	1615 {
n@311	1616 this.check = input.id;
n@311	1617 }
n@311	1618 };
n@311	1619 };
n@311	1620 this.projectReturn = null;
n@311	1621 this.randomiseOrder = null;
n@311	1622 this.collectMetrics = null;
n@311	1623 this.testPages = null;
n@311	1624 this.audioHolders = [];
n@319	1625 this.metrics = [];
n@311	1626
n@372	1627 this.decode = function(projectXML) {
n@311	1628 // projectXML - DOM Parsed document
n@311	1629 this.projectXML = projectXML.childNodes[0];
n@311	1630 var setupNode = projectXML.getElementsByTagName('setup')[0];
n@311	1631 this.interfaceType = setupNode.getAttribute('interface');
n@311	1632 this.projectReturn = setupNode.getAttribute('projectReturn');
n@311	1633 this.testPages = setupNode.getAttribute('testPages');
n@311	1634 if (setupNode.getAttribute('randomiseOrder') == "true") {
n@311	1635 this.randomiseOrder = true;
n@311	1636 } else {this.randomiseOrder = false;}
n@311	1637 if (setupNode.getAttribute('collectMetrics') == "true") {
n@311	1638 this.collectMetrics = true;
n@311	1639 } else {this.collectMetrics = false;}
n@311	1640 if (isNaN(Number(this.testPages)) \|\| this.testPages == undefined)
n@311	1641 {
n@311	1642 this.testPages = null;
n@311	1643 } else {
n@311	1644 this.testPages = Number(this.testPages);
n@311	1645 if (this.testPages == 0) {this.testPages = null;}
n@162	1646 }
n@311	1647 var metricCollection = setupNode.getElementsByTagName('Metric');
n@162	1648
n@372	1649 var setupPreTestNode = setupNode.getElementsByTagName('PreTest');
n@372	1650 if (setupPreTestNode.length != 0)
n@372	1651 {
n@372	1652 setupPreTestNode = setupPreTestNode[0];
n@372	1653 this.preTest.construct(setupPreTestNode);
n@372	1654 }
n@372	1655
n@372	1656 var setupPostTestNode = setupNode.getElementsByTagName('PostTest');
n@372	1657 if (setupPostTestNode.length != 0)
n@372	1658 {
n@372	1659 setupPostTestNode = setupPostTestNode[0];
n@372	1660 this.postTest.construct(setupPostTestNode);
n@372	1661 }
n@163	1662
n@311	1663 if (metricCollection.length > 0) {
n@311	1664 metricCollection = metricCollection[0].getElementsByTagName('metricEnable');
n@311	1665 for (var i=0; i<metricCollection.length; i++) {
n@311	1666 this.metrics.push(new this.metricNode(metricCollection[i].textContent));
n@311	1667 }
n@172	1668 }
n@172	1669
n@311	1670 var commonInterfaceNode = setupNode.getElementsByTagName('interface');
n@311	1671 if (commonInterfaceNode.length > 0) {
n@311	1672 commonInterfaceNode = commonInterfaceNode[0];
n@311	1673 } else {
n@311	1674 commonInterfaceNode = undefined;
n@163	1675 }
n@163	1676
n@311	1677 this.commonInterface = new function() {
n@311	1678 this.OptionNode = function(child) {
n@311	1679 this.type = child.nodeName;
n@311	1680 if (this.type == 'option')
n@311	1681 {
n@311	1682 this.name = child.getAttribute('name');
n@311	1683 }
n@311	1684 else if (this.type == 'check') {
n@311	1685 this.check = child.getAttribute('name');
n@311	1686 if (this.check == 'scalerange') {
n@311	1687 this.min = child.getAttribute('min');
n@311	1688 this.max = child.getAttribute('max');
n@311	1689 if (this.min == null) {this.min = 1;}
n@311	1690 else if (Number(this.min) > 1 && this.min != null) {
n@311	1691 this.min = Number(this.min)/100;
n@311	1692 } else {
n@311	1693 this.min = Number(this.min);
n@311	1694 }
n@311	1695 if (this.max == null) {this.max = 0;}
n@311	1696 else if (Number(this.max) > 1 && this.max != null) {
n@311	1697 this.max = Number(this.max)/100;
n@311	1698 } else {
n@311	1699 this.max = Number(this.max);
n@311	1700 }
n@311	1701 }
n@311	1702 } else if (this.type == 'anchor' \|\| this.type == 'reference') {
n@311	1703 this.value = Number(child.textContent);
n@311	1704 this.enforce = child.getAttribute('enforce');
n@311	1705 if (this.enforce == 'true') {this.enforce = true;}
n@311	1706 else {this.enforce = false;}
n@311	1707 }
n@311	1708 };
n@311	1709 this.options = [];
n@311	1710 if (commonInterfaceNode != undefined) {
n@311	1711 var child = commonInterfaceNode.firstElementChild;
n@311	1712 while (child != undefined) {
n@311	1713 this.options.push(new this.OptionNode(child));
n@311	1714 child = child.nextElementSibling;
n@311	1715 }
n@311	1716 }
n@311	1717 };
n@311	1718
n@311	1719 var audioHolders = projectXML.getElementsByTagName('audioHolder');
n@311	1720 for (var i=0; i<audioHolders.length; i++) {
n@372	1721 var node = new this.audioHolderNode(this);
n@372	1722 node.decode(this,audioHolders[i]);
n@372	1723 this.audioHolders.push(node);
n@166	1724 }
n@167	1725
n@311	1726 // New check if we need to randomise the test order
n@311	1727 if (this.randomiseOrder)
n@311	1728 {
n@311	1729 this.audioHolders = randomiseOrder(this.audioHolders);
n@311	1730 for (var i=0; i<this.audioHolders.length; i++)
n@311	1731 {
n@311	1732 this.audioHolders[i].presentedId = i;
n@311	1733 }
n@167	1734 }
n@311	1735
n@311	1736 if (this.testPages != null \|\| this.testPages != undefined)
n@311	1737 {
n@311	1738 if (this.testPages > audioHolders.length)
n@311	1739 {
n@311	1740 console.log('Warning: You have specified '+audioHolders.length+' tests but requested '+this.testPages+' be completed!');
n@311	1741 this.testPages = audioHolders.length;
n@311	1742 }
n@311	1743 var aH = this.audioHolders;
n@311	1744 this.audioHolders = [];
n@311	1745 for (var i=0; i<this.testPages; i++)
n@311	1746 {
n@311	1747 this.audioHolders.push(aH[i]);
n@162	1748 }
n@162	1749 }
n@311	1750 };
n@163	1751
n@368	1752 this.encode = function()
n@368	1753 {
n@369	1754 var root = document.implementation.createDocument(null,"BrowserEvalProjectDocument");
n@368	1755 // First get all the <setup> tag compiled
n@369	1756 var setupNode = root.createElement("setup");
n@368	1757 setupNode.setAttribute('interface',this.interfaceType);
n@368	1758 setupNode.setAttribute('projectReturn',this.projectReturn);
n@368	1759 setupNode.setAttribute('randomiseOrder',this.randomiseOrder);
n@368	1760 setupNode.setAttribute('collectMetrics',this.collectMetrics);
n@368	1761 setupNode.setAttribute('testPages',this.testPages);
n@368	1762
n@369	1763 var setupPreTest = root.createElement("PreTest");
n@368	1764 for (var i=0; i<this.preTest.options.length; i++)
n@368	1765 {
n@372	1766 setupPreTest.appendChild(this.preTest.options[i].exportXML(root));
n@368	1767 }
n@368	1768
n@369	1769 var setupPostTest = root.createElement("PostTest");
n@372	1770 for (var i=0; i<this.postTest.options.length; i++)
n@368	1771 {
n@372	1772 setupPostTest.appendChild(this.postTest.options[i].exportXML(root));
n@368	1773 }
n@368	1774
n@368	1775 setupNode.appendChild(setupPreTest);
n@368	1776 setupNode.appendChild(setupPostTest);
n@368	1777
n@368	1778 // <Metric> tag
n@369	1779 var Metric = root.createElement("Metric");
n@368	1780 for (var i=0; i<this.metrics.length; i++)
n@368	1781 {
n@372	1782 var metricEnable = root.createElement("metricEnable");
n@368	1783 metricEnable.textContent = this.metrics[i].enabled;
n@368	1784 Metric.appendChild(metricEnable);
n@368	1785 }
n@368	1786 setupNode.appendChild(Metric);
n@368	1787
n@368	1788 // <interface> tag
n@369	1789 var CommonInterface = root.createElement("interface");
n@368	1790 for (var i=0; i<this.commonInterface.options.length; i++)
n@368	1791 {
n@368	1792 var CIObj = this.commonInterface.options[i];
n@372	1793 var CINode = root.createElement(CIObj.type);
n@368	1794 if (CIObj.type == "check") {CINode.setAttribute("name",CIObj.check);}
n@368	1795 else {CINode.setAttribute("name",CIObj.name);}
n@368	1796 CommonInterface.appendChild(CINode);
n@368	1797 }
n@368	1798 setupNode.appendChild(CommonInterface);
n@368	1799
n@369	1800 root.getElementsByTagName("BrowserEvalProjectDocument")[0].appendChild(setupNode);
n@368	1801 // Time for the <audioHolder> tags
n@368	1802 for (var ahIndex = 0; ahIndex < this.audioHolders.length; ahIndex++)
n@368	1803 {
n@372	1804 var node = this.audioHolders[ahIndex].encode(root);
n@372	1805 root.getElementsByTagName("BrowserEvalProjectDocument")[0].appendChild(node);
n@368	1806 }
n@368	1807 return root;
n@368	1808 };
n@368	1809
n@319	1810 this.prepostNode = function(type) {
n@311	1811 this.type = type;
n@311	1812 this.options = [];
n@311	1813
n@319	1814 this.OptionNode = function() {
n@311	1815
n@319	1816 this.childOption = function() {
n@311	1817 this.type = 'option';
n@372	1818 this.id = null;
n@372	1819 this.name = undefined;
n@372	1820 this.text = null;
n@311	1821 };
n@311	1822
n@319	1823 this.type = undefined;
n@319	1824 this.id = undefined;
n@319	1825 this.mandatory = undefined;
n@319	1826 this.question = undefined;
n@319	1827 this.statement = undefined;
n@319	1828 this.boxsize = undefined;
n@319	1829 this.options = [];
n@319	1830 this.min = undefined;
n@319	1831 this.max = undefined;
n@319	1832 this.step = undefined;
n@319	1833
n@372	1834 this.decode = function(child)
n@372	1835 {
n@372	1836 this.type = child.nodeName;
n@372	1837 if (child.nodeName == "question") {
n@372	1838 this.id = child.id;
n@372	1839 this.mandatory;
n@372	1840 if (child.getAttribute('mandatory') == "true") {this.mandatory = true;}
n@372	1841 else {this.mandatory = false;}
n@372	1842 this.question = child.textContent;
n@372	1843 if (child.getAttribute('boxsize') == null) {
n@372	1844 this.boxsize = 'normal';
n@372	1845 } else {
n@372	1846 this.boxsize = child.getAttribute('boxsize');
n@372	1847 }
n@372	1848 } else if (child.nodeName == "statement") {
n@372	1849 this.statement = child.textContent;
n@372	1850 } else if (child.nodeName == "checkbox" \|\| child.nodeName == "radio") {
n@372	1851 var element = child.firstElementChild;
n@372	1852 this.id = child.id;
n@372	1853 if (element == null) {
n@372	1854 console.log('Malformed' +child.nodeName+ 'entry');
n@372	1855 this.statement = 'Malformed' +child.nodeName+ 'entry';
n@372	1856 this.type = 'statement';
n@372	1857 } else {
n@372	1858 this.options = [];
n@372	1859 while (element != null) {
n@372	1860 if (element.nodeName == 'statement' && this.statement == undefined){
n@372	1861 this.statement = element.textContent;
n@372	1862 } else if (element.nodeName == 'option') {
n@372	1863 var node = new this.childOption();
n@372	1864 node.id = element.id;
n@372	1865 node.name = element.getAttribute('name');
n@372	1866 node.text = element.textContent;
n@372	1867 this.options.push(node);
n@372	1868 }
n@372	1869 element = element.nextElementSibling;
n@372	1870 }
n@372	1871 }
n@372	1872 } else if (child.nodeName == "number") {
n@372	1873 this.statement = child.textContent;
n@372	1874 this.id = child.id;
n@372	1875 this.min = child.getAttribute('min');
n@372	1876 this.max = child.getAttribute('max');
n@372	1877 this.step = child.getAttribute('step');
n@372	1878 }
n@372	1879 };
n@372	1880
n@369	1881 this.exportXML = function(root)
n@368	1882 {
n@369	1883 var node = root.createElement(this.type);
n@368	1884 switch(this.type)
n@368	1885 {
n@368	1886 case "statement":
n@368	1887 node.textContent = this.statement;
n@368	1888 break;
n@368	1889 case "question":
n@368	1890 node.id = this.id;
n@368	1891 node.setAttribute("mandatory",this.mandatory);
n@368	1892 node.setAttribute("boxsize",this.boxsize);
n@368	1893 node.textContent = this.question;
n@368	1894 break;
n@368	1895 case "number":
n@368	1896 node.id = this.id;
n@368	1897 node.setAttribute("mandatory",this.mandatory);
n@372	1898 node.setAttribute("min", this.min);
n@372	1899 node.setAttribute("max", this.max);
n@372	1900 node.setAttribute("step", this.step);
n@368	1901 break;
n@368	1902 case "checkbox":
n@368	1903 node.id = this.id;
n@372	1904 var statement = root.createElement("statement");
n@368	1905 statement.textContent = this.statement;
n@368	1906 node.appendChild(statement);
n@368	1907 for (var i=0; i<this.options.length; i++)
n@368	1908 {
n@372	1909 var option = this.options[i];
n@372	1910 var optionNode = root.createElement("option");
n@368	1911 optionNode.id = option.id;
n@368	1912 optionNode.textContent = option.text;
n@372	1913 node.appendChild(optionNode);
n@368	1914 }
n@368	1915 break;
n@368	1916 case "radio":
n@368	1917 node.id = this.id;
n@372	1918 var statement = root.createElement("statement");
n@368	1919 statement.textContent = this.statement;
n@368	1920 node.appendChild(statement);
n@368	1921 for (var i=0; i<this.options.length; i++)
n@368	1922 {
n@372	1923 var option = this.options[i];
n@372	1924 var optionNode = root.createElement("option");
n@372	1925 optionNode.setAttribute("name",option.name);
n@368	1926 optionNode.textContent = option.text;
n@372	1927 node.appendChild(optionNode);
n@368	1928 }
n@368	1929 break;
n@368	1930 }
n@368	1931 return node;
n@368	1932 };
n@311	1933 };
n@372	1934 this.construct = function(Collection)
n@372	1935 {
n@372	1936 if (Collection.childElementCount != 0) {
n@372	1937 var child = Collection.firstElementChild;
n@372	1938 var node = new this.OptionNode();
n@372	1939 node.decode(child);
n@372	1940 this.options.push(node);
n@372	1941 while (child.nextElementSibling != null) {
n@372	1942 child = child.nextElementSibling;
n@372	1943 node = new this.OptionNode();
n@372	1944 node.decode(child);
n@372	1945 this.options.push(node);
n@372	1946 }
n@372	1947 }
n@372	1948 };
n@172	1949 };
n@372	1950 this.preTest = new this.prepostNode("pretest");
n@372	1951 this.postTest = new this.prepostNode("posttest");
n@172	1952
n@311	1953 this.metricNode = function(name) {
n@311	1954 this.enabled = name;
n@311	1955 };
n@172	1956
n@319	1957 this.audioHolderNode = function(parent) {
n@311	1958 this.type = 'audioHolder';
n@319	1959 this.presentedId = undefined;
n@319	1960 this.id = undefined;
n@319	1961 this.hostURL = undefined;
n@319	1962 this.sampleRate = undefined;
n@319	1963 this.randomiseOrder = undefined;
n@319	1964 this.loop = undefined;
n@319	1965 this.elementComments = undefined;
n@372	1966 this.outsideReference = null;
n@372	1967 this.preTest = new parent.prepostNode("pretest");
n@372	1968 this.postTest = new parent.prepostNode("pretest");
n@319	1969 this.interfaces = [];
n@319	1970 this.commentBoxPrefix = "Comment on track";
n@319	1971 this.audioElements = [];
n@319	1972 this.commentQuestions = [];
n@319	1973
n@372	1974 this.decode = function(parent,xml)
n@372	1975 {
n@372	1976 this.presentedId = parent.audioHolders.length;
n@372	1977 this.id = xml.id;
n@372	1978 this.hostURL = xml.getAttribute('hostURL');
n@372	1979 this.sampleRate = xml.getAttribute('sampleRate');
n@372	1980 if (xml.getAttribute('randomiseOrder') == "true") {this.randomiseOrder = true;}
n@372	1981 else {this.randomiseOrder = false;}
n@372	1982 this.repeatCount = xml.getAttribute('repeatCount');
n@372	1983 if (xml.getAttribute('loop') == 'true') {this.loop = true;}
n@372	1984 else {this.loop == false;}
n@372	1985 if (xml.getAttribute('elementComments') == "true") {this.elementComments = true;}
n@372	1986 else {this.elementComments = false;}
n@372	1987
n@372	1988 var setupPreTestNode = xml.getElementsByTagName('PreTest');
n@372	1989 if (setupPreTestNode.length != 0)
n@372	1990 {
n@372	1991 setupPreTestNode = setupPreTestNode[0];
n@372	1992 this.preTest.construct(setupPreTestNode);
n@372	1993 }
n@372	1994
n@372	1995 var setupPostTestNode = xml.getElementsByTagName('PostTest');
n@372	1996 if (setupPostTestNode.length != 0)
n@372	1997 {
n@372	1998 setupPostTestNode = setupPostTestNode[0];
n@372	1999 this.postTest.construct(setupPostTestNode);
n@372	2000 }
n@372	2001
n@372	2002 var interfaceDOM = xml.getElementsByTagName('interface');
n@372	2003 for (var i=0; i<interfaceDOM.length; i++) {
n@372	2004 var node = new this.interfaceNode();
n@372	2005 node.decode(interfaceDOM[i]);
n@372	2006 this.interfaces.push(node);
n@372	2007 }
n@372	2008 this.commentBoxPrefix = xml.getElementsByTagName('commentBoxPrefix');
n@372	2009 if (this.commentBoxPrefix.length != 0) {
n@372	2010 this.commentBoxPrefix = this.commentBoxPrefix[0].textContent;
n@372	2011 } else {
n@372	2012 this.commentBoxPrefix = "Comment on track";
n@372	2013 }
n@372	2014 var audioElementsDOM = xml.getElementsByTagName('audioElements');
n@372	2015 for (var i=0; i<audioElementsDOM.length; i++) {
n@372	2016 var node = new this.audioElementNode();
n@372	2017 if (audioElementsDOM[i].getAttribute('type') == 'outsidereference') {
n@372	2018 if (this.outsideReference == null) {
n@372	2019 this.outsideReference = node.decode(this,audioElementsDOM[i]);
n@372	2020 } else {
n@372	2021 console.log('Error only one audioelement can be of type outsidereference per audioholder');
n@372	2022 node.decode(this,audioElementsDOM[i]);
n@372	2023 this.audioElements.push(node);
n@372	2024 console.log('Element id '+audioElementsDOM[i].id+' made into normal node');
n@372	2025 }
n@372	2026 } else {
n@372	2027 node.decode(this,audioElementsDOM[i]);
n@372	2028 this.audioElements.push(node);
n@372	2029 }
n@372	2030 }
n@372	2031
n@372	2032 var commentQuestionsDOM = xml.getElementsByTagName('CommentQuestion');
n@372	2033 for (var i=0; i<commentQuestionsDOM.length; i++) {
n@372	2034 var node = new this.commentQuestionNode();
n@372	2035 node.decode(commentQuestionsDOM[i]);
n@372	2036 this.commentQuestions.push(node);
n@311	2037 }
n@311	2038 };
n@311	2039
n@372	2040 this.encode = function(root)
n@372	2041 {
n@372	2042 var AHNode = root.createElement("audioHolder");
n@372	2043 AHNode.id = this.id;
n@372	2044 AHNode.setAttribute("hostURL",this.hostURL);
n@372	2045 AHNode.setAttribute("sampleRate",this.sampleRate);
n@372	2046 AHNode.setAttribute("randomiseOrder",this.randomiseOrder);
n@372	2047 AHNode.setAttribute("repeatCount",this.repeatCount);
n@372	2048 AHNode.setAttribute("loop",this.loop);
n@372	2049 AHNode.setAttribute("elementComments",this.elementComments);
n@372	2050
n@372	2051 for (var i=0; i<this.interfaces.length; i++)
n@372	2052 {
n@372	2053 AHNode.appendChild(this.interfaces[i].encode(root));
n@372	2054 }
n@372	2055
n@372	2056 for (var i=0; i<this.audioElements.length; i++) {
n@372	2057 AHNode.appendChild(this.audioElements[i].encode(root));
n@372	2058 }
n@372	2059 // Create <CommentQuestion>
n@372	2060 for (var i=0; i<this.commentQuestions.length; i++)
n@372	2061 {
n@372	2062 AHNode.appendChild(this.commentQuestions[i].exportXML(root));
n@372	2063 }
n@372	2064
n@372	2065 // Create <PreTest>
n@372	2066 var AHPreTest = root.createElement("PreTest");
n@372	2067 for (var i=0; i<this.preTest.options.length; i++)
n@372	2068 {
n@372	2069 AHPreTest.appendChild(this.preTest.options[i].exportXML(root));
n@372	2070 }
n@372	2071
n@372	2072 var AHPostTest = root.createElement("PostTest");
n@372	2073 for (var i=0; i<this.postTest.options.length; i++)
n@372	2074 {
n@372	2075 AHPostTest.appendChild(this.postTest.options[i].exportXML(root));
n@372	2076 }
n@372	2077 AHNode.appendChild(AHPreTest);
n@372	2078 AHNode.appendChild(AHPostTest);
n@372	2079 return AHNode;
n@372	2080 };
n@372	2081
n@372	2082 this.interfaceNode = function() {
n@372	2083 this.title = undefined;
n@372	2084 this.options = [];
n@372	2085 this.scale = [];
n@372	2086 this.decode = function(DOM)
n@372	2087 {
n@372	2088 var title = DOM.getElementsByTagName('title');
n@372	2089 if (title.length == 0) {this.title = null;}
n@372	2090 else {this.title = title[0].textContent;}
n@372	2091 this.options = parent.commonInterface.options;
n@372	2092 var scale = DOM.getElementsByTagName('scale');
n@372	2093 this.scale = [];
n@372	2094 for (var i=0; i<scale.length; i++) {
n@372	2095 var arr = [null, null];
n@372	2096 arr[0] = scale[i].getAttribute('position');
n@372	2097 arr[1] = scale[i].textContent;
n@372	2098 this.scale.push(arr);
n@372	2099 }
n@372	2100 };
n@372	2101 this.encode = function(root)
n@372	2102 {
n@372	2103 var node = root.createElement("interface");
n@372	2104 if (this.title != undefined)
n@372	2105 {
n@372	2106 var title = root.createElement("title");
n@372	2107 title.textContent = this.title;
n@372	2108 node.appendChild(title);
n@372	2109 }
n@372	2110 for (var i=0; i<this.options.length; i++)
n@372	2111 {
n@372	2112 var optionNode = root.createElement(this.options[i].type);
n@372	2113 if (this.options[i].type == "option")
n@372	2114 {
n@372	2115 optionNode.setAttribute("name",this.options[i].name);
n@372	2116 } else if (this.options[i].type == "check") {
n@372	2117 optionNode.setAttribute("check",this.options[i].check);
n@372	2118 } else if (this.options[i].type == "scalerange") {
n@372	2119 optionNode.setAttribute("min",this.options[i].min*100);
n@372	2120 optionNode.setAttribute("max",this.options[i].max*100);
n@372	2121 }
n@372	2122 node.appendChild(optionNode);
n@372	2123 }
n@372	2124 for (var i=0; i<this.scale.length; i++) {
n@372	2125 var scale = root.createElement("scale");
n@372	2126 scale.setAttribute("position",this.scale[i][0]);
n@372	2127 scale.textContent = this.scale[i][1];
n@372	2128 node.appendChild(scale);
n@372	2129 }
n@372	2130 return node;
n@372	2131 };
n@372	2132 };
n@372	2133
n@372	2134 this.audioElementNode = function() {
n@372	2135 this.url = null;
n@372	2136 this.id = null;
n@372	2137 this.parent = null;
n@319	2138 this.type = "normal";
n@372	2139 this.marker = false;
n@372	2140 this.enforce = false;
n@372	2141 this.decode = function(parent,xml)
n@372	2142 {
n@372	2143 this.url = xml.getAttribute('url');
n@372	2144 this.id = xml.id;
n@372	2145 this.parent = parent;
n@372	2146 this.type = xml.getAttribute('type');
n@372	2147 if (this.type == null) {this.type = "normal";}
n@372	2148 if (this.type == 'anchor') {this.anchor = true;}
n@372	2149 else {this.anchor = false;}
n@372	2150 if (this.type == 'reference') {this.reference = true;}
n@372	2151 else {this.reference = false;}
n@372	2152
n@372	2153 if (this.anchor == true \|\| this.reference == true)
n@372	2154 {
n@372	2155 this.marker = xml.getAttribute('marker');
n@372	2156 if (this.marker != undefined)
n@372	2157 {
n@372	2158 this.marker = Number(this.marker);
n@372	2159 if (isNaN(this.marker) == false)
n@372	2160 {
n@372	2161 if (this.marker > 1)
n@372	2162 { this.marker /= 100.0;}
n@372	2163 if (this.marker >= 0 && this.marker <= 1)
n@372	2164 {
n@372	2165 this.enforce = true;
n@372	2166 return;
n@372	2167 } else {
n@372	2168 console.log("ERROR - Marker of audioElement "+this.id+" is not between 0 and 1 (float) or 0 and 100 (integer)!");
n@372	2169 console.log("ERROR - Marker not enforced!");
n@372	2170 }
n@372	2171 } else {
n@372	2172 console.log("ERROR - Marker of audioElement "+this.id+" is not a number!");
n@372	2173 console.log("ERROR - Marker not enforced!");
n@372	2174 }
n@372	2175 }
n@372	2176 }
n@372	2177 };
n@372	2178 this.encode = function(root)
n@372	2179 {
n@372	2180 var AENode = root.createElement("audioElements");
n@372	2181 AENode.id = this.id;
n@372	2182 AENode.setAttribute("url",this.url);
n@372	2183 AENode.setAttribute("type",this.type);
n@372	2184 if (this.marker != false)
n@372	2185 {
n@372	2186 AENode.setAttribute("marker",this.marker*100);
n@372	2187 }
n@372	2188 return AENode;
n@372	2189 };
n@311	2190 };
n@311	2191
n@311	2192 this.commentQuestionNode = function(xml) {
n@372	2193 this.id = null;
n@372	2194 this.type = undefined;
n@372	2195 this.question = undefined;
n@372	2196 this.options = [];
n@372	2197 this.statement = undefined;
n@372	2198
n@372	2199 this.childOption = function() {
n@372	2200 this.type = 'option';
n@372	2201 this.name = null;
n@372	2202 this.text = null;
n@372	2203 };
n@369	2204 this.exportXML = function(root)
n@368	2205 {
n@369	2206 var CQNode = root.createElement("CommentQuestion");
n@368	2207 CQNode.id = this.id;
n@368	2208 CQNode.setAttribute("type",this.type);
n@368	2209 switch(this.type)
n@368	2210 {
n@368	2211 case "text":
n@368	2212 CQNode.textContent = this.question;
n@368	2213 break;
n@368	2214 case "radio" \|\| "checkbox":
n@372	2215 var statement = root.createElement("statement");
n@368	2216 statement.textContent = this.statement;
n@368	2217 CQNode.appendChild(statement);
n@368	2218 for (var i=0; i<this.options.length; i++)
n@368	2219 {
n@372	2220 var optionNode = root.createElement("option");
n@368	2221 optionNode.setAttribute("name",this.options[i].name);
n@368	2222 optionNode.textContent = this.options[i].text;
n@368	2223 CQNode.appendChild(optionNode);
n@368	2224 }
n@368	2225 break;
n@368	2226 }
n@368	2227 return CQNode;
n@368	2228 };
n@372	2229 this.decode = function(xml) {
n@372	2230 this.id = xml.id;
n@372	2231 if (xml.getAttribute('mandatory') == 'true') {this.mandatory = true;}
n@372	2232 else {this.mandatory = false;}
n@372	2233 this.type = xml.getAttribute('type');
n@372	2234 if (this.type == undefined) {this.type = 'text';}
n@372	2235 switch (this.type) {
n@372	2236 case 'text':
n@372	2237 this.question = xml.textContent;
n@372	2238 break;
n@372	2239 case 'radio':
n@372	2240 var child = xml.firstElementChild;
n@372	2241 this.options = [];
n@372	2242 while (child != undefined) {
n@372	2243 if (child.nodeName == 'statement' && this.statement == undefined) {
n@372	2244 this.statement = child.textContent;
n@372	2245 } else if (child.nodeName == 'option') {
n@372	2246 var node = new this.childOption();
n@372	2247 node.name = child.getAttribute('name');
n@372	2248 node.text = child.textContent;
n@372	2249 this.options.push(node);
n@372	2250 }
n@372	2251 child = child.nextElementSibling;
n@372	2252 }
n@372	2253 break;
n@372	2254 case 'checkbox':
n@372	2255 var child = xml.firstElementChild;
n@372	2256 this.options = [];
n@372	2257 while (child != undefined) {
n@372	2258 if (child.nodeName == 'statement' && this.statement == undefined) {
n@372	2259 this.statement = child.textContent;
n@372	2260 } else if (child.nodeName == 'option') {
n@372	2261 var node = new this.childOption();
n@372	2262 node.name = child.getAttribute('name');
n@372	2263 node.text = child.textContent;
n@372	2264 this.options.push(node);
n@372	2265 }
n@372	2266 child = child.nextElementSibling;
n@372	2267 }
n@372	2268 break;
n@372	2269 }
n@311	2270 };
n@311	2271 };
n@319	2272 };
n@319	2273 }
nicholas@352	2274
nicholas@352	2275 function createDeleteNodeButton(node)
nicholas@352	2276 {
nicholas@352	2277 var button = document.createElement("button");
nicholas@352	2278 button.textContent = "Delete";
nicholas@352	2279 button.onclick = function(event)
nicholas@352	2280 {
nicholas@352	2281 var node = event.target.parentElement;
nicholas@352	2282 node.parentElement.removeChild(node);
n@367	2283 };
nicholas@352	2284 return button;
nicholas@352	2285 }
nicholas@352	2286
n@372	2287 function SpecificationToHTML()
n@319	2288 {
n@319	2289 // Take information from Specification Node and format it into an HTML layout
n@319	2290 var destination = document.getElementById("content");
n@319	2291 // Setup Header Node
n@319	2292 var setupNode = document.createElement("div");
n@319	2293 setupNode.className = "topLevel";
n@319	2294 setupNode.name = "setup";
n@319	2295 var title = document.createElement("h2");
n@319	2296 title.textContent = "Setup";
n@319	2297 setupNode.appendChild(title);
n@319	2298 // Interface Type
n@319	2299 var div = document.createElement("div");
n@319	2300 div.name = "attributes";
n@319	2301 div.style.margin = "5px";
n@319	2302 var select = document.createElement("select");
n@319	2303 select.id = "interfaceSelect";
n@319	2304 select.style.margin = "5px";
n@319	2305 var option = document.createElement("option");
n@319	2306 option.value = "APE";
n@319	2307 option.textContent = "APE";
n@319	2308 select.appendChild(option);
n@319	2309 option = document.createElement("option");
n@319	2310 option.value = "MUSHRA";
n@319	2311 option.textContent = "MUSHRA";
n@319	2312 select.appendChild(option);
n@319	2313 select.value = specificationNode.interfaceType;
n@367	2314 select.onchange = function(event)
n@367	2315 {
n@367	2316 specificationNode.interfaceType = event.currentTarget.value;
n@367	2317 };
n@319	2318 var span = document.createElement("span");
n@319	2319 span.textContent = "Interface Type";
n@319	2320 div.appendChild(span);
n@319	2321 div.appendChild(select);
n@319	2322 // Project Return Attribute
n@319	2323 span = document.createElement("span");
n@319	2324 span.style.margin = "5px";
n@319	2325 span.textContent = "Project Return";
n@319	2326 var input = document.createElement("input");
n@319	2327 input.value = specificationNode.projectReturn;
n@319	2328 input.id = "projectReturn";
n@319	2329 input.style.margin = "5px";
n@367	2330 input.onchange = function(event) {
n@367	2331 specificationNode.projectReturn = event.currentTarget.value;
n@367	2332 };
n@319	2333 div.appendChild(span);
n@319	2334 div.appendChild(input);
n@319	2335 // Randomise Order
n@319	2336 span = document.createElement("span");
n@319	2337 span.textContent = "Randomise Order";
n@319	2338 input = document.createElement("input");
n@319	2339 input.id = "randomiseOrder";
n@319	2340 input.style.margin = "5px";
n@319	2341 input.type = "checkbox";
n@367	2342 input.checked = specificationNode.randomiseOrder;
n@367	2343 input.onchange = function(event) {
n@367	2344 specificationNode.randomiseOrder = event.currentTarget.checked;
n@367	2345 };
n@319	2346 div.appendChild(span);
n@319	2347 div.appendChild(input);
n@319	2348 setupNode.appendChild(div);
n@319	2349
n@319	2350 // Now create the common Interface Node
n@319	2351 var commonInterface = document.createElement("div");
n@319	2352 commonInterface.id = "interface";
n@319	2353 commonInterface.className = "SecondLevel";
n@319	2354 var title = document.createElement("h3");
n@319	2355 title.textContent = "Common Interface";
n@319	2356 commonInterface.appendChild(title);
n@319	2357 var div = document.createElement("div");
n@319	2358 div.name = "attributes";
n@319	2359 var interfaceOptions;
n@319	2360 var interfaceChecks;
n@319	2361 switch(select.value)
n@319	2362 {
n@319	2363 case "APE":
n@319	2364 interfaceOptions = APEInterfaceOptions;
n@319	2365 interfaceChecks = APEInterfaceChecks;
n@319	2366 break;
n@319	2367 case "MUSHRA":
n@319	2368 interfaceOptions = MUSHRAInterfaceOptions;
n@319	2369 interfaceChecks = MUSHRAInterfaceChecks;
n@319	2370 break;
n@319	2371 }
n@319	2372 for (var i=0; i<interfaceOptions[0].length; i++)
n@319	2373 {
n@319	2374 var span = document.createElement("span");
n@319	2375 span.textContent = interfaceOptions[1][i];
n@319	2376 var input = document.createElement("input");
n@319	2377 input.type = "checkbox";
n@319	2378 input.id = interfaceOptions[0][i];
n@367	2379 input.setAttribute("name", "option");
n@319	2380 div.appendChild(input);
n@319	2381 div.appendChild(span);
n@319	2382 commonInterface.appendChild(div);
n@319	2383 for (var j=0; j<specificationNode.commonInterface.options.length; j++)
n@319	2384 {
n@319	2385 if (specificationNode.commonInterface.options[j].name == interfaceOptions[0][i])
n@319	2386 {
n@319	2387 input.checked = true;
n@319	2388 break;
n@319	2389 }
n@319	2390 }
n@367	2391 input.onchange = function(event) {
n@367	2392 var id = event.currentTarget.id;
n@367	2393 if (event.currentTarget.checked) {
n@367	2394 specificationNode.commonInterface.options.push(new specificationNode.commonInterface.optionNode(event.currentTarget));
n@367	2395 } else {
n@367	2396 for (var j=0; j<specificationNode.commonInterface.options.length; j++)
n@367	2397 {
n@367	2398 if (specificationNode.commonInterface.options[j].name == event.currentTarget.id)
n@367	2399 {
n@367	2400 specificationNode.commonInterface.options.splice(j,1);
n@367	2401 break;
n@367	2402 }
n@367	2403 }
n@367	2404 }
n@367	2405 };
n@319	2406 }
n@319	2407 for (var i=0; i<interfaceChecks[0].length; i++)
n@319	2408 {
n@319	2409 var span = document.createElement("span");
n@319	2410 span.textContent = interfaceChecks[1][i];
n@319	2411 var input = document.createElement("input");
n@319	2412 input.type = "checkbox";
n@319	2413 input.id = interfaceChecks[0][i];
n@367	2414 input.setAttribute("name", "check");
n@319	2415 div.appendChild(input);
n@319	2416 div.appendChild(span);
n@319	2417 commonInterface.appendChild(div);
n@319	2418 for (var j=0; j<specificationNode.commonInterface.options.length; j++)
n@319	2419 {
n@319	2420 if (specificationNode.commonInterface.options[j].check == interfaceChecks[0][i])
n@319	2421 {
n@319	2422 input.checked = true;
n@319	2423 break;
n@319	2424 }
n@319	2425 }
n@367	2426 input.onchange = function(event) {
n@367	2427 var id = event.currentTarget.id;
n@367	2428 if (event.currentTarget.checked) {
n@367	2429 specificationNode.commonInterface.options.push(new specificationNode.commonInterface.optionNode(event.currentTarget));
n@367	2430 } else {
n@367	2431 for (var j=0; j<specificationNode.commonInterface.options.length; j++)
n@367	2432 {
n@367	2433 if (specificationNode.commonInterface.options[j].name == event.currentTarget.id)
n@367	2434 {
n@367	2435 specificationNode.commonInterface.options.splice(j,1);
n@367	2436 break;
n@367	2437 }
n@367	2438 }
n@367	2439 }
n@367	2440 };
n@319	2441 }
n@319	2442 setupNode.appendChild(commonInterface);
n@319	2443 // Now the Metric Node
n@319	2444 var metrics = document.createElement("div");
n@319	2445 metrics.id = "metrics";
n@319	2446 metrics.className = "SecondLevel";
n@319	2447 var title = document.createElement("h3");
n@319	2448 title.textContent = "Metric Collections";
n@319	2449 metrics.appendChild(title);
n@319	2450 var div = document.createElement("div");
n@319	2451 div.name = "attributes";
n@319	2452 metrics.appendChild(div);
n@319	2453 var supportedMetrics;
n@319	2454 switch(select.value)
n@319	2455 {
n@319	2456 case "APE":
n@319	2457 supportedMetrics = APEInterfaceMetrics;
n@319	2458 break;
n@319	2459 case "MUSHRA":
n@319	2460 supportedMetrics = MUSHRAInterfaceMetrics;
n@319	2461 break;
n@319	2462 }
n@319	2463
n@319	2464 for (var i=0; i<supportedMetrics[0].length; i++)
n@319	2465 {
n@319	2466 var span = document.createElement("span");
n@319	2467 span.textContent = supportedMetrics[1][i];
n@319	2468 var input = document.createElement("input");
n@319	2469 input.type = "checkbox";
n@319	2470 input.id = supportedMetrics[0][i];
n@319	2471 div.appendChild(input);
n@319	2472 div.appendChild(span);
n@319	2473 for (var j=0; j<specificationNode.metrics.length; j++)
n@319	2474 {
n@319	2475 if (specificationNode.metrics[j].enabled == supportedMetrics[0][i])
n@319	2476 {
n@319	2477 input.checked = true;
n@319	2478 }
n@319	2479 }
n@367	2480 input.onchange = function(event)
n@367	2481 {
n@367	2482 if (event.currentTarget.checked) {
n@367	2483 specificationNode.metrics.push(new specificationNode.metricNode(event.currentTarget.id));
n@367	2484 } else {
n@367	2485 for (var j=0; j<specificationNode.metrics.length; j++)
n@367	2486 {
n@367	2487 if (specificationNode.metrics[j].enabled == event.currentTarget.id)
n@367	2488 {
n@367	2489 specificationNode.metrics.splice(j,1);
n@367	2490 break;
n@367	2491 }
n@367	2492 }
n@367	2493 }
n@367	2494 };
n@319	2495 }
n@319	2496
n@319	2497 setupNode.appendChild(metrics);
n@319	2498
n@319	2499 // Test Session Pre Test
n@319	2500 var preTest = document.createElement("div");
n@319	2501 preTest.id = "preTest";
n@319	2502 preTest.className = "SecondLevel";
n@319	2503 var title = document.createElement("h3");
n@319	2504 title.textContent = "Pre test Survey";
n@319	2505 preTest.appendChild(title);
n@319	2506 var div = document.createElement("div");
n@319	2507 div.name = "attributes";
n@319	2508 for (var j=0; j<specificationNode.preTest.options.length; j++)
n@319	2509 {
n@319	2510 var node = PPSurveyToHTML(specificationNode.preTest.options[j]);
n@319	2511 node.className = "SecondLevel";
n@319	2512 node.id = preTest.id+"-"+j;
n@367	2513 var del_button = document.createElement("button");
n@367	2514 del_button.textContent = "Delete";
n@367	2515 del_button.onclick = function(event) {
n@367	2516 var node = event.currentTarget.parentElement;
n@367	2517 var id = node.id.split("-")[1];
n@367	2518 specificationNode.preTest.options.splice(id,1);
n@367	2519 node.parentElement.removeChild(node);
n@367	2520 };
n@367	2521 node.appendChild(del_button);
n@319	2522 preTest.appendChild(node);
n@319	2523 }
n@319	2524 setupNode.appendChild(preTest);
n@319	2525
n@319	2526 // Test Session Post Test
n@319	2527 var postTest = document.createElement("div");
n@319	2528 postTest.id = "postTest";
n@319	2529 postTest.className = "SecondLevel";
n@319	2530 var title = document.createElement("h3");
n@319	2531 title.textContent = "Post test Survey";
n@319	2532 postTest.appendChild(title);
n@319	2533 var div = document.createElement("div");
n@319	2534 div.name = "attributes";
n@319	2535
n@319	2536 for (var j=0; j<specificationNode.postTest.options.length; j++)
n@319	2537 {
n@319	2538 var node = PPSurveyToHTML(specificationNode.postTest.options[j]);
n@319	2539 node.className = "SecondLevel";
n@319	2540 node.id = postTest.id+"-"+j;
n@367	2541 var del_button = document.createElement("button");
n@367	2542 del_button.textContent = "Delete";
n@367	2543 del_button.onclick = function(event) {
n@367	2544 var node = event.currentTarget.parentElement;
n@367	2545 var id = node.id.split("-")[1];
n@367	2546 specificationNode.postTest.options.splice(id,1);
n@367	2547 node.parentElement.removeChild(node);
n@367	2548 };
n@367	2549 node.appendChild(del_button);
n@319	2550 postTest.appendChild(node);
n@319	2551 }
n@319	2552
n@319	2553 setupNode.appendChild(postTest);
n@319	2554
n@319	2555 destination.appendChild(setupNode);
n@319	2556
n@319	2557 // Now we step through the AudioHolders
n@319	2558 for (var i=0; i<specificationNode.audioHolders.length; i++)
n@319	2559 {
n@319	2560 var aH = specificationNode.audioHolders[i];
n@319	2561 var aHTML = document.createElement("div");
n@319	2562 aHTML.name = "audioHolder";
n@367	2563 aHTML.id = "audioHolder-"+i;
n@319	2564 aHTML.className = "topLevel";
nicholas@352	2565 aHTML.appendChild(createDeleteNodeButton());
n@319	2566 destination.appendChild(aHTML);
n@319	2567 var title = document.createElement("h2");
n@319	2568 title.textContent = "Audio Holder "+aH.id;
n@319	2569 aHTML.appendChild(title);
n@319	2570 var attributes = document.createElement("div");
n@319	2571 attributes.name = "attributes";
n@319	2572 aHTML.appendChild(attributes);
n@319	2573 var text = document.createElement("span");
n@319	2574 text.textContent = "ID: ";
n@319	2575 var input = document.createElement("input");
n@319	2576 input.id = aHTML.id+"-id";
n@319	2577 input.value = aH.id;
n@319	2578 input.onchange = function()
n@319	2579 {
n@367	2580 var IDSplit = event.currentTarget.id.split('-');
n@367	2581 var aholderID = IDSplit[0]+"-"+IDSplit[1];
n@367	2582 var aholder = document.getElementById(aholderID);
n@367	2583 title = aholder.getElementsByTagName("h2")[0];
n@367	2584 title.textContent = "Audio Holder "+event.currentTarget.value;
n@367	2585 specificationNode.audioHolders[IDSplit[1]].id = event.currentTarget.value;
n@319	2586 };
n@319	2587 text.style.margin = "5px";
n@319	2588 input.style.margin = "5px";
n@319	2589 attributes.appendChild(text);
n@319	2590 attributes.appendChild(input);
n@319	2591 text = document.createElement("span");
n@319	2592 text.textContent = "Host URL: ";
n@319	2593 input = document.createElement("input");
n@319	2594 input.id = aHTML.id+"-hostURL";
n@319	2595 input.value = aH.hostURL;
n@367	2596 input.onchange = function()
n@367	2597 {
n@367	2598 var IDSplit = event.currentTarget.id.split('-');
n@367	2599 specificationNode.audioHolders[IDSplit[1]].hostURL = event.currentTarget.value;
n@367	2600 };
n@319	2601 text.style.margin = "5px";
n@319	2602 input.style.margin = "5px";
n@319	2603 attributes.appendChild(text);
n@319	2604 attributes.appendChild(input);
n@319	2605 text = document.createElement("span");
n@319	2606 text.textContent = "Loop Fragments: ";
n@319	2607 input = document.createElement("input");
n@319	2608 input.id = aHTML.id+"-loop";
n@319	2609 input.type = "checkbox";
n@319	2610 input.checked = aH.loop;
n@367	2611 input.onchange = function()
n@367	2612 {
n@367	2613 var IDSplit = event.currentTarget.id.split('-');
n@367	2614 specificationNode.audioHolders[IDSplit[1]].loop = event.currentTarget.checked;
n@367	2615 };
n@319	2616 text.style.margin = "5px";
n@319	2617 input.style.margin = "5px";
n@319	2618 attributes.appendChild(text);
n@319	2619 attributes.appendChild(input);
n@319	2620 text = document.createElement("span");
n@319	2621 text.textContent = "Randomise Order: ";
n@319	2622 input = document.createElement("input");
n@319	2623 input.id = aHTML.id+"-randomiseOrder";
n@319	2624 input.type = "checkbox";
n@319	2625 input.checked = aH.randomiseOrder;
n@367	2626 input.onchange = function()
n@367	2627 {
n@367	2628 var IDSplit = event.currentTarget.id.split('-');
n@367	2629 specificationNode.audioHolders[IDSplit[1]].randomiseOrder = event.currentTarget.checked;
n@367	2630 };
n@319	2631 text.style.margin = "5px";
n@319	2632 input.style.margin = "5px";
n@319	2633 attributes.appendChild(text);
n@319	2634 attributes.appendChild(input);
n@319	2635 text = document.createElement("span");
n@319	2636 text.textContent = "Show Fragment Comments";
n@319	2637 input = document.createElement("input");
n@319	2638 input.id = aHTML.id+"-elementComments";
n@319	2639 input.type = "checkbox";
n@319	2640 input.checked = aH.elementComments;
n@367	2641 input.onchange = function()
n@367	2642 {
n@367	2643 var IDSplit = event.currentTarget.id.split('-');
n@367	2644 specificationNode.audioHolders[IDSplit[1]].elementComments = event.currentTarget.checked;
n@367	2645 };
n@319	2646 text.style.margin = "5px";
n@319	2647 input.style.margin = "5px";
n@319	2648 attributes.appendChild(text);
n@319	2649 attributes.appendChild(input);
n@311	2650
n@319	2651 // Test Session Pre Test
n@319	2652 var preTest = document.createElement("div");
n@319	2653 preTest.id = aHTML.id+"-pretest";
n@319	2654 preTest.className = "SecondLevel";
n@319	2655 var title = document.createElement("h3");
n@319	2656 title.textContent = "Pre test Survey";
n@319	2657 preTest.appendChild(title);
n@319	2658 var div = document.createElement("div");
n@319	2659 div.name = "attributes";
n@311	2660
n@319	2661 for (var j=0; j<aH.preTest.options.length; j++)
n@319	2662 {
n@319	2663 var node = PPSurveyToHTML(aH.preTest.options[j]);
n@319	2664 node.className = "SecondLevel";
n@319	2665 node.id = preTest.id+"-"+j;
n@367	2666 var button_delete = document.createElement("button");
n@367	2667 button_delete.textContent = "Delete";
n@367	2668 button_delete.onclick = function(event)
n@367	2669 {
n@367	2670 var node = event.currentTarget.parentElement;
n@367	2671 var IDSplit = node.id.split("-");
n@367	2672 var preTest = specificationNode.audioHolders[IDSplit[1]].preTest;
n@367	2673 preTest.options.splice(IDSplit[3],1);
n@367	2674 node.parentElement.removeChild(node);
n@367	2675 };
n@367	2676 node.appendChild(button_delete);
n@319	2677 preTest.appendChild(node);
n@169	2678 }
n@311	2679
n@319	2680 aHTML.appendChild(preTest);
n@319	2681
n@319	2682 // Test Session Post Test
n@319	2683 var postTest = document.createElement("div");
n@319	2684 postTest.id = aHTML.id+"-postTest";
n@319	2685 postTest.className = "SecondLevel";
n@319	2686 var title = document.createElement("h3");
n@319	2687 title.textContent = "Post test Survey";
n@319	2688 postTest.appendChild(title);
n@319	2689 var div = document.createElement("div");
n@319	2690 div.name = "attributes";
n@319	2691
n@319	2692 for (var j=0; j<aH.postTest.options.length; j++)
n@319	2693 {
n@319	2694 var node = PPSurveyToHTML(aH.postTest.options[j]);
n@319	2695 node.className = "SecondLevel";
n@319	2696 node.id = postTest.id+"-"+j;
n@367	2697 var button_delete = document.createElement("button");
n@367	2698 button_delete.textContent = "Delete";
n@367	2699 button_delete.onclick = function(event)
n@367	2700 {
n@367	2701 var node = event.currentTarget.parentElement;
n@367	2702 var IDSplit = node.id.split("-");
n@367	2703 var postTest = specificationNode.audioHolders[IDSplit[1]].postTest;
n@367	2704 postTest.options.splice(IDSplit[3],1);
n@367	2705 node.parentElement.removeChild(node);
n@367	2706 };
n@367	2707 node.appendChild(button_delete);
n@319	2708 postTest.appendChild(node);
n@169	2709 }
n@169	2710
n@319	2711 aHTML.appendChild(postTest);
n@319	2712
n@319	2713 //Audio Elements
n@319	2714 var audioElems = document.createElement("div");
n@319	2715 audioElems.id = aHTML.id+"-audioElements";
n@319	2716 audioElems.className = "SecondLevel";
n@319	2717 var title = document.createElement("h3");
n@319	2718 title.textContent = "Audio Elements";
n@319	2719 audioElems.appendChild(title);
n@319	2720 for (var i=0; i<aH.audioElements.length; i++)
n@319	2721 {
n@319	2722 var entry = document.createElement("div");
n@319	2723 entry.className = "SecondLevel";
n@319	2724 entry.id = audioElems.id+"-"+aH.audioElements[i].id;
n@319	2725 var text = document.createElement("span");
n@319	2726 text.textContent = "ID:";
n@319	2727 var input = document.createElement("input");
n@319	2728 input.id = entry.id+"-id";
n@319	2729 input.value = aH.audioElements[i].id;
n@367	2730 input.onchange = function() {
n@367	2731 var IDSplit = event.currentTarget.id.split("-");
n@367	2732 var ahNode = specificationNode.audioHolders[IDSplit[1]];
n@367	2733 ahNode.audioElements[IDSplit[3]].id = event.currentTarget.value;
n@367	2734 };
n@319	2735 text.style.margin = "5px";
n@319	2736 input.style.margin = "5px";
n@319	2737 entry.appendChild(text);
n@319	2738 entry.appendChild(input);
n@319	2739 text = document.createElement("span");
n@319	2740 text.textContent = "URL:";
n@319	2741 input = document.createElement("input");
n@319	2742 input.id = entry.id+"-URL";
n@319	2743 input.value = aH.audioElements[i].url;
n@367	2744 input.onchange = function() {
n@367	2745 var IDSplit = event.currentTarget.id.split("-");
n@367	2746 var ahNode = specificationNode.audioHolders[IDSplit[1]];
n@367	2747 ahNode.audioElements[IDSplit[3]].url = event.currentTarget.value;
n@367	2748 };
n@319	2749 text.style.margin = "5px";
n@319	2750 input.style.margin = "5px";
n@319	2751 entry.appendChild(text);
n@319	2752 entry.appendChild(input);
n@367	2753 var button_delete = document.createElement("button");
n@367	2754 button_delete.textContent = "Delete";
n@367	2755 button_delete.onclick = function() {
n@367	2756 var node = event.currentTarget.parentElement;
n@367	2757 var IDSplit = node.id.split("-");
n@367	2758 var ahNode = specificationNode.audioHolders[IDSplit[1]];
n@367	2759 ahNode.audioElements.splice(IDSplit[3],1);
n@367	2760 node.parentElement.removeChild(node);
n@367	2761 };
n@367	2762 entry.appendChild(button_delete);
n@319	2763 audioElems.appendChild(entry);
n@311	2764 }
n@319	2765 aHTML.appendChild(audioElems);
n@319	2766 }
n@319	2767
n@319	2768 function PPSurveyToHTML(node)
n@319	2769 {
n@319	2770 var holder = document.createElement("div");
n@319	2771 var title = document.createElement("h4");
n@319	2772 holder.appendChild(title);
n@319	2773 var attributes = document.createElement("div");
n@319	2774 holder.appendChild(attributes);
n@319	2775 switch(node.type)
n@319	2776 {
n@319	2777 case "statement":
n@319	2778 title.textContent = "Statement";
n@319	2779 var tA = document.createElement("textarea");
n@319	2780 attributes.style.height = "150px";
n@319	2781 tA.style.width = "500px";
n@319	2782 tA.style.height = "100px";
n@319	2783 tA.value = node.statement;
n@319	2784 attributes.appendChild(tA);
n@319	2785 break;
n@319	2786 case "question":
n@319	2787 title.textContent = "Question";
n@319	2788 var text = document.createElement("span");
n@319	2789 text.textContent = "ID :";
n@319	2790 var input = document.createElement("input");
n@319	2791 input.name = "id";
n@319	2792 input.value = node.id;
n@319	2793 text.style.margin = "5px";
n@319	2794 input.style.margin = "5px";
n@319	2795 attributes.appendChild(text);
n@319	2796 attributes.appendChild(input);
n@319	2797 text = document.createElement("span");
n@319	2798 text.textContent = "Question";
n@319	2799 input = document.createElement("input");
n@319	2800 input.name = "question";
n@325	2801 input.style.width = "400px";
n@319	2802 input.value = node.question;
n@319	2803 text.style.margin = "5px";
n@319	2804 input.style.margin = "5px";
n@319	2805 attributes.appendChild(text);
n@319	2806 attributes.appendChild(input);
n@319	2807 text = document.createElement("span");
n@319	2808 text.textContent = "Mandatory";
n@319	2809 input = document.createElement("input");
n@319	2810 input.name = "mandatory";
n@319	2811 input.type = "checkbox";
n@319	2812 input.checked = node.mandatory;
n@319	2813 text.style.margin = "5px";
n@319	2814 input.style.margin = "5px";
n@319	2815 attributes.appendChild(text);
n@319	2816 attributes.appendChild(input);
n@325	2817 text = document.createElement("span");
n@325	2818 text.textContent = "Reply box size";
n@325	2819 input = document.createElement("select");
n@325	2820 input.name = "boxsize";
n@325	2821 var option = document.createElement("option");
n@325	2822 option.textContent = "Normal";
n@325	2823 option.value = "normal";
n@325	2824 input.appendChild(option);
n@325	2825 option = document.createElement("option");
n@325	2826 option.textContent = "Large";
n@325	2827 option.value = "large";
n@325	2828 input.appendChild(option);
n@325	2829 option = document.createElement("option");
n@325	2830 option.textContent = "Small";
n@325	2831 option.value = "small";
n@325	2832 input.appendChild(option);
n@325	2833 option = document.createElement("option");
n@325	2834 option.textContent = "Huge";
n@325	2835 option.value = "huge";
n@325	2836 input.appendChild(option);
n@325	2837 text.style.margin = "5px";
n@325	2838 input.style.margin = "5px";
n@325	2839 attributes.appendChild(text);
n@325	2840 attributes.appendChild(input);
n@325	2841 input.value = node.boxsize;
n@319	2842 break;
n@311	2843 }
n@319	2844 return holder;
n@319	2845 }
n@168	2846 }
n@368	2847 function exportToXML()
n@368	2848 {
n@368	2849 var xmlDoc = specificationNode.encode();
n@369	2850 var oSerializer = new XMLSerializer();
n@369	2851 xmlDoc = oSerializer.serializeToString(xmlDoc);
n@368	2852 var parent = document.createElement("div");
n@369	2853 var file = [xmlDoc];
n@368	2854 var bb = new Blob(file,{type : 'application/xml'});
n@368	2855 var dnlk = window.URL.createObjectURL(bb);
n@368	2856 var a = document.createElement("a");
n@368	2857 a.hidden = '';
n@368	2858 a.href = dnlk;
n@368	2859 a.download = "save.xml";
n@368	2860 a.textContent = "Save File";
n@368	2861
n@368	2862 popupInstance.showPopup();
n@368	2863 popupInstance.popupBody.innerHTML = null;
n@368	2864 var body = document.createElement("span");
n@368	2865 body.textContent = "Right click and save the file using the link below. Place this file in your WAET directory as 'project.xml' in the example_eval/ directory. Place your media files in the location specified by the Host URL entries. If you wish to review this XML or edit it, refresh this tool and drag your XML document into the page on the welcome screen.";
n@368	2866 popupInstance.popupBody.appendChild(body);
n@368	2867 popupInstance.popupBody.appendChild(a);
n@368	2868 popupInstance.popupTitle.innerHTML = "<span>Thank You</span>";
n@368	2869 }
n@157	2870 </script>
n@157	2871 <style>
n@311	2872 div.popup {
n@311	2873 width: 500px;
n@311	2874 position: absolute;
n@311	2875 height: 400px;
n@311	2876 background-color: #fff;
n@311	2877 border-radius: 10px;
n@311	2878 box-shadow: 0px 0px 50px #000;
n@311	2879 z-index: 2;
n@157	2880 }
n@311	2881
n@311	2882 button.popupButton {
n@311	2883 /* Button for popup window
n@311	2884 */
n@311	2885 min-width: 50px;
n@311	2886 height: 25px;
n@311	2887 position: relative;
n@311	2888 border-radius: 5px;
n@311	2889 border: #444;
n@311	2890 border-width: 1px;
n@311	2891 border-style: solid;
n@311	2892 background-color: #fff;
n@311	2893 }
n@311	2894
n@311	2895 div.dragndrop {
n@311	2896 margin-top: 10px;
n@311	2897 border:#000000;
n@311	2898 border-style: dashed;
n@157	2899 border-width: 2px;
n@157	2900 }
n@311	2901 div.dndheaderelement {
n@311	2902 float: left;
n@311	2903 height: 100%;
n@311	2904 border-right: #DDDDDD;
n@311	2905 border-right-width: 1px;
n@311	2906 border-right-style: solid;
n@157	2907 }
n@311	2908 div.dndheaderelement span{
n@311	2909 padding-left: 5px;
n@168	2910 }
n@319	2911
n@319	2912 div.topLevel {
n@319	2913 border: #000;
n@319	2914 border-style: solid;
n@319	2915 border-width: 5px;
n@319	2916 padding: 10px;
n@319	2917 margin: 10px;
n@319	2918 }
n@319	2919
n@319	2920 div.SecondLevel {
n@319	2921 border: #000;
n@319	2922 border-style: solid;
n@319	2923 border-width: 1px;
n@319	2924 padding: 10px;
n@319	2925 margin: 10px;
n@319	2926 }
n@157	2927 </style>
n@156	2928 </head>
n@156	2929
n@156	2930 <body>
n@367	2931 <div id="export">
n@369	2932 <button id="exportToXML" onclick="exportToXML();">Export XML</button>
n@367	2933 </div>
n@311	2934 <div id="content"></div>
n@156	2935 </body>
n@156	2936 </html>

Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 372:5ec4279bf846 Dev_main