Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create_advanced.html @ 1116:c44fbf72f7f2

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