changeset 657:1e64848f5940

Added ape.css, removed styles from .js to clean up.

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/ape.css	Fri Apr 10 12:02:10 2015 +0100
@@ -0,0 +1,70 @@
+/*
+ * Hold any style information for APE interface. Customise if you like to make the interface your own!
+ * 
+ */
+body {
+	/* Set the background colour (note US English spelling) to grey*/
+	background-color: #ddd
+}
+
+div.title {
+	/* Specify any colouring for the title */
+}
+
+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: 2;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	left: 0px;
+	top: 0px;
+}
+
+button {
+	/* Specify any button structure or style */
+	min-width: 20px;
+	background-color: #ddd
+}
+
+div#slider {
+	/* Specify any structure for the slider holder interface */
+	background-color: #eee;
+	height: 150px;
+	margin-bottom: 25px;
+}
+
+div.track-slider {
+	/* Specify any strcture for the slider objects */
+	position: absolute;
+	height: inherit;
+	width: 12px;
+	float: left;
+	background-color: rgb(100,200,100);
+}
+
+div.popupHolder {
+	width: 500px;
+	height: 250px;
+	background-color: #fff;
+	border-radius: 10px;
+	box-shadow: 0px 0px 50px #000;
+	z-index: 2;
+}
+
+button#preTestNext {
+	/* Button for popup window
+	 */
+	width: 50px;
+	height: 25px;
+	position: absolute;
+	left: 440px;
+	top: 215px;
+	border-radius: 5px;
+	border: #444;
+	border-width: 1px;
+	border-style: solid;
+	background-color: #fff;
+}

--- a/ape.js	Fri Apr 10 10:25:52 2015 +0100
+++ b/ape.js	Fri Apr 10 12:02:10 2015 +0100
@@ -23,9 +23,6 @@
 	var width = window.innerWidth;
 	var height = window.innerHeight;
 	
-	// Set background to grey #ddd
-	document.getElementsByTagName('body')[0].style.backgroundColor = '#ddd';
-	
 	// The injection point into the HTML page
 	var insertPoint = document.getElementById("topLevelBody");
 	var testContent = document.createElement('div');
@@ -104,9 +101,6 @@
 	canvas.id = 'slider';
 	// Must have a known EXACT width, as this is used later to determine the ratings
 	canvas.style.width = width - 100 +"px";
-	canvas.style.height = 150 + "px";
-	canvas.style.marginBottom = "25px";
-	canvas.style.backgroundColor = '#eee';
 	canvas.align = "left";
 	sliderBox.appendChild(canvas);
 	
@@ -166,16 +160,11 @@
 		var trackSliderObj = document.createElement('div');
 		trackSliderObj.className = 'track-slider';
 		trackSliderObj.id = 'track-slider-'+index;
-		trackSliderObj.style.position = 'absolute';
 		// Distribute it randomnly
 		var w = window.innerWidth - 100;
 		w = Math.random()*w;
 		trackSliderObj.style.left = Math.floor(w)+50+'px';
-		trackSliderObj.style.height = "150px";
-		trackSliderObj.style.width = "10px";
-		trackSliderObj.style.backgroundColor = 'rgb(100,200,100)';
 		trackSliderObj.innerHTML = '<span>'+index+'</span>';
-		trackSliderObj.style.float = "left";
 		trackSliderObj.draggable = true;
 		trackSliderObj.ondragend = dragEnd;
 		
@@ -208,13 +197,7 @@
 	{
 		testContent.style.zIndex = 1;
 		var blank = document.createElement('div');
-		blank.id = 'testHalt';
-		blank.style.zIndex = 2;
-		blank.style.width = window.innerWidth + 'px';
-		blank.style.height = window.innerHeight + 'px';
-		blank.style.position = 'absolute';
-		blank.style.top = '0';
-		blank.style.left = '0';
+		blank.className = 'testHalt';
 		insertPoint.appendChild(blank);
 	}
 	
