Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 925:82baf45866fc

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Stash create_test. Implementing submit. Need to test on OSX
author Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
date Tue, 02 Jun 2015 15:18:40 +0100
parents 2dc00907c6ab
children 4a0bfa7bef24
rev   line source
n@921 1 <!DOCTYPE html>
n@921 2 <html lang="en">
n@921 3 <head>
n@921 4 <meta charset="utf-8">
n@921 5
n@921 6 <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
n@921 7 Remove this if you use the .htaccess -->
n@921 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
n@921 9
n@921 10 <title>WAET Create Test</title>
n@921 11 <meta name="description" content="">
n@921 12 <meta name="author" content="">
n@921 13
n@921 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@925 94
n@925 95 }
n@925 96 }
n@925 97
n@925 98 function constructPrePost(parent, options) {
n@925 99 for (var i=0; i<options.length; i++) {
n@925 100 var elem = options[i];
n@925 101 var attributes = elem.getElementsByClassName('attrib')[0].getElementsByTagName('input');
n@925 102 if (elem.getAttribute('name') == 'question-node') {
n@925 103 var node = document.createElement('question');
n@925 104 node.setAttribute('id',attributes[0].value);
n@925 105 node.textContent = attributes[1].value;
n@925 106 } else if (elem.getAttribute('name') == 'statement-node') {
n@925 107 var node = document.createElement('statment');
n@925 108 node.textContent = attributes[0].value;
n@925 109 }
n@925 110 parent.appendChild(node);
n@925 111 }
n@925 112 }
n@925 113
n@924 114 function validate() {
n@924 115 var canExport = true;
n@924 116 // Checks if the XML can be created from the given entries
n@924 117 var inputs = document.getElementsByTagName('input');
n@924 118 for (var i=0; i<inputs.length; i++) {
n@924 119 if (inputs[i].type == 'text') {
n@924 120 if (inputs[i].value == "") {
n@924 121 var mandatory = inputs[i].getAttribute('mandatory');
n@924 122 if (mandatory == "true") {
n@924 123 errorInput(inputs[i]);
n@924 124 canExport = false;
n@924 125 } else {
n@924 126 warningInput(inputs[i]);
n@924 127 }
n@924 128 } else {
n@924 129 goodInput(inputs[i]);
n@924 130 }
n@924 131 }
n@924 132 }
n@925 133
n@925 134 var audioHolders = document.getElementsByName('audio-holder');
n@925 135 for (var i=0; i<audioHolders.length; i++) {
n@925 136 var divs = audioHolders[i].getElementsByClassName('head');
n@925 137 var IDs = [];
n@925 138 for (var j=0; j<divs.length; j++) {
n@925 139 if (divs[j].getAttribute('name') == 'audio-element') {
n@925 140 var obj = divs[j].getElementsByClassName('attrib')[0].children[1];
n@925 141 var aeID = obj.value;
n@925 142 if (aeID != "") {
n@925 143 var unique = true;
n@925 144 for (var k=0; k<IDs.length; k++) {
n@925 145 if (aeID == IDs[k]) {
n@925 146 unique = false;
n@925 147 break;
n@925 148 }
n@925 149 }
n@925 150 if (unique == true) {
n@925 151 IDs.push(aeID);
n@925 152 } else {
n@925 153 errorInput(obj);
n@925 154 canExport = false;
n@925 155 }
n@925 156 }
n@925 157 }
n@925 158 }
n@925 159 }
n@924 160 return canExport;
n@924 161 };
n@924 162
n@924 163 function errorInput(node) {
n@924 164 node.style.backgroundColor = "#FF0000";
n@924 165 }
n@924 166
n@924 167 function warningInput(node) {
n@924 168 node.style.backgroundColor = "#FFFF00";
n@924 169 }
n@924 170
n@924 171 function goodInput(node) {
n@924 172 node.style.backgroundColor = "#FFFFFF";
n@924 173 }
n@924 174
n@921 175 function questionNode() {
n@921 176 var node = document.createElement("div");
n@921 177 node.setAttribute('class','head');
n@921 178 node.setAttribute('name','question-node');
n@921 179 var nodeTitle = document.createElement("span");
n@921 180 nodeTitle.textContent = "Question";
n@921 181 var attributes = document.createElement("div");
n@921 182 attributes.setAttribute('class','attrib');
n@924 183 var id = attributePair("ID:","text", true);
n@924 184 var question = attributePair("Question:","text", false);
n@921 185 node.appendChild(nodeTitle);
n@921 186 id.forEach(function(item){attributes.appendChild(item);},false);
n@921 187 question.forEach(function(item){attributes.appendChild(item);},false);
n@921 188 node.appendChild(attributes);
n@922 189
n@922 190 var removeButton = document.createElement("button");
n@922 191 removeButton.textContent = "Remove";
n@922 192 removeButton.onclick = removeNode;
n@922 193 node.appendChild(removeButton);
n@921 194 return node;
n@921 195 }
n@921 196
n@921 197 function statementNode() {
n@921 198 var node = document.createElement("div");
n@921 199 node.setAttribute('class','head');
n@924 200 node.setAttribute('name','statement-node');
n@921 201 var nodeTitle = document.createElement("span");
n@921 202 nodeTitle.textContent = "Statement";
n@921 203 var attributes = document.createElement("div");
n@921 204 attributes.setAttribute('class','attrib');
n@924 205 var statement = attributePair("Statement:","text",false);
n@921 206 node.appendChild(nodeTitle);
n@921 207 statement.forEach(function(item){attributes.appendChild(item);},false);
n@921 208 node.appendChild(attributes);
n@922 209
n@922 210 var removeButton = document.createElement("button");
n@922 211 removeButton.textContent = "Remove";
n@922 212 removeButton.onclick = removeNode;
n@922 213 node.appendChild(removeButton);
n@921 214 return node;
n@921 215 }
n@921 216
n@921 217 function audioHolderNode() {
n@921 218 var audioHolderCounts = document.getElementsByName("audio-holder").length;
n@921 219 var node = document.createElement("div");
n@921 220 node.setAttribute("class","head");
n@921 221 node.setAttribute("name","audio-holder");
n@922 222 node.setAttribute("id","audio-holder-"+audioHolderCounts);
n@921 223 var nodeTitle = document.createElement("span");
n@922 224 nodeTitle.textContent = "Audio Holder "+(audioHolderCounts+1);
n@921 225
n@921 226 var attributes = document.createElement("div");
n@921 227 attributes.setAttribute('class','attrib');
n@924 228 var id = attributePair("ID:","text",true);
n@922 229 id[1].value=audioHolderCounts;
n@924 230 var hostURL = attributePair("Host URL:", "text",false);
n@924 231 var sampleRate = attributePair("Sample Rate:","text",false);
n@922 232 var randomiseOrder = attributePair("Randomise Element Order:","checkbox");
n@922 233 var repeatCount = attributePair("Repeat Page Count:","number");
n@922 234 repeatCount[1].value = 0;
n@922 235 var loop = attributePair("Loop Element Playback","checkbox");
n@922 236 var elementComments = attributePair("Enable Comment Boxes","checkbox");
n@922 237 id.forEach(function(item){attributes.appendChild(item);},false);
n@922 238 hostURL.forEach(function(item){attributes.appendChild(item);},false);
n@922 239 sampleRate.forEach(function(item){attributes.appendChild(item);},false);
n@922 240 hostURL.forEach(function(item){attributes.appendChild(item);},false);
n@922 241 randomiseOrder.forEach(function(item){attributes.appendChild(item);},false);
n@922 242 repeatCount.forEach(function(item){attributes.appendChild(item);},false);
n@922 243 loop.forEach(function(item){attributes.appendChild(item);},false);
n@922 244 elementComments.forEach(function(item){attributes.appendChild(item);},false);
n@922 245
n@922 246 node.appendChild(nodeTitle);
n@922 247 node.appendChild(attributes);
n@922 248
n@922 249 var pretest = document.createElement("div");
n@922 250 pretest.setAttribute('class','head');
n@922 251 pretest.setAttribute('name','pre-test');
n@922 252 var pretestTitle = document.createElement("h4");
n@922 253 pretestTitle.textContent = "Pre Test";
n@922 254 var buttonAddQ = document.createElement("button");
n@922 255 buttonAddQ.textContent = "Add Pre Test Question";
n@922 256 buttonAddQ.onclick = function(){event.srcElement.parentElement.appendChild(questionNode());};
n@922 257 var buttonAddS = document.createElement("button");
n@922 258 buttonAddS.textContent = "Add Pre Test Statement";
n@922 259 buttonAddS.onclick = function(){event.srcElement.parentElement.appendChild(statementNode());};
n@922 260 pretest.appendChild(pretestTitle);
n@922 261 pretest.appendChild(buttonAddQ);
n@922 262 pretest.appendChild(buttonAddS);
n@922 263
n@922 264 var posttest = document.createElement("div");
n@922 265 posttest.setAttribute('class','head');
n@922 266 posttest.setAttribute('name','post-test');
n@922 267 var posttestTitle = document.createElement("h4");
n@922 268 posttestTitle.textContent = "Post Test";
n@922 269 var buttonAddQ = document.createElement("button");
n@922 270 buttonAddQ.textContent = "Add Post Test Question";
n@922 271 buttonAddQ.onclick = function(){event.srcElement.parentElement.appendChild(questionNode());};
n@922 272 var buttonAddS = document.createElement("button");
n@922 273 buttonAddS.textContent = "Add Post Test Statement";
n@922 274 buttonAddS.onclick = function(){event.srcElement.parentElement.appendChild(statementNode());};
n@922 275 posttest.appendChild(posttestTitle);
n@922 276 posttest.appendChild(buttonAddQ);
n@922 277 posttest.appendChild(buttonAddS);
n@922 278
n@922 279 node.appendChild(pretest);
n@922 280 node.appendChild(posttest);
n@922 281
n@922 282 var newAudioElementButton = document.createElement("button");
n@922 283 newAudioElementButton.textContent = "Add audio element";
n@922 284 newAudioElementButton.onclick = function(){
n@922 285 event.srcElement.parentElement.appendChild(audioElementNode());
n@922 286 };
n@922 287 node.appendChild(newAudioElementButton);
n@922 288
n@922 289 var newCommentButton = document.createElement("button");
n@922 290 newCommentButton.textContent = "Add Comment Box";
n@922 291 newCommentButton.onclick = function() {
n@922 292 event.srcElement.parentElement.appendChild(commentBox());
n@922 293 };
n@922 294 node.appendChild(newCommentButton);
n@922 295
n@922 296 var removeButton = document.createElement("button");
n@922 297 removeButton.textContent = "Remove Audio Holder";
n@922 298 removeButton.onclick = removeNode;
n@922 299 node.appendChild(removeButton);
n@922 300 return node;
n@922 301 }
n@922 302
n@922 303 function audioElementNode() {
n@922 304 var parentStructure = event.srcElement.parentElement.childNodes;
n@922 305 var audioElemCounts = 0;
n@922 306 for (var i=0; i<parentStructure.length; i++) {
n@922 307 if (parentStructure[i].getAttribute('name') == "audio-element")
n@922 308 {audioElemCounts++;}
n@922 309 }
n@922 310 var node = document.createElement('div');
n@922 311 node.setAttribute('class','head');
n@922 312 node.setAttribute('name','audio-element');
n@922 313 var nodeTitle = document.createElement('span');
n@922 314 nodeTitle.textContent = 'Audio Element '+(audioElemCounts+1);
n@922 315
n@922 316 var attributes = document.createElement("div");
n@922 317 attributes.setAttribute('class','attrib');
n@924 318 var id = attributePair("ID:","text",true);
n@922 319 id[1].value = audioElemCounts;
n@924 320 var url = attributePair("URL:","text",true);
n@922 321 id.forEach(function(item){attributes.appendChild(item);},false);
n@922 322 url.forEach(function(item){attributes.appendChild(item);},false);
n@922 323
n@922 324 node.appendChild(nodeTitle);
n@922 325 node.appendChild(attributes);
n@922 326
n@922 327 var removeButton = document.createElement("button");
n@922 328 removeButton.textContent = "Remove Audio Element";
n@922 329 removeButton.onclick = removeNode;
n@922 330 node.appendChild(removeButton);
n@922 331 return node;
n@922 332 }
n@922 333
n@922 334 function commentBox() {
n@922 335 var node = document.createElement('div');
n@922 336 node.setAttribute('class','head');
n@922 337 node.setAttribute('name','comment-question');
n@922 338 var nodeTitle = document.createElement('h4');
n@922 339 nodeTitle.textContent = "Comment Box";
n@922 340
n@922 341 var attributes = document.createElement('div');
n@922 342 attributes.setAttribute('class','attrib');
n@924 343 var id = attributePair("ID:",'text',true);
n@924 344 var question = attributePair("Question:",'text',true);
n@922 345 id.forEach(function(item){attributes.appendChild(item);},false);
n@922 346 question.forEach(function(item){attributes.appendChild(item);},false);
n@922 347
n@922 348 var removeButton = document.createElement("button");
n@922 349 removeButton.textContent = "Remove Comment Box";
n@922 350 removeButton.onclick = removeNode;
n@922 351
n@922 352 node.appendChild(nodeTitle);
n@922 353 node.appendChild(attributes);
n@922 354 node.appendChild(removeButton);
n@922 355 return node;
n@921 356 }
n@921 357 </script>
n@921 358 <style>
n@921 359 div {
n@921 360 padding: 2px;
n@921 361 margin-top: 2px;
n@921 362 margin-bottom: 2px;
n@921 363 }
n@921 364 div.head{
n@921 365 margin-left: 10px;
n@921 366 border: black;
n@921 367 border-width: 2px;
n@921 368 border-style: solid;
n@921 369 }
n@921 370 div.attrib{
n@921 371 margin-left:25px;
n@921 372 border: black;
n@921 373 border-width: 2px;
n@921 374 border-style: dashed;
n@921 375 margin-bottom: 10px;
n@921 376 }
n@921 377 </style>
n@921 378
n@921 379 </head>
n@921 380
n@921 381 <body>
n@921 382 <h1>Create Test Setup XML</h1>
n@924 383 <button id="validateXML" onclick="buttonClickedValidate();">Validate</button>
n@924 384 <button id="createXML" onclick="buttonClickedValidate();" disabled>Submit</button>
n@924 385 <span id="errorMessage" visibility="hidden"></span>
n@921 386 <div id="topLevelBody" align="left">
n@921 387 <!-- Interface goes here -->
n@921 388 <div name='test-setup'>
n@921 389 <div id="setup" class="head">
n@921 390 <h2>Setup Tag</h2>
n@921 391 <div id="setup-attribs" class="attrib">
n@921 392 <span>Interface</span>
n@921 393 <select id="interface">
n@921 394 <option value='APE'>APE</option>
n@921 395 </select>
n@921 396 <span>Project Return</span>
n@924 397 <input type="text" id="projectReturn" mandatory="false">
n@921 398 <span>Randomise Test Page Order</span>
n@921 399 <input id="randomisePageOrder" type="checkbox" value="false">
n@921 400 <span>Collect Session Metrics</span>
n@921 401 <input id="collectMetrics" type="checkbox">
n@921 402 </div>
n@921 403 <div id="globalPreTest" class="head">
n@921 404 <h3>Pre Test</h3>
n@921 405 <button id="addPreTestQ" onclick="event.srcElement.parentElement.appendChild(questionNode());">Add Pre Test Question</button>
n@921 406 <button id="addPreTestS" onclick="event.srcElement.parentElement.appendChild(statementNode());">Add Pre Test Statement</button>
n@921 407 </div>
n@921 408 <div id="globalPostTest" class="head">
n@921 409 <h3>Post Test</h3>
n@921 410 <button id="addPreTestQ" onclick="event.srcElement.parentElement.appendChild(questionNode());">Add Post Test Question</button>
n@921 411 <button id="addPreTestS" onclick="event.srcElement.parentElement.appendChild(statementNode());">Add Post Test Statement</button>
n@921 412 </div>
n@921 413 <div id="globalMetric" class="head">
n@921 414 <h3>Global Metrics</h3>
n@921 415 <div id="globalMetric-attrib" class="attrib">
n@921 416 <span>Test Timer</span>
n@921 417 <input type="checkbox" id="testTimer" />
n@921 418 <span>Element Playback Timer</span>
n@921 419 <input type="checkbox" id="elementTimer" />
n@921 420 <span>Element Initial Position</span>
n@921 421 <input type="checkbox" id="elementInitialPosition" />
n@921 422 <span>Element Tracker</span>
n@921 423 <input type="checkbox" id="elementTracker" />
n@921 424 <span>Element Flag Listened To</span>
n@925 425 <input type="checkbox" id="elementFlagListenedTo" />
n@921 426 <span>Element Flag Moved</span>
n@921 427 <input type="checkbox" id="elementFlagMoved" />
n@921 428 </div>
n@921 429 </div>
n@922 430 <button id="addAudioHolder" onclick="event.srcElement.parentElement.appendChild(audioHolderNode());">Add AudioHolder / Test Page</button>
n@921 431 </div>
n@921 432 </div>
n@921 433 </div>
n@921 434 </body>
n@921 435 </html>