Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create_advanced.html @ 1078:888292c88c33

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