Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1541:c115a0b304b3

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