Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1542:db0823f2210d

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