Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1481:8be2d08fbe15

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