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