Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1043:f6e8b7156017

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated #1272 and #1271 preparing for #1270
author Nicholas Jillings <nicholas.jillings@eecs.qmul.ac.uk>
date Sat, 20 Jun 2015 14:57:14 +0100
parents 907abe027ebc
children 888292c88c33
rev   line source
n@1010 1 <!DOCTYPE html>
n@1010 2 <html lang="en">
n@1010 3 <head>
n@1010 4 <meta charset="utf-8">
n@1010 5
n@1010 6 <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
n@1010 7 Remove this if you use the .htaccess -->
n@1010 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
n@1010 9
n@1010 10 <title>WAET Create Test</title>
n@1010 11 <meta name="description" content="">
n@1010 12 <meta name="author" content="">
n@1010 13
n@1010 14 <meta name="viewport" content="width=device-width; initial-scale=1.0">
n@921 15
n@921 16 <script type="text/javascript">
n@921 17 // To aid 'one-page set-up' all scripts and CSS must be included directly in this file!
n@921 18 var topLevel;
n@921 19 window.onload = function() {
n@921 20 // Initialise page
n@921 21 topLevel = document.getElementById('topLevelBody');
n@921 22 var setup = document.createElement('div');
n@921 23 setup.id = 'setupTagDiv';
n@921 24
n@1017 25 // Setup drag/drop handles
n@1017 26 var dropBody = document.getElementById('dragFile');
n@1017 27 dropBody.addEventListener('dragover', handleDragOver, false);
n@1017 28 dropBody.addEventListener('dragenter',handleDragEnter,false);
n@1017 29 dropBody.addEventListener('dragleave',handleDragLeave,false);
n@1017 30 dropBody.addEventListener('drop', handleDrop,false);
n@921 31 };
n@921 32
n@924 33 function attributePair(string, type, mandatory){
n@921 34 var id = document.createElement("span");
n@921 35 id.textContent = string;
n@921 36 var input = document.createElement("input");
n@921 37 input.type = type;
n@924 38 if (type == 'text') {
n@924 39 if (mandatory == true) {
n@924 40 input.setAttribute('mandatory','true');
n@924 41 }
n@924 42 else {
n@924 43 input.setAttribute('mandatory','false');
n@924 44 }
n@924 45 }
n@921 46 return [id, input];
n@921 47 }
n@921 48
n@922 49 function removeNode(event) {
n@922 50 event.srcElement.parentElement.parentElement.removeChild(event.srcElement.parentElement);
n@922 51 }
n@922 52
n@924 53 function buttonClickedValidate() {
n@924 54 var ready = validate();
n@924 55 if (ready == false) {
n@924 56 var errMsg = document.getElementById('errorMessage');
n@925 57 errMsg.textContent = "There were some errors with your XML. Any input boxes highlighted in red are invalid because they are empty or because its ID matches another elements ID. Please fill these in correctly. Any boxes which are yellow are not-invalid but will use the default value.";
n@924 58 errMsg.style.visibility = 'visible';
n@924 59 document.getElementById('createXML').disabled = true;
n@924 60
n@924 61 } else {
n@924 62 var errMsg = document.getElementById('errorMessage');
n@924 63 errMsg.textContent = "";
n@924 64 errMsg.style.visiblity = 'hidden';
n@924 65 document.getElementById('createXML').disabled = false;
n@924 66 }
n@924 67 }
n@924 68
n@925 69 function buttonClickedSubmit() {
n@925 70 var ready = validate();
n@925 71 if (ready == true) {
n@1016 72 var xmlDoc = buildXML();
n@1016 73 var inject = document.getElementById('errorMessage');
n@1016 74 createProjectSave(xmlDoc, inject);
n@1016 75 }
n@1016 76 }
n@1016 77
n@1016 78 function createProjectSave(xmlDoc, injectPoint) {
n@1016 79 var parent = document.createElement("div");
n@1016 80 parent.appendChild(xmlDoc);
n@1016 81 var file = [parent.innerHTML];
n@1016 82 var bb = new Blob(file,{type : 'application/xml'});
n@1016 83 var dnlk = window.URL.createObjectURL(bb);
n@1016 84 var a = document.createElement("a");
n@1016 85 a.hidden = '';
n@1016 86 a.href = dnlk;
n@1016 87 a.download = "save.xml";
n@1016 88 a.textContent = "Save File";
n@1016 89 injectPoint.appendChild(a);
n@1016 90 }
n@1016 91
n@1016 92 function buildXML() {
n@1016 93 var xmlDoc = document.createElement('BrowserEvalProjectDocument');
n@1016 94 var setup = document.createElement('setup');
n@1016 95 setup.setAttribute('interface',document.getElementById('interface').value);
n@1016 96 if (document.getElementById('projectReturn').value == "") {
n@1016 97 setup.setAttribute('projectReturn',"null");
n@1016 98 } else {
n@1016 99 setup.setAttribute('projectReturn',document.getElementById('projectReturn').value);
n@1016 100 }
n@1016 101 setup.setAttribute('randomiseOrder',document.getElementById('randomisePageOrder').checked);
n@1016 102 setup.setAttribute('collectMetrics',document.getElementById('collectMetrics').checked);
n@1016 103
n@1016 104 var globalPreTest = document.createElement('preTest');
n@1016 105 var options = document.getElementById('globalPreTest').getElementsByClassName('head');
n@1016 106 constructPrePost(globalPreTest, options);
n@1016 107
n@1016 108 var globalPostTest = document.createElement('postTest');
n@1016 109 options = document.getElementById('globalPostTest').getElementsByClassName('head');
n@1016 110 constructPrePost(globalPostTest, options);
n@1016 111
n@1016 112 var globalMetrics = document.createElement('metric');
n@1016 113 options = document.getElementById('globalMetric').getElementsByClassName('attrib')[0].getElementsByTagName('input');
n@1016 114 for (var i=0; i<options.length; i++) {
n@1016 115 if (options[i].checked) {
n@1016 116 var metric = document.createElement('metricEnable');
n@1016 117 metric.textContent = options[i].id;
n@1016 118 globalMetrics.appendChild(metric);
n@925 119 }
n@1016 120 }
n@1016 121 setup.appendChild(globalPreTest);
n@1016 122 setup.appendChild(globalPostTest);
n@1016 123 setup.appendChild(globalMetrics);
n@1016 124 xmlDoc.appendChild(setup);
n@1016 125
n@1016 126 var audioHolders = document.getElementsByName('audio-holder');
n@1016 127 for (var i=0; i<audioHolders.length; i++) {
n@1016 128 var audioHolder = document.createElement('audioHolder');
n@1016 129 var audioHolderDOM = audioHolders[i];
n@1016 130 var attribs = audioHolderDOM.getElementsByClassName('attrib')[0].getElementsByTagName('input');
n@1016 131 audioHolder.id = attribs[0].value;
n@1016 132 if (attribs[1].value != "") {audioHolder.setAttribute('sampleRate',attribs[1].value);}
n@1016 133 if (attribs[2].value != "") {audioHolder.setAttribute('hostURL',attribs[2].value);}
n@1016 134 audioHolder.setAttribute('randomiseOrder',attribs[3].checked);
n@1016 135 audioHolder.setAttribute('repeatCount',attribs[4].checked);
n@1016 136 audioHolder.setAttribute('loop',attribs[5].checked);
n@1016 137 audioHolder.setAttribute('elementComments',attribs[6].checked);
n@925 138
n@1016 139 // Audio-Holder PreTests
n@1016 140 var audioHolderPreTest = document.createElement('preTest');
n@1016 141 var audioHolderPostTest = document.createElement('postTest');
n@1016 142 options = audioHolderDOM.childNodes[2].getElementsByClassName('head');
n@1016 143 constructPrePost(audioHolderPreTest, options);
n@1016 144 options = audioHolderDOM.childNodes[3].getElementsByClassName('head');
n@1016 145 constructPrePost(audioHolderPostTest, options);
n@925 146
n@1016 147 audioHolder.appendChild(audioHolderPreTest);
n@1016 148 audioHolder.appendChild(audioHolderPostTest);
n@925 149
n@1020 150 // Interface Nodes
n@1020 151
n@1016 152 // audio-Elements
n@1016 153 var audioElementsDOM = [];
n@1016 154 var commentQuestionDOM = [];
n@1020 155 var interfacesDOM = [];
n@1016 156 for (var j=0; j<audioHolderDOM.childElementCount; j++) {
n@1016 157 var child = audioHolderDOM.childNodes[j];
n@1016 158 var name = child.getAttribute('name');
n@1016 159 if (name == 'audio-element') {audioElementsDOM.push(child);}
n@1016 160 else if (name == 'comment-question') {commentQuestionDOM.push(child);}
n@1020 161 else if (name == 'interface-options') {interfacesDOM.push(child);}
n@1020 162 }
n@1020 163
n@1020 164 for (var j=0; j<interfacesDOM.length; j++) {
n@1020 165 var interfaceNode = document.createElement('interface');
n@1020 166 attribs = interfacesDOM[j].getElementsByClassName('attrib')[0].getElementsByTagName('input');
n@1020 167 var title = document.createElement('title');
n@1020 168 title.textContent = attribs[0].value;
n@1020 169 interfaceNode.appendChild(title);
n@1020 170
n@1020 171
n@1020 172 var markers = interfacesDOM[j].getElementsByClassName('head');
n@1020 173 for (var k=0; k<markers.length; k++) {
n@1020 174 var markerNode = document.createElement('scale');
n@1020 175 attribs = markers[k].getElementsByClassName('attrib')[0].getElementsByTagName('input');
n@1020 176 markerNode.textContent = attribs[0].value;
n@1020 177 markerNode.setAttribute('position',attribs[1].value);
n@1020 178 interfaceNode.appendChild(markerNode);
n@1020 179 }
n@1020 180 audioHolder.appendChild(interfaceNode);
n@925 181 }
n@925 182
n@1016 183 for (var j=0; j<audioElementsDOM.length; j++) {
n@1016 184 var audioElement = document.createElement('audioElement');
n@1016 185 attribs = audioElementsDOM[j].getElementsByClassName('attrib')[0].getElementsByTagName('input');
n@1016 186 audioElement.id = attribs[0].value;
n@1016 187 audioElement.setAttribute('url',attribs[1].value);
n@1016 188 audioHolder.appendChild(audioElement);
n@1015 189 }
n@1016 190
n@1016 191 for (var j=0; j<commentQuestionDOM.length; j++) {
n@1016 192 var commentQuestion = document.createElement('commentQuestion');
n@1016 193 attribs = commentQuestionDOM[j].getElementsByClassName('attrib')[0].getElementsByTagName('input');
n@1016 194 commentQuestion.id = attribs[0].value;
n@1016 195 commentQuestion.textContent = attribs[1].value;
n@1016 196 audioHolder.appendChild(commentQuestion);
n@1016 197 }
n@1016 198 xmlDoc.appendChild(audioHolder);
n@925 199 }
n@1016 200 return xmlDoc;
n@925 201 }
n@925 202
n@925 203 function constructPrePost(parent, options) {
n@925 204 for (var i=0; i<options.length; i++) {
n@925 205 var elem = options[i];
n@925 206 var attributes = elem.getElementsByClassName('attrib')[0].getElementsByTagName('input');
n@925 207 if (elem.getAttribute('name') == 'question-node') {
n@925 208 var node = document.createElement('question');
n@925 209 node.setAttribute('id',attributes[0].value);
n@925 210 node.textContent = attributes[1].value;
n@1018 211 node.setAttribute('mandatory',attributes[2].checked);
n@925 212 } else if (elem.getAttribute('name') == 'statement-node') {
n@1018 213 var node = document.createElement('statement');
n@925 214 node.textContent = attributes[0].value;
n@925 215 }
n@925 216 parent.appendChild(node);
n@925 217 }
n@925 218 }
n@925 219
n@924 220 function validate() {
n@924 221 var canExport = true;
n@924 222 // Checks if the XML can be created from the given entries
n@924 223 var inputs = document.getElementsByTagName('input');
n@924 224 for (var i=0; i<inputs.length; i++) {
n@924 225 if (inputs[i].type == 'text') {
n@924 226 if (inputs[i].value == "") {
n@924 227 var mandatory = inputs[i].getAttribute('mandatory');
n@924 228 if (mandatory == "true") {
n@924 229 errorInput(inputs[i]);
n@924 230 canExport = false;
n@924 231 } else {
n@924 232 warningInput(inputs[i]);
n@924 233 }
n@924 234 } else {
n@924 235 goodInput(inputs[i]);
n@924 236 }
n@924 237 }
n@924 238 }
n@925 239
n@925 240 var audioHolders = document.getElementsByName('audio-holder');
n@925 241 for (var i=0; i<audioHolders.length; i++) {
n@925 242 var divs = audioHolders[i].getElementsByClassName('head');
n@925 243 var IDs = [];
n@925 244 for (var j=0; j<divs.length; j++) {
n@925 245 if (divs[j].getAttribute('name') == 'audio-element') {
n@925 246 var obj = divs[j].getElementsByClassName('attrib')[0].children[1];
n@925 247 var aeID = obj.value;
n@925 248 if (aeID != "") {
n@925 249 var unique = true;
n@925 250 for (var k=0; k<IDs.length; k++) {
n@925 251 if (aeID == IDs[k]) {
n@925 252 unique = false;
n@925 253 break;
n@925 254 }
n@925 255 }
n@925 256 if (unique == true) {
n@925 257 IDs.push(aeID);
n@925 258 } else {
n@925 259 errorInput(obj);
n@925 260 canExport = false;
n@925 261 }
n@925 262 }
n@925 263 }
n@925 264 }
n@925 265 }
n@924 266 return canExport;
n@924 267 };
n@924 268
n@924 269 function errorInput(node) {
n@924 270 node.style.backgroundColor = "#FF0000";
n@924 271 }
n@924 272
n@924 273 function warningInput(node) {
n@924 274 node.style.backgroundColor = "#FFFF00";
n@924 275 }
n@924 276
n@924 277 function goodInput(node) {
n@924 278 node.style.backgroundColor = "#FFFFFF";
n@924 279 }
n@924 280
n@921 281 function questionNode() {
n@921 282 var node = document.createElement("div");
n@921 283 node.setAttribute('class','head');
n@921 284 node.setAttribute('name','question-node');
n@921 285 var nodeTitle = document.createElement("span");
n@921 286 nodeTitle.textContent = "Question";
n@921 287 var attributes = document.createElement("div");
n@921 288 attributes.setAttribute('class','attrib');
n@924 289 var id = attributePair("ID:","text", true);
n@924 290 var question = attributePair("Question:","text", false);
n@1018 291 question[1].style.width = "500px";
n@1018 292 var mandatory = attributePair("Mandatory:","checkbox", false);
n@921 293 node.appendChild(nodeTitle);
n@921 294 id.forEach(function(item){attributes.appendChild(item);},false);
n@921 295 question.forEach(function(item){attributes.appendChild(item);},false);
n@1018 296 mandatory.forEach(function(item){attributes.appendChild(item);},false);
n@921 297 node.appendChild(attributes);
n@922 298
n@922 299 var removeButton = document.createElement("button");
n@922 300 removeButton.textContent = "Remove";
n@922 301 removeButton.onclick = removeNode;
n@922 302 node.appendChild(removeButton);
n@921 303 return node;
n@921 304 }
n@921 305
n@921 306 function statementNode() {
n@921 307 var node = document.createElement("div");
n@921 308 node.setAttribute('class','head');
n@924 309 node.setAttribute('name','statement-node');
n@921 310 var nodeTitle = document.createElement("span");
n@921 311 nodeTitle.textContent = "Statement";
n@921 312 var attributes = document.createElement("div");
n@921 313 attributes.setAttribute('class','attrib');
n@924 314 var statement = attributePair("Statement:","text",false);
n@1018 315 statement[1].style.width = "500px";
n@921 316 node.appendChild(nodeTitle);
n@921 317 statement.forEach(function(item){attributes.appendChild(item);},false);
n@921 318 node.appendChild(attributes);
n@922 319
n@922 320 var removeButton = document.createElement("button");
n@922 321 removeButton.textContent = "Remove";
n@922 322 removeButton.onclick = removeNode;
n@922 323 node.appendChild(removeButton);
n@921 324 return node;
n@921 325 }
n@921 326
n@921 327 function audioHolderNode() {
n@921 328 var audioHolderCounts = document.getElementsByName("audio-holder").length;
n@921 329 var node = document.createElement("div");
n@921 330 node.setAttribute("class","head");
n@921 331 node.setAttribute("name","audio-holder");
n@922 332 node.setAttribute("id","audio-holder-"+audioHolderCounts);
n@921 333 var nodeTitle = document.createElement("span");
n@922 334 nodeTitle.textContent = "Audio Holder "+(audioHolderCounts+1);
n@921 335
n@921 336 var attributes = document.createElement("div");
n@921 337 attributes.setAttribute('class','attrib');
n@924 338 var id = attributePair("ID:","text",true);
n@922 339 id[1].value=audioHolderCounts;
n@924 340 var hostURL = attributePair("Host URL:", "text",false);
n@924 341 var sampleRate = attributePair("Sample Rate:","text",false);
n@922 342 var randomiseOrder = attributePair("Randomise Element Order:","checkbox");
n@922 343 var repeatCount = attributePair("Repeat Page Count:","number");
n@922 344 repeatCount[1].value = 0;
n@922 345 var loop = attributePair("Loop Element Playback","checkbox");
n@922 346 var elementComments = attributePair("Enable Comment Boxes","checkbox");
n@922 347 id.forEach(function(item){attributes.appendChild(item);},false);
n@922 348 hostURL.forEach(function(item){attributes.appendChild(item);},false);
n@922 349 sampleRate.forEach(function(item){attributes.appendChild(item);},false);
n@922 350 hostURL.forEach(function(item){attributes.appendChild(item);},false);
n@922 351 randomiseOrder.forEach(function(item){attributes.appendChild(item);},false);
n@922 352 repeatCount.forEach(function(item){attributes.appendChild(item);},false);
n@922 353 loop.forEach(function(item){attributes.appendChild(item);},false);
n@922 354 elementComments.forEach(function(item){attributes.appendChild(item);},false);
n@922 355
n@922 356 node.appendChild(nodeTitle);
n@922 357 node.appendChild(attributes);
n@922 358
n@922 359 var pretest = document.createElement("div");
n@922 360 pretest.setAttribute('class','head');
n@922 361 pretest.setAttribute('name','pre-test');
n@922 362 var pretestTitle = document.createElement("h4");
n@922 363 pretestTitle.textContent = "Pre Test";
n@922 364 var buttonAddQ = document.createElement("button");
n@922 365 buttonAddQ.textContent = "Add Pre Test Question";
n@922 366 buttonAddQ.onclick = function(){event.srcElement.parentElement.appendChild(questionNode());};
n@922 367 var buttonAddS = document.createElement("button");
n@922 368 buttonAddS.textContent = "Add Pre Test Statement";
n@922 369 buttonAddS.onclick = function(){event.srcElement.parentElement.appendChild(statementNode());};
n@922 370 pretest.appendChild(pretestTitle);
n@922 371 pretest.appendChild(buttonAddQ);
n@922 372 pretest.appendChild(buttonAddS);
n@922 373
n@922 374 var posttest = document.createElement("div");
n@922 375 posttest.setAttribute('class','head');
n@922 376 posttest.setAttribute('name','post-test');
n@922 377 var posttestTitle = document.createElement("h4");
n@922 378 posttestTitle.textContent = "Post Test";
n@922 379 var buttonAddQ = document.createElement("button");
n@922 380 buttonAddQ.textContent = "Add Post Test Question";
n@922 381 buttonAddQ.onclick = function(){event.srcElement.parentElement.appendChild(questionNode());};
n@922 382 var buttonAddS = document.createElement("button");
n@922 383 buttonAddS.textContent = "Add Post Test Statement";
n@922 384 buttonAddS.onclick = function(){event.srcElement.parentElement.appendChild(statementNode());};
n@922 385 posttest.appendChild(posttestTitle);
n@922 386 posttest.appendChild(buttonAddQ);
n@922 387 posttest.appendChild(buttonAddS);
n@922 388
n@922 389 node.appendChild(pretest);
n@922 390 node.appendChild(posttest);
n@922 391
n@922 392 var newAudioElementButton = document.createElement("button");
n@922 393 newAudioElementButton.textContent = "Add audio element";
n@922 394 newAudioElementButton.onclick = function(){
n@922 395 event.srcElement.parentElement.appendChild(audioElementNode());
n@922 396 };
n@922 397 node.appendChild(newAudioElementButton);
n@922 398
n@922 399 var newCommentButton = document.createElement("button");
n@922 400 newCommentButton.textContent = "Add Comment Box";
n@922 401 newCommentButton.onclick = function() {
n@922 402 event.srcElement.parentElement.appendChild(commentBox());
n@922 403 };
n@922 404 node.appendChild(newCommentButton);
n@922 405
n@1020 406 var newInterface = document.createElement("button");
n@1020 407 newInterface.textContent = "Add Interface";
n@1020 408 newInterface.onclick = function() {
n@1020 409 event.srcElement.parentElement.appendChild(interfaceNode());
n@1020 410 };
n@1020 411 node.appendChild(newInterface);
n@1020 412
n@922 413 var removeButton = document.createElement("button");
n@922 414 removeButton.textContent = "Remove Audio Holder";
n@922 415 removeButton.onclick = removeNode;
n@922 416 node.appendChild(removeButton);
n@922 417 return node;
n@922 418 }
n@922 419
n@922 420 function audioElementNode() {
n@922 421 var node = document.createElement('div');
n@922 422 node.setAttribute('class','head');
n@922 423 node.setAttribute('name','audio-element');
n@922 424 var nodeTitle = document.createElement('span');
n@1018 425 nodeTitle.textContent = 'Audio Element';
n@922 426
n@922 427 var attributes = document.createElement("div");
n@922 428 attributes.setAttribute('class','attrib');
n@924 429 var id = attributePair("ID:","text",true);
n@924 430 var url = attributePair("URL:","text",true);
n@922 431 id.forEach(function(item){attributes.appendChild(item);},false);
n@922 432 url.forEach(function(item){attributes.appendChild(item);},false);
n@922 433
n@922 434 node.appendChild(nodeTitle);
n@922 435 node.appendChild(attributes);
n@922 436
n@922 437 var removeButton = document.createElement("button");
n@922 438 removeButton.textContent = "Remove Audio Element";
n@922 439 removeButton.onclick = removeNode;
n@922 440 node.appendChild(removeButton);
n@922 441 return node;
n@922 442 }
n@922 443
n@922 444 function commentBox() {
n@922 445 var node = document.createElement('div');
n@922 446 node.setAttribute('class','head');
n@922 447 node.setAttribute('name','comment-question');
n@922 448 var nodeTitle = document.createElement('h4');
n@922 449 nodeTitle.textContent = "Comment Box";
n@922 450
n@922 451 var attributes = document.createElement('div');
n@922 452 attributes.setAttribute('class','attrib');
n@924 453 var id = attributePair("ID:",'text',true);
n@924 454 var question = attributePair("Question:",'text',true);
n@1018 455 question[1].style.width = "500px";
n@922 456 id.forEach(function(item){attributes.appendChild(item);},false);
n@922 457 question.forEach(function(item){attributes.appendChild(item);},false);
n@922 458
n@922 459 var removeButton = document.createElement("button");
n@922 460 removeButton.textContent = "Remove Comment Box";
n@922 461 removeButton.onclick = removeNode;
n@922 462
n@922 463 node.appendChild(nodeTitle);
n@922 464 node.appendChild(attributes);
n@922 465 node.appendChild(removeButton);
n@922 466 return node;
n@921 467 }
n@1017 468
n@1020 469 function interfaceNode() {
n@1020 470 var selectedInterface = document.getElementById('interface').value;
n@1020 471 var node = document.createElement('div');
n@1020 472 node.setAttribute('class','head');
n@1020 473 node.setAttribute('name','interface-options');
n@1020 474 var nodeTitle = document.createElement('h4');
n@1020 475 nodeTitle.textContent = "Interface";
n@1020 476
n@1020 477 var attributes = document.createElement('div');
n@1020 478 attributes.setAttribute('class','attrib');
n@1020 479 var title = attributePair('Title: ','text',false);
n@1020 480 title[1].style.width = "500px";
n@1020 481
n@1020 482 var addMarker = document.createElement('button');
n@1020 483 addMarker.textContent = "Add Scale Marker";
n@1020 484 addMarker.onclick = function() {
n@1020 485 event.srcElement.parentElement.appendChild(newScaleMarker());
n@1020 486 };
n@1020 487
n@1020 488 title.forEach(function(item){attributes.appendChild(item);},false);
n@1020 489
n@1020 490 var removeButton = document.createElement("button");
n@1020 491 removeButton.textContent = "Remove Interface";
n@1020 492 removeButton.onclick = removeNode;
n@1020 493
n@1020 494 node.appendChild(nodeTitle);
n@1020 495 node.appendChild(attributes);
n@1020 496 node.appendChild(addMarker);
n@1020 497 node.appendChild(removeButton);
n@1020 498 return node;
n@1020 499 }
n@1020 500
n@1020 501 function newScaleMarker() {
n@1020 502 var node = document.createElement('div');
n@1020 503 node.setAttribute('class','head');
n@1020 504 node.setAttribute('name','interface-options');
n@1020 505 var nodeTitle = document.createElement('span');
n@1020 506 nodeTitle.textContent = "Marker";
n@1020 507 var attributes = document.createElement('div');
n@1020 508 attributes.setAttribute('class','attrib');
n@1020 509 var text = attributePair('Text: ','text',true);
n@1020 510 var position = attributePair('Positon','number',true);
n@1020 511
n@1020 512 text.forEach(function(item){attributes.appendChild(item);},false);
n@1020 513 position.forEach(function(item){attributes.appendChild(item);},false);
n@1020 514
n@1020 515 var removeButton = document.createElement("button");
n@1020 516 removeButton.textContent = "Remove Marker";
n@1020 517 removeButton.onclick = removeNode;
n@1020 518
n@1020 519 node.appendChild(nodeTitle);
n@1020 520 node.appendChild(attributes);
n@1020 521 node.appendChild(removeButton);
n@1020 522 return node;
n@1020 523 }
n@1017 524
n@1017 525 function handleDragOver(e) {
n@1017 526 e.stopPropagation();
n@1017 527 e.preventDefault();
n@1017 528 }
n@1017 529 function handleDragEnter(e) {
n@1017 530 e.stopPropagation();
n@1017 531 e.preventDefault();
n@1017 532 this.style.backgroundColor = '#AAFFAA';
n@1017 533 }
n@1017 534 function handleDragLeave(e) {
n@1017 535 e.stopPropagation();
n@1017 536 e.preventDefault();
n@1017 537 this.style.backgroundColor = "#FFFFFF";
n@1017 538 }
n@1017 539 function handleDrop(e) {
n@1017 540 e.stopPropagation();
n@1017 541 e.preventDefault();
n@1017 542
n@1017 543 var file = e.dataTransfer.files[0];
n@1017 544
n@1017 545 // Uses HTML5 FileAPI - https://w3c.github.io/FileAPI/#filereader-interface
n@1017 546 var reader = new FileReader();
n@1018 547 reader.onload = function() {
n@1018 548 var parse = new DOMParser();
n@1018 549 var xml = parse.parseFromString(reader.result,'text/xml');
n@1018 550 importXML(xml);
n@1018 551 };
n@1017 552 reader.readAsText(file);
n@1018 553
n@1017 554 }
n@1018 555 var g_XML;
n@1017 556
n@1017 557 function importXML(xml) {
n@1018 558 g_XML = xml;
n@1018 559
n@1018 560 var root = xml.getElementsByTagName('BrowserEvalProjectDocument')[0];
n@1018 561 var setup = xml.getElementsByTagName('setup')[0];
n@1018 562 document.getElementById('interface').value = setup.getAttribute('interface');
n@1018 563 document.getElementById('projectReturn').value = setup.getAttribute('projectReturn');
n@1018 564 document.getElementById('randomisePageOrder').checked = setup.getAttribute('randomiseOrder');
n@1018 565 document.getElementById('collectMetrics').checked = setup.getAttribute('collectMetrics');
n@1018 566
n@1018 567 var globalPreTest = setup.getElementsByTagName('PreTest')[0];
n@1018 568 var globalPostTest = setup.getElementsByTagName('PostTest')[0];
n@1018 569 for (var i=0; i<globalPreTest.childElementCount; i++) {
n@1018 570 var child = globalPreTest.children[i];
n@1018 571 var node;
n@1018 572 if (child.nodeName == "question") {
n@1018 573 node = questionNode();
n@1018 574 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
n@1018 575 attribs[0].value = child.id;
n@1018 576 attribs[1].value = child.textContent;
n@1018 577 attribs[2].checked = child.getAttribute('mandatory');
n@1018 578 } else if (child.nodeName == "statement") {
n@1018 579 node = statementNode();
n@1018 580 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
n@1018 581 attribs[0].value = child.textContent;
n@1018 582 }
n@1018 583 document.getElementById('globalPreTest').appendChild(node);
n@1018 584 }
n@1018 585
n@1018 586 for (var i=0; i<globalPostTest.childElementCount; i++) {
n@1018 587 var child = globalPostTest.children[i];
n@1018 588 var node;
n@1018 589 if (child.nodeName == "question") {
n@1018 590 node = questionNode();
n@1018 591 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
n@1018 592 attribs[0].value = child.id;
n@1018 593 attribs[1].value = child.textContent;
n@1018 594 attribs[2].checked = child.getAttribute('mandatory');
n@1018 595 } else if (child.nodeName == "statement") {
n@1018 596 node = statementNode();
n@1018 597 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
n@1018 598 attribs[0].value = child.textContent;
n@1018 599 }
n@1018 600 document.getElementById('globalPostTest').appendChild(node);
n@1018 601 }
n@1018 602
n@1019 603 // Metric Enable Flags
n@1019 604 var mEnable = setup.getElementsByTagName('Metric')[0].getElementsByTagName('metricEnable');
n@1019 605 for (var i=0; i<mEnable.length; i++) {
n@1019 606 var node = mEnable[i];
n@1019 607 var enabled = node.textContent;
n@1019 608 document.getElementById(enabled).checked = true;
n@1019 609 }
n@1019 610
n@1018 611 var audioHolders = root.getElementsByTagName('audioHolder');
n@1018 612 for (var i=0; i<audioHolders.length; i++) {
n@1018 613 var audioHolderDOM = audioHolderNode();
n@1018 614 var attribs = audioHolderDOM.getElementsByClassName('attrib')[0].getElementsByTagName('input');
n@1018 615 attribs[0].value = audioHolders[i].id;
n@1018 616 attribs[1].value = audioHolders[i].getAttribute('sampleRate');
n@1018 617 attribs[2].value = audioHolders[i].getAttribute('hostURL');
n@1018 618 attribs[3].checked = audioHolders[i].getAttribute('randomiseOrder');
n@1018 619 attribs[4].value = audioHolders[i].getAttribute('repeatCount');
n@1018 620 attribs[5].checked = audioHolders[i].getAttribute('loop');
n@1018 621 attribs[6].checked = audioHolders[i].getAttribute('elementComments');
n@1018 622
n@1018 623 var PreTest = audioHolders[i].getElementsByTagName('PreTest');
n@1018 624 var PostTest = audioHolders[i].getElementsByTagName('PostTest');
n@1018 625 if (PreTest.length != 0) {
n@1018 626 PreTest = PreTest[0];
n@1018 627 for (var j=0; j<PreTest.childElementCount; j++) {
n@1018 628 var child = PreTest.children[j];
n@1018 629 var node;
n@1018 630 if (child.nodeName == "question") {
n@1018 631 node = questionNode();
n@1018 632 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
n@1018 633 attribs[0].value = child.id;
n@1018 634 attribs[1].value = child.textContent;
n@1018 635 attribs[2].checked = child.getAttribute('mandatory');
n@1018 636 } else if (child.nodeName == "statement") {
n@1018 637 node = statementNode();
n@1018 638 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
n@1018 639 attribs[0].value = child.textContent;
n@1018 640 }
n@1018 641 audioHolderDOM.children[2].appendChild(node);
n@1018 642 }
n@1018 643 }
n@1018 644 if (PostTest.length != 0) {
n@1018 645 PostTest = PostTest[0];
n@1018 646 for (var j=0; j<PostTest.childElementCount; j++) {
n@1018 647 var child = PostTest.children[j];
n@1018 648 var node;
n@1018 649 if (child.nodeName == "question") {
n@1018 650 node = questionNode();
n@1018 651 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
n@1018 652 attribs[0].value = child.id;
n@1018 653 attribs[1].value = child.textContent;
n@1018 654 attribs[2].checked = child.getAttribute('mandatory');
n@1018 655 } else if (child.nodeName == "statement") {
n@1018 656 node = statementNode();
n@1018 657 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
n@1018 658 attribs[0].value = child.textContent;
n@1018 659 }
n@1018 660 audioHolderDOM.children[3].appendChild(node);
n@1018 661 }
n@1018 662 }
n@1020 663 // Process interface
n@1020 664 var interfaceNodes = audioHolders[i].getElementsByTagName('interface');
n@1020 665 for (var j=0; j<interfaceNodes.length; j++) {
n@1020 666 var node = interfaceNode();
n@1020 667 var child = interfaceNodes[j];
n@1020 668 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
n@1020 669 attribs[0].value = child.getElementsByTagName('title')[0].textContent;
n@1020 670
n@1020 671 var markers = child.getElementsByTagName('scale');
n@1020 672 for (var k=0; k<markers.length; k++) {
n@1020 673 var markerNode = newScaleMarker();
n@1020 674 attribs = markerNode.getElementsByClassName('attrib')[0].getElementsByTagName('input');
n@1020 675 attribs[0].value = markers[k].textContent;
n@1020 676 attribs[1].value = markers[k].getAttribute('position');
n@1020 677 node.appendChild(markerNode);
n@1020 678 }
n@1020 679 audioHolderDOM.appendChild(node);
n@1020 680 }
n@1020 681
n@1018 682
n@1018 683 // Process audio-element
n@1018 684 var audioElements = audioHolders[i].getElementsByTagName('audioElements');
n@1018 685 for (var j=0; j<audioElements.length; j++) {
n@1018 686 var node = audioElementNode();
n@1018 687 var child = audioElements[j];
n@1018 688 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
n@1018 689 attribs[0].value = child.id;
n@1018 690 attribs[1].value = child.getAttribute('url');
n@1018 691 audioHolderDOM.appendChild(node);
n@1018 692 }
n@1018 693
n@1018 694 // Process comment-question
n@1018 695 var commentQuestion = audioHolders[0].getElementsByTagName('CommentQuestion');
n@1018 696 for (var j=0; j<commentQuestion.length; j++) {
n@1018 697 var node = commentBox();
n@1018 698 var child = commentQuestion[j];
n@1018 699 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
n@1018 700 attribs[0].value = child.id;
n@1018 701 attribs[1].value = child.textContent;
n@1018 702 audioHolderDOM.appendChild(node);
n@1018 703 }
n@1018 704
n@1018 705 document.getElementById('setup').appendChild(audioHolderDOM);
n@1018 706 }
n@1017 707 }
n@921 708 </script>
n@921 709 <style>
n@921 710 div {
n@921 711 padding: 2px;
n@921 712 margin-top: 2px;
n@921 713 margin-bottom: 2px;
n@921 714 }
n@921 715 div.head{
n@921 716 margin-left: 10px;
n@921 717 border: black;
n@921 718 border-width: 2px;
n@921 719 border-style: solid;
n@921 720 }
n@921 721 div.attrib{
n@921 722 margin-left:25px;
n@921 723 border: black;
n@921 724 border-width: 2px;
n@921 725 border-style: dashed;
n@921 726 margin-bottom: 10px;
n@921 727 }
n@1017 728 div#dragFile{
n@1017 729 height:100px;
n@1017 730 border-width: 2px;
n@1017 731 border-style: dashed;
n@1017 732 margin-bottom: 10px;
n@1017 733 }
n@921 734 </style>
n@921 735
n@1010 736 </head>
n@1010 737
n@1010 738 <body>
n@921 739 <h1>Create Test Setup XML</h1>
n@1017 740 <div id="dragFile">
n@1017 741 <span>Drag and Drop an XML specification file here to auto-load.</span>
n@1017 742 </div>
n@924 743 <button id="validateXML" onclick="buttonClickedValidate();">Validate</button>
n@1016 744 <button id="createXML" onclick="buttonClickedSubmit();" disabled>Submit</button>
n@924 745 <span id="errorMessage" visibility="hidden"></span>
n@921 746 <div id="topLevelBody" align="left">
n@1010 747 <!-- Interface goes here -->
n@921 748 <div name='test-setup'>
n@921 749 <div id="setup" class="head">
n@921 750 <h2>Setup Tag</h2>
n@921 751 <div id="setup-attribs" class="attrib">
n@921 752 <span>Interface</span>
n@921 753 <select id="interface">
n@921 754 <option value='APE'>APE</option>
n@921 755 </select>
n@921 756 <span>Project Return</span>
n@924 757 <input type="text" id="projectReturn" mandatory="false">
n@921 758 <span>Randomise Test Page Order</span>
n@921 759 <input id="randomisePageOrder" type="checkbox" value="false">
n@921 760 <span>Collect Session Metrics</span>
n@921 761 <input id="collectMetrics" type="checkbox">
n@921 762 </div>
n@921 763 <div id="globalPreTest" class="head">
n@921 764 <h3>Pre Test</h3>
n@921 765 <button id="addPreTestQ" onclick="event.srcElement.parentElement.appendChild(questionNode());">Add Pre Test Question</button>
n@921 766 <button id="addPreTestS" onclick="event.srcElement.parentElement.appendChild(statementNode());">Add Pre Test Statement</button>
n@921 767 </div>
n@921 768 <div id="globalPostTest" class="head">
n@921 769 <h3>Post Test</h3>
n@921 770 <button id="addPreTestQ" onclick="event.srcElement.parentElement.appendChild(questionNode());">Add Post Test Question</button>
n@921 771 <button id="addPreTestS" onclick="event.srcElement.parentElement.appendChild(statementNode());">Add Post Test Statement</button>
n@921 772 </div>
n@921 773 <div id="globalMetric" class="head">
n@921 774 <h3>Global Metrics</h3>
n@921 775 <div id="globalMetric-attrib" class="attrib">
n@921 776 <span>Test Timer</span>
n@921 777 <input type="checkbox" id="testTimer" />
n@921 778 <span>Element Playback Timer</span>
n@921 779 <input type="checkbox" id="elementTimer" />
n@921 780 <span>Element Initial Position</span>
n@921 781 <input type="checkbox" id="elementInitialPosition" />
n@921 782 <span>Element Tracker</span>
n@921 783 <input type="checkbox" id="elementTracker" />
n@1019 784 <span>Element Listen Tracker</span>
n@1019 785 <input type="checkbox" id="elementListenTracker" />
n@921 786 <span>Element Flag Listened To</span>
n@925 787 <input type="checkbox" id="elementFlagListenedTo" />
n@921 788 <span>Element Flag Moved</span>
n@921 789 <input type="checkbox" id="elementFlagMoved" />
n@921 790 </div>
n@921 791 </div>
n@922 792 <button id="addAudioHolder" onclick="event.srcElement.parentElement.appendChild(audioHolderNode());">Add AudioHolder / Test Page</button>
n@921 793 </div>
n@921 794 </div>
n@1010 795 </div>
n@1010 796 </body>
n@1010 797 </html>