Mercurial > hg > webaudioevaluationtool

changeset 2580:a6b32c473577

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Added minimum (left) and maximum (right) slider markers to the comment slider element
author Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
date Mon, 31 Oct 2016 15:14:53 +0000
parents d83b38564fbb
children 01df891a3390
files css/core.css js/core.js js/specification.js tests/examples/AB_example.xml xml/test-schema.xsd
diffstat 5 files changed, 126 insertions(+), 114 deletions(-) [+]
line wrap: on
line diff
--- a/css/core.css	Sun Oct 30 13:57:37 2016 +0000
+++ b/css/core.css	Mon Oct 31 15:14:53 2016 +0000
@@ -3,60 +3,53 @@
  */
 
 div.title {
-	width: 100%;
-	height: 50px;
-	margin-bottom: 10px;
-	font-size: 2em;
+    width: 100%;
+    height: 50px;
+    margin-bottom: 10px;
+    font-size: 2em;
 }
-
 div.indicator-box {
-	position: absolute;
-	left: 150px;
-	top: 10px;
-	width: 300px;
-	height: 60px;
-	padding: 20px;
-	border-radius: 10px;
-	background-color: rgb(100,200,200);
+    position: absolute;
+    left: 150px;
+    top: 10px;
+    width: 300px;
+    height: 60px;
+    padding: 20px;
+    border-radius: 10px;
+    background-color: rgb(100, 200, 200);
 }
-
 div.comment-div {
-	border:1px solid #444444;
-	max-width: 600px;
-	min-width: 400px;
-	float: left;
-	margin: 5px 10px 5px 5px;
-	height: 90px;
+    border: 1px solid #444444;
+    max-width: 600px;
+    min-width: 400px;
+    float: left;
+    margin: 5px 10px 5px 5px;
+    height: 90px;
     border-radius: 10px;
 }
-
 div.comment-div span {
-	margin-left: 15px;
+    margin-left: 15px;
 }
-
 div.popupHolder {
-	width: 500px;
-	min-height: 250px;
-	max-height: 400px;
-	background-color: #fff;
-	border-radius: 10px;
-	box-shadow: 0px 0px 50px #000;
-	z-index: 10;
-	position: fixed;
+    width: 500px;
+    min-height: 250px;
+    max-height: 400px;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0px 0px 50px #000;
+    z-index: 10;
+    position: fixed;
 }
-
 div#popupContent {
     margin-top: 20px;
     margin-bottom: 35px;
     overflow: auto;
 }
-
 div#popupContent iframe {
     width: 100%;
     border: 0px none;
     height: 290px;
 }
-
 div#popupTitleHolder {
     width: inherit;
     min-height: 25px;
@@ -66,11 +59,9 @@
     padding: 8px;
     text-align: center;
 }
-
 #popupTitle {
     white-space: pre-line;
 }
-
 div#popupResponse {
     width: inherit;
     min-height: 50px;
@@ -78,20 +69,18 @@
     overflow: auto;
     position: relative;
 }
-
 button.popupButton {
-	/* Button for popup window
+    /* Button for popup window
 	 */
-	width: 50px;
-	height: 25px;
-	position: absolute;
-	border-radius: 5px;
-	border: #444;
-	border-width: 1px;
-	border-style: solid;
-	background-color: #fff;
+    width: 50px;
+    height: 25px;
+    position: absolute;
+    border-radius: 5px;
+    border: #444;
+    border-width: 1px;
+    border-style: solid;
+    background-color: #fff;
 }
-
 div.popup-option-checbox {
     /* Popup window checkbox */
     padding: 5px;
@@ -99,46 +88,38 @@
     width: -moz-fit-content;
     width: -webkit-fit-content;
 }
-
-div.popup-option-checbox input{
+div.popup-option-checbox input {
     /* Popup window checkbox */
     margin-right: 15px;
 }
-
 table.popup-option-list {
     margin: auto;
 }
-
 table.popup-option-list tr {
     padding: 5px;
 }
-
 table.popup-option-list tr td {
     padding: 5px;
 }
-
 button#popup-proceed {
     bottom: 10px;
     right: 10px;
 }
-
 button#popup-previous {
     bottom: 10px;
     left: 10px;
 }
