Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create_advanced.html @ 754:a554f64bcba7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Will attempt to load XML only if url is set
author Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
date Fri, 18 Dec 2015 18:29:57 +0000
parents 66d732c2bc14
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>