Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1015:9ad0ee1430de

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