|
n@893
|
1 <!DOCTYPE html>
|
|
n@893
|
2 <html lang="en">
|
|
n@893
|
3 <head>
|
|
n@893
|
4 <meta charset="utf-8">
|
|
n@893
|
5
|
|
n@893
|
6 <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
|
|
n@893
|
7 Remove this if you use the .htaccess -->
|
|
n@893
|
8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
n@893
|
9
|
|
n@893
|
10 <title>WAET Create Test</title>
|
|
n@893
|
11 <meta name="description" content="">
|
|
n@893
|
12 <meta name="author" content="">
|
|
n@893
|
13
|
|
n@893
|
14 <meta name="viewport" content="width=device-width; initial-scale=1.0">
|
|
n@893
|
15
|
|
n@893
|
16 <script type="text/javascript">
|
|
n@893
|
17 // To aid 'one-page set-up' all scripts and CSS must be included directly in this file!
|
|
n@893
|
18 var topLevel;
|
|
n@893
|
19 window.onload = function() {
|
|
n@893
|
20 // Initialise page
|
|
n@893
|
21 topLevel = document.getElementById('topLevelBody');
|
|
n@893
|
22 var setup = document.createElement('div');
|
|
n@893
|
23 setup.id = 'setupTagDiv';
|
|
n@893
|
24
|
|
n@893
|
25 // Setup drag/drop handles
|
|
n@893
|
26 var dropBody = document.getElementById('dragFile');
|
|
n@893
|
27 dropBody.addEventListener('dragover', handleDragOver, false);
|
|
n@893
|
28 dropBody.addEventListener('dragenter',handleDragEnter,false);
|
|
n@893
|
29 dropBody.addEventListener('dragleave',handleDragLeave,false);
|
|
n@893
|
30 dropBody.addEventListener('drop', handleDrop,false);
|
|
n@893
|
31 };
|
|
n@893
|
32
|
|
n@893
|
33 function attributePair(string, type, mandatory){
|
|
n@893
|
34 var id = document.createElement("span");
|
|
n@893
|
35 id.textContent = string;
|
|
n@893
|
36 var input = document.createElement("input");
|
|
n@893
|
37 input.type = type;
|
|
n@893
|
38 if (type == 'text') {
|
|
n@893
|
39 if (mandatory == true) {
|
|
n@893
|
40 input.setAttribute('mandatory','true');
|
|
n@893
|
41 }
|
|
n@893
|
42 else {
|
|
n@893
|
43 input.setAttribute('mandatory','false');
|
|
n@893
|
44 }
|
|
n@893
|
45 }
|
|
n@893
|
46 return [id, input];
|
|
n@893
|
47 }
|
|
n@893
|
48
|
|
n@893
|
49 function removeNode(event) {
|
|
n@893
|
50 event.srcElement.parentElement.parentElement.removeChild(event.srcElement.parentElement);
|
|
n@893
|
51 }
|
|
n@893
|
52
|
|
n@893
|
53 function buttonClickedValidate() {
|
|
n@893
|
54 var ready = validate();
|
|
n@893
|
55 if (ready == false) {
|
|
n@893
|
56 var errMsg = document.getElementById('errorMessage');
|
|
n@893
|
57 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@893
|
58 errMsg.style.visibility = 'visible';
|
|
n@893
|
59 document.getElementById('createXML').disabled = true;
|
|
n@893
|
60
|
|
n@893
|
61 } else {
|
|
n@893
|
62 var errMsg = document.getElementById('errorMessage');
|
|
n@893
|
63 errMsg.textContent = "";
|
|
n@893
|
64 errMsg.style.visiblity = 'hidden';
|
|
n@893
|
65 document.getElementById('createXML').disabled = false;
|
|
n@893
|
66 }
|
|
n@893
|
67 }
|
|
n@893
|
68
|
|
n@893
|
69 function buttonClickedSubmit() {
|
|
n@893
|
70 var ready = validate();
|
|
n@893
|
71 if (ready == true) {
|
|
n@893
|
72 var xmlDoc = buildXML();
|
|
n@893
|
73 var inject = document.getElementById('errorMessage');
|
|
n@893
|
74 createProjectSave(xmlDoc, inject);
|
|
n@893
|
75 }
|
|
n@893
|
76 }
|
|
n@893
|
77
|
|
n@893
|
78 function createProjectSave(xmlDoc, injectPoint) {
|
|
n@893
|
79 var parent = document.createElement("div");
|
|
n@893
|
80 parent.appendChild(xmlDoc);
|
|
n@893
|
81 var file = [parent.innerHTML];
|
|
n@893
|
82 var bb = new Blob(file,{type : 'application/xml'});
|
|
n@893
|
83 var dnlk = window.URL.createObjectURL(bb);
|
|
n@893
|
84 var a = document.createElement("a");
|
|
n@893
|
85 a.hidden = '';
|
|
n@893
|
86 a.href = dnlk;
|
|
n@893
|
87 a.download = "save.xml";
|
|
n@893
|
88 a.textContent = "Save File";
|
|
n@893
|
89 injectPoint.appendChild(a);
|
|
n@893
|
90 }
|
|
n@893
|
91
|
|
n@893
|
92 function buildXML() {
|
|
n@893
|
93 var xmlDoc = document.createElement('BrowserEvalProjectDocument');
|
|
n@893
|
94 var setup = document.createElement('setup');
|
|
n@893
|
95 setup.setAttribute('interface',document.getElementById('interface').value);
|
|
n@893
|
96 if (document.getElementById('projectReturn').value == "") {
|
|
n@893
|
97 setup.setAttribute('projectReturn',"null");
|
|
n@893
|
98 } else {
|
|
n@893
|
99 setup.setAttribute('projectReturn',document.getElementById('projectReturn').value);
|
|
n@893
|
100 }
|
|
n@893
|
101 setup.setAttribute('randomiseOrder',document.getElementById('randomisePageOrder').checked);
|
|
n@893
|
102 setup.setAttribute('collectMetrics',document.getElementById('collectMetrics').checked);
|
|
n@893
|
103
|
|
n@893
|
104 var globalPreTest = document.createElement('preTest');
|
|
n@893
|
105 var options = document.getElementById('globalPreTest').getElementsByClassName('head');
|
|
n@893
|
106 constructPrePost(globalPreTest, options);
|
|
n@893
|
107
|
|
n@893
|
108 var globalPostTest = document.createElement('postTest');
|
|
n@893
|
109 options = document.getElementById('globalPostTest').getElementsByClassName('head');
|
|
n@893
|
110 constructPrePost(globalPostTest, options);
|
|
n@893
|
111
|
|
n@893
|
112 var globalMetrics = document.createElement('metric');
|
|
n@893
|
113 options = document.getElementById('globalMetric').getElementsByClassName('attrib')[0].getElementsByTagName('input');
|
|
n@893
|
114 for (var i=0; i<options.length; i++) {
|
|
n@893
|
115 if (options[i].checked) {
|
|
n@893
|
116 var metric = document.createElement('metricEnable');
|
|
n@893
|
117 metric.textContent = options[i].id;
|
|
n@893
|
118 globalMetrics.appendChild(metric);
|
|
n@893
|
119 }
|
|
n@893
|
120 }
|
|
n@893
|
121 setup.appendChild(globalPreTest);
|
|
n@893
|
122 setup.appendChild(globalPostTest);
|
|
n@893
|
123 setup.appendChild(globalMetrics);
|
|
n@893
|
124 xmlDoc.appendChild(setup);
|
|
n@893
|
125
|
|
n@893
|
126 var audioHolders = document.getElementsByName('audio-holder');
|
|
n@893
|
127 for (var i=0; i<audioHolders.length; i++) {
|
|
n@893
|
128 var audioHolder = document.createElement('audioHolder');
|
|
n@893
|
129 var audioHolderDOM = audioHolders[i];
|
|
n@893
|
130 var attribs = audioHolderDOM.getElementsByClassName('attrib')[0].getElementsByTagName('input');
|
|
n@893
|
131 audioHolder.id = attribs[0].value;
|
|
n@893
|
132 if (attribs[1].value != "") {audioHolder.setAttribute('sampleRate',attribs[1].value);}
|
|
n@893
|
133 if (attribs[2].value != "") {audioHolder.setAttribute('hostURL',attribs[2].value);}
|
|
n@893
|
134 audioHolder.setAttribute('randomiseOrder',attribs[3].checked);
|
|
n@893
|
135 audioHolder.setAttribute('repeatCount',attribs[4].checked);
|
|
n@893
|
136 audioHolder.setAttribute('loop',attribs[5].checked);
|
|
n@893
|
137 audioHolder.setAttribute('elementComments',attribs[6].checked);
|
|
n@893
|
138
|
|
n@893
|
139 // Audio-Holder PreTests
|
|
n@893
|
140 var audioHolderPreTest = document.createElement('preTest');
|
|
n@893
|
141 var audioHolderPostTest = document.createElement('postTest');
|
|
n@893
|
142 options = audioHolderDOM.childNodes[2].getElementsByClassName('head');
|
|
n@893
|
143 constructPrePost(audioHolderPreTest, options);
|
|
n@893
|
144 options = audioHolderDOM.childNodes[3].getElementsByClassName('head');
|
|
n@893
|
145 constructPrePost(audioHolderPostTest, options);
|
|
n@893
|
146
|
|
n@893
|
147 audioHolder.appendChild(audioHolderPreTest);
|
|
n@893
|
148 audioHolder.appendChild(audioHolderPostTest);
|
|
n@893
|
149
|
|
n@893
|
150 // Interface Nodes
|
|
n@893
|
151
|
|
n@893
|
152 // audio-Elements
|
|
n@893
|
153 var audioElementsDOM = [];
|
|
n@893
|
154 var commentQuestionDOM = [];
|
|
n@893
|
155 var interfacesDOM = [];
|
|
n@893
|
156 for (var j=0; j<audioHolderDOM.childElementCount; j++) {
|
|
n@893
|
157 var child = audioHolderDOM.childNodes[j];
|
|
n@893
|
158 var name = child.getAttribute('name');
|
|
n@893
|
159 if (name == 'audio-element') {audioElementsDOM.push(child);}
|
|
n@893
|
160 else if (name == 'comment-question') {commentQuestionDOM.push(child);}
|
|
n@893
|
161 else if (name == 'interface-options') {interfacesDOM.push(child);}
|
|
n@893
|
162 }
|
|
n@893
|
163
|
|
n@893
|
164 for (var j=0; j<interfacesDOM.length; j++) {
|
|
n@893
|
165 var interfaceNode = document.createElement('interface');
|
|
n@893
|
166 attribs = interfacesDOM[j].getElementsByClassName('attrib')[0].getElementsByTagName('input');
|
|
n@893
|
167 var title = document.createElement('title');
|
|
n@893
|
168 title.textContent = attribs[0].value;
|
|
n@893
|
169 interfaceNode.appendChild(title);
|
|
n@893
|
170
|
|
n@893
|
171
|
|
n@893
|
172 var markers = interfacesDOM[j].getElementsByClassName('head');
|
|
n@893
|
173 for (var k=0; k<markers.length; k++) {
|
|
n@893
|
174 var markerNode = document.createElement('scale');
|
|
n@893
|
175 attribs = markers[k].getElementsByClassName('attrib')[0].getElementsByTagName('input');
|
|
n@893
|
176 markerNode.textContent = attribs[0].value;
|
|
n@893
|
177 markerNode.setAttribute('position',attribs[1].value);
|
|
n@893
|
178 interfaceNode.appendChild(markerNode);
|
|
n@893
|
179 }
|
|
n@893
|
180 audioHolder.appendChild(interfaceNode);
|
|
n@893
|
181 }
|
|
n@893
|
182
|
|
n@893
|
183 for (var j=0; j<audioElementsDOM.length; j++) {
|
|
n@893
|
184 var audioElement = document.createElement('audioElement');
|
|
n@893
|
185 attribs = audioElementsDOM[j].getElementsByClassName('attrib')[0].getElementsByTagName('input');
|
|
n@893
|
186 audioElement.id = attribs[0].value;
|
|
n@893
|
187 audioElement.setAttribute('url',attribs[1].value);
|
|
n@893
|
188 audioHolder.appendChild(audioElement);
|
|
n@893
|
189 }
|
|
n@893
|
190
|
|
n@893
|
191 for (var j=0; j<commentQuestionDOM.length; j++) {
|
|
n@893
|
192 var commentQuestion = document.createElement('commentQuestion');
|
|
n@893
|
193 attribs = commentQuestionDOM[j].getElementsByClassName('attrib')[0].getElementsByTagName('input');
|
|
n@893
|
194 commentQuestion.id = attribs[0].value;
|
|
n@893
|
195 commentQuestion.textContent = attribs[1].value;
|
|
n@893
|
196 audioHolder.appendChild(commentQuestion);
|
|
n@893
|
197 }
|
|
n@893
|
198 xmlDoc.appendChild(audioHolder);
|
|
n@893
|
199 }
|
|
n@893
|
200 return xmlDoc;
|
|
n@893
|
201 }
|
|
n@893
|
202
|
|
n@893
|
203 function constructPrePost(parent, options) {
|
|
n@893
|
204 for (var i=0; i<options.length; i++) {
|
|
n@893
|
205 var elem = options[i];
|
|
n@893
|
206 var attributes = elem.getElementsByClassName('attrib')[0].getElementsByTagName('input');
|
|
n@893
|
207 if (elem.getAttribute('name') == 'question-node') {
|
|
n@893
|
208 var node = document.createElement('question');
|
|
n@893
|
209 node.setAttribute('id',attributes[0].value);
|
|
n@893
|
210 node.textContent = attributes[1].value;
|
|
n@893
|
211 node.setAttribute('mandatory',attributes[2].checked);
|
|
n@893
|
212 } else if (elem.getAttribute('name') == 'statement-node') {
|
|
n@893
|
213 var node = document.createElement('statement');
|
|
n@893
|
214 node.textContent = attributes[0].value;
|
|
n@893
|
215 }
|
|
n@893
|
216 parent.appendChild(node);
|
|
n@893
|
217 }
|
|
n@893
|
218 }
|
|
n@893
|
219
|
|
n@893
|
220 function validate() {
|
|
n@893
|
221 var canExport = true;
|
|
n@893
|
222 // Checks if the XML can be created from the given entries
|
|
n@893
|
223 var inputs = document.getElementsByTagName('input');
|
|
n@893
|
224 for (var i=0; i<inputs.length; i++) {
|
|
n@893
|
225 if (inputs[i].type == 'text') {
|
|
n@893
|
226 if (inputs[i].value == "") {
|
|
n@893
|
227 var mandatory = inputs[i].getAttribute('mandatory');
|
|
n@893
|
228 if (mandatory == "true") {
|
|
n@893
|
229 errorInput(inputs[i]);
|
|
n@893
|
230 canExport = false;
|
|
n@893
|
231 } else {
|
|
n@893
|
232 warningInput(inputs[i]);
|
|
n@893
|
233 }
|
|
n@893
|
234 } else {
|
|
n@893
|
235 goodInput(inputs[i]);
|
|
n@893
|
236 }
|
|
n@893
|
237 }
|
|
n@893
|
238 }
|
|
n@893
|
239
|
|
n@893
|
240 var audioHolders = document.getElementsByName('audio-holder');
|
|
n@893
|
241 for (var i=0; i<audioHolders.length; i++) {
|
|
n@893
|
242 var divs = audioHolders[i].getElementsByClassName('head');
|
|
n@893
|
243 var IDs = [];
|
|
n@893
|
244 for (var j=0; j<divs.length; j++) {
|
|
n@893
|
245 if (divs[j].getAttribute('name') == 'audio-element') {
|
|
n@893
|
246 var obj = divs[j].getElementsByClassName('attrib')[0].children[1];
|
|
n@893
|
247 var aeID = obj.value;
|
|
n@893
|
248 if (aeID != "") {
|
|
n@893
|
249 var unique = true;
|
|
n@893
|
250 for (var k=0; k<IDs.length; k++) {
|
|
n@893
|
251 if (aeID == IDs[k]) {
|
|
n@893
|
252 unique = false;
|
|
n@893
|
253 break;
|
|
n@893
|
254 }
|
|
n@893
|
255 }
|
|
n@893
|
256 if (unique == true) {
|
|
n@893
|
257 IDs.push(aeID);
|
|
n@893
|
258 } else {
|
|
n@893
|
259 errorInput(obj);
|
|
n@893
|
260 canExport = false;
|
|
n@893
|
261 }
|
|
n@893
|
262 }
|
|
n@893
|
263 }
|
|
n@893
|
264 }
|
|
n@893
|
265 }
|
|
n@893
|
266 return canExport;
|
|
n@893
|
267 };
|
|
n@893
|
268
|
|
n@893
|
269 function errorInput(node) {
|
|
n@893
|
270 node.style.backgroundColor = "#FF0000";
|
|
n@893
|
271 }
|
|
n@893
|
272
|
|
n@893
|
273 function warningInput(node) {
|
|
n@893
|
274 node.style.backgroundColor = "#FFFF00";
|
|
n@893
|
275 }
|
|
n@893
|
276
|
|
n@893
|
277 function goodInput(node) {
|
|
n@893
|
278 node.style.backgroundColor = "#FFFFFF";
|
|
n@893
|
279 }
|
|
n@893
|
280
|
|
n@893
|
281 function questionNode() {
|
|
n@893
|
282 var node = document.createElement("div");
|
|
n@893
|
283 node.setAttribute('class','head');
|
|
n@893
|
284 node.setAttribute('name','question-node');
|
|
n@893
|
285 var nodeTitle = document.createElement("span");
|
|
n@893
|
286 nodeTitle.textContent = "Question";
|
|
n@893
|
287 var attributes = document.createElement("div");
|
|
n@893
|
288 attributes.setAttribute('class','attrib');
|
|
n@893
|
289 var id = attributePair("ID:","text", true);
|
|
n@893
|
290 var question = attributePair("Question:","text", false);
|
|
n@893
|
291 question[1].style.width = "500px";
|
|
n@893
|
292 var mandatory = attributePair("Mandatory:","checkbox", false);
|
|
n@893
|
293 node.appendChild(nodeTitle);
|
|
n@893
|
294 id.forEach(function(item){attributes.appendChild(item);},false);
|
|
n@893
|
295 question.forEach(function(item){attributes.appendChild(item);},false);
|
|
n@893
|
296 mandatory.forEach(function(item){attributes.appendChild(item);},false);
|
|
n@893
|
297 node.appendChild(attributes);
|
|
n@893
|
298
|
|
n@893
|
299 var removeButton = document.createElement("button");
|
|
n@893
|
300 removeButton.textContent = "Remove";
|
|
n@893
|
301 removeButton.onclick = removeNode;
|
|
n@893
|
302 node.appendChild(removeButton);
|
|
n@893
|
303 return node;
|
|
n@893
|
304 }
|
|
n@893
|
305
|
|
n@893
|
306 function statementNode() {
|
|
n@893
|
307 var node = document.createElement("div");
|
|
n@893
|
308 node.setAttribute('class','head');
|
|
n@893
|
309 node.setAttribute('name','statement-node');
|
|
n@893
|
310 var nodeTitle = document.createElement("span");
|
|
n@893
|
311 nodeTitle.textContent = "Statement";
|
|
n@893
|
312 var attributes = document.createElement("div");
|
|
n@893
|
313 attributes.setAttribute('class','attrib');
|
|
n@893
|
314 var statement = attributePair("Statement:","text",false);
|
|
n@893
|
315 statement[1].style.width = "500px";
|
|
n@893
|
316 node.appendChild(nodeTitle);
|
|
n@893
|
317 statement.forEach(function(item){attributes.appendChild(item);},false);
|
|
n@893
|
318 node.appendChild(attributes);
|
|
n@893
|
319
|
|
n@893
|
320 var removeButton = document.createElement("button");
|
|
n@893
|
321 removeButton.textContent = "Remove";
|
|
n@893
|
322 removeButton.onclick = removeNode;
|
|
n@893
|
323 node.appendChild(removeButton);
|
|
n@893
|
324 return node;
|
|
n@893
|
325 }
|
|
n@893
|
326
|
|
n@893
|
327 function audioHolderNode() {
|
|
n@893
|
328 var audioHolderCounts = document.getElementsByName("audio-holder").length;
|
|
n@893
|
329 var node = document.createElement("div");
|
|
n@893
|
330 node.setAttribute("class","head");
|
|
n@893
|
331 node.setAttribute("name","audio-holder");
|
|
n@893
|
332 node.setAttribute("id","audio-holder-"+audioHolderCounts);
|
|
n@893
|
333 var nodeTitle = document.createElement("span");
|
|
n@893
|
334 nodeTitle.textContent = "Audio Holder "+(audioHolderCounts+1);
|
|
n@893
|
335
|
|
n@893
|
336 var attributes = document.createElement("div");
|
|
n@893
|
337 attributes.setAttribute('class','attrib');
|
|
n@893
|
338 var id = attributePair("ID:","text",true);
|
|
n@893
|
339 id[1].value=audioHolderCounts;
|
|
n@893
|
340 var hostURL = attributePair("Host URL:", "text",false);
|
|
n@893
|
341 var sampleRate = attributePair("Sample Rate:","text",false);
|
|
n@893
|
342 var randomiseOrder = attributePair("Randomise Element Order:","checkbox");
|
|
n@893
|
343 var repeatCount = attributePair("Repeat Page Count:","number");
|
|
n@893
|
344 repeatCount[1].value = 0;
|
|
n@893
|
345 var loop = attributePair("Loop Element Playback","checkbox");
|
|
n@893
|
346 var elementComments = attributePair("Enable Comment Boxes","checkbox");
|
|
n@893
|
347 id.forEach(function(item){attributes.appendChild(item);},false);
|
|
n@893
|
348 hostURL.forEach(function(item){attributes.appendChild(item);},false);
|
|
n@893
|
349 sampleRate.forEach(function(item){attributes.appendChild(item);},false);
|
|
n@893
|
350 hostURL.forEach(function(item){attributes.appendChild(item);},false);
|
|
n@893
|
351 randomiseOrder.forEach(function(item){attributes.appendChild(item);},false);
|
|
n@893
|
352 repeatCount.forEach(function(item){attributes.appendChild(item);},false);
|
|
n@893
|
353 loop.forEach(function(item){attributes.appendChild(item);},false);
|
|
n@893
|
354 elementComments.forEach(function(item){attributes.appendChild(item);},false);
|
|
n@893
|
355
|
|
n@893
|
356 node.appendChild(nodeTitle);
|
|
n@893
|
357 node.appendChild(attributes);
|
|
n@893
|
358
|
|
n@893
|
359 var pretest = document.createElement("div");
|
|
n@893
|
360 pretest.setAttribute('class','head');
|
|
n@893
|
361 pretest.setAttribute('name','pre-test');
|
|
n@893
|
362 var pretestTitle = document.createElement("h4");
|
|
n@893
|
363 pretestTitle.textContent = "Pre Test";
|
|
n@893
|
364 var buttonAddQ = document.createElement("button");
|
|
n@893
|
365 buttonAddQ.textContent = "Add Pre Test Question";
|
|
n@893
|
366 buttonAddQ.onclick = function(){event.srcElement.parentElement.appendChild(questionNode());};
|
|
n@893
|
367 var buttonAddS = document.createElement("button");
|
|
n@893
|
368 buttonAddS.textContent = "Add Pre Test Statement";
|
|
n@893
|
369 buttonAddS.onclick = function(){event.srcElement.parentElement.appendChild(statementNode());};
|
|
n@893
|
370 pretest.appendChild(pretestTitle);
|
|
n@893
|
371 pretest.appendChild(buttonAddQ);
|
|
n@893
|
372 pretest.appendChild(buttonAddS);
|
|
n@893
|
373
|
|
n@893
|
374 var posttest = document.createElement("div");
|
|
n@893
|
375 posttest.setAttribute('class','head');
|
|
n@893
|
376 posttest.setAttribute('name','post-test');
|
|
n@893
|
377 var posttestTitle = document.createElement("h4");
|
|
n@893
|
378 posttestTitle.textContent = "Post Test";
|
|
n@893
|
379 var buttonAddQ = document.createElement("button");
|
|
n@893
|
380 buttonAddQ.textContent = "Add Post Test Question";
|
|
n@893
|
381 buttonAddQ.onclick = function(){event.srcElement.parentElement.appendChild(questionNode());};
|
|
n@893
|
382 var buttonAddS = document.createElement("button");
|
|
n@893
|
383 buttonAddS.textContent = "Add Post Test Statement";
|
|
n@893
|
384 buttonAddS.onclick = function(){event.srcElement.parentElement.appendChild(statementNode());};
|
|
n@893
|
385 posttest.appendChild(posttestTitle);
|
|
n@893
|
386 posttest.appendChild(buttonAddQ);
|
|
n@893
|
387 posttest.appendChild(buttonAddS);
|
|
n@893
|
388
|
|
n@893
|
389 node.appendChild(pretest);
|
|
n@893
|
390 node.appendChild(posttest);
|
|
n@893
|
391
|
|
n@893
|
392 var newAudioElementButton = document.createElement("button");
|
|
n@893
|
393 newAudioElementButton.textContent = "Add audio element";
|
|
n@893
|
394 newAudioElementButton.onclick = function(){
|
|
n@893
|
395 event.srcElement.parentElement.appendChild(audioElementNode());
|
|
n@893
|
396 };
|
|
n@893
|
397 node.appendChild(newAudioElementButton);
|
|
n@893
|
398
|
|
n@893
|
399 var newCommentButton = document.createElement("button");
|
|
n@893
|
400 newCommentButton.textContent = "Add Comment Box";
|
|
n@893
|
401 newCommentButton.onclick = function() {
|
|
n@893
|
402 event.srcElement.parentElement.appendChild(commentBox());
|
|
n@893
|
403 };
|
|
n@893
|
404 node.appendChild(newCommentButton);
|
|
n@893
|
405
|
|
n@893
|
406 var newInterface = document.createElement("button");
|
|
n@893
|
407 newInterface.textContent = "Add Interface";
|
|
n@893
|
408 newInterface.onclick = function() {
|
|
n@893
|
409 event.srcElement.parentElement.appendChild(interfaceNode());
|
|
n@893
|
410 };
|
|
n@893
|
411 node.appendChild(newInterface);
|
|
n@893
|
412
|
|
n@893
|
413 var removeButton = document.createElement("button");
|
|
n@893
|
414 removeButton.textContent = "Remove Audio Holder";
|
|
n@893
|
415 removeButton.onclick = removeNode;
|
|
n@893
|
416 node.appendChild(removeButton);
|
|
n@893
|
417 return node;
|
|
n@893
|
418 }
|
|
n@893
|
419
|
|
n@893
|
420 function audioElementNode() {
|
|
n@893
|
421 var node = document.createElement('div');
|
|
n@893
|
422 node.setAttribute('class','head');
|
|
n@893
|
423 node.setAttribute('name','audio-element');
|
|
n@893
|
424 var nodeTitle = document.createElement('span');
|
|
n@893
|
425 nodeTitle.textContent = 'Audio Element';
|
|
n@893
|
426
|
|
n@893
|
427 var attributes = document.createElement("div");
|
|
n@893
|
428 attributes.setAttribute('class','attrib');
|
|
n@893
|
429 var id = attributePair("ID:","text",true);
|
|
n@893
|
430 var url = attributePair("URL:","text",true);
|
|
n@893
|
431 id.forEach(function(item){attributes.appendChild(item);},false);
|
|
n@893
|
432 url.forEach(function(item){attributes.appendChild(item);},false);
|
|
n@893
|
433
|
|
n@893
|
434 node.appendChild(nodeTitle);
|
|
n@893
|
435 node.appendChild(attributes);
|
|
n@893
|
436
|
|
n@893
|
437 var removeButton = document.createElement("button");
|
|
n@893
|
438 removeButton.textContent = "Remove Audio Element";
|
|
n@893
|
439 removeButton.onclick = removeNode;
|
|
n@893
|
440 node.appendChild(removeButton);
|
|
n@893
|
441 return node;
|
|
n@893
|
442 }
|
|
n@893
|
443
|
|
n@893
|
444 function commentBox() {
|
|
n@893
|
445 var node = document.createElement('div');
|
|
n@893
|
446 node.setAttribute('class','head');
|
|
n@893
|
447 node.setAttribute('name','comment-question');
|
|
n@893
|
448 var nodeTitle = document.createElement('h4');
|
|
n@893
|
449 nodeTitle.textContent = "Comment Box";
|
|
n@893
|
450
|
|
n@893
|
451 var attributes = document.createElement('div');
|
|
n@893
|
452 attributes.setAttribute('class','attrib');
|
|
n@893
|
453 var id = attributePair("ID:",'text',true);
|
|
n@893
|
454 var question = attributePair("Question:",'text',true);
|
|
n@893
|
455 question[1].style.width = "500px";
|
|
n@893
|
456 id.forEach(function(item){attributes.appendChild(item);},false);
|
|
n@893
|
457 question.forEach(function(item){attributes.appendChild(item);},false);
|
|
n@893
|
458
|
|
n@893
|
459 var removeButton = document.createElement("button");
|
|
n@893
|
460 removeButton.textContent = "Remove Comment Box";
|
|
n@893
|
461 removeButton.onclick = removeNode;
|
|
n@893
|
462
|
|
n@893
|
463 node.appendChild(nodeTitle);
|
|
n@893
|
464 node.appendChild(attributes);
|
|
n@893
|
465 node.appendChild(removeButton);
|
|
n@893
|
466 return node;
|
|
n@893
|
467 }
|
|
n@893
|
468
|
|
n@893
|
469 function interfaceNode() {
|
|
n@893
|
470 var selectedInterface = document.getElementById('interface').value;
|
|
n@893
|
471 var node = document.createElement('div');
|
|
n@893
|
472 node.setAttribute('class','head');
|
|
n@893
|
473 node.setAttribute('name','interface-options');
|
|
n@893
|
474 var nodeTitle = document.createElement('h4');
|
|
n@893
|
475 nodeTitle.textContent = "Interface";
|
|
n@893
|
476
|
|
n@893
|
477 var attributes = document.createElement('div');
|
|
n@893
|
478 attributes.setAttribute('class','attrib');
|
|
n@893
|
479 var title = attributePair('Title: ','text',false);
|
|
n@893
|
480 title[1].style.width = "500px";
|
|
n@893
|
481
|
|
n@893
|
482 var addMarker = document.createElement('button');
|
|
n@893
|
483 addMarker.textContent = "Add Scale Marker";
|
|
n@893
|
484 addMarker.onclick = function() {
|
|
n@893
|
485 event.srcElement.parentElement.appendChild(newScaleMarker());
|
|
n@893
|
486 };
|
|
n@893
|
487
|
|
n@893
|
488 title.forEach(function(item){attributes.appendChild(item);},false);
|
|
n@893
|
489
|
|
n@893
|
490 var removeButton = document.createElement("button");
|
|
n@893
|
491 removeButton.textContent = "Remove Interface";
|
|
n@893
|
492 removeButton.onclick = removeNode;
|
|
n@893
|
493
|
|
n@893
|
494 node.appendChild(nodeTitle);
|
|
n@893
|
495 node.appendChild(attributes);
|
|
n@893
|
496 node.appendChild(addMarker);
|
|
n@893
|
497 node.appendChild(removeButton);
|
|
n@893
|
498 return node;
|
|
n@893
|
499 }
|
|
n@893
|
500
|
|
n@893
|
501 function newScaleMarker() {
|
|
n@893
|
502 var node = document.createElement('div');
|
|
n@893
|
503 node.setAttribute('class','head');
|
|
n@893
|
504 node.setAttribute('name','interface-options');
|
|
n@893
|
505 var nodeTitle = document.createElement('span');
|
|
n@893
|
506 nodeTitle.textContent = "Marker";
|
|
n@893
|
507 var attributes = document.createElement('div');
|
|
n@893
|
508 attributes.setAttribute('class','attrib');
|
|
n@893
|
509 var text = attributePair('Text: ','text',true);
|
|
n@893
|
510 var position = attributePair('Positon','number',true);
|
|
n@893
|
511
|
|
n@893
|
512 text.forEach(function(item){attributes.appendChild(item);},false);
|
|
n@893
|
513 position.forEach(function(item){attributes.appendChild(item);},false);
|
|
n@893
|
514
|
|
n@893
|
515 var removeButton = document.createElement("button");
|
|
n@893
|
516 removeButton.textContent = "Remove Marker";
|
|
n@893
|
517 removeButton.onclick = removeNode;
|
|
n@893
|
518
|
|
n@893
|
519 node.appendChild(nodeTitle);
|
|
n@893
|
520 node.appendChild(attributes);
|
|
n@893
|
521 node.appendChild(removeButton);
|
|
n@893
|
522 return node;
|
|
n@893
|
523 }
|
|
n@893
|
524
|
|
n@893
|
525 function handleDragOver(e) {
|
|
n@893
|
526 e.stopPropagation();
|
|
n@893
|
527 e.preventDefault();
|
|
n@893
|
528 }
|
|
n@893
|
529 function handleDragEnter(e) {
|
|
n@893
|
530 e.stopPropagation();
|
|
n@893
|
531 e.preventDefault();
|
|
n@893
|
532 this.style.backgroundColor = '#AAFFAA';
|
|
n@893
|
533 }
|
|
n@893
|
534 function handleDragLeave(e) {
|
|
n@893
|
535 e.stopPropagation();
|
|
n@893
|
536 e.preventDefault();
|
|
n@893
|
537 this.style.backgroundColor = "#FFFFFF";
|
|
n@893
|
538 }
|
|
n@893
|
539 function handleDrop(e) {
|
|
n@893
|
540 e.stopPropagation();
|
|
n@893
|
541 e.preventDefault();
|
|
n@893
|
542
|
|
n@893
|
543 var file = e.dataTransfer.files[0];
|
|
n@893
|
544
|
|
n@893
|
545 // Uses HTML5 FileAPI - https://w3c.github.io/FileAPI/#filereader-interface
|
|
n@893
|
546 var reader = new FileReader();
|
|
n@893
|
547 reader.onload = function() {
|
|
n@893
|
548 var parse = new DOMParser();
|
|
n@893
|
549 var xml = parse.parseFromString(reader.result,'text/xml');
|
|
n@893
|
550 importXML(xml);
|
|
n@893
|
551 };
|
|
n@893
|
552 reader.readAsText(file);
|
|
n@893
|
553
|
|
n@893
|
554 }
|
|
n@893
|
555 var g_XML;
|
|
n@893
|
556
|
|
n@893
|
557 function importXML(xml) {
|
|
n@893
|
558 g_XML = xml;
|
|
n@893
|
559
|
|
n@893
|
560 var root = xml.getElementsByTagName('BrowserEvalProjectDocument')[0];
|
|
n@893
|
561 var setup = xml.getElementsByTagName('setup')[0];
|
|
n@893
|
562 document.getElementById('interface').value = setup.getAttribute('interface');
|
|
n@893
|
563 document.getElementById('projectReturn').value = setup.getAttribute('projectReturn');
|
|
n@893
|
564 document.getElementById('randomisePageOrder').checked = setup.getAttribute('randomiseOrder');
|
|
n@893
|
565 document.getElementById('collectMetrics').checked = setup.getAttribute('collectMetrics');
|
|
n@893
|
566
|
|
n@893
|
567 var globalPreTest = setup.getElementsByTagName('PreTest')[0];
|
|
n@893
|
568 var globalPostTest = setup.getElementsByTagName('PostTest')[0];
|
|
n@893
|
569 for (var i=0; i<globalPreTest.childElementCount; i++) {
|
|
n@893
|
570 var child = globalPreTest.children[i];
|
|
n@893
|
571 var node;
|
|
n@893
|
572 if (child.nodeName == "question") {
|
|
n@893
|
573 node = questionNode();
|
|
n@893
|
574 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
|
|
n@893
|
575 attribs[0].value = child.id;
|
|
n@893
|
576 attribs[1].value = child.textContent;
|
|
n@893
|
577 attribs[2].checked = child.getAttribute('mandatory');
|
|
n@893
|
578 } else if (child.nodeName == "statement") {
|
|
n@893
|
579 node = statementNode();
|
|
n@893
|
580 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
|
|
n@893
|
581 attribs[0].value = child.textContent;
|
|
n@893
|
582 }
|
|
n@893
|
583 document.getElementById('globalPreTest').appendChild(node);
|
|
n@893
|
584 }
|
|
n@893
|
585
|
|
n@893
|
586 for (var i=0; i<globalPostTest.childElementCount; i++) {
|
|
n@893
|
587 var child = globalPostTest.children[i];
|
|
n@893
|
588 var node;
|
|
n@893
|
589 if (child.nodeName == "question") {
|
|
n@893
|
590 node = questionNode();
|
|
n@893
|
591 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
|
|
n@893
|
592 attribs[0].value = child.id;
|
|
n@893
|
593 attribs[1].value = child.textContent;
|
|
n@893
|
594 attribs[2].checked = child.getAttribute('mandatory');
|
|
n@893
|
595 } else if (child.nodeName == "statement") {
|
|
n@893
|
596 node = statementNode();
|
|
n@893
|
597 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
|
|
n@893
|
598 attribs[0].value = child.textContent;
|
|
n@893
|
599 }
|
|
n@893
|
600 document.getElementById('globalPostTest').appendChild(node);
|
|
n@893
|
601 }
|
|
n@893
|
602
|
|
n@893
|
603 // Metric Enable Flags
|
|
n@893
|
604 var mEnable = setup.getElementsByTagName('Metric')[0].getElementsByTagName('metricEnable');
|
|
n@893
|
605 for (var i=0; i<mEnable.length; i++) {
|
|
n@893
|
606 var node = mEnable[i];
|
|
n@893
|
607 var enabled = node.textContent;
|
|
n@893
|
608 document.getElementById(enabled).checked = true;
|
|
n@893
|
609 }
|
|
n@893
|
610
|
|
n@893
|
611 var audioHolders = root.getElementsByTagName('audioHolder');
|
|
n@893
|
612 for (var i=0; i<audioHolders.length; i++) {
|
|
n@893
|
613 var audioHolderDOM = audioHolderNode();
|
|
n@893
|
614 var attribs = audioHolderDOM.getElementsByClassName('attrib')[0].getElementsByTagName('input');
|
|
n@893
|
615 attribs[0].value = audioHolders[i].id;
|
|
n@893
|
616 attribs[1].value = audioHolders[i].getAttribute('sampleRate');
|
|
n@893
|
617 attribs[2].value = audioHolders[i].getAttribute('hostURL');
|
|
n@893
|
618 attribs[3].checked = audioHolders[i].getAttribute('randomiseOrder');
|
|
n@893
|
619 attribs[4].value = audioHolders[i].getAttribute('repeatCount');
|
|
n@893
|
620 attribs[5].checked = audioHolders[i].getAttribute('loop');
|
|
n@893
|
621 attribs[6].checked = audioHolders[i].getAttribute('elementComments');
|
|
n@893
|
622
|
|
n@893
|
623 var PreTest = audioHolders[i].getElementsByTagName('PreTest');
|
|
n@893
|
624 var PostTest = audioHolders[i].getElementsByTagName('PostTest');
|
|
n@893
|
625 if (PreTest.length != 0) {
|
|
n@893
|
626 PreTest = PreTest[0];
|
|
n@893
|
627 for (var j=0; j<PreTest.childElementCount; j++) {
|
|
n@893
|
628 var child = PreTest.children[j];
|
|
n@893
|
629 var node;
|
|
n@893
|
630 if (child.nodeName == "question") {
|
|
n@893
|
631 node = questionNode();
|
|
n@893
|
632 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
|
|
n@893
|
633 attribs[0].value = child.id;
|
|
n@893
|
634 attribs[1].value = child.textContent;
|
|
n@893
|
635 attribs[2].checked = child.getAttribute('mandatory');
|
|
n@893
|
636 } else if (child.nodeName == "statement") {
|
|
n@893
|
637 node = statementNode();
|
|
n@893
|
638 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
|
|
n@893
|
639 attribs[0].value = child.textContent;
|
|
n@893
|
640 }
|
|
n@893
|
641 audioHolderDOM.children[2].appendChild(node);
|
|
n@893
|
642 }
|
|
n@893
|
643 }
|
|
n@893
|
644 if (PostTest.length != 0) {
|
|
n@893
|
645 PostTest = PostTest[0];
|
|
n@893
|
646 for (var j=0; j<PostTest.childElementCount; j++) {
|
|
n@893
|
647 var child = PostTest.children[j];
|
|
n@893
|
648 var node;
|
|
n@893
|
649 if (child.nodeName == "question") {
|
|
n@893
|
650 node = questionNode();
|
|
n@893
|
651 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
|
|
n@893
|
652 attribs[0].value = child.id;
|
|
n@893
|
653 attribs[1].value = child.textContent;
|
|
n@893
|
654 attribs[2].checked = child.getAttribute('mandatory');
|
|
n@893
|
655 } else if (child.nodeName == "statement") {
|
|
n@893
|
656 node = statementNode();
|
|
n@893
|
657 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
|
|
n@893
|
658 attribs[0].value = child.textContent;
|
|
n@893
|
659 }
|
|
n@893
|
660 audioHolderDOM.children[3].appendChild(node);
|
|
n@893
|
661 }
|
|
n@893
|
662 }
|
|
n@893
|
663 // Process interface
|
|
n@893
|
664 var interfaceNodes = audioHolders[i].getElementsByTagName('interface');
|
|
n@893
|
665 for (var j=0; j<interfaceNodes.length; j++) {
|
|
n@893
|
666 var node = interfaceNode();
|
|
n@893
|
667 var child = interfaceNodes[j];
|
|
n@893
|
668 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
|
|
n@893
|
669 attribs[0].value = child.getElementsByTagName('title')[0].textContent;
|
|
n@893
|
670
|
|
n@893
|
671 var markers = child.getElementsByTagName('scale');
|
|
n@893
|
672 for (var k=0; k<markers.length; k++) {
|
|
n@893
|
673 var markerNode = newScaleMarker();
|
|
n@893
|
674 attribs = markerNode.getElementsByClassName('attrib')[0].getElementsByTagName('input');
|
|
n@893
|
675 attribs[0].value = markers[k].textContent;
|
|
n@893
|
676 attribs[1].value = markers[k].getAttribute('position');
|
|
n@893
|
677 node.appendChild(markerNode);
|
|
n@893
|
678 }
|
|
n@893
|
679 audioHolderDOM.appendChild(node);
|
|
n@893
|
680 }
|
|
n@893
|
681
|
|
n@893
|
682
|
|
n@893
|
683 // Process audio-element
|
|
n@893
|
684 var audioElements = audioHolders[i].getElementsByTagName('audioElements');
|
|
n@893
|
685 for (var j=0; j<audioElements.length; j++) {
|
|
n@893
|
686 var node = audioElementNode();
|
|
n@893
|
687 var child = audioElements[j];
|
|
n@893
|
688 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
|
|
n@893
|
689 attribs[0].value = child.id;
|
|
n@893
|
690 attribs[1].value = child.getAttribute('url');
|
|
n@893
|
691 audioHolderDOM.appendChild(node);
|
|
n@893
|
692 }
|
|
n@893
|
693
|
|
n@893
|
694 // Process comment-question
|
|
n@893
|
695 var commentQuestion = audioHolders[0].getElementsByTagName('CommentQuestion');
|
|
n@893
|
696 for (var j=0; j<commentQuestion.length; j++) {
|
|
n@893
|
697 var node = commentBox();
|
|
n@893
|
698 var child = commentQuestion[j];
|
|
n@893
|
699 var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
|
|
n@893
|
700 attribs[0].value = child.id;
|
|
n@893
|
701 attribs[1].value = child.textContent;
|
|
n@893
|
702 audioHolderDOM.appendChild(node);
|
|
n@893
|
703 }
|
|
n@893
|
704
|
|
n@893
|
705 document.getElementById('setup').appendChild(audioHolderDOM);
|
|
n@893
|
706 }
|
|
n@893
|
707 }
|
|
n@893
|
708 </script>
|
|
n@893
|
709 <style>
|
|
n@893
|
710 div {
|
|
n@893
|
711 padding: 2px;
|
|
n@893
|
712 margin-top: 2px;
|
|
n@893
|
713 margin-bottom: 2px;
|
|
n@893
|
714 }
|
|
n@893
|
715 div.head{
|
|
n@893
|
716 margin-left: 10px;
|
|
n@893
|
717 border: black;
|
|
n@893
|
718 border-width: 2px;
|
|
n@893
|
719 border-style: solid;
|
|
n@893
|
720 }
|
|
n@893
|
721 div.attrib{
|
|
n@893
|
722 margin-left:25px;
|
|
n@893
|
723 border: black;
|
|
n@893
|
724 border-width: 2px;
|
|
n@893
|
725 border-style: dashed;
|
|
n@893
|
726 margin-bottom: 10px;
|
|
n@893
|
727 }
|
|
n@893
|
728 div#dragFile{
|
|
n@893
|
729 height:100px;
|
|
n@893
|
730 border-width: 2px;
|
|
n@893
|
731 border-style: dashed;
|
|
n@893
|
732 margin-bottom: 10px;
|
|
n@893
|
733 }
|
|
n@893
|
734 </style>
|
|
n@893
|
735
|
|
n@893
|
736 </head>
|
|
n@893
|
737
|
|
n@893
|
738 <body>
|
|
n@893
|
739 <h1>Create Test Setup XML</h1>
|
|
n@893
|
740 <div id="dragFile">
|
|
n@893
|
741 <span>Drag and Drop an XML specification file here to auto-load.</span>
|
|
n@893
|
742 </div>
|
|
n@893
|
743 <button id="validateXML" onclick="buttonClickedValidate();">Validate</button>
|
|
n@893
|
744 <button id="createXML" onclick="buttonClickedSubmit();" disabled>Submit</button>
|
|
n@893
|
745 <span id="errorMessage" visibility="hidden"></span>
|
|
n@893
|
746 <div id="topLevelBody" align="left">
|
|
n@893
|
747 <!-- Interface goes here -->
|
|
n@893
|
748 <div name='test-setup'>
|
|
n@893
|
749 <div id="setup" class="head">
|
|
n@893
|
750 <h2>Setup Tag</h2>
|
|
n@893
|
751 <div id="setup-attribs" class="attrib">
|
|
n@893
|
752 <span>Interface</span>
|
|
n@893
|
753 <select id="interface">
|
|
n@893
|
754 <option value='APE'>APE</option>
|
|
n@893
|
755 </select>
|
|
n@893
|
756 <span>Project Return</span>
|
|
n@893
|
757 <input type="text" id="projectReturn" mandatory="false">
|
|
n@893
|
758 <span>Randomise Test Page Order</span>
|
|
n@893
|
759 <input id="randomisePageOrder" type="checkbox" value="false">
|
|
n@893
|
760 <span>Collect Session Metrics</span>
|
|
n@893
|
761 <input id="collectMetrics" type="checkbox">
|
|
n@893
|
762 </div>
|
|
n@893
|
763 <div id="globalPreTest" class="head">
|
|
n@893
|
764 <h3>Pre Test</h3>
|
|
n@893
|
765 <button id="addPreTestQ" onclick="event.srcElement.parentElement.appendChild(questionNode());">Add Pre Test Question</button>
|
|
n@893
|
766 <button id="addPreTestS" onclick="event.srcElement.parentElement.appendChild(statementNode());">Add Pre Test Statement</button>
|
|
n@893
|
767 </div>
|
|
n@893
|
768 <div id="globalPostTest" class="head">
|
|
n@893
|
769 <h3>Post Test</h3>
|
|
n@893
|
770 <button id="addPreTestQ" onclick="event.srcElement.parentElement.appendChild(questionNode());">Add Post Test Question</button>
|
|
n@893
|
771 <button id="addPreTestS" onclick="event.srcElement.parentElement.appendChild(statementNode());">Add Post Test Statement</button>
|
|
n@893
|
772 </div>
|
|
n@893
|
773 <div id="globalMetric" class="head">
|
|
n@893
|
774 <h3>Global Metrics</h3>
|
|
n@893
|
775 <div id="globalMetric-attrib" class="attrib">
|
|
n@893
|
776 <span>Test Timer</span>
|
|
n@893
|
777 <input type="checkbox" id="testTimer" />
|
|
n@893
|
778 <span>Element Playback Timer</span>
|
|
n@893
|
779 <input type="checkbox" id="elementTimer" />
|
|
n@893
|
780 <span>Element Initial Position</span>
|
|
n@893
|
781 <input type="checkbox" id="elementInitialPosition" />
|
|
n@893
|
782 <span>Element Tracker</span>
|
|
n@893
|
783 <input type="checkbox" id="elementTracker" />
|
|
n@893
|
784 <span>Element Listen Tracker</span>
|
|
n@893
|
785 <input type="checkbox" id="elementListenTracker" />
|
|
n@893
|
786 <span>Element Flag Listened To</span>
|
|
n@893
|
787 <input type="checkbox" id="elementFlagListenedTo" />
|
|
n@893
|
788 <span>Element Flag Moved</span>
|
|
n@893
|
789 <input type="checkbox" id="elementFlagMoved" />
|
|
n@893
|
790 </div>
|
|
n@893
|
791 </div>
|
|
n@893
|
792 <button id="addAudioHolder" onclick="event.srcElement.parentElement.appendChild(audioHolderNode());">Add AudioHolder / Test Page</button>
|
|
n@893
|
793 </div>
|
|
n@893
|
794 </div>
|
|
n@893
|
795 </div>
|
|
n@893
|
796 </body>
|
|
n@893
|
797 </html>
|
