# HG changeset patch
# User Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
# Date 1450440244 0
# Node ID c08af4b5c9f30687d9231761d80f53dfade66a4f
# Parent  c418c34cd55ecd699546457a450feaba52de4ccb
MUSHRA: Slider styling across browsers so easy to see. Sliders start grey and turn white when moved. Added mushra example test

diff -r c418c34cd55e -r c08af4b5c9f3 example_eval/mushra_example.xml
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/example_eval/mushra_example.xml	Fri Dec 18 12:04:04 2015 +0000
@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="utf-8"?>
+<BrowserEvalProjectDocument>
+	<setup interface="MUSHRA" projectReturn="save.php" randomiseOrder='true' collectMetrics='true' testPages="2" loudness="-23">
+		<PreTest>
+			<question id="sessionId" mandatory="true">Please enter your name.</question>
+			<statement>This is an example of a 'MUSHRA'-style test, with two pages, using the test stimuli in 'example_eval/'.</statement>
+		</PreTest>
+		<PostTest>
+			<question id="location" mandatory="true" boxsize="large">Please enter your location. (example mandatory text question)</question>
+			<number id="age" min="0">Please enter your age (example non-mandatory number question)</number>
+			<radio id="rating">
+				<statement>Please rate this interface (example radio button question)</statement>
+				<option name="bad">Bad</option>
+				<option name="poor">Poor</option>
+				<option name="good">Good</option>
+				<option name="great">Great</option>
+			</radio>
+			<statement>Thank you for taking this listening test. Please click 'submit' and your results will appear in the 'saves/' folder.</statement>
+		</PostTest>
+		<Metric>
+			<metricEnable>testTimer</metricEnable>
+			<metricEnable>elementTimer</metricEnable>
+			<metricEnable>elementInitialPosition</metricEnable>
+			<metricEnable>elementTracker</metricEnable>
+			<metricEnable>elementFlagListenedTo</metricEnable>
+			<metricEnable>elementFlagMoved</metricEnable>
+			<metricEnable>elementListenTracker</metricEnable>
+		</Metric>
+		<interface>
+			<check name="fragmentMoved"/>
+			<option name='playhead'/>
+			<option name="page-count"/>
+		</interface>
+	</setup>
+	<audioHolder id='test-0' hostURL="example_eval/" randomiseOrder='true' repeatCount='0' loop='true' elementComments='true' loudness="-12" initial-position='50'>
+		<interface name="preference">
+			<check name='fragmentPlayed'/>
+			<scale position="0">Min</scale>
+			<scale position="100">Max</scale>
+			<scale position="50">Middle</scale>
+			<scale position="20">20</scale>
+			<commentBoxPrefix>Comment on fragment</commentBoxPrefix>
+		</interface>
+		<audioElements url="0.wav" id="0" type="anchor"/>
+		<audioElements url="1.wav" id="1"/>
+		<audioElements url="2.wav" id="2"/>
+		<audioElements url="3.wav" id="3"/>
+		<audioElements url="4.wav" id="4"/>
+		<PreTest>
+			<statement>Example of an 'MUSHRA' style interface with hidden anchor 'zero' (which needs to be below 20%), looping of the samples, randomisation of marker labels, mandatory moving of every sample, mandatory listening of every sample and set initialisation to 50% </statement>
+		</PreTest>
+		<PostTest>
+			<question id="genre" mandatory="true">Please enter the genre.</question>
+		</PostTest>
+	</audioHolder>
+    <audioHolder id='test-1' hostURL="example_eval/" randomiseOrder='true' repeatCount='0' loop='false' elementComments='true'>
+        <interface name="preference">
+            <title>Example Test Question</title>
+            <scale position="0">Min</scale>
+            <scale position="100">Max</scale>
+            <scale position="50">Middle</scale>
+            <scale position="75">75</scale>
+            <scalerange min="25" max="75"/>
+            <commentBoxPrefix>Comment on fragment</commentBoxPrefix>
+        </interface>
+        <audioElements url="0.wav" gain="-6" id="0" type="anchor" marker="20"/>
+        <audioElements url="1.wav" gain="0.0" id="1" type="reference" marker="80"/>
+        <audioElements url="2.wav" gain="0.0" id="2"/>
+        <audioElements url="3.wav" gain="0.0" id="3"/>
+        <audioElements url="4.wav" gain="0.0" id="4"/>
+        <audioElements url="5.wav" gain="0.0" id="5"/>
+        <audioElements url="6.wav" gain="0.0" id="6" type="outsidereference"/>
+        <CommentQuestion id='mixingExperience' type="text">What is your general experience with numbers?</CommentQuestion>
+        <CommentQuestion id="preference" type="radio">
+            <statement>Please enter your overall preference</statement>
+            <option name="worst">Very Bad</option>
+            <option name="bad"></option>
+            <option name="OK">OK</option>
+            <option name="Good"></option>
+            <option name="Great">Great</option>
+        </CommentQuestion>
+        <CommentQuestion id="preference" type="checkbox">
+            <statement>Please describe the overall character</statement>
+            <option name="funky">Funky</option>
+            <option name="mellow">Mellow</option>
+            <option name="laidback">Laid back</option>
+            <option name="heavy">Heavy</option>
+        </CommentQuestion>
+        <PreTest>
+        	<statement>Example of an 'MUSHRA' style interface with outside reference 'six', hidden anchor 'zero' (which needs to be below 20%), hidden reference 'one' (which needs to be above 80%), randomisation of marker labels. </statement>
+        </PreTest>
+        <PostTest>
+            <question id="genre" mandatory="true">Please enter the genre.</question>
+        </PostTest>
+    </audioHolder>
+</BrowserEvalProjectDocument>
\ No newline at end of file
diff -r c418c34cd55e -r c08af4b5c9f3 mushra.css
--- a/mushra.css	Fri Dec 18 10:11:10 2015 +0000
+++ b/mushra.css	Fri Dec 18 12:04:04 2015 +0000
@@ -50,8 +50,7 @@
 }
 
 input.track-slider-range {
-	margin-left: 0px;
-	margin-right: 0px;
+	margin: 2px 0px;
 }
 
 input[type=range][orient=vertical]
