Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 924:2dc00907c6ab

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
create_test: Added crude validation tool.
author Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
date Tue, 02 Jun 2015 12:24:19 +0100
parents 95ff666edb66
children 82baf45866fc
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@924 51 errMsg.textContent = "There were some errors with your XML. Any input boxes highlighted in red are invalid because they are empty. 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@924 63 function validate() {
n@924 64 var canExport = true;
n@924 65 // Checks if the XML can be created from the given entries
n@924 66 var inputs = document.getElementsByTagName('input');
n@924 67 for (var i=0; i<inputs.length; i++) {
n@924 68 if (inputs[i].type == 'text') {
n@924 69 if (inputs[i].value == "") {
n@924 70 var mandatory = inputs[i].getAttribute('mandatory');
n@924 71 if (mandatory == "true") {
n@924 72 errorInput(inputs[i]);
n@924 73 canExport = false;
n@924 74 } else {
n@924 75 warningInput(inputs[i]);
n@924 76 }
n@924 77 } else {
n@924 78 goodInput(inputs[i]);
n@924 79 }
n@924 80 }
n@924 81 }
n@924 82 return canExport;
n@924 83 };
n@924 84
n@924 85 function errorInput(node) {
n@924 86 node.style.backgroundColor = "#FF0000";
n@924 87 }
n@924 88
n@924 89 function warningInput(node) {
n@924 90 node.style.backgroundColor = "#FFFF00";
n@924 91 }
n@924 92
n@924 93 function goodInput(node) {
n@924 94 node.style.backgroundColor = "#FFFFFF";
n@924 95 }
n@924 96
n@921 97 function questionNode() {
n@921 98 var node = document.createElement("div");
n@921 99 node.setAttribute('class','head');
n@921 100 node.setAttribute('name','question-node');
n@921 101 var nodeTitle = document.createElement("span");
n@921 102 nodeTitle.textContent = "Question";
n@921 103 var attributes = document.createElement("div");
n@921 104 attributes.setAttribute('class','attrib');
n@924 105 var id = attributePair("ID:","text", true);
n@924 106 var question = attributePair("Question:","text", false);
n@921 107 node.appendChild(nodeTitle);
n@921 108 id.forEach(function(item){attributes.appendChild(item);},false);
n@921 109 question.forEach(function(item){attributes.appendChild(item);},false);
n@921 110 node.appendChild(attributes);
n@922 111
n@922 112 var removeButton = document.createElement("button");
n@922 113 removeButton.textContent = "Remove";
n@922 114 removeButton.onclick = removeNode;
n@922 115 node.appendChild(removeButton);
n@921 116 return node;
n@921 117 }
n@921 118
n@921 119 function statementNode() {
n@921 120 var node = document.createElement("div");
n@921 121 node.setAttribute('class','head');
n@924 122 node.setAttribute('name','statement-node');
n@921 123 var nodeTitle = document.createElement("span");
n@921 124 nodeTitle.textContent = "Statement";
n@921 125 var attributes = document.createElement("div");
n@921 126 attributes.setAttribute('class','attrib');
n@924 127 var statement = attributePair("Statement:","text",false);
n@921 128 node.appendChild(nodeTitle);
n@921 129 statement.forEach(function(item){attributes.appendChild(item);},false);
n@921 130 node.appendChild(attributes);
n@922 131
n@922 132 var removeButton = document.createElement("button");
n@922 133 removeButton.textContent = "Remove";
n@922 134 removeButton.onclick = removeNode;
n@922 135 node.appendChild(removeButton);
n@921 136 return node;
n@921 137 }
n@921 138
n@921 139 function audioHolderNode() {
n@921 140 var audioHolderCounts = document.getElementsByName("audio-holder").length;
n@921 141 var node = document.createElement("div");
n@921 142 node.setAttribute("class","head");
n@921 143 node.setAttribute("name","audio-holder");
n@922 144 node.setAttribute("id","audio-holder-"+audioHolderCounts);
n@921 145 var nodeTitle = document.createElement("span");
n@922 146 nodeTitle.textContent = "Audio Holder "+(audioHolderCounts+1);
n@921 147
n@921 148 var attributes = document.createElement("div");
n@921 149 attributes.setAttribute('class','attrib');
n@924 150 var id = attributePair("ID:","text",true);
n@922 151 id[1].value=audioHolderCounts;
n@924 152 var hostURL = attributePair("Host URL:", "text",false);
n@924 153 var sampleRate = attributePair("Sample Rate:","text",false);
n@922 154 var randomiseOrder = attributePair("Randomise Element Order:","checkbox");
n@922 155 var repeatCount = attributePair("Repeat Page Count:","number");
n@922 156 repeatCount[1].value = 0;
n@922 157 var loop = attributePair("Loop Element Playback","checkbox");
n@922 158 var elementComments = attributePair("Enable Comment Boxes","checkbox");
n@922 159 id.forEach(function(item){attributes.appendChild(item);},false);
n@922 160 hostURL.forEach(function(item){attributes.appendChild(item);},false);
n@922 161 sampleRate.forEach(function(item){attributes.appendChild(item);},false);
n@922 162 hostURL.forEach(function(item){attributes.appendChild(item);},false);
n@922 163 randomiseOrder.forEach(function(item){attributes.appendChild(item);},false);
n@922 164 repeatCount.forEach(function(item){attributes.appendChild(item);},false);
n@922 165 loop.forEach(function(item){attributes.appendChild(item);},false);
n@922 166 elementComments.forEach(function(item){attributes.appendChild(item);},false);
n@922 167
n@922 168 node.appendChild(nodeTitle);
n@922 169 node.appendChild(attributes);
n@922 170
n@922 171 var pretest = document.createElement("div");
n@922 172 pretest.setAttribute('class','head');
n@922 173 pretest.setAttribute('name','pre-test');
n@922 174 var pretestTitle = document.createElement("h4");
n@922 175 pretestTitle.textContent = "Pre Test";
n@922 176 var buttonAddQ = document.createElement("button");
n@922 177 buttonAddQ.textContent = "Add Pre Test Question";
n@922 178 buttonAddQ.onclick = function(){event.srcElement.parentElement.appendChild(questionNode());};
n@922 179 var buttonAddS = document.createElement("button");
n@922 180 buttonAddS.textContent = "Add Pre Test Statement";
n@922 181 buttonAddS.onclick = function(){event.srcElement.parentElement.appendChild(statementNode());};
n@922 182 pretest.appendChild(pretestTitle);
n@922 183 pretest.appendChild(buttonAddQ);
n@922 184 pretest.appendChild(buttonAddS);
n@922 185
n@922 186 var posttest = document.createElement("div");
n@922 187 posttest.setAttribute('class','head');
n@922 188 posttest.setAttribute('name','post-test');
n@922 189 var posttestTitle = document.createElement("h4");
n@922 190 posttestTitle.textContent = "Post Test";
n@922 191 var buttonAddQ = document.createElement("button");
n@922 192 buttonAddQ.textContent = "Add Post Test Question";
n@922 193 buttonAddQ.onclick = function(){event.srcElement.parentElement.appendChild(questionNode());};
n@922 194 var buttonAddS = document.createElement("button");
n@922 195 buttonAddS.textContent = "Add Post Test Statement";
n@922 196 buttonAddS.onclick = function(){event.srcElement.parentElement.appendChild(statementNode());};
n@922 197 posttest.appendChild(posttestTitle);
n@922 198 posttest.appendChild(buttonAddQ);
n@922 199 posttest.appendChild(buttonAddS);
n@922 200
n@922 201 node.appendChild(pretest);
n@922 202 node.appendChild(posttest);
n@922 203
n@922 204 var newAudioElementButton = document.createElement("button");
n@922 205 newAudioElementButton.textContent = "Add audio element";
n@922 206 newAudioElementButton.onclick = function(){
n@922 207 event.srcElement.parentElement.appendChild(audioElementNode());
n@922 208 };
n@922 209 node.appendChild(newAudioElementButton);
n@922 210
n@922 211 var newCommentButton = document.createElement("button");
n@922 212 newCommentButton.textContent = "Add Comment Box";
n@922 213 newCommentButton.onclick = function() {
n@922 214 event.srcElement.parentElement.appendChild(commentBox());
n@922 215 };
n@922 216 node.appendChild(newCommentButton);
n@922 217
n@922 218 var removeButton = document.createElement("button");
n@922 219 removeButton.textContent = "Remove Audio Holder";
n@922 220 removeButton.onclick = removeNode;
n@922 221 node.appendChild(removeButton);
n@922 222 return node;
n@922 223 }
n@922 224
n@922 225 function audioElementNode() {
n@922 226 var parentStructure = event.srcElement.parentElement.childNodes;
n@922 227 var audioElemCounts = 0;
n@922 228 for (var i=0; i<parentStructure.length; i++) {
n@922 229 if (parentStructure[i].getAttribute('name') == "audio-element")
n@922 230 {audioElemCounts++;}
n@922 231 }
n@922 232 var node = document.createElement('div');
n@922 233 node.setAttribute('class','head');
n@922 234 node.setAttribute('name','audio-element');
n@922 235 var nodeTitle = document.createElement('span');
n@922 236 nodeTitle.textContent = 'Audio Element '+(audioElemCounts+1);
n@922 237
n@922 238 var attributes = document.createElement("div");
n@922 239 attributes.setAttribute('class','attrib');
n@924 240 var id = attributePair("ID:","text",true);
n@922 241 id[1].value = audioElemCounts;
n@924 242 var url = attributePair("URL:","text",true);
n@922 243 id.forEach(function(item){attributes.appendChild(item);},false);
n@922 244 url.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 removeButton = document.createElement("button");
n@922 250 removeButton.textContent = "Remove Audio Element";
n@922 251 removeButton.onclick = removeNode;
n@922 252 node.appendChild(removeButton);
n@922 253 return node;
n@922 254 }
n@922 255
n@922 256 function commentBox() {
n@922 257 var node = document.createElement('div');
n@922 258 node.setAttribute('class','head');
n@922 259 node.setAttribute('name','comment-question');
n@922 260 var nodeTitle = document.createElement('h4');
n@922 261 nodeTitle.textContent = "Comment Box";
n@922 262
n@922 263 var attributes = document.createElement('div');
n@922 264 attributes.setAttribute('class','attrib');
n@924 265 var id = attributePair("ID:",'text',true);
n@924 266 var question = attributePair("Question:",'text',true);
n@922 267 id.forEach(function(item){attributes.appendChild(item);},false);
n@922 268 question.forEach(function(item){attributes.appendChild(item);},false);
n@922 269
n@922 270 var removeButton = document.createElement("button");
n@922 271 removeButton.textContent = "Remove Comment Box";
n@922 272 removeButton.onclick = removeNode;
n@922 273
n@922 274 node.appendChild(nodeTitle);
n@922 275 node.appendChild(attributes);
n@922 276 node.appendChild(removeButton);
n@922 277 return node;
n@921 278 }
n@921 279 </script>
n@921 280 <style>
n@921 281 div {
n@921 282 padding: 2px;
n@921 283 margin-top: 2px;
n@921 284 margin-bottom: 2px;
n@921 285 }
n@921 286 div.head{
n@921 287 margin-left: 10px;
n@921 288 border: black;
n@921 289 border-width: 2px;
n@921 290 border-style: solid;
n@921 291 }
n@921 292 div.attrib{
n@921 293 margin-left:25px;
n@921 294 border: black;
n@921 295 border-width: 2px;
n@921 296 border-style: dashed;
n@921 297 margin-bottom: 10px;
n@921 298 }
n@921 299 </style>
n@921 300
n@921 301 </head>
n@921 302
n@921 303 <body>
n@921 304 <h1>Create Test Setup XML</h1>
n@924 305 <button id="validateXML" onclick="buttonClickedValidate();">Validate</button>
n@924 306 <button id="createXML" onclick="buttonClickedValidate();" disabled>Submit</button>
n@924 307 <span id="errorMessage" visibility="hidden"></span>
n@921 308 <div id="topLevelBody" align="left">
n@921 309 <!-- Interface goes here -->
n@921 310 <div name='test-setup'>
n@921 311 <div id="setup" class="head">
n@921 312 <h2>Setup Tag</h2>
n@921 313 <div id="setup-attribs" class="attrib">
n@921 314 <span>Interface</span>
n@921 315 <select id="interface">
n@921 316 <option value='APE'>APE</option>
n@921 317 </select>
n@921 318 <span>Project Return</span>
n@924 319 <input type="text" id="projectReturn" mandatory="false">
n@921 320 <span>Randomise Test Page Order</span>
n@921 321 <input id="randomisePageOrder" type="checkbox" value="false">
n@921 322 <span>Collect Session Metrics</span>
n@921 323 <input id="collectMetrics" type="checkbox">
n@921 324 </div>
n@921 325 <div id="globalPreTest" class="head">
n@921 326 <h3>Pre Test</h3>
n@921 327 <button id="addPreTestQ" onclick="event.srcElement.parentElement.appendChild(questionNode());">Add Pre Test Question</button>
n@921 328 <button id="addPreTestS" onclick="event.srcElement.parentElement.appendChild(statementNode());">Add Pre Test Statement</button>
n@921 329 </div>
n@921 330 <div id="globalPostTest" class="head">
n@921 331 <h3>Post Test</h3>
n@921 332 <button id="addPreTestQ" onclick="event.srcElement.parentElement.appendChild(questionNode());">Add Post Test Question</button>
n@921 333 <button id="addPreTestS" onclick="event.srcElement.parentElement.appendChild(statementNode());">Add Post Test Statement</button>
n@921 334 </div>
n@921 335 <div id="globalMetric" class="head">
n@921 336 <h3>Global Metrics</h3>
n@921 337 <div id="globalMetric-attrib" class="attrib">
n@921 338 <span>Test Timer</span>
n@921 339 <input type="checkbox" id="testTimer" />
n@921 340 <span>Element Playback Timer</span>
n@921 341 <input type="checkbox" id="elementTimer" />
n@921 342 <span>Element Initial Position</span>
n@921 343 <input type="checkbox" id="elementInitialPosition" />
n@921 344 <span>Element Tracker</span>
n@921 345 <input type="checkbox" id="elementTracker" />
n@921 346 <span>Element Flag Listened To</span>
n@921 347 <input type="checkbox" id="elementFlagListened" />
n@921 348 <span>Element Flag Moved</span>
n@921 349 <input type="checkbox" id="elementFlagMoved" />
n@921 350 </div>
n@921 351 </div>
n@922 352 <button id="addAudioHolder" onclick="event.srcElement.parentElement.appendChild(audioHolderNode());">Add AudioHolder / Test Page</button>
n@921 353 </div>
n@921 354 </div>
n@921 355 </div>
n@921 356 </body>
n@921 357 </html>