Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 2076:c235979c6197

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