Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 855:1dc56cb86152

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