Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1946:1d08f8aee098

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