Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create_advanced.html @ 815:3b0770e1e616

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