Mercurial > hg > webaudioevaluationtool

annotate test_create/test_create_advanced.html @ 1460:1b81ab727352

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