Mercurial > hg > webaudioevaluationtool
changeset 506:1dbc6d3e6fb5 Dev_main
Test Creator nearing completion. Some more GUI events needed. Generates valid XML, can create new or use old. Supports most features.
| author | Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk> |
|---|---|
| date | Thu, 11 Feb 2016 14:07:24 +0000 |
| parents | cf55f9ee9446 |
| children | fbba14d4e21c |
| files | test-schema.xsd test_create/style.css test_create/test_core.js |
| diffstat | 3 files changed, 196 insertions(+), 52 deletions(-) [+] |
line wrap: on
line diff
--- a/test-schema.xsd Thu Feb 11 12:06:54 2016 +0000 +++ b/test-schema.xsd Thu Feb 11 14:07:24 2016 +0000 @@ -80,8 +80,8 @@ </xs:simpleType> </xs:attribute> <xs:attribute ref="name" use="required"/> - <xs:attribute name="min" use="optional"/> - <xs:attribute name="max" use="optional"/> + <xs:attribute name="min" type="xs:decimal" use="optional"/> + <xs:attribute name="max" type="xs:decimal" use="optional"/> </xs:complexType> </xs:element> <xs:element name="scales" minOccurs="0" maxOccurs="1">
--- a/test_create/style.css Thu Feb 11 12:06:54 2016 +0000 +++ b/test_create/style.css Thu Feb 11 14:07:24 2016 +0000 @@ -61,6 +61,11 @@ margin: 0px 5px; } +div.popup-option-entry { + padding: 5px 0px; + border-bottom: 1px solid; +} + div.disabled{ color: rgb(100,100,100); } @@ -80,10 +85,9 @@ margin: 5px 0px; } div.node-attributes { - width: auto; + min-width: 92%; float: left; padding: 10px; - border: black 2px dashed; } div.attribute { float: left; @@ -91,9 +95,11 @@ } div.node-children { float: left; + min-width: 92%; } div.node-buttons { float: left; + min-width: 92%; } div.attribute input { max-width: 100px;
--- a/test_create/test_core.js Thu Feb 11 12:06:54 2016 +0000 +++ b/test_create/test_core.js Thu Feb 11 14:07:24 2016 +0000 @@ -223,6 +223,7 @@ var parse = new DOMParser(); specification.decode(parse.parseFromString(decoded.target.result,'text/xml')); popupObject.hide(); + popupObject.popupContent.innerHTML = null; convert.convert(document.getElementById('content')); } reader.readAsText(files); @@ -575,6 +576,7 @@ this.dynamic = document.createElement("div"); this.option = null; this.parent = null; + this.optionLists = []; var select = document.createElement("select"); select.setAttribute("name","type"); select.addEventListener("change",this,false); @@ -610,11 +612,23 @@ statementEntry.setAttribute("name","statement"); statementEntry.value = this.option.statement; this.dynamic.appendChild(statement); + + var id = document.createElement("div"); + var idText = document.createElement("span"); + var idEntry = document.createElement("input"); + id.appendChild(idText); + id.appendChild(idEntry); + idText.textContent = "ID: "; + idEntry.addEventListener("change",this,false); + idEntry.setAttribute("name","id"); + idEntry.value = this.option.id; + switch(this.option.type) { case "statement": break; case "question": + this.dynamic.appendChild(id); var boxsizeSelect = document.createElement("select"); var optionList = specification.schema.getAllElementsByName("survey")[0].getAllElementsByName("boxsize")[0].getAllElementsByTagName("xs:enumeration"); for (var i=0; i<optionList.length; i++) @@ -649,10 +663,112 @@ if (this.option.mandatory) {mandatoryInput.checked = true;} else {mandatoryInput.checked = false;} mandatoryInput.setAttribute("name","mandatory"); mandatoryInput.addEventListener("change",this,false); + this.dynamic.appendChild(mandatory); + break; + case "number": + this.dynamic.appendChild(id); + + var mandatory = document.createElement("div"); + var mandatoryInput = document.createElement("input"); + var mandatoryText = document.createElement("span"); + mandatoryText.textContent = "Mandatory: "; mandatory.appendChild(mandatoryText); mandatory.appendChild(mandatoryInput); + mandatoryInput.type = "checkbox"; + if (this.option.mandatory) {mandatoryInput.checked = true;} else {mandatoryInput.checked = false;} + mandatoryInput.setAttribute("name","mandatory"); + mandatoryInput.addEventListener("change",this,false); this.dynamic.appendChild(mandatory); + + var minimum = document.createElement("div"); + var minimumEntry = document.createElement("input"); + var minimumText = document.createElement("span"); + minimumText.textContent = "Minimum: "; + minimum.appendChild(minimumText); + minimum.appendChild(minimumEntry); + minimumEntry.type = "number"; + minimumEntry.setAttribute("name","min"); + minimumEntry.addEventListener("change",this,false); + minimumEntry.value = this.option.min; + this.dynamic.appendChild(minimum); + + var maximum = document.createElement("div"); + var maximumEntry = document.createElement("input"); + var maximumText = document.createElement("span"); + maximumText.textContent = "Maximum: "; + maximum.appendChild(maximumText); + maximum.appendChild(maximumEntry); + maximumEntry.type = "number"; + maximumEntry.setAttribute("name","max"); + maximumEntry.addEventListener("change",this,false); + maximumEntry.value = this.option.max; + this.dynamic.appendChild(maximum); break; + case "checkbox": + case "radio": + this.dynamic.appendChild(id); + var optionHolder = document.createElement("div"); + optionHolder.className = 'node'; + optionHolder.id = 'popup-option-holder'; + var optionObject = function(parent,option) { + this.rootDOM = document.createElement("div"); + this.rootDOM.className = "popup-option-entry"; + this.inputName = document.createElement("input"); + this.inputName.setAttribute("name","name"); + this.inputLabel = document.createElement("input"); + this.inputLabel.setAttribute("name","text"); + this.specification = option; + this.parent = parent; + this.handleEvent = function() + { + var target = event.currentTarget.getAttribute("name"); + eval("this.specification."+target+" = event.currentTarget.value"); + }; + + var nameText = document.createElement("span"); + nameText.textContent = "Name: "; + var labelText = document.createElement("span"); + labelText.textContent = "Label: "; + this.rootDOM.appendChild(nameText); + this.rootDOM.appendChild(this.inputName); + this.rootDOM.appendChild(labelText); + this.rootDOM.appendChild(this.inputLabel); + this.inputName.addEventListener("change",this,false); + this.inputLabel.addEventListener("change",this,false); + this.inputName.value = this.specification.name; + this.inputLabel.value = this.specification.text; + + this.deleteEntry = { + root: document.createElement("button"), + parent: this, + handleEvent: function() { + document.getElementById("popup-option-holder").removeChild(this.parent.rootDOM); + var index = this.parent.parent.option.options.findIndex(function(element,index,array){ + if (element == this.parent.specification) + return true; + else + return false; + },this); + var optionList = this.parent.parent.option.options; + if (index == optionList.length-1) { + optionList = optionList.slice(0,index); + } else { + optionList = optionList.slice(0,index).concat(optionList.slice(index+1)); + } + this.parent.parent.option.options = optionList; + } + }; + this.deleteEntry.root.textContent = "Delete Option"; + this.deleteEntry.root.addEventListener("click",this.deleteEntry,false); + this.rootDOM.appendChild(this.deleteEntry.root); + } + for (var i=0; i<this.option.options.length; i++) + { + var obj = new optionObject(this,this.option.options[i]); + this.optionLists.push(obj); + optionHolder.appendChild(obj.rootDOM); + } + this.dynamic.appendChild(optionHolder); } } this.handleEvent = function() @@ -680,9 +796,14 @@ } this.continue = function() { - var newNode = new this.parent.surveyEntryNode(this.parent,this.option); - this.parent.children.push(newNode); - this.parent.childrenDOM.appendChild(newNode.rootDOM); + if (this.parent.type == "surveyNode") + { + var newNode = new this.parent.surveyEntryNode(this.parent,this.option); + this.parent.children.push(newNode); + this.parent.childrenDOM.appendChild(newNode.rootDOM); + } else if (this.parent.type == "surveyEntryNode") { + this.parent.build(); + } popupObject.hide(); } } @@ -702,6 +823,7 @@ // Self-contained generators this.createGeneralNodeDOM = function(name,id,parent) { + this.type = name; var root = document.createElement('div'); root.id = id; root.className = "node"; @@ -1007,6 +1129,7 @@ this.interfaceNode = function(parent,rootObject) { + this.type = "interfaceNode"; this.rootDOM; this.titleDOM; this.attributeDOM; @@ -1206,6 +1329,7 @@ this.surveyNode = function(parent,rootObject,location) { + this.type = "surveyNode"; this.rootDOM = document.createElement("div"); this.titleDOM = document.createElement("span"); this.attributeDOM = document.createElement("div"); @@ -1242,6 +1366,7 @@ this.surveyEntryNode = function(parent,rootObject) { + this.type = "surveyEntryNode"; this.rootDOM = document.createElement("div"); this.titleDOM = document.createElement("span"); this.attributeDOM = document.createElement("div"); @@ -1253,7 +1378,6 @@ this.specification = rootObject; this.schema = specification.schema.getAllElementsByName("surveyentry")[1]; - this.rootDOM.id = id; this.rootDOM.className = "node"; this.rootDOM.style.minWidth = "50%"; @@ -1271,50 +1395,61 @@ this.rootDOM.appendChild(this.childrenDOM); this.rootDOM.appendChild(this.buttonDOM); - var statement = {}; - statement.rootDOM = document.createElement("div"); - statement.titleDOM = document.createElement("span"); - statement.titleDOM.textContent = "Statement/Question"; - statement.input = document.createElement("textarea"); - statement.input.value = this.specification.statement; - statement.specification = this.specification; - statement.handleEvent = function() { - this.specification.statement = this.input.value; + this.build = function() + { + this.attributeDOM.innerHTML = null; + this.childrenDOM.innerHTML = null; + var statementRoot = document.createElement("div"); + var statement = document.createElement("span"); + statement.textContent = "Statement / Question: "+this.specification.statement; + statementRoot.appendChild(statement); + this.children.push(statementRoot); + this.childrenDOM.appendChild(statementRoot); + switch(this.specification.type) + { + case "statement": + this.titleDOM.textContent = "Statement"; + break; + case "question": + this.titleDOM.textContent = "Question"; + var id = convert.convertAttributeToDOM(this.specification,specification.schema.getAllElementsByName("id")[0]); + var mandatory = convert.convertAttributeToDOM(this.specification,specification.schema.getAllElementsByName("mandatory")[0]); + var boxsize = convert.convertAttributeToDOM(this.specification,specification.schema.getAllElementsByName("boxsize")[0]); + this.attributeDOM.appendChild(id.holder); + this.attributes.push(id); + this.attributeDOM.appendChild(mandatory.holder); + this.attributes.push(mandatory); + this.attributeDOM.appendChild(boxsize.holder); + this.attributes.push(boxsize); + break; + case "number": + this.titleDOM.textContent = "Number"; + var id = convert.convertAttributeToDOM(this.specification,specification.schema.getAllElementsByName("id")[0]); + var mandatory = convert.convertAttributeToDOM(this.specification,specification.schema.getAllElementsByName("mandatory")[0]); + var min = convert.convertAttributeToDOM(this.specification,specification.schema.getAllElementsByName("min")[0]); + var max = convert.convertAttributeToDOM(this.specification,specification.schema.getAllElementsByName("max")[0]); + this.attributeDOM.appendChild(id.holder); + this.attributes.push(id); + this.attributeDOM.appendChild(min.holder); + this.attributes.push(min); + this.attributeDOM.appendChild(max.holder); + this.attributes.push(max); + break; + case "checkbox": + this.titleDOM.textContent = "Checkbox"; + var id = convert.convertAttributeToDOM(this.specification,specification.schema.getAllElementsByName("id")[0]); + this.attributeDOM.appendChild(id.holder); + this.attributes.push(id); + break; + case "radio": + this.titleDOM.textContent = "Radio"; + var id = convert.convertAttributeToDOM(this.specification,specification.schema.getAllElementsByName("id")[0]); + this.attributeDOM.appendChild(id.holder); + this.attributes.push(id); + break; + } } - statement.input.addEventListener("change",statement,false); - statement.rootDOM.appendChild(statement.titleDOM); - statement.rootDOM.appendChild(statement.input); - this.children.push(statement); - this.childrenDOM.appendChild(statement.rootDOM); - switch(this.specification.type) - { - case "statement": - this.titleDOM.textContent = "Statement"; - this.rootDOM.removeChild(this.attributeDOM); - break; - case "question": - this.titleDOM.textContent = "Question"; - var id = convert.convertAttributeToDOM(this.specification.id,specification.schema.getAllElementsByName("id")[0]); - var mandatory = convert.convertAttributeToDOM(this.specification.mandatory,specification.schema.getAllElementsByName("mandatory")[0]); - var boxsize = convert.convertAttributeToDOM(this.specification.mandatory,specification.schema.getAllElementsByName("boxsize")[0]); - this.attributeDOM.appendChild(id.holder); - this.attributes.push(id); - this.attributeDOM.appendChild(mandatory.holder); - this.attributes.push(mandatory); - this.attributeDOM.appendChild(boxsize.holder); - this.attributes.push(boxsize); - break; - case "checkbox": - this.titleDOM.textContent = "Checkbox"; - var id = convert.convertAttributeToDOM(this.specification.id,specification.schema.getAllElementsByName("id")[0]); - this.attributeDOM.appendChild(id.holder); - this.attributes.push(id); - case "radio": - this.titleDOM.textContent = "Radio"; - var id = convert.convertAttributeToDOM(this.specification.id,specification.schema.getAllElementsByName("id")[0]); - this.attributeDOM.appendChild(id.holder); - this.attributes.push(id); - } + this.build(); this.editNode = { root: document.createElement("button"), @@ -1322,7 +1457,7 @@ handleEvent: function() { popupObject.show(); - popupStateNodes.state[5].generate(this,this.parent); + popupStateNodes.state[5].generate(this.parent.specification,this.parent); popupObject.postNode(popupStateNodes.state[5]); } } @@ -1388,6 +1523,7 @@ this.pageNode = function(parent,rootObject) { + this.type = "pageNode"; this.rootDOM = document.createElement("div"); this.titleDOM = document.createElement("span"); this.attributeDOM = document.createElement("div"); @@ -1465,6 +1601,7 @@ this.audioElementNode = function(parent,rootObject) { + this.type = "audioElementNode"; this.rootDOM = document.createElement("div"); this.titleDOM = document.createElement("span"); this.attributeDOM = document.createElement("div"); @@ -1546,6 +1683,7 @@ this.commentQuestionNode = function(parent,rootObject) { + this.type = "commentQuestionNode"; this.rootDOM = document.createElement("div"); this.titleDOM = document.createElement("span"); this.attributeDOM = document.createElement("div");