Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create_2.html @ 765:e66434e0f573

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