-
 div.testHalt {
-	/* Specify any colouring during the test halt for pre/post questions */
-	background-color: rgba(0,0,0,0.5);
-	/* Don't mess with this bit */
-	z-index: 9;
-	width: 100%;
-	height: 100%;
-	position: fixed;
-	left: 0px;
-	top: 0px;
+    /* Specify any colouring during the test halt for pre/post questions */
+    background-color: rgba(0, 0, 0, 0.5);
+    /* Don't mess with this bit */
+    z-index: 9;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    left: 0px;
+    top: 0px;
 }
-
 div#lightbox-root {
     visibility: hidden;
     z-index: 20;
@@ -146,80 +127,69 @@
     min-height: 50px;
     max-height: 250px;
 }
-
 div.lightbox-error {
     margin: 25px;
     margin-bottom: 50px;
     padding: 5px;
     border-radius: 5px;
-    background-color: rgb(255,220,220);
-    border: 2px rgb(200,0,0) solid;
+    background-color: rgb(255, 220, 220);
+    border: 2px rgb(200, 0, 0) solid;
 }
-
 div.lightbox-warning {
     margin: 25px;
     margin-bottom: 50px;
     padding: 5px;
     border-radius: 5px;
-    background-color: rgb(255,255,220);
-    border: 2px rgb(255,250,0) solid;
+    background-color: rgb(255, 255, 220);
+    border: 2px rgb(255, 250, 0) solid;
 }
-
 div.lightbox-message {
     margin: 25px;
     margin-bottom: 50px;
     padding: 5px;
     border-radius: 5px;
-    background-color: rgb(200,220,255);
-    border: 2px rgb(50,100,250) solid;
+    background-color: rgb(200, 220, 255);
+    border: 2px rgb(50, 100, 250) solid;
 }
-
 div#lightbox-blanker {
     visibility: hidden;
     z-index: 19;
 }
-
 button.outside-reference {
-	width:120px;
-	height:20px;
-	margin-bottom:5px;
-	position: absolute;
+    width: 120px;
+    height: 20px;
+    margin-bottom: 5px;
+    position: absolute;
 }
-
 textarea.trackComment {
-	max-width: 594px;
-	min-width: 350px;
-	max-height: 60px;
+    max-width: 594px;
+    min-width: 350px;
+    max-height: 60px;
     resize: none;
 }
-
 div.playhead {
-	width: 500px;
-	height: 50px;
-	background-color: #eee;
-	border-radius: 10px;
-	padding: 10px;
+    width: 500px;
+    height: 50px;
+    background-color: #eee;
+    border-radius: 10px;
+    padding: 10px;
 }
-
 div.playhead-scrub-track {
-	width: 100%;
-	height: 10px;
-	border-style: solid;
-	border-width: 1px;
+    width: 100%;
+    height: 10px;
+    border-style: solid;
+    border-width: 1px;
 }
-
 div#playhead-scrubber {
-	width: 10px;
-	height: 10px;
-	position: relative;
-	background-color: #000;
+    width: 10px;
+    height: 10px;
+    position: relative;
+    background-color: #000;
 }
-
 div.master-volume-holder-inline {
     width: 100%;
     padding: 5px;
 }
-
 div.master-volume-holder-float {
     position: absolute;
     top: 20px;
@@ -227,15 +197,13 @@
     width: 250px%;
     padding: 5px;
 }
-
 div#master-volume-root {
-    margin:auto;
+    margin: auto;
     border: black 1px solid;
     border-radius: 5px;
     width: 250px;
     height: 40px;
 }
-
 input#master-volume-control {
     width: 200px;
     height: 25px;
@@ -243,14 +211,12 @@
     margin: 0px;
     padding: 0px;
 }
-
 span#master-volume-feedback {
     width: 45px;
     height: 25px;
     margin-left: 5px;
     float: left;
 }
-
 div.error-colour {
     background-color: #FF8F8F;
 }
@@ -258,13 +224,11 @@
     background-color: #FF8F8F;
     color: black;
 }
-
 div.calibration-holder {
     text-align: center;
     align-content: center;
     height: auto;
 }
