Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1756:4166218d8110

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