Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create_2.html @ 1390:1e85294554fe

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