Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1594:155019bf86b5

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 <nickjillings@users.noreply.github.com>
date Tue, 02 Jun 2015 12:24:19 +0100
parents cd5e9144ecb7
children 82baf45866fc
rev   line source
nickjillings@1591 1 <!DOCTYPE html>
nickjillings@1591 2 <html lang="en">
nickjillings@1591 3 <head>
nickjillings@1591 4 <meta charset="utf-8">
nickjillings@1591 5
nickjillings@1591 6 <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
nickjillings@1591 7 Remove this if you use the .htaccess -->
nickjillings@1591 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
nickjillings@1591 9
nickjillings@1591 10 <title>WAET Create Test</title>
nickjillings@1591 11 <meta name="description" content="">
nickjillings@1591 12 <meta name="author" content="">
nickjillings@1591 13
nickjillings@1591 14 <meta name="viewport" content="width=device-width; initial-scale=1.0">
nickjillings@1591 15
nickjillings@1591 16 <script type="text/javascript">
nickjillings@1591 17 // To aid 'one-page set-up' all scripts and CSS must be included directly in this file!
nickjillings@1591 18 var topLevel;
nickjillings@1591 19 window.onload = function() {
nickjillings@1591 20 // Initialise page
nickjillings@1591 21 topLevel = document.getElementById('topLevelBody');
nickjillings@1591 22 var setup = document.createElement('div');
nickjillings@1591 23 setup.id = 'setupTagDiv';
nickjillings@1591 24
nickjillings@1591 25 };
nickjillings@1591 26
nickjillings@1594 27 function attributePair(string, type, mandatory){
nickjillings@1591 28 var id = document.createElement("span");
nickjillings@1591 29 id.textContent = string;
nickjillings@1591 30 var input = document.createElement("input");
nickjillings@1591 31 input.type = type;
nickjillings@1594 32 if (type == 'text') {
nickjillings@1594 33 if (mandatory == true) {
nickjillings@1594 34 input.setAttribute('mandatory','true');
nickjillings@1594 35 }
nickjillings@1594 36 else {
nickjillings@1594 37 input.setAttribute('mandatory','false');
nickjillings@1594 38 }
nickjillings@1594 39 }
nickjillings@1591 40 return [id, input];
nickjillings@1591 41 }
nickjillings@1591 42
nickjillings@1592 43 function removeNode(event) {
nickjillings@1592 44 event.srcElement.parentElement.parentElement.removeChild(event.srcElement.parentElement);
nickjillings@1592 45 }
nickjillings@1592 46
nickjillings@1594 47 function buttonClickedValidate() {
nickjillings@1594 48 var ready = validate();
nickjillings@1594 49 if (ready == false) {
nickjillings@1594 50 var errMsg = document.getElementById('errorMessage');
nickjillings@1594 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.";
nickjillings@1594 52 errMsg.style.visibility = 'visible';
nickjillings@1594 53 document.getElementById('createXML').disabled = true;
nickjillings@1594 54
nickjillings@1594 55 } else {
nickjillings@1594 56 var errMsg = document.getElementById('errorMessage');
nickjillings@1594 57 errMsg.textContent = "";
nickjillings@1594 58 errMsg.style.visiblity = 'hidden';
nickjillings@1594 59 document.getElementById('createXML').disabled = false;
nickjillings@1594 60 }
nickjillings@1594 61 }
nickjillings@1594 62
nickjillings@1594 63 function validate() {
nickjillings@1594 64 var canExport = true;
nickjillings@1594 65 // Checks if the XML can be created from the given entries
nickjillings@1594 66 var inputs = document.getElementsByTagName('input');
nickjillings@1594 67 for (var i=0; i<inputs.length; i++) {
nickjillings@1594 68 if (inputs[i].type == 'text') {
nickjillings@1594 69 if (inputs[i].value == "") {
nickjillings@1594 70 var mandatory = inputs[i].getAttribute('mandatory');
nickjillings@1594 71 if (mandatory == "true") {
nickjillings@1594 72 errorInput(inputs[i]);
nickjillings@1594 73 canExport = false;
nickjillings@1594 74 } else {
nickjillings@1594 75 warningInput(inputs[i]);
nickjillings@1594 76 }
nickjillings@1594 77 } else {
nickjillings@1594 78 goodInput(inputs[i]);
nickjillings@1594 79 }
nickjillings@1594 80 }
nickjillings@1594 81 }
nickjillings@1594 82 return canExport;
nickjillings@1594 83 };
nickjillings@1594 84
nickjillings@1594 85 function errorInput(node) {
nickjillings@1594 86 node.style.backgroundColor = "#FF0000";
nickjillings@1594 87 }
nickjillings@1594 88
nickjillings@1594 89 function warningInput(node) {
nickjillings@1594 90 node.style.backgroundColor = "#FFFF00";
nickjillings@1594 91 }
nickjillings@1594 92
nickjillings@1594 93 function goodInput(node) {
nickjillings@1594 94 node.style.backgroundColor = "#FFFFFF";
nickjillings@1594 95 }
nickjillings@1594 96
nickjillings@1591 97 function questionNode() {
nickjillings@1591 98 var node = document.createElement("div");
nickjillings@1591 99 node.setAttribute('class','head');
nickjillings@1591 100 node.setAttribute('name','question-node');
nickjillings@1591 101 var nodeTitle = document.createElement("span");
nickjillings@1591 102 nodeTitle.textContent = "Question";
nickjillings@1591 103 var attributes = document.createElement("div");
nickjillings@1591 104 attributes.setAttribute('class','attrib');
nickjillings@1594 105 var id = attributePair("ID:","text", true);
nickjillings@1594 106 var question = attributePair("Question:","text", false);
nickjillings@1591 107 node.appendChild(nodeTitle);
nickjillings@1591 108 id.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1591 109 question.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1591 110 node.appendChild(attributes);
nickjillings@1592 111
nickjillings@1592 112 var removeButton = document.createElement("button");
nickjillings@1592 113 removeButton.textContent = "Remove";
nickjillings@1592 114 removeButton.onclick = removeNode;
nickjillings@1592 115 node.appendChild(removeButton);
nickjillings@1591 116 return node;
nickjillings@1591 117 }
nickjillings@1591 118
nickjillings@1591 119 function statementNode() {
nickjillings@1591 120 var node = document.createElement("div");
nickjillings@1591 121 node.setAttribute('class','head');
nickjillings@1594 122 node.setAttribute('name','statement-node');
nickjillings@1591 123 var nodeTitle = document.createElement("span");
nickjillings@1591 124 nodeTitle.textContent = "Statement";
nickjillings@1591 125 var attributes = document.createElement("div");
nickjillings@1591 126 attributes.setAttribute('class','attrib');
nickjillings@1594 127 var statement = attributePair("Statement:","text",false);
nickjillings@1591 128 node.appendChild(nodeTitle);
nickjillings@1591 129 statement.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1591 130 node.appendChild(attributes);
nickjillings@1592 131
nickjillings@1592 132 var removeButton = document.createElement("button");
nickjillings@1592 133 removeButton.textContent = "Remove";
nickjillings@1592 134 removeButton.onclick = removeNode;
nickjillings@1592 135 node.appendChild(removeButton);
nickjillings@1591 136 return node;
nickjillings@1591 137 }
nickjillings@1591 138
nickjillings@1591 139 function audioHolderNode() {
nickjillings@1591 140 var audioHolderCounts = document.getElementsByName("audio-holder").length;
nickjillings@1591 141 var node = document.createElement("div");
nickjillings@1591 142 node.setAttribute("class","head");
nickjillings@1591 143 node.setAttribute("name","audio-holder");
nickjillings@1592 144 node.setAttribute("id","audio-holder-"+audioHolderCounts);
nickjillings@1591 145 var nodeTitle = document.createElement("span");
nickjillings@1592 146 nodeTitle.textContent = "Audio Holder "+(audioHolderCounts+1);
nickjillings@1591 147
nickjillings@1591 148 var attributes = document.createElement("div");
nickjillings@1591 149 attributes.setAttribute('class','attrib');
nickjillings@1594 150 var id = attributePair("ID:","text",true);
nickjillings@1592 151 id[1].value=audioHolderCounts;
nickjillings@1594 152 var hostURL = attributePair("Host URL:", "text",false);
nickjillings@1594 153 var sampleRate = attributePair("Sample Rate:","text",false);
nickjillings@1592 154 var randomiseOrder = attributePair("Randomise Element Order:","checkbox");
nickjillings@1592 155 var repeatCount = attributePair("Repeat Page Count:","number");
nickjillings@1592 156 repeatCount[1].value = 0;
nickjillings@1592 157 var loop = attributePair("Loop Element Playback","checkbox");
nickjillings@1592 158 var elementComments = attributePair("Enable Comment Boxes","checkbox");
nickjillings@1592 159 id.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 160 hostURL.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 161 sampleRate.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 162 hostURL.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 163 randomiseOrder.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 164 repeatCount.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 165 loop.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 166 elementComments.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 167
nickjillings@1592 168 node.appendChild(nodeTitle);
nickjillings@1592 169 node.appendChild(attributes);
nickjillings@1592 170
nickjillings@1592 171 var pretest = document.createElement("div");
nickjillings@1592 172 pretest.setAttribute('class','head');
nickjillings@1592 173 pretest.setAttribute('name','pre-test');
nickjillings@1592 174 var pretestTitle = document.createElement("h4");
nickjillings@1592 175 pretestTitle.textContent = "Pre Test";
nickjillings@1592 176 var buttonAddQ = document.createElement("button");
nickjillings@1592 177 buttonAddQ.textContent = "Add Pre Test Question";
nickjillings@1592 178 buttonAddQ.onclick = function(){event.srcElement.parentElement.appendChild(questionNode());};
nickjillings@1592 179 var buttonAddS = document.createElement("button");
nickjillings@1592 180 buttonAddS.textContent = "Add Pre Test Statement";
nickjillings@1592 181 buttonAddS.onclick = function(){event.srcElement.parentElement.appendChild(statementNode());};
nickjillings@1592 182 pretest.appendChild(pretestTitle);
nickjillings@1592 183 pretest.appendChild(buttonAddQ);
nickjillings@1592 184 pretest.appendChild(buttonAddS);
nickjillings@1592 185
nickjillings@1592 186 var posttest = document.createElement("div");
nickjillings@1592 187 posttest.setAttribute('class','head');
nickjillings@1592 188 posttest.setAttribute('name','post-test');
nickjillings@1592 189 var posttestTitle = document.createElement("h4");
nickjillings@1592 190 posttestTitle.textContent = "Post Test";
nickjillings@1592 191 var buttonAddQ = document.createElement("button");
nickjillings@1592 192 buttonAddQ.textContent = "Add Post Test Question";
nickjillings@1592 193 buttonAddQ.onclick = function(){event.srcElement.parentElement.appendChild(questionNode());};
nickjillings@1592 194 var buttonAddS = document.createElement("button");
nickjillings@1592 195 buttonAddS.textContent = "Add Post Test Statement";
nickjillings@1592 196 buttonAddS.onclick = function(){event.srcElement.parentElement.appendChild(statementNode());};
nickjillings@1592 197 posttest.appendChild(posttestTitle);
nickjillings@1592 198 posttest.appendChild(buttonAddQ);
nickjillings@1592 199 posttest.appendChild(buttonAddS);
nickjillings@1592 200
nickjillings@1592 201 node.appendChild(pretest);
nickjillings@1592 202 node.appendChild(posttest);
nickjillings@1592 203
nickjillings@1592 204 var newAudioElementButton = document.createElement("button");
nickjillings@1592 205 newAudioElementButton.textContent = "Add audio element";
nickjillings@1592 206 newAudioElementButton.onclick = function(){
nickjillings@1592 207 event.srcElement.parentElement.appendChild(audioElementNode());
nickjillings@1592 208 };
nickjillings@1592 209 node.appendChild(newAudioElementButton);
nickjillings@1592 210
nickjillings@1592 211 var newCommentButton = document.createElement("button");
nickjillings@1592 212 newCommentButton.textContent = "Add Comment Box";
nickjillings@1592 213 newCommentButton.onclick = function() {
nickjillings@1592 214 event.srcElement.parentElement.appendChild(commentBox());
nickjillings@1592 215 };
nickjillings@1592 216 node.appendChild(newCommentButton);
nickjillings@1592 217
nickjillings@1592 218 var removeButton = document.createElement("button");
nickjillings@1592 219 removeButton.textContent = "Remove Audio Holder";
nickjillings@1592 220 removeButton.onclick = removeNode;
nickjillings@1592 221 node.appendChild(removeButton);
nickjillings@1592 222 return node;
nickjillings@1592 223 }
nickjillings@1592 224
nickjillings@1592 225 function audioElementNode() {
nickjillings@1592 226 var parentStructure = event.srcElement.parentElement.childNodes;
nickjillings@1592 227 var audioElemCounts = 0;
nickjillings@1592 228 for (var i=0; i<parentStructure.length; i++) {
nickjillings@1592 229 if (parentStructure[i].getAttribute('name') == "audio-element")
nickjillings@1592 230 {audioElemCounts++;}
nickjillings@1592 231 }
nickjillings@1592 232 var node = document.createElement('div');
nickjillings@1592 233 node.setAttribute('class','head');
nickjillings@1592 234 node.setAttribute('name','audio-element');
nickjillings@1592 235 var nodeTitle = document.createElement('span');
nickjillings@1592 236 nodeTitle.textContent = 'Audio Element '+(audioElemCounts+1);
nickjillings@1592 237
nickjillings@1592 238 var attributes = document.createElement("div");
nickjillings@1592 239 attributes.setAttribute('class','attrib');
nickjillings@1594 240 var id = attributePair("ID:","text",true);
nickjillings@1592 241 id[1].value = audioElemCounts;
nickjillings@1594 242 var url = attributePair("URL:","text",true);
nickjillings@1592 243 id.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 244 url.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 245
nickjillings@1592 246 node.appendChild(nodeTitle);
nickjillings@1592 247 node.appendChild(attributes);
nickjillings@1592 248
nickjillings@1592 249 var removeButton = document.createElement("button");
nickjillings@1592 250 removeButton.textContent = "Remove Audio Element";
nickjillings@1592 251 removeButton.onclick = removeNode;
nickjillings@1592 252 node.appendChild(removeButton);
nickjillings@1592 253 return node;
nickjillings@1592 254 }
nickjillings@1592 255
nickjillings@1592 256 function commentBox() {
nickjillings@1592 257 var node = document.createElement('div');
nickjillings@1592 258 node.setAttribute('class','head');
nickjillings@1592 259 node.setAttribute('name','comment-question');
nickjillings@1592 260 var nodeTitle = document.createElement('h4');
nickjillings@1592 261 nodeTitle.textContent = "Comment Box";
nickjillings@1592 262
nickjillings@1592 263 var attributes = document.createElement('div');
nickjillings@1592 264 attributes.setAttribute('class','attrib');
nickjillings@1594 265 var id = attributePair("ID:",'text',true);
nickjillings@1594 266 var question = attributePair("Question:",'text',true);
nickjillings@1592 267 id.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 268 question.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 269
nickjillings@1592 270 var removeButton = document.createElement("button");
nickjillings@1592 271 removeButton.textContent = "Remove Comment Box";
nickjillings@1592 272 removeButton.onclick = removeNode;
nickjillings@1592 273
nickjillings@1592 274 node.appendChild(nodeTitle);
nickjillings@1592 275 node.appendChild(attributes);
nickjillings@1592 276 node.appendChild(removeButton);
nickjillings@1592 277 return node;
nickjillings@1591 278 }
nickjillings@1591 279 </script>
nickjillings@1591 280 <style>
nickjillings@1591 281 div {
nickjillings@1591 282 padding: 2px;
nickjillings@1591 283 margin-top: 2px;
nickjillings@1591 284 margin-bottom: 2px;
nickjillings@1591 285 }
nickjillings@1591 286 div.head{
nickjillings@1591 287 margin-left: 10px;
nickjillings@1591 288 border: black;
nickjillings@1591 289 border-width: 2px;
nickjillings@1591 290 border-style: solid;
nickjillings@1591 291 }
nickjillings@1591 292 div.attrib{
nickjillings@1591 293 margin-left:25px;
nickjillings@1591 294 border: black;
nickjillings@1591 295 border-width: 2px;
nickjillings@1591 296 border-style: dashed;
nickjillings@1591 297 margin-bottom: 10px;
nickjillings@1591 298 }
nickjillings@1591 299 </style>
nickjillings@1591 300
nickjillings@1591 301 </head>
nickjillings@1591 302
nickjillings@1591 303 <body>
nickjillings@1591 304 <h1>Create Test Setup XML</h1>
nickjillings@1594 305 <button id="validateXML" onclick="buttonClickedValidate();">Validate</button>
nickjillings@1594 306 <button id="createXML" onclick="buttonClickedValidate();" disabled>Submit</button>
nickjillings@1594 307 <span id="errorMessage" visibility="hidden"></span>
nickjillings@1591 308 <div id="topLevelBody" align="left">
nickjillings@1591 309 <!-- Interface goes here -->
nickjillings@1591 310 <div name='test-setup'>
nickjillings@1591 311 <div id="setup" class="head">
nickjillings@1591 312 <h2>Setup Tag</h2>
nickjillings@1591 313 <div id="setup-attribs" class="attrib">
nickjillings@1591 314 <span>Interface</span>
nickjillings@1591 315 <select id="interface">
nickjillings@1591 316 <option value='APE'>APE</option>
nickjillings@1591 317 </select>
nickjillings@1591 318 <span>Project Return</span>
nickjillings@1594 319 <input type="text" id="projectReturn" mandatory="false">
nickjillings@1591 320 <span>Randomise Test Page Order</span>
nickjillings@1591 321 <input id="randomisePageOrder" type="checkbox" value="false">
nickjillings@1591 322 <span>Collect Session Metrics</span>
nickjillings@1591 323 <input id="collectMetrics" type="checkbox">
nickjillings@1591 324 </div>
nickjillings@1591 325 <div id="globalPreTest" class="head">
nickjillings@1591 326 <h3>Pre Test</h3>
nickjillings@1591 327 <button id="addPreTestQ" onclick="event.srcElement.parentElement.appendChild(questionNode());">Add Pre Test Question</button>
nickjillings@1591 328 <button id="addPreTestS" onclick="event.srcElement.parentElement.appendChild(statementNode());">Add Pre Test Statement</button>
nickjillings@1591 329 </div>
nickjillings@1591 330 <div id="globalPostTest" class="head">
nickjillings@1591 331 <h3>Post Test</h3>
nickjillings@1591 332 <button id="addPreTestQ" onclick="event.srcElement.parentElement.appendChild(questionNode());">Add Post Test Question</button>
nickjillings@1591 333 <button id="addPreTestS" onclick="event.srcElement.parentElement.appendChild(statementNode());">Add Post Test Statement</button>
nickjillings@1591 334 </div>
nickjillings@1591 335 <div id="globalMetric" class="head">
nickjillings@1591 336 <h3>Global Metrics</h3>
nickjillings@1591 337 <div id="globalMetric-attrib" class="attrib">
nickjillings@1591 338 <span>Test Timer</span>
nickjillings@1591 339 <input type="checkbox" id="testTimer" />
nickjillings@1591 340 <span>Element Playback Timer</span>
nickjillings@1591 341 <input type="checkbox" id="elementTimer" />
nickjillings@1591 342 <span>Element Initial Position</span>
nickjillings@1591 343 <input type="checkbox" id="elementInitialPosition" />
nickjillings@1591 344 <span>Element Tracker</span>
nickjillings@1591 345 <input type="checkbox" id="elementTracker" />
nickjillings@1591 346 <span>Element Flag Listened To</span>
nickjillings@1591 347 <input type="checkbox" id="elementFlagListened" />
nickjillings@1591 348 <span>Element Flag Moved</span>
nickjillings@1591 349 <input type="checkbox" id="elementFlagMoved" />
nickjillings@1591 350 </div>
nickjillings@1591 351 </div>
nickjillings@1592 352 <button id="addAudioHolder" onclick="event.srcElement.parentElement.appendChild(audioHolderNode());">Add AudioHolder / Test Page</button>
nickjillings@1591 353 </div>
nickjillings@1591 354 </div>
nickjillings@1591 355 </div>
nickjillings@1591 356 </body>
nickjillings@1591 357 </html>