Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1497:833f500e1c82

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