Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create_2.html @ 1402:1de4c0257fa4

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