Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1572:75f47f1c6cbe

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