Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 823:a0d7a64d8325

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