@@ -224,10 +207,7 @@
 		
 		var preTestHolder = document.createElement('div');
 		preTestHolder.id = 'preTestHolder';
-		preTestHolder.style.zIndex = 2;
-		preTestHolder.style.width = '500px';
-		preTestHolder.style.height = '250px';
-		preTestHolder.style.backgroundColor = '#fff';
+		preTestHolder.className = 'popupHolder';
 		preTestHolder.style.position = 'absolute';
 		preTestHolder.style.left = (window.innerWidth/2)-250 + 'px';
 		preTestHolder.style.top = (window.innerHeight/2)-125 + 'px';
@@ -253,10 +233,7 @@
 		var nextButton = document.createElement('button');
 		nextButton.id = 'preTestNext';
 		nextButton.value = '1';
-		nextButton.innerHTML = 'next';
-		nextButton.style.position = 'relative';
-		nextButton.style.left = '450px';
-		nextButton.style.top = '175px';
+		nextButton.innerHTML = 'Next';
 		nextButton.onclick = function() {
 			// Need to find and parse preTest again!
 			var preTest = projectXML.find('PreTest')[0];
@@ -282,15 +259,17 @@
 					textHold.innerHTML = child.innerHTML;
 					var textEnter = document.createElement('textarea');
 					textEnter.id = child.attributes['id'].value + 'response';
+					var br = document.createElement('br');
 					preTestOption.innerHTML = null;
 					preTestOption.appendChild(textHold);
+					preTestOption.appendChild(br);
 					preTestOption.appendChild(textEnter);
 				}
 			} else {
 				// Time to clear
 				preTestHolder.style.zIndex = -1;
 				preTestHolder.style.visibility = 'hidden';
-				var blank = document.getElementById('testHalt');
+				var blank = document.getElementsByClassName('testHalt')[0];
 				blank.style.zIndex = -2;
 				blank.style.visibility = 'hidden';
 			}
@@ -306,6 +285,7 @@
 
 function dragEnd(ev) {
 	// Function call when a div has been dropped
+	var slider = document.getElementById('slider');
 	if (ev.x >= 50 && ev.x < window.innerWidth-50) {
 		this.style.left = (ev.x)+'px';
 	} else {

--- a/core.js	Fri Apr 10 10:25:52 2015 +0100
+++ b/core.js	Fri Apr 10 12:02:10 2015 +0100
@@ -20,12 +20,15 @@
 
 
 /* create the web audio API context and store in audioContext*/
-var audioContext;
-var projectXML;
-var audioEngineContext;
-var projectReturn;
-var preTestQuestions = document.createElement('PreTest');
-var postTestQuestions = document.createElement('PostTest');
+var audioContext; // Hold the browser web audio API
+var projectXML; // Hold the parsed setup XML
+var testXMLSetups; // Hold the parsed test instances
+var testResultsHolders; // Hold the results from each test for publishing to XML
+var currentTestHolder; // Hold an intermediate results during test - metrics
+var audioEngineContext; // The custome AudioEngine object
+var projectReturn; // Hold the URL for the return
+var preTestQuestions = document.createElement('PreTest'); // Store any pre-test question response
+var postTestQuestions = document.createElement('PostTest'); // Store any post-test question response
 
 window.onload = function() {
 	// Function called once the browser has loaded all files.
@@ -64,6 +67,14 @@
 	interfaceJS.setAttribute("type","text/javascript");
 	if (interfaceType.value == 'APE') {
 		interfaceJS.setAttribute("src","ape.js");
+		
+		// APE comes with a css file
+		var css = document.createElement('link');
+		css.rel = 'stylesheet';
+		css.type = 'text/css';
+		css.href = 'ape.css';
+		
+		document.getElementsByTagName("head")[0].appendChild(css);
 	}
 	document.getElementsByTagName("head")[0].appendChild(interfaceJS);
 }