Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 873:11e6243fafa9

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