Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create_advanced.html @ 753:66d732c2bc14

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