Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create_advanced.html @ 755:c73996a0fb21

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