Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 918:1e1339e51701

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