Mercurial > hg > webaudioevaluationtool
changeset 2583:5f7c11fa5f83
Added <surveyslider> to <survey> nodes. Supports min, max, minText and maxText.
| author | Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk> |
|---|---|
| date | Mon, 31 Oct 2016 16:34:55 +0000 |
| parents | 224842b28bf2 |
| children | 2b02df54211e |
| files | css/core.css js/core.js js/specification.js tests/examples/AB_example.xml xml/test-schema.xsd |
| diffstat | 5 files changed, 96 insertions(+), 6 deletions(-) [+] |
line wrap: on
line diff
--- a/css/core.css Mon Oct 31 16:08:24 2016 +0000 +++ b/css/core.css Mon Oct 31 16:34:55 2016 +0000 @@ -101,6 +101,12 @@ table.popup-option-list tr td { padding: 5px; } +div.survey-slider-text-holder { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 0px 15px; +} button#popup-proceed { bottom: 10px; right: 10px;
--- a/js/core.js Mon Oct 31 16:08:24 2016 +0000 +++ b/js/core.js Mon Oct 31 16:34:55 2016 +0000 @@ -799,13 +799,13 @@ } else if (node.specification.type == 'number') { var input = document.createElement('input'); input.type = 'textarea'; - if (node.min != null) { + if (node.specification.min != null) { input.min = node.specification.min; } - if (node.max != null) { + if (node.specification.max != null) { input.max = node.specification.max; } - if (node.step != null) { + if (node.specification.step != null) { input.step = node.specification.step; } if (node.response != undefined) { @@ -823,6 +823,30 @@ iframe.className = "youtube"; iframe.src = node.specification.url; this.popupResponse.appendChild(iframe); + } else if (node.specification.type == "slider") { + var hold = document.createElement('div'); + var input = document.createElement('input'); + input.type = 'range'; + input.style.width = "90%"; + if (node.specification.min != null) { + input.min = node.specification.min; + } + if (node.specification.max != null) { + input.max = node.specification.max; + } + if (node.response != undefined) { + input.value = node.response; + } + hold.className = "survey-slider-text-holder"; + var minText = document.createElement('span'); + var maxText = document.createElement('span'); + minText.textContent = node.specification.leftText; + maxText.textContent = node.specification.rightText; + hold.appendChild(minText); + hold.appendChild(maxText); + this.popupResponse.appendChild(input); + this.popupResponse.appendChild(hold); + this.popupResponse.style.textAlign = "center"; } if (this.currentIndex + 1 == this.popupOptions.length) { if (this.node.location == "pre") { @@ -1107,6 +1131,49 @@ break; } } + } else if (node.specification.type == 'slider') { + var input = this.popupContent.getElementsByTagName('input')[0]; + node.response = input.value; + for (var condition of node.specification.conditions) { + var pass = false; + switch (condition.check) { + case "contains": + console.log("Survey Element of type 'number' cannot interpret contains conditions. IGNORING"); + break; + case "greaterThan": + if (node.response > Number(condition.value)) { + pass = true; + } + break; + case "lessThan": + if (node.response < Number(condition.value)) { + pass = true; + } + break; + case "equals": + if (node.response == condition.value) { + pass = true; + } + break; + } + var jumpID; + if (pass) { + jumpID = condition.jumpToOnPass; + } else { + jumpID = condition.jumpToOnFail; + } + if (jumpID != undefined) { + var index = this.popupOptions.findIndex(function (item, index, element) { + if (item.specification.id == jumpID) { + return true; + } else { + return false; + } + }, this); + this.currentIndex = index - 1; + break; + } + } } this.currentIndex++; if (this.currentIndex < this.popupOptions.length) { @@ -3327,6 +3394,7 @@ switch (node.specification.type) { case "number": case "question": + case "slider": var child = this.parent.document.createElement('response'); child.textContent = node.response; surveyresult.appendChild(child);
--- a/js/specification.js Mon Oct 31 16:08:24 2016 +0000 +++ b/js/specification.js Mon Oct 31 16:34:55 2016 +0000 @@ -278,8 +278,7 @@ }; this.exportXML = function (doc) { - var node = doc.createElement('surveyentry'); - node.setAttribute('type', this.type); + var node = doc.createElement('survey' + this.type); var statement = doc.createElement('statement'); statement.textContent = this.statement; node.appendChild(statement); @@ -340,6 +339,19 @@ node.setAttribute("url", this.url); } break; + case "slider": + node.setAttribute("min", this.min); + node.setAttribute("max", this.max); + if (this.leftText) { + var minText = doc.createElement("minText"); + minText.textContent = this.leftText; + node.appendChild(minText); + } + if (this.rightText) { + var maxText = doc.createElement("maxText"); + maxText.textContent = this.rightText; + node.appendChild(maxText); + } default: break; }
--- a/tests/examples/AB_example.xml Mon Oct 31 16:08:24 2016 +0000 +++ b/tests/examples/AB_example.xml Mon Oct 31 16:34:55 2016 +0000 @@ -2,6 +2,11 @@ <waet xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="test-schema.xsd"> <setup interface="AB" projectReturn="save.php" randomiseOrder='true' poolSize="2" loudness="-23" playOne="true"> <survey location="before"> + <surveyslider id="sliders" max="100" min="0"> + <statement>Sliders!!</statement> + <minText>Lefty</minText> + <maxText>Righty</maxText> + </surveyslider> <surveyquestion id="sessionId" mandatory="true"> <statement>Please enter your name.</statement> </surveyquestion>
--- a/xml/test-schema.xsd Mon Oct 31 16:08:24 2016 +0000 +++ b/xml/test-schema.xsd Mon Oct 31 16:34:55 2016 +0000 @@ -400,7 +400,6 @@ </xs:sequence> <xs:attribute ref="id" use="required" /> <xs:attribute ref="name" /> - <xs:attribute ref="mandatory" /> <xs:attribute name="min" use="required" type="xs:decimal" /> <xs:attribute name="max" use="required" type="xs:decimal" /> </xs:complexType>