Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 816:9c579fc05a09

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updating test create using questions
author Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
date Wed, 23 Sep 2015 11:42:11 +0100
parents
children bc6c35b0a49d
rev   line source
n@816 1 <!DOCTYPE html>
n@816 2 <html lang="en">
n@816 3 <head>
n@816 4 <meta charset="utf-8">
n@816 5
n@816 6 <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
n@816 7 Remove this if you use the .htaccess -->
n@816 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
n@816 9
n@816 10 <title>WAET: Test Creator</title>
n@816 11
n@816 12 <meta name="viewport" content="width=device-width; initial-scale=1.0">
n@816 13 <script type="text/javascript">
n@816 14
n@816 15 var APEInterfaceOptions = [["playhead","page-count"],["Show the playhead/scrubber bar", "Show test page count"]];
n@816 16 var APEInterfaceChecks = [["fragmentPlayed","fragmentFullPlayback","fragmentMoved","fragmentComments"],["All Fragments Played","All Fragments Played in entirety","All sliders moved","All fragments have comments"]];
n@816 17 var MUSHRAInterfaceOptions = [[],[]];
n@816 18 var MUSHRAInterfaceChecks = [["fragmentPlayed","fragmentMoved","fragmentComments"],["All Fragments Played","All sliders moved","All fragments have comments"]];
n@816 19 var popupInstance;
n@816 20 var specificationNode;
n@816 21 var audioContext;
n@816 22 window.onload = function()
n@816 23 {
n@816 24 var AudioContext = window.AudioContext || window.webkitAudioContext;
n@816 25 audioContext = new AudioContext;
n@816 26 popupInstance = new popup();
n@816 27 popupInstance.advanceState();
n@816 28 specificationNode = new Specification();
n@816 29 };
n@816 30
n@816 31 function popup()
n@816 32 {
n@816 33 var x = window.innerWidth;
n@816 34 var y = window.innerHeight;
n@816 35 this.popupHolder = document.createElement('div');
n@816 36 this.popupHolder.style.visibility = 'hidden';
n@816 37 this.popupContent = document.createElement('div');
n@816 38 this.popupTitle = document.createElement('div');
n@816 39 this.popupBody = document.createElement('div');
n@816 40 this.popupFooter = document.createElement('div');
n@816 41 this.popupTitleText = document.createElement('span');
n@816 42 this.popupTitle.appendChild(this.popupTitleText);
n@816 43
n@816 44 this.popupHolder.className = "popup";
n@816 45 this.popupHolder.style.left = (x-500)/2 +'px';
n@816 46 this.popupHolder.style.top = (y-400)/2 + 'px';
n@816 47 this.popupContent.style.padding = "20px";
n@816 48 this.popupHolder.appendChild(this.popupContent);
n@816 49
n@816 50 this.popupTitle.style.width = "100%";
n@816 51 this.popupTitle.style.height = "50px";
n@816 52 this.popupTitle.style.fontSize = "xx-large";
n@816 53 this.popupContent.appendChild(this.popupTitle);
n@816 54
n@816 55 this.popupBody.style.width = "100%";
n@816 56 this.popupBody.style.height = "280px";
n@816 57 this.popupContent.appendChild(this.popupBody);
n@816 58
n@816 59 this.popupFooter.style.width = "100%";
n@816 60 this.popupFooter.style.height = "30px";
n@816 61 this.popupContent.appendChild(this.popupFooter);
n@816 62 var body = document.getElementsByTagName('body')[0];
n@816 63 body.appendChild(this.popupHolder);
n@816 64
n@816 65 this.pageBlank = document.createElement('div');
n@816 66 body.appendChild(this.pageBlank);
n@816 67 this.pageBlank.style.width = "100%";
n@816 68 this.pageBlank.style.height = "100%";
n@816 69 this.pageBlank.style.position = "absolute";
n@816 70 this.pageBlank.style.left = "0px";
n@816 71 this.pageBlank.style.top = "0px";
n@816 72 this.pageBlank.style.backgroundColor = "rgba(0,0,0,0.5)";
n@816 73 this.pageBlank.style.visibility = 'hidden';
n@816 74
n@816 75 this.state = 0;
n@816 76
n@816 77 this.showPopup = function()
n@816 78 {
n@816 79 this.popupHolder.style.visibility = 'visible';
n@816 80 this.popupHolder.style.zIndex = "3";
n@816 81 this.pageBlank.style.visibility = 'visible';
n@816 82 this.pageBlank.style.zIndex = "2";
n@816 83 };
n@816 84
n@816 85 this.hidePopup = function()
n@816 86 {
n@816 87 this.popupHolder.style.visibility = 'hidden';
n@816 88 this.popupHolder.style.zIndex = "-1";
n@816 89 this.pageBlank.style.visibility = 'hidden';
n@816 90 this.pageBlank.style.zIndex = "-2";
n@816 91 };
n@816 92
n@816 93 this.init = function()
n@816 94 {
n@816 95 this.popupTitleText.textContent = "Welcome";
n@816 96 var text = document.createElement('span');
n@816 97 text.textContent = "Thank you for downloading the Web Audio Evaluation Toolbox. This page will help guide you through creating the documents required to run a test. If you have an existing XML file you wish to edit, please drag and drop it into the box below";
n@816 98 var dnd = document.createElement('div');
n@816 99 dnd.style.width = "100%";
n@816 100 dnd.style.height = "50px";
n@816 101 dnd.className = "dragndrop";
n@816 102 this.popupBody.appendChild(text);
n@816 103 this.popupBody.appendChild(dnd);
n@816 104 this.showPopup();
n@816 105
n@816 106 var button = document.createElement('button');
n@816 107 button.className = "popupButton";
n@816 108 button.textContent = "New File";
n@816 109 button.onclick = function(event) {
n@816 110 popupInstance.advanceState();
n@816 111 };
n@816 112 this.popupFooter.appendChild(button);
n@816 113 };
n@816 114
n@816 115 this.advanceState = function()
n@816 116 {
n@816 117 this.popupBody.innerHTML = null;
n@816 118 this.popupFooter.innerHTML = null;
n@816 119 this.popupTitleText.textContent = null;
n@816 120 switch(this.state)
n@816 121 {
n@816 122 case 0:
n@816 123 this.init();
n@816 124 break;
n@816 125 case 1:
n@816 126 this.popupTitleText.textContent = "Test Type";
n@816 127 var text = document.createElement("span");
n@816 128 text.textContent = "What type of test would you like to use. Currently APE (Audio Perceptual Evaluation) and MUSHRA style interfaces are available";
n@816 129 this.popupBody.appendChild(text);
n@816 130 var select = document.createElement("select");
n@816 131 select.id="interface-select";
n@816 132 var opt1 = document.createElement("option");
n@816 133 opt1.value = "APE";
n@816 134 opt1.textContent = "APE";
n@816 135 select.appendChild(opt1);
n@816 136 var opt2 = document.createElement("option");
n@816 137 opt2.value = "MUSHRA";
n@816 138 opt2.textContent = "MUSHRA";
n@816 139 select.appendChild(opt2);
n@816 140 this.popupBody.appendChild(select);
n@816 141
n@816 142 var button = document.createElement('button');
n@816 143 button.className = "popupButton";
n@816 144 button.textContent = "Submit";
n@816 145 button.onclick = function(event) {
n@816 146 var select = document.getElementById("interface-select");
n@816 147 specificationNode.interfaceType = select.value;
n@816 148 specificationNode.collectMetrics = true;
n@816 149 popupInstance.advanceState();
n@816 150 };
n@816 151 this.popupFooter.appendChild(button);
n@816 152 break;
n@816 153 case 2:
n@816 154 this.popupTitleText.textContent = "Test Options";
n@816 155 var holder = document.createElement('div');
n@816 156 holder.style.margin = "5px";
n@816 157 var checkbox = document.createElement('input');
n@816 158 checkbox.type = 'checkbox';
n@816 159 checkbox.id = "Randomise-Page";
n@816 160 var text = document.createElement('span');
n@816 161 text.textContent = "Randomise Page Order";
n@816 162 holder.appendChild(checkbox);
n@816 163 holder.appendChild(text);
n@816 164 this.popupBody.appendChild(holder);
n@816 165 switch(specificationNode.interfaceType)
n@816 166 {
n@816 167 case "APE":
n@816 168 for (var i=0; i<APEInterfaceOptions[0].length; i++)
n@816 169 {
n@816 170 holder = document.createElement('div');
n@816 171 holder.style.margin = "5px";
n@816 172 checkbox = document.createElement('input');
n@816 173 checkbox.type = 'checkbox';
n@816 174 checkbox.setAttribute("name","option");
n@816 175 checkbox.id = APEInterfaceOptions[0][i];
n@816 176 text = document.createElement('span');
n@816 177 text.textContent = APEInterfaceOptions[1][i];
n@816 178 holder.appendChild(checkbox);
n@816 179 holder.appendChild(text);
n@816 180 this.popupBody.appendChild(holder);
n@816 181 }
n@816 182 for (var i=0; i<APEInterfaceChecks[0].length; i++)
n@816 183 {
n@816 184 holder = document.createElement('div');
n@816 185 holder.style.margin = "5px";
n@816 186 checkbox = document.createElement('input');
n@816 187 checkbox.type = 'checkbox';
n@816 188 checkbox.setAttribute("name","check");
n@816 189 checkbox.id = APEInterfaceChecks[0][i];
n@816 190 text = document.createElement('span');
n@816 191 text.textContent = APEInterfaceChecks[1][i];
n@816 192 holder.appendChild(checkbox);
n@816 193 holder.appendChild(text);
n@816 194 this.popupBody.appendChild(holder);
n@816 195 }
n@816 196 break;
n@816 197 case "MUSHRA":
n@816 198 for (var i=0; i<MUSHRAInterfaceOptions[0].length; i++)
n@816 199 {
n@816 200 holder = document.createElement('div');
n@816 201 holder.style.margin = "5px";
n@816 202 checkbox = document.createElement('input');
n@816 203 checkbox.type = 'checkbox';
n@816 204 checkbox.setAttribute("name","option");
n@816 205 checkbox.id = MUSHRAInterfaceOptions[0][i];
n@816 206 text = document.createElement('span');
n@816 207 text.textContent = MUSHRAInterfaceOptions[1][i];
n@816 208 holder.appendChild(checkbox);
n@816 209 holder.appendChild(text);
n@816 210 this.popupBody.appendChild(holder);
n@816 211 }
n@816 212 for (var i=0; i<MUSHRAInterfaceChecks[0].length; i++)
n@816 213 {
n@816 214 holder = document.createElement('div');
n@816 215 holder.style.margin = "5px";
n@816 216 checkbox = document.createElement('input');
n@816 217 checkbox.type = 'checkbox';
n@816 218 checkbox.setAttribute("name","check");
n@816 219 checkbox.id = MUSHRAInterfaceChecks[0][i];
n@816 220 text = document.createElement('span');
n@816 221 text.textContent = MUSHRAInterfaceChecks[1][i];
n@816 222 holder.appendChild(checkbox);
n@816 223 holder.appendChild(text);
n@816 224 this.popupBody.appendChild(holder);
n@816 225 }
n@816 226 }
n@816 227 var button = document.createElement('button');
n@816 228 button.className = "popupButton";
n@816 229 button.textContent = "Submit";
n@816 230 button.onclick = function(event) {
n@816 231 var optHold = popupInstance.popupBody;
n@816 232 var opt = optHold.firstChild;
n@816 233 var input = opt.getElementsByTagName('input')[0];
n@816 234 specificationNode.randomiseOrder = input.checked;
n@816 235 while(opt.nextSibling != null)
n@816 236 {
n@816 237 opt = opt.nextSibling;
n@816 238 input = opt.getElementsByTagName('input')[0];
n@816 239 if (input.checked)
n@816 240 {
n@816 241 specificationNode.commonInterface.options.push(new specificationNode.commonInterface.optionNode(input));
n@816 242 }
n@816 243
n@816 244 }
n@816 245 popupInstance.advanceState();
n@816 246 };
n@816 247 this.popupFooter.appendChild(button);
n@816 248 break;
n@816 249 case 3:
n@816 250 this.popupTitleText.textContent = "Test Page";
n@816 251 var span = document.createElement('span');
n@816 252 span.textContent = "Drag and drop your audio files into the box below to add them to a test page";
n@816 253 this.popupBody.appendChild(span);
n@816 254 var dnd = document.createElement('div');
n@816 255 dnd.id = "audio-holder-drop";
n@816 256 dnd.style.width = "100%";
n@816 257 dnd.style.minHeight = "50px";
n@816 258 dnd.style.maxHeight = "220px";
n@816 259 dnd.style.overflow = 'auto';
n@816 260 dnd.className = "dragndrop";
n@816 261 dnd.ondragover = function(e) {
n@816 262 if(e.preventDefault) {e.preventDefault();}
n@816 263 return false;
n@816 264 };
n@816 265 dnd.ondragenter = function(e) {
n@816 266 if(e.preventDefault) {e.preventDefault();}
n@816 267 return false;
n@816 268 };
n@816 269 dnd.ondrop = function(e) {
n@816 270 if(e.preventDefault) {e.preventDefault();}
n@816 271 var dt = e.dataTransfer;
n@816 272 var body = document.getElementById("audio-holder-drop");
n@816 273 var files = dt.files;
n@816 274 for (var i = 0, f; f = files[i]; i++)
n@816 275 {
n@816 276 var dndHeader = document.createElement('div');
n@816 277 dndHeader.style.width = "100%";
n@816 278 dndHeader.style.height = "20px";
n@816 279 dndHeader.style.borderBottom = "#DDD";
n@816 280 dndHeader.style.borderBottomWidth = "1px";
n@816 281 dndHeader.style.borderBottomStyle = "solid";
n@816 282 var dndHInclude = document.createElement('div');
n@816 283 dndHInclude.style.width = "30px";
n@816 284 dndHInclude.className = "dndheaderelement";
n@816 285 var includeCheck = document.createElement('input');
n@816 286 includeCheck.type = "checkbox";
n@816 287 includeCheck.name = "include-check";
n@816 288 includeCheck.checked = true;
n@816 289 dndHInclude.appendChild(includeCheck);
n@816 290 dndHeader.appendChild(dndHInclude);
n@816 291 var dndHTitle = document.createElement('div');
n@816 292 dndHTitle.style.width = "180px";
n@816 293 dndHTitle.className = "dndheaderelement";
n@816 294 var text = document.createElement('span');
n@816 295 text.textContent = f.name;
n@816 296 dndHTitle.appendChild(text);
n@816 297 dndHeader.appendChild(dndHTitle);
n@816 298 var dndHID = document.createElement('div');
n@816 299 dndHID.style.width = "100px";
n@816 300 dndHID.className = "dndheaderelement";
n@816 301 var IDInput = document.createElement('input');
n@816 302 IDInput.name = "ID";
n@816 303 IDInput.value = f.name.split('.')[0];
n@816 304 IDInput.style.width = "96px";
n@816 305 // TODO: Automatic checking for common ID;
n@816 306 dndHID.appendChild(IDInput);
n@816 307 dndHeader.appendChild(dndHID);
n@816 308 var dndHPlay = document.createElement('div');
n@816 309 dndHPlay.style.width = "100px";
n@816 310 dndHPlay.className = "dndheaderelement";
n@816 311 var audio = document.createElement('audio');
n@816 312 dndHPlay.appendChild(audio);
n@816 313 dndHeader.appendChild(dndHPlay);
n@816 314 dnd.appendChild(dndHeader);
n@816 315 }
n@816 316 };
n@816 317 var dndHeader = document.createElement('div');
n@816 318 dndHeader.style.width = "100%";
n@816 319 dndHeader.style.height = "15px";
n@816 320 dndHeader.style.borderBottom = "#DDD";
n@816 321 dndHeader.style.borderBottomWidth = "1px";
n@816 322 dndHeader.style.borderBottomStyle = "solid";
n@816 323 var dndHInclude = document.createElement('div');
n@816 324 dndHInclude.style.width = "30px";
n@816 325 dndHInclude.className = "dndheaderelement";
n@816 326 var text = document.createElement('span');
n@816 327 text.textContent = "Inc.";
n@816 328 dndHInclude.appendChild(text);
n@816 329 dndHeader.appendChild(dndHInclude);
n@816 330 var dndHTitle = document.createElement('div');
n@816 331 dndHTitle.style.width = "180px";
n@816 332 dndHTitle.className = "dndheaderelement";
n@816 333 text = document.createElement('span');
n@816 334 text.textContent = "File Name";
n@816 335 dndHTitle.appendChild(text);
n@816 336 dndHeader.appendChild(dndHTitle);
n@816 337 var dndHID = document.createElement('div');
n@816 338 dndHID.style.width = "100px";
n@816 339 dndHID.className = "dndheaderelement";
n@816 340 text = document.createElement('span');
n@816 341 text.textContent = "ID";
n@816 342 dndHID.appendChild(text);
n@816 343 dndHeader.appendChild(dndHID);
n@816 344 var dndHPlay = document.createElement('div');
n@816 345 dndHPlay.style.width = "100px";
n@816 346 dndHPlay.className = "dndheaderelement";
n@816 347 text = document.createElement('span');
n@816 348 text.textContent = "Sample";
n@816 349 dndHPlay.appendChild(text);
n@816 350 dndHeader.appendChild(dndHPlay);
n@816 351 dnd.appendChild(dndHeader);
n@816 352 this.popupBody.appendChild(dnd);
n@816 353 var button = document.createElement('button');
n@816 354 button.className = "popupButton";
n@816 355 button.textContent = "Submit";
n@816 356 button.onclick = function(event)
n@816 357 {
n@816 358
n@816 359 };
n@816 360 this.popupFooter.appendChild(button);
n@816 361 }
n@816 362 this.state++;
n@816 363 };
n@816 364 };
n@816 365
n@816 366 function Specification() {
n@816 367 // Handles the decoding of the project specification XML into a simple JavaScript Object.
n@816 368
n@816 369 this.interfaceType = null;
n@816 370 this.commonInterface = new function()
n@816 371 {
n@816 372 this.options = [];
n@816 373 this.optionNode = function(input)
n@816 374 {
n@816 375 var name = input.getAttribute('name');
n@816 376 this.type = name;
n@816 377 if(this.type == "option")
n@816 378 {
n@816 379 this.name = input.id;
n@816 380 } else if (this.type == "check")
n@816 381 {
n@816 382 this.check = input.id;
n@816 383 }
n@816 384 };
n@816 385 };
n@816 386 this.projectReturn = null;
n@816 387 this.randomiseOrder = null;
n@816 388 this.collectMetrics = null;
n@816 389 this.testPages = null;
n@816 390 this.preTest = null;
n@816 391 this.postTest = null;
n@816 392 this.audioHolders = [];
n@816 393
n@816 394 this.decode = function() {
n@816 395 // projectXML - DOM Parsed document
n@816 396 this.projectXML = projectXML.childNodes[0];
n@816 397 var setupNode = projectXML.getElementsByTagName('setup')[0];
n@816 398 this.interfaceType = setupNode.getAttribute('interface');
n@816 399 this.projectReturn = setupNode.getAttribute('projectReturn');
n@816 400 this.testPages = setupNode.getAttribute('testPages');
n@816 401 if (setupNode.getAttribute('randomiseOrder') == "true") {
n@816 402 this.randomiseOrder = true;
n@816 403 } else {this.randomiseOrder = false;}
n@816 404 if (setupNode.getAttribute('collectMetrics') == "true") {
n@816 405 this.collectMetrics = true;
n@816 406 } else {this.collectMetrics = false;}
n@816 407 if (isNaN(Number(this.testPages)) || this.testPages == undefined)
n@816 408 {
n@816 409 this.testPages = null;
n@816 410 } else {
n@816 411 this.testPages = Number(this.testPages);
n@816 412 if (this.testPages == 0) {this.testPages = null;}
n@816 413 }
n@816 414 var metricCollection = setupNode.getElementsByTagName('Metric');
n@816 415
n@816 416 this.preTest = new this.prepostNode('pretest',setupNode.getElementsByTagName('PreTest'));
n@816 417 this.postTest = new this.prepostNode('posttest',setupNode.getElementsByTagName('PostTest'));
n@816 418
n@816 419 if (metricCollection.length > 0) {
n@816 420 metricCollection = metricCollection[0].getElementsByTagName('metricEnable');
n@816 421 for (var i=0; i<metricCollection.length; i++) {
n@816 422 this.metrics.push(new this.metricNode(metricCollection[i].textContent));
n@816 423 }
n@816 424 }
n@816 425
n@816 426 var commonInterfaceNode = setupNode.getElementsByTagName('interface');
n@816 427 if (commonInterfaceNode.length > 0) {
n@816 428 commonInterfaceNode = commonInterfaceNode[0];
n@816 429 } else {
n@816 430 commonInterfaceNode = undefined;
n@816 431 }
n@816 432
n@816 433 this.commonInterface = new function() {
n@816 434 this.OptionNode = function(child) {
n@816 435 this.type = child.nodeName;
n@816 436 if (this.type == 'option')
n@816 437 {
n@816 438 this.name = child.getAttribute('name');
n@816 439 }
n@816 440 else if (this.type == 'check') {
n@816 441 this.check = child.getAttribute('name');
n@816 442 if (this.check == 'scalerange') {
n@816 443 this.min = child.getAttribute('min');
n@816 444 this.max = child.getAttribute('max');
n@816 445 if (this.min == null) {this.min = 1;}
n@816 446 else if (Number(this.min) > 1 && this.min != null) {
n@816 447 this.min = Number(this.min)/100;
n@816 448 } else {
n@816 449 this.min = Number(this.min);
n@816 450 }
n@816 451 if (this.max == null) {this.max = 0;}
n@816 452 else if (Number(this.max) > 1 && this.max != null) {
n@816 453 this.max = Number(this.max)/100;
n@816 454 } else {
n@816 455 this.max = Number(this.max);
n@816 456 }
n@816 457 }
n@816 458 } else if (this.type == 'anchor' || this.type == 'reference') {
n@816 459 this.value = Number(child.textContent);
n@816 460 this.enforce = child.getAttribute('enforce');
n@816 461 if (this.enforce == 'true') {this.enforce = true;}
n@816 462 else {this.enforce = false;}
n@816 463 }
n@816 464 };
n@816 465 this.options = [];
n@816 466 if (commonInterfaceNode != undefined) {
n@816 467 var child = commonInterfaceNode.firstElementChild;
n@816 468 while (child != undefined) {
n@816 469 this.options.push(new this.OptionNode(child));
n@816 470 child = child.nextElementSibling;
n@816 471 }
n@816 472 }
n@816 473 };
n@816 474
n@816 475 var audioHolders = projectXML.getElementsByTagName('audioHolder');
n@816 476 for (var i=0; i<audioHolders.length; i++) {
n@816 477 this.audioHolders.push(new this.audioHolderNode(this,audioHolders[i]));
n@816 478 }
n@816 479
n@816 480 // New check if we need to randomise the test order
n@816 481 if (this.randomiseOrder)
n@816 482 {
n@816 483 this.audioHolders = randomiseOrder(this.audioHolders);
n@816 484 for (var i=0; i<this.audioHolders.length; i++)
n@816 485 {
n@816 486 this.audioHolders[i].presentedId = i;
n@816 487 }
n@816 488 }
n@816 489
n@816 490 if (this.testPages != null || this.testPages != undefined)
n@816 491 {
n@816 492 if (this.testPages > audioHolders.length)
n@816 493 {
n@816 494 console.log('Warning: You have specified '+audioHolders.length+' tests but requested '+this.testPages+' be completed!');
n@816 495 this.testPages = audioHolders.length;
n@816 496 }
n@816 497 var aH = this.audioHolders;
n@816 498 this.audioHolders = [];
n@816 499 for (var i=0; i<this.testPages; i++)
n@816 500 {
n@816 501 this.audioHolders.push(aH[i]);
n@816 502 }
n@816 503 }
n@816 504 };
n@816 505
n@816 506 this.prepostNode = function(type,Collection) {
n@816 507 this.type = type;
n@816 508 this.options = [];
n@816 509
n@816 510 this.OptionNode = function(child) {
n@816 511
n@816 512 this.childOption = function(element) {
n@816 513 this.type = 'option';
n@816 514 this.id = element.id;
n@816 515 this.name = element.getAttribute('name');
n@816 516 this.text = element.textContent;
n@816 517 };
n@816 518
n@816 519 this.type = child.nodeName;
n@816 520 if (child.nodeName == "question") {
n@816 521 this.id = child.id;
n@816 522 this.mandatory;
n@816 523 if (child.getAttribute('mandatory') == "true") {this.mandatory = true;}
n@816 524 else {this.mandatory = false;}
n@816 525 this.question = child.textContent;
n@816 526 if (child.getAttribute('boxsize') == null) {
n@816 527 this.boxsize = 'normal';
n@816 528 } else {
n@816 529 this.boxsize = child.getAttribute('boxsize');
n@816 530 }
n@816 531 } else if (child.nodeName == "statement") {
n@816 532 this.statement = child.textContent;
n@816 533 } else if (child.nodeName == "checkbox" || child.nodeName == "radio") {
n@816 534 var element = child.firstElementChild;
n@816 535 this.id = child.id;
n@816 536 if (element == null) {
n@816 537 console.log('Malformed' +child.nodeName+ 'entry');
n@816 538 this.statement = 'Malformed' +child.nodeName+ 'entry';
n@816 539 this.type = 'statement';
n@816 540 } else {
n@816 541 this.options = [];
n@816 542 while (element != null) {
n@816 543 if (element.nodeName == 'statement' && this.statement == undefined){
n@816 544 this.statement = element.textContent;
n@816 545 } else if (element.nodeName == 'option') {
n@816 546 this.options.push(new this.childOption(element));
n@816 547 }
n@816 548 element = element.nextElementSibling;
n@816 549 }
n@816 550 }
n@816 551 } else if (child.nodeName == "number") {
n@816 552 this.statement = child.textContent;
n@816 553 this.id = child.id;
n@816 554 this.min = child.getAttribute('min');
n@816 555 this.max = child.getAttribute('max');
n@816 556 this.step = child.getAttribute('step');
n@816 557 }
n@816 558 };
n@816 559
n@816 560 // On construction:
n@816 561 if (Collection.length != 0) {
n@816 562 Collection = Collection[0];
n@816 563 if (Collection.childElementCount != 0) {
n@816 564 var child = Collection.firstElementChild;
n@816 565 this.options.push(new this.OptionNode(child));
n@816 566 while (child.nextElementSibling != null) {
n@816 567 child = child.nextElementSibling;
n@816 568 this.options.push(new this.OptionNode(child));
n@816 569 }
n@816 570 }
n@816 571 }
n@816 572 };
n@816 573
n@816 574 this.metricNode = function(name) {
n@816 575 this.enabled = name;
n@816 576 };
n@816 577
n@816 578 this.audioHolderNode = function(parent,xml) {
n@816 579 this.type = 'audioHolder';
n@816 580 this.presentedId = parent.audioHolders.length;
n@816 581 this.interfaceNode = function(DOM) {
n@816 582 var title = DOM.getElementsByTagName('title');
n@816 583 if (title.length == 0) {this.title = null;}
n@816 584 else {this.title = title[0].textContent;}
n@816 585 this.options = parent.commonInterface.options;
n@816 586 var scale = DOM.getElementsByTagName('scale');
n@816 587 this.scale = [];
n@816 588 for (var i=0; i<scale.length; i++) {
n@816 589 var arr = [null, null];
n@816 590 arr[0] = scale[i].getAttribute('position');
n@816 591 arr[1] = scale[i].textContent;
n@816 592 this.scale.push(arr);
n@816 593 }
n@816 594 };
n@816 595
n@816 596 this.audioElementNode = function(parent,xml) {
n@816 597 this.url = xml.getAttribute('url');
n@816 598 this.id = xml.id;
n@816 599 this.parent = parent;
n@816 600 this.type = xml.getAttribute('type');
n@816 601 if (this.type == null) {this.type = "normal";}
n@816 602 if (this.type == 'anchor') {this.anchor = true;}
n@816 603 else {this.anchor = false;}
n@816 604 if (this.type == 'reference') {this.reference = true;}
n@816 605 else {this.reference = false;}
n@816 606
n@816 607 this.marker = xml.getAttribute('marker');
n@816 608 if (this.marker == null) {this.marker = undefined;}
n@816 609
n@816 610 if (this.anchor == true) {
n@816 611 if (this.marker != undefined) {this.enforce = true;}
n@816 612 else {this.enforce = enforceAnchor;}
n@816 613 this.marker = anchor;
n@816 614 }
n@816 615 else if (this.reference == true) {
n@816 616 if (this.marker != undefined) {this.enforce = true;}
n@816 617 else {this.enforce = enforceReference;}
n@816 618 this.marker = reference;
n@816 619 }
n@816 620
n@816 621 if (this.marker != undefined) {
n@816 622 this.marker = Number(this.marker);
n@816 623 if (this.marker > 1) {this.marker /= 100;}
n@816 624 }
n@816 625 };
n@816 626
n@816 627 this.commentQuestionNode = function(xml) {
n@816 628 this.childOption = function(element) {
n@816 629 this.type = 'option';
n@816 630 this.name = element.getAttribute('name');
n@816 631 this.text = element.textContent;
n@816 632 };
n@816 633 this.id = xml.id;
n@816 634 if (xml.getAttribute('mandatory') == 'true') {this.mandatory = true;}
n@816 635 else {this.mandatory = false;}
n@816 636 this.type = xml.getAttribute('type');
n@816 637 if (this.type == undefined) {this.type = 'text';}
n@816 638 switch (this.type) {
n@816 639 case 'text':
n@816 640 this.question = xml.textContent;
n@816 641 break;
n@816 642 case 'radio':
n@816 643 var child = xml.firstElementChild;
n@816 644 this.options = [];
n@816 645 while (child != undefined) {
n@816 646 if (child.nodeName == 'statement' && this.statement == undefined) {
n@816 647 this.statement = child.textContent;
n@816 648 } else if (child.nodeName == 'option') {
n@816 649 this.options.push(new this.childOption(child));
n@816 650 }
n@816 651 child = child.nextElementSibling;
n@816 652 }
n@816 653 break;
n@816 654 case 'checkbox':
n@816 655 var child = xml.firstElementChild;
n@816 656 this.options = [];
n@816 657 while (child != undefined) {
n@816 658 if (child.nodeName == 'statement' && this.statement == undefined) {
n@816 659 this.statement = child.textContent;
n@816 660 } else if (child.nodeName == 'option') {
n@816 661 this.options.push(new this.childOption(child));
n@816 662 }
n@816 663 child = child.nextElementSibling;
n@816 664 }
n@816 665 break;
n@816 666 }
n@816 667 };
n@816 668
n@816 669 this.id = xml.id;
n@816 670 this.hostURL = xml.getAttribute('hostURL');
n@816 671 this.sampleRate = xml.getAttribute('sampleRate');
n@816 672 if (xml.getAttribute('randomiseOrder') == "true") {this.randomiseOrder = true;}
n@816 673 else {this.randomiseOrder = false;}
n@816 674 this.repeatCount = xml.getAttribute('repeatCount');
n@816 675 if (xml.getAttribute('loop') == 'true') {this.loop = true;}
n@816 676 else {this.loop == false;}
n@816 677 if (xml.getAttribute('elementComments') == "true") {this.elementComments = true;}
n@816 678 else {this.elementComments = false;}
n@816 679
n@816 680 var anchor = xml.getElementsByTagName('anchor');
n@816 681 var enforceAnchor = false;
n@816 682 if (anchor.length == 0) {
n@816 683 // Find anchor in commonInterface;
n@816 684 for (var i=0; i<parent.commonInterface.options.length; i++) {
n@816 685 if(parent.commonInterface.options[i].type == 'anchor') {
n@816 686 anchor = parent.commonInterface.options[i].value;
n@816 687 enforceAnchor = parent.commonInterface.options[i].enforce;
n@816 688 break;
n@816 689 }
n@816 690 }
n@816 691 if (typeof(anchor) == "object") {
n@816 692 anchor = null;
n@816 693 }
n@816 694 } else {
n@816 695 anchor = anchor[0].textContent;
n@816 696 }
n@816 697
n@816 698 var reference = xml.getElementsByTagName('anchor');
n@816 699 var enforceReference = false;
n@816 700 if (reference.length == 0) {
n@816 701 // Find anchor in commonInterface;
n@816 702 for (var i=0; i<parent.commonInterface.options.length; i++) {
n@816 703 if(parent.commonInterface.options[i].type == 'reference') {
n@816 704 reference = parent.commonInterface.options[i].value;
n@816 705 enforceReference = parent.commonInterface.options[i].enforce;
n@816 706 break;
n@816 707 }
n@816 708 }
n@816 709 if (typeof(reference) == "object") {
n@816 710 reference = null;
n@816 711 }
n@816 712 } else {
n@816 713 reference = reference[0].textContent;
n@816 714 }
n@816 715
n@816 716 if (typeof(anchor) == 'number') {
n@816 717 if (anchor > 1 && anchor < 100) {anchor /= 100.0;}
n@816 718 }
n@816 719
n@816 720 if (typeof(reference) == 'number') {
n@816 721 if (reference > 1 && reference < 100) {reference /= 100.0;}
n@816 722 }
n@816 723
n@816 724 this.preTest = new parent.prepostNode('pretest',xml.getElementsByTagName('PreTest'));
n@816 725 this.postTest = new parent.prepostNode('posttest',xml.getElementsByTagName('PostTest'));
n@816 726
n@816 727 this.interfaces = [];
n@816 728 var interfaceDOM = xml.getElementsByTagName('interface');
n@816 729 for (var i=0; i<interfaceDOM.length; i++) {
n@816 730 this.interfaces.push(new this.interfaceNode(interfaceDOM[i]));
n@816 731 }
n@816 732
n@816 733 this.commentBoxPrefix = xml.getElementsByTagName('commentBoxPrefix');
n@816 734 if (this.commentBoxPrefix.length != 0) {
n@816 735 this.commentBoxPrefix = this.commentBoxPrefix[0].textContent;
n@816 736 } else {
n@816 737 this.commentBoxPrefix = "Comment on track";
n@816 738 }
n@816 739
n@816 740 this.audioElements =[];
n@816 741 var audioElementsDOM = xml.getElementsByTagName('audioElements');
n@816 742 this.outsideReference = null;
n@816 743 for (var i=0; i<audioElementsDOM.length; i++) {
n@816 744 if (audioElementsDOM[i].getAttribute('type') == 'outsidereference') {
n@816 745 if (this.outsideReference == null) {
n@816 746 this.outsideReference = new this.audioElementNode(this,audioElementsDOM[i]);
n@816 747 } else {
n@816 748 console.log('Error only one audioelement can be of type outsidereference per audioholder');
n@816 749 this.audioElements.push(new this.audioElementNode(this,audioElementsDOM[i]));
n@816 750 console.log('Element id '+audioElementsDOM[i].id+' made into normal node');
n@816 751 }
n@816 752 } else {
n@816 753 this.audioElements.push(new this.audioElementNode(this,audioElementsDOM[i]));
n@816 754 }
n@816 755 }
n@816 756
n@816 757 if (this.randomiseOrder) {
n@816 758 this.audioElements = randomiseOrder(this.audioElements);
n@816 759 }
n@816 760
n@816 761 // Check only one anchor and one reference per audioNode
n@816 762 var anchor = [];
n@816 763 var reference = [];
n@816 764 this.anchorId = null;
n@816 765 this.referenceId = null;
n@816 766 for (var i=0; i<this.audioElements.length; i++)
n@816 767 {
n@816 768 if (this.audioElements[i].anchor == true) {anchor.push(i);}
n@816 769 if (this.audioElements[i].reference == true) {reference.push(i);}
n@816 770 }
n@816 771
n@816 772 if (anchor.length > 1) {
n@816 773 console.log('Error - cannot have more than one anchor!');
n@816 774 console.log('Each anchor node will be a normal mode to continue the test');
n@816 775 for (var i=0; i<anchor.length; i++)
n@816 776 {
n@816 777 this.audioElements[anchor[i]].anchor = false;
n@816 778 this.audioElements[anchor[i]].value = undefined;
n@816 779 }
n@816 780 } else {this.anchorId = anchor[0];}
n@816 781 if (reference.length > 1) {
n@816 782 console.log('Error - cannot have more than one anchor!');
n@816 783 console.log('Each anchor node will be a normal mode to continue the test');
n@816 784 for (var i=0; i<reference.length; i++)
n@816 785 {
n@816 786 this.audioElements[reference[i]].reference = false;
n@816 787 this.audioElements[reference[i]].value = undefined;
n@816 788 }
n@816 789 } else {this.referenceId = reference[0];}
n@816 790
n@816 791 this.commentQuestions = [];
n@816 792 var commentQuestionsDOM = xml.getElementsByTagName('CommentQuestion');
n@816 793 for (var i=0; i<commentQuestionsDOM.length; i++) {
n@816 794 this.commentQuestions.push(new this.commentQuestionNode(commentQuestionsDOM[i]));
n@816 795 }
n@816 796 };
n@816 797 }
n@816 798 </script>
n@816 799 <style>
n@816 800 div.popup {
n@816 801 width: 500px;
n@816 802 position: absolute;
n@816 803 height: 400px;
n@816 804 background-color: #fff;
n@816 805 border-radius: 10px;
n@816 806 box-shadow: 0px 0px 50px #000;
n@816 807 z-index: 2;
n@816 808 }
n@816 809
n@816 810 button.popupButton {
n@816 811 /* Button for popup window
n@816 812 */
n@816 813 min-width: 50px;
n@816 814 height: 25px;
n@816 815 position: relative;
n@816 816 border-radius: 5px;
n@816 817 border: #444;
n@816 818 border-width: 1px;
n@816 819 border-style: solid;
n@816 820 background-color: #fff;
n@816 821 }
n@816 822
n@816 823 div.dragndrop {
n@816 824 margin-top: 10px;
n@816 825 border:#000000;
n@816 826 border-style: dashed;
n@816 827 border-width: 2px;
n@816 828 }
n@816 829 div.dndheaderelement {
n@816 830 float: left;
n@816 831 height: 100%;
n@816 832 border-right: #DDDDDD;
n@816 833 border-right-width: 1px;
n@816 834 border-right-style: solid;
n@816 835 }
n@816 836 div.dndheaderelement span{
n@816 837 padding-left: 5px;
n@816 838 }
n@816 839 </style>
n@816 840 </head>
n@816 841
n@816 842 <body>
n@816 843 <div id="content"></div>
n@816 844 </body>
n@816 845 </html>