Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1583:5e20f0db13b0

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