Mercurial > hg > webaudioevaluationtool
changeset 372:5ec4279bf846 Dev_main
test_create: Specification Node handles complete XML to DOM and DOM to XML conversions
| author | Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk> |
|---|---|
| date | Fri, 04 Dec 2015 18:34:04 +0000 |
| parents | fe049caed3ae |
| children | 5ca2b999be88 |
| files | test_create/test_create.html |
| diffstat | 1 files changed, 406 insertions(+), 168 deletions(-) [+] |
line wrap: on
line diff
--- a/test_create/test_create.html Fri Dec 04 10:38:13 2015 +0000 +++ b/test_create/test_create.html Fri Dec 04 18:34:04 2015 +0000 @@ -104,6 +104,38 @@ dnd.style.width = "100%"; dnd.style.height = "50px"; dnd.className = "dragndrop"; + dnd.ondragover = function(e) { + e.stopPropagation(); + e.preventDefault(); + }; + dnd.ondragenter = function(e) { + e.stopPropagation(); + e.preventDefault(); + this.style.backgroundColor = '#AAFFAA'; + }; + dnd.ondragleave = function(e) { + e.stopPropagation(); + e.preventDefault(); + this.style.backgroundColor = "#FFFFFF"; + }; + dnd.ondrop = function(e) { + e.stopPropagation(); + e.preventDefault(); + + var file = e.dataTransfer.files[0]; + + // Uses HTML5 FileAPI - https://w3c.github.io/FileAPI/#filereader-interface + var reader = new FileReader(); + reader.onload = function() { + var parse = new DOMParser(); + var xml = parse.parseFromString(reader.result,'text/xml'); + specificationNode.decode(xml); + popupInstance.hidePopup(); + SpecificationToHTML(); + }; + reader.readAsText(file); + + }; this.popupBody.appendChild(text); this.popupBody.appendChild(dnd); this.showPopup(); @@ -1511,7 +1543,7 @@ case 8: this.hidePopup(); this.state = 0; - SpecficationToHTML(); + SpecificationToHTML (); } this.state++; }; @@ -1592,7 +1624,7 @@ this.audioHolders = []; this.metrics = []; - this.decode = function() { + this.decode = function(projectXML) { // projectXML - DOM Parsed document this.projectXML = projectXML.childNodes[0]; var setupNode = projectXML.getElementsByTagName('setup')[0]; @@ -1614,8 +1646,19 @@ } var metricCollection = setupNode.getElementsByTagName('Metric'); - this.preTest = new this.prepostNode('pretest',setupNode.getElementsByTagName('PreTest')); - this.postTest = new this.prepostNode('posttest',setupNode.getElementsByTagName('PostTest')); + var setupPreTestNode = setupNode.getElementsByTagName('PreTest'); + if (setupPreTestNode.length != 0) + { + setupPreTestNode = setupPreTestNode[0]; + this.preTest.construct(setupPreTestNode); + } + + var setupPostTestNode = setupNode.getElementsByTagName('PostTest'); + if (setupPostTestNode.length != 0) + { + setupPostTestNode = setupPostTestNode[0]; + this.postTest.construct(setupPostTestNode); + } if (metricCollection.length > 0) { metricCollection = metricCollection[0].getElementsByTagName('metricEnable'); @@ -1675,7 +1718,9 @@ var audioHolders = projectXML.getElementsByTagName('audioHolder'); for (var i=0; i<audioHolders.length; i++) { - this.audioHolders.push(new this.audioHolderNode(this,audioHolders[i])); + var node = new this.audioHolderNode(this); + node.decode(this,audioHolders[i]); + this.audioHolders.push(node); } // New check if we need to randomise the test order @@ -1718,13 +1763,13 @@ var setupPreTest = root.createElement("PreTest"); for (var i=0; i<this.preTest.options.length; i++) { - setupPreTest.appendChild(this.preTest.options.exportXML(root)); + setupPreTest.appendChild(this.preTest.options[i].exportXML(root)); } var setupPostTest = root.createElement("PostTest"); - for (var i=0; i<this.preTest.options.length; i++) + for (var i=0; i<this.postTest.options.length; i++) { - setupPostTest.appendChild(this.postTest.options.exportXML(root)); + setupPostTest.appendChild(this.postTest.options[i].exportXML(root)); } setupNode.appendChild(setupPreTest); @@ -1734,7 +1779,7 @@ var Metric = root.createElement("Metric"); for (var i=0; i<this.metrics.length; i++) { - var metricEnable = document.createElement("metricEnable"); + var metricEnable = root.createElement("metricEnable"); metricEnable.textContent = this.metrics[i].enabled; Metric.appendChild(metricEnable); } @@ -1745,7 +1790,7 @@ for (var i=0; i<this.commonInterface.options.length; i++) { var CIObj = this.commonInterface.options[i]; - var CINode = document.createElement(CIObj.type); + var CINode = root.createElement(CIObj.type); if (CIObj.type == "check") {CINode.setAttribute("name",CIObj.check);} else {CINode.setAttribute("name",CIObj.name);} CommonInterface.appendChild(CINode); @@ -1756,85 +1801,8 @@ // Time for the <audioHolder> tags for (var ahIndex = 0; ahIndex < this.audioHolders.length; ahIndex++) { - var AHObj = this.audioHolders[ahIndex]; - var AHNode = root.createElement("audioHolder"); - AHNode.id = AHObj.id; - AHNode.setAttribute("hostURL",AHObj.hostURL); - AHNode.setAttribute("sampleRate",AHObj.samplerate); - AHNode.setAttribute("randomiseOrder",AHObj.randomiseOrder); - AHNode.setAttribute("repeatCount",AHObj.repeatCount); - AHNode.setAttribute("loop",AHObj.loop); - AHNode.setAttribute("elementComments",AHObj.elementComments); - - // Create <interface> tag - for (var i=0; i<AHObj.interfaces.length; i++) - { - var AHObjInterface = AHObj.interfaces[i]; - var AHinterface = root.createElement("interface"); - if (AHObjInterface.title != undefined) - { - var title = root.createElement("title"); - title.textContent = AHObjInterface.title; - AHinterface.appendChild(title); - } - for (var j=0; j<AHObjInterface.options.length; j++) - { - var CIObj = AHObjInterface.options[j]; - var CINode = root.createElement(CIObj.type); - if (CIObj.type == "check") {CINode.setAttribute("name",CIObj.check);} - else {CINode.setAttribute("name",CIObj.name);} - AHinterface.appendChild(CINode); - } - if (AHObjInterface.scale != undefined) - { - for (var j=0; j<AHObjInterface.scale.length; j++) - { - var CIObj = AHObjInterface.scale[j]; - var CINode = root.createElement("scale"); - CINode.setAttribute("position",CIObj[0]); - CINode.textContent = CIObj[1]; - AHinterface.appendChild(CINode); - } - } - AHNode.appendChild(AHinterface); - } - - // Create <audioElements> - for (var aeIndex = 0; aeIndex < AHObj.audioElements.length; aeIndex++) - { - var AEObj = AHObj.audioElements[aeIndex]; - var AENode = root.createElement("audioElements"); - AENode.id = AEObj.id; - AENode.setAttribute("url",AEObj.url); - AENode.setAttribute("type",AEObj.type); - if (AEObj.marker != undefined && AEObj.enforce) - { - AENode.setAttribute("marker",AEObj.marker*100); - } - AHNode.appendChild(AENode); - } - - // Create <CommentQuestion> - for (var i=0; i<AHObj.commentQuestions.length; i++) - { - AHNode.appendChild(AHObj.commentQuestions[i].exportXML(root)); - } - - // Create <PreTest> - var AHPreTest = document.createElement("PreTest"); - for (var i=0; i<AHObj.preTest.options.length; i++) - { - AHPreTest.appendChild(AHObj.preTest.options.exportXML(root)); - } - - var AHPostTest = document.createElement("PostTest"); - for (var i=0; i<AHObj.preTest.options.length; i++) - { - AHPostTest.appendChild(AHObj.postTest.options.exportXML(root)); - } - AHNode.appendChild(AHPreTest); - AHNode.appendChild(AHPostTest); - root.getElementsByTagName("BrowserEvalProjectDocument")[0].appendChild(AHNode); + var node = this.audioHolders[ahIndex].encode(root); + root.getElementsByTagName("BrowserEvalProjectDocument")[0].appendChild(node); } return root; }; @@ -1847,9 +1815,9 @@ this.childOption = function() { this.type = 'option'; - this.id = element.id; - this.name = element.getAttribute('name'); - this.text = element.textContent; + this.id = null; + this.name = undefined; + this.text = null; }; this.type = undefined; @@ -1863,6 +1831,53 @@ this.max = undefined; this.step = undefined; + this.decode = function(child) + { + this.type = child.nodeName; + if (child.nodeName == "question") { + this.id = child.id; + this.mandatory; + if (child.getAttribute('mandatory') == "true") {this.mandatory = true;} + else {this.mandatory = false;} + this.question = child.textContent; + if (child.getAttribute('boxsize') == null) { + this.boxsize = 'normal'; + } else { + this.boxsize = child.getAttribute('boxsize'); + } + } else if (child.nodeName == "statement") { + this.statement = child.textContent; + } else if (child.nodeName == "checkbox" || child.nodeName == "radio") { + var element = child.firstElementChild; + this.id = child.id; + if (element == null) { + console.log('Malformed' +child.nodeName+ 'entry'); + this.statement = 'Malformed' +child.nodeName+ 'entry'; + this.type = 'statement'; + } else { + this.options = []; + while (element != null) { + if (element.nodeName == 'statement' && this.statement == undefined){ + this.statement = element.textContent; + } else if (element.nodeName == 'option') { + var node = new this.childOption(); + node.id = element.id; + node.name = element.getAttribute('name'); + node.text = element.textContent; + this.options.push(node); + } + element = element.nextElementSibling; + } + } + } else if (child.nodeName == "number") { + this.statement = child.textContent; + this.id = child.id; + this.min = child.getAttribute('min'); + this.max = child.getAttribute('max'); + this.step = child.getAttribute('step'); + } + }; + this.exportXML = function(root) { var node = root.createElement(this.type); @@ -1880,43 +1895,60 @@ case "number": node.id = this.id; node.setAttribute("mandatory",this.mandatory); - node.setAttribute("min"), this.min; - node.setAttribute("max"), this.max; - node.setAttribute("step"), this.step; + node.setAttribute("min", this.min); + node.setAttribute("max", this.max); + node.setAttribute("step", this.step); break; case "checkbox": node.id = this.id; - var statement = document.createElement("statement"); + var statement = root.createElement("statement"); statement.textContent = this.statement; node.appendChild(statement); for (var i=0; i<this.options.length; i++) { - var option = this.option[i]; - var optionNode = document.createElement("option"); + var option = this.options[i]; + var optionNode = root.createElement("option"); optionNode.id = option.id; optionNode.textContent = option.text; - node.appendChild(option); + node.appendChild(optionNode); } break; case "radio": node.id = this.id; - var statement = document.createElement("statement"); + var statement = root.createElement("statement"); statement.textContent = this.statement; node.appendChild(statement); for (var i=0; i<this.options.length; i++) { - var option = this.option[i]; - var optionNode = document.createElement("option"); - optionNode.setAttribute("name") = option.name; + var option = this.options[i]; + var optionNode = root.createElement("option"); + optionNode.setAttribute("name",option.name); optionNode.textContent = option.text; - node.appendChild(option); + node.appendChild(optionNode); } break; } return node; }; }; + this.construct = function(Collection) + { + if (Collection.childElementCount != 0) { + var child = Collection.firstElementChild; + var node = new this.OptionNode(); + node.decode(child); + this.options.push(node); + while (child.nextElementSibling != null) { + child = child.nextElementSibling; + node = new this.OptionNode(); + node.decode(child); + this.options.push(node); + } + } + }; }; + this.preTest = new this.prepostNode("pretest"); + this.postTest = new this.prepostNode("posttest"); this.metricNode = function(name) { this.enabled = name; @@ -1931,38 +1963,244 @@ this.randomiseOrder = undefined; this.loop = undefined; this.elementComments = undefined; - this.preTest = new parent.prepostNode('pretest'); - this.postTest = new parent.prepostNode('posttest'); + this.outsideReference = null; + this.preTest = new parent.prepostNode("pretest"); + this.postTest = new parent.prepostNode("pretest"); this.interfaces = []; this.commentBoxPrefix = "Comment on track"; this.audioElements = []; this.commentQuestions = []; - this.interfaceNode = function(DOM) { - var title = DOM.getElementsByTagName('title'); - if (title.length == 0) {this.title = null;} - else {this.title = title[0].textContent;} - this.options = parent.commonInterface.options; - var scale = DOM.getElementsByTagName('scale'); - this.scale = []; - for (var i=0; i<scale.length; i++) { - var arr = [null, null]; - arr[0] = scale[i].getAttribute('position'); - arr[1] = scale[i].textContent; - this.scale.push(arr); + this.decode = function(parent,xml) + { + this.presentedId = parent.audioHolders.length; + this.id = xml.id; + this.hostURL = xml.getAttribute('hostURL'); + this.sampleRate = xml.getAttribute('sampleRate'); + if (xml.getAttribute('randomiseOrder') == "true") {this.randomiseOrder = true;} + else {this.randomiseOrder = false;} + this.repeatCount = xml.getAttribute('repeatCount'); + if (xml.getAttribute('loop') == 'true') {this.loop = true;} + else {this.loop == false;} + if (xml.getAttribute('elementComments') == "true") {this.elementComments = true;} + else {this.elementComments = false;} + + var setupPreTestNode = xml.getElementsByTagName('PreTest'); + if (setupPreTestNode.length != 0) + { + setupPreTestNode = setupPreTestNode[0]; + this.preTest.construct(setupPreTestNode); + } + + var setupPostTestNode = xml.getElementsByTagName('PostTest'); + if (setupPostTestNode.length != 0) + { + setupPostTestNode = setupPostTestNode[0]; + this.postTest.construct(setupPostTestNode); + } + + var interfaceDOM = xml.getElementsByTagName('interface'); + for (var i=0; i<interfaceDOM.length; i++) { + var node = new this.interfaceNode(); + node.decode(interfaceDOM[i]); + this.interfaces.push(node); + } + this.commentBoxPrefix = xml.getElementsByTagName('commentBoxPrefix'); + if (this.commentBoxPrefix.length != 0) { + this.commentBoxPrefix = this.commentBoxPrefix[0].textContent; + } else { + this.commentBoxPrefix = "Comment on track"; + } + var audioElementsDOM = xml.getElementsByTagName('audioElements'); + for (var i=0; i<audioElementsDOM.length; i++) { + var node = new this.audioElementNode(); + if (audioElementsDOM[i].getAttribute('type') == 'outsidereference') { + if (this.outsideReference == null) { + this.outsideReference = node.decode(this,audioElementsDOM[i]); + } else { + console.log('Error only one audioelement can be of type outsidereference per audioholder'); + node.decode(this,audioElementsDOM[i]); + this.audioElements.push(node); + console.log('Element id '+audioElementsDOM[i].id+' made into normal node'); + } + } else { + node.decode(this,audioElementsDOM[i]); + this.audioElements.push(node); + } + } + + var commentQuestionsDOM = xml.getElementsByTagName('CommentQuestion'); + for (var i=0; i<commentQuestionsDOM.length; i++) { + var node = new this.commentQuestionNode(); + node.decode(commentQuestionsDOM[i]); + this.commentQuestions.push(node); } }; - this.audioElementNode = function(parent,audioObject) { - this.url = audioObject.file.name; - this.id = audioObject.id; - this.parent = parent; + this.encode = function(root) + { + var AHNode = root.createElement("audioHolder"); + AHNode.id = this.id; + AHNode.setAttribute("hostURL",this.hostURL); + AHNode.setAttribute("sampleRate",this.sampleRate); + AHNode.setAttribute("randomiseOrder",this.randomiseOrder); + AHNode.setAttribute("repeatCount",this.repeatCount); + AHNode.setAttribute("loop",this.loop); + AHNode.setAttribute("elementComments",this.elementComments); + + for (var i=0; i<this.interfaces.length; i++) + { + AHNode.appendChild(this.interfaces[i].encode(root)); + } + + for (var i=0; i<this.audioElements.length; i++) { + AHNode.appendChild(this.audioElements[i].encode(root)); + } + // Create <CommentQuestion> + for (var i=0; i<this.commentQuestions.length; i++) + { + AHNode.appendChild(this.commentQuestions[i].exportXML(root)); + } + + // Create <PreTest> + var AHPreTest = root.createElement("PreTest"); + for (var i=0; i<this.preTest.options.length; i++) + { + AHPreTest.appendChild(this.preTest.options[i].exportXML(root)); + } + + var AHPostTest = root.createElement("PostTest"); + for (var i=0; i<this.postTest.options.length; i++) + { + AHPostTest.appendChild(this.postTest.options[i].exportXML(root)); + } + AHNode.appendChild(AHPreTest); + AHNode.appendChild(AHPostTest); + return AHNode; + }; + + this.interfaceNode = function() { + this.title = undefined; + this.options = []; + this.scale = []; + this.decode = function(DOM) + { + var title = DOM.getElementsByTagName('title'); + if (title.length == 0) {this.title = null;} + else {this.title = title[0].textContent;} + this.options = parent.commonInterface.options; + var scale = DOM.getElementsByTagName('scale'); + this.scale = []; + for (var i=0; i<scale.length; i++) { + var arr = [null, null]; + arr[0] = scale[i].getAttribute('position'); + arr[1] = scale[i].textContent; + this.scale.push(arr); + } + }; + this.encode = function(root) + { + var node = root.createElement("interface"); + if (this.title != undefined) + { + var title = root.createElement("title"); + title.textContent = this.title; + node.appendChild(title); + } + for (var i=0; i<this.options.length; i++) + { + var optionNode = root.createElement(this.options[i].type); + if (this.options[i].type == "option") + { + optionNode.setAttribute("name",this.options[i].name); + } else if (this.options[i].type == "check") { + optionNode.setAttribute("check",this.options[i].check); + } else if (this.options[i].type == "scalerange") { + optionNode.setAttribute("min",this.options[i].min*100); + optionNode.setAttribute("max",this.options[i].max*100); + } + node.appendChild(optionNode); + } + for (var i=0; i<this.scale.length; i++) { + var scale = root.createElement("scale"); + scale.setAttribute("position",this.scale[i][0]); + scale.textContent = this.scale[i][1]; + node.appendChild(scale); + } + return node; + }; + }; + + this.audioElementNode = function() { + this.url = null; + this.id = null; + this.parent = null; this.type = "normal"; - - this.marker = undefined; + this.marker = false; + this.enforce = false; + this.decode = function(parent,xml) + { + this.url = xml.getAttribute('url'); + this.id = xml.id; + this.parent = parent; + this.type = xml.getAttribute('type'); + if (this.type == null) {this.type = "normal";} + if (this.type == 'anchor') {this.anchor = true;} + else {this.anchor = false;} + if (this.type == 'reference') {this.reference = true;} + else {this.reference = false;} + + if (this.anchor == true || this.reference == true) + { + this.marker = xml.getAttribute('marker'); + if (this.marker != undefined) + { + this.marker = Number(this.marker); + if (isNaN(this.marker) == false) + { + if (this.marker > 1) + { this.marker /= 100.0;} + if (this.marker >= 0 && this.marker <= 1) + { + this.enforce = true; + return; + } else { + console.log("ERROR - Marker of audioElement "+this.id+" is not between 0 and 1 (float) or 0 and 100 (integer)!"); + console.log("ERROR - Marker not enforced!"); + } + } else { + console.log("ERROR - Marker of audioElement "+this.id+" is not a number!"); + console.log("ERROR - Marker not enforced!"); + } + } + } + }; + this.encode = function(root) + { + var AENode = root.createElement("audioElements"); + AENode.id = this.id; + AENode.setAttribute("url",this.url); + AENode.setAttribute("type",this.type); + if (this.marker != false) + { + AENode.setAttribute("marker",this.marker*100); + } + return AENode; + }; }; this.commentQuestionNode = function(xml) { + this.id = null; + this.type = undefined; + this.question = undefined; + this.options = []; + this.statement = undefined; + + this.childOption = function() { + this.type = 'option'; + this.name = null; + this.text = null; + }; this.exportXML = function(root) { var CQNode = root.createElement("CommentQuestion"); @@ -1974,12 +2212,12 @@ CQNode.textContent = this.question; break; case "radio" || "checkbox": - var statement = document.createElement("statement"); + var statement = root.createElement("statement"); statement.textContent = this.statement; CQNode.appendChild(statement); for (var i=0; i<this.options.length; i++) { - var optionNode = document.createElement("option"); + var optionNode = root.createElement("option"); optionNode.setAttribute("name",this.options[i].name); optionNode.textContent = this.options[i].text; CQNode.appendChild(optionNode); @@ -1988,50 +2226,50 @@ } return CQNode; }; - this.childOption = function(element) { - this.type = 'option'; - this.name = element.getAttribute('name'); - this.text = element.textContent; + this.decode = function(xml) { + this.id = xml.id; + if (xml.getAttribute('mandatory') == 'true') {this.mandatory = true;} + else {this.mandatory = false;} + this.type = xml.getAttribute('type'); + if (this.type == undefined) {this.type = 'text';} + switch (this.type) { + case 'text': + this.question = xml.textContent; + break; + case 'radio': + var child = xml.firstElementChild; + this.options = []; + while (child != undefined) { + if (child.nodeName == 'statement' && this.statement == undefined) { + this.statement = child.textContent; + } else if (child.nodeName == 'option') { + var node = new this.childOption(); + node.name = child.getAttribute('name'); + node.text = child.textContent; + this.options.push(node); + } + child = child.nextElementSibling; + } + break; + case 'checkbox': + var child = xml.firstElementChild; + this.options = []; + while (child != undefined) { + if (child.nodeName == 'statement' && this.statement == undefined) { + this.statement = child.textContent; + } else if (child.nodeName == 'option') { + var node = new this.childOption(); + node.name = child.getAttribute('name'); + node.text = child.textContent; + this.options.push(node); + } + child = child.nextElementSibling; + } + break; + } }; - this.id = xml.id; - if (xml.getAttribute('mandatory') == 'true') {this.mandatory = true;} - else {this.mandatory = false;} - this.type = xml.getAttribute('type'); - if (this.type == undefined) {this.type = 'text';} - switch (this.type) { - case 'text': - this.question = xml.textContent; - break; - case 'radio': - var child = xml.firstElementChild; - this.options = []; - while (child != undefined) { - if (child.nodeName == 'statement' && this.statement == undefined) { - this.statement = child.textContent; - } else if (child.nodeName == 'option') { - this.options.push(new this.childOption(child)); - } - child = child.nextElementSibling; - } - break; - case 'checkbox': - var child = xml.firstElementChild; - this.options = []; - while (child != undefined) { - if (child.nodeName == 'statement' && this.statement == undefined) { - this.statement = child.textContent; - } else if (child.nodeName == 'option') { - this.options.push(new this.childOption(child)); - } - child = child.nextElementSibling; - } - break; - } }; }; - - this.preTest = new this.prepostNode("pretest"); - this.postTest = new this.prepostNode("posttest"); } function createDeleteNodeButton(node) @@ -2046,7 +2284,7 @@ return button; } - function SpecficationToHTML() + function SpecificationToHTML() { // Take information from Specification Node and format it into an HTML layout var destination = document.getElementById("content");