Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 889:804813c05761

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