Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create.html @ 1593:59a8370a2e97

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Merge from the default branch
author Nicholas Jillings <nickjillings@users.noreply.github.com>
date Tue, 02 Jun 2015 11:24:23 +0100
parents cd5e9144ecb7
children 2dc00907c6ab
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@1591 27 function attributePair(string, type){
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@1591 32 return [id, input];
nickjillings@1591 33 }
nickjillings@1591 34
nickjillings@1592 35 function removeNode(event) {
nickjillings@1592 36 event.srcElement.parentElement.parentElement.removeChild(event.srcElement.parentElement);
nickjillings@1592 37 }
nickjillings@1592 38
nickjillings@1591 39 function questionNode() {
nickjillings@1591 40 var node = document.createElement("div");
nickjillings@1591 41 node.setAttribute('class','head');
nickjillings@1591 42 node.setAttribute('name','question-node');
nickjillings@1591 43 var nodeTitle = document.createElement("span");
nickjillings@1591 44 nodeTitle.textContent = "Question";
nickjillings@1591 45 var attributes = document.createElement("div");
nickjillings@1591 46 attributes.setAttribute('class','attrib');
nickjillings@1591 47 var id = attributePair("ID:","text");
nickjillings@1591 48 var question = attributePair("Question:","text");
nickjillings@1591 49 node.appendChild(nodeTitle);
nickjillings@1591 50 id.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1591 51 question.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1591 52 node.appendChild(attributes);
nickjillings@1592 53
nickjillings@1592 54 var removeButton = document.createElement("button");
nickjillings@1592 55 removeButton.textContent = "Remove";
nickjillings@1592 56 removeButton.onclick = removeNode;
nickjillings@1592 57 node.appendChild(removeButton);
nickjillings@1591 58 return node;
nickjillings@1591 59 }
nickjillings@1591 60
nickjillings@1591 61 function statementNode() {
nickjillings@1591 62 var node = document.createElement("div");
nickjillings@1591 63 node.setAttribute('class','head');
nickjillings@1591 64 node.setAttribute('name','question-node');
nickjillings@1591 65 var nodeTitle = document.createElement("span");
nickjillings@1591 66 nodeTitle.textContent = "Statement";
nickjillings@1591 67 var attributes = document.createElement("div");
nickjillings@1591 68 attributes.setAttribute('class','attrib');
nickjillings@1591 69 var statement = attributePair("Statement:","text");
nickjillings@1591 70 node.appendChild(nodeTitle);
nickjillings@1591 71 statement.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1591 72 node.appendChild(attributes);
nickjillings@1592 73
nickjillings@1592 74 var removeButton = document.createElement("button");
nickjillings@1592 75 removeButton.textContent = "Remove";
nickjillings@1592 76 removeButton.onclick = removeNode;
nickjillings@1592 77 node.appendChild(removeButton);
nickjillings@1591 78 return node;
nickjillings@1591 79 }
nickjillings@1591 80
nickjillings@1591 81 function audioHolderNode() {
nickjillings@1591 82 var audioHolderCounts = document.getElementsByName("audio-holder").length;
nickjillings@1591 83 var node = document.createElement("div");
nickjillings@1591 84 node.setAttribute("class","head");
nickjillings@1591 85 node.setAttribute("name","audio-holder");
nickjillings@1592 86 node.setAttribute("id","audio-holder-"+audioHolderCounts);
nickjillings@1591 87 var nodeTitle = document.createElement("span");
nickjillings@1592 88 nodeTitle.textContent = "Audio Holder "+(audioHolderCounts+1);
nickjillings@1591 89
nickjillings@1591 90 var attributes = document.createElement("div");
nickjillings@1591 91 attributes.setAttribute('class','attrib');
nickjillings@1591 92 var id = attributePair("ID:","text");
nickjillings@1592 93 id[1].value=audioHolderCounts;
nickjillings@1592 94 var hostURL = attributePair("Host URL:", "text");
nickjillings@1592 95 var sampleRate = attributePair("Sample Rate:","text");
nickjillings@1592 96 var randomiseOrder = attributePair("Randomise Element Order:","checkbox");
nickjillings@1592 97 var repeatCount = attributePair("Repeat Page Count:","number");
nickjillings@1592 98 repeatCount[1].value = 0;
nickjillings@1592 99 var loop = attributePair("Loop Element Playback","checkbox");
nickjillings@1592 100 var elementComments = attributePair("Enable Comment Boxes","checkbox");
nickjillings@1592 101 id.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 102 hostURL.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 103 sampleRate.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 104 hostURL.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 105 randomiseOrder.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 106 repeatCount.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 107 loop.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 108 elementComments.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 109
nickjillings@1592 110 node.appendChild(nodeTitle);
nickjillings@1592 111 node.appendChild(attributes);
nickjillings@1592 112
nickjillings@1592 113 var pretest = document.createElement("div");
nickjillings@1592 114 pretest.setAttribute('class','head');
nickjillings@1592 115 pretest.setAttribute('name','pre-test');
nickjillings@1592 116 var pretestTitle = document.createElement("h4");
nickjillings@1592 117 pretestTitle.textContent = "Pre Test";
nickjillings@1592 118 var buttonAddQ = document.createElement("button");
nickjillings@1592 119 buttonAddQ.textContent = "Add Pre Test Question";
nickjillings@1592 120 buttonAddQ.onclick = function(){event.srcElement.parentElement.appendChild(questionNode());};
nickjillings@1592 121 var buttonAddS = document.createElement("button");
nickjillings@1592 122 buttonAddS.textContent = "Add Pre Test Statement";
nickjillings@1592 123 buttonAddS.onclick = function(){event.srcElement.parentElement.appendChild(statementNode());};
nickjillings@1592 124 pretest.appendChild(pretestTitle);
nickjillings@1592 125 pretest.appendChild(buttonAddQ);
nickjillings@1592 126 pretest.appendChild(buttonAddS);
nickjillings@1592 127
nickjillings@1592 128 var posttest = document.createElement("div");
nickjillings@1592 129 posttest.setAttribute('class','head');
nickjillings@1592 130 posttest.setAttribute('name','post-test');
nickjillings@1592 131 var posttestTitle = document.createElement("h4");
nickjillings@1592 132 posttestTitle.textContent = "Post Test";
nickjillings@1592 133 var buttonAddQ = document.createElement("button");
nickjillings@1592 134 buttonAddQ.textContent = "Add Post Test Question";
nickjillings@1592 135 buttonAddQ.onclick = function(){event.srcElement.parentElement.appendChild(questionNode());};
nickjillings@1592 136 var buttonAddS = document.createElement("button");
nickjillings@1592 137 buttonAddS.textContent = "Add Post Test Statement";
nickjillings@1592 138 buttonAddS.onclick = function(){event.srcElement.parentElement.appendChild(statementNode());};
nickjillings@1592 139 posttest.appendChild(posttestTitle);
nickjillings@1592 140 posttest.appendChild(buttonAddQ);
nickjillings@1592 141 posttest.appendChild(buttonAddS);
nickjillings@1592 142
nickjillings@1592 143 node.appendChild(pretest);
nickjillings@1592 144 node.appendChild(posttest);
nickjillings@1592 145
nickjillings@1592 146 var newAudioElementButton = document.createElement("button");
nickjillings@1592 147 newAudioElementButton.textContent = "Add audio element";
nickjillings@1592 148 newAudioElementButton.onclick = function(){
nickjillings@1592 149 event.srcElement.parentElement.appendChild(audioElementNode());
nickjillings@1592 150 };
nickjillings@1592 151 node.appendChild(newAudioElementButton);
nickjillings@1592 152
nickjillings@1592 153 var newCommentButton = document.createElement("button");
nickjillings@1592 154 newCommentButton.textContent = "Add Comment Box";
nickjillings@1592 155 newCommentButton.onclick = function() {
nickjillings@1592 156 event.srcElement.parentElement.appendChild(commentBox());
nickjillings@1592 157 };
nickjillings@1592 158 node.appendChild(newCommentButton);
nickjillings@1592 159
nickjillings@1592 160 var removeButton = document.createElement("button");
nickjillings@1592 161 removeButton.textContent = "Remove Audio Holder";
nickjillings@1592 162 removeButton.onclick = removeNode;
nickjillings@1592 163 node.appendChild(removeButton);
nickjillings@1592 164 return node;
nickjillings@1592 165 }
nickjillings@1592 166
nickjillings@1592 167 function audioElementNode() {
nickjillings@1592 168 var parentStructure = event.srcElement.parentElement.childNodes;
nickjillings@1592 169 var audioElemCounts = 0;
nickjillings@1592 170 for (var i=0; i<parentStructure.length; i++) {
nickjillings@1592 171 if (parentStructure[i].getAttribute('name') == "audio-element")
nickjillings@1592 172 {audioElemCounts++;}
nickjillings@1592 173 }
nickjillings@1592 174 var node = document.createElement('div');
nickjillings@1592 175 node.setAttribute('class','head');
nickjillings@1592 176 node.setAttribute('name','audio-element');
nickjillings@1592 177 var nodeTitle = document.createElement('span');
nickjillings@1592 178 nodeTitle.textContent = 'Audio Element '+(audioElemCounts+1);
nickjillings@1592 179
nickjillings@1592 180 var attributes = document.createElement("div");
nickjillings@1592 181 attributes.setAttribute('class','attrib');
nickjillings@1592 182 var id = attributePair("ID:","text");
nickjillings@1592 183 id[1].value = audioElemCounts;
nickjillings@1592 184 var url = attributePair("URL:","text");
nickjillings@1592 185 id.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 186 url.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 187
nickjillings@1592 188 node.appendChild(nodeTitle);
nickjillings@1592 189 node.appendChild(attributes);
nickjillings@1592 190
nickjillings@1592 191 var removeButton = document.createElement("button");
nickjillings@1592 192 removeButton.textContent = "Remove Audio Element";
nickjillings@1592 193 removeButton.onclick = removeNode;
nickjillings@1592 194 node.appendChild(removeButton);
nickjillings@1592 195 return node;
nickjillings@1592 196 }
nickjillings@1592 197
nickjillings@1592 198 function commentBox() {
nickjillings@1592 199 var node = document.createElement('div');
nickjillings@1592 200 node.setAttribute('class','head');
nickjillings@1592 201 node.setAttribute('name','comment-question');
nickjillings@1592 202 var nodeTitle = document.createElement('h4');
nickjillings@1592 203 nodeTitle.textContent = "Comment Box";
nickjillings@1592 204
nickjillings@1592 205 var attributes = document.createElement('div');
nickjillings@1592 206 attributes.setAttribute('class','attrib');
nickjillings@1592 207 var id = attributePair("ID:",'text');
nickjillings@1592 208 var question = attributePair("Question:",'text');
nickjillings@1592 209 id.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 210 question.forEach(function(item){attributes.appendChild(item);},false);
nickjillings@1592 211
nickjillings@1592 212 var removeButton = document.createElement("button");
nickjillings@1592 213 removeButton.textContent = "Remove Comment Box";
nickjillings@1592 214 removeButton.onclick = removeNode;
nickjillings@1592 215
nickjillings@1592 216 node.appendChild(nodeTitle);
nickjillings@1592 217 node.appendChild(attributes);
nickjillings@1592 218 node.appendChild(removeButton);
nickjillings@1592 219 return node;
nickjillings@1591 220 }
nickjillings@1591 221 </script>
nickjillings@1591 222 <style>
nickjillings@1591 223 div {
nickjillings@1591 224 padding: 2px;
nickjillings@1591 225 margin-top: 2px;
nickjillings@1591 226 margin-bottom: 2px;
nickjillings@1591 227 }
nickjillings@1591 228 div.head{
nickjillings@1591 229 margin-left: 10px;
nickjillings@1591 230 border: black;
nickjillings@1591 231 border-width: 2px;
nickjillings@1591 232 border-style: solid;
nickjillings@1591 233 }
nickjillings@1591 234 div.attrib{
nickjillings@1591 235 margin-left:25px;
nickjillings@1591 236 border: black;
nickjillings@1591 237 border-width: 2px;
nickjillings@1591 238 border-style: dashed;
nickjillings@1591 239 margin-bottom: 10px;
nickjillings@1591 240 }
nickjillings@1591 241 </style>
nickjillings@1591 242
nickjillings@1591 243 </head>
nickjillings@1591 244
nickjillings@1591 245 <body>
nickjillings@1591 246 <h1>Create Test Setup XML</h1>
nickjillings@1591 247 <div id="topLevelBody" align="left">
nickjillings@1591 248 <!-- Interface goes here -->
nickjillings@1591 249 <div name='test-setup'>
nickjillings@1591 250 <div id="setup" class="head">
nickjillings@1591 251 <h2>Setup Tag</h2>
nickjillings@1591 252 <div id="setup-attribs" class="attrib">
nickjillings@1591 253 <span>Interface</span>
nickjillings@1591 254 <select id="interface">
nickjillings@1591 255 <option value='APE'>APE</option>
nickjillings@1591 256 </select>
nickjillings@1591 257 <span>Project Return</span>
nickjillings@1591 258 <input type="text" id="projectReturn">
nickjillings@1591 259 <span>Randomise Test Page Order</span>
nickjillings@1591 260 <input id="randomisePageOrder" type="checkbox" value="false">
nickjillings@1591 261 <span>Collect Session Metrics</span>
nickjillings@1591 262 <input id="collectMetrics" type="checkbox">
nickjillings@1591 263 </div>
nickjillings@1591 264 <div id="globalPreTest" class="head">
nickjillings@1591 265 <h3>Pre Test</h3>
nickjillings@1591 266 <button id="addPreTestQ" onclick="event.srcElement.parentElement.appendChild(questionNode());">Add Pre Test Question</button>
nickjillings@1591 267 <button id="addPreTestS" onclick="event.srcElement.parentElement.appendChild(statementNode());">Add Pre Test Statement</button>
nickjillings@1591 268 </div>
nickjillings@1591 269 <div id="globalPostTest" class="head">
nickjillings@1591 270 <h3>Post Test</h3>
nickjillings@1591 271 <button id="addPreTestQ" onclick="event.srcElement.parentElement.appendChild(questionNode());">Add Post Test Question</button>
nickjillings@1591 272 <button id="addPreTestS" onclick="event.srcElement.parentElement.appendChild(statementNode());">Add Post Test Statement</button>
nickjillings@1591 273 </div>
nickjillings@1591 274 <div id="globalMetric" class="head">
nickjillings@1591 275 <h3>Global Metrics</h3>
nickjillings@1591 276 <div id="globalMetric-attrib" class="attrib">
nickjillings@1591 277 <span>Test Timer</span>
nickjillings@1591 278 <input type="checkbox" id="testTimer" />
nickjillings@1591 279 <span>Element Playback Timer</span>
nickjillings@1591 280 <input type="checkbox" id="elementTimer" />
nickjillings@1591 281 <span>Element Initial Position</span>
nickjillings@1591 282 <input type="checkbox" id="elementInitialPosition" />
nickjillings@1591 283 <span>Element Tracker</span>
nickjillings@1591 284 <input type="checkbox" id="elementTracker" />
nickjillings@1591 285 <span>Element Flag Listened To</span>
nickjillings@1591 286 <input type="checkbox" id="elementFlagListened" />
nickjillings@1591 287 <span>Element Flag Moved</span>
nickjillings@1591 288 <input type="checkbox" id="elementFlagMoved" />
nickjillings@1591 289 </div>
nickjillings@1591 290 </div>
nickjillings@1592 291 <button id="addAudioHolder" onclick="event.srcElement.parentElement.appendChild(audioHolderNode());">Add AudioHolder / Test Page</button>
nickjillings@1591 292 </div>
nickjillings@1591 293 </div>
nickjillings@1591 294 </div>
nickjillings@1591 295 </body>
nickjillings@1591 296 </html>