Mercurial > hg > webaudioevaluationtool

comparison test_create/test_create_advanced.html @ 1116:c44fbf72f7f2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
All interfaces support comment boxes. Comment box identification matches presented tag (for instance, AB will be Comment on fragment A, rather than 1). Tighter buffer loading protocol, audioObjects register with the buffer rather than checking for buffer existence (which can be buggy depending on the buffer state). Buffers now have a state to ensure exact location in loading chain (downloading, decoding, LUFS, ready).
author Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
date Fri, 29 Jan 2016 11:11:57 +0000
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 1116:c44fbf72f7f2
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>