Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1563:4730207bcae0

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