@@ -61,4 +60,42 @@
     width: 8px;
     padding: 0 5px;
     color: rgb(255, 144, 144);
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+	width: 8px;
+	cursor: pointer;
+	background: #fff;
+	border-radius: 4px;
+	border: 1px solid #000;
+}
+
+input[type=range]::-moz-range-track {
+	width: 8px;
+	cursor: pointer;
+	background: #fff;
+	border-radius: 4px;
+	border: 1px solid #000;
+}
+
+input.track-slider-not-moved[type=range]::-webkit-slider-runnable-track {
+	background: #aaa;
+}
+
+input.track-slider-not-moved[type=range]::-moz-range-track {
+	background: #aaa;
+}
+
+input[type=range]::-moz-range-thumb {
+	margin-left: -7px;
+	cursor: pointer;
+	margin-top: -1px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
+	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
+}
+
+input[type=range]::-webkit-slider-thumb {
+	margin-left: -7px;
+	cursor: pointer;
+	margin-top: -1px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
+	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
 }
\ No newline at end of file
diff -r c418c34cd55e -r c08af4b5c9f3 mushra.js
--- a/mushra.js	Fri Dec 18 10:11:10 2015 +0000
+++ b/mushra.js	Fri Dec 18 12:04:04 2015 +0000
@@ -181,7 +181,7 @@
 	this.title.style.float = "left";
 	
 	this.slider.type = "range";
-	this.slider.className = "track-slider-range";
+	this.slider.className = "track-slider-range track-slider-not-moved";
 	this.slider.min = "0";
 	this.slider.max = "1";
 	this.slider.step = "0.01";
@@ -193,6 +193,7 @@
 		var id = Number(this.parentNode.getAttribute('trackIndex'));
 		audioEngineContext.audioObjects[id].metric.moved(time,this.value);
 		console.log('slider '+id+' moved to '+this.value+' ('+time+')');
+		$(this).removeClass('track-slider-not-moved');
 	};
 	
 	this.play.textContent = "Loading...";
@@ -202,7 +203,7 @@
 	this.play.disabled = true;
 	this.play.onclick = function(event)
 	{
-		var id = Number(event.srcElement.value);
+		var id = Number(event.currentTarget.value);
 		//audioEngineContext.metric.sliderPlayed(id);
 		audioEngineContext.play(id);
 		$(".track-slider").removeClass('track-slider-playing');
@@ -229,13 +230,13 @@
 	{
 		this.holder.style.height = window.innerHeight-200 + 'px';
 		this.slider.style.height = window.innerHeight-250 + 'px';
-	}
+	};
 	this.updateLoading = function(progress)
 	{
 		progress = String(progress);
 		progress = progress.substr(0,5);
 		this.play.textContent = "Loading: "+progress+"%";
-	}
+	};
 	
 	if (this.parent.state == 1)
 	{