Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 743:ce513811a06d

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