Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 166:dcc553484103 Dev_main

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