Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create_advanced.html @ 823:a0d7a64d8325

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