Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1757:79ac043f2556

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 4166218d8110
children d3c76f362c0c
rev   line source
nickjillings@1749 1 <!DOCTYPE html>
nickjillings@1749 2 <html lang="en">
nickjillings@1749 3 <head>
nickjillings@1749 4 <meta charset="utf-8">
nickjillings@1749 5
nickjillings@1749 6 <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
nickjillings@1749 7 Remove this if you use the .htaccess -->
nickjillings@1749 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
nickjillings@1749 9
nickjillings@1749 10 <title>WAET Create Test</title>
nickjillings@1749 11 <meta name="description" content="">
nickjillings@1749 12 <meta name="author" content="">
nickjillings@1749 13
nickjillings@1749 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@1756 25 // Setup drag/drop handles
nickjillings@1756 26 var dropBody = document.getElementById('dragFile');
nickjillings@1756 27 dropBody.addEventListener('dragover', handleDragOver, false);
nickjillings@1756 28 dropBody.addEventListener('dragenter',handleDragEnter,false);
nickjillings@1756 29 dropBody.addEventListener('dragleave',handleDragLeave,false);
nickjillings@1756 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@1755 72 var xmlDoc = buildXML();
nickjillings@1755 73 var inject = document.getElementById('errorMessage');
nickjillings@1755 74 createProjectSave(xmlDoc, inject);
nickjillings@1755 75 }
nickjillings@1755 76 }
nickjillings@1755 77
nickjillings@1755 78 function createProjectSave(xmlDoc, injectPoint) {
nickjillings@1755 79 var parent = document.createElement("div");
nickjillings@1755 80 parent.appendChild(xmlDoc);
nickjillings@1755 81 var file = [parent.innerHTML];
nickjillings@1755 82 var bb = new Blob(file,{type : 'application/xml'});
nickjillings@1755 83 var dnlk = window.URL.createObjectURL(bb);
nickjillings@1755 84 var a = document.createElement("a");
nickjillings@1755 85 a.hidden = '';
nickjillings@1755 86 a.href = dnlk;
nickjillings@1755 87 a.download = "save.xml";
nickjillings@1755 88 a.textContent = "Save File";
nickjillings@1755 89 injectPoint.appendChild(a);
nickjillings@1755 90 }
nickjillings@1755 91
nickjillings@1755 92 function buildXML() {
nickjillings@1755 93 var xmlDoc = document.createElement('BrowserEvalProjectDocument');
nickjillings@1755 94 var setup = document.createElement('setup');
nickjillings@1755 95 setup.setAttribute('interface',document.getElementById('interface').value);
nickjillings@1755 96 if (document.getElementById('projectReturn').value == "") {
nickjillings@1755 97 setup.setAttribute('projectReturn',"null");
nickjillings@1755 98 } else {
nickjillings@1755 99 setup.setAttribute('projectReturn',document.getElementById('projectReturn').value);
nickjillings@1755 100 }
nickjillings@1755 101 setup.setAttribute('randomiseOrder',document.getElementById('randomisePageOrder').checked);
nickjillings@1755 102 setup.setAttribute('collectMetrics',document.getElementById('collectMetrics').checked);
nickjillings@1755 103
nickjillings@1755 104 var globalPreTest = document.createElement('preTest');
nickjillings@1755 105 var options = document.getElementById('globalPreTest').getElementsByClassName('head');
nickjillings@1755 106 constructPrePost(globalPreTest, options);
nickjillings@1755 107
nickjillings@1755 108 var globalPostTest = document.createElement('postTest');
nickjillings@1755 109 options = document.getElementById('globalPostTest').getElementsByClassName('head');
nickjillings@1755 110 constructPrePost(globalPostTest, options);
nickjillings@1755 111
nickjillings@1755 112 var globalMetrics = document.createElement('metric');
nickjillings@1755 113 options = document.getElementById('globalMetric').getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1755 114 for (var i=0; i<options.length; i++) {
nickjillings@1755 115 if (options[i].checked) {
nickjillings@1755 116 var metric = document.createElement('metricEnable');
nickjillings@1755 117 metric.textContent = options[i].id;
nickjillings@1755 118 globalMetrics.appendChild(metric);
nickjillings@1595 119 }
nickjillings@1755 120 }
nickjillings@1755 121 setup.appendChild(globalPreTest);
nickjillings@1755 122 setup.appendChild(globalPostTest);
nickjillings@1755 123 setup.appendChild(globalMetrics);
nickjillings@1755 124 xmlDoc.appendChild(setup);
nickjillings@1755 125
nickjillings@1755 126 var audioHolders = document.getElementsByName('audio-holder');
nickjillings@1755 127 for (var i=0; i<audioHolders.length; i++) {
nickjillings@1755 128 var audioHolder = document.createElement('audioHolder');
nickjillings@1755 129 var audioHolderDOM = audioHolders[i];
nickjillings@1755 130 var attribs = audioHolderDOM.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1755 131 audioHolder.id = attribs[0].value;
nickjillings@1755 132 if (attribs[1].value != "") {audioHolder.setAttribute('sampleRate',attribs[1].value);}
nickjillings@1755 133 if (attribs[2].value != "") {audioHolder.setAttribute('hostURL',attribs[2].value);}
nickjillings@1755 134 audioHolder.setAttribute('randomiseOrder',attribs[3].checked);
nickjillings@1755 135 audioHolder.setAttribute('repeatCount',attribs[4].checked);
nickjillings@1755 136 audioHolder.setAttribute('loop',attribs[5].checked);
nickjillings@1755 137 audioHolder.setAttribute('elementComments',attribs[6].checked);
nickjillings@1595 138
nickjillings@1755 139 // Audio-Holder PreTests
nickjillings@1755 140 var audioHolderPreTest = document.createElement('preTest');
nickjillings@1755 141 var audioHolderPostTest = document.createElement('postTest');
nickjillings@1755 142 options = audioHolderDOM.childNodes[2].getElementsByClassName('head');
nickjillings@1755 143 constructPrePost(audioHolderPreTest, options);
nickjillings@1755 144 options = audioHolderDOM.childNodes[3].getElementsByClassName('head');
nickjillings@1755 145 constructPrePost(audioHolderPostTest, options);
nickjillings@1595 146
nickjillings@1755 147 audioHolder.appendChild(audioHolderPreTest);
nickjillings@1755 148 audioHolder.appendChild(audioHolderPostTest);
nickjillings@1595 149
nickjillings@1755 150 // audio-Elements
nickjillings@1755 151 var audioElementsDOM = [];
nickjillings@1755 152 var commentQuestionDOM = [];
nickjillings@1755 153 for (var j=0; j<audioHolderDOM.childElementCount; j++) {
nickjillings@1755 154 var child = audioHolderDOM.childNodes[j];
nickjillings@1755 155 var name = child.getAttribute('name');
nickjillings@1755 156 if (name == 'audio-element') {audioElementsDOM.push(child);}
nickjillings@1755 157 else if (name == 'comment-question') {commentQuestionDOM.push(child);}
nickjillings@1595 158 }
nickjillings@1595 159
nickjillings@1755 160 for (var j=0; j<audioElementsDOM.length; j++) {
nickjillings@1755 161 var audioElement = document.createElement('audioElement');
nickjillings@1755 162 attribs = audioElementsDOM[j].getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1755 163 audioElement.id = attribs[0].value;
nickjillings@1755 164 audioElement.setAttribute('url',attribs[1].value);
nickjillings@1755 165 audioHolder.appendChild(audioElement);
nickjillings@1754 166 }
nickjillings@1755 167
nickjillings@1755 168 for (var j=0; j<commentQuestionDOM.length; j++) {
nickjillings@1755 169 var commentQuestion = document.createElement('commentQuestion');
nickjillings@1755 170 attribs = commentQuestionDOM[j].getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1755 171 commentQuestion.id = attribs[0].value;
nickjillings@1755 172 commentQuestion.textContent = attribs[1].value;
nickjillings@1755 173 audioHolder.appendChild(commentQuestion);
nickjillings@1755 174 }
nickjillings@1755 175 xmlDoc.appendChild(audioHolder);
nickjillings@1595 176 }
nickjillings@1755 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@1757 188 node.setAttribute('mandatory',attributes[2].checked);
nickjillings@1595 189 } else if (elem.getAttribute('name') == 'statement-node') {
nickjillings@1757 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@1757 268 question[1].style.width = "500px";
nickjillings@1757 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@1757 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@1757 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@1757 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@1757 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@1756 438
nickjillings@1756 439
nickjillings@1756 440 function handleDragOver(e) {
nickjillings@1756 441 e.stopPropagation();
nickjillings@1756 442 e.preventDefault();
nickjillings@1756 443 }
nickjillings@1756 444 function handleDragEnter(e) {
nickjillings@1756 445 e.stopPropagation();
nickjillings@1756 446 e.preventDefault();
nickjillings@1756 447 this.style.backgroundColor = '#AAFFAA';
nickjillings@1756 448 }
nickjillings@1756 449 function handleDragLeave(e) {
nickjillings@1756 450 e.stopPropagation();
nickjillings@1756 451 e.preventDefault();
nickjillings@1756 452 this.style.backgroundColor = "#FFFFFF";
nickjillings@1756 453 }
nickjillings@1756 454 function handleDrop(e) {
nickjillings@1756 455 e.stopPropagation();
nickjillings@1756 456 e.preventDefault();
nickjillings@1756 457
nickjillings@1756 458 var file = e.dataTransfer.files[0];
nickjillings@1756 459
nickjillings@1756 460 // Uses HTML5 FileAPI - https://w3c.github.io/FileAPI/#filereader-interface
nickjillings@1756 461 var reader = new FileReader();
nickjillings@1757 462 reader.onload = function() {
nickjillings@1757 463 var parse = new DOMParser();
nickjillings@1757 464 var xml = parse.parseFromString(reader.result,'text/xml');
nickjillings@1757 465 importXML(xml);
nickjillings@1757 466 };
nickjillings@1756 467 reader.readAsText(file);
nickjillings@1757 468
nickjillings@1756 469 }
nickjillings@1757 470 var g_XML;
nickjillings@1756 471
nickjillings@1756 472 function importXML(xml) {
nickjillings@1757 473 g_XML = xml;
nickjillings@1757 474
nickjillings@1757 475 var root = xml.getElementsByTagName('BrowserEvalProjectDocument')[0];
nickjillings@1757 476 var setup = xml.getElementsByTagName('setup')[0];
nickjillings@1757 477 document.getElementById('interface').value = setup.getAttribute('interface');
nickjillings@1757 478 document.getElementById('projectReturn').value = setup.getAttribute('projectReturn');
nickjillings@1757 479 document.getElementById('randomisePageOrder').checked = setup.getAttribute('randomiseOrder');
nickjillings@1757 480 document.getElementById('collectMetrics').checked = setup.getAttribute('collectMetrics');
nickjillings@1757 481
nickjillings@1757 482 var globalPreTest = setup.getElementsByTagName('PreTest')[0];
nickjillings@1757 483 var globalPostTest = setup.getElementsByTagName('PostTest')[0];
nickjillings@1757 484 for (var i=0; i<globalPreTest.childElementCount; i++) {
nickjillings@1757 485 var child = globalPreTest.children[i];
nickjillings@1757 486 var node;
nickjillings@1757 487 if (child.nodeName == "question") {
nickjillings@1757 488 node = questionNode();
nickjillings@1757 489 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1757 490 attribs[0].value = child.id;
nickjillings@1757 491 attribs[1].value = child.textContent;
nickjillings@1757 492 attribs[2].checked = child.getAttribute('mandatory');
nickjillings@1757 493 } else if (child.nodeName == "statement") {
nickjillings@1757 494 node = statementNode();
nickjillings@1757 495 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1757 496 attribs[0].value = child.textContent;
nickjillings@1757 497 }
nickjillings@1757 498 document.getElementById('globalPreTest').appendChild(node);
nickjillings@1757 499 }
nickjillings@1757 500
nickjillings@1757 501 for (var i=0; i<globalPostTest.childElementCount; i++) {
nickjillings@1757 502 var child = globalPostTest.children[i];
nickjillings@1757 503 var node;
nickjillings@1757 504 if (child.nodeName == "question") {
nickjillings@1757 505 node = questionNode();
nickjillings@1757 506 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1757 507 attribs[0].value = child.id;
nickjillings@1757 508 attribs[1].value = child.textContent;
nickjillings@1757 509 attribs[2].checked = child.getAttribute('mandatory');
nickjillings@1757 510 } else if (child.nodeName == "statement") {
nickjillings@1757 511 node = statementNode();
nickjillings@1757 512 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1757 513 attribs[0].value = child.textContent;
nickjillings@1757 514 }
nickjillings@1757 515 document.getElementById('globalPostTest').appendChild(node);
nickjillings@1757 516 }
nickjillings@1757 517
nickjillings@1757 518 var audioHolders = root.getElementsByTagName('audioHolder');
nickjillings@1757 519 for (var i=0; i<audioHolders.length; i++) {
nickjillings@1757 520 var audioHolderDOM = audioHolderNode();
nickjillings@1757 521 var attribs = audioHolderDOM.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1757 522 attribs[0].value = audioHolders[i].id;
nickjillings@1757 523 attribs[1].value = audioHolders[i].getAttribute('sampleRate');
nickjillings@1757 524 attribs[2].value = audioHolders[i].getAttribute('hostURL');
nickjillings@1757 525 attribs[3].checked = audioHolders[i].getAttribute('randomiseOrder');
nickjillings@1757 526 attribs[4].value = audioHolders[i].getAttribute('repeatCount');
nickjillings@1757 527 attribs[5].checked = audioHolders[i].getAttribute('loop');
nickjillings@1757 528 attribs[6].checked = audioHolders[i].getAttribute('elementComments');
nickjillings@1757 529
nickjillings@1757 530 var PreTest = audioHolders[i].getElementsByTagName('PreTest');
nickjillings@1757 531 var PostTest = audioHolders[i].getElementsByTagName('PostTest');
nickjillings@1757 532 if (PreTest.length != 0) {
nickjillings@1757 533 PreTest = PreTest[0];
nickjillings@1757 534 for (var j=0; j<PreTest.childElementCount; j++) {
nickjillings@1757 535 var child = PreTest.children[j];
nickjillings@1757 536 var node;
nickjillings@1757 537 if (child.nodeName == "question") {
nickjillings@1757 538 node = questionNode();
nickjillings@1757 539 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1757 540 attribs[0].value = child.id;
nickjillings@1757 541 attribs[1].value = child.textContent;
nickjillings@1757 542 attribs[2].checked = child.getAttribute('mandatory');
nickjillings@1757 543 } else if (child.nodeName == "statement") {
nickjillings@1757 544 node = statementNode();
nickjillings@1757 545 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1757 546 attribs[0].value = child.textContent;
nickjillings@1757 547 }
nickjillings@1757 548 audioHolderDOM.children[2].appendChild(node);
nickjillings@1757 549 }
nickjillings@1757 550 }
nickjillings@1757 551 if (PostTest.length != 0) {
nickjillings@1757 552 PostTest = PostTest[0];
nickjillings@1757 553 for (var j=0; j<PostTest.childElementCount; j++) {
nickjillings@1757 554 var child = PostTest.children[j];
nickjillings@1757 555 var node;
nickjillings@1757 556 if (child.nodeName == "question") {
nickjillings@1757 557 node = questionNode();
nickjillings@1757 558 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1757 559 attribs[0].value = child.id;
nickjillings@1757 560 attribs[1].value = child.textContent;
nickjillings@1757 561 attribs[2].checked = child.getAttribute('mandatory');
nickjillings@1757 562 } else if (child.nodeName == "statement") {
nickjillings@1757 563 node = statementNode();
nickjillings@1757 564 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1757 565 attribs[0].value = child.textContent;
nickjillings@1757 566 }
nickjillings@1757 567 audioHolderDOM.children[3].appendChild(node);
nickjillings@1757 568 }
nickjillings@1757 569 }
nickjillings@1757 570
nickjillings@1757 571 // Process audio-element
nickjillings@1757 572 var audioElements = audioHolders[i].getElementsByTagName('audioElements');
nickjillings@1757 573 for (var j=0; j<audioElements.length; j++) {
nickjillings@1757 574 var node = audioElementNode();
nickjillings@1757 575 var child = audioElements[j];
nickjillings@1757 576 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1757 577 attribs[0].value = child.id;
nickjillings@1757 578 attribs[1].value = child.getAttribute('url');
nickjillings@1757 579 audioHolderDOM.appendChild(node);
nickjillings@1757 580 }
nickjillings@1757 581
nickjillings@1757 582 // Process comment-question
nickjillings@1757 583 var commentQuestion = audioHolders[0].getElementsByTagName('CommentQuestion');
nickjillings@1757 584 for (var j=0; j<commentQuestion.length; j++) {
nickjillings@1757 585 var node = commentBox();
nickjillings@1757 586 var child = commentQuestion[j];
nickjillings@1757 587 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1757 588 attribs[0].value = child.id;
nickjillings@1757 589 attribs[1].value = child.textContent;
nickjillings@1757 590 audioHolderDOM.appendChild(node);
nickjillings@1757 591 }
nickjillings@1757 592
nickjillings@1757 593 document.getElementById('setup').appendChild(audioHolderDOM);
nickjillings@1757 594 }
nickjillings@1756 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@1756 616 div#dragFile{
nickjillings@1756 617 height:100px;
nickjillings@1756 618 border-width: 2px;
nickjillings@1756 619 border-style: dashed;
nickjillings@1756 620 margin-bottom: 10px;
nickjillings@1756 621 }
nickjillings@1591 622 </style>
nickjillings@1591 623
nickjillings@1749 624 </head>
nickjillings@1749 625
nickjillings@1749 626 <body>
nickjillings@1591 627 <h1>Create Test Setup XML</h1>
nickjillings@1756 628 <div id="dragFile">
nickjillings@1756 629 <span>Drag and Drop an XML specification file here to auto-load.</span>
nickjillings@1756 630 </div>
nickjillings@1594 631 <button id="validateXML" onclick="buttonClickedValidate();">Validate</button>
nickjillings@1755 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@1749 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@1749 681 </div>
nickjillings@1749 682 </body>
nickjillings@1749 683 </html>