Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1556:c6decd1db0da

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