Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1513:f14d55481b60

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