Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create_2.html @ 1514:16e9ac82e8b0

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