Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1516:838d8e59c8ff

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