Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create_2.html @ 1478:82f43919f385

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