Mercurial > hg > webaudioevaluationtool
changeset 1170:2cd9f09455a5
New test creator tool. Still WIP, but much more dynamic. Based on XSD and external lists so far easier to modify.
| author | Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk> |
|---|---|
| date | Wed, 10 Feb 2016 12:02:25 +0000 |
| parents | 018539fa16c5 |
| children | e49c4eeb4fb2 |
| files | core.js test_create/attributes.json test_create/interface-specs.xml test_create/style.css test_create/test_core.js test_create/test_create.html test_create/test_create_2.html test_create/test_create_advanced.html |
| diffstat | 8 files changed, 2719 insertions(+), 4661 deletions(-) [+] |
line wrap: on
line diff
--- a/core.js Tue Feb 02 11:03:01 2016 +0000 +++ b/core.js Wed Feb 10 12:02:25 2016 +0000 @@ -117,8 +117,8 @@ // Create the popup interface object popup = new interfacePopup(); - - // Create the specification object + + // Create the specification object specification = new Specification(); // Create the interface object @@ -1224,6 +1224,11 @@ this.audioObjects[i].buffer.buffer = hold; } }; + + this.exportXML = function() + { + + }; } @@ -1823,33 +1828,12 @@ } - this.metrics = { - enabled: [], - decode: function(parent, xml) { - var children = xml.getElementsByTagName('metricenable'); - for (var i in children) { - if (isNaN(Number(i)) == true){break;} - this.enabled.push(children[i].textContent); - } - }, - encode: function(root) { - var node = root.createElement('metric'); - for (var i in this.enabled) - { - if (isNaN(Number(i)) == true){break;} - var child = root.createElement('metricenable'); - child.textContent = this.enabled[i]; - node.appendChild(child); - } - return node; - } - }; + this.metrics = new this.metricNode(); this.metrics.decode(this,setupNode.getElementsByTagName('metric')[0]); // Now process the survey node options var survey = setupNode.getElementsByTagName('survey'); - var surveySchema = specification.schema.getAllElementsByName('survey')[0]; for (var i in survey) { if (isNaN(Number(i)) == true){break;} var location = survey[i].getAttribute('location'); @@ -1858,13 +1842,13 @@ if (this.preTest != null){this.errors.push("Already a pre/before test survey defined! Ignoring second!!");} else { this.preTest = new this.surveyNode(); - this.preTest.decode(this,survey[i],surveySchema); + this.preTest.decode(this,survey[i]); } } else if (location == 'post' || location == 'after') { if (this.postTest != null){this.errors.push("Already a post/after test survey defined! Ignoring second!!");} else { this.postTest = new this.surveyNode(); - this.postTest.decode(this,survey[i],surveySchema); + this.postTest.decode(this,survey[i]); } } } @@ -1904,11 +1888,11 @@ this.surveyNode = function() { this.location = null; this.options = []; - this.schema = null; + this.schema = specification.schema.getAllElementsByName('survey')[0]; this.OptionNode = function() { this.type = undefined; - this.schema = undefined; + this.schema = specification.schema.getAllElementsByName('surveyentry')[0]; this.id = undefined; this.mandatory = undefined; this.statement = undefined; @@ -1918,10 +1902,9 @@ this.max = undefined; this.step = undefined; - this.decode = function(parent,child,schema) + this.decode = function(parent,child) { - this.schema = schema; - var attributeMap = schema.getAllElementsByTagName('xs:attribute'); + var attributeMap = this.schema.getAllElementsByTagName('xs:attribute'); for (var i in attributeMap){ if(isNaN(Number(i)) == true){break;} var attributeName = attributeMap[i].getAttribute('name') || attributeMap[i].getAttribute('ref'); @@ -1998,17 +1981,15 @@ return node; }; }; - this.decode = function(parent,xml,schema) { - this.schema = schema; + this.decode = function(parent,xml) { this.location = xml.getAttribute('location'); if (this.location == 'before'){this.location = 'pre';} else if (this.location == 'after'){this.location = 'post';} - var surveyentrySchema = schema.getAllElementsByName('surveyentry')[0]; for (var i in xml.children) { if(isNaN(Number(i))==true){break;} var node = new this.OptionNode(); - node.decode(parent,xml.children[i],surveyentrySchema); + node.decode(parent,xml.children[i]); this.options.push(node); } }; @@ -2029,10 +2010,9 @@ this.name = null; this.options = []; this.scales = []; - this.schema = null; + this.schema = specification.schema.getAllElementsByName('interface')[1]; - this.decode = function(parent,xml,schema) { - this.schema = schema; + this.decode = function(parent,xml) { this.name = xml.getAttribute('name'); var titleNode = xml.getElementsByTagName('title'); if (titleNode.length == 1) @@ -2041,7 +2021,7 @@ } var interfaceOptionNodes = xml.getElementsByTagName('interfaceoption'); // Extract interfaceoption node schema - var interfaceOptionNodeSchema = schema.getAllElementsByName('interfaceoption')[0]; + var interfaceOptionNodeSchema = this.schema.getAllElementsByName('interfaceoption')[0]; var attributeMap = interfaceOptionNodeSchema.getAllElementsByTagName('xs:attribute'); for (var i=0; i<interfaceOptionNodes.length; i++) { @@ -2085,6 +2065,28 @@ }; }; + this.metricNode = function() { + this.enabled = []; + this.decode = function(parent, xml) { + var children = xml.getElementsByTagName('metricenable'); + for (var i in children) { + if (isNaN(Number(i)) == true){break;} + this.enabled.push(children[i].textContent); + } + } + this.encode = function(root) { + var node = root.createElement('metric'); + for (var i in this.enabled) + { + if (isNaN(Number(i)) == true){break;} + var child = root.createElement('metricenable'); + child.textContent = this.enabled[i]; + node.appendChild(child); + } + return node; + } + } + this.page = function() { this.presentedId = undefined; this.id = undefined; @@ -2100,11 +2102,10 @@ this.commentBoxPrefix = "Comment on track"; this.audioElements = []; this.commentQuestions = []; - this.schema = null; + this.schema = specification.schema.getAllElementsByName("page")[0]; - this.decode = function(parent,xml,schema) + this.decode = function(parent,xml) { - this.schema = schema; var attributeMap = this.schema.getAllElementsByTagName('xs:attribute'); for (var i=0; i<attributeMap.length; i++) { @@ -2162,21 +2163,19 @@ // Now process the audioelement tags var audioElements = xml.getElementsByTagName('audioelement'); - var audioElementSchema = parent.schema.getAllElementsByName('audioelement')[0]; for (var i=0; i<audioElements.length; i++) { var node = new this.audioElementNode(); - node.decode(this,audioElements[i],audioElementSchema); + node.decode(this,audioElements[i]); this.audioElements.push(node); } // Now decode the commentquestions var commentQuestions = xml.getElementsByTagName('commentquestion'); - var commentQuestionSchema = parent.schema.getAllElementsByName('commentquestion')[0]; for (var i=0; i<commentQuestions.length; i++) { var node = new this.commentQuestionNode(); - node.decode(parent,commentQuestions[i],commentQuestionSchema); + node.decode(parent,commentQuestions[i]); this.commentQuestions.push(node); } }; @@ -2231,8 +2230,8 @@ this.type = undefined; this.options = []; this.statement = undefined; - this.schema = null; - this.decode = function(parent,xml,schema) + this.schema = specification.schema.getAllElementsByName('commentquestion')[0]; + this.decode = function(parent,xml) { this.id = xml.id; this.type = xml.getAttribute('type'); @@ -2262,11 +2261,10 @@ this.marker = false; this.enforce = false; this.gain = 1.0; - this.schema = null; + this.schema = specification.schema.getAllElementsByName('audioelement')[0];; this.parent = null; - this.decode = function(parent,xml,schema) + this.decode = function(parent,xml) { - this.schema = schema; this.parent = parent; var attributeMap = this.schema.getAllElementsByTagName('xs:attribute'); for (var i=0; i<attributeMap.length; i++)
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/test_create/attributes.json Wed Feb 10 12:02:25 2016 +0000 @@ -0,0 +1,23 @@ +{ + "id": "ID", + "mandatory": "Mandatory", + "name": "Name", + "interface": "Interface Module", + "projectReturn": "Results Return URL", + "randomiseOrder": "Randomise Order", + "testPages": "Test Pages", + "loudness": "Target Loudess (LUFS)", + "sampleRate": "Required Sample Rate", + "hostURL": "Element URL Prefix", + "repeatCount": "Repeat Count", + "loop": "Synchronous Loop", + "showElementComments": "Show Comment Boxes", + "type": "Type", + "min": "Minimum", + "max": "Maximum", + "position": "Position", + "url": "URL", + "gain": "Gain (dB)", + "marker": "Marker", + "boxsize": "Box Size" +} \ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/test_create/interface-specs.xml Wed Feb 10 12:02:25 2016 +0000 @@ -0,0 +1,437 @@ +<?xml version="1.0" encoding="UTF-8" ?> +<root> + <global> + <metrics> + <list name="testTimer">Test Timer</list> + <list name="elementTimer">Element Playback Timer</list> + <list name="elementInitialPosition">Element Initial Poisition</list> + <list name="elementTracker">Element Movement Tracker</list> + <list name="elementFlagListenedTo">Element Listened to Flag</list> + <list name="elementFlagMoved">Element Moved Flag</list> + <list name="elementListenTracker">Element Listen Tracker</list> + </metrics> + <checks> + <list name="fragmentMoved">Check all moved</list> + <list name="fragmentPlayed">Check all played</list> + <list name="fragmentFullPlayback">Check all fully played (non-loop only)</list> + <list name="fragmentComments">Check comments entered</list> + <list name="scalerange">Enforce scale usage range</list> + </checks> + <show> + <list name="volume">Show master volume control</list> + <list name="page-count">Show test page count</list> + <list name="playhead">Show playhead</list> + <list name="comments">Show Element Comment Boxes</list> + </show> + </global> + <interfaces> + <interface name="APE"> + <metrics> + <entry name="testTimer" support="optional" default="on"/> + <entry name="elementTimer" support="optional" default="on"/> + <entry name="elementInitialPosition" support="optional" default="on"/> + <entry name="elementTracker" support="optional" default="on"/> + <entry name="elementFlagListenedTo" support="optional" default="on"/> + <entry name="elementFlagMoved" support="optional" default="on"/> + <entry name="elementListenTracker" support="optional" default="on"/> + </metrics> + <checks> + <entry name="fragmentMoved" support="optional" default="off"/> + <entry name="fragmentPlayed" support="optional" default="off"/> + <entry name="fragmentFullPlayback" support="optional" default="off"/> + <entry name="fragmentComments" support="optional" default="off"/> + <entry name="scalerange" support="optional" default="off"/> + </checks> + <show> + <entry name="volume" support="optional" default="off"/> + <entry name="page-count" support="optional" default="off"/> + <entry name="playhead" support="optional" default="off"/> + <entry name="comments" support="optional" default="on"/> + </show> + <elements> + <number min="1" max="undefined"/> + <anchor min="0" max="undefined"/> + <reference min="0" max="undefined"/> + <outsidereference min="0" max="1"/> + </elements> + </interface> + <interface name="MUSHRA"> + <metrics> + <entry name="testTimer" support="optional" default="on"/> + <entry name="elementTimer" support="optional" default="on"/> + <entry name="elementInitialPosition" support="optional" default="on"/> + <entry name="elementTracker" support="optional" default="on"/> + <entry name="elementFlagListenedTo" support="optional" default="on"/> + <entry name="elementFlagMoved" support="optional" default="on"/> + <entry name="elementListenTracker" support="optional" default="on"/> + </metrics> + <checks> + <entry name="fragmentMoved" support="optional" default="off"/> + <entry name="fragmentPlayed" support="optional" default="off"/> + <entry name="fragmentFullPlayback" support="optional" default="off"/> + <entry name="fragmentComments" support="optional" default="off"/> + <entry name="scalerange" support="optional" default="off"/> + </checks> + <show> + <entry name="volume" support="optional" default="off"/> + <entry name="page-count" support="optional" default="off"/> + <entry name="playhead" support="optional" default="off"/> + <entry name="comments" support="optional" default="off"/> + </show> + <elements> + <number min="1" max="undefined"/> + <anchor min="0" max="undefined"/> + <reference min="0" max="undefined"/> + <outsidereference min="0" max="1"/> + </elements> + </interface> + <interface name="horizontal"> + <metrics> + <entry name="testTimer" support="optional" default="on"/> + <entry name="elementTimer" support="optional" default="on"/> + <entry name="elementInitialPosition" support="optional" default="on"/> + <entry name="elementTracker" support="optional" default="on"/> + <entry name="elementFlagListenedTo" support="optional" default="on"/> + <entry name="elementFlagMoved" support="optional" default="on"/> + <entry name="elementListenTracker" support="optional" default="on"/> + </metrics> + <checks> + <entry name="fragmentMoved" support="optional" default="off"/> + <entry name="fragmentPlayed" support="optional" default="off"/> + <entry name="fragmentFullPlayback" support="optional" default="off"/> + <entry name="fragmentComments" support="optional" default="off"/> + <entry name="scalerange" support="optional" default="off"/> + </checks> + <show> + <entry name="volume" support="optional" default="off"/> + <entry name="page-count" support="optional" default="off"/> + <entry name="playhead" support="optional" default="off"/> + <entry name="comments" support="optional" default="off"/> + </show> + <elements> + <number min="1" max="undefined"/> + <anchor min="0" max="undefined"/> + <reference min="0" max="undefined"/> + <outsidereference min="0" max="1"/> + </elements> + </interface> + <interface name="discrete"> + <metrics> + <entry name="testTimer" support="optional" default="on"/> + <entry name="elementTimer" support="optional" default="on"/> + <entry name="elementInitialPosition" support="none"/> + <entry name="elementTracker" support="optional" default="on"/> + <entry name="elementFlagListenedTo" support="optional" default="on"/> + <entry name="elementFlagMoved" support="optional" default="on"/> + <entry name="elementListenTracker" support="optional" default="on"/> + </metrics> + <checks> + <entry name="fragmentMoved" support="mandatory"/> + <entry name="fragmentPlayed" support="optional" default="off"/> + <entry name="fragmentFullPlayback" support="optional" default="off"/> + <entry name="fragmentComments" support="optional" default="off"/> + <entry name="scalerange" support="none"/> + </checks> + <show> + <entry name="volume" support="optional" default="off"/> + <entry name="page-count" support="optional" default="off"/> + <entry name="playhead" support="optional" default="off"/> + <entry name="comments" support="optional" default="off"/> + </show> + <elements> + <number min="1" max="undefined"/> + <anchor min="0" max="undefined"/> + <reference min="0" max="undefined"/> + <outsidereference min="0" max="1"/> + </elements> + </interface> + <interface name="AB"> + <metrics> + <entry name="testTimer" support="optional" default="on"/> + <entry name="elementTimer" support="optional" default="on"/> + <entry name="elementInitialPosition" support="none"/> + <entry name="elementTracker" support="optional" default="on"/> + <entry name="elementFlagListenedTo" support="optional" default="on"/> + <entry name="elementFlagMoved" support="none"/> + <entry name="elementListenTracker" support="optional" default="on"/> + </metrics> + <checks> + <entry name="fragmentMoved" support="none"/> + <entry name="fragmentPlayed" support="optional" default="off"/> + <entry name="fragmentFullPlayback" support="optional" default="off"/> + <entry name="fragmentComments" support="optional" default="off"/> + <entry name="scalerange" support="none"/> + </checks> + <show> + <entry name="volume" support="optional" default="off"/> + <entry name="page-count" support="optional" default="off"/> + <entry name="playhead" support="optional" default="off"/> + <entry name="comments" support="optional" default="off"/> + </show> + <elements> + <number min="2" max="undefined"/> + <anchor min="0" max="undefined"/> + <reference min="0" max="undefined"/> + <outsidereference min="0" max="1"/> + </elements> + </interface> + </interfaces> + <scaledefinitions> + <scale name="Likert"> + <scalelabel position="0">Strongly Disagree</scalelabel> + <scalelabel position="25">Disagree</scalelabel> + <scalelabel position="50">Neutral</scalelabel> + <scalelabel position="75">Agree</scalelabel> + <scalelabel position="100">Strongly Agree</scalelabel> + </scale> + <scale name="ABC"> + <scalelabel position="100">Imperceptible</scalelabel> + <scalelabel position="75">Perceptible but not annoying</scalelabel> + <scalelabel position="50">Slightly annoying</scalelabel> + <scalelabel position="25">Annoying</scalelabel> + <scalelabel position="0">Very annoying</scalelabel> + </scale> + <scale name="Bipolar"> + <scalelabel position="0">-50</scalelabel> + <scalelabel position="50">0</scalelabel> + <scalelabel position="100">50</scalelabel> + </scale> + <scale name="ACR"> + <scalelabel position="0">Bad</scalelabel> + <scalelabel position="25">Poor</scalelabel> + <scalelabel position="50">Fair</scalelabel> + <scalelabel position="75">Good</scalelabel> + <scalelabel position="100">Excellent</scalelabel> + </scale> + <scale name="DCR"> + <scalelabel position="0">(1) Very Annoying</scalelabel> + <scalelabel position="25">(2) Annoying</scalelabel> + <scalelabel position="50">(3) Slightly Annoying</scalelabel> + <scalelabel position="75">(4) Audible but not Annoying</scalelabel> + <scalelabel position="100">(5) Inaudible</scalelabel> + </scale> + <scale name="CCR"> + <scalelabel position="12">Much Worse</scalelabel> + <scalelabel position="25">Worse</scalelabel> + <scalelabel position="38">Slightly Worse</scalelabel> + <scalelabel position="50">About the same</scalelabel> + <scalelabel position="62">Slightly Better</scalelabel> + <scalelabel position="75">Better</scalelabel> + <scalelabel position="88">Much Better</scalelabel> + </scale> + <scale name="HCRS"> + <scalelabel position="10">Dislike Extremely</scalelabel> + <scalelabel position="20">Dislike Very Much</scalelabel> + <scalelabel position="30">Dislike Moderate</scalelabel> + <scalelabel position="40">Dislike Slightly</scalelabel> + <scalelabel position="50">Neither Like nor Dislike</scalelabel> + <scalelabel position="60">Like Slightly</scalelabel> + <scalelabel position="70">Like Moderate</scalelabel> + <scalelabel position="80">Like Very Much</scalelabel> + <scalelabel position="90">Like Extremely</scalelabel> + </scale> + </scaledefinitions> + <tests> + <test name="APE" interface="APE"/> + <test name="vertical-sliders" interface="MUSHRA"/> + <test name="horizontal-sliders" interface="horizontal"/> + <test name="discrete" interface="discrete"/> + <test name="Comparison" interface="AB"/> + <test name="MUSHRA" interface="MUSHRA"> + <checks> + <entry name="fragmentMoved" support="none"/> + <entry name="fragmentPlayed" support="none"/> + <entry name="fragmentFullPlayback" support="none"/> + <entry name="fragmentComments" support="none"/> + <entry name="scalerange" support="none"/> + </checks> + <show> + <entry name="volume" support="none"/> + <entry name="page-count" support="none"/> + <entry name="playhead" support="none"/> + <entry name="comments" support="none"/> + </show> + <elements> + <anchor min="1" max="undefined"/> + <reference min="1" max="undefined"/> + <outsidereference min="1" max="1"/> + </elements> + <scale name="ACR"/> + </test> + <test name="Rank" interface="discrete"> + <checks> + <entry name="fragmentPlayed" support="none"/> + <entry name="fragmentFullPlayback" support="none"/> + <entry name="fragmentComments" support="none"/> + </checks> + <show> + <entry name="volume" support="none"/> + <entry name="page-count" support="none"/> + <entry name="playhead" support="none"/> + <entry name="comments" support="none"/> + </show> + <scale name="undefined"/> + </test> + <test name="Likert" interface="discrete"> + <checks> + <entry name="fragmentPlayed" support="none"/> + <entry name="fragmentFullPlayback" support="none"/> + <entry name="fragmentComments" support="none"/> + </checks> + <show> + <entry name="volume" support="none"/> + <entry name="page-count" support="none"/> + <entry name="playhead" support="none"/> + <entry name="comments" support="none"/> + </show> + <scale name="Likert"/> + </test> + <test name="ABC/HR" interface="MUSHRA"> + <checks> + <entry name="fragmentMoved" support="none"/> + <entry name="fragmentPlayed" support="none"/> + <entry name="fragmentFullPlayback" support="none"/> + <entry name="fragmentComments" support="none"/> + </checks> + <show> + <entry name="volume" support="none"/> + <entry name="page-count" support="none"/> + <entry name="playhead" support="none"/> + <entry name="comments" support="none"/> + </show> + <scale name="ABC"/> + </test> + <test name="Bipolar" interface="horizontal"> + <checks> + <entry name="fragmentMoved" support="mandatory"/> + <entry name="fragmentPlayed" support="none"/> + <entry name="fragmentFullPlayback" support="none"/> + <entry name="fragmentComments" support="none"/> + </checks> + <show> + <entry name="volume" support="none"/> + <entry name="page-count" support="none"/> + <entry name="playhead" support="none"/> + <entry name="comments" support="none"/> + </show> + <elements> + <outsidereference min="1" max="1"/> + </elements> + <scale name="Bipolar"/> + </test> + <test name="ACR" interface="discrete"> + <checks> + <entry name="fragmentPlayed" support="none"/> + <entry name="fragmentFullPlayback" support="none"/> + <entry name="fragmentComments" support="none"/> + </checks> + <show> + <entry name="volume" support="none"/> + <entry name="page-count" support="none"/> + <entry name="playhead" support="none"/> + <entry name="comments" support="none"/> + </show> + <scale name="ACR"/> + </test> + <test name="DCR" interface="discrete"> + <checks> + <entry name="fragmentPlayed" support="none"/> + <entry name="fragmentFullPlayback" support="none"/> + <entry name="fragmentComments" support="none"/> + </checks> + <show> + <entry name="volume" support="none"/> + <entry name="page-count" support="none"/> + <entry name="playhead" support="none"/> + <entry name="comments" support="none"/> + </show> + <scale name="DCR"/> + </test> + <test name="CCR" interface="discrete"> + <checks> + <entry name="fragmentPlayed" support="none"/> + <entry name="fragmentFullPlayback" support="none"/> + <entry name="fragmentComments" support="none"/> + </checks> + <show> + <entry name="volume" support="none"/> + <entry name="page-count" support="none"/> + <entry name="playhead" support="none"/> + <entry name="comments" support="none"/> + </show> + <scale name="CCR"/> + </test> + <test name="HCRS" interface="MUSHRA"> + <checks> + <entry name="fragmentMoved" support="mandatory"/> + <entry name="fragmentPlayed" support="none"/> + <entry name="fragmentFullPlayback" support="none"/> + <entry name="fragmentComments" support="none"/> + </checks> + <show> + <entry name="volume" support="none"/> + <entry name="page-count" support="none"/> + <entry name="playhead" support="none"/> + <entry name="comments" support="none"/> + </show> + <elements> + <outsidereference min="1" max="1"/> + </elements> + <scale name="HCRS"/> + </test> + <test name="ITUR5PCIS" interface="MUSHRA"> + <checks> + <entry name="fragmentMoved" support="none"/> + <entry name="fragmentPlayed" support="none"/> + <entry name="fragmentFullPlayback" support="none"/> + <entry name="fragmentComments" support="none"/> + </checks> + <show> + <entry name="volume" support="none"/> + <entry name="page-count" support="none"/> + <entry name="playhead" support="none"/> + <entry name="comments" support="none"/> + </show> + <elements> + <outsidereference min="1" max="1"/> + </elements> + <scale name="ABC"/> + </test> + <test name="AB" interface="AB"> + <checks> + <entry name="fragmentPlayed" support="none"/> + <entry name="fragmentFullPlayback" support="none"/> + <entry name="fragmentComments" support="none"/> + </checks> + <show> + <entry name="volume" support="none"/> + <entry name="page-count" support="none"/> + <entry name="playhead" support="none"/> + <entry name="comments" support="none"/> + </show> + <elements> + <number min="2" max="2"/> + <outsidereference min="0" max="0"/> + </elements> + <scale name="ABC"/> + </test> + <test name="ABX" interface="AB"> + <checks> + <entry name="fragmentPlayed" support="none"/> + <entry name="fragmentFullPlayback" support="none"/> + <entry name="fragmentComments" support="none"/> + </checks> + <show> + <entry name="volume" support="none"/> + <entry name="page-count" support="none"/> + <entry name="playhead" support="none"/> + <entry name="comments" support="none"/> + </show> + <elements> + <number min="2" max="2"/> + <outsidereference min="1" max="1"/> + </elements> + <scale name="ABC"/> + </test> + </tests> +</root> \ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/test_create/style.css Wed Feb 10 12:02:25 2016 +0000 @@ -0,0 +1,85 @@ +div#blanket { + z-index: 2; + background-color: rgba(0,0,0,0.5); + width: 100%; + height: 100%; + position: absolute; + left: 0px; + top: 0px; +} + +div#popupHolder { + z-index: 3; + background-color: rgba(255,255,255,1); + width: 730px; + height: 480px; + position: absolute; + border-radius: 10px; + box-shadow: 0px 0px 50px #000; + padding: 10px; +} + +div#popup-title-holder { + width: 100%; + height: 50px; + font-size: 2em; +} + +button#popup-proceed { + width: 60px; + height: 27px; + padding: 5px; + position: absolute; + right: 10px; + bottom: 10px; +} + +div.popup-checkbox { + padding: 5px; +} + +div.popup-checkbox input { + margin: 0px 5px; +} + +div.disabled{ + color: rgb(100,100,100); +} + +div.node { + float: left; + padding: 10px; + border: black 2px solid; + border-radius: 10px; + margin: 25px; + min-width: 92%; +} +div.node-title { + float: left; + width: 100%; + font-size: 2em; + margin: 5px 0px; +} +div.node-attributes { + width: auto; + float: left; + padding: 10px; + border: black 2px dashed; +} +div.attribute { + float: left; + margin-right: 10px; +} +div.node-children { + float: left; +} +div.node-buttons { + float: left; +} +div.attribute input { + max-width: 100px; + margin-right: 10px; +} +div.attribute input[type=number] { + width: 80px; +} \ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/test_create/test_core.js Wed Feb 10 12:02:25 2016 +0000 @@ -0,0 +1,1524 @@ +var interfaceSpecs; +var xmlHttp; +var popupObject; +var popupStateNodes; +var specification; +var convert; +var attributeText; + +// Firefox does not have an XMLDocument.prototype.getElementsByName +// and there is no searchAll style command, this custom function will +// search all children recusrively for the name. Used for XSD where all +// element nodes must have a name and therefore can pull the schema node +XMLDocument.prototype.getAllElementsByName = function(name) +{ + name = String(name); + var selected = this.documentElement.getAllElementsByName(name); + return selected; +} + +Element.prototype.getAllElementsByName = function(name) +{ + name = String(name); + var selected = []; + var node = this.firstElementChild; + while(node != null) + { + if (node.getAttribute('name') == name) + { + selected.push(node); + } + if (node.childElementCount > 0) + { + selected = selected.concat(node.getAllElementsByName(name)); + } + node = node.nextElementSibling; + } + return selected; +} + +XMLDocument.prototype.getAllElementsByTagName = function(name) +{ + name = String(name); + var selected = this.documentElement.getAllElementsByTagName(name); + return selected; +} + +Element.prototype.getAllElementsByTagName = function(name) +{ + name = String(name); + var selected = []; + var node = this.firstElementChild; + while(node != null) + { + if (node.nodeName == name) + { + selected.push(node); + } + if (node.childElementCount > 0) + { + selected = selected.concat(node.getAllElementsByTagName(name)); + } + node = node.nextElementSibling; + } + return selected; +} + +// Firefox does not have an XMLDocument.prototype.getElementsByName +if (typeof XMLDocument.prototype.getElementsByName != "function") { + XMLDocument.prototype.getElementsByName = function(name) + { + name = String(name); + var node = this.documentElement.firstElementChild; + var selected = []; + while(node != null) + { + if (node.getAttribute('name') == name) + { + selected.push(node); + } + node = node.nextElementSibling; + } + return selected; + } +} + +window.onload = function() +{ + specification = new Specification(); + convert = new SpecificationToHTML(); + xmlHttp = new XMLHttpRequest(); + xmlHttp.open("GET","./interface-specs.xml",true); + xmlHttp.onload = function() + { + var parse = new DOMParser(); + interfaceSpecs = parse.parseFromString(xmlHttp.response,'text/xml'); + buildPage(); + popupObject.postNode(popupStateNodes.state[0]) + } + xmlHttp.send(); + + var xsdGet = new XMLHttpRequest(); + xsdGet.open("GET","../test-schema.xsd",true); + xsdGet.onload = function() + { + var parse = new DOMParser(); + specification.schema = parse.parseFromString(xsdGet.response,'text/xml');; + } + xsdGet.send(); + + var jsonAttribute = new XMLHttpRequest(); + jsonAttribute.open("GET","./attributes.json",true); + jsonAttribute.onload = function() + { + attributeText = JSON.parse(jsonAttribute.response) + } + jsonAttribute.send(); +} + +function buildPage() +{ + popupObject = new function() { + this.object = document.getElementById("popupHolder"); + this.blanket = document.getElementById("blanket"); + + this.popupTitle = document.createElement("div"); + this.popupTitle.id = "popup-title-holder"; + this.popupTitle.align = "center"; + this.titleDOM = document.createElement("span"); + this.titleDOM.id = "popup-title"; + this.popupTitle.appendChild(this.titleDOM); + this.object.appendChild(this.popupTitle); + + this.popupContent = document.createElement("div"); + this.popupContent.id = "popup-content"; + this.object.appendChild(this.popupContent); + + this.proceedButton = document.createElement("button"); + this.proceedButton.id = "popup-proceed"; + this.proceedButton.textContent = "Next"; + this.proceedButton.onclick = function() + { + popupObject.popupContent.innerHTML = null; + popupObject.shownObject.continue(); + }; + this.object.appendChild(this.proceedButton); + + this.shownObject; + + this.resize = function() + { + var w = window.innerWidth; + var h = window.innerHeight; + this.object.style.left = Math.floor((w-750)/2) + 'px'; + this.object.style.top = Math.floor((h-500)/2) + 'px'; + } + + this.show = function() + { + this.object.style.visibility = "visible"; + this.blanket.style.visibility = "visible"; + } + + this.hide = function() + { + this.object.style.visibility = "hidden"; + this.blanket.style.visibility = "hidden"; + } + + this.postNode = function(postObject) + { + this.show(); + //Passed object must have the following: + // Title: text to show in the title + // Content: HTML DOM to show on the page + // On complete this HTML DOM is destroyed so make sure it is referenced elsewhere for processing + this.titleDOM.textContent = postObject.title; + this.popupContent.appendChild(postObject.content); + this.shownObject = postObject; + } + + this.resize(); + this.hide(); + }; + + popupStateNodes = new function() + { + // This defines the several popup states wanted + this.state = []; + this.state[0] = new function() + { + this.title = "Welcome"; + this.content = document.createElement("div"); + this.content.id = "state-0"; + var span = document.createElement("span"); + span.textContent = "Welcome to the WAET test creator tool. This will allow you to create a new test from scratch to suit your testing needs. If you wish to update a test file, please drag and drop the XML document into the area below for processing, otherwise press 'Next' to start a new test. This tool generates files for the WAET 1.2.0 version." + this.content.appendChild(span); + this.dragArea = document.createElement("div"); + this.dragArea.classList = "drag-area"; + this.content.appendChild(this.dragArea); + + this.continue = function() + { + popupObject.postNode(popupStateNodes.state[1]); + } + } + this.state[1] = new function() + { + this.title = "Select your interface"; + this.content = document.createElement("div"); + this.content.id = "state-1"; + var spnH = document.createElement('div'); + var span = document.createElement("span"); + span.textContent = "Please select your interface from the list shown below. This will define the various options which are available. This can later be changed."; + spnH.appendChild(span); + this.content.appendChild(spnH); + this.select = document.createElement("select"); + this.testsXML = interfaceSpecs.getElementsByTagName('tests')[0].children; + for (var i=0; i<this.testsXML.length; i++) + { + var option = document.createElement('option'); + option.value = this.testsXML[i].getAttribute('name'); + option.textContent = this.testsXML[i].getAttribute('name'); + this.select.appendChild(option); + } + this.content.appendChild(this.select); + this.continue = function() + { + var testXML = interfaceSpecs.getElementsByTagName("tests")[0].getAllElementsByName(this.select.value)[0]; + specification.interface = testXML.getAttribute("interface"); + popupStateNodes.state[2].generate(); + popupObject.postNode(popupStateNodes.state[2]); + } + } + this.state[2] = new function() + { + this.title = "Test Checks & Restrictions"; + this.content = document.createElement("div"); + this.content.id = "state-1"; + var spnH = document.createElement('div'); + var span = document.createElement("span"); + span.textContent = "Select your test checks and restrictions. Greyed out items are fixed by the test/interface and cannot be changed"; + spnH.appendChild(span); + this.content.appendChild(spnH); + var holder = document.createElement("div"); + this.options = []; + this.testXML = null; + this.interfaceXML = null; + this.generate = function() + { + var interfaceName = popupStateNodes.state[1].select.value; + this.checkText = interfaceSpecs.getElementsByTagName("global")[0].getAllElementsByTagName("checks")[0]; + this.testXML = interfaceSpecs.getElementsByTagName("tests")[0].getAllElementsByName(interfaceName)[0]; + this.interfaceXML = interfaceSpecs.getAllElementsByTagName("interfaces")[0].getAllElementsByName(this.testXML.getAttribute("interface"))[0].getAllElementsByTagName("checks")[0]; + this.testXML = this.testXML.getAllElementsByTagName("checks"); + for (var i=0; i<this.interfaceXML.children.length; i++) + { + var interfaceNode = this.interfaceXML.children[i]; + var checkName = interfaceNode.getAttribute('name'); + var testNode + if (this.testXML.length > 0) + { + testNode = this.testXML[0].getAllElementsByName(checkName); + if(testNode.length != 0) {testNode = testNode[0];} + else {testNode = undefined;} + } else { + testNode = undefined; + } + var optH = document.createElement('div'); + optH.className = "popup-checkbox"; + var checkbox = document.createElement('input'); + checkbox.type = "checkbox"; + var text = document.createElement('span'); + checkbox.setAttribute('name',checkName); + if (interfaceNode.getAttribute('default') == 'on') + { + checkbox.checked = true; + } + if (interfaceNode.getAttribute('support') == "none") + { + checkbox.disabled = true; + checkbox.checked = false; + optH.className = "popup-checkbox disabled"; + } else if (interfaceNode.getAttribute('support') == "mandatory") + { + checkbox.disabled = true; + checkbox.checked = true; + optH.className = "popup-checkbox disabled"; + } + if(testNode != undefined) + { + if (interfaceNode.getAttribute('default') == 'on') + { + checkbox.checked = true; + } + if (testNode.getAttribute('support') == "none") + { + checkbox.disabled = true; + checkbox.checked = false; + optH.className = "popup-checkbox disabled"; + }else if (interfaceNode.getAttribute('support') == "mandatory") + { + checkbox.disabled = true; + checkbox.checked = true; + optH.className = "popup-checkbox disabled"; + } + } + text.textContent = popupStateNodes.state[2].checkText.getAllElementsByName(checkName)[0].textContent; + optH.appendChild(checkbox); + optH.appendChild(text); + this.options.push(optH); + this.content.appendChild(optH); + } + } + this.continue = function() + { + if (specification.interfaces == null) + { + specification.interfaces = new specification.interfaceNode(); + } + for (var object of this.options) + { + var checkbox = object.children[0]; + if (checkbox.checked) + { + var option = { + type: "check", + name: checkbox.getAttribute('name') + }; + specification.interfaces.options.push(option); + } + } + popupStateNodes.state[3].generate(); + popupObject.postNode(popupStateNodes.state[3]); + } + } + this.state[3] = new function() + { + this.title = "Test Metrics"; + this.content = document.createElement("div"); + this.content.id = "state-1"; + var spnH = document.createElement('div'); + var span = document.createElement("span"); + span.textContent = "Select which data points to include in the exported results XML. Some of this is required for certain post script analysis. See the documentation for further details"; + spnH.appendChild(span); + this.content.appendChild(spnH); + this.options = []; + this.checkText; + this.testXML; + this.interfaceXML; + this.generate = function() + { + var interfaceName = popupStateNodes.state[1].select.value; + this.checkText = interfaceSpecs.getElementsByTagName("global")[0].getAllElementsByTagName("metrics")[0]; + this.testXML = interfaceSpecs.getElementsByTagName("tests")[0].getAllElementsByName(interfaceName)[0]; + this.interfaceXML = interfaceSpecs.getAllElementsByTagName("interfaces")[0].getAllElementsByName(this.testXML.getAttribute("interface"))[0].getAllElementsByTagName("metrics")[0]; + this.testXML = this.testXML.getAllElementsByTagName("metrics"); + for (var i=0; i<this.interfaceXML.children.length; i++) + { + var interfaceNode = this.interfaceXML.children[i]; + var checkName = interfaceNode.getAttribute('name'); + var testNode + if (this.testXML.length > 0) + { + testNode = this.testXML[0].getAllElementsByName(checkName); + if(testNode.length != 0) {testNode = testNode[0];} + else {testNode = undefined;} + } else { + testNode = undefined; + } + var optH = document.createElement('div'); + optH.className = "popup-checkbox"; + var checkbox = document.createElement('input'); + checkbox.type = "checkbox"; + var text = document.createElement('span'); + checkbox.setAttribute('name',checkName); + if (interfaceNode.getAttribute('default') == 'on') + { + checkbox.checked = true; + } + if (interfaceNode.getAttribute('support') == "none") + { + checkbox.disabled = true; + checkbox.checked = false; + optH.className = "popup-checkbox disabled"; + } else if (interfaceNode.getAttribute('support') == "mandatory") + { + checkbox.disabled = true; + checkbox.checked = true; + optH.className = "popup-checkbox disabled"; + } + if(testNode != undefined) + { + if (interfaceNode.getAttribute('default') == 'on') + { + checkbox.checked = true; + } + if (testNode.getAttribute('support') == "none") + { + checkbox.disabled = true; + checkbox.checked = false; + optH.className = "popup-checkbox disabled"; + }else if (interfaceNode.getAttribute('support') == "mandatory") + { + checkbox.disabled = true; + checkbox.checked = true; + optH.className = "popup-checkbox disabled"; + } + } + text.textContent = popupStateNodes.state[3].checkText.getAllElementsByName(checkName)[0].textContent; + optH.appendChild(checkbox); + optH.appendChild(text); + this.options.push(optH); + this.content.appendChild(optH); + } + } + this.continue = function() + { + if (specification.metrics == null) { + specification.metrics = new specification.metricNode(); + } + for (var object of this.options) + { + var checkbox = object.children[0]; + if (checkbox.checked) + { + specification.metrics.enabled.push(checkbox.getAttribute('name')); + } + } + popupStateNodes.state[4].generate(); + popupObject.postNode(popupStateNodes.state[4]); + } + } + this.state[4] = new function() + { + this.title = "Test Visuals"; + this.content = document.createElement("div"); + this.content.id = "state-1"; + var spnH = document.createElement('div'); + var span = document.createElement("span"); + span.textContent = "You can display extra visual content with your interface for the test user to interact with. Select from the available options below. Greyed out options are unavailable for your selected interface"; + spnH.appendChild(span); + this.content.appendChild(spnH); + this.options = []; + this.checkText; + this.testXML; + this.interfaceXML; + this.generate = function() + { + var interfaceName = popupStateNodes.state[1].select.value; + this.checkText = interfaceSpecs.getElementsByTagName("global")[0].getAllElementsByTagName("show")[0]; + this.testXML = interfaceSpecs.getElementsByTagName("tests")[0].getAllElementsByName(interfaceName)[0]; + this.interfaceXML = interfaceSpecs.getAllElementsByTagName("interfaces")[0].getAllElementsByName(this.testXML.getAttribute("interface"))[0].getAllElementsByTagName("show")[0]; + this.testXML = this.testXML.getAllElementsByTagName("metrics"); + for (var i=0; i<this.interfaceXML.children.length; i++) + { + var interfaceNode = this.interfaceXML.children[i]; + var checkName = interfaceNode.getAttribute('name'); + var testNode + if (this.testXML.length > 0) + { + testNode = this.testXML[0].getAllElementsByName(checkName); + if(testNode.length != 0) {testNode = testNode[0];} + else {testNode = undefined;} + } else { + testNode = undefined; + } + var optH = document.createElement('div'); + optH.className = "popup-checkbox"; + var checkbox = document.createElement('input'); + checkbox.type = "checkbox"; + var text = document.createElement('span'); + checkbox.setAttribute('name',checkName); + if (interfaceNode.getAttribute('default') == 'on') + { + checkbox.checked = true; + } + if (interfaceNode.getAttribute('support') == "none") + { + checkbox.disabled = true; + checkbox.checked = false; + optH.className = "popup-checkbox disabled"; + } else if (interfaceNode.getAttribute('support') == "mandatory") + { + checkbox.disabled = true; + checkbox.checked = true; + optH.className = "popup-checkbox disabled"; + } + if(testNode != undefined) + { + if (interfaceNode.getAttribute('default') == 'on') + { + checkbox.checked = true; + } + if (testNode.getAttribute('support') == "none") + { + checkbox.disabled = true; + checkbox.checked = false; + optH.className = "popup-checkbox disabled"; + }else if (interfaceNode.getAttribute('support') == "mandatory") + { + checkbox.disabled = true; + checkbox.checked = true; + optH.className = "popup-checkbox disabled"; + } + } + text.textContent = this.checkText.getAllElementsByName(checkName)[0].textContent; + optH.appendChild(checkbox); + optH.appendChild(text); + this.options.push(optH); + this.content.appendChild(optH); + } + } + this.continue = function() + { + if (specification.interfaces == null) + { + specification.interfaces = new specification.interfaceNode(); + } + for (var object of this.options) + { + var checkbox = object.children[0]; + if (checkbox.checked) + { + var option = { + type: "show", + name: checkbox.getAttribute('name') + }; + specification.interfaces.options.push(option); + } + } + popupObject.hide(); + convert.convert(document.getElementById('content')); + } + } + this.state[5] = new function() { + this.title = "Add/Edit Survey Element"; + this.content = document.createElement("div"); + this.content.id = "state-1"; + var spnH = document.createElement('div'); + var span = document.createElement("span"); + span.textContent = "You can configure your survey element here. Press 'Continue' to complete your changes."; + spnH.appendChild(span); + this.content.appendChild(spnH); + this.dynamic = document.createElement("div"); + this.option = null; + this.parent = null; + var select = document.createElement("select"); + select.setAttribute("name","type"); + select.addEventListener("change",this,false); + this.content.appendChild(select); + this.content.appendChild(this.dynamic); + this.generate = function(option, parent) + { + this.option = option; + this.parent = parent; + var optionList = specification.schema.getAllElementsByName("survey")[0].getAllElementsByName("type")[0].getAllElementsByTagName("xs:enumeration"); + for (var i=0; i<optionList.length; i++) + { + var selectOption = document.createElement("option"); + selectOption.value = optionList[i].getAttribute("value"); + selectOption.textContent = selectOption.value; + select.appendChild(selectOption); + } + if (this.option.type != undefined){ + select.value = this.option.type + } else { + select.value = "statement"; + this.option.type = "statement"; + } + + this.dynamic.innerHTML = null; + var statement = document.createElement("div"); + var statementText = document.createElement("span"); + var statementEntry = document.createElement("textarea"); + statement.appendChild(statementText); + statement.appendChild(statementEntry); + statementText.textContent = "Statement/Question"; + statementEntry.addEventListener("change",this,false); + statementEntry.setAttribute("name","statement"); + statementEntry.value = this.option.statement; + this.dynamic.appendChild(statement); + switch(this.option.type) + { + case "statement": + break; + case "question": + 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"); + selectOption.value = optionList[i].getAttribute("value"); + selectOption.textContent = selectOption.value; + boxsizeSelect.appendChild(selectOption); + } + if(this.option.boxsize != undefined) { + boxsizeSelect.value = this.option.boxsize; + } else { + boxsizeSelect.value = "normal"; + this.option.boxsize = "normal"; + } + boxsizeSelect.setAttribute("name","boxsize"); + boxsizeSelect.addEventListener("change",this,false); + var boxsize = document.createElement("div"); + var boxsizeText = document.createElement("span"); + boxsizeText.textContent = "Entry Size: "; + boxsize.appendChild(boxsizeText); + boxsize.appendChild(boxsizeSelect); + this.dynamic.appendChild(boxsize); + + 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); + mandatory.appendChild(mandatoryText); + mandatory.appendChild(mandatoryInput); + this.dynamic.appendChild(mandatory); + break; + } + } + this.handleEvent = function() + { + var name = event.currentTarget.getAttribute("name"); + switch(name) { + case "type": + // If type has changed, we may need to rebuild the entire state node + if (event.currentTarget.value != this.option.name) + { + this.option.type = event.currentTarget.value; + this.generate(this.option,this.parent); + } + break; + case "mandatory": + this.option.mandatory = event.currentTarget.checked; + break; + case "boxsize": + this.option.boxsize = event.currentTarget.value; + break; + case "statement": + this.option.statement = event.currentTarget.value; + break; + } + } + this.continue = function() + { + var newNode = new this.parent.surveyEntryNode(this.parent,this.option); + this.parent.children.push(newNode); + this.parent.childrenDOM.appendChild(newNode.rootDOM); + popupObject.hide(); + } + } + } +} + +function SpecificationToHTML() +{ + // This takes the specification node and converts it to an on-page HTML object + // Each Specification Node is given its own JS object which listens to the XSD for instant verification + // Once generated, it directly binds into the specification object to update with changes + // Fixed DOM entries + this.injectDOM; + this.setupDOM; + this.pages = []; + + // Self-contained generators + this.createGeneralNodeDOM = function(name,id,parent) + { + var root = document.createElement('div'); + root.id = id; + root.className = "node"; + + var titleDiv = document.createElement('div'); + titleDiv.className = "node-title"; + var title = document.createElement('span'); + title.className = "node-title"; + title.textContent = name; + titleDiv.appendChild(title); + + var attributeDiv = document.createElement('div'); + attributeDiv.className = "node-attributes"; + + var childrenDiv = document.createElement('div'); + childrenDiv.className = "node-children"; + + var buttonsDiv = document.createElement('div'); + buttonsDiv.className = "node-buttons"; + + root.appendChild(titleDiv); + root.appendChild(attributeDiv); + root.appendChild(childrenDiv); + root.appendChild(buttonsDiv); + + var obj = { + rootDOM: root, + titleDOM: title, + attributeDOM: attributeDiv, + attributes: [], + childrenDOM: childrenDiv, + children: [], + buttonDOM: buttonsDiv, + parent: parent + } + return obj; + } + + this.convertAttributeToDOM = function(node,schema) + { + // This takes an attribute schema node and returns an object with the input node and any bindings + if (schema.getAttribute('name') == undefined && schema.getAttribute('ref') != undefined) + { + schema = specification.schema.getAllElementsByName(schema.getAttribute('ref'))[0]; + } + var obj = new function() + { + this.input; + this.name; + this.owner; + this.holder; + + this.name = schema.getAttribute('name'); + this.default = schema.getAttribute('default'); + this.dataType = schema.getAttribute('type'); + if (typeof this.dataType == "string") { this.dataType = this.dataType.substr(3);} + else {this.dataType = "string";} + var minVar = undefined; + var maxVar = undefined; + switch(this.dataType) + { + case "negativeInteger": + maxVar = -1; + break; + case "positiveInteger": + minVar = 1; + break; + case "nonNegativeInteger": + minVar = 0; + break; + case "nonPositiveInteger": + maxVar = 0; + break; + case "byte": + minVar = 0; + maxVar = 256; + break; + case "short": + minVar = 0; + maxVar = 65536; + break; + default: + break; + } + + this.input = document.createElement('input'); + switch(this.dataType) + { + case "boolean": + this.input.type = "checkbox"; + break; + case "negativeInteger": + case "positiveInteger": + case "nonNegativeInteger": + case "nonPositiveInteger": + case "integer": + case "short": + case "byte": + this.input.step = 1; + case "decimal": + this.input.type = "number"; + this.input.min = minVar; + this.input.max = maxVar; + break; + default: + break; + } + var value; + eval("value = specification."+this.name) + if (value != undefined) + { + this.input.value = value; + } else if (this.default != undefined) + { + this.input.value = this.default; + } + this.handleEvent = function(event) + { + var value; + switch(this.input.type) + { + case "checkbox": + value = event.currentTarget.checked; + break; + case "number": + value = Number(event.currentTarget.value); + break; + default: + value = event.currentTarget.value; + break; + } + eval("this.owner."+this.name+" = value"); + } + this.holder = document.createElement('div'); + this.holder.className = "attribute"; + this.holder.setAttribute('name',this.name); + var text = document.createElement('span'); + eval("text.textContent = attributeText."+this.name+"+': '"); + this.holder.appendChild(text); + this.holder.appendChild(this.input); + this.owner = node; + this.input.addEventListener("change",this,false); + } + if (obj.attribute != null) + { + obj.input.value = obj.attribute; + } + return obj; + } + + this.convert = function(root) + { + //Performs the actual conversion using the given root DOM as the root + this.injectDOM = root; + + // First perform the setupNode; + var setupSchema = specification.schema.getAllElementsByName('setup')[0]; + this.setupDOM = new this.createGeneralNodeDOM('setup','setup',null); + this.injectDOM.appendChild(this.setupDOM.rootDOM); + var setupAttributes = setupSchema.getAllElementsByTagName('xs:attribute'); + for (var i=0; i<setupAttributes.length; i++) + { + var attributeName = setupAttributes[i].getAttribute('name'); + var attrObject = this.convertAttributeToDOM(specification,setupAttributes[i]); + this.setupDOM.attributeDOM.appendChild(attrObject.holder); + this.setupDOM.attributes.push(attrObject); + } + + // Now we must build the interface Node + this.interfaceDOM = new this.interfaceNode(this,specification.interfaces); + this.interfaceDOM.build("Interface","setup-interface",this.setupDOM.rootDOM); + + // Now build the Metrics selection node + var metric = this.createGeneralNodeDOM("metrics","setup-metric",this.setupDOM); + metric.rootDOM.removeChild(metric.attributeDOM); + this.setupDOM.children.push(metric); + this.setupDOM.childrenDOM.appendChild(metric.rootDOM); + var interfaceName = popupStateNodes.state[1].select.value; + var checkText = interfaceSpecs.getElementsByTagName("global")[0].getAllElementsByTagName("metrics")[0]; + var testXML = interfaceSpecs.getElementsByTagName("tests")[0].getAllElementsByName(interfaceName)[0]; + var interfaceXML = interfaceSpecs.getAllElementsByTagName("interfaces")[0].getAllElementsByName(testXML.getAttribute("interface"))[0].getAllElementsByTagName("metrics")[0]; + testXML = testXML.getAllElementsByTagName("metrics"); + for (var i=0; i<interfaceXML.children.length; i++) + { + var obj = { + input: document.createElement('input'), + root: document.createElement('div'), + text: document.createElement('span'), + specification: specification.metrics.enabled, + name: interfaceXML.children[i].getAttribute("name"), + handleEvent: function() + { + for (var i=0; i<this.specification.length; i++) + { + if (this.specification[i] == this.name) + { + var options = this.specification; + if (this.input.checked == false) { + if (i == options.length) + {options = options.slice(0,i);} + else { + options = options.slice(0,i).concat(options.slice(i+1)); + } + } else { + return; + } + this.specification = options; + break; + } + } + if (this.input.checked) { + this.specification.push(this.name); + } + } + }; + obj.root.className = "attribute"; + obj.input.type = "checkbox"; + obj.root.appendChild(obj.text); + obj.root.appendChild(obj.input); + obj.text.textContent = checkText.children[i].textContent; + metric.children.push(obj); + metric.childrenDOM.appendChild(obj.root); + for (var i=0; i<specification.metrics.enabled.length; i++) + { + if (specification.metrics.enabled[i] == obj.name) + { + obj.input.checked = true; + break; + } + } + } + + // Now both before and after surveys + if (specification.preTest == undefined){ + specification.preTest = new specification.surveyNode(); + specification.preTest.location = "pre"; + } + if (specification.postTest == undefined){ + specification.postTest = new specification.surveyNode(); + specification.postTest.location = "post"; + } + var surveyBefore = new this.surveyNode(this,specification.preTest,"Pre"); + var surveyAfter = new this.surveyNode(this,specification.postTest,"Post"); + this.setupDOM.children.push(surveyBefore); + this.setupDOM.children.push(surveyAfter); + this.setupDOM.childrenDOM.appendChild(surveyBefore.rootDOM); + this.setupDOM.childrenDOM.appendChild(surveyAfter.rootDOM); + + // Add in the page creator button + this.addPage = { + root: document.createElement("button"), + parent: this, + handleEvent: function() + { + var pageObj = new specification.page(); + specification.pages.push(pageObj); + var newPage = new this.parent.pageNode(this.parent,pageObj); + this.parent.injectDOM.appendChild(newPage.rootDOM); + this.parent.pages.push(newPage); + } + } + this.addPage.root.textContent = "Add Page"; + this.addPage.root.addEventListener("click",this.addPage,false); + this.injectDOM.appendChild(this.addPage.root); + } + + this.interfaceNode = function(parent,rootObject) + { + this.rootDOM; + this.titleDOM; + this.attributeDOM; + this.attributes = []; + this.childrenDOM; + this.children = []; + this.buttonDOM; + this.parent = parent; + this.HTMLPoint; + this.specification = rootObject; + this.schema = specification.schema.getAllElementsByName("interface")[1]; + + this.createIOasAttr = function(name,specification,parent,type) { + this.root = document.createElement('div'); + this.input = document.createElement("input"); + this.name = name; + this.type = type; + this.parent = parent; + this.specification = specification; + this.handleEvent = function(event) { + for (var i=0; i<this.specification.options.length; i++) + { + if (this.specification.options[i].name == this.name) + { + var options = this.specification.options; + if (this.input.checked == false) { + if (i == options.length) + {options = options.slice(0,i);} + else { + options = options.slice(0,i).concat(options.slice(i+1)); + } + } else { + return; + } + this.specification.options = options; + break; + } + } + if (this.input.checked) { + var obj = { + name: this.name, + type: this.type + }; + this.specification.options.push(obj); + } + if (this.parent.HTMLPoint.id == "setup") + { + // We've changed a global setting, must update all child 'interfaces' and disable them + for (pages of convert.pages) + { + for (interface of pages.interfaces) + { + if (this.type == "check") + { + for (node of interface.children[0].attributes) + { + if (node.name == this.name) { + if (this.input.checked) { + node.input.disabled = true; + node.input.checked = false; + } else { + node.input.disabled = false; + } + break; + } + } + } else if (this.type == "show") + { + for (node of interface.children[1].attributes) + { + if (node.name == this.name) { + if (this.input.checked) { + node.input.disabled = true; + } else { + node.input.disabled = false; + } + break; + } + } + } + } + } + } + }; + this.findIndex = function(element,index,array){ + if (element.name == this.name) + return true; + else + return false; + }; + this.findNode = function(element,index,array){ + if (element.name == this.name) + return true; + else + return false; + }; + this.input.type = "checkbox"; + this.input.setAttribute("name",name); + this.input.addEventListener("change",this,false); + this.root.appendChild(this.input); + this.root.className = "attribute"; + return this; + } + + this.build = function(name,id,parent) + { + var obj = this.parent.createGeneralNodeDOM(name,id,parent); + + this.rootDOM = obj.rootDOM; + this.titleDOM = obj.titleDOM; + this.attributeDOM = obj.attributeDOM; + this.childrenDOM = obj.childrenDOM; + this.buttonDOM = obj.buttonsDOM; + this.HTMLPoint = parent; + this.rootDOM.removeChild(this.attributeDOM); + // Put in the check / show options as individual children + var checks = this.parent.createGeneralNodeDOM("Checks","setup-interface-checks",this); + + var interfaceName = popupStateNodes.state[1].select.value; + var checkText = interfaceSpecs.getElementsByTagName("global")[0].getAllElementsByTagName("checks")[0]; + var testXML = interfaceSpecs.getElementsByTagName("tests")[0].getAllElementsByName(interfaceName)[0]; + var interfaceXML = interfaceSpecs.getAllElementsByTagName("interfaces")[0].getAllElementsByName(testXML.getAttribute("interface"))[0].getAllElementsByTagName("checks")[0]; + testXML = testXML.getAllElementsByTagName("checks"); + for (var i=0; i<interfaceXML.children.length; i++) + { + var obj = new this.createIOasAttr(interfaceXML.children[i].getAttribute("name"),this.specification,this,"check"); + for (var option of this.specification.options) + { + if (option.name == obj.name) + { + obj.input.checked = true; + break; + } + } + if (parent.id != "setup") { + var node = convert.interfaceDOM.children[0].attributes.find(obj.findNode,obj); + if (node.input.checked) { + obj.input.checked = false; + obj.input.disable = true; + } + } + var text = document.createElement('span'); + text.textContent = checkText.children[i].textContent; + obj.root.appendChild(text); + checks.attributeDOM.appendChild(obj.root); + checks.attributes.push(obj); + } + this.children.push(checks); + this.childrenDOM.appendChild(checks.rootDOM); + + var show = this.parent.createGeneralNodeDOM("Show","setup-interface-show",this); + interfaceName = popupStateNodes.state[1].select.value; + checkText = interfaceSpecs.getElementsByTagName("global")[0].getAllElementsByTagName("show")[0]; + testXML = interfaceSpecs.getElementsByTagName("tests")[0].getAllElementsByName(interfaceName)[0]; + interfaceXML = interfaceSpecs.getAllElementsByTagName("interfaces")[0].getAllElementsByName(testXML.getAttribute("interface"))[0].getAllElementsByTagName("show")[0]; + testXML = testXML.getAllElementsByTagName("show"); + for (var i=0; i<interfaceXML.children.length; i++) + { + var obj = new this.createIOasAttr(interfaceXML.children[i].getAttribute("name"),this.specification,this,"show"); + for (var option of this.specification.options) + { + if (option.name == obj.name) + { + obj.input.checked = true; + break; + } + } + if (parent.id != "setup") { + var node = convert.interfaceDOM.children[0].attributes.find(obj.findNode,obj); + if (node.input.checked) { + obj.input.checked = false; + obj.input.disable = true; + } + } + var text = document.createElement('span'); + text.textContent = checkText.children[i].textContent; + obj.root.appendChild(text); + show.attributeDOM.appendChild(obj.root); + show.attributes.push(obj); + } + this.children.push(show); + this.childrenDOM.appendChild(show.rootDOM); + + if (parent.id == "setup") + { + } else { + var nameAttr = this.parent.convertAttributeToDOM(this,specification.schema.getAllElementsByName("name")[0]); + this.attributeDOM.appendChild(nameAttr.holder); + this.attributes.push(nameAttr); + } + if (parent != undefined) + { + parent.appendChild(this.rootDOM); + } + } + } + + this.surveyNode = function(parent,rootObject,location) + { + this.rootDOM = document.createElement("div"); + this.titleDOM = document.createElement("span"); + this.attributeDOM = document.createElement("div"); + this.attributes = []; + this.childrenDOM = document.createElement("div"); + this.children = []; + this.buttonDOM = document.createElement("div"); + this.parent = parent; + this.specification = rootObject; + this.schema = specification.schema.getAllElementsByName("survey")[1]; + this.rootDOM.className = "node"; + + var titleDiv = document.createElement('div'); + titleDiv.className = "node-title"; + this.titleDOM.className = "node-title"; + this.titleDOM.textContent = "Survey"; + titleDiv.appendChild(this.titleDOM); + + this.attributeDOM.className = "node-attributes"; + var locationAttr = document.createElement("span"); + this.attributeDOM.appendChild(locationAttr); + if (location == "Pre" || location == "pre") { + locationAttr.textContent = "Location: Before"; + } else { + locationAttr.textContent = "Location: After"; + } + this.childrenDOM.className = "node-children"; + this.buttonDOM.className = "node-buttons"; + + this.rootDOM.appendChild(titleDiv); + this.rootDOM.appendChild(this.attributeDOM); + this.rootDOM.appendChild(this.childrenDOM); + this.rootDOM.appendChild(this.buttonDOM); + + this.surveyEntryNode = function(parent,rootObject) + { + this.rootDOM = document.createElement("div"); + this.titleDOM = document.createElement("span"); + this.attributeDOM = document.createElement("div"); + this.attributes = []; + this.childrenDOM = document.createElement("div"); + this.children = []; + 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.titleDOM.className = "node-title"; + titleDiv.appendChild(this.titleDOM); + + this.attributeDOM.className = "node-attributes"; + this.childrenDOM.className = "node-children"; + this.buttonDOM.className = "node-buttons"; + + this.rootDOM.appendChild(titleDiv); + this.rootDOM.appendChild(this.attributeDOM); + 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; + } + 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": + var id = convert.convertAttributeToDOM(this.specification.id,specification.schema.getAllElementsByName("id")[0]); + var mandatory = convert.convertAttributeToDOM(this.specification.mandatory,specification.schema.getAllElementsByName("id")[0]); + var boxsize = convert.convertAttributeToDOM(this.specification.mandatory,specification.schema.getAllElementsByName("boxsize")[0]); + break; + } + + this.editNode = { + root: document.createElement("button"), + parent: this, + handleEvent: function() + { + popupObject.show(); + popupStateNodes.state[5].generate(this,this.parent); + popupObject.postNode(popupStateNodes.state[5]); + } + } + this.editNode.root.textContent = "Edit Entry"; + this.editNode.root.addEventListener("click",this.editNode,false); + this.buttonDOM.appendChild(this.editNode.root); + + this.deleteNode = { + root: document.createElement("button"), + parent: this, + handleEvent: function() + { + var optionList = this.parent.parent.specification.options; + var childList = this.parent.parent.children; + for (var i=0; i <this.parent.parent.specification.options.length; i++) + { + var option = this.parent.parent.specification.options[i]; + if (option == this.parent.specification) + { + this.parent.parent.childrenDOM.removeChild(this.parent.rootDOM); + if (i == this.parent.parent.specification.options.length-1) + { + optionList = optionList.slice(0,i); + childList = childList.slice(0,i); + } + else { + optionList = optionList.slice(0,i).concat(optionList.slice(i+1)); + childList = childList.slice(0,i).concat(childList.slice(i+1)); + } + this.parent.parent.specification.options = optionList; + this.parent.parent.children = childList; + } + } + } + } + this.deleteNode.root.textContent = "Delete Entry"; + this.deleteNode.root.addEventListener("click",this.deleteNode,false); + this.buttonDOM.appendChild(this.deleteNode.root); + } + this.addNode = { + root: document.createElement("button"), + parent: this, + handleEvent: function() + { + var newNode = new this.parent.specification.OptionNode(); + this.parent.specification.options.push(newNode); + popupObject.show(); + popupStateNodes.state[5].generate(newNode,this.parent); + popupObject.postNode(popupStateNodes.state[5]); + } + } + this.addNode.root.textContent = "Add Survey Entry"; + this.addNode.root.addEventListener("click",this.addNode,false); + this.buttonDOM.appendChild(this.addNode.root); + + for (var option of this.specification.options) + { + var newNode = new this.surveyEntryNode(this,option); + this.children.push(newNode); + this.childrenDOM.appendChild(newNode.rootDOM); + } + } + + this.pageNode = function(parent,rootObject) + { + this.rootDOM = document.createElement("div"); + this.titleDOM = document.createElement("span"); + this.attributeDOM = document.createElement("div"); + this.attributes = []; + this.childrenDOM = document.createElement("div"); + this.children = []; + this.buttonDOM = document.createElement("div"); + this.parent = parent; + this.specification = rootObject; + this.schema = specification.schema.getAllElementsByName("page")[0]; + this.rootDOM.className = "node"; + + var titleDiv = document.createElement('div'); + titleDiv.className = "node-title"; + this.titleDOM.className = "node-title"; + this.titleDOM.textContent = "Test Page"; + titleDiv.appendChild(this.titleDOM); + + this.attributeDOM.className = "node-attributes"; + this.childrenDOM.className = "node-children"; + this.buttonDOM.className = "node-buttons"; + + this.rootDOM.appendChild(titleDiv); + this.rootDOM.appendChild(this.attributeDOM); + this.rootDOM.appendChild(this.childrenDOM); + this.rootDOM.appendChild(this.buttonDOM); + + // Do the comment prefix node + var cpn = this.parent.createGeneralNodeDOM("Comment Prefix",""+this.specification.id+"-commentprefix",this.parent); + cpn.rootDOM.removeChild(cpn.attributeDOM); + var obj = { + root: document.createElement("div"), + input: document.createElement("input"), + parent: this, + handleEvent: function() + { + this.parent.specification.commentBoxPrefix = event.currentTarget.value; + } + } + cpn.children.push(obj); + cpn.childrenDOM.appendChild(obj.root); + obj.root.appendChild(obj.input); + obj.input.addEventListener("change",obj,false); + obj.input.value = this.specification.commentBoxPrefix; + this.childrenDOM.appendChild(cpn.rootDOM); + this.children.push(cpn); + + // Now both before and after surveys + if (this.specification.preTest == undefined){ + this.specification.preTest = new specification.surveyNode(); + this.specification.preTest.location = "pre"; + } + if (this.specification.postTest == undefined){ + this.specification.postTest = new specification.surveyNode(); + this.specification.postTest.location = "post"; + } + var surveyBefore = new this.parent.surveyNode(this,this.specification.preTest,"Pre"); + var surveyAfter = new this.parent.surveyNode(this,this.specification.postTest,"Post"); + this.children.push(surveyBefore); + this.children.push(surveyAfter); + this.childrenDOM.appendChild(surveyBefore.rootDOM); + this.childrenDOM.appendChild(surveyAfter.rootDOM); + + // Build the attributes + var attributeList = this.schema.getAllElementsByTagName("xs:attribute"); + for (var i=0; i<attributeList.length; i++) + { + var attributeName = attributeList[i].getAttribute('name'); + var attrObject = this.parent.convertAttributeToDOM(rootObject,attributeList[i]); + this.attributeDOM.appendChild(attrObject.holder); + this.attributes.push(attrObject); + } + + this.interfaces = []; + + this.audioElementNode = function(parent,rootObject) + { + this.rootDOM = document.createElement("div"); + this.titleDOM = document.createElement("span"); + this.attributeDOM = document.createElement("div"); + this.attributes = []; + this.childrenDOM = document.createElement("div"); + this.children = []; + this.buttonDOM = document.createElement("div"); + this.parent = parent; + this.specification = rootObject; + this.schema = specification.schema.getAllElementsByName("audioelement")[0]; + this.rootDOM.className = "node"; + + var titleDiv = document.createElement('div'); + titleDiv.className = "node-title"; + this.titleDOM.className = "node-title"; + this.titleDOM.textContent = "Audio Element"; + titleDiv.appendChild(this.titleDOM); + + this.attributeDOM.className = "node-attributes"; + this.childrenDOM.className = "node-children"; + this.buttonDOM.className = "node-buttons"; + + this.rootDOM.appendChild(titleDiv); + this.rootDOM.appendChild(this.attributeDOM); + this.rootDOM.appendChild(this.childrenDOM); + this.rootDOM.appendChild(this.buttonDOM); + + // Build the attributes + var attributeList = this.schema.getAllElementsByTagName("xs:attribute"); + for (var i=0; i<attributeList.length; i++) + { + var attributeName = attributeList[i].getAttribute('name'); + var attrObject = this.parent.parent.convertAttributeToDOM(rootObject,attributeList[i]); + this.attributeDOM.appendChild(attrObject.holder); + this.attributes.push(attrObject); + } + + this.deleteNode = { + root: document.createElement("button"), + parent: this, + handleEvent: function() + { + var i = this.parent.parent.specification.audioElements.findIndex(this.findNode,this); + if (i >= 0) { + var aeList = this.parent.parent.specification.audioElements; + if (i < aeList.length-1) { + aeList = aeList.slice(0,i).concat(aeList.slice(i+1)); + } else { + aeList = aeList.slice(0,i); + } + } + i = this.parent.parent.children.findIndex(function(element,index,array){ + if (element == this.parent) + return true; + else + return false; + },this); + if (i >= 0) { + var childList = this.parent.children; + if (i < aeList.length-1) { + childList = childList.slice(0,i).concat(childList.slice(i+1)); + } else { + childList = childList.slice(0,i); + } + this.parent.parent.childrenDOM.removeChild(this.parent.rootDOM); + } + }, + findNode: function(element,index,array){ + if (element == this.parent.specification) + return true; + else + return false; + } + } + this.deleteNode.root.textContent = "Delete Entry"; + this.deleteNode.root.addEventListener("click",this.deleteNode,false); + this.buttonDOM.appendChild(this.deleteNode.root); + } + + this.commentQuestionNode = function(parent,rootObject) + { + this.rootDOM = document.createElement("div"); + this.titleDOM = document.createElement("span"); + this.attributeDOM = document.createElement("div"); + this.attributes = []; + this.childrenDOM = document.createElement("div"); + this.children = []; + this.buttonDOM = document.createElement("div"); + this.parent = parent; + this.specification = rootObject; + this.schema = specification.schema.getAllElementsByName("page")[0]; + this.rootDOM.className = "node"; + + var titleDiv = document.createElement('div'); + titleDiv.className = "node-title"; + this.titleDOM.className = "node-title"; + this.titleDOM.textContent = "Test Page"; + titleDiv.appendChild(this.titleDOM); + + this.attributeDOM.className = "node-attributes"; + this.childrenDOM.className = "node-children"; + this.buttonDOM.className = "node-buttons"; + + this.rootDOM.appendChild(titleDiv); + this.rootDOM.appendChild(this.attributeDOM); + this.rootDOM.appendChild(this.childrenDOM); + this.rootDOM.appendChild(this.buttonDOM); + + } + + this.addInterface = { + root: document.createElement("button"), + parent: this, + handleEvent: function() { + var InterfaceObj = new specification.interfaceNode(); + var newInterface = new this.parent.parent.interfaceNode(this.parent.parent,InterfaceObj); + newInterface.build("Interface",""+this.parent.specification.id+"-interface",this.parent.childrenDOM); + this.parent.children.push(newInterface); + this.parent.specification.interfaces.push(InterfaceObj); + this.parent.interfaces.push(newInterface); + } + } + this.addInterface.root.textContent = "Add Interface"; + this.addInterface.root.addEventListener("click",this.addInterface,false); + this.buttonDOM.appendChild(this.addInterface.root); + + this.addAudioElement = { + root: document.createElement("button"), + parent: this, + handleEvent: function() { + var audioElementObject = new this.parent.specification.audioElementNode(); + var audioElementDOM = new this.parent.audioElementNode(this.parent,audioElementObject); + this.parent.specification.audioElements.push(audioElementObject); + this.parent.children.push(audioElementDOM); + this.parent.childrenDOM.appendChild(audioElementDOM.rootDOM); + } + } + this.addAudioElement.root.textContent = "Add Audio Element"; + this.addAudioElement.root.addEventListener("click",this.addAudioElement,false); + this.buttonDOM.appendChild(this.addAudioElement.root); + } +} \ No newline at end of file
--- a/test_create/test_create.html Tue Feb 02 11:03:01 2016 +0000 +++ b/test_create/test_create.html Wed Feb 10 12:02:25 2016 +0000 @@ -1,3024 +1,601 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="utf-8"> - - <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame - Remove this if you use the .htaccess --> - <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> - - <title>WAET: Test Creator</title> - - <meta name="viewport" content="width=device-width; initial-scale=1.0"> - <script type="text/javascript"> - - var APEInterfaceOptions = [["playhead","page-count"],["Show the playhead/scrubber bar", "Show test page count"]]; - var APEInterfaceChecks = [["fragmentPlayed","fragmentFullPlayback","fragmentMoved","fragmentComments"],["All Fragments Played","All Fragments Played in entirety","All sliders moved","All fragments have comments"]]; - var APEInterfaceMetrics = [["testTimer","elementTimer","elementTracker","elementTrackerFull","elementFlagListenedTo","elementFlagMoved","elementFlagComments"],["Test Duration","Total time each fragment was listened to","Return initialised position of marker","Fragment movement tracker with timestamps","Flag if fragment listened to","Flag if fragment moved","Flag if fragment has comments"]]; - var MUSHRAInterfaceOptions = [[],[]]; - var MUSHRAInterfaceChecks = [["fragmentPlayed","fragmentMoved","fragmentComments"],["All Fragments Played","All sliders moved","All fragments have comments"]]; - var MUSHRAInterfaceMetrics = [["testTimer","elementTimer","elementTracker","elementTrackerFull","elementFlagListenedTo","elementFlagMoved","elementFlagComments"],["Test Duration","Total time each fragment was listened to","Return initialised position of marker","Fragment movement tracker with timestamps","Flag if fragment listened to","Flag if fragment moved","Flag if fragment has comments"]]; - var popupInstance; - var specificationNode; - var audioContext; - var audioObjects = []; - window.onload = function() - { - var AudioContext = window.AudioContext || window.webkitAudioContext; - audioContext = new AudioContext; - popupInstance = new popup(); - popupInstance.advanceState(); - specificationNode = new Specification(); - specificationNode.projectReturn = "null"; - }; - - function popup() - { - var x = window.innerWidth; - var y = window.innerHeight; - this.popupHolder = document.createElement('div'); - this.popupHolder.style.visibility = 'hidden'; - this.popupContent = document.createElement('div'); - this.popupTitle = document.createElement('div'); - this.popupBody = document.createElement('div'); - this.popupFooter = document.createElement('div'); - this.popupTitleText = document.createElement('span'); - this.popupTitle.appendChild(this.popupTitleText); - - this.popupHolder.className = "popup"; - this.popupHolder.style.left = (x-500)/2 +'px'; - this.popupHolder.style.top = (y-400)/2 + 'px'; - this.popupContent.style.padding = "20px"; - this.popupHolder.appendChild(this.popupContent); - - this.popupTitle.style.width = "100%"; - this.popupTitle.style.height = "50px"; - this.popupTitle.style.fontSize = "xx-large"; - this.popupContent.appendChild(this.popupTitle); - - this.popupBody.style.width = "100%"; - this.popupBody.style.height = "280px"; - this.popupContent.appendChild(this.popupBody); - - this.popupFooter.style.width = "100%"; - this.popupFooter.style.height = "30px"; - this.popupContent.appendChild(this.popupFooter); - var body = document.getElementsByTagName('body')[0]; - body.appendChild(this.popupHolder); - - this.pageBlank = document.createElement('div'); - body.appendChild(this.pageBlank); - this.pageBlank.style.width = "100%"; - this.pageBlank.style.height = "100%"; - this.pageBlank.style.position = "absolute"; - this.pageBlank.style.left = "0px"; - this.pageBlank.style.top = "0px"; - this.pageBlank.style.backgroundColor = "rgba(0,0,0,0.5)"; - this.pageBlank.style.visibility = 'hidden'; - - this.state = 0; - this.dataTransfer = null; - - this.showPopup = function() - { - this.popupHolder.style.visibility = 'visible'; - this.popupHolder.style.zIndex = "3"; - this.pageBlank.style.visibility = 'visible'; - this.pageBlank.style.zIndex = "2"; - }; - - this.hidePopup = function() - { - this.popupHolder.style.visibility = 'hidden'; - this.popupHolder.style.zIndex = "-1"; - this.pageBlank.style.visibility = 'hidden'; - this.pageBlank.style.zIndex = "-2"; - }; - - this.init = function() - { - this.popupTitleText.textContent = "Welcome"; - var text = document.createElement('span'); - text.textContent = "Thank you for downloading the Web Audio Evaluation Toolbox. This page will help guide you through creating the documents required to run a test. If you have an existing XML file you wish to edit, please drag and drop it into the box below"; - var dnd = document.createElement('div'); - 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(); - - var button = document.createElement('button'); - button.className = "popupButton"; - button.textContent = "New File"; - button.onclick = function(event) { - popupInstance.advanceState(); - }; - this.popupFooter.appendChild(button); - }; - - this.advanceState = function() - { - this.popupBody.innerHTML = null; - this.popupFooter.innerHTML = null; - this.popupTitleText.textContent = null; - switch(this.state) - { - case 0: - this.init(); - break; - case 1: - this.popupTitleText.textContent = "Test Type"; - var text = document.createElement("span"); - text.textContent = "What type of test would you like to use. Currently APE (Audio Perceptual Evaluation) and MUSHRA style interfaces are available"; - this.popupBody.appendChild(text); - var select = document.createElement("select"); - select.id="interface-select"; - var opt1 = document.createElement("option"); - opt1.value = "APE"; - opt1.textContent = "APE"; - select.appendChild(opt1); - var opt2 = document.createElement("option"); - opt2.value = "MUSHRA"; - opt2.textContent = "MUSHRA"; - select.appendChild(opt2); - this.popupBody.appendChild(select); - - var button = document.createElement('button'); - button.className = "popupButton"; - button.textContent = "Submit"; - button.onclick = function(event) { - var select = document.getElementById("interface-select"); - specificationNode.interfaceType = select.value; - specificationNode.collectMetrics = true; - popupInstance.advanceState(); - }; - this.popupFooter.appendChild(button); - break; - case 2: - this.popupTitleText.textContent = "Test Options"; - var holder = document.createElement('div'); - holder.style.margin = "5px"; - var checkbox = document.createElement('input'); - checkbox.type = 'checkbox'; - checkbox.id = "Randomise-Page"; - var text = document.createElement('span'); - text.textContent = "Randomise Page Order"; - holder.appendChild(checkbox); - holder.appendChild(text); - this.popupBody.appendChild(holder); - switch(specificationNode.interfaceType) - { - case "APE": - for (var i=0; i<APEInterfaceOptions[0].length; i++) - { - holder = document.createElement('div'); - holder.style.margin = "5px"; - checkbox = document.createElement('input'); - checkbox.type = 'checkbox'; - checkbox.setAttribute("name","option"); - checkbox.id = APEInterfaceOptions[0][i]; - text = document.createElement('span'); - text.textContent = APEInterfaceOptions[1][i]; - holder.appendChild(checkbox); - holder.appendChild(text); - this.popupBody.appendChild(holder); - } - for (var i=0; i<APEInterfaceChecks[0].length; i++) - { - holder = document.createElement('div'); - holder.style.margin = "5px"; - checkbox = document.createElement('input'); - checkbox.type = 'checkbox'; - checkbox.setAttribute("name","check"); - checkbox.id = APEInterfaceChecks[0][i]; - text = document.createElement('span'); - text.textContent = APEInterfaceChecks[1][i]; - holder.appendChild(checkbox); - holder.appendChild(text); - this.popupBody.appendChild(holder); - } - break; - case "MUSHRA": - for (var i=0; i<MUSHRAInterfaceOptions[0].length; i++) - { - holder = document.createElement('div'); - holder.style.margin = "5px"; - checkbox = document.createElement('input'); - checkbox.type = 'checkbox'; - checkbox.setAttribute("name","option"); - checkbox.id = MUSHRAInterfaceOptions[0][i]; - text = document.createElement('span'); - text.textContent = MUSHRAInterfaceOptions[1][i]; - holder.appendChild(checkbox); - holder.appendChild(text); - this.popupBody.appendChild(holder); - } - for (var i=0; i<MUSHRAInterfaceChecks[0].length; i++) - { - holder = document.createElement('div'); - holder.style.margin = "5px"; - checkbox = document.createElement('input'); - checkbox.type = 'checkbox'; - checkbox.setAttribute("name","check"); - checkbox.id = MUSHRAInterfaceChecks[0][i]; - text = document.createElement('span'); - text.textContent = MUSHRAInterfaceChecks[1][i]; - holder.appendChild(checkbox); - holder.appendChild(text); - this.popupBody.appendChild(holder); - } - } - var button = document.createElement('button'); - button.className = "popupButton"; - button.textContent = "Submit"; - button.onclick = function(event) { - var optHold = popupInstance.popupBody; - var opt = optHold.firstChild; - var input = opt.getElementsByTagName('input')[0]; - specificationNode.randomiseOrder = input.checked; - while(opt.nextSibling != null) - { - opt = opt.nextSibling; - input = opt.getElementsByTagName('input')[0]; - if (input.checked) - { - specificationNode.commonInterface.options.push(new specificationNode.commonInterface.optionNode(input)); - } - - } - popupInstance.advanceState(); - }; - this.popupFooter.appendChild(button); - break; - case 3: - audioObjects = []; - this.popupTitleText.textContent = "Test Page"; - var span = document.createElement('span'); - span.textContent = "Drag and drop your audio files into the box below to add them to a test page"; - this.popupBody.appendChild(span); - var dnd = document.createElement('div'); - dnd.id = "audio-holder-drop"; - dnd.style.width = "100%"; - dnd.style.minHeight = "50px"; - dnd.style.maxHeight = "220px"; - dnd.style.overflow = 'auto'; - dnd.className = "dragndrop"; - dnd.ondragover = function(e) { - if(e.preventDefault) {e.preventDefault();} - return false; - }; - dnd.ondragenter = function(e) { - if(e.preventDefault) {e.preventDefault();} - return false; - }; - dnd.ondrop = function(e) { - if(e.preventDefault) {e.preventDefault();} - var dt = e.dataTransfer; - var body = document.getElementById("audio-holder-drop"); - var files = dt.files; - for (var i = 0, f; f = files[i]; i++) - { - var ao = new audioObject(); - ao.constructTrack(f); - audioObjects.push(ao); - var dndHeader = document.createElement('div'); - dndHeader.style.width = "100%"; - dndHeader.style.height = "20px"; - dndHeader.style.borderBottom = "#DDD"; - dndHeader.style.borderBottomWidth = "1px"; - dndHeader.style.borderBottomStyle = "solid"; - dndHeader.setAttribute('aoID',audioObjects.length-1); - var dndHInclude = document.createElement('div'); - dndHInclude.style.width = "30px"; - dndHInclude.className = "dndheaderelement"; - var includeCheck = document.createElement('input'); - includeCheck.type = "checkbox"; - includeCheck.name = "include-check"; - includeCheck.checked = true; - includeCheck.onchange = function() - { - var i = event.currentTarget.parentElement.parentElement.getAttribute('aoID'); - audioObjects[i].include = event.currentTarget.checked; - }; - dndHInclude.appendChild(includeCheck); - dndHeader.appendChild(dndHInclude); - var dndHTitle = document.createElement('div'); - dndHTitle.style.width = "180px"; - dndHTitle.className = "dndheaderelement"; - var text = document.createElement('span'); - text.textContent = f.name; - dndHTitle.appendChild(text); - dndHeader.appendChild(dndHTitle); - var dndHID = document.createElement('div'); - dndHID.style.width = "100px"; - dndHID.className = "dndheaderelement"; - var IDInput = document.createElement('input'); - IDInput.name = "audio-fragment-ID"; - IDInput.value = f.name.split('.')[0]; - IDInput.onchange = function() - { - var allIDInput = document.getElementsByName("audio-fragment-ID"); - var isCopy = new Array(allIDInput.length); - isCopy.fill(0,0,this.length); - if (allIDInput.length > 1) - { - for (var j=0; j<allIDInput.length; j++) - { - var textCompare1 = allIDInput[j].value; - for (var k=j+1; k<allIDInput.length; k++) - { - var textCompare2 = allIDInput[k].value; - if (textCompare1 == textCompare2) - { - isCopy[j] = 1; - isCopy[k] = 1; - } - } - } - } - var button = document.getElementById('submit'); - button.disabled = false; - for (var j=0; j<allIDInput.length; j++) - { - if (isCopy[j] == 1) - { - allIDInput[j].style.backgroundColor = '#F22'; - button.disabled = true; - } - else - { - allIDInput[j].style.backgroundColor = '#FFF'; - audioObjects[j].id = allIDInput[j].value; - } - } - }; - IDInput.style.width = "96px"; - dndHID.appendChild(IDInput); - dndHeader.appendChild(dndHID); - var dndHPlay = document.createElement('div'); - dndHPlay.style.width = "100px"; - dndHPlay.className = "dndheaderelement"; - var audio = document.createElement('button'); - audio.textContent = 'Play'; - audio.className = "popupButton"; - audio.style.height = "inherit"; - audio.onclick = function() - { - var i = event.currentTarget.parentElement.parentElement.getAttribute('aoID'); - audioObjects[i].play(); - }; - dndHPlay.appendChild(audio); - dndHeader.appendChild(dndHPlay); - dnd.appendChild(dndHeader); - IDInput.onchange(); - } - }; - var dndHeader = document.createElement('div'); - dndHeader.style.width = "100%"; - dndHeader.style.height = "15px"; - dndHeader.style.borderBottom = "#DDD"; - dndHeader.style.borderBottomWidth = "1px"; - dndHeader.style.borderBottomStyle = "solid"; - var dndHInclude = document.createElement('div'); - dndHInclude.style.width = "30px"; - dndHInclude.className = "dndheaderelement"; - var text = document.createElement('span'); - text.textContent = "Inc."; - dndHInclude.appendChild(text); - dndHeader.appendChild(dndHInclude); - var dndHTitle = document.createElement('div'); - dndHTitle.style.width = "180px"; - dndHTitle.className = "dndheaderelement"; - text = document.createElement('span'); - text.textContent = "File Name"; - dndHTitle.appendChild(text); - dndHeader.appendChild(dndHTitle); - var dndHID = document.createElement('div'); - dndHID.style.width = "100px"; - dndHID.className = "dndheaderelement"; - text = document.createElement('span'); - text.textContent = "ID"; - dndHID.appendChild(text); - dndHeader.appendChild(dndHID); - var dndHPlay = document.createElement('div'); - dndHPlay.style.width = "100px"; - dndHPlay.className = "dndheaderelement"; - text = document.createElement('span'); - text.textContent = "Sample"; - dndHPlay.appendChild(text); - dndHeader.appendChild(dndHPlay); - dnd.appendChild(dndHeader); - this.popupBody.appendChild(dnd); - var button = document.createElement('button'); - button.id = 'submit'; - button.className = "popupButton"; - button.textContent = "Submit"; - button.onclick = function(event) - { - // Construct the audio-holder nodes; - for (var i=0; i<audioObjects.length; i++) - { - if (!audioObjects[i].include) - { - audioObjects.pop(audioObjects[i]); - } - } - if (audioObjects.length != 0) - { - popupInstance.advanceState(); - } - }; - this.popupFooter.appendChild(button); - break; - case 4: - this.popupTitleText.textContent = "Test Page - Options"; - var span = document.createElement('span'); - span.textContent = "Set your test page options here"; - this.popupBody.appendChild(span); - var pair = document.createElement('div'); - pair.style.margin = '5px'; - var text = document.createElement('span'); - text.textContent = "Page ID:"; - var input = document.createElement('input'); - input.value = specificationNode.audioHolders.length; - input.id = "id"; - pair.appendChild(text); - pair.appendChild(input); - this.popupBody.appendChild(pair); - pair = document.createElement('div'); - pair.style.margin = '5px'; - text = document.createElement('span'); - text.textContent = "Randomise Fragment Order"; - input = document.createElement('input'); - input.type = "checkbox"; - input.id = "randomiseOrder"; - pair.appendChild(input); - pair.appendChild(text); - this.popupBody.appendChild(pair); - pair = document.createElement('div'); - pair.style.margin = '5px'; - text = document.createElement('span'); - text.textContent = "Loop Fragment Playback"; - input = document.createElement('input'); - input.type = "checkbox"; - input.id = "loop"; - pair.appendChild(input); - pair.appendChild(text); - this.popupBody.appendChild(pair); - pair = document.createElement('div'); - pair.style.margin = '5px'; - text = document.createElement('span'); - text.textContent = "Show fragment comment boxes"; - input = document.createElement('input'); - input.type = "checkbox"; - input.id = "elementComments"; - pair.appendChild(input); - pair.appendChild(text); - this.popupBody.appendChild(pair); - var button = document.createElement('button'); - button.id = 'submit'; - button.className = "popupButton"; - button.textContent = "Next"; - button.onclick = function(event) - { - var ah = new specificationNode.audioHolderNode(specificationNode); - ah.id = document.getElementById('id').value; - ah.presentedId = specificationNode.audioHolders.length; - ah.hostURL = ah.id+'/'; - ah.randomiseOrder = document.getElementById('randomiseOrder').checked; - ah.loop = document.getElementById('loop').checked; - ah.elementComments = document.getElementById('elementComments').checked; - for (var i=0; i<audioObjects.length; i++) - { - ah.audioElements.push(new ah.audioElementNode(ah,audioObjects[i])); - } - specificationNode.audioHolders.push(ah); - popupInstance.advanceState(); - }; - this.popupFooter.appendChild(button); - break; - case 5: - this.dataTransfer = null; - this.popupTitleText.textContent = "Test Page - Pre/Post Survey"; - var span = document.createElement('span'); - span.textContent = "Add your pre test page options here"; - this.popupBody.appendChild(span); - var preHolder = document.createElement('div'); - preHolder.id = "preHolder"; - preHolder.style.width = "460px"; - preHolder.style.minHeight = "100px"; - preHolder.style.maxHeight = "220px"; - preHolder.style.overflow = 'auto'; - preHolder.style.border = "black"; - preHolder.style.borderStyle = "solid"; - preHolder.style.borderWidth = "1px"; - this.popupBody.appendChild(preHolder); - var audioHolder = specificationNode.audioHolders[specificationNode.audioHolders.length-1]; - var preHeaderHolder = document.createElement('div'); - preHeaderHolder.style.width = "456px"; - preHeaderHolder.style.height= "20px"; - preHeaderHolder.style.margin= "2px"; - preHeaderHolder.style.borderBottom = "#DDD"; - preHeaderHolder.style.borderBottomWidth = "1px"; - preHeaderHolder.style.borderBottomStyle = "solid"; - var mvH = document.createElement('div'); - mvH.className = "dndheaderelement"; - mvH.style.width = "50px"; - var text = document.createElement('span'); - text.textContent = "Order"; - mvH.appendChild(text); - preHeaderHolder.appendChild(mvH); - var idH = document.createElement('div'); - idH.className = "dndheaderelement"; - idH.style.width = "150px"; - text = document.createElement('span'); - text.textContent = "ID"; - idH.appendChild(text); - preHeaderHolder.appendChild(idH); - var tH = document.createElement('div'); - tH.className = "dndheaderelement"; - tH.style.width = "150px"; - text = document.createElement('span'); - text.textContent = "Type"; - tH.appendChild(text); - preHeaderHolder.appendChild(tH); - var editH = document.createElement('div'); - editH.className = "dndheaderelement"; - editH.style.width = "50px"; - text = document.createElement('span'); - text.textContent = "Edit"; - editH.appendChild(text); - preHeaderHolder.appendChild(editH); - var deleteH = document.createElement('div'); - deleteH.className = "dndheaderelement"; - deleteH.style.width = "50px"; - text = document.createElement('span'); - text.textContent = "Delete"; - deleteH.appendChild(text); - preHeaderHolder.appendChild(deleteH); - preHolder.appendChild(preHeaderHolder); - - - for (var i=0; i<audioHolder.preTest.options.length; i++) - { - var optionNode = audioHolder.preTest.options[i]; - var entry = document.createElement('div'); - entry.style.width = "456px"; - entry.style.height= "20px"; - entry.style.margin= "2px"; - entry.style.borderBottom = "#DDD"; - entry.style.borderBottomWidth = "1px"; - entry.style.borderBottomStyle = "solid"; - entry.setAttribute("node-id",i); - var node = audioHolder.preTest.options[i]; - var mvH = document.createElement('div'); - mvH.className = "dndheaderelement"; - mvH.style.width = "50px"; - var mvup = document.createElement("button"); - mvup.textContent = "Up"; - mvup.style.width = "25px"; - mvup.style.padding = "1px 0px"; - mvup.onclick = function() - { - var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); - if (i != 0) - { - var next = audioHolder.preTest.options[i-1]; - var cur = audioHolder.preTest.options[i]; - audioHolder.preTest.options[i-1] = cur; - audioHolder.preTest.options[i] = next; - popupInstance.state = 5; - popupInstance.advanceState(); - } - }; - mvH.appendChild(mvup); - var mvdn = document.createElement("button"); - mvdn.textContent = "Dn"; - mvdn.style.width = "25px"; - mvdn.style.padding = "1px 0px"; - mvdn.onclick = function() - { - var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); - if (i != audioHolder.preTest.options.length-1) - { - var next = audioHolder.preTest.options[i+1]; - var cur = audioHolder.preTest.options[i]; - audioHolder.preTest.options[i+1] = cur; - audioHolder.preTest.options[i] = next; - popupInstance.state = 5; - popupInstance.advanceState(); - } - }; - mvH.appendChild(mvdn); - entry.appendChild(mvH); - var idH = document.createElement('div'); - idH.className = "dndheaderelement"; - idH.style.width = "150px"; - if (optionNode.type != "statement") - { - var span = document.createElement('span'); - span.textContent = optionNode.id; - idH.appendChild(span); - } - entry.appendChild(idH); - var typeH = document.createElement('div'); - typeH.className = "dndheaderelement"; - typeH.style.width = "150px"; - var span = document.createElement('span'); - span.textContent = optionNode.type; - typeH.appendChild(span); - entry.appendChild(typeH); - var editH = document.createElement('div'); - editH.className = "dndheaderelement"; - editH.style.width = "50px"; - var editButton = document.createElement("button"); - editButton.textContent = "Edit"; - editButton.style.width = "48px"; - editButton.style.padding = "1px 0px"; - editButton.onclick = function() - { - var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); - popupInstance.dataTransfer = new function() { - this.title = "Edit Test Node"; - this.parent = specificationNode.audioHolders[specificationNode.audioHolders.length-1].preTest; - this.node = this.parent.options[i]; - this.previousState = 5; - }; - popupInstance.advanceState(); - }; - editH.appendChild(editButton); - entry.appendChild(editH); - var deleteH = document.createElement('div'); - deleteH.className = "dndheaderelement"; - deleteH.style.width = "50px"; - var deleteButton = document.createElement("button"); - deleteButton.textContent = "Del"; - deleteButton.style.width = "48px"; - deleteButton.style.padding = "1px 0px"; - deleteButton.onclick = function() - { - var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); - var j = i+1; - while(j < audioHolder.preTest.options.length) - { - audioHolder.preTest.options[i] = audioHolder.preTest.options[j]; - j++; - i++; - } - audioHolder.preTest.options.pop(); - popupInstance.state = 5; - popupInstance.advanceState(); - }; - deleteH.appendChild(deleteButton); - entry.appendChild(deleteH); - preHolder.appendChild(entry); - } - var entry = document.createElement('div'); - entry.style.width = "456px"; - entry.style.height= "20px"; - entry.style.margin= "2px"; - entry.style.borderBottom = "#DDD"; - entry.style.borderBottomWidth = "1px"; - entry.style.borderBottomStyle = "solid"; - entry.align = "center"; - var addPre = document.createElement('button'); - addPre.className = "popupButton"; - addPre.textContent = "Add New Entry"; - addPre.style.height = "20px"; - addPre.onclick = function() - { - popupInstance.dataTransfer = new function() { - this.title = "New Pre Test Node"; - this.parent = specificationNode.audioHolders[specificationNode.audioHolders.length-1].preTest; - this.node = null; - this.previousState = 5; - }; - popupInstance.advanceState(); - }; - entry.appendChild(addPre); - preHolder.appendChild(entry); - - var span = document.createElement('span'); - span.textContent = "Add your post test page options here"; - this.popupBody.appendChild(span); - var postHolder = document.createElement('div'); - postHolder.id = "preHolder"; - postHolder.style.width = "100%"; - postHolder.style.minHeight = "100px"; - postHolder.style.maxHeight = "220px"; - postHolder.style.overflow = 'auto'; - postHolder.style.border = "black"; - postHolder.style.borderStyle = "solid"; - postHolder.style.borderWidth = "1px"; - this.popupBody.appendChild(postHolder); - var postHeaderHolder = document.createElement('div'); - postHeaderHolder.style.width = "456px"; - postHeaderHolder.style.height= "20px"; - postHeaderHolder.style.margin= "2px"; - postHeaderHolder.style.borderBottom = "#DDD"; - postHeaderHolder.style.borderBottomWidth = "1px"; - postHeaderHolder.style.borderBottomStyle = "solid"; - var mvH = document.createElement('div'); - mvH.className = "dndheaderelement"; - mvH.style.width = "50px"; - var text = document.createElement('span'); - text.textContent = "Order"; - mvH.appendChild(text); - postHeaderHolder.appendChild(mvH); - var idH = document.createElement('div'); - idH.className = "dndheaderelement"; - idH.style.width = "150px"; - text = document.createElement('span'); - text.textContent = "ID"; - idH.appendChild(text); - postHeaderHolder.appendChild(idH); - var tH = document.createElement('div'); - tH.className = "dndheaderelement"; - tH.style.width = "150px"; - text = document.createElement('span'); - text.textContent = "Type"; - tH.appendChild(text); - postHeaderHolder.appendChild(tH); - var editH = document.createElement('div'); - editH.className = "dndheaderelement"; - editH.style.width = "50px"; - text = document.createElement('span'); - text.textContent = "Edit"; - editH.appendChild(text); - postHeaderHolder.appendChild(editH); - var deleteH = document.createElement('div'); - deleteH.className = "dndheaderelement"; - deleteH.style.width = "50px"; - text = document.createElement('span'); - text.textContent = "Delete"; - deleteH.appendChild(text); - postHeaderHolder.appendChild(deleteH); - postHolder.appendChild(postHeaderHolder); - - for (var i=0; i<audioHolder.postTest.options.length; i++) - { - var optionNode = audioHolder.postTest.options[i]; - var entry = document.createElement('div'); - entry.style.width = "456px"; - entry.style.height= "20px"; - entry.style.margin= "2px"; - entry.style.borderBottom = "#DDD"; - entry.style.borderBottomWidth = "1px"; - entry.style.borderBottomStyle = "solid"; - entry.setAttribute("node-id",i); - var node = audioHolder.postTest.options[i]; - var mvH = document.createElement('div'); - mvH.className = "dndheaderelement"; - mvH.style.width = "50px"; - var mvup = document.createElement("button"); - mvup.textContent = "Up"; - mvup.style.width = "25px"; - mvup.style.padding = "1px 0px"; - mvup.onclick = function() - { - var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); - if (i != 0) - { - var next = audioHolder.postTest.options[i-1]; - var cur = audioHolder.postTest.options[i]; - audioHolder.postTest.options[i-1] = cur; - audioHolder.postTest.options[i] = next; - popupInstance.state = 5; - popupInstance.advanceState(); - } - }; - mvH.appendChild(mvup); - var mvdn = document.createElement("button"); - mvdn.textContent = "Dn"; - mvdn.style.width = "25px"; - mvdn.style.padding = "1px 0px"; - mvdn.onclick = function() - { - var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); - if (i != audioHolder.postTest.options.length-1) - { - var next = audioHolder.postTest.options[i+1]; - var cur = audioHolder.postTest.options[i]; - audioHolder.postTest.options[i+1] = cur; - audioHolder.postTest.options[i] = next; - popupInstance.state = 5; - popupInstance.advanceState(); - } - }; - mvH.appendChild(mvdn); - entry.appendChild(mvH); - var idH = document.createElement('div'); - idH.className = "dndheaderelement"; - idH.style.width = "150px"; - if (optionNode.type != "statement") - { - var span = document.createElement('span'); - span.textContent = optionNode.id; - idH.appendChild(span); - } - entry.appendChild(idH); - var typeH = document.createElement('div'); - typeH.className = "dndheaderelement"; - typeH.style.width = "150px"; - var span = document.createElement('span'); - span.textContent = optionNode.type; - typeH.appendChild(span); - entry.appendChild(typeH); - var editH = document.createElement('div'); - editH.className = "dndheaderelement"; - editH.style.width = "50px"; - var editButton = document.createElement("button"); - editButton.textContent = "Edit"; - editButton.style.width = "48px"; - editButton.style.padding = "1px 0px"; - editButton.onclick = function() - { - var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); - popupInstance.dataTransfer = new function() { - this.title = "Edit Test Node"; - this.parent = specificationNode.audioHolders[specificationNode.audioHolders.length-1].postTest; - this.node = this.parent.options[i]; - this.previousState = 5; - }; - popupInstance.advanceState(); - }; - editH.appendChild(editButton); - entry.appendChild(editH); - var deleteH = document.createElement('div'); - deleteH.className = "dndheaderelement"; - deleteH.style.width = "50px"; - var deleteButton = document.createElement("button"); - deleteButton.textContent = "Del"; - deleteButton.style.width = "48px"; - deleteButton.style.padding = "1px 0px"; - deleteButton.onclick = function() - { - var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); - var j = i+1; - while(j < audioHolder.postTest.options.length) - { - audioHolder.postTest.options[i] = audioHolder.postTest.options[j]; - j++; - i++; - } - audioHolder.postTest.options.pop(); - popupInstance.state = 5; - popupInstance.advanceState(); - }; - deleteH.appendChild(deleteButton); - entry.appendChild(deleteH); - postHolder.appendChild(entry); - } - - var entry = document.createElement('div'); - entry.style.width = "456px"; - entry.style.height= "20px"; - entry.style.margin= "2px"; - entry.style.borderBottom = "#DDD"; - entry.style.borderBottomWidth = "1px"; - entry.style.borderBottomStyle = "solid"; - entry.align = "center"; - var addPost = document.createElement('button'); - addPost.className = "popupButton"; - addPost.textContent = "Add New Entry"; - addPost.style.height = "20px"; - addPost.onclick = function() - { - popupInstance.dataTransfer = new function() { - this.title = "New Pre Test Node"; - this.parent = specificationNode.audioHolders[specificationNode.audioHolders.length-1].postTest; - this.node = null; - this.previousState = 5; - }; - popupInstance.advanceState(); - }; - entry.appendChild(addPost); - postHolder.appendChild(entry); - - var button = document.createElement('button'); - button.id = 'submit'; - button.className = "popupButton"; - button.textContent = "Finish"; - button.onclick = function(event) - { - popupInstance.state = 7; - popupInstance.advanceState(); - }; - this.popupFooter.appendChild(button); - button = document.createElement('button'); - button.id = 'submit'; - button.className = "popupButton"; - button.textContent = "Add Another Page"; - button.onclick = function(event) - { - popupInstance.state = 3; - popupInstance.advanceState(); - }; - this.popupFooter.appendChild(button); - break; - case 6: - this.popupTitleText.textContent = this.dataTransfer.title; - var span = document.createElement('span'); - span.textContent = "Select survey settings here"; - this.popupBody.appendChild(span); - var div = document.createElement('div'); - span = document.createElement("span"); - span.textContent = "Survey Type"; - var select = document.createElement("select"); - select.id="survey-select"; - var option = document.createElement('option'); - option.textContent = "Statement"; - option.value = "statement"; - select.appendChild(option); - option = document.createElement('option'); - option.textContent = "Question"; - option.value = "question"; - select.appendChild(option); - option = document.createElement('option'); - option.textContent = "Number"; - option.value = "number"; - select.appendChild(option); - option = document.createElement('option'); - option.textContent = "Radio"; - option.value = "radio"; - select.appendChild(option); - option = document.createElement('option'); - option.textContent = "Checkbox"; - option.value = "checkbox"; - select.appendChild(option); - this.popupBody.appendChild(select); - var options = document.createElement('div'); - options.id = "survey-options"; - this.popupBody.appendChild(options); - var button = document.createElement('button'); - button.id = 'submit'; - button.className = "popupButton"; - button.textContent = "Add"; - button.onclick = function(event) - { - var parent = popupInstance.dataTransfer.parent; - if (popupInstance.dataTransfer.node == null) - { - var node = new parent.OptionNode(); - } else - { - var node = popupInstance.dataTransfer.node; - } - node.type = document.getElementById("survey-select").value; - switch(node.type) - { - case "statement": - node.statement = document.getElementById("statement").value; - break; - case "question": - node.question = document.getElementById("question").value; - node.id = document.getElementById("ID").value; - node.mandatory = document.getElementById("mandatory").checked; - node.boxsize = document.getElementById("boxsize").value; - break; - } - if (popupInstance.dataTransfer.node == null) - {parent.options.push(node);} - popupInstance.state = popupInstance.dataTransfer.previousState; - popupInstance.advanceState(); - }; - this.popupFooter.appendChild(button); - select.onchange = function() - { - var options = document.getElementById("survey-options"); - options.innerHTML = null; - switch(this.value) - { - case "statement": - var span = document.createElement('span'); - span.textContent = "Enter Statement"; - var tA = document.createElement('textarea'); - tA.id = "statement"; - tA.style.width = "460px"; - tA.style.height = "96px"; - if (popupInstance.dataTransfer.node != null) - {tA.value = this.dataTransfer.node.statement;} - options.appendChild(span); - options.appendChild(tA); - break; - case "question": - var span = document.createElement('span'); - span.textContent = "Enter Question"; - var tA = document.createElement('textarea'); - tA.style.width = "460px"; - tA.style.height = "54px"; - tA.id = "question"; - options.appendChild(span); - options.appendChild(tA); - var div = document.createElement('div'); - var input = document.createElement('input'); - input.id = "ID"; - span = document.createElement('span'); - span.textContent = "ID:"; - div.appendChild(span); - div.appendChild(input); - options.appendChild(div); - div = document.createElement('div'); - input = document.createElement('input'); - input.type = "checkbox"; - input.id = "mandatory"; - span = document.createElement('span'); - span.textContent = "Mandatory"; - div.appendChild(span); - div.appendChild(input); - options.appendChild(div); - div = document.createElement('div'); - var boxsize = document.createElement("select"); - boxsize.id = "boxsize"; - var selOpt = document.createElement("option"); - selOpt.value = "normal"; - selOpt.textContent = "Normal"; - boxsize.appendChild(selOpt); - selOpt = document.createElement("option"); - selOpt.value = "small"; - selOpt.textContent = "Small"; - boxsize.appendChild(selOpt); - selOpt = document.createElement("option"); - selOpt.value = "large"; - selOpt.textContent = "Large"; - boxsize.appendChild(selOpt); - selOpt = document.createElement("option"); - selOpt.value = "huge"; - selOpt.textContent = "Huge"; - boxsize.appendChild(selOpt); - span = document.createElement('span'); - span.textContent = "Response Text Area"; - div.appendChild(span); - div.appendChild(boxsize); - options.appendChild(div); - if (popupInstance.dataTransfer.node != null) - { - tA.value = popupInstance.dataTransfer.node.question; - document.getElementById("ID").value = popupInstance.dataTransfer.node.id; - document.getElementById("mandatory").value = popupInstance.dataTransfer.node.mandatory; - document.getElementById("boxsize").value = popupInstance.dataTransfer.node.boxsize; - } - break; - case "number": - var span = document.createElement('span'); - span.textContent = "Enter Question"; - var tA = document.createElement('textarea'); - tA.style.width = "460px"; - tA.style.height = "54px"; - tA.id = "question"; - options.appendChild(span); - options.appendChild(tA); - var div = document.createElement('div'); - var input = document.createElement('input'); - input.id = "ID"; - span = document.createElement('span'); - span.textContent = "ID:"; - div.appendChild(span); - div.appendChild(input); - options.appendChild(div); - div = document.createElement('div'); - input = document.createElement('input'); - input.type = "checkbox"; - input.id = "mandatory"; - span = document.createElement('span'); - span.textContent = "Mandatory"; - div.appendChild(span); - div.appendChild(input); - options.appendChild(div); - div = document.createElement('div'); - break; - } - }; - if (this.dataTransfer.node != null) - { - select.value = this.dataTransfer.node.type; - } - select.onchange(); - break; - case 7: - this.dataTransfer = null; - this.popupTitleText.textContent = "Test Session - Pre/Post Survey"; - var span = document.createElement('span'); - span.textContent = "Add your pre test session and post test session survey options here"; - this.popupBody.appendChild(span); - var preHolder = document.createElement('div'); - preHolder.id = "preHolder"; - preHolder.style.width = "460px"; - preHolder.style.minHeight = "100px"; - preHolder.style.maxHeight = "220px"; - preHolder.style.overflow = 'auto'; - preHolder.style.border = "black"; - preHolder.style.borderStyle = "solid"; - preHolder.style.borderWidth = "1px"; - this.popupBody.appendChild(preHolder); - var preHeaderHolder = document.createElement('div'); - preHeaderHolder.style.width = "456px"; - preHeaderHolder.style.height= "20px"; - preHeaderHolder.style.margin= "2px"; - preHeaderHolder.style.borderBottom = "#DDD"; - preHeaderHolder.style.borderBottomWidth = "1px"; - preHeaderHolder.style.borderBottomStyle = "solid"; - var mvH = document.createElement('div'); - mvH.className = "dndheaderelement"; - mvH.style.width = "50px"; - var text = document.createElement('span'); - text.textContent = "Order"; - mvH.appendChild(text); - preHeaderHolder.appendChild(mvH); - var idH = document.createElement('div'); - idH.className = "dndheaderelement"; - idH.style.width = "150px"; - text = document.createElement('span'); - text.textContent = "ID"; - idH.appendChild(text); - preHeaderHolder.appendChild(idH); - var tH = document.createElement('div'); - tH.className = "dndheaderelement"; - tH.style.width = "150px"; - text = document.createElement('span'); - text.textContent = "Type"; - tH.appendChild(text); - preHeaderHolder.appendChild(tH); - var editH = document.createElement('div'); - editH.className = "dndheaderelement"; - editH.style.width = "50px"; - text = document.createElement('span'); - text.textContent = "Edit"; - editH.appendChild(text); - preHeaderHolder.appendChild(editH); - var deleteH = document.createElement('div'); - deleteH.className = "dndheaderelement"; - deleteH.style.width = "50px"; - text = document.createElement('span'); - text.textContent = "Delete"; - deleteH.appendChild(text); - preHeaderHolder.appendChild(deleteH); - preHolder.appendChild(preHeaderHolder); - - - for (var i=0; i<specificationNode.preTest.options.length; i++) - { - var optionNode = specificationNode.preTest.options[i]; - var entry = document.createElement('div'); - entry.style.width = "456px"; - entry.style.height= "20px"; - entry.style.margin= "2px"; - entry.style.borderBottom = "#DDD"; - entry.style.borderBottomWidth = "1px"; - entry.style.borderBottomStyle = "solid"; - entry.setAttribute("node-id",i); - var node = specificationNode.preTest.options[i]; - var mvH = document.createElement('div'); - mvH.className = "dndheaderelement"; - mvH.style.width = "50px"; - var mvup = document.createElement("button"); - mvup.textContent = "Up"; - mvup.style.width = "25px"; - mvup.style.padding = "1px 0px"; - mvup.onclick = function() - { - var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); - if (i != 0) - { - var next = specificationNode.preTest.options[i-1]; - var cur = specificationNode.preTest.options[i]; - specificationNode.preTest.options[i-1] = cur; - specificationNode.preTest.options[i] = next; - popupInstance.state = 7; - popupInstance.advanceState(); - } - }; - mvH.appendChild(mvup); - var mvdn = document.createElement("button"); - mvdn.textContent = "Dn"; - mvdn.style.width = "25px"; - mvdn.style.padding = "1px 0px"; - mvdn.onclick = function() - { - var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); - if (i != specificationNode.preTest.options.length-1) - { - var next = specificationNode.preTest.options[i+1]; - var cur = specificationNode.preTest.options[i]; - specificationNode.preTest.options[i+1] = cur; - specificationNode.preTest.options[i] = next; - popupInstance.state = 7; - popupInstance.advanceState(); - } - }; - mvH.appendChild(mvdn); - entry.appendChild(mvH); - var idH = document.createElement('div'); - idH.className = "dndheaderelement"; - idH.style.width = "150px"; - if (optionNode.type != "statement") - { - var span = document.createElement('span'); - span.textContent = optionNode.id; - idH.appendChild(span); - } - entry.appendChild(idH); - var typeH = document.createElement('div'); - typeH.className = "dndheaderelement"; - typeH.style.width = "150px"; - var span = document.createElement('span'); - span.textContent = optionNode.type; - typeH.appendChild(span); - entry.appendChild(typeH); - var editH = document.createElement('div'); - editH.className = "dndheaderelement"; - editH.style.width = "50px"; - var editButton = document.createElement("button"); - editButton.textContent = "Edit"; - editButton.style.width = "48px"; - editButton.style.padding = "1px 0px"; - editButton.onclick = function() - { - var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); - popupInstance.dataTransfer = new function() { - this.title = "Edit Test Node"; - this.parent = specificationNode.preTest; - this.node = this.parent.options[i]; - this.previousState = 7; - }; - popupInstace.state = 6; - popupInstance.advanceState(); - }; - editH.appendChild(editButton); - entry.appendChild(editH); - var deleteH = document.createElement('div'); - deleteH.className = "dndheaderelement"; - deleteH.style.width = "50px"; - var deleteButton = document.createElement("button"); - deleteButton.textContent = "Del"; - deleteButton.style.width = "48px"; - deleteButton.style.padding = "1px 0px"; - deleteButton.onclick = function() - { - var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); - var j = i+1; - while(j < specificationNode.preTest.options.length) - { - specificationNode.preTest.options[i] = specificationNode.preTest.options[j]; - j++; - i++; - } - specificationNode.preTest.options.pop(); - popupInstance.state = 7; - popupInstance.advanceState(); - }; - deleteH.appendChild(deleteButton); - entry.appendChild(deleteH); - preHolder.appendChild(entry); - } - var entry = document.createElement('div'); - entry.style.width = "456px"; - entry.style.height= "20px"; - entry.style.margin= "2px"; - entry.style.borderBottom = "#DDD"; - entry.style.borderBottomWidth = "1px"; - entry.style.borderBottomStyle = "solid"; - entry.align = "center"; - var addPre = document.createElement('button'); - addPre.className = "popupButton"; - addPre.textContent = "Add New Entry"; - addPre.style.height = "20px"; - addPre.onclick = function() - { - popupInstance.dataTransfer = new function() { - this.title = "New Pre Test Node"; - this.parent = specificationNode.preTest; - this.node = null; - this.previousState = 7; - }; - popupInstance.state = 6; - popupInstance.advanceState(); - }; - entry.appendChild(addPre); - preHolder.appendChild(entry); - - var span = document.createElement('span'); - span.textContent = "Add your post test page options here"; - this.popupBody.appendChild(span); - var postHolder = document.createElement('div'); - postHolder.id = "preHolder"; - postHolder.style.width = "100%"; - postHolder.style.minHeight = "100px"; - postHolder.style.maxHeight = "220px"; - postHolder.style.overflow = 'auto'; - postHolder.style.border = "black"; - postHolder.style.borderStyle = "solid"; - postHolder.style.borderWidth = "1px"; - this.popupBody.appendChild(postHolder); - var postHeaderHolder = document.createElement('div'); - postHeaderHolder.style.width = "456px"; - postHeaderHolder.style.height= "20px"; - postHeaderHolder.style.margin= "2px"; - postHeaderHolder.style.borderBottom = "#DDD"; - postHeaderHolder.style.borderBottomWidth = "1px"; - postHeaderHolder.style.borderBottomStyle = "solid"; - var mvH = document.createElement('div'); - mvH.className = "dndheaderelement"; - mvH.style.width = "50px"; - var text = document.createElement('span'); - text.textContent = "Order"; - mvH.appendChild(text); - postHeaderHolder.appendChild(mvH); - var idH = document.createElement('div'); - idH.className = "dndheaderelement"; - idH.style.width = "150px"; - text = document.createElement('span'); - text.textContent = "ID"; - idH.appendChild(text); - postHeaderHolder.appendChild(idH); - var tH = document.createElement('div'); - tH.className = "dndheaderelement"; - tH.style.width = "150px"; - text = document.createElement('span'); - text.textContent = "Type"; - tH.appendChild(text); - postHeaderHolder.appendChild(tH); - var editH = document.createElement('div'); - editH.className = "dndheaderelement"; - editH.style.width = "50px"; - text = document.createElement('span'); - text.textContent = "Edit"; - editH.appendChild(text); - postHeaderHolder.appendChild(editH); - var deleteH = document.createElement('div'); - deleteH.className = "dndheaderelement"; - deleteH.style.width = "50px"; - text = document.createElement('span'); - text.textContent = "Delete"; - deleteH.appendChild(text); - postHeaderHolder.appendChild(deleteH); - postHolder.appendChild(postHeaderHolder); - - for (var i=0; i<specificationNode.postTest.options.length; i++) - { - var optionNode = specificationNode.postTest.options[i]; - var entry = document.createElement('div'); - entry.style.width = "456px"; - entry.style.height= "20px"; - entry.style.margin= "2px"; - entry.style.borderBottom = "#DDD"; - entry.style.borderBottomWidth = "1px"; - entry.style.borderBottomStyle = "solid"; - entry.setAttribute("node-id",i); - var node = specificationNode.postTest.options[i]; - var mvH = document.createElement('div'); - mvH.className = "dndheaderelement"; - mvH.style.width = "50px"; - var mvup = document.createElement("button"); - mvup.textContent = "Up"; - mvup.style.width = "25px"; - mvup.style.padding = "1px 0px"; - mvup.onclick = function() - { - var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); - if (i != 0) - { - var next = specificationNode.postTest.options[i-1]; - var cur = specificationNode.postTest.options[i]; - specificationNode.postTest.options[i-1] = cur; - specificationNode.postTest.options[i] = next; - popupInstance.state = 7; - popupInstance.advanceState(); - } - }; - mvH.appendChild(mvup); - var mvdn = document.createElement("button"); - mvdn.textContent = "Dn"; - mvdn.style.width = "25px"; - mvdn.style.padding = "1px 0px"; - mvdn.onclick = function() - { - var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); - if (i != specificationNode.postTest.options.length-1) - { - var next = specificationNode.postTest.options[i+1]; - var cur = specificationNode.postTest.options[i]; - specificationNode.postTest.options[i+1] = cur; - specificationNode.postTest.options[i] = next; - popupInstance.state = 7; - popupInstance.advanceState(); - } - }; - mvH.appendChild(mvdn); - entry.appendChild(mvH); - var idH = document.createElement('div'); - idH.className = "dndheaderelement"; - idH.style.width = "150px"; - if (optionNode.type != "statement") - { - var span = document.createElement('span'); - span.textContent = optionNode.id; - idH.appendChild(span); - } - entry.appendChild(idH); - var typeH = document.createElement('div'); - typeH.className = "dndheaderelement"; - typeH.style.width = "150px"; - var span = document.createElement('span'); - span.textContent = optionNode.type; - typeH.appendChild(span); - entry.appendChild(typeH); - var editH = document.createElement('div'); - editH.className = "dndheaderelement"; - editH.style.width = "50px"; - var editButton = document.createElement("button"); - editButton.textContent = "Edit"; - editButton.style.width = "48px"; - editButton.style.padding = "1px 0px"; - editButton.onclick = function() - { - var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); - popupInstance.dataTransfer = new function() { - this.title = "Edit Test Node"; - this.parent = specificationNode.postTest; - this.node = this.parent.options[i]; - this.previousState = 7; - }; - popupInstance.state = 6; - popupInstance.advanceState(); - }; - editH.appendChild(editButton); - entry.appendChild(editH); - var deleteH = document.createElement('div'); - deleteH.className = "dndheaderelement"; - deleteH.style.width = "50px"; - var deleteButton = document.createElement("button"); - deleteButton.textContent = "Del"; - deleteButton.style.width = "48px"; - deleteButton.style.padding = "1px 0px"; - deleteButton.onclick = function() - { - var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); - var j = i+1; - while(j < specificationNode.postTest.options.length) - { - specificationNode.postTest.options[i] = specificationNode.postTest.options[j]; - j++; - i++; - } - audioHolder.postTest.options.pop(); - popupInstance.state = 7; - popupInstance.advanceState(); - }; - deleteH.appendChild(deleteButton); - entry.appendChild(deleteH); - postHolder.appendChild(entry); - } - - var entry = document.createElement('div'); - entry.style.width = "456px"; - entry.style.height= "20px"; - entry.style.margin= "2px"; - entry.style.borderBottom = "#DDD"; - entry.style.borderBottomWidth = "1px"; - entry.style.borderBottomStyle = "solid"; - entry.align = "center"; - var addPost = document.createElement('button'); - addPost.className = "popupButton"; - addPost.textContent = "Add New Entry"; - addPost.style.height = "20px"; - addPost.onclick = function() - { - popupInstance.dataTransfer = new function() { - this.title = "New Pre Test Node"; - this.parent = specificationNode.postTest; - this.node = null; - this.previousState = 7; - }; - popupInstance.state = 6; - popupInstance.advanceState(); - }; - entry.appendChild(addPost); - postHolder.appendChild(entry); - - var button = document.createElement('button'); - button.id = 'submit'; - button.className = "popupButton"; - button.textContent = "Finish"; - button.onclick = function(event) - { - popupInstance.state = 8; - popupInstance.advanceState(); - }; - this.popupFooter.appendChild(button); - break; - case 8: - this.hidePopup(); - this.state = 0; - SpecificationToHTML (); - } - this.state++; - }; - }; - - function audioObject() - { - // Used to hold audio information in buffers for quick playback - this.bufferObject; - this.bufferNode = undefined; - this.state = 0; - this.gain = audioContext.createGain(); - this.gain.connect(audioContext.destination); - this.include = true; - this.id = undefined; - this.file = undefined; - - this.play = function() - { - if (this.bufferNode != undefined) - { - this.bufferNode.stop(0); - this.bufferNode = undefined; - } - if(this.state == 1) - { - this.bufferNode = audioContext.createBufferSource(); - this.bufferNode.connect(this.gain); - this.bufferNode.buffer = this.bufferObject; - this.bufferNode.onended = function(event) { - // Safari does not like using 'this' to reference the calling object! - event.currentTarget = undefined; - }; - this.bufferNode.start(audioContext.currentTime); - this.bufferNode.stop(audioContext.currentTime+3); - } - }; - - this.constructTrack = function(file) { - var reader = new FileReader(); - this.file = file; - var audioObj = this; - // Create callback to decode the data asynchronously - reader.onloadend = function() { - audioContext.decodeAudioData(reader.result, function(decodedData) { - audioObj.bufferObject = decodedData; - audioObj.state = 1; - }, function(){}); - }; - reader.readAsArrayBuffer(file); - }; - }; - - function Specification() { - // Handles the decoding of the project specification XML into a simple JavaScript Object. - - this.interfaceType = null; - this.commonInterface = new function() - { - this.options = []; - this.optionNode = function(input) - { - var name = input.getAttribute('name'); - this.type = name; - if(this.type == "option") - { - this.name = input.id; - } else if (this.type == "check") - { - this.check = input.id; - } - }; - }; - - this.randomiseOrder = function(input) - { - // This takes an array of information and randomises the order - var N = input.length; - - var inputSequence = []; // For safety purposes: keep track of randomisation - for (var counter = 0; counter < N; ++counter) - inputSequence.push(counter) // Fill array - var inputSequenceClone = inputSequence.slice(0); - - var holdArr = []; - var outputSequence = []; - for (var n=0; n<N; n++) - { - // First pick a random number - var r = Math.random(); - // Multiply and floor by the number of elements left - r = Math.floor(r*input.length); - // Pick out that element and delete from the array - holdArr.push(input.splice(r,1)[0]); - // Do the same with sequence - outputSequence.push(inputSequence.splice(r,1)[0]); - } - console.log(inputSequenceClone.toString()); // print original array to console - console.log(outputSequence.toString()); // print randomised array to console - return holdArr; - }; - this.projectReturn = null; - this.randomiseOrder = null; - this.collectMetrics = null; - this.testPages = null; - this.audioHolders = []; - this.metrics = []; - - this.decode = function(projectXML) { - // projectXML - DOM Parsed document - this.projectXML = projectXML.childNodes[0]; - var setupNode = projectXML.getElementsByTagName('setup')[0]; - this.interfaceType = setupNode.getAttribute('interface'); - this.projectReturn = setupNode.getAttribute('projectReturn'); - this.testPages = setupNode.getAttribute('testPages'); - if (setupNode.getAttribute('randomiseOrder') == "true") { - this.randomiseOrder = true; - } else {this.randomiseOrder = false;} - if (setupNode.getAttribute('collectMetrics') == "true") { - this.collectMetrics = true; - } else {this.collectMetrics = false;} - if (isNaN(Number(this.testPages)) || this.testPages == undefined) - { - this.testPages = null; - } else { - this.testPages = Number(this.testPages); - if (this.testPages == 0) {this.testPages = null;} - } - var metricCollection = setupNode.getElementsByTagName('Metric'); - - 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'); - for (var i=0; i<metricCollection.length; i++) { - this.metrics.push(new this.metricNode(metricCollection[i].textContent)); - } - } - - var commonInterfaceNode = setupNode.getElementsByTagName('interface'); - if (commonInterfaceNode.length > 0) { - commonInterfaceNode = commonInterfaceNode[0]; - } else { - commonInterfaceNode = undefined; - } - - this.commonInterface = new function() { - this.OptionNode = function(child) { - this.type = child.nodeName; - if (this.type == 'option') - { - this.name = child.getAttribute('name'); - } - else if (this.type == 'check') { - this.check = child.getAttribute('name'); - if (this.check == 'scalerange') { - this.min = child.getAttribute('min'); - this.max = child.getAttribute('max'); - if (this.min == null) {this.min = 1;} - else if (Number(this.min) > 1 && this.min != null) { - this.min = Number(this.min)/100; - } else { - this.min = Number(this.min); - } - if (this.max == null) {this.max = 0;} - else if (Number(this.max) > 1 && this.max != null) { - this.max = Number(this.max)/100; - } else { - this.max = Number(this.max); - } - } - } else if (this.type == 'anchor' || this.type == 'reference') { - this.value = Number(child.textContent); - this.enforce = child.getAttribute('enforce'); - if (this.enforce == 'true') {this.enforce = true;} - else {this.enforce = false;} - } - }; - this.options = []; - if (commonInterfaceNode != undefined) { - var child = commonInterfaceNode.firstElementChild; - while (child != undefined) { - this.options.push(new this.OptionNode(child)); - child = child.nextElementSibling; - } - } - }; - - var audioHolders = projectXML.getElementsByTagName('audioHolder'); - for (var i=0; i<audioHolders.length; 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 - if (this.randomiseOrder && typeof randomiseOrder === "function") - { - this.audioHolders = randomiseOrder(this.audioHolders); - for (var i=0; i<this.audioHolders.length; i++) - { - this.audioHolders[i].presentedId = i; - } - } - - if (this.testPages != null || this.testPages != undefined) - { - if (this.testPages > audioHolders.length) - { - console.log('Warning: You have specified '+audioHolders.length+' tests but requested '+this.testPages+' be completed!'); - this.testPages = audioHolders.length; - } - var aH = this.audioHolders; - this.audioHolders = []; - for (var i=0; i<this.testPages; i++) - { - this.audioHolders.push(aH[i]); - } - } - }; - - this.encode = function() - { - var root = document.implementation.createDocument(null,"BrowserEvalProjectDocument"); - // First get all the <setup> tag compiled - var setupNode = root.createElement("setup"); - setupNode.setAttribute('interface',this.interfaceType); - setupNode.setAttribute('projectReturn',this.projectReturn); - setupNode.setAttribute('randomiseOrder',this.randomiseOrder); - setupNode.setAttribute('collectMetrics',this.collectMetrics); - setupNode.setAttribute('testPages',this.testPages); - - var setupPreTest = root.createElement("PreTest"); - for (var i=0; i<this.preTest.options.length; i++) - { - setupPreTest.appendChild(this.preTest.options[i].exportXML(root)); - } - - var setupPostTest = root.createElement("PostTest"); - for (var i=0; i<this.postTest.options.length; i++) - { - setupPostTest.appendChild(this.postTest.options[i].exportXML(root)); - } - - setupNode.appendChild(setupPreTest); - setupNode.appendChild(setupPostTest); - - // <Metric> tag - var Metric = root.createElement("Metric"); - for (var i=0; i<this.metrics.length; i++) - { - var metricEnable = root.createElement("metricEnable"); - metricEnable.textContent = this.metrics[i].enabled; - Metric.appendChild(metricEnable); - } - setupNode.appendChild(Metric); - - // <interface> tag - var CommonInterface = root.createElement("interface"); - for (var i=0; i<this.commonInterface.options.length; i++) - { - var CIObj = this.commonInterface.options[i]; - var CINode = root.createElement(CIObj.type); - if (CIObj.type == "check") {CINode.setAttribute("name",CIObj.check);} - else {CINode.setAttribute("name",CIObj.name);} - CommonInterface.appendChild(CINode); - } - setupNode.appendChild(CommonInterface); - - root.getElementsByTagName("BrowserEvalProjectDocument")[0].appendChild(setupNode); - // Time for the <audioHolder> tags - for (var ahIndex = 0; ahIndex < this.audioHolders.length; ahIndex++) - { - var node = this.audioHolders[ahIndex].encode(root); - root.getElementsByTagName("BrowserEvalProjectDocument")[0].appendChild(node); - } - return root; - }; - - this.prepostNode = function(type) { - this.type = type; - this.options = []; - - this.OptionNode = function() { - - this.childOption = function() { - this.type = 'option'; - this.id = null; - this.name = undefined; - this.text = null; - }; - - this.type = undefined; - this.id = undefined; - this.mandatory = undefined; - this.question = undefined; - this.statement = undefined; - this.boxsize = undefined; - this.options = []; - this.min = undefined; - 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); - switch(this.type) - { - case "statement": - node.textContent = this.statement; - break; - case "question": - node.id = this.id; - node.setAttribute("mandatory",this.mandatory); - node.setAttribute("boxsize",this.boxsize); - node.textContent = this.question; - break; - 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.textContent = this.statement; - break; - case "checkbox": - node.id = this.id; - var statement = root.createElement("statement"); - statement.textContent = this.statement; - node.appendChild(statement); - for (var i=0; i<this.options.length; i++) - { - var option = this.options[i]; - var optionNode = root.createElement("option"); - optionNode.id = option.id; - optionNode.textContent = option.text; - node.appendChild(optionNode); - } - break; - case "radio": - node.id = this.id; - var statement = root.createElement("statement"); - statement.textContent = this.statement; - node.appendChild(statement); - for (var i=0; i<this.options.length; i++) - { - var option = this.options[i]; - var optionNode = root.createElement("option"); - optionNode.setAttribute("name",option.name); - optionNode.textContent = option.text; - 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; - }; - - this.audioHolderNode = function(parent) { - this.type = 'audioHolder'; - this.presentedId = undefined; - this.id = undefined; - this.hostURL = undefined; - this.sampleRate = undefined; - this.randomiseOrder = undefined; - this.loop = undefined; - this.elementComments = undefined; - 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.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(); - node.decode(this,audioElementsDOM[i]); - if (audioElementsDOM[i].getAttribute('type') == 'outsidereference') { - if (this.outsideReference == null) { - this.outsideReference = node; - } else { - console.log('Error only one audioelement can be of type outsidereference per audioholder'); - this.audioElements.push(node); - console.log('Element id '+audioElementsDOM[i].id+' made into normal node'); - } - } else { - this.audioElements.push(node); - } - } - - if (this.randomiseOrder == true && typeof randomiseOrder === "function") - { - this.audioElements = randomiseOrder(this.audioElements); - } - - 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.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.name = undefined; - this.decode = function(DOM) - { - var title = DOM.getElementsByTagName('title'); - if (title.length == 0) {this.title = null;} - else {this.title = title[0].textContent;} - var name = DOM.getAttribute("name"); - if (name != undefined) {this.name = name;} - 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 = false; - this.enforce = false; - this.gain = 1.0; - this.decode = function(parent,xml) - { - this.url = xml.getAttribute('url'); - this.id = xml.id; - this.parent = parent; - this.type = xml.getAttribute('type'); - var gain = xml.getAttribute('gain'); - if (isNaN(gain) == false && gain != null) - { - this.gain = decibelToLinear(Number(gain)); - } - 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); - AENode.setAttribute("gain",linearToDecibel(this.gain)); - 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"); - CQNode.id = this.id; - CQNode.setAttribute("type",this.type); - switch(this.type) - { - case "text": - CQNode.textContent = this.question; - break; - case "radio": - var statement = root.createElement("statement"); - statement.textContent = this.statement; - CQNode.appendChild(statement); - for (var i=0; i<this.options.length; i++) - { - var optionNode = root.createElement("option"); - optionNode.setAttribute("name",this.options[i].name); - optionNode.textContent = this.options[i].text; - CQNode.appendChild(optionNode); - } - break; - case "checkbox": - var statement = root.createElement("statement"); - statement.textContent = this.statement; - CQNode.appendChild(statement); - for (var i=0; i<this.options.length; i++) - { - var optionNode = root.createElement("option"); - optionNode.setAttribute("name",this.options[i].name); - optionNode.textContent = this.options[i].text; - CQNode.appendChild(optionNode); - } - break; - } - return CQNode; - }; - 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; - } - }; - }; - }; - } - - function linearToDecibel(gain) - { - return 20.0*Math.log10(gain); - } - - function decibelToLinear(gain) - { - return Math.pow(10,gain/20.0); - } - - function createDeleteNodeButton(node) - { - var button = document.createElement("button"); - button.textContent = "Delete"; - button.onclick = function(event) - { - var node = event.target.parentElement; - node.parentElement.removeChild(node); - }; - return button; - } - - function SpecificationToHTML() - { - // Take information from Specification Node and format it into an HTML layout - var destination = document.getElementById("content"); - // Setup Header Node - var setupNode = document.createElement("div"); - setupNode.className = "topLevel"; - setupNode.name = "setup"; - var title = document.createElement("h2"); - title.textContent = "Setup"; - setupNode.appendChild(title); - // Interface Type - var div = document.createElement("div"); - div.name = "attributes"; - div.style.margin = "5px"; - var select = document.createElement("select"); - select.id = "interfaceSelect"; - select.style.margin = "5px"; - var option = document.createElement("option"); - option.value = "APE"; - option.textContent = "APE"; - select.appendChild(option); - option = document.createElement("option"); - option.value = "MUSHRA"; - option.textContent = "MUSHRA"; - select.appendChild(option); - select.value = specificationNode.interfaceType; - select.onchange = function(event) - { - specificationNode.interfaceType = event.currentTarget.value; - }; - var span = document.createElement("span"); - span.textContent = "Interface Type"; - div.appendChild(span); - div.appendChild(select); - // Project Return Attribute - span = document.createElement("span"); - span.style.margin = "5px"; - span.textContent = "Project Return"; - var input = document.createElement("input"); - input.value = specificationNode.projectReturn; - input.id = "projectReturn"; - input.style.margin = "5px"; - input.onchange = function(event) { - specificationNode.projectReturn = event.currentTarget.value; - }; - div.appendChild(span); - div.appendChild(input); - // Randomise Order - span = document.createElement("span"); - span.textContent = "Randomise Order"; - input = document.createElement("input"); - input.id = "randomiseOrder"; - input.style.margin = "5px"; - input.type = "checkbox"; - input.checked = specificationNode.randomiseOrder; - input.onchange = function(event) { - specificationNode.randomiseOrder = event.currentTarget.checked; - }; - div.appendChild(span); - div.appendChild(input); - setupNode.appendChild(div); - - // Now create the common Interface Node - var commonInterface = document.createElement("div"); - commonInterface.id = "interface"; - commonInterface.className = "SecondLevel"; - var title = document.createElement("h3"); - title.textContent = "Common Interface"; - commonInterface.appendChild(title); - var div = document.createElement("div"); - div.name = "attributes"; - var interfaceOptions; - var interfaceChecks; - switch(select.value) - { - case "APE": - interfaceOptions = APEInterfaceOptions; - interfaceChecks = APEInterfaceChecks; - break; - case "MUSHRA": - interfaceOptions = MUSHRAInterfaceOptions; - interfaceChecks = MUSHRAInterfaceChecks; - break; - } - for (var i=0; i<interfaceOptions[0].length; i++) - { - var span = document.createElement("span"); - span.textContent = interfaceOptions[1][i]; - var input = document.createElement("input"); - input.type = "checkbox"; - input.id = interfaceOptions[0][i]; - input.setAttribute("name", "option"); - div.appendChild(input); - div.appendChild(span); - commonInterface.appendChild(div); - for (var j=0; j<specificationNode.commonInterface.options.length; j++) - { - if (specificationNode.commonInterface.options[j].name == interfaceOptions[0][i]) - { - input.checked = true; - break; - } - } - input.onchange = function(event) { - var id = event.currentTarget.id; - if (event.currentTarget.checked) { - specificationNode.commonInterface.options.push(new specificationNode.commonInterface.optionNode(event.currentTarget)); - } else { - for (var j=0; j<specificationNode.commonInterface.options.length; j++) - { - if (specificationNode.commonInterface.options[j].name == event.currentTarget.id) - { - specificationNode.commonInterface.options.splice(j,1); - break; - } - } - } - }; - } - for (var i=0; i<interfaceChecks[0].length; i++) - { - var span = document.createElement("span"); - span.textContent = interfaceChecks[1][i]; - var input = document.createElement("input"); - input.type = "checkbox"; - input.id = interfaceChecks[0][i]; - input.setAttribute("name", "check"); - div.appendChild(input); - div.appendChild(span); - commonInterface.appendChild(div); - for (var j=0; j<specificationNode.commonInterface.options.length; j++) - { - if (specificationNode.commonInterface.options[j].check == interfaceChecks[0][i]) - { - input.checked = true; - break; - } - } - input.onchange = function(event) { - var id = event.currentTarget.id; - if (event.currentTarget.checked) { - specificationNode.commonInterface.options.push(new specificationNode.commonInterface.optionNode(event.currentTarget)); - } else { - for (var j=0; j<specificationNode.commonInterface.options.length; j++) - { - if (specificationNode.commonInterface.options[j].name == event.currentTarget.id) - { - specificationNode.commonInterface.options.splice(j,1); - break; - } - } - } - }; - } - setupNode.appendChild(commonInterface); - // Now the Metric Node - var metrics = document.createElement("div"); - metrics.id = "metrics"; - metrics.className = "SecondLevel"; - var title = document.createElement("h3"); - title.textContent = "Metric Collections"; - metrics.appendChild(title); - var div = document.createElement("div"); - div.name = "attributes"; - metrics.appendChild(div); - var supportedMetrics; - switch(select.value) - { - case "APE": - supportedMetrics = APEInterfaceMetrics; - break; - case "MUSHRA": - supportedMetrics = MUSHRAInterfaceMetrics; - break; - } - - for (var i=0; i<supportedMetrics[0].length; i++) - { - var span = document.createElement("span"); - span.textContent = supportedMetrics[1][i]; - var input = document.createElement("input"); - input.type = "checkbox"; - input.id = supportedMetrics[0][i]; - div.appendChild(input); - div.appendChild(span); - for (var j=0; j<specificationNode.metrics.length; j++) - { - if (specificationNode.metrics[j].enabled == supportedMetrics[0][i]) - { - input.checked = true; - } - } - input.onchange = function(event) - { - if (event.currentTarget.checked) { - specificationNode.metrics.push(new specificationNode.metricNode(event.currentTarget.id)); - } else { - for (var j=0; j<specificationNode.metrics.length; j++) - { - if (specificationNode.metrics[j].enabled == event.currentTarget.id) - { - specificationNode.metrics.splice(j,1); - break; - } - } - } - }; - } - - setupNode.appendChild(metrics); - - // Test Session Pre Test - var preTest = document.createElement("div"); - preTest.id = "preTest"; - preTest.className = "SecondLevel"; - var title = document.createElement("h3"); - title.textContent = "Pre test Survey"; - preTest.appendChild(title); - var div = document.createElement("div"); - div.name = "attributes"; - for (var j=0; j<specificationNode.preTest.options.length; j++) - { - var node = PPSurveyToHTML(specificationNode.preTest.options[j]); - node.className = "SecondLevel"; - node.id = preTest.id+"-"+j; - var del_button = document.createElement("button"); - del_button.textContent = "Delete"; - del_button.onclick = function(event) { - var node = event.currentTarget.parentElement; - var id = node.id.split("-")[1]; - specificationNode.preTest.options.splice(id,1); - node.parentElement.removeChild(node); - }; - node.appendChild(del_button); - preTest.appendChild(node); - } - setupNode.appendChild(preTest); - - // Test Session Post Test - var postTest = document.createElement("div"); - postTest.id = "postTest"; - postTest.className = "SecondLevel"; - var title = document.createElement("h3"); - title.textContent = "Post test Survey"; - postTest.appendChild(title); - var div = document.createElement("div"); - div.name = "attributes"; - - for (var j=0; j<specificationNode.postTest.options.length; j++) - { - var node = PPSurveyToHTML(specificationNode.postTest.options[j]); - node.className = "SecondLevel"; - node.id = postTest.id+"-"+j; - var del_button = document.createElement("button"); - del_button.textContent = "Delete"; - del_button.onclick = function(event) { - var node = event.currentTarget.parentElement; - var id = node.id.split("-")[1]; - specificationNode.postTest.options.splice(id,1); - node.parentElement.removeChild(node); - }; - node.appendChild(del_button); - postTest.appendChild(node); - } - - setupNode.appendChild(postTest); - - destination.appendChild(setupNode); - - // Now we step through the AudioHolders - for (var i=0; i<specificationNode.audioHolders.length; i++) - { - var aH = specificationNode.audioHolders[i]; - var aHTML = document.createElement("div"); - aHTML.name = "audioHolder"; - aHTML.id = "audioHolder-"+i; - aHTML.className = "topLevel"; - aHTML.appendChild(createDeleteNodeButton()); - destination.appendChild(aHTML); - var title = document.createElement("h2"); - title.textContent = "Audio Holder "+aH.id; - aHTML.appendChild(title); - var attributes = document.createElement("div"); - attributes.name = "attributes"; - aHTML.appendChild(attributes); - var text = document.createElement("span"); - text.textContent = "ID: "; - var input = document.createElement("input"); - input.id = aHTML.id+"-id"; - input.value = aH.id; - input.onchange = function() - { - var IDSplit = event.currentTarget.id.split('-'); - var aholderID = IDSplit[0]+"-"+IDSplit[1]; - var aholder = document.getElementById(aholderID); - title = aholder.getElementsByTagName("h2")[0]; - title.textContent = "Audio Holder "+event.currentTarget.value; - specificationNode.audioHolders[IDSplit[1]].id = event.currentTarget.value; - }; - text.style.margin = "5px"; - input.style.margin = "5px"; - attributes.appendChild(text); - attributes.appendChild(input); - text = document.createElement("span"); - text.textContent = "Host URL: "; - input = document.createElement("input"); - input.id = aHTML.id+"-hostURL"; - input.value = aH.hostURL; - input.onchange = function() - { - var IDSplit = event.currentTarget.id.split('-'); - specificationNode.audioHolders[IDSplit[1]].hostURL = event.currentTarget.value; - }; - text.style.margin = "5px"; - input.style.margin = "5px"; - attributes.appendChild(text); - attributes.appendChild(input); - text = document.createElement("span"); - text.textContent = "Loop Fragments: "; - input = document.createElement("input"); - input.id = aHTML.id+"-loop"; - input.type = "checkbox"; - input.checked = aH.loop; - input.onchange = function() - { - var IDSplit = event.currentTarget.id.split('-'); - specificationNode.audioHolders[IDSplit[1]].loop = event.currentTarget.checked; - }; - text.style.margin = "5px"; - input.style.margin = "5px"; - attributes.appendChild(text); - attributes.appendChild(input); - text = document.createElement("span"); - text.textContent = "Randomise Order: "; - input = document.createElement("input"); - input.id = aHTML.id+"-randomiseOrder"; - input.type = "checkbox"; - input.checked = aH.randomiseOrder; - input.onchange = function() - { - var IDSplit = event.currentTarget.id.split('-'); - specificationNode.audioHolders[IDSplit[1]].randomiseOrder = event.currentTarget.checked; - }; - text.style.margin = "5px"; - input.style.margin = "5px"; - attributes.appendChild(text); - attributes.appendChild(input); - text = document.createElement("span"); - text.textContent = "Show Fragment Comments"; - input = document.createElement("input"); - input.id = aHTML.id+"-elementComments"; - input.type = "checkbox"; - input.checked = aH.elementComments; - input.onchange = function() - { - var IDSplit = event.currentTarget.id.split('-'); - specificationNode.audioHolders[IDSplit[1]].elementComments = event.currentTarget.checked; - }; - text.style.margin = "5px"; - input.style.margin = "5px"; - attributes.appendChild(text); - attributes.appendChild(input); - - // Test Session Pre Test - var preTest = document.createElement("div"); - preTest.id = aHTML.id+"-pretest"; - preTest.className = "SecondLevel"; - var title = document.createElement("h3"); - title.textContent = "Pre test Survey"; - preTest.appendChild(title); - var div = document.createElement("div"); - div.name = "attributes"; - - for (var j=0; j<aH.preTest.options.length; j++) - { - var node = PPSurveyToHTML(aH.preTest.options[j]); - node.className = "SecondLevel"; - node.id = preTest.id+"-"+j; - var button_delete = document.createElement("button"); - button_delete.textContent = "Delete"; - button_delete.onclick = function(event) - { - var node = event.currentTarget.parentElement; - var IDSplit = node.id.split("-"); - var preTest = specificationNode.audioHolders[IDSplit[1]].preTest; - preTest.options.splice(IDSplit[3],1); - node.parentElement.removeChild(node); - }; - node.appendChild(button_delete); - preTest.appendChild(node); - } - - aHTML.appendChild(preTest); - - // Test Session Post Test - var postTest = document.createElement("div"); - postTest.id = aHTML.id+"-postTest"; - postTest.className = "SecondLevel"; - var title = document.createElement("h3"); - title.textContent = "Post test Survey"; - postTest.appendChild(title); - var div = document.createElement("div"); - div.name = "attributes"; - - for (var j=0; j<aH.postTest.options.length; j++) - { - var node = PPSurveyToHTML(aH.postTest.options[j]); - node.className = "SecondLevel"; - node.id = postTest.id+"-"+j; - var button_delete = document.createElement("button"); - button_delete.textContent = "Delete"; - button_delete.onclick = function(event) - { - var node = event.currentTarget.parentElement; - var IDSplit = node.id.split("-"); - var postTest = specificationNode.audioHolders[IDSplit[1]].postTest; - postTest.options.splice(IDSplit[3],1); - node.parentElement.removeChild(node); - }; - node.appendChild(button_delete); - postTest.appendChild(node); - } - - aHTML.appendChild(postTest); - - //Audio Elements - var audioElems = document.createElement("div"); - audioElems.id = aHTML.id+"-audioElements"; - audioElems.className = "SecondLevel"; - var title = document.createElement("h3"); - title.textContent = "Audio Elements"; - audioElems.appendChild(title); - for (var j=0; j<aH.audioElements.length; j++) - { - var entry = document.createElement("div"); - entry.className = "SecondLevel"; - entry.id = audioElems.id+"-"+aH.audioElements[j].id; - var text = document.createElement("span"); - text.textContent = "ID:"; - var input = document.createElement("input"); - input.id = entry.id+"-id"; - input.value = aH.audioElements[j].id; - input.onchange = function() { - var IDSplit = event.currentTarget.id.split("-"); - var ahNode = specificationNode.audioHolders[IDSplit[1]]; - ahNode.audioElements[IDSplit[3]].id = event.currentTarget.value; - }; - text.style.margin = "5px"; - input.style.margin = "5px"; - entry.appendChild(text); - entry.appendChild(input); - text = document.createElement("span"); - text.textContent = "URL:"; - input = document.createElement("input"); - input.id = entry.id+"-URL"; - input.value = aH.audioElements[j].url; - input.onchange = function() { - var IDSplit = event.currentTarget.id.split("-"); - var ahNode = specificationNode.audioHolders[IDSplit[1]]; - ahNode.audioElements[IDSplit[3]].url = event.currentTarget.value; - }; - text.style.margin = "5px"; - input.style.margin = "5px"; - entry.appendChild(text); - entry.appendChild(input); - text = document.createElement("span"); - text.textContent = "Gain:"; - input = document.createElement("input"); - input.type = "range"; - input.id = entry.id+"-gain"; - input.value = aH.audioElements[j].gain; - input.min = -25; - input.max = 6; - input.step = 1; - input.onchange = function() { - var IDSplit = event.currentTarget.id.split("-"); - var ahNode = specificationNode.audioHolders[IDSplit[1]]; - ahNode.audioElements[IDSplit[3]].gain = decibelToLinear(Number(event.currentTarget.value)); - var textRet = document.getElementById(event.currentTarget.id+"-ret"); - textRet.textContent = String(event.currentTarget.value)+"dB"; - }; - var textRet = document.createElement("span"); - textRet.textContent = String(linearToDecibel(aH.audioElements[j].gain))+"dB"; - textRet.id = entry.id+"-gain-ret"; - text.style.margin = "5px"; - input.style.margin = "5px"; - entry.appendChild(text); - entry.appendChild(input); - entry.appendChild(textRet); - var button_delete = document.createElement("button"); - button_delete.textContent = "Delete"; - button_delete.onclick = function() { - var node = event.currentTarget.parentElement; - var IDSplit = node.id.split("-"); - var ahNode = specificationNode.audioHolders[IDSplit[1]]; - ahNode.audioElements.splice(IDSplit[3],1); - node.parentElement.removeChild(node); - }; - entry.appendChild(button_delete); - audioElems.appendChild(entry); - } - aHTML.appendChild(audioElems); - } - - function PPSurveyToHTML(node) - { - var holder = document.createElement("div"); - var title = document.createElement("h4"); - holder.appendChild(title); - var attributes = document.createElement("div"); - holder.appendChild(attributes); - switch(node.type) - { - case "statement": - title.textContent = "Statement"; - var tA = document.createElement("textarea"); - attributes.style.height = "150px"; - tA.style.width = "500px"; - tA.style.height = "100px"; - tA.value = node.statement; - attributes.appendChild(tA); - break; - case "question": - title.textContent = "Question"; - var text = document.createElement("span"); - text.textContent = "ID :"; - var input = document.createElement("input"); - input.name = "id"; - input.value = node.id; - text.style.margin = "5px"; - input.style.margin = "5px"; - attributes.appendChild(text); - attributes.appendChild(input); - text = document.createElement("span"); - text.textContent = "Question"; - input = document.createElement("input"); - input.name = "question"; - input.style.width = "400px"; - input.value = node.question; - text.style.margin = "5px"; - input.style.margin = "5px"; - attributes.appendChild(text); - attributes.appendChild(input); - text = document.createElement("span"); - text.textContent = "Mandatory"; - input = document.createElement("input"); - input.name = "mandatory"; - input.type = "checkbox"; - input.checked = node.mandatory; - text.style.margin = "5px"; - input.style.margin = "5px"; - attributes.appendChild(text); - attributes.appendChild(input); - text = document.createElement("span"); - text.textContent = "Reply box size"; - input = document.createElement("select"); - input.name = "boxsize"; - var option = document.createElement("option"); - option.textContent = "Normal"; - option.value = "normal"; - input.appendChild(option); - option = document.createElement("option"); - option.textContent = "Large"; - option.value = "large"; - input.appendChild(option); - option = document.createElement("option"); - option.textContent = "Small"; - option.value = "small"; - input.appendChild(option); - option = document.createElement("option"); - option.textContent = "Huge"; - option.value = "huge"; - input.appendChild(option); - text.style.margin = "5px"; - input.style.margin = "5px"; - attributes.appendChild(text); - attributes.appendChild(input); - input.value = node.boxsize; - break; - } - return holder; - } - } - function exportToXML() - { - var xmlDoc = specificationNode.encode(); - var oSerializer = new XMLSerializer(); - xmlDoc = oSerializer.serializeToString(xmlDoc); - var parent = document.createElement("div"); - var file = [xmlDoc]; - var bb = new Blob(file,{type : 'application/xml'}); - var dnlk = window.URL.createObjectURL(bb); - var a = document.createElement("a"); - a.hidden = ''; - a.href = dnlk; - a.download = "save.xml"; - a.textContent = "Save File"; - - popupInstance.showPopup(); - popupInstance.popupBody.innerHTML = null; - var body = document.createElement("span"); - body.textContent = "Right click and save the file using the link below. Place this file in your WAET directory as 'project.xml' in the example_eval/ directory. Place your media files in the location specified by the Host URL entries. If you wish to review this XML or edit it, refresh this tool and drag your XML document into the page on the welcome screen."; - popupInstance.popupBody.appendChild(body); - popupInstance.popupBody.appendChild(a); - popupInstance.popupTitle.innerHTML = "<span>Thank You</span>"; - } - </script> - <style> - div.popup { - width: 500px; - position: absolute; - height: 400px; - background-color: #fff; - border-radius: 10px; - box-shadow: 0px 0px 50px #000; - z-index: 2; - } - - button.popupButton { - /* Button for popup window - */ - min-width: 50px; - height: 25px; - position: relative; - border-radius: 5px; - border: #444; - border-width: 1px; - border-style: solid; - background-color: #fff; - } - - div.dragndrop { - margin-top: 10px; - border:#000000; - border-style: dashed; - border-width: 2px; - } - div.dndheaderelement { - float: left; - height: 100%; - border-right: #DDDDDD; - border-right-width: 1px; - border-right-style: solid; - } - div.dndheaderelement span{ - padding-left: 5px; - } - - div.topLevel { - border: #000; - border-style: solid; - border-width: 5px; - padding: 10px; - margin: 10px; - } - - div.SecondLevel { - border: #000; - border-style: solid; - border-width: 1px; - padding: 10px; - margin: 10px; - } - </style> - </head> - - <body> - <div id="export"> - <button id="exportToXML" onclick="exportToXML();">Export XML</button> - </div> - <div id="content"></div> - </body> -</html> +<html> +<head> + <!-- This defines the test creator tool for the Web Audio Evaluation Toolbox --> + <link rel='stylesheet' type="text/css" href="style.css"/> + <script type="text/javascript"> + // Copy of Specifiation node from Core.js + function Specification() { + // Handles the decoding of the project specification XML into a simple JavaScript Object. + + this.interface = null; + this.projectReturn = null; + this.randomiseOrder = null; + this.testPages = null; + this.pages = []; + this.metrics = null; + this.interfaces = null; + this.loudness = null; + this.errors = []; + this.schema = null; + + this.randomiseOrder = function(input) + { + // This takes an array of information and randomises the order + var N = input.length; + + var inputSequence = []; // For safety purposes: keep track of randomisation + for (var counter = 0; counter < N; ++counter) + inputSequence.push(counter) // Fill array + var inputSequenceClone = inputSequence.slice(0); + + var holdArr = []; + var outputSequence = []; + for (var n=0; n<N; n++) + { + // First pick a random number + var r = Math.random(); + // Multiply and floor by the number of elements left + r = Math.floor(r*input.length); + // Pick out that element and delete from the array + holdArr.push(input.splice(r,1)[0]); + // Do the same with sequence + outputSequence.push(inputSequence.splice(r,1)[0]); + } + console.log(inputSequenceClone.toString()); // print original array to console + console.log(outputSequence.toString()); // print randomised array to console + return holdArr; + }; + + this.processAttribute = function(attribute,schema) + { + // attribute is the string returned from getAttribute on the XML + // schema is the <xs:attribute> node + if (schema.getAttribute('name') == undefined && schema.getAttribute('ref') != undefined) + { + schema = this.schema.getAllElementsByName(schema.getAttribute('ref'))[0]; + } + var defaultOpt = schema.getAttribute('default'); + if (attribute == null) { + attribute = defaultOpt; + } + var dataType = schema.getAttribute('type'); + if (typeof dataType == "string") { dataType = dataType.substr(3);} + else {dataType = "string";} + if (attribute == null) + { + return attribute; + } + switch(dataType) + { + case "boolean": + if (attribute == 'true'){attribute = true;}else{attribute=false;} + break; + case "negativeInteger": + case "positiveInteger": + case "nonNegativeInteger": + case "nonPositiveInteger": + case "integer": + case "decimal": + case "short": + attribute = Number(attribute); + break; + case "string": + default: + attribute = String(attribute); + break; + } + return attribute; + }; + + this.decode = function(projectXML) { + this.errors = []; + // projectXML - DOM Parsed document + this.projectXML = projectXML.childNodes[0]; + var setupNode = projectXML.getElementsByTagName('setup')[0]; + var schemaSetup = this.schema.getAllElementsByName('setup')[0]; + // First decode the attributes + var attributes = schemaSetup.getAllElementsByTagName('xs:attribute'); + for (var i in attributes) + { + if (isNaN(Number(i)) == true){break;} + var attributeName = attributes[i].getAttribute('name'); + var projectAttr = setupNode.getAttribute(attributeName); + projectAttr = this.processAttribute(projectAttr,attributes[i]); + switch(typeof projectAttr) + { + case "number": + case "boolean": + eval('this.'+attributeName+' = '+projectAttr); + break; + case "string": + eval('this.'+attributeName+' = "'+projectAttr+'"'); + break; + } + + } + + this.metrics = new this.metricNode(); + + this.metrics.decode(this,setupNode.getElementsByTagName('metric')[0]); + + // Now process the survey node options + var survey = setupNode.getElementsByTagName('survey'); + for (var i in survey) { + if (isNaN(Number(i)) == true){break;} + var location = survey[i].getAttribute('location'); + if (location == 'pre' || location == 'before') + { + if (this.preTest != null){this.errors.push("Already a pre/before test survey defined! Ignoring second!!");} + else { + this.preTest = new this.surveyNode(); + this.preTest.decode(this,survey[i]); + } + } else if (location == 'post' || location == 'after') { + if (this.postTest != null){this.errors.push("Already a post/after test survey defined! Ignoring second!!");} + else { + this.postTest = new this.surveyNode(); + this.postTest.decode(this,survey[i]); + } + } + } + + var interfaceNode = setupNode.getElementsByTagName('interface'); + if (interfaceNode.length > 1) + { + this.errors.push("Only one <interface> node in the <setup> node allowed! Others except first ingnored!"); + } + this.interfaces = new this.interfaceNode(); + if (interfaceNode.length != 0) + { + interfaceNode = interfaceNode[0]; + this.interfaces.decode(this,interfaceNode,this.schema.getAllElementsByName('interface')[1]); + } + + // Page tags + var pageTags = projectXML.getElementsByTagName('page'); + var pageSchema = this.schema.getAllElementsByName('page')[0]; + for (var i=0; i<pageTags.length; i++) + { + var node = new this.page(); + node.decode(this,pageTags[i],pageSchema); + this.pages.push(node); + } + }; + + this.encode = function() + { + var root = document.implementation.createDocument(null,"waet"); + + // Build setup node + + return root; + }; + + this.surveyNode = function() { + this.location = null; + this.options = []; + this.schema = specification.schema.getAllElementsByName('survey')[0]; + + this.OptionNode = function() { + this.type = undefined; + this.schema = specification.schema.getAllElementsByName('surveyentry')[0]; + this.id = undefined; + this.mandatory = undefined; + this.statement = undefined; + this.boxsize = undefined; + this.options = []; + this.min = undefined; + this.max = undefined; + this.step = undefined; + + this.decode = function(parent,child) + { + var attributeMap = this.schema.getAllElementsByTagName('xs:attribute'); + for (var i in attributeMap){ + if(isNaN(Number(i)) == true){break;} + var attributeName = attributeMap[i].getAttribute('name') || attributeMap[i].getAttribute('ref'); + var projectAttr = child.getAttribute(attributeName); + projectAttr = parent.processAttribute(projectAttr,attributeMap[i]); + switch(typeof projectAttr) + { + case "number": + case "boolean": + eval('this.'+attributeName+' = '+projectAttr); + break; + case "string": + eval('this.'+attributeName+' = "'+projectAttr+'"'); + break; + } + } + this.statement = child.getElementsByTagName('statement')[0].textContent; + if (this.type == "checkbox" || this.type == "radio") { + var children = child.getElementsByTagName('option'); + if (children.length == null) { + console.log('Malformed' +child.nodeName+ 'entry'); + this.statement = 'Malformed' +child.nodeName+ 'entry'; + this.type = 'statement'; + } else { + this.options = []; + for (var i in children) + { + if (isNaN(Number(i))==true){break;} + this.options.push({ + name: children[i].getAttribute('name'), + text: children[i].textContent + }); + } + } + } + }; + + this.exportXML = function(root) + { + var node = root.createElement('surveyelement'); + node.setAttribute('type',this.type); + var statement = root.createElement('statement'); + statement.textContent = this.statement; + node.appendChild(statement); + switch(this.type) + { + case "statement": + break; + case "question": + node.id = this.id; + node.setAttribute("mandatory",this.mandatory); + node.setAttribute("boxsize",this.boxsize); + break; + 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); + break; + case "checkbox": + case "radio": + node.id = this.id; + for (var i=0; i<this.options.length; i++) + { + var option = this.options[i]; + var optionNode = root.createElement("option"); + optionNode.setAttribute("name",option.name); + optionNode.textContent = option.text; + node.appendChild(optionNode); + } + break; + } + return node; + }; + }; + this.decode = function(parent,xml) { + this.location = xml.getAttribute('location'); + if (this.location == 'before'){this.location = 'pre';} + else if (this.location == 'after'){this.location = 'post';} + for (var i in xml.children) + { + if(isNaN(Number(i))==true){break;} + var node = new this.OptionNode(); + node.decode(parent,xml.children[i]); + this.options.push(node); + } + }; + this.encode = function(root) { + var node = root.createElement('survey'); + node.setAttribute('location',this.location); + for (var i=0; i<this.options.length; i++) + { + node.appendChild(this.options[i].exportXML()); + } + return node; + }; + }; + + this.interfaceNode = function() + { + this.title = null; + this.name = null; + this.options = []; + this.scales = []; + this.schema = specification.schema.getAllElementsByName('interface')[1]; + + this.decode = function(parent,xml) { + this.name = xml.getAttribute('name'); + var titleNode = xml.getElementsByTagName('title'); + if (titleNode.length == 1) + { + this.title = titleNode[0].textContent; + } + var interfaceOptionNodes = xml.getElementsByTagName('interfaceoption'); + // Extract interfaceoption node schema + var interfaceOptionNodeSchema = this.schema.getAllElementsByName('interfaceoption')[0]; + var attributeMap = interfaceOptionNodeSchema.getAllElementsByTagName('xs:attribute'); + for (var i=0; i<interfaceOptionNodes.length; i++) + { + var ioNode = interfaceOptionNodes[i]; + var option = {}; + for (var j=0; j<attributeMap.length; j++) + { + var attributeName = attributeMap[j].getAttribute('name') || attributeMap[j].getAttribute('ref'); + var projectAttr = ioNode.getAttribute(attributeName); + projectAttr = parent.processAttribute(projectAttr,attributeMap[j]); + switch(typeof projectAttr) + { + case "number": + case "boolean": + eval('option.'+attributeName+' = '+projectAttr); + break; + case "string": + eval('option.'+attributeName+' = "'+projectAttr+'"'); + break; + } + } + this.options.push(option); + } + + // Now the scales nodes + var scaleParent = xml.getElementsByTagName('scales'); + if (scaleParent.length == 1) { + scaleParent = scaleParent[0]; + for (var i=0; i<scaleParent.children.length; i++) { + var child = scaleParent.children[i]; + this.scales.push({ + text: child.textContent, + position: Number(child.getAttribute('position')) + }); + } + } + }; + + this.encode = function(root) { + + }; + }; + + this.metricNode = function() { + this.enabled = []; + this.decode = function(parent, xml) { + var children = xml.getElementsByTagName('metricenable'); + for (var i in children) { + if (isNaN(Number(i)) == true){break;} + this.enabled.push(children[i].textContent); + } + } + this.encode = function(root) { + var node = root.createElement('metric'); + for (var i in this.enabled) + { + if (isNaN(Number(i)) == true){break;} + var child = root.createElement('metricenable'); + child.textContent = this.enabled[i]; + node.appendChild(child); + } + return node; + } + } + + this.page = function() { + this.presentedId = undefined; + this.id = undefined; + this.hostURL = undefined; + this.randomiseOrder = undefined; + this.loop = undefined; + this.showElementComments = undefined; + this.outsideReference = null; + this.loudness = null; + this.preTest = null; + this.postTest = null; + this.interfaces = []; + this.commentBoxPrefix = "Comment on track"; + this.audioElements = []; + this.commentQuestions = []; + this.schema = specification.schema.getAllElementsByName("page")[0]; + + this.decode = function(parent,xml) + { + var attributeMap = this.schema.getAllElementsByTagName('xs:attribute'); + for (var i=0; i<attributeMap.length; i++) + { + var attributeName = attributeMap[i].getAttribute('name') || attributeMap[i].getAttribute('ref'); + var projectAttr = xml.getAttribute(attributeName); + projectAttr = parent.processAttribute(projectAttr,attributeMap[i]); + switch(typeof projectAttr) + { + case "number": + case "boolean": + eval('this.'+attributeName+' = '+projectAttr); + break; + case "string": + eval('this.'+attributeName+' = "'+projectAttr+'"'); + break; + } + } + + // Get the Comment Box Prefix + var CBP = xml.getElementsByTagName('commentboxprefix'); + if (CBP.length != 0) { + this.commentBoxPrefix = CBP[0].textContent; + } + + // Now decode the interfaces + var interfaceNode = xml.getElementsByTagName('interface'); + for (var i=0; i<interfaceNode.length; i++) + { + var node = new parent.interfaceNode(); + node.decode(this,interfaceNode[i],parent.schema.getAllElementsByName('interface')[1]); + this.interfaces.push(node); + } + + // Now process the survey node options + var survey = xml.getElementsByTagName('survey'); + var surveySchema = parent.schema.getAllElementsByName('survey')[0]; + for (var i in survey) { + if (isNaN(Number(i)) == true){break;} + var location = survey[i].getAttribute('location'); + if (location == 'pre' || location == 'before') + { + if (this.preTest != null){this.errors.push("Already a pre/before test survey defined! Ignoring second!!");} + else { + this.preTest = new parent.surveyNode(); + this.preTest.decode(parent,survey[i],surveySchema); + } + } else if (location == 'post' || location == 'after') { + if (this.postTest != null){this.errors.push("Already a post/after test survey defined! Ignoring second!!");} + else { + this.postTest = new parent.surveyNode(); + this.postTest.decode(parent,survey[i],surveySchema); + } + } + } + + // Now process the audioelement tags + var audioElements = xml.getElementsByTagName('audioelement'); + for (var i=0; i<audioElements.length; i++) + { + var node = new this.audioElementNode(); + node.decode(this,audioElements[i]); + this.audioElements.push(node); + } + + // Now decode the commentquestions + var commentQuestions = xml.getElementsByTagName('commentquestion'); + for (var i=0; i<commentQuestions.length; i++) + { + var node = new this.commentQuestionNode(); + node.decode(parent,commentQuestions[i]); + this.commentQuestions.push(node); + } + }; + + 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); + if(this.loudness != null) {AHNode.setAttribute("loudness",this.loudness);} + if(this.initialPosition != null) { + AHNode.setAttribute("loudness",this.initialPosition*100); + } + 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.commentQuestionNode = function() { + this.id = null; + this.type = undefined; + this.options = []; + this.statement = undefined; + this.schema = specification.schema.getAllElementsByName('commentquestion')[0]; + this.decode = function(parent,xml) + { + this.id = xml.id; + this.type = xml.getAttribute('type'); + this.statement = xml.getElementsByTagName('statement')[0].textContent; + var optNodes = xml.getElementsByTagName('option'); + for (var i=0; i<optNodes.length; i++) + { + var optNode = optNodes[i]; + this.options.push({ + name: optNode.getAttribute('name'), + text: optNode.textContent + }); + } + }; + + this.encode = function(root) + { + + }; + }; + + this.audioElementNode = function() { + this.url = null; + this.id = null; + this.parent = null; + this.type = null; + this.marker = false; + this.enforce = false; + this.gain = 1.0; + this.schema = specification.schema.getAllElementsByName('audioelement')[0];; + this.parent = null; + this.decode = function(parent,xml) + { + this.parent = parent; + var attributeMap = this.schema.getAllElementsByTagName('xs:attribute'); + for (var i=0; i<attributeMap.length; i++) + { + var attributeName = attributeMap[i].getAttribute('name') || attributeMap[i].getAttribute('ref'); + var projectAttr = xml.getAttribute(attributeName); + projectAttr = specification.processAttribute(projectAttr,attributeMap[i]); + switch(typeof projectAttr) + { + case "number": + case "boolean": + eval('this.'+attributeName+' = '+projectAttr); + break; + case "string": + eval('this.'+attributeName+' = "'+projectAttr+'"'); + break; + } + } + + }; + this.encode = function(root) + { + var AENode = root.createElement("audioElements"); + AENode.id = this.id; + AENode.setAttribute("url",this.url); + AENode.setAttribute("type",this.type); + AENode.setAttribute("gain",linearToDecibel(this.gain)); + if (this.marker != false) + { + AENode.setAttribute("marker",this.marker*100); + } + return AENode; + }; + }; + }; + } + </script> + <script type="text/javascript" src="test_core.js"/> + <script type="text/javascript"> + + </script> +</head> +<body> + <div id="popupHolder"></div> + <div id="blanket"></div> + <div id="content"></div> +</body> +</html> \ No newline at end of file
--- a/test_create/test_create_2.html Tue Feb 02 11:03:01 2016 +0000 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,793 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="utf-8"> - - <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame - Remove this if you use the .htaccess --> - <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> - - <title>test_create_2</title> - <meta name="description" content=""> - <meta name="author" content="Nicholas"> - - <meta name="viewport" content="width=device-width; initial-scale=1.0"> - - <script type="text/javascript"> - window.onload = function() { - var dropBody = document.getElementById('dragFile'); - dropBody.addEventListener('dragover', handleDragOver, false); - dropBody.addEventListener('dragenter',handleDragEnter,false); - dropBody.addEventListener('dragleave',handleDragLeave,false); - dropBody.addEventListener('drop', handleDrop,false); - }; - - function handleDragOver(e) { - e.stopPropagation(); - e.preventDefault(); - } - function handleDragEnter(e) { - e.stopPropagation(); - e.preventDefault(); - this.style.backgroundColor = '#AAFFAA'; - } - function handleDragLeave(e) { - e.stopPropagation(); - e.preventDefault(); - this.style.backgroundColor = "#FFFFFF"; - } - function handleDrop(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'); - importXML(xml); - }; - reader.readAsText(file); - - } - - function removeNode(event) { - event.srcElement.parentElement.parentElement.removeChild(event.srcElement.parentElement); - } - - function removeNodeButton() - { - var button = document.createElement('button'); - button.textContent = 'Remove'; - button.onclick = function(event){removeNode(event);}; - return button; - } - - function attributePair(type,text,name,mandatory) - { - var node = document.createElement('div'); - node.setAttribute('name','attribute'); - var span = document.createElement('span'); - span.textContent = text; - var input = document.createElement('input'); - input.type = type; - input.setAttribute('attrib-name',name); - input.setAttribute('mandatory',mandatory); - node.appendChild(span); - node.appendChild(input); - return node; - } - - function buttonClickedValidate() - { - var allInputs = document.getElementsByTagName('input'); - for (var i=0; i<allInputs.length; i++) - {goodNode(allInputs[i]);} - var errList = document.getElementById('errorMessage'); - errList.innerHTML = ""; - validate(document.getElementById('topLevelBody')); - var submit = document.getElementById('createXML'); - if (errList.innerHTML == "") - {submit.disabled = false;} - else {submit.disabled = true;} - } - - function validate(node) - { - var name = node.getAttribute('name'); - if (name != 'attribute' && name != 'element') { - var child = node.children; - for (var i=0; i<node.childElementCount; i++) - { - if (child[i].nodeName == "DIV") - { - validate(child[i]); - } - } - } else if (name == 'attribute') - { - var child = node.children; - for (var i=0; i<node.childElementCount; i++) - { - if (child[i].nodeName == "INPUT") - { - var mandatory = child[i].getAttribute('mandatory'); - if (mandatory == 'true') {mandatory = true;} - else {mandatory = false;} - if (child[i].type =='text' || child[i].type =='number') - { - if (child[i].value.length == 0) - { - if (mandatory == true) {errorNode(child[i]);} - else {warningNode(child[i]);} - } else {goodNode(child[i]);} - } - } - } - } else if (name == 'element') - { - var child = node.children; - for (var i=0; i<node.childElementCount; i++) - { - if (child[i].nodeName == "INPUT") - { - if (child[i].value.length == 0){warningNode(child[i]);} - else {goodNode(child[i]);} - } - } - } - } - - function buttonClickedSubmit() - { - var xml = document.createElement('BrowserEvalProjectDocument'); - var dom = document.getElementById('topLevelBody'); - xml = extractXML(xml,dom); - var drop = document.getElementById('errorMessage'); - createProjectSave(xml,drop); - } - - function createProjectSave(xmlDoc, injectPoint) { - var parent = document.createElement("div"); - parent.appendChild(xmlDoc); - var file = [parent.innerHTML]; - var bb = new Blob(file,{type : 'application/xml'}); - var dnlk = window.URL.createObjectURL(bb); - var a = document.createElement("a"); - a.hidden = ''; - a.href = dnlk; - a.download = "save.xml"; - a.textContent = "Save File"; - injectPoint.appendChild(a); - } - - function extractXML(xml,node) - { - if(node.getAttribute('class')=='attrib') - { - var children = node.children; - for (var i=0; i<children.length; i++) - { - if (children[i].getAttribute('name')=='attribute') - { - var input = children[i].children[1]; - if (input.type == 'checkbox') - { - xml.setAttribute(input.getAttribute('attrib-name'),input.checked); - } else { - xml.setAttribute(input.getAttribute('attrib-name'),input.value); - } - } else if (children[i].getAttribute('name') == 'element') - { - var input = children[i].children[1]; - xml.textContent = input.value; - } - } - return xml; - } else if (node.getAttribute('node-name') != undefined) - { - var xmlDom = document.createElement(node.getAttribute('node-name')); - xml.appendChild(xmlDom); - var children = node.children; - for (var i=0; i<children.length; i++) - { - if (children[i].nodeName == "DIV") - { - xmlDom = extractXML(xmlDom,children[i]); - } - } - } else { - var children = node.children; - for (var i=0; i<children.length; i++) - { - if (children[i].nodeName == "DIV") - { - xml = extractXML(xml,children[i]); - } - } - } - return xml; - } - - function goodNode(node) - {node.style.backgroundColor="#FFFFFF";} - - function warningNode(node) - {node.style.backgroundColor="#FFFF88";} - - function errorNode(node) - { - var errLog = document.getElementById('errorMessage'); - var div = document.createElement('div'); - var span = document.createElement('span'); - span.textContent = 'Invalid Data: '; - var list = [node.getAttribute('attrib-name')]; - var pNode = node; - while (pNode.id != 'topLevelBody') - { - if (pNode.getAttribute('node-name') != undefined) - {list.push(pNode.getAttribute('node-name'));} - pNode = pNode.parentElement; - } - for (var i=list.length-1; i>=0; i--) - { - span.textContent = span.textContent +' ->'+ list[i]; - } - div.appendChild(span); - errLog.appendChild(div); - errLog.style.visibility = 'visible'; - node.style.backgroundColor="#FF0000"; - } - - function importXML(xml) - { - xml = xml.children[0]; - var setup = xml.getElementsByTagName('setup')[0]; - var DOM = document.getElementById('setup'); - // Insert any setup node attributes - setAttributes(DOM,setup); - - for (var i=0; i<setup.childElementCount; i++) - { - var node = DOM.getElementsByClassName(setup.children[i].nodeName); - if (node.length != 0) - { - node = node[0]; - setAttributes(node,setup.children[i]); - buildNode(node,setup.children[i]); - } - } - - var holders = xml.getElementsByTagName('audioHolder'); - for (var i=0; i<holders.length; i++) - { - var node = addAudioHolder(); - document.getElementById('topLevelBody').appendChild(node); - setAttributes(node,holders[i]); - buildNode(node,holders[i]); - } - } - - function setAttributes(node,xml) - { - var attribs = node.getElementsByClassName('attrib'); - if (attribs.length != 0){ - attribs = attribs[0]; - for (var i=0; i < attribs.children.length; i++) - { - if(attribs.children[i].getAttribute('name')=='attribute'){ - var input = attribs.children[i].children[1]; - var value = xml.attributes.getNamedItem(input.getAttribute('attrib-name')); - if (value != undefined) {value = value.value;} - if (input.type == 'checkbox') - {input.checked = value;} - else - {input.value = value;} - } else if(attribs.children[i].getAttribute('name')=='element'){ - var input = attribs.children[i].children[1]; - input.value = xml.textContent; - } - } - } - } - - function buildNode(parent,xml) - { - for (var i=0; i<xml.childElementCount; i++) - { - var child = xml.children[i]; - var name = child.nodeName; - var node = null; - if (name == 'statement'){node = addPPStatement();} - else if (name == 'question' || name == 'number'){node = addPPQuestion();} - else if (name == 'checkbox'){node = addPPCheckbox();} - else if (name == 'radio'){node = addPPRadio();} - else if (name == 'metricEnable'){node = addMetricEnable();} - else if (name == 'check'){node = addInterfaceCheck();} - else if (name == 'option'){node = addInterfaceOption();} - else if (name == 'scale'){node = addScaleMarker();} - else if (name == 'audioHolder'){node = addAudioHolder();} - else if (name == 'audioElements'){node = addAudioElement();} - else if (name == 'commentQuestion'){node = addExtraComment();} - else if (name == 'interface'){node = parent.getElementsByClassName('interface')[0];} - else if (name == 'preTest' || name == 'PreTest') - { - node = parent.getElementsByClassName('preTest')[0]; - } - else if (name == 'postTest' || name == 'PostTest') - { - node = parent.getElementsByClassName('postTest')[0]; - } - else if (name == 'title' || name == 'commentBoxPrefix') - { - node = parent.getElementsByClassName(name)[0]; - } - if (node != null) { - if (name == 'radio' || name == 'checkbox') - { - buildRadio(node,xml.children[i]); - parent.appendChild(node); - } else - { - setAttributes(node,child); - parent.appendChild(node); - buildNode(node,child); - } - } else { - var node = createHead(name,name,'h3'); - - var attrib = document.createElement('div'); - attrib.className = 'attrib'; - for (var j=0; j<child.attributes.length; j++) - { - attrib.appendChild(attributePair('text',child.attributes[j].name,child.attributes[j].name,false)); - } - - node.appendChild(attrib); - parent.appendChild(node); - setAttributes(node,child); - /* - buildNode(node,child); - */ - } - } - } - - function buildRadio(node,xml) - { - setAttributes(node,xml); - setAttributes(node.getElementsByClassName('statement')[0],xml.getElementsByTagName('statement')[0]); - var options = xml.getElementsByTagName('option'); - var addOptionButton = node.getElementsByTagName('button')[2]; - for (var i=0; i<options.length; i++) - { - addOptionButton.click(); - setAttributes(node.getElementsByClassName('option')[i],options[i]); - } - } - - function createHead(name,title,size) - { - var node = document.createElement('div'); - node.setAttribute('class','head '+name); - node.setAttribute('node-name',name); - if (size == undefined) - {var node_T = document.createElement('h3');} - else{var node_T = document.createElement(size);} - node_T.textContent = title; - node.appendChild(node_T); - node.appendChild(removeNodeButton()); - return node; - } - - function addPretestNode() - { - var node = createHead('preTest', 'Pre Test','h3'); - var addStatement = document.createElement('button'); - addStatement.textContent = 'Add Statement'; - addStatement.onclick = function(){event.srcElement.parentElement.appendChild(addPPStatement());}; - node.appendChild(addStatement); - var addQuestion = document.createElement('button'); - addQuestion.textContent = 'Add Question'; - addQuestion.onclick = function(){event.srcElement.parentElement.appendChild(addPPQuestion());}; - node.appendChild(addQuestion); - var addCheckbox = document.createElement('button'); - addCheckbox.textContent = 'Add Checkbox'; - addCheckbox.onclick = function(){event.srcElement.parentElement.appendChild(addPPCheckbox());}; - node.appendChild(addCheckbox); - var addRadio = document.createElement('button'); - addRadio.textContent = 'Add Checkbox'; - addRadio.onclick = function(){event.srcElement.parentElement.appendChild(addPPRadio());}; - node.appendChild(addRadio); - return node; - }; - - function addPosttestNode() - { - var node = createHead('postTest', 'Post Test','h3'); - var addStatement = document.createElement('button'); - addStatement.textContent = 'Add Statement'; - addStatement.onclick = function(){event.srcElement.parentElement.appendChild(addPPStatement());}; - node.appendChild(addStatement); - var addQuestion = document.createElement('button'); - addQuestion.textContent = 'Add Question'; - addQuestion.onclick = function(){event.srcElement.parentElement.appendChild(addPPQuestion());}; - node.appendChild(addQuestion); - var addCheckbox = document.createElement('button'); - addCheckbox.textContent = 'Add Checkbox'; - addCheckbox.onclick = function(){event.srcElement.parentElement.appendChild(addPPCheckbox());}; - node.appendChild(addCheckbox); - var addRadio = document.createElement('button'); - addRadio.textContent = 'Add Checkbox'; - addRadio.onclick = function(){event.srcElement.parentElement.appendChild(addPPRadio());}; - node.appendChild(addRadio); - return node; - }; - - function addPPStatement() - { - var node = createHead('statement', 'Statement','h4'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - var element = document.createElement('div'); - element.setAttribute('name','element'); - var span = document.createElement('span'); - span.textContent = "Enter statement: "; - element.appendChild(span); - var input = document.createElement('input'); - input.type = "text"; - input.style.width = "500px"; - element.appendChild(input); - attrib.appendChild(element); - node.appendChild(attrib); - return node; - }; - function addPPQuestion() - { - var node = createHead('question', 'Question','h4'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - attrib.appendChild(attributePair('text','ID: ','id',true)); - attrib.appendChild(attributePair('checkbox','Mandatory: ','mandatory',false)); - attrib.appendChild(attributePair('text','Box size: ','boxsize',false)); - var element = document.createElement('div'); - element.setAttribute('name','element'); - var span = document.createElement('span'); - span.textContent = "Enter Question: "; - element.appendChild(span); - var input = document.createElement('input'); - input.type = "text"; - input.style.width = "500px"; - element.appendChild(input); - attrib.appendChild(element); - node.appendChild(attrib); - return node; - }; - function addPPCheckbox() - { - var node = createHead('checkbox', 'Checkbox','h4'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - attrib.appendChild(attributePair('text','ID: ','id',true)); - attrib.appendChild(attributePair('checkbox','Mandatory: ','mandatory',false)); - node.appendChild(attrib); - node.appendChild(addPPStatement()); - var addOption = document.createElement('button'); - addOption.textContent = 'Add Checkbox'; - addOption.onclick = function() { - var node = createHead('option', 'Option','h4'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - attrib.appendChild(attributePair('text','ID: ','id',true)); - var element = document.createElement('div'); - element.setAttribute('name','element'); - var span = document.createElement('span'); - span.textContent = "Enter Text: "; - var input = document.createElement('input'); - input.type = 'text'; - element.appendChild(span); - element.appendChild(input); - attrib.appendChild(element); - node.appendChild(attrib); - event.srcElement.parentElement.appendChild(node); - }; - node.appendChild(addOption); - return node; - }; - - function addPPRadio() - { - var node = createHead('radio', 'Radio','h4'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - attrib.appendChild(attributePair('text','ID: ','id',true)); - attrib.appendChild(attributePair('checkbox','Mandatory: ','mandatory',false)); - node.appendChild(attrib); - node.appendChild(addPPStatement()); - var addOption = document.createElement('button'); - addOption.textContent = 'Add Radio'; - addOption.onclick = function() { - var node = createHead('option', 'Option','h4'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - attrib.appendChild(attributePair('text','Name: ','name',true)); - var element = document.createElement('div'); - element.setAttribute('name','element'); - var span = document.createElement('span'); - span.textContent = "Enter Text: "; - var input = document.createElement('input'); - input.type = 'text'; - element.appendChild(span); - element.appendChild(input); - attrib.appendChild(element); - node.appendChild(attrib); - event.srcElement.parentElement.appendChild(node); - }; - node.appendChild(addOption); - return node; - }; - - function addMetricEnable() - { - var node = createHead('metricEnable', '','h4'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - var element = document.createElement('div'); - element.setAttribute('name','element'); - var span = document.createElement('span'); - span.textContent = "Enter Metric Name: "; - element.appendChild(span); - var input = document.createElement('input'); - input.type = "text"; - input.style.width = "500px"; - element.appendChild(input); - attrib.appendChild(element); - node.appendChild(attrib); - return node; - }; - - function addInterfaceCheck() - { - var node = createHead('check', 'Check','h4'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - attrib.appendChild(attributePair('text','Name','name',true)); - node.appendChild(attrib); - return node; - } - function addInterfaceOption() - { - var node = createHead('option', 'Option','h4'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - attrib.appendChild(attributePair('text','Name','name',true)); - node.appendChild(attrib); - return node; - } - - - function addAudioHolder() - { - var node = createHead('audioHolder','Audio Holder / Test Page','h2'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - node.appendChild(attrib); - - attrib.appendChild(attributePair('text','ID: ','id',true)); - attrib.appendChild(attributePair('url','Host URL: ','hostURL',false)); - attrib.appendChild(attributePair('number','Sample Rate: ','sampleRate',false)); - attrib.appendChild(attributePair('checkbox','Randomise Fragment Order: ','randomiseOrder',false)); - attrib.appendChild(attributePair('number','Repeat Count: ','repeatCount',false)); - attrib.appendChild(attributePair('checkbox','Loop Fragments: ','loop',false)); - attrib.appendChild(attributePair('checkbox','Fragment Comment Boxes: ','enableComments',false)); - - node.appendChild(addPretestNode()); - - node.appendChild(addPosttestNode()); - - var interfaceNode = createHead('interface','Interface','h3'); - var addOption = document.createElement('button'); - addOption.textContent = 'Add Option'; - addOption.onclick = function(){event.srcElement.parentElement.appendChild(addInterfaceOption());}; - interfaceNode.appendChild(addOption); - var scale = document.createElement('button'); - scale.textContent = 'Add scale'; - scale.onclick = function(){event.srcElement.parentElement.appendChild(addScaleMarker());}; - interfaceNode.appendChild(scale); - - var PageTitle = createHead('title','Page Title','h4'); - var attrib = document.createElement('div'); - attrib.className='attrib'; - var element = document.createElement('div'); - element.setAttribute('name','element'); - var span = document.createElement('span'); - span.textContent = 'Page Title: '; - element.appendChild(span); - var input = document.createElement('input'); - input.type = 'text'; - input.style.width = "500px"; - element.appendChild(input); - attrib.appendChild(element); - PageTitle.appendChild(attrib); - interfaceNode.appendChild(PageTitle); - - var commentBoxPrefix = createHead('commentBoxPrefix','Comment Box Prefix','h4'); - var attrib = document.createElement('div'); - attrib.className='attrib'; - var element = document.createElement('div'); - element.setAttribute('name','element'); - var span = document.createElement('span'); - span.textContent = 'Prefix: '; - element.appendChild(span); - var input = document.createElement('input'); - input.type = 'text'; - input.style.width = "500px"; - element.appendChild(input); - attrib.appendChild(element); - commentBoxPrefix.appendChild(attrib); - interfaceNode.appendChild(commentBoxPrefix); - - node.appendChild(interfaceNode); - - var addElement = document.createElement('button'); - addElement.textContent = 'Add Audio Element'; - addElement.onclick = function(){event.srcElement.parentElement.appendChild(addAudioElement());}; - node.appendChild(addElement); - - var addCQ = document.createElement('button'); - addCQ.textContent = 'Add Comment Box'; - addCQ.onclick = function(){event.srcElement.parentElement.appendChild(addExtraComment());}; - node.appendChild(addCQ); - - return node; - }; - - function addScaleMarker(){ - var node = createHead('scale','Scale','h4'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - node.appendChild(attrib); - attrib.appendChild(attributePair('number','Position','position',true)); - var element = document.createElement('div'); - element.setAttribute('name','element'); - var span = document.createElement('span'); - span.textContent = 'Marker Text (Optional): '; - element.appendChild(span); - var input = document.createElement('input'); - input.type = 'text'; - element.appendChild(input); - attrib.appendChild(element); - return node; - }; - - function addAudioElement() - { - var node = createHead('audioElements','Audio Element'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - node.appendChild(attrib); - - attrib.appendChild(attributePair('text','ID: ','id',true)); - attrib.appendChild(attributePair('text','URL: ','url',true)); - attrib.appendChild(attributePair('text','Type: ','type',false)); - - return node; - }; - - function addExtraComment() - { - var node = createHead('CommentQuestion','Comment'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - node.appendChild(attrib); - attrib.appendChild(attributePair('text','ID: ','id',true)); - - var element = document.createElement('div'); - element.setAttribute('name','element'); - var span = document.createElement('span'); - span.textContent = 'Question: '; - element.appendChild(span); - var input = document.createElement('input'); - input.type = 'text'; - input.style.width = "500px"; - element.appendChild(input); - attrib.appendChild(element); - return node; - } - </script> - - <style> - h4 {margin: 0px;} - div { - padding: 2px; - margin-top: 2px; - margin-bottom: 2px; - } - div.head{ - margin-left: 10px; - border: black; - border-width: 2px; - border-style: solid; - } - div.attrib{ - margin-left:25px; - border: black; - border-width: 2px; - border-style: dashed; - margin-bottom: 10px; - display: table; - background-color: rgb(200,255,255); - } - div.attrib div { - width: auto; - position: relative; - display: table-cell; - } - div#dragFile{ - height:100px; - border-width: 2px; - border-style: dashed; - margin-bottom: 10px; - } - </style> - </head> - - <body> - <h1>Create Test Setup XML</h1> - <div id="dragFile"> - <span>Drag and Drop an XML specification file here to auto-load.</span> - </div> - <button id="validateXML" onclick="buttonClickedValidate();">Validate</button> - <button id="createXML" onclick="buttonClickedSubmit();" disabled>Submit</button> - <div id="errorMessage" visibility="hidden"></div> - <div id="topLevelBody" align="left"> - <div id='setup' class="head setup" node-name='setup'> - <h2>Setup Node</h2> - <div class="attrib"> - <div name="attribute"> - <span>Interface: </span> - <input type="text" attrib-name='interface' mandatory='true'/> - </div> - <div name="attribute"> - <span>Project Return: </span> - <input type="url" attrib-name='projectReturn'/> - </div> - <div name="attribute"> - <span>Randomise Page Order: </span> - <input type="checkbox" attrib-name='randomiseOrder'/> - </div> - <div name="attribute"> - <span>Collect Metrics: </span> - <input type="checkbox" attrib-name='collectMetrics'/> - </div> - </div> - <div class="head PreTest" node-name="preTest"> - <h3>Pre Test</h3> - <button onclick="event.srcElement.parentElement.appendChild(addPPStatement());">Add Statement</button> - <button onclick="event.srcElement.parentElement.appendChild(addPPQuestion());">Add Question</button> - <button onclick="event.srcElement.parentElement.appendChild(addPPCheckbox());">Add Checkbox</button> - <button onclick="event.srcElement.parentElement.appendChild(addPPRadio());">Add Radio</button> - </div> - <div class="head PostTest" node-name="postTest"> - <h3>Post Test</h3> - <button onclick="event.srcElement.parentElement.appendChild(addPPStatement());">Add Statement</button> - <button onclick="event.srcElement.parentElement.appendChild(addPPQuestion());">Add Question</button> - <button onclick="event.srcElement.parentElement.appendChild(addPPCheckbox());">Add Checkbox</button> - <button onclick="event.srcElement.parentElement.appendChild(addPPRadio());">Add Radio</button> - </div> - <div class="head Metric" node-name="metrics"> - <h3>Metrics</h3> - <button onclick="event.srcElement.parentElement.appendChild(addMetricEnable());">Add Metric Enable</button> - </div> - <div class="head interface" node-name="interface"> - <h3>Interface</h3> - <button onclick="event.srcElement.parentElement.appendChild(addInterfaceCheck());">Add Check</button> - <button onclick="event.srcElement.parentElement.appendChild(addInterfaceOption());">Add Option</button> - </div> - </div> - <button onclick="event.srcElement.parentElement.appendChild(addAudioHolder());">Add Audio Holder</button> - </div> - </body> -</html>
--- a/test_create/test_create_advanced.html Tue Feb 02 11:03:01 2016 +0000 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,793 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="utf-8"> - - <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame - Remove this if you use the .htaccess --> - <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> - - <title>test_create_2</title> - <meta name="description" content=""> - <meta name="author" content="Nicholas"> - - <meta name="viewport" content="width=device-width; initial-scale=1.0"> - - <script type="text/javascript"> - window.onload = function() { - var dropBody = document.getElementById('dragFile'); - dropBody.addEventListener('dragover', handleDragOver, false); - dropBody.addEventListener('dragenter',handleDragEnter,false); - dropBody.addEventListener('dragleave',handleDragLeave,false); - dropBody.addEventListener('drop', handleDrop,false); - }; - - function handleDragOver(e) { - e.stopPropagation(); - e.preventDefault(); - } - function handleDragEnter(e) { - e.stopPropagation(); - e.preventDefault(); - this.style.backgroundColor = '#AAFFAA'; - } - function handleDragLeave(e) { - e.stopPropagation(); - e.preventDefault(); - this.style.backgroundColor = "#FFFFFF"; - } - function handleDrop(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'); - importXML(xml); - }; - reader.readAsText(file); - - } - - function removeNode(event) { - event.srcElement.parentElement.parentElement.removeChild(event.srcElement.parentElement); - } - - function removeNodeButton() - { - var button = document.createElement('button'); - button.textContent = 'Remove'; - button.onclick = function(event){removeNode(event);}; - return button; - } - - function attributePair(type,text,name,mandatory) - { - var node = document.createElement('div'); - node.setAttribute('name','attribute'); - var span = document.createElement('span'); - span.textContent = text; - var input = document.createElement('input'); - input.type = type; - input.setAttribute('attrib-name',name); - input.setAttribute('mandatory',mandatory); - node.appendChild(span); - node.appendChild(input); - return node; - } - - function buttonClickedValidate() - { - var allInputs = document.getElementsByTagName('input'); - for (var i=0; i<allInputs.length; i++) - {goodNode(allInputs[i]);} - var errList = document.getElementById('errorMessage'); - errList.innerHTML = ""; - validate(document.getElementById('topLevelBody')); - var submit = document.getElementById('createXML'); - if (errList.innerHTML == "") - {submit.disabled = false;} - else {submit.disabled = true;} - } - - function validate(node) - { - var name = node.getAttribute('name'); - if (name != 'attribute' && name != 'element') { - var child = node.children; - for (var i=0; i<node.childElementCount; i++) - { - if (child[i].nodeName == "DIV") - { - validate(child[i]); - } - } - } else if (name == 'attribute') - { - var child = node.children; - for (var i=0; i<node.childElementCount; i++) - { - if (child[i].nodeName == "INPUT") - { - var mandatory = child[i].getAttribute('mandatory'); - if (mandatory == 'true') {mandatory = true;} - else {mandatory = false;} - if (child[i].type =='text' || child[i].type =='number') - { - if (child[i].value.length == 0) - { - if (mandatory == true) {errorNode(child[i]);} - else {warningNode(child[i]);} - } else {goodNode(child[i]);} - } - } - } - } else if (name == 'element') - { - var child = node.children; - for (var i=0; i<node.childElementCount; i++) - { - if (child[i].nodeName == "INPUT") - { - if (child[i].value.length == 0){warningNode(child[i]);} - else {goodNode(child[i]);} - } - } - } - } - - function buttonClickedSubmit() - { - var xml = document.createElement('BrowserEvalProjectDocument'); - var dom = document.getElementById('topLevelBody'); - xml = extractXML(xml,dom); - var drop = document.getElementById('errorMessage'); - createProjectSave(xml,drop); - } - - function createProjectSave(xmlDoc, injectPoint) { - var parent = document.createElement("div"); - parent.appendChild(xmlDoc); - var file = [parent.innerHTML]; - var bb = new Blob(file,{type : 'application/xml'}); - var dnlk = window.URL.createObjectURL(bb); - var a = document.createElement("a"); - a.hidden = ''; - a.href = dnlk; - a.download = "save.xml"; - a.textContent = "Save File"; - injectPoint.appendChild(a); - } - - function extractXML(xml,node) - { - if(node.getAttribute('class')=='attrib') - { - var children = node.children; - for (var i=0; i<children.length; i++) - { - if (children[i].getAttribute('name')=='attribute') - { - var input = children[i].children[1]; - if (input.type == 'checkbox') - { - xml.setAttribute(input.getAttribute('attrib-name'),input.checked); - } else { - xml.setAttribute(input.getAttribute('attrib-name'),input.value); - } - } else if (children[i].getAttribute('name') == 'element') - { - var input = children[i].children[1]; - xml.textContent = input.value; - } - } - return xml; - } else if (node.getAttribute('node-name') != undefined) - { - var xmlDom = document.createElement(node.getAttribute('node-name')); - xml.appendChild(xmlDom); - var children = node.children; - for (var i=0; i<children.length; i++) - { - if (children[i].nodeName == "DIV") - { - xmlDom = extractXML(xmlDom,children[i]); - } - } - } else { - var children = node.children; - for (var i=0; i<children.length; i++) - { - if (children[i].nodeName == "DIV") - { - xml = extractXML(xml,children[i]); - } - } - } - return xml; - } - - function goodNode(node) - {node.style.backgroundColor="#FFFFFF";} - - function warningNode(node) - {node.style.backgroundColor="#FFFF88";} - - function errorNode(node) - { - var errLog = document.getElementById('errorMessage'); - var div = document.createElement('div'); - var span = document.createElement('span'); - span.textContent = 'Invalid Data: '; - var list = [node.getAttribute('attrib-name')]; - var pNode = node; - while (pNode.id != 'topLevelBody') - { - if (pNode.getAttribute('node-name') != undefined) - {list.push(pNode.getAttribute('node-name'));} - pNode = pNode.parentElement; - } - for (var i=list.length-1; i>=0; i--) - { - span.textContent = span.textContent +' ->'+ list[i]; - } - div.appendChild(span); - errLog.appendChild(div); - errLog.style.visibility = 'visible'; - node.style.backgroundColor="#FF0000"; - } - - function importXML(xml) - { - xml = xml.children[0]; - var setup = xml.getElementsByTagName('setup')[0]; - var DOM = document.getElementById('setup'); - // Insert any setup node attributes - setAttributes(DOM,setup); - - for (var i=0; i<setup.childElementCount; i++) - { - var node = DOM.getElementsByClassName(setup.children[i].nodeName); - if (node.length != 0) - { - node = node[0]; - setAttributes(node,setup.children[i]); - buildNode(node,setup.children[i]); - } - } - - var holders = xml.getElementsByTagName('audioHolder'); - for (var i=0; i<holders.length; i++) - { - var node = addAudioHolder(); - document.getElementById('topLevelBody').appendChild(node); - setAttributes(node,holders[i]); - buildNode(node,holders[i]); - } - } - - function setAttributes(node,xml) - { - var attribs = node.getElementsByClassName('attrib'); - if (attribs.length != 0){ - attribs = attribs[0]; - for (var i=0; i < attribs.children.length; i++) - { - if(attribs.children[i].getAttribute('name')=='attribute'){ - var input = attribs.children[i].children[1]; - var value = xml.attributes.getNamedItem(input.getAttribute('attrib-name')); - if (value != undefined) {value = value.value;} - if (input.type == 'checkbox') - {input.checked = value;} - else - {input.value = value;} - } else if(attribs.children[i].getAttribute('name')=='element'){ - var input = attribs.children[i].children[1]; - input.value = xml.textContent; - } - } - } - } - - function buildNode(parent,xml) - { - for (var i=0; i<xml.childElementCount; i++) - { - var child = xml.children[i]; - var name = child.nodeName; - var node = null; - if (name == 'statement'){node = addPPStatement();} - else if (name == 'question' || name == 'number'){node = addPPQuestion();} - else if (name == 'checkbox'){node = addPPCheckbox();} - else if (name == 'radio'){node = addPPRadio();} - else if (name == 'metricEnable'){node = addMetricEnable();} - else if (name == 'check'){node = addInterfaceCheck();} - else if (name == 'option'){node = addInterfaceOption();} - else if (name == 'scale'){node = addScaleMarker();} - else if (name == 'audioHolder'){node = addAudioHolder();} - else if (name == 'audioElements'){node = addAudioElement();} - else if (name == 'commentQuestion'){node = addExtraComment();} - else if (name == 'interface'){node = parent.getElementsByClassName('interface')[0];} - else if (name == 'preTest' || name == 'PreTest') - { - node = parent.getElementsByClassName('preTest')[0]; - } - else if (name == 'postTest' || name == 'PostTest') - { - node = parent.getElementsByClassName('postTest')[0]; - } - else if (name == 'title' || name == 'commentBoxPrefix') - { - node = parent.getElementsByClassName(name)[0]; - } - if (node != null) { - if (name == 'radio' || name == 'checkbox') - { - buildRadio(node,xml.children[i]); - parent.appendChild(node); - } else - { - setAttributes(node,child); - parent.appendChild(node); - buildNode(node,child); - } - } else { - var node = createHead(name,name,'h3'); - - var attrib = document.createElement('div'); - attrib.className = 'attrib'; - for (var j=0; j<child.attributes.length; j++) - { - attrib.appendChild(attributePair('text',child.attributes[j].name,child.attributes[j].name,false)); - } - - node.appendChild(attrib); - parent.appendChild(node); - setAttributes(node,child); - /* - buildNode(node,child); - */ - } - } - } - - function buildRadio(node,xml) - { - setAttributes(node,xml); - setAttributes(node.getElementsByClassName('statement')[0],xml.getElementsByTagName('statement')[0]); - var options = xml.getElementsByTagName('option'); - var addOptionButton = node.getElementsByTagName('button')[2]; - for (var i=0; i<options.length; i++) - { - addOptionButton.click(); - setAttributes(node.getElementsByClassName('option')[i],options[i]); - } - } - - function createHead(name,title,size) - { - var node = document.createElement('div'); - node.setAttribute('class','head '+name); - node.setAttribute('node-name',name); - if (size == undefined) - {var node_T = document.createElement('h3');} - else{var node_T = document.createElement(size);} - node_T.textContent = title; - node.appendChild(node_T); - node.appendChild(removeNodeButton()); - return node; - } - - function addPretestNode() - { - var node = createHead('preTest', 'Pre Test','h3'); - var addStatement = document.createElement('button'); - addStatement.textContent = 'Add Statement'; - addStatement.onclick = function(){event.srcElement.parentElement.appendChild(addPPStatement());}; - node.appendChild(addStatement); - var addQuestion = document.createElement('button'); - addQuestion.textContent = 'Add Question'; - addQuestion.onclick = function(){event.srcElement.parentElement.appendChild(addPPQuestion());}; - node.appendChild(addQuestion); - var addCheckbox = document.createElement('button'); - addCheckbox.textContent = 'Add Checkbox'; - addCheckbox.onclick = function(){event.srcElement.parentElement.appendChild(addPPCheckbox());}; - node.appendChild(addCheckbox); - var addRadio = document.createElement('button'); - addRadio.textContent = 'Add Checkbox'; - addRadio.onclick = function(){event.srcElement.parentElement.appendChild(addPPRadio());}; - node.appendChild(addRadio); - return node; - }; - - function addPosttestNode() - { - var node = createHead('postTest', 'Post Test','h3'); - var addStatement = document.createElement('button'); - addStatement.textContent = 'Add Statement'; - addStatement.onclick = function(){event.srcElement.parentElement.appendChild(addPPStatement());}; - node.appendChild(addStatement); - var addQuestion = document.createElement('button'); - addQuestion.textContent = 'Add Question'; - addQuestion.onclick = function(){event.srcElement.parentElement.appendChild(addPPQuestion());}; - node.appendChild(addQuestion); - var addCheckbox = document.createElement('button'); - addCheckbox.textContent = 'Add Checkbox'; - addCheckbox.onclick = function(){event.srcElement.parentElement.appendChild(addPPCheckbox());}; - node.appendChild(addCheckbox); - var addRadio = document.createElement('button'); - addRadio.textContent = 'Add Checkbox'; - addRadio.onclick = function(){event.srcElement.parentElement.appendChild(addPPRadio());}; - node.appendChild(addRadio); - return node; - }; - - function addPPStatement() - { - var node = createHead('statement', 'Statement','h4'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - var element = document.createElement('div'); - element.setAttribute('name','element'); - var span = document.createElement('span'); - span.textContent = "Enter statement: "; - element.appendChild(span); - var input = document.createElement('input'); - input.type = "text"; - input.style.width = "500px"; - element.appendChild(input); - attrib.appendChild(element); - node.appendChild(attrib); - return node; - }; - function addPPQuestion() - { - var node = createHead('question', 'Question','h4'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - attrib.appendChild(attributePair('text','ID: ','id',true)); - attrib.appendChild(attributePair('checkbox','Mandatory: ','mandatory',false)); - attrib.appendChild(attributePair('text','Box size: ','boxsize',false)); - var element = document.createElement('div'); - element.setAttribute('name','element'); - var span = document.createElement('span'); - span.textContent = "Enter Question: "; - element.appendChild(span); - var input = document.createElement('input'); - input.type = "text"; - input.style.width = "500px"; - element.appendChild(input); - attrib.appendChild(element); - node.appendChild(attrib); - return node; - }; - function addPPCheckbox() - { - var node = createHead('checkbox', 'Checkbox','h4'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - attrib.appendChild(attributePair('text','ID: ','id',true)); - attrib.appendChild(attributePair('checkbox','Mandatory: ','mandatory',false)); - node.appendChild(attrib); - node.appendChild(addPPStatement()); - var addOption = document.createElement('button'); - addOption.textContent = 'Add Checkbox'; - addOption.onclick = function() { - var node = createHead('option', 'Option','h4'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - attrib.appendChild(attributePair('text','ID: ','id',true)); - var element = document.createElement('div'); - element.setAttribute('name','element'); - var span = document.createElement('span'); - span.textContent = "Enter Text: "; - var input = document.createElement('input'); - input.type = 'text'; - element.appendChild(span); - element.appendChild(input); - attrib.appendChild(element); - node.appendChild(attrib); - event.srcElement.parentElement.appendChild(node); - }; - node.appendChild(addOption); - return node; - }; - - function addPPRadio() - { - var node = createHead('radio', 'Radio','h4'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - attrib.appendChild(attributePair('text','ID: ','id',true)); - attrib.appendChild(attributePair('checkbox','Mandatory: ','mandatory',false)); - node.appendChild(attrib); - node.appendChild(addPPStatement()); - var addOption = document.createElement('button'); - addOption.textContent = 'Add Radio'; - addOption.onclick = function() { - var node = createHead('option', 'Option','h4'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - attrib.appendChild(attributePair('text','Name: ','name',true)); - var element = document.createElement('div'); - element.setAttribute('name','element'); - var span = document.createElement('span'); - span.textContent = "Enter Text: "; - var input = document.createElement('input'); - input.type = 'text'; - element.appendChild(span); - element.appendChild(input); - attrib.appendChild(element); - node.appendChild(attrib); - event.srcElement.parentElement.appendChild(node); - }; - node.appendChild(addOption); - return node; - }; - - function addMetricEnable() - { - var node = createHead('metricEnable', '','h4'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - var element = document.createElement('div'); - element.setAttribute('name','element'); - var span = document.createElement('span'); - span.textContent = "Enter Metric Name: "; - element.appendChild(span); - var input = document.createElement('input'); - input.type = "text"; - input.style.width = "500px"; - element.appendChild(input); - attrib.appendChild(element); - node.appendChild(attrib); - return node; - }; - - function addInterfaceCheck() - { - var node = createHead('check', 'Check','h4'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - attrib.appendChild(attributePair('text','Name','name',true)); - node.appendChild(attrib); - return node; - } - function addInterfaceOption() - { - var node = createHead('option', 'Option','h4'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - attrib.appendChild(attributePair('text','Name','name',true)); - node.appendChild(attrib); - return node; - } - - - function addAudioHolder() - { - var node = createHead('audioHolder','Audio Holder / Test Page','h2'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - node.appendChild(attrib); - - attrib.appendChild(attributePair('text','ID: ','id',true)); - attrib.appendChild(attributePair('url','Host URL: ','hostURL',false)); - attrib.appendChild(attributePair('number','Sample Rate: ','sampleRate',false)); - attrib.appendChild(attributePair('checkbox','Randomise Fragment Order: ','randomiseOrder',false)); - attrib.appendChild(attributePair('number','Repeat Count: ','repeatCount',false)); - attrib.appendChild(attributePair('checkbox','Loop Fragments: ','loop',false)); - attrib.appendChild(attributePair('checkbox','Fragment Comment Boxes: ','enableComments',false)); - - node.appendChild(addPretestNode()); - - node.appendChild(addPosttestNode()); - - var interfaceNode = createHead('interface','Interface','h3'); - var addOption = document.createElement('button'); - addOption.textContent = 'Add Option'; - addOption.onclick = function(){event.srcElement.parentElement.appendChild(addInterfaceOption());}; - interfaceNode.appendChild(addOption); - var scale = document.createElement('button'); - scale.textContent = 'Add scale'; - scale.onclick = function(){event.srcElement.parentElement.appendChild(addScaleMarker());}; - interfaceNode.appendChild(scale); - - var PageTitle = createHead('title','Page Title','h4'); - var attrib = document.createElement('div'); - attrib.className='attrib'; - var element = document.createElement('div'); - element.setAttribute('name','element'); - var span = document.createElement('span'); - span.textContent = 'Page Title: '; - element.appendChild(span); - var input = document.createElement('input'); - input.type = 'text'; - input.style.width = "500px"; - element.appendChild(input); - attrib.appendChild(element); - PageTitle.appendChild(attrib); - interfaceNode.appendChild(PageTitle); - - var commentBoxPrefix = createHead('commentBoxPrefix','Comment Box Prefix','h4'); - var attrib = document.createElement('div'); - attrib.className='attrib'; - var element = document.createElement('div'); - element.setAttribute('name','element'); - var span = document.createElement('span'); - span.textContent = 'Prefix: '; - element.appendChild(span); - var input = document.createElement('input'); - input.type = 'text'; - input.style.width = "500px"; - element.appendChild(input); - attrib.appendChild(element); - commentBoxPrefix.appendChild(attrib); - interfaceNode.appendChild(commentBoxPrefix); - - node.appendChild(interfaceNode); - - var addElement = document.createElement('button'); - addElement.textContent = 'Add Audio Element'; - addElement.onclick = function(){event.srcElement.parentElement.appendChild(addAudioElement());}; - node.appendChild(addElement); - - var addCQ = document.createElement('button'); - addCQ.textContent = 'Add Comment Box'; - addCQ.onclick = function(){event.srcElement.parentElement.appendChild(addExtraComment());}; - node.appendChild(addCQ); - - return node; - }; - - function addScaleMarker(){ - var node = createHead('scale','Scale','h4'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - node.appendChild(attrib); - attrib.appendChild(attributePair('number','Position','position',true)); - var element = document.createElement('div'); - element.setAttribute('name','element'); - var span = document.createElement('span'); - span.textContent = 'Marker Text (Optional): '; - element.appendChild(span); - var input = document.createElement('input'); - input.type = 'text'; - element.appendChild(input); - attrib.appendChild(element); - return node; - }; - - function addAudioElement() - { - var node = createHead('audioElements','Audio Element'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - node.appendChild(attrib); - - attrib.appendChild(attributePair('text','ID: ','id',true)); - attrib.appendChild(attributePair('text','URL: ','url',true)); - attrib.appendChild(attributePair('text','Type: ','type',false)); - - return node; - }; - - function addExtraComment() - { - var node = createHead('CommentQuestion','Comment'); - var attrib = document.createElement('div'); - attrib.className = "attrib"; - node.appendChild(attrib); - attrib.appendChild(attributePair('text','ID: ','id',true)); - - var element = document.createElement('div'); - element.setAttribute('name','element'); - var span = document.createElement('span'); - span.textContent = 'Question: '; - element.appendChild(span); - var input = document.createElement('input'); - input.type = 'text'; - input.style.width = "500px"; - element.appendChild(input); - attrib.appendChild(element); - return node; - } - </script> - - <style> - h4 {margin: 0px;} - div { - padding: 2px; - margin-top: 2px; - margin-bottom: 2px; - } - div.head{ - margin-left: 10px; - border: black; - border-width: 2px; - border-style: solid; - } - div.attrib{ - margin-left:25px; - border: black; - border-width: 2px; - border-style: dashed; - margin-bottom: 10px; - display: table; - background-color: rgb(200,255,255); - } - div.attrib div { - width: auto; - position: relative; - display: table-cell; - } - div#dragFile{ - height:100px; - border-width: 2px; - border-style: dashed; - margin-bottom: 10px; - } - </style> - </head> - - <body> - <h1>Create Test Setup XML</h1> - <div id="dragFile"> - <span>Drag and Drop an XML specification file here to auto-load.</span> - </div> - <button id="validateXML" onclick="buttonClickedValidate();">Validate</button> - <button id="createXML" onclick="buttonClickedSubmit();" disabled>Submit</button> - <div id="errorMessage" visibility="hidden"></div> - <div id="topLevelBody" align="left"> - <div id='setup' class="head setup" node-name='setup'> - <h2>Setup Node</h2> - <div class="attrib"> - <div name="attribute"> - <span>Interface: </span> - <input type="text" attrib-name='interface' mandatory='true'/> - </div> - <div name="attribute"> - <span>Project Return: </span> - <input type="url" attrib-name='projectReturn'/> - </div> - <div name="attribute"> - <span>Randomise Page Order: </span> - <input type="checkbox" attrib-name='randomiseOrder'/> - </div> - <div name="attribute"> - <span>Collect Metrics: </span> - <input type="checkbox" attrib-name='collectMetrics'/> - </div> - </div> - <div class="head PreTest" node-name="preTest"> - <h3>Pre Test</h3> - <button onclick="event.srcElement.parentElement.appendChild(addPPStatement());">Add Statement</button> - <button onclick="event.srcElement.parentElement.appendChild(addPPQuestion());">Add Question</button> - <button onclick="event.srcElement.parentElement.appendChild(addPPCheckbox());">Add Checkbox</button> - <button onclick="event.srcElement.parentElement.appendChild(addPPRadio());">Add Radio</button> - </div> - <div class="head PostTest" node-name="postTest"> - <h3>Post Test</h3> - <button onclick="event.srcElement.parentElement.appendChild(addPPStatement());">Add Statement</button> - <button onclick="event.srcElement.parentElement.appendChild(addPPQuestion());">Add Question</button> - <button onclick="event.srcElement.parentElement.appendChild(addPPCheckbox());">Add Checkbox</button> - <button onclick="event.srcElement.parentElement.appendChild(addPPRadio());">Add Radio</button> - </div> - <div class="head Metric" node-name="metrics"> - <h3>Metrics</h3> - <button onclick="event.srcElement.parentElement.appendChild(addMetricEnable());">Add Metric Enable</button> - </div> - <div class="head interface" node-name="interface"> - <h3>Interface</h3> - <button onclick="event.srcElement.parentElement.appendChild(addInterfaceCheck());">Add Check</button> - <button onclick="event.srcElement.parentElement.appendChild(addInterfaceOption());">Add Option</button> - </div> - </div> - <button onclick="event.srcElement.parentElement.appendChild(addAudioHolder());">Add Audio Holder</button> - </div> - </body> -</html>