Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1965:c6b94c7dcade

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