Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 842:1e8bdac90b78

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