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