Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create_2.html @ 782:1e176e95ef33

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