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