Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create_2.html @ 1952:b0c6106afd44

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