Mercurial > hg > webaudioevaluationtool

comparison test_create/test_create_advanced.html @ 1118:3edcbbea168b

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