Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 2025:1aeedbe12d2a

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