Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 163:9f67e67471ce Dev_main

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