-
 div.calibration-slider {
     width: 50px;
     margin: 2px;
@@ -272,12 +236,23 @@
     align-content: center;
     float: left;
 }
-
-div.calibration-slider input[type=range][orient=vertical]
-{
-    writing-mode: bt-lr; /* IE */
-    -webkit-appearance: slider-vertical; /* WebKit */
+div.calibration-slider input[type=range][orient=vertical] {
+    writing-mode: bt-lr;
+    /* IE */
+    -webkit-appearance: slider-vertical;
+    /* WebKit */
     width: 8px;
     padding: 0 5px;
     height: 290px;
 }
+
+/*  Comment Boxes */
+
+div.comment-slider-text-holder {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+div.comment-slider-text-holder span {
+    margin: 0px 5px;
+}
--- a/js/core.js	Sun Oct 30 13:57:37 2016 +0000
+++ b/js/core.js	Mon Oct 31 15:14:53 2016 +0000
@@ -2644,9 +2644,20 @@
         this.slider.value = commentQuestion.value;
         var br = document.createElement('br');
 
+        var textHolder = document.createElement("div");
+        textHolder.className = "comment-slider-text-holder";
+
+        this.leftText = document.createElement("span");
+        this.leftText.textContent = commentQuestion.leftText;
+        this.rightText = document.createElement("span");
+        this.rightText.textContent = commentQuestion.rightText;
+        textHolder.appendChild(this.leftText);
+        textHolder.appendChild(this.rightText);
+
         this.holder.appendChild(this.string);
         this.holder.appendChild(br);
         this.holder.appendChild(this.slider);
+        this.holder.appendChild(textHolder);
 
         this.exportXMLDOM = function (storePoint) {
             var root = storePoint.parent.document.createElement('comment');
--- a/js/specification.js	Sun Oct 30 13:57:37 2016 +0000
+++ b/js/specification.js	Mon Oct 31 15:14:53 2016 +0000
@@ -663,6 +663,18 @@
                     if (this.value == undefined) {
                         this.value = min;
                     }
+                    this.leftText = xml.getElementsByTagName("minText");
+                    if (this.leftText && this.leftText.length > 0) {
+                        this.leftText = this.leftText[0].textContent;
+                    } else {
+                        this.leftText = "";
+                    }
+                    this.rightText = xml.getElementsByTagName("maxText");
+                    if (this.rightText && this.rightText.length > 0) {
+                        this.rightText = this.rightText[0].textContent;
+                    } else {
+                        this.rightText = "";
+                    }
                 }
             };
 
@@ -708,6 +720,16 @@
                     if (this.value !== this.min) {
                         node.setAttribute("value", this.value);
                     }
+                    if (this.leftText.length > 0) {
+                        var leftText = root.createElement("minText");
+                        leftText.textContent = this.leftText;
+                        node.appendChild(leftText);
+                    }
+                    if (this.rightText.length > 0) {
+                        var rightText = root.createElement("maxText");
+                        rightText.textContent = this.rightText;
+                        node.appendChild(rightText);
+                    }
                 }
                 return node;
             };
--- a/tests/examples/AB_example.xml	Sun Oct 30 13:57:37 2016 +0000
+++ b/tests/examples/AB_example.xml	Mon Oct 31 15:14:53 2016 +0000
@@ -63,6 +63,8 @@
             <commentquestions>
                 <commentslider id="slider" min="0" max="100">
                     <statement>Test</statement>
+                    <minText>Left</minText>
+                    <maxText>Right</maxText>
                 </commentslider>
             </commentquestions>
             <survey location="before">
--- a/xml/test-schema.xsd	Sun Oct 30 13:57:37 2016 +0000
+++ b/xml/test-schema.xsd	Mon Oct 31 15:14:53 2016 +0000
@@ -269,6 +269,8 @@
             <xs:complexType>
                 <xs:sequence>
                     <xs:element ref="statement" minOccurs="1" maxOccurs="1" />
+                    <xs:element name="minText" minOccurs="0" maxOccurs="1" type="xs:string" />
+                    <xs:element name="maxText" minOccurs="0" maxOccurs="1" type="xs:string" />
                 </xs:sequence>
                 <xs:attribute ref="id" use="optional" />
                 <xs:attribute ref="name" use="optional" />