Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1961:bc31d1bc984c

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