Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1759:c7671eba7880

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
create_test: Added interface node options
author Nicholas Jillings <nickjillings@users.noreply.github.com>
date Thu, 04 Jun 2015 09:44:50 +0100
parents 74cdf46f055a
children 35682e8e1159
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@1759 150 // Interface Nodes
nickjillings@1759 151
nickjillings@1755 152 // audio-Elements
nickjillings@1755 153 var audioElementsDOM = [];
nickjillings@1755 154 var commentQuestionDOM = [];
nickjillings@1759 155 var interfacesDOM = [];
nickjillings@1755 156 for (var j=0; j<audioHolderDOM.childElementCount; j++) {
nickjillings@1755 157 var child = audioHolderDOM.childNodes[j];
nickjillings@1755 158 var name = child.getAttribute('name');
nickjillings@1755 159 if (name == 'audio-element') {audioElementsDOM.push(child);}
nickjillings@1755 160 else if (name == 'comment-question') {commentQuestionDOM.push(child);}
nickjillings@1759 161 else if (name == 'interface-options') {interfacesDOM.push(child);}
nickjillings@1759 162 }
nickjillings@1759 163
nickjillings@1759 164 for (var j=0; j<interfacesDOM.length; j++) {
nickjillings@1759 165 var interfaceNode = document.createElement('interface');
nickjillings@1759 166 attribs = interfacesDOM[j].getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1759 167 var title = document.createElement('title');
nickjillings@1759 168 title.textContent = attribs[0].value;
nickjillings@1759 169 interfaceNode.appendChild(title);
nickjillings@1759 170
nickjillings@1759 171
nickjillings@1759 172 var markers = interfacesDOM[j].getElementsByClassName('head');
nickjillings@1759 173 for (var k=0; k<markers.length; k++) {
nickjillings@1759 174 var markerNode = document.createElement('scale');
nickjillings@1759 175 attribs = markers[k].getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1759 176 markerNode.textContent = attribs[0].value;
nickjillings@1759 177 markerNode.setAttribute('position',attribs[1].value);
nickjillings@1759 178 interfaceNode.appendChild(markerNode);
nickjillings@1759 179 }
nickjillings@1759 180 audioHolder.appendChild(interfaceNode);
nickjillings@1595 181 }
nickjillings@1595 182
nickjillings@1755 183 for (var j=0; j<audioElementsDOM.length; j++) {
nickjillings@1755 184 var audioElement = document.createElement('audioElement');
nickjillings@1755 185 attribs = audioElementsDOM[j].getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1755 186 audioElement.id = attribs[0].value;
nickjillings@1755 187 audioElement.setAttribute('url',attribs[1].value);
nickjillings@1755 188 audioHolder.appendChild(audioElement);
nickjillings@1754 189 }
nickjillings@1755 190
nickjillings@1755 191 for (var j=0; j<commentQuestionDOM.length; j++) {
nickjillings@1755 192 var commentQuestion = document.createElement('commentQuestion');
nickjillings@1755 193 attribs = commentQuestionDOM[j].getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1755 194 commentQuestion.id = attribs[0].value;
nickjillings@1755 195 commentQuestion.textContent = attribs[1].value;
nickjillings@1755 196 audioHolder.appendChild(commentQuestion);
nickjillings@1755 197 }
nickjillings@1755 198 xmlDoc.appendChild(audioHolder);
nickjillings@1595 199 }
nickjillings@1755 200 return xmlDoc;
nickjillings@1595 201 }
nickjillings@1595 202
nickjillings@1595 203 function constructPrePost(parent, options) {
nickjillings@1595 204 for (var i=0; i<options.length; i++) {
nickjillings@1595 205 var elem = options[i];
nickjillings@1595 206 var attributes = elem.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1595 207 if (elem.getAttribute('name') == 'question-node') {
nickjillings@1595 208 var node = document.createElement('question');
nickjillings@1595 209 node.setAttribute('id',attributes[0].value);
nickjillings@1595 210 node.textContent = attributes[1].value;
nickjillings@1757 211 node.setAttribute('mandatory',attributes[2].checked);
nickjillings@1595 212 } else if (elem.getAttribute('name') == 'statement-node') {
nickjillings@1757 213 var node = document.createElement('statement');
nickjillings@1595 214 node.textContent = attributes[0].value;
nickjillings@1595 215 }
nickjillings@1595 216 parent.appendChild(node);
nickjillings@1595 217 }
nickjillings@1595 218 }
nickjillings@1595 219
nickjillings@1594 220 function validate() {
nickjillings@1594 221 var canExport = true;
nickjillings@1594 222 // Checks if the XML can be created from the given entries
nickjillings@1594 223 var inputs = document.getElementsByTagName('input');
nickjillings@1594 224 for (var i=0; i<inputs.length; i++) {
nickjillings@1594 225 if (inputs[i].type == 'text') {
nickjillings@1594 226 if (inputs[i].value == "") {
nickjillings@1594 227 var mandatory = inputs[i].getAttribute('mandatory');
nickjillings@1594 228 if (mandatory == "true") {
nickjillings@1594 229 errorInput(inputs[i]);
nickjillings@1594 230 canExport = false;
nickjillings@1594 231 } else {
nickjillings@1594 232 warningInput(inputs[i]);
nickjillings@1594 233 }
nickjillings@1594 234 } else {
nickjillings@1594 235 goodInput(inputs[i]);
nickjillings@1594 236 }
nickjillings@1594 237 }
nickjillings@1594 238 }
nickjillings@1595 239
nickjillings@1595 240 var audioHolders = document.getElementsByName('audio-holder');
nickjillings@1595 241 for (var i=0; i<audioHolders.length; i++) {
nickjillings@1595 242 var divs = audioHolders[i].getElementsByClassName('head');
nickjillings@1595 243 var IDs = [];
nickjillings@1595 244 for (var j=0; j<divs.length; j++) {
nickjillings@1595 245 if (divs[j].getAttribute('name') == 'audio-element') {
nickjillings@1595 246 var obj = divs[j].getElementsByClassName('attrib')[0].children[1];
nickjillings@1595 247 var aeID = obj.value;
nickjillings@1595 248 if (aeID != "") {
nickjillings@1595 249 var unique = true;
nickjillings@1595 250 for (var k=0; k<IDs.length; k++) {
nickjillings@1595 251 if (aeID == IDs[k]) {
nickjillings@1595 252 unique = false;
nickjillings@1595 253 break;
nickjillings@1595 254 }
nickjillings@1595 255 }
nickjillings@1595 256 if (unique == true) {
nickjillings@1595 257 IDs.push(aeID);
nickjillings@1595 258 } else {
nickjillings@1595 259 errorInput(obj);
nickjillings@1595 260 canExport = false;
nickjillings@1595 261 }
nickjillings@1595 262 }
nickjillings@1595 263 }
nickjillings@1595 264 }
nickjillings@1595 265 }
nickjillings@1594 266 return canExport;
nickjillings@1594 267 };
nickjillings@1594 268
nickjillings@1594 269 function errorInput(node) {
nickjillings@1594 270 node.style.backgroundColor = "#FF0000";
nickjillings@1594 271 }
nickjillings@1594 272
nickjillings@1594 273 function warningInput(node) {
nickjillings@1594 274 node.style.backgroundColor = "#FFFF00";
nickjillings@1594 275 }
nickjillings@1594 276
nickjillings@1594 277 function goodInput(node) {
nickjillings@1594 278 node.style.backgroundColor = "#FFFFFF";
nickjillings@1594 279 }
nickjillings@1594 280
nickjillings@1591 281 function questionNode() {
nickjillings@1591 282 var node = document.createElement("div");
nickjillings@1591 283 node.setAttribute('class','head');
nickjillings@1591 284 node.setAttribute('name','question-node');
nickjillings@1591 285 var nodeTitle = document.createElement("span");
nickjillings@1591 286 nodeTitle.textContent = "Question";
nickjillings@1591 287 var attributes = document.createElement("div");
nickjillings@1591 288 attributes.setAttribute('class','attrib');
nickjillings@1594 289 var id = attributePair("ID:","text", true);
nickjillings@1594 290 var question = attributePair("Question:","text", false);
nickjillings@1757 291 question[1].style.width = "500px";
nickjillings@1757 292 var mandatory = attributePair("Mandatory:","checkbox", false);
nickjillings@1591 293 node.appendChild(nodeTitle);
nickjillings@1591 294 id.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1591 295 question.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1757 296 mandatory.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1591 297 node.appendChild(attributes);
nickjillings@1592 298
nickjillings@1592 299 var removeButton = document.createElement("button");
nickjillings@1592 300 removeButton.textContent = "Remove";
nickjillings@1592 301 removeButton.onclick = removeNode;
nickjillings@1592 302 node.appendChild(removeButton);
nickjillings@1591 303 return node;
nickjillings@1591 304 }
nickjillings@1591 305
nickjillings@1591 306 function statementNode() {
nickjillings@1591 307 var node = document.createElement("div");
nickjillings@1591 308 node.setAttribute('class','head');
nickjillings@1594 309 node.setAttribute('name','statement-node');
nickjillings@1591 310 var nodeTitle = document.createElement("span");
nickjillings@1591 311 nodeTitle.textContent = "Statement";
nickjillings@1591 312 var attributes = document.createElement("div");
nickjillings@1591 313 attributes.setAttribute('class','attrib');
nickjillings@1594 314 var statement = attributePair("Statement:","text",false);
nickjillings@1757 315 statement[1].style.width = "500px";
nickjillings@1591 316 node.appendChild(nodeTitle);
nickjillings@1591 317 statement.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1591 318 node.appendChild(attributes);
nickjillings@1592 319
nickjillings@1592 320 var removeButton = document.createElement("button");
nickjillings@1592 321 removeButton.textContent = "Remove";
nickjillings@1592 322 removeButton.onclick = removeNode;
nickjillings@1592 323 node.appendChild(removeButton);
nickjillings@1591 324 return node;
nickjillings@1591 325 }
nickjillings@1591 326
nickjillings@1591 327 function audioHolderNode() {
nickjillings@1591 328 var audioHolderCounts = document.getElementsByName("audio-holder").length;
nickjillings@1591 329 var node = document.createElement("div");
nickjillings@1591 330 node.setAttribute("class","head");
nickjillings@1591 331 node.setAttribute("name","audio-holder");
nickjillings@1592 332 node.setAttribute("id","audio-holder-"+audioHolderCounts);
nickjillings@1591 333 var nodeTitle = document.createElement("span");
nickjillings@1592 334 nodeTitle.textContent = "Audio Holder "+(audioHolderCounts+1);
nickjillings@1591 335
nickjillings@1591 336 var attributes = document.createElement("div");
nickjillings@1591 337 attributes.setAttribute('class','attrib');
nickjillings@1594 338 var id = attributePair("ID:","text",true);
nickjillings@1592 339 id[1].value=audioHolderCounts;
nickjillings@1594 340 var hostURL = attributePair("Host URL:", "text",false);
nickjillings@1594 341 var sampleRate = attributePair("Sample Rate:","text",false);
nickjillings@1592 342 var randomiseOrder = attributePair("Randomise Element Order:","checkbox");
nickjillings@1592 343 var repeatCount = attributePair("Repeat Page Count:","number");
nickjillings@1592 344 repeatCount[1].value = 0;
nickjillings@1592 345 var loop = attributePair("Loop Element Playback","checkbox");
nickjillings@1592 346 var elementComments = attributePair("Enable Comment Boxes","checkbox");
nickjillings@1592 347 id.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 348 hostURL.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 349 sampleRate.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 350 hostURL.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 351 randomiseOrder.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 352 repeatCount.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 353 loop.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 354 elementComments.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 355
nickjillings@1592 356 node.appendChild(nodeTitle);
nickjillings@1592 357 node.appendChild(attributes);
nickjillings@1592 358
nickjillings@1592 359 var pretest = document.createElement("div");
nickjillings@1592 360 pretest.setAttribute('class','head');
nickjillings@1592 361 pretest.setAttribute('name','pre-test');
nickjillings@1592 362 var pretestTitle = document.createElement("h4");
nickjillings@1592 363 pretestTitle.textContent = "Pre Test";
nickjillings@1592 364 var buttonAddQ = document.createElement("button");
nickjillings@1592 365 buttonAddQ.textContent = "Add Pre Test Question";
nickjillings@1592 366 buttonAddQ.onclick = function(){event.srcElement.parentElement.appendChild(questionNode());};
nickjillings@1592 367 var buttonAddS = document.createElement("button");
nickjillings@1592 368 buttonAddS.textContent = "Add Pre Test Statement";
nickjillings@1592 369 buttonAddS.onclick = function(){event.srcElement.parentElement.appendChild(statementNode());};
nickjillings@1592 370 pretest.appendChild(pretestTitle);
nickjillings@1592 371 pretest.appendChild(buttonAddQ);
nickjillings@1592 372 pretest.appendChild(buttonAddS);
nickjillings@1592 373
nickjillings@1592 374 var posttest = document.createElement("div");
nickjillings@1592 375 posttest.setAttribute('class','head');
nickjillings@1592 376 posttest.setAttribute('name','post-test');
nickjillings@1592 377 var posttestTitle = document.createElement("h4");
nickjillings@1592 378 posttestTitle.textContent = "Post Test";
nickjillings@1592 379 var buttonAddQ = document.createElement("button");
nickjillings@1592 380 buttonAddQ.textContent = "Add Post Test Question";
nickjillings@1592 381 buttonAddQ.onclick = function(){event.srcElement.parentElement.appendChild(questionNode());};
nickjillings@1592 382 var buttonAddS = document.createElement("button");
nickjillings@1592 383 buttonAddS.textContent = "Add Post Test Statement";
nickjillings@1592 384 buttonAddS.onclick = function(){event.srcElement.parentElement.appendChild(statementNode());};
nickjillings@1592 385 posttest.appendChild(posttestTitle);
nickjillings@1592 386 posttest.appendChild(buttonAddQ);
nickjillings@1592 387 posttest.appendChild(buttonAddS);
nickjillings@1592 388
nickjillings@1592 389 node.appendChild(pretest);
nickjillings@1592 390 node.appendChild(posttest);
nickjillings@1592 391
nickjillings@1592 392 var newAudioElementButton = document.createElement("button");
nickjillings@1592 393 newAudioElementButton.textContent = "Add audio element";
nickjillings@1592 394 newAudioElementButton.onclick = function(){
nickjillings@1592 395 event.srcElement.parentElement.appendChild(audioElementNode());
nickjillings@1592 396 };
nickjillings@1592 397 node.appendChild(newAudioElementButton);
nickjillings@1592 398
nickjillings@1592 399 var newCommentButton = document.createElement("button");
nickjillings@1592 400 newCommentButton.textContent = "Add Comment Box";
nickjillings@1592 401 newCommentButton.onclick = function() {
nickjillings@1592 402 event.srcElement.parentElement.appendChild(commentBox());
nickjillings@1592 403 };
nickjillings@1592 404 node.appendChild(newCommentButton);
nickjillings@1592 405
nickjillings@1759 406 var newInterface = document.createElement("button");
nickjillings@1759 407 newInterface.textContent = "Add Interface";
nickjillings@1759 408 newInterface.onclick = function() {
nickjillings@1759 409 event.srcElement.parentElement.appendChild(interfaceNode());
nickjillings@1759 410 };
nickjillings@1759 411 node.appendChild(newInterface);
nickjillings@1759 412
nickjillings@1592 413 var removeButton = document.createElement("button");
nickjillings@1592 414 removeButton.textContent = "Remove Audio Holder";
nickjillings@1592 415 removeButton.onclick = removeNode;
nickjillings@1592 416 node.appendChild(removeButton);
nickjillings@1592 417 return node;
nickjillings@1592 418 }
nickjillings@1592 419
nickjillings@1592 420 function audioElementNode() {
nickjillings@1592 421 var node = document.createElement('div');
nickjillings@1592 422 node.setAttribute('class','head');
nickjillings@1592 423 node.setAttribute('name','audio-element');
nickjillings@1592 424 var nodeTitle = document.createElement('span');
nickjillings@1757 425 nodeTitle.textContent = 'Audio Element';
nickjillings@1592 426
nickjillings@1592 427 var attributes = document.createElement("div");
nickjillings@1592 428 attributes.setAttribute('class','attrib');
nickjillings@1594 429 var id = attributePair("ID:","text",true);
nickjillings@1594 430 var url = attributePair("URL:","text",true);
nickjillings@1592 431 id.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 432 url.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 433
nickjillings@1592 434 node.appendChild(nodeTitle);
nickjillings@1592 435 node.appendChild(attributes);
nickjillings@1592 436
nickjillings@1592 437 var removeButton = document.createElement("button");
nickjillings@1592 438 removeButton.textContent = "Remove Audio Element";
nickjillings@1592 439 removeButton.onclick = removeNode;
nickjillings@1592 440 node.appendChild(removeButton);
nickjillings@1592 441 return node;
nickjillings@1592 442 }
nickjillings@1592 443
nickjillings@1592 444 function commentBox() {
nickjillings@1592 445 var node = document.createElement('div');
nickjillings@1592 446 node.setAttribute('class','head');
nickjillings@1592 447 node.setAttribute('name','comment-question');
nickjillings@1592 448 var nodeTitle = document.createElement('h4');
nickjillings@1592 449 nodeTitle.textContent = "Comment Box";
nickjillings@1592 450
nickjillings@1592 451 var attributes = document.createElement('div');
nickjillings@1592 452 attributes.setAttribute('class','attrib');
nickjillings@1594 453 var id = attributePair("ID:",'text',true);
nickjillings@1594 454 var question = attributePair("Question:",'text',true);
nickjillings@1757 455 question[1].style.width = "500px";
nickjillings@1592 456 id.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 457 question.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 458
nickjillings@1592 459 var removeButton = document.createElement("button");
nickjillings@1592 460 removeButton.textContent = "Remove Comment Box";
nickjillings@1592 461 removeButton.onclick = removeNode;
nickjillings@1592 462
nickjillings@1592 463 node.appendChild(nodeTitle);
nickjillings@1592 464 node.appendChild(attributes);
nickjillings@1592 465 node.appendChild(removeButton);
nickjillings@1592 466 return node;
nickjillings@1591 467 }
nickjillings@1756 468
nickjillings@1759 469 function interfaceNode() {
nickjillings@1759 470 var selectedInterface = document.getElementById('interface').value;
nickjillings@1759 471 var node = document.createElement('div');
nickjillings@1759 472 node.setAttribute('class','head');
nickjillings@1759 473 node.setAttribute('name','interface-options');
nickjillings@1759 474 var nodeTitle = document.createElement('h4');
nickjillings@1759 475 nodeTitle.textContent = "Interface";
nickjillings@1759 476
nickjillings@1759 477 var attributes = document.createElement('div');
nickjillings@1759 478 attributes.setAttribute('class','attrib');
nickjillings@1759 479 var title = attributePair('Title: ','text',false);
nickjillings@1759 480 title[1].style.width = "500px";
nickjillings@1759 481
nickjillings@1759 482 var addMarker = document.createElement('button');
nickjillings@1759 483 addMarker.textContent = "Add Scale Marker";
nickjillings@1759 484 addMarker.onclick = function() {
nickjillings@1759 485 event.srcElement.parentElement.appendChild(newScaleMarker());
nickjillings@1759 486 };
nickjillings@1759 487
nickjillings@1759 488 title.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1759 489
nickjillings@1759 490 var removeButton = document.createElement("button");
nickjillings@1759 491 removeButton.textContent = "Remove Interface";
nickjillings@1759 492 removeButton.onclick = removeNode;
nickjillings@1759 493
nickjillings@1759 494 node.appendChild(nodeTitle);
nickjillings@1759 495 node.appendChild(attributes);
nickjillings@1759 496 node.appendChild(addMarker);
nickjillings@1759 497 node.appendChild(removeButton);
nickjillings@1759 498 return node;
nickjillings@1759 499 }
nickjillings@1759 500
nickjillings@1759 501 function newScaleMarker() {
nickjillings@1759 502 var node = document.createElement('div');
nickjillings@1759 503 node.setAttribute('class','head');
nickjillings@1759 504 node.setAttribute('name','interface-options');
nickjillings@1759 505 var nodeTitle = document.createElement('span');
nickjillings@1759 506 nodeTitle.textContent = "Marker";
nickjillings@1759 507 var attributes = document.createElement('div');
nickjillings@1759 508 attributes.setAttribute('class','attrib');
nickjillings@1759 509 var text = attributePair('Text: ','text',true);
nickjillings@1759 510 var position = attributePair('Positon','number',true);
nickjillings@1759 511
nickjillings@1759 512 text.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1759 513 position.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1759 514
nickjillings@1759 515 var removeButton = document.createElement("button");
nickjillings@1759 516 removeButton.textContent = "Remove Marker";
nickjillings@1759 517 removeButton.onclick = removeNode;
nickjillings@1759 518
nickjillings@1759 519 node.appendChild(nodeTitle);
nickjillings@1759 520 node.appendChild(attributes);
nickjillings@1759 521 node.appendChild(removeButton);
nickjillings@1759 522 return node;
nickjillings@1759 523 }
nickjillings@1756 524
nickjillings@1756 525 function handleDragOver(e) {
nickjillings@1756 526 e.stopPropagation();
nickjillings@1756 527 e.preventDefault();
nickjillings@1756 528 }
nickjillings@1756 529 function handleDragEnter(e) {
nickjillings@1756 530 e.stopPropagation();
nickjillings@1756 531 e.preventDefault();
nickjillings@1756 532 this.style.backgroundColor = '#AAFFAA';
nickjillings@1756 533 }
nickjillings@1756 534 function handleDragLeave(e) {
nickjillings@1756 535 e.stopPropagation();
nickjillings@1756 536 e.preventDefault();
nickjillings@1756 537 this.style.backgroundColor = "#FFFFFF";
nickjillings@1756 538 }
nickjillings@1756 539 function handleDrop(e) {
nickjillings@1756 540 e.stopPropagation();
nickjillings@1756 541 e.preventDefault();
nickjillings@1756 542
nickjillings@1756 543 var file = e.dataTransfer.files[0];
nickjillings@1756 544
nickjillings@1756 545 // Uses HTML5 FileAPI - https://w3c.github.io/FileAPI/#filereader-interface
nickjillings@1756 546 var reader = new FileReader();
nickjillings@1757 547 reader.onload = function() {
nickjillings@1757 548 var parse = new DOMParser();
nickjillings@1757 549 var xml = parse.parseFromString(reader.result,'text/xml');
nickjillings@1757 550 importXML(xml);
nickjillings@1757 551 };
nickjillings@1756 552 reader.readAsText(file);
nickjillings@1757 553
nickjillings@1756 554 }
nickjillings@1757 555 var g_XML;
nickjillings@1756 556
nickjillings@1756 557 function importXML(xml) {
nickjillings@1757 558 g_XML = xml;
nickjillings@1757 559
nickjillings@1757 560 var root = xml.getElementsByTagName('BrowserEvalProjectDocument')[0];
nickjillings@1757 561 var setup = xml.getElementsByTagName('setup')[0];
nickjillings@1757 562 document.getElementById('interface').value = setup.getAttribute('interface');
nickjillings@1757 563 document.getElementById('projectReturn').value = setup.getAttribute('projectReturn');
nickjillings@1757 564 document.getElementById('randomisePageOrder').checked = setup.getAttribute('randomiseOrder');
nickjillings@1757 565 document.getElementById('collectMetrics').checked = setup.getAttribute('collectMetrics');
nickjillings@1757 566
nickjillings@1757 567 var globalPreTest = setup.getElementsByTagName('PreTest')[0];
nickjillings@1757 568 var globalPostTest = setup.getElementsByTagName('PostTest')[0];
nickjillings@1757 569 for (var i=0; i<globalPreTest.childElementCount; i++) {
nickjillings@1757 570 var child = globalPreTest.children[i];
nickjillings@1757 571 var node;
nickjillings@1757 572 if (child.nodeName == "question") {
nickjillings@1757 573 node = questionNode();
nickjillings@1757 574 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1757 575 attribs[0].value = child.id;
nickjillings@1757 576 attribs[1].value = child.textContent;
nickjillings@1757 577 attribs[2].checked = child.getAttribute('mandatory');
nickjillings@1757 578 } else if (child.nodeName == "statement") {
nickjillings@1757 579 node = statementNode();
nickjillings@1757 580 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1757 581 attribs[0].value = child.textContent;
nickjillings@1757 582 }
nickjillings@1757 583 document.getElementById('globalPreTest').appendChild(node);
nickjillings@1757 584 }
nickjillings@1757 585
nickjillings@1757 586 for (var i=0; i<globalPostTest.childElementCount; i++) {
nickjillings@1757 587 var child = globalPostTest.children[i];
nickjillings@1757 588 var node;
nickjillings@1757 589 if (child.nodeName == "question") {
nickjillings@1757 590 node = questionNode();
nickjillings@1757 591 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1757 592 attribs[0].value = child.id;
nickjillings@1757 593 attribs[1].value = child.textContent;
nickjillings@1757 594 attribs[2].checked = child.getAttribute('mandatory');
nickjillings@1757 595 } else if (child.nodeName == "statement") {
nickjillings@1757 596 node = statementNode();
nickjillings@1757 597 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1757 598 attribs[0].value = child.textContent;
nickjillings@1757 599 }
nickjillings@1757 600 document.getElementById('globalPostTest').appendChild(node);
nickjillings@1757 601 }
nickjillings@1757 602
nickjillings@1758 603 // Metric Enable Flags
nickjillings@1758 604 var mEnable = setup.getElementsByTagName('Metric')[0].getElementsByTagName('metricEnable');
nickjillings@1758 605 for (var i=0; i<mEnable.length; i++) {
nickjillings@1758 606 var node = mEnable[i];
nickjillings@1758 607 var enabled = node.textContent;
nickjillings@1758 608 document.getElementById(enabled).checked = true;
nickjillings@1758 609 }
nickjillings@1758 610
nickjillings@1757 611 var audioHolders = root.getElementsByTagName('audioHolder');
nickjillings@1757 612 for (var i=0; i<audioHolders.length; i++) {
nickjillings@1757 613 var audioHolderDOM = audioHolderNode();
nickjillings@1757 614 var attribs = audioHolderDOM.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1757 615 attribs[0].value = audioHolders[i].id;
nickjillings@1757 616 attribs[1].value = audioHolders[i].getAttribute('sampleRate');
nickjillings@1757 617 attribs[2].value = audioHolders[i].getAttribute('hostURL');
nickjillings@1757 618 attribs[3].checked = audioHolders[i].getAttribute('randomiseOrder');
nickjillings@1757 619 attribs[4].value = audioHolders[i].getAttribute('repeatCount');
nickjillings@1757 620 attribs[5].checked = audioHolders[i].getAttribute('loop');
nickjillings@1757 621 attribs[6].checked = audioHolders[i].getAttribute('elementComments');
nickjillings@1757 622
nickjillings@1757 623 var PreTest = audioHolders[i].getElementsByTagName('PreTest');
nickjillings@1757 624 var PostTest = audioHolders[i].getElementsByTagName('PostTest');
nickjillings@1757 625 if (PreTest.length != 0) {
nickjillings@1757 626 PreTest = PreTest[0];
nickjillings@1757 627 for (var j=0; j<PreTest.childElementCount; j++) {
nickjillings@1757 628 var child = PreTest.children[j];
nickjillings@1757 629 var node;
nickjillings@1757 630 if (child.nodeName == "question") {
nickjillings@1757 631 node = questionNode();
nickjillings@1757 632 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1757 633 attribs[0].value = child.id;
nickjillings@1757 634 attribs[1].value = child.textContent;
nickjillings@1757 635 attribs[2].checked = child.getAttribute('mandatory');
nickjillings@1757 636 } else if (child.nodeName == "statement") {
nickjillings@1757 637 node = statementNode();
nickjillings@1757 638 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1757 639 attribs[0].value = child.textContent;
nickjillings@1757 640 }
nickjillings@1757 641 audioHolderDOM.children[2].appendChild(node);
nickjillings@1757 642 }
nickjillings@1757 643 }
nickjillings@1757 644 if (PostTest.length != 0) {
nickjillings@1757 645 PostTest = PostTest[0];
nickjillings@1757 646 for (var j=0; j<PostTest.childElementCount; j++) {
nickjillings@1757 647 var child = PostTest.children[j];
nickjillings@1757 648 var node;
nickjillings@1757 649 if (child.nodeName == "question") {
nickjillings@1757 650 node = questionNode();
nickjillings@1757 651 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1757 652 attribs[0].value = child.id;
nickjillings@1757 653 attribs[1].value = child.textContent;
nickjillings@1757 654 attribs[2].checked = child.getAttribute('mandatory');
nickjillings@1757 655 } else if (child.nodeName == "statement") {
nickjillings@1757 656 node = statementNode();
nickjillings@1757 657 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1757 658 attribs[0].value = child.textContent;
nickjillings@1757 659 }
nickjillings@1757 660 audioHolderDOM.children[3].appendChild(node);
nickjillings@1757 661 }
nickjillings@1757 662 }
nickjillings@1759 663 // Process interface
nickjillings@1759 664 var interfaceNodes = audioHolders[i].getElementsByTagName('interface');
nickjillings@1759 665 for (var j=0; j<interfaceNodes.length; j++) {
nickjillings@1759 666 var node = interfaceNode();
nickjillings@1759 667 var child = interfaceNodes[j];
nickjillings@1759 668 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1759 669 attribs[0].value = child.getElementsByTagName('title')[0].textContent;
nickjillings@1759 670
nickjillings@1759 671 var markers = child.getElementsByTagName('scale');
nickjillings@1759 672 for (var k=0; k<markers.length; k++) {
nickjillings@1759 673 var markerNode = newScaleMarker();
nickjillings@1759 674 attribs = markerNode.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1759 675 attribs[0].value = markers[k].textContent;
nickjillings@1759 676 attribs[1].value = markers[k].getAttribute('position');
nickjillings@1759 677 node.appendChild(markerNode);
nickjillings@1759 678 }
nickjillings@1759 679 audioHolderDOM.appendChild(node);
nickjillings@1759 680 }
nickjillings@1759 681
nickjillings@1757 682
nickjillings@1757 683 // Process audio-element
nickjillings@1757 684 var audioElements = audioHolders[i].getElementsByTagName('audioElements');
nickjillings@1757 685 for (var j=0; j<audioElements.length; j++) {
nickjillings@1757 686 var node = audioElementNode();
nickjillings@1757 687 var child = audioElements[j];
nickjillings@1757 688 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1757 689 attribs[0].value = child.id;
nickjillings@1757 690 attribs[1].value = child.getAttribute('url');
nickjillings@1757 691 audioHolderDOM.appendChild(node);
nickjillings@1757 692 }
nickjillings@1757 693
nickjillings@1757 694 // Process comment-question
nickjillings@1757 695 var commentQuestion = audioHolders[0].getElementsByTagName('CommentQuestion');
nickjillings@1757 696 for (var j=0; j<commentQuestion.length; j++) {
nickjillings@1757 697 var node = commentBox();
nickjillings@1757 698 var child = commentQuestion[j];
nickjillings@1757 699 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
nickjillings@1757 700 attribs[0].value = child.id;
nickjillings@1757 701 attribs[1].value = child.textContent;
nickjillings@1757 702 audioHolderDOM.appendChild(node);
nickjillings@1757 703 }
nickjillings@1757 704
nickjillings@1757 705 document.getElementById('setup').appendChild(audioHolderDOM);
nickjillings@1757 706 }
nickjillings@1756 707 }
nickjillings@1591 708 </script>
nickjillings@1591 709 <style>
nickjillings@1591 710 div {
nickjillings@1591 711 padding: 2px;
nickjillings@1591 712 margin-top: 2px;
nickjillings@1591 713 margin-bottom: 2px;
nickjillings@1591 714 }
nickjillings@1591 715 div.head{
nickjillings@1591 716 margin-left: 10px;
nickjillings@1591 717 border: black;
nickjillings@1591 718 border-width: 2px;
nickjillings@1591 719 border-style: solid;
nickjillings@1591 720 }
nickjillings@1591 721 div.attrib{
nickjillings@1591 722 margin-left:25px;
nickjillings@1591 723 border: black;
nickjillings@1591 724 border-width: 2px;
nickjillings@1591 725 border-style: dashed;
nickjillings@1591 726 margin-bottom: 10px;
nickjillings@1591 727 }
nickjillings@1756 728 div#dragFile{
nickjillings@1756 729 height:100px;
nickjillings@1756 730 border-width: 2px;
nickjillings@1756 731 border-style: dashed;
nickjillings@1756 732 margin-bottom: 10px;
nickjillings@1756 733 }
nickjillings@1591 734 </style>
nickjillings@1591 735
nickjillings@1749 736 </head>
nickjillings@1749 737
nickjillings@1749 738 <body>
nickjillings@1591 739 <h1>Create Test Setup XML</h1>
nickjillings@1756 740 <div id="dragFile">
nickjillings@1756 741 <span>Drag and Drop an XML specification file here to auto-load.</span>
nickjillings@1756 742 </div>
nickjillings@1594 743 <button id="validateXML" onclick="buttonClickedValidate();">Validate</button>
nickjillings@1755 744 <button id="createXML" onclick="buttonClickedSubmit();" disabled>Submit</button>
nickjillings@1594 745 <span id="errorMessage" visibility="hidden"></span>
nickjillings@1591 746 <div id="topLevelBody" align="left">
nickjillings@1749 747 <!-- Interface goes here -->
nickjillings@1591 748 <div name='test-setup'>
nickjillings@1591 749 <div id="setup" class="head">
nickjillings@1591 750 <h2>Setup Tag</h2>
nickjillings@1591 751 <div id="setup-attribs" class="attrib">
nickjillings@1591 752 <span>Interface</span>
nickjillings@1591 753 <select id="interface">
nickjillings@1591 754 <option value='APE'>APE</option>
nickjillings@1591 755 </select>
nickjillings@1591 756 <span>Project Return</span>
nickjillings@1594 757 <input type="text" id="projectReturn" mandatory="false">
nickjillings@1591 758 <span>Randomise Test Page Order</span>
nickjillings@1591 759 <input id="randomisePageOrder" type="checkbox" value="false">
nickjillings@1591 760 <span>Collect Session Metrics</span>
nickjillings@1591 761 <input id="collectMetrics" type="checkbox">
nickjillings@1591 762 </div>
nickjillings@1591 763 <div id="globalPreTest" class="head">
nickjillings@1591 764 <h3>Pre Test</h3>
nickjillings@1591 765 <button id="addPreTestQ" onclick="event.srcElement.parentElement.appendChild(questionNode());">Add Pre Test Question</button>
nickjillings@1591 766 <button id="addPreTestS" onclick="event.srcElement.parentElement.appendChild(statementNode());">Add Pre Test Statement</button>
nickjillings@1591 767 </div>
nickjillings@1591 768 <div id="globalPostTest" class="head">
nickjillings@1591 769 <h3>Post Test</h3>
nickjillings@1591 770 <button id="addPreTestQ" onclick="event.srcElement.parentElement.appendChild(questionNode());">Add Post Test Question</button>
nickjillings@1591 771 <button id="addPreTestS" onclick="event.srcElement.parentElement.appendChild(statementNode());">Add Post Test Statement</button>
nickjillings@1591 772 </div>
nickjillings@1591 773 <div id="globalMetric" class="head">
nickjillings@1591 774 <h3>Global Metrics</h3>
nickjillings@1591 775 <div id="globalMetric-attrib" class="attrib">
nickjillings@1591 776 <span>Test Timer</span>
nickjillings@1591 777 <input type="checkbox" id="testTimer" />
nickjillings@1591 778 <span>Element Playback Timer</span>
nickjillings@1591 779 <input type="checkbox" id="elementTimer" />
nickjillings@1591 780 <span>Element Initial Position</span>
nickjillings@1591 781 <input type="checkbox" id="elementInitialPosition" />
nickjillings@1591 782 <span>Element Tracker</span>
nickjillings@1591 783 <input type="checkbox" id="elementTracker" />
nickjillings@1758 784 <span>Element Listen Tracker</span>
nickjillings@1758 785 <input type="checkbox" id="elementListenTracker" />
nickjillings@1591 786 <span>Element Flag Listened To</span>
nickjillings@1595 787 <input type="checkbox" id="elementFlagListenedTo" />
nickjillings@1591 788 <span>Element Flag Moved</span>
nickjillings@1591 789 <input type="checkbox" id="elementFlagMoved" />
nickjillings@1591 790 </div>
nickjillings@1591 791 </div>
nickjillings@1592 792 <button id="addAudioHolder" onclick="event.srcElement.parentElement.appendChild(audioHolderNode());">Add AudioHolder / Test Page</button>
nickjillings@1591 793 </div>
nickjillings@1591 794 </div>
nickjillings@1749 795 </div>
nickjillings@1749 796 </body>
nickjillings@1749 797 </html>