Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create_advanced.html @ 1150:2674d80c66ff

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