Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1590:abdbbe9a72c4

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