Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1402:1de4c0257fa4

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