Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 736:33d7a1faa50b

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