Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 2024:ba2fd498a671

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
create_test: Imports from drag and drop project XML
author Nicholas Jillings <nickjillings@users.noreply.github.com>
date Wed, 03 Jun 2015 14:56:30 +0100
parents 3a52432d2316
children d3c76f362c0c
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@2024 518 var audioHolders = root.getElementsByTagName('audioHolder');
nickjillings@2024 519 for (var i=0; i<audioHolders.length; i++) {
nickjillings@2024 520 var audioHolderDOM = audioHolderNode();
nickjillings@2024 521 var attribs = audioHolderDOM.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@2024 522 attribs[0].value = audioHolders[i].id;
nickjillings@2024 523 attribs[1].value = audioHolders[i].getAttribute('sampleRate');
nickjillings@2024 524 attribs[2].value = audioHolders[i].getAttribute('hostURL');
nickjillings@2024 525 attribs[3].checked = audioHolders[i].getAttribute('randomiseOrder');
nickjillings@2024 526 attribs[4].value = audioHolders[i].getAttribute('repeatCount');
nickjillings@2024 527 attribs[5].checked = audioHolders[i].getAttribute('loop');
nickjillings@2024 528 attribs[6].checked = audioHolders[i].getAttribute('elementComments');
nickjillings@2024 529
nickjillings@2024 530 var PreTest = audioHolders[i].getElementsByTagName('PreTest');
nickjillings@2024 531 var PostTest = audioHolders[i].getElementsByTagName('PostTest');
nickjillings@2024 532 if (PreTest.length != 0) {
nickjillings@2024 533 PreTest = PreTest[0];
nickjillings@2024 534 for (var j=0; j<PreTest.childElementCount; j++) {
nickjillings@2024 535 var child = PreTest.children[j];
nickjillings@2024 536 var node;
nickjillings@2024 537 if (child.nodeName == "question") {
nickjillings@2024 538 node = questionNode();
nickjillings@2024 539 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@2024 540 attribs[0].value = child.id;
nickjillings@2024 541 attribs[1].value = child.textContent;
nickjillings@2024 542 attribs[2].checked = child.getAttribute('mandatory');
nickjillings@2024 543 } else if (child.nodeName == "statement") {
nickjillings@2024 544 node = statementNode();
nickjillings@2024 545 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@2024 546 attribs[0].value = child.textContent;
nickjillings@2024 547 }
nickjillings@2024 548 audioHolderDOM.children[2].appendChild(node);
nickjillings@2024 549 }
nickjillings@2024 550 }
nickjillings@2024 551 if (PostTest.length != 0) {
nickjillings@2024 552 PostTest = PostTest[0];
nickjillings@2024 553 for (var j=0; j<PostTest.childElementCount; j++) {
nickjillings@2024 554 var child = PostTest.children[j];
nickjillings@2024 555 var node;
nickjillings@2024 556 if (child.nodeName == "question") {
nickjillings@2024 557 node = questionNode();
nickjillings@2024 558 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@2024 559 attribs[0].value = child.id;
nickjillings@2024 560 attribs[1].value = child.textContent;
nickjillings@2024 561 attribs[2].checked = child.getAttribute('mandatory');
nickjillings@2024 562 } else if (child.nodeName == "statement") {
nickjillings@2024 563 node = statementNode();
nickjillings@2024 564 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@2024 565 attribs[0].value = child.textContent;
nickjillings@2024 566 }
nickjillings@2024 567 audioHolderDOM.children[3].appendChild(node);
nickjillings@2024 568 }
nickjillings@2024 569 }
nickjillings@2024 570
nickjillings@2024 571 // Process audio-element
nickjillings@2024 572 var audioElements = audioHolders[i].getElementsByTagName('audioElements');
nickjillings@2024 573 for (var j=0; j<audioElements.length; j++) {
nickjillings@2024 574 var node = audioElementNode();
nickjillings@2024 575 var child = audioElements[j];
nickjillings@2024 576 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@2024 577 attribs[0].value = child.id;
nickjillings@2024 578 attribs[1].value = child.getAttribute('url');
nickjillings@2024 579 audioHolderDOM.appendChild(node);
nickjillings@2024 580 }
nickjillings@2024 581
nickjillings@2024 582 // Process comment-question
nickjillings@2024 583 var commentQuestion = audioHolders[0].getElementsByTagName('CommentQuestion');
nickjillings@2024 584 for (var j=0; j<commentQuestion.length; j++) {
nickjillings@2024 585 var node = commentBox();
nickjillings@2024 586 var child = commentQuestion[j];
nickjillings@2024 587 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@2024 588 attribs[0].value = child.id;
nickjillings@2024 589 attribs[1].value = child.textContent;
nickjillings@2024 590 audioHolderDOM.appendChild(node);
nickjillings@2024 591 }
nickjillings@2024 592
nickjillings@2024 593 document.getElementById('setup').appendChild(audioHolderDOM);
nickjillings@2024 594 }
nickjillings@2023 595 }
nickjillings@1591 596 </script>
nickjillings@1591 597 <style>
nickjillings@1591 598 div {
nickjillings@1591 599 padding: 2px;
nickjillings@1591 600 margin-top: 2px;
nickjillings@1591 601 margin-bottom: 2px;
nickjillings@1591 602 }
nickjillings@1591 603 div.head{
nickjillings@1591 604 margin-left: 10px;
nickjillings@1591 605 border: black;
nickjillings@1591 606 border-width: 2px;
nickjillings@1591 607 border-style: solid;
nickjillings@1591 608 }
nickjillings@1591 609 div.attrib{
nickjillings@1591 610 margin-left:25px;
nickjillings@1591 611 border: black;
nickjillings@1591 612 border-width: 2px;
nickjillings@1591 613 border-style: dashed;
nickjillings@1591 614 margin-bottom: 10px;
nickjillings@1591 615 }
nickjillings@2023 616 div#dragFile{
nickjillings@2023 617 height:100px;
nickjillings@2023 618 border-width: 2px;
nickjillings@2023 619 border-style: dashed;
nickjillings@2023 620 margin-bottom: 10px;
nickjillings@2023 621 }
nickjillings@1591 622 </style>
nickjillings@1591 623
nickjillings@2016 624 </head>
nickjillings@2016 625
nickjillings@2016 626 <body>
nickjillings@1591 627 <h1>Create Test Setup XML</h1>
nickjillings@2023 628 <div id="dragFile">
nickjillings@2023 629 <span>Drag and Drop an XML specification file here to auto-load.</span>
nickjillings@2023 630 </div>
nickjillings@1594 631 <button id="validateXML" onclick="buttonClickedValidate();">Validate</button>
nickjillings@2022 632 <button id="createXML" onclick="buttonClickedSubmit();" disabled>Submit</button>
nickjillings@1594 633 <span id="errorMessage" visibility="hidden"></span>
nickjillings@1591 634 <div id="topLevelBody" align="left">
nickjillings@2016 635 <!-- Interface goes here -->
nickjillings@1591 636 <div name='test-setup'>
nickjillings@1591 637 <div id="setup" class="head">
nickjillings@1591 638 <h2>Setup Tag</h2>
nickjillings@1591 639 <div id="setup-attribs" class="attrib">
nickjillings@1591 640 <span>Interface</span>
nickjillings@1591 641 <select id="interface">
nickjillings@1591 642 <option value='APE'>APE</option>
nickjillings@1591 643 </select>
nickjillings@1591 644 <span>Project Return</span>
nickjillings@1594 645 <input type="text" id="projectReturn" mandatory="false">
nickjillings@1591 646 <span>Randomise Test Page Order</span>
nickjillings@1591 647 <input id="randomisePageOrder" type="checkbox" value="false">
nickjillings@1591 648 <span>Collect Session Metrics</span>
nickjillings@1591 649 <input id="collectMetrics" type="checkbox">
nickjillings@1591 650 </div>
nickjillings@1591 651 <div id="globalPreTest" class="head">
nickjillings@1591 652 <h3>Pre Test</h3>
nickjillings@1591 653 <button id="addPreTestQ" onclick="event.srcElement.parentElement.appendChild(questionNode());">Add Pre Test Question</button>
nickjillings@1591 654 <button id="addPreTestS" onclick="event.srcElement.parentElement.appendChild(statementNode());">Add Pre Test Statement</button>
nickjillings@1591 655 </div>
nickjillings@1591 656 <div id="globalPostTest" class="head">
nickjillings@1591 657 <h3>Post Test</h3>
nickjillings@1591 658 <button id="addPreTestQ" onclick="event.srcElement.parentElement.appendChild(questionNode());">Add Post Test Question</button>
nickjillings@1591 659 <button id="addPreTestS" onclick="event.srcElement.parentElement.appendChild(statementNode());">Add Post Test Statement</button>
nickjillings@1591 660 </div>
nickjillings@1591 661 <div id="globalMetric" class="head">
nickjillings@1591 662 <h3>Global Metrics</h3>
nickjillings@1591 663 <div id="globalMetric-attrib" class="attrib">
nickjillings@1591 664 <span>Test Timer</span>
nickjillings@1591 665 <input type="checkbox" id="testTimer" />
nickjillings@1591 666 <span>Element Playback Timer</span>
nickjillings@1591 667 <input type="checkbox" id="elementTimer" />
nickjillings@1591 668 <span>Element Initial Position</span>
nickjillings@1591 669 <input type="checkbox" id="elementInitialPosition" />
nickjillings@1591 670 <span>Element Tracker</span>
nickjillings@1591 671 <input type="checkbox" id="elementTracker" />
nickjillings@1591 672 <span>Element Flag Listened To</span>
nickjillings@1595 673 <input type="checkbox" id="elementFlagListenedTo" />
nickjillings@1591 674 <span>Element Flag Moved</span>
nickjillings@1591 675 <input type="checkbox" id="elementFlagMoved" />
nickjillings@1591 676 </div>
nickjillings@1591 677 </div>
nickjillings@1592 678 <button id="addAudioHolder" onclick="event.srcElement.parentElement.appendChild(audioHolderNode());">Add AudioHolder / Test Page</button>
nickjillings@1591 679 </div>
nickjillings@1591 680 </div>
nickjillings@2016 681 </div>
nickjillings@2016 682 </body>
nickjillings@2016 683 </html>