Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1528:766bff1a8f73

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