Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 883:cd20f076f6a3

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