Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1543:45363ee3632d

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