webaudioevaluationtool: test_create/test_core.js comparison

comparison test_create/test_core.js @ 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	f4800ccc4d54

comparison

equal deleted inserted replaced

-:cf55f9ee9446
+:1dbc6d3e6fb5
 var reader = new FileReader();
 reader.onload = function(decoded) {
 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);
 });
 spnH.appendChild(span);
 this.content.appendChild(spnH);
 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);
 this.content.appendChild(select);
 this.content.appendChild(this.dynamic);
 statementText.textContent = "Statement/Question";
 statementEntry.addEventListener("change",this,false);
 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++)
 {
 var selectOption = document.createElement("option");
 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);
+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()
 {
 var name = event.currentTarget.getAttribute("name");
 break;
 }
 }
 this.continue = function()
 {
-var newNode = new this.parent.surveyEntryNode(this.parent,this.option);
+if (this.parent.type == "surveyNode")
-this.parent.children.push(newNode);
+{
-this.parent.childrenDOM.appendChild(newNode.rootDOM);
+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();
 }
 }
 }
 }
 this.pages = [];
 // Self-contained generators
 this.createGeneralNodeDOM = function(name,id,parent)
 {
+this.type = name;
 var root = document.createElement('div');
 root.id = id;
 root.className = "node";
 var titleDiv = document.createElement('div');
 }
 }
 this.interfaceNode = function(parent,rootObject)
 {
+this.type = "interfaceNode";
 this.rootDOM;
 this.titleDOM;
 this.attributeDOM;
 this.attributes = [];
 this.childrenDOM;
 }
 }
 this.surveyNode = function(parent,rootObject,location)
 {
+this.type = "surveyNode";
 this.rootDOM = document.createElement("div");
 this.titleDOM = document.createElement("span");
 this.attributeDOM = document.createElement("div");
 this.attributes = [];
 this.childrenDOM = document.createElement("div");
 this.rootDOM.appendChild(this.childrenDOM);
 this.rootDOM.appendChild(this.buttonDOM);
 this.surveyEntryNode = function(parent,rootObject)
 {
+this.type = "surveyEntryNode";
 this.rootDOM = document.createElement("div");
 this.titleDOM = document.createElement("span");
 this.attributeDOM = document.createElement("div");
 this.attributes = [];
 this.childrenDOM = document.createElement("div");
 this.buttonDOM = document.createElement("div");
 this.parent = parent;
 this.specification = rootObject;
 this.schema = specification.schema.getAllElementsByName("surveyentry")[1];
-this.rootDOM.id = id;
 this.rootDOM.className = "node";
 this.rootDOM.style.minWidth = "50%";
 var titleDiv = document.createElement('div');
 titleDiv.className = "node-title";
 this.rootDOM.appendChild(titleDiv);
 this.rootDOM.appendChild(this.attributeDOM);
 this.rootDOM.appendChild(this.childrenDOM);
 this.rootDOM.appendChild(this.buttonDOM);
-var statement = {};
+this.build = function()
-statement.rootDOM = document.createElement("div");
+{
-statement.titleDOM = document.createElement("span");
+this.attributeDOM.innerHTML = null;
-statement.titleDOM.textContent = "Statement/Question";
+this.childrenDOM.innerHTML = null;
-statement.input = document.createElement("textarea");
+var statementRoot = document.createElement("div");
-statement.input.value = this.specification.statement;
+var statement = document.createElement("span");
-statement.specification = this.specification;
+statement.textContent = "Statement / Question: "+this.specification.statement;
-statement.handleEvent = function() {
+statementRoot.appendChild(statement);
-this.specification.statement = this.input.value;
+this.children.push(statementRoot);
-}
+this.childrenDOM.appendChild(statementRoot);
-statement.input.addEventListener("change",statement,false);
+switch(this.specification.type)
-statement.rootDOM.appendChild(statement.titleDOM);
+{
-statement.rootDOM.appendChild(statement.input);
+case "statement":
-this.children.push(statement);
+this.titleDOM.textContent = "Statement";
-this.childrenDOM.appendChild(statement.rootDOM);
+break;
-switch(this.specification.type)
+case "question":
-{
+this.titleDOM.textContent = "Question";
-case "statement":
+var id = convert.convertAttributeToDOM(this.specification,specification.schema.getAllElementsByName("id")[0]);
-this.titleDOM.textContent = "Statement";
+var mandatory = convert.convertAttributeToDOM(this.specification,specification.schema.getAllElementsByName("mandatory")[0]);
-this.rootDOM.removeChild(this.attributeDOM);
+var boxsize = convert.convertAttributeToDOM(this.specification,specification.schema.getAllElementsByName("boxsize")[0]);
-break;
+this.attributeDOM.appendChild(id.holder);
-case "question":
+this.attributes.push(id);
-this.titleDOM.textContent = "Question";
+this.attributeDOM.appendChild(mandatory.holder);
-var id = convert.convertAttributeToDOM(this.specification.id,specification.schema.getAllElementsByName("id")[0]);
+this.attributes.push(mandatory);
-var mandatory = convert.convertAttributeToDOM(this.specification.mandatory,specification.schema.getAllElementsByName("mandatory")[0]);
+this.attributeDOM.appendChild(boxsize.holder);
-var boxsize = convert.convertAttributeToDOM(this.specification.mandatory,specification.schema.getAllElementsByName("boxsize")[0]);
+this.attributes.push(boxsize);
-this.attributeDOM.appendChild(id.holder);
+break;
-this.attributes.push(id);
+case "number":
-this.attributeDOM.appendChild(mandatory.holder);
+this.titleDOM.textContent = "Number";
-this.attributes.push(mandatory);
+var id = convert.convertAttributeToDOM(this.specification,specification.schema.getAllElementsByName("id")[0]);
-this.attributeDOM.appendChild(boxsize.holder);
+var mandatory = convert.convertAttributeToDOM(this.specification,specification.schema.getAllElementsByName("mandatory")[0]);
-this.attributes.push(boxsize);
+var min = convert.convertAttributeToDOM(this.specification,specification.schema.getAllElementsByName("min")[0]);
-break;
+var max = convert.convertAttributeToDOM(this.specification,specification.schema.getAllElementsByName("max")[0]);
-case "checkbox":
+this.attributeDOM.appendChild(id.holder);
-this.titleDOM.textContent = "Checkbox";
+this.attributes.push(id);
-var id = convert.convertAttributeToDOM(this.specification.id,specification.schema.getAllElementsByName("id")[0]);
+this.attributeDOM.appendChild(min.holder);
-this.attributeDOM.appendChild(id.holder);
+this.attributes.push(min);
-this.attributes.push(id);
+this.attributeDOM.appendChild(max.holder);
-case "radio":
+this.attributes.push(max);
-this.titleDOM.textContent = "Radio";
+break;
-var id = convert.convertAttributeToDOM(this.specification.id,specification.schema.getAllElementsByName("id")[0]);
+case "checkbox":
-this.attributeDOM.appendChild(id.holder);
+this.titleDOM.textContent = "Checkbox";
-this.attributes.push(id);
+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;
+}
+}
+this.build();
 this.editNode = {
 root: document.createElement("button"),
 parent: this,
 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]);
 }
 }
 this.editNode.root.textContent = "Edit Entry";
 this.editNode.root.addEventListener("click",this.editNode,false);
 }
 }
 this.pageNode = function(parent,rootObject)
 {
+this.type = "pageNode";
 this.rootDOM = document.createElement("div");
 this.titleDOM = document.createElement("span");
 this.attributeDOM = document.createElement("div");
 this.attributes = [];
 this.childrenDOM = document.createElement("div");
 this.interfaces = [];
 this.audioElementNode = function(parent,rootObject)
 {
+this.type = "audioElementNode";
 this.rootDOM = document.createElement("div");
 this.titleDOM = document.createElement("span");
 this.attributeDOM = document.createElement("div");
 this.attributes = [];
 this.childrenDOM = document.createElement("div");
 this.buttonDOM.appendChild(this.deleteNode.root);
 }
 this.commentQuestionNode = function(parent,rootObject)
 {
+this.type = "commentQuestionNode";
 this.rootDOM = document.createElement("div");
 this.titleDOM = document.createElement("span");
 this.attributeDOM = document.createElement("div");
 this.attributes = [];
 this.childrenDOM = document.createElement("div");