Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create_2.html @ 718:0b095f66de65

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