comparison ape.js @ 657:1e64848f5940

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

 function loadInterface(xmlDoc) {
 	
 	// Get the dimensions of the screen available to the page
 	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');
 	testContent.id = 'testContent';

 	// Create the slider box to hold the slider elements
 	var canvas = document.createElement('div');
 	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);
 	
 	// Global parent for the comment boxes on the page
 	var feedbackHolder = document.createElement('div');

 		// Create a slider per track
 		
 		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;
 		
 		// Onclick, switch playback to that track
 		trackSliderObj.onclick = function() {

 	postTest = postTest[0];
 	if (preTest != undefined || postTest != undefined)
 	{
 		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);
 	}
 	
 	// Create Pre-Test Box
 	if (preTest != undefined && preTest.children.length >= 1)
 	{
 		
 		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';
 		// Parse the first box
 		var preTestOption = document.createElement('div');

 			preTestOption.appendChild(textEnter);
 		}
 		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];
 			// Check if current state is a question!
 			if (preTest.children[this.value-1].nodeName == 'question') {

 				{
 					var textHold = document.createElement('span');
 					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';
 			}
 			this.value++;
 		};

 
 }
 
 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 {
 		if (ev.x<50) {
 			this.style.left = '50px';