Mercurial > hg > modal-synthesis-of-weapon-sounds

annotate Perceptual Evaluation/webaudioevaluationtool/test_create/test_create_2.html @ 0:55c282f01a30 tip

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