changeset 671:9ea50bbcaf9a

Added customised scale - NEED TO ENTER INTO DOCUMENTATION!

--- a/ape.css	Fri Apr 10 17:43:53 2015 +0100
+++ b/ape.css	Fri Apr 10 19:09:21 2015 +0100
@@ -11,6 +11,11 @@
 	/* Specify any colouring for the title */
 }
 
+div.pageTitle {
+	width: auto;
+	height: 20px;
+}
+
 div.testHalt {
 	/* Specify any colouring during the test halt for pre/post questions */
 	background-color: rgba(0,0,0,0.5);
@@ -33,7 +38,20 @@
 	/* Specify any structure for the slider holder interface */
 	background-color: #eee;
 	height: 150px;
-	margin-bottom: 25px;
+	margin-bottom: 5px;
+}
+
+div.sliderScale {
+	width: 100%;
+	min-height: 20px;
+}
+
+div.sliderScale span {
+	/* Any formatting of text below scale */
+	min-width: 5px;
+	height: 20px;
+	height: 100%;
+	position: absolute;
 }
 
 div.track-slider {

--- a/ape.js	Fri Apr 10 17:43:53 2015 +0100
+++ b/ape.js	Fri Apr 10 19:09:21 2015 +0100
@@ -79,6 +79,13 @@
 	// Insert the titleSpan element into the title div element.
 	title.appendChild(titleSpan);
 	
+	var pagetitle = document.createElement('div');
+	pagetitle.className = "pageTitle";
+	pagetitle.align = "center";
+	var titleSpan = document.createElement('span');
+	titleSpan.id = "pageTitle";
+	pagetitle.appendChild(titleSpan);
+	
 	// Store the return URL path in global projectReturn
 	projectReturn = xmlSetup[0].attributes['projectReturn'].value;
 	
@@ -130,6 +137,13 @@
 	canvas.align = "left";
 	sliderBox.appendChild(canvas);
 	
+	// Create the div to hold any scale objects
+	var scale = document.createElement('div');
+	scale.className = 'sliderScale';
+	scale.id = 'sliderScaleHolder';
+	scale.align = 'left';
+	sliderBox.appendChild(scale);
+	
 	// Global parent for the comment boxes on the page
 	var feedbackHolder = document.createElement('div');
 	feedbackHolder.id = 'feedbackHolder';
@@ -167,6 +181,7 @@
 	
 	// Inject into HTML
 	testContent.appendChild(title); // Insert the title
+	testContent.appendChild(pagetitle);
 	testContent.appendChild(interfaceButtons);
 	testContent.appendChild(sliderBox);
 	testContent.appendChild(feedbackHolder);
@@ -185,6 +200,27 @@
 	var canvas = document.getElementById('slider');
 	feedbackHolder.innerHTML = null;
 	canvas.innerHTML = null;
+	
+	// Setup question title
+	var interfaceObj = $(textXML).find('interface');
+	var titleNode = interfaceObj.find('title');
+	if (titleNode[0] != undefined)
+	{
+		document.getElementById('pageTitle').textContent = titleNode[0].textContent;
+	}
+	var positionScale = canvas.style.width.substr(0,canvas.style.width.length-2);
+	var offset = 50-8;  // Half the offset of the slider (window width -100) minus the body padding of 8
+	// TODO: AUTOMATE ABOVE!!
+	var scale = document.getElementById('sliderScaleHolder');
+	scale.innerHTML = null;
+	interfaceObj.find('scale').each(function(index,scaleObj){
+		var position = Number(scaleObj.attributes['position'].value)*0.01;
+		var pixelPosition = (position*positionScale)+offset;
+		var scaleDOM = document.createElement('span');
+		scaleDOM.textContent = scaleObj.textContent;
+		scale.appendChild(scaleDOM);
+		scaleDOM.style.left = Math.floor((pixelPosition-($(scaleDOM).width()/2)))+'px';
+	});
 
 	// Extract the hostURL attribute. If not set, create an empty string.
 	var hostURL = textXML.attributes['hostURL'];

--- a/example_eval/project.xml	Fri Apr 10 17:43:53 2015 +0100
+++ b/example_eval/project.xml	Fri Apr 10 19:09:21 2015 +0100
@@ -18,6 +18,13 @@
 		</Metric>
 	</setup>
 	<audioHolder id='0' hostURL="example_eval/" sampleRate="44100" randomiseOrder='true' repeatCount='1'>
+		<interface>
+			<title>Example Test Question</title>
+			<scale position="0">Min</scale>
+			<scale position="100">Max</scale>
+			<scale position="50">Middle</scale>
+			<scale position="20">20</scale>
+		</interface>
 		<audioElements url="0.wav" id="0"/>
 		<audioElements url="1.wav" id="1"/>
 		<audioElements url="2.wav" id="2"/>