changeset 305:b71d91792528

Merge from "dev_main". Added MUSHRA, PHP upload scripts, APE on Firefox, multi-screen support. Bug fixes #1370, #1298, #1391, #1300, #1389.

--- a/ape.js	Fri Sep 04 12:22:55 2015 +0200
+++ b/ape.js	Tue Sep 15 10:20:50 2015 +0100
@@ -3,12 +3,6 @@
  *  Create the APE interface
  */
 
-// preTest - In preTest state
-// testRun-ID - In test running, test Id number at the end 'testRun-2'
-// testRunPost-ID - Post test of test ID
-// testRunPre-ID - Pre-test of test ID
-// postTest - End of test, final submission!
-
 
 // Once this is loaded and parsed, begin execution
 loadInterface();
@@ -89,7 +83,7 @@
 		var strNums = [];
 		for (var i=0; i<audioObjs.length; i++)
 		{
-			if (audioObjs[i].metric.wasMoved == false) {
+			if (audioObjs[i].metric.wasMoved == false && audioObjs[i].specification.type != 'outsidereference') {
 				state = false;
 				strNums.push(i);
 			}
@@ -245,6 +239,8 @@
 	canvas.align = "left";
 	canvas.addEventListener('dragover',function(event){
 		event.preventDefault();
+		event.dataTransfer.effectAllowed = 'none';
+		event.dataTransfer.dropEffect = 'copy';
 		return false;
 	},false);
 	var sliderMargin = document.createAttribute('marginsize');
@@ -428,15 +424,15 @@
 		
 		var audioObject = audioEngineContext.newTrack(audioHolderObject.outsideReference);
 		
-		outsideReferenceHolder.onclick = function()
+		outsideReferenceHolder.onclick = function(event)
 		{
 			audioEngineContext.play(audioEngineContext.audioObjects.length-1);
 			$('.track-slider').removeClass('track-slider-playing');
             $('.comment-div').removeClass('comment-box-playing');
-            if (event.srcElement.nodeName == 'DIV') {
-            	$(event.srcElement).addClass('track-slider-playing');
+            if (event.currentTarget.nodeName == 'DIV') {
+            	$(event.currentTarget).addClass('track-slider-playing');
             } else {
-            	$(event.srcElement.parentElement).addClass('track-slider-playing');
+            	$(event.currentTarget.parentElement).addClass('track-slider-playing');
             }
 		};
 		
@@ -458,34 +454,40 @@
 	this.trackSliderObj.innerHTML = '<span>'+audioObject.id+'</span>';
 	this.trackSliderObj.draggable = true;
 	this.trackSliderObj.ondragend = dragEnd;
+	
+	this.trackSliderObj.ondragstart = function(event){
+		event.dataTransfer.setData('Text',null);
+	};
+	
+	this.trackSliderObj.ondrop = function(event)
+	{
+		if(event.stopPropagation) {event.stopPropagation();}
+		return false;
+	};
 
 	// Onclick, switch playback to that track
-	this.trackSliderObj.onclick = function() {
-		// Start the test on first click, that way timings are more accurate.
-		audioEngineContext.play();
-		if (audioEngineContext.audioObjectsReady) {
-			// Cannot continue to issue play command until audioObjects reported as ready!
-			// Get the track ID from the object ID
-			var element;
-			if (event.srcElement.nodeName == "SPAN") {
-				element = event.srcElement.parentNode;
-			} else {
-				element = event.srcElement;
-			}
-			var id = Number(element.attributes['trackIndex'].value);
-			//audioEngineContext.metric.sliderPlayed(id);
-			audioEngineContext.play(id);
-            // Currently playing track red, rest green
-            
-            //document.getElementById('track-slider-'+index).style.backgroundColor = "#FF0000";
-            $('.track-slider').removeClass('track-slider-playing');
-            $(element).addClass('track-slider-playing');
-            $('.comment-div').removeClass('comment-box-playing');
-            $('#comment-div-'+id).addClass('comment-box-playing');
-            var outsideReference = document.getElementById('outside-reference');
-            if (outsideReference != undefined)
-            $(outsideReference).removeClass('track-slider-playing');
+	this.trackSliderObj.onclick = function(event) {
+		// Cannot continue to issue play command until audioObjects reported as ready!
+		// Get the track ID from the object ID
+		var element;
+		if (event.currentTarget.nodeName == "SPAN") {
+			element = event.currentTarget.parentNode;
+		} else {
+			element = event.currentTarget;
 		}
+		var id = Number(element.attributes['trackIndex'].value);
+		//audioEngineContext.metric.sliderPlayed(id);
+		audioEngineContext.play(id);
+        // Currently playing track red, rest green
+        
+        //document.getElementById('track-slider-'+index).style.backgroundColor = "#FF0000";
+        $('.track-slider').removeClass('track-slider-playing');
+        $(element).addClass('track-slider-playing');
+        $('.comment-div').removeClass('comment-box-playing');
+        $('#comment-div-'+id).addClass('comment-box-playing');
+        var outsideReference = document.getElementById('outside-reference');
+        if (outsideReference != undefined)
+        $(outsideReference).removeClass('track-slider-playing');
 	};
 	
 	this.enable = function() {
@@ -512,7 +514,11 @@
 	var marginSize = Number(slider.attributes['marginsize'].value);
 	var w = slider.style.width;
 	w = Number(w.substr(0,w.length-2));
-	var x = ev.x;
+	var x = ev.screenX;
+	
+	x += Math.abs(window.screenX);
+	x = x % window.outerWidth;
+	
 	if (x >= marginSize && x < w+marginSize) {
 		this.style.left = (x)+'px';
 	} else {
@@ -523,12 +529,12 @@
 		}
 	}
 	var time = audioEngineContext.timer.getTestTime();
-	var id = Number(ev.srcElement.getAttribute('trackindex'));
-	audioEngineContext.audioObjects[id].metric.moved(time,convSliderPosToRate(ev.srcElement));
-	console.log('slider '+id+' moved to '+convSliderPosToRate(ev.srcElement)+' ('+time+')');
+	var id = Number(ev.currentTarget.getAttribute('trackindex'));
+	audioEngineContext.audioObjects[id].metric.moved(time,convSliderPosToRate(ev.currentTarget));
+	console.log('slider '+id+' moved to '+convSliderPosToRate(ev.currentTarget)+' ('+time+')');
 }
 
-function buttonSubmitClick() // TODO: Only when all songs have been played!
+function buttonSubmitClick()
 {
 	var checks = testState.currentStateMap[testState.currentIndex].interfaces[0].options;
 	var canContinue = true;

--- a/core.css	Fri Sep 04 12:22:55 2015 +0200
+++ b/core.css	Tue Sep 15 10:20:50 2015 +0100
@@ -24,7 +24,8 @@
 	border:#444444;
 	border-style:solid;
 	border-width:1px;
-	width: 624px;
+	max-width: 600px;
+	min-width: 400px;
 	float: left;
 	margin: 5px;
 	height: 90px;
@@ -36,7 +37,8 @@
 
 div.popupHolder {
 	width: 500px;
-	height: 250px;
+	min-height: 250px;
+	max-height: 400px;
 	background-color: #fff;
 	border-radius: 10px;
 	box-shadow: 0px 0px 50px #000;
@@ -48,7 +50,7 @@
 	 */
 	width: 50px;
 	height: 25px;
-	position: absolute;
+	position: relative;
 	border-radius: 5px;
 	border: #444;
 	border-width: 1px;
@@ -57,8 +59,10 @@
 }
 
 textarea.trackComment {
-	width: 618px;
+	max-width: 594px;
+	min-width: 350px;
 	margin-right:15px;
+	max-height: 60px;
 }
 
 div.playhead {

--- a/core.js	Fri Sep 04 12:22:55 2015 +0200
+++ b/core.js	Tue Sep 15 10:20:50 2015 +0100
@@ -49,6 +49,8 @@
 	// Creates an object to manage the popup
 	this.popup = null;
 	this.popupContent = null;
+	this.popupTitle = null;
+	this.popupResponse = null;
 	this.buttonProceed = null;
 	this.buttonPrevious = null;
 	this.popupOptions = null;
@@ -70,24 +72,53 @@
 		
 		this.popupContent = document.createElement('div');
 		this.popupContent.id = 'popupContent';
-		this.popupContent.style.marginTop = '25px';
+		this.popupContent.style.marginTop = '20px';
 		this.popupContent.align = 'center';
 		this.popup.appendChild(this.popupContent);
 		
+		var titleHolder = document.createElement('div');
+		titleHolder.id = 'popupTitleHolder';
+		titleHolder.style.width = 'inherit';
+		titleHolder.style.height = '25px';
+		titleHolder.style.marginBottom = '5px';
+		
+		this.popupTitle = document.createElement('span');
+		this.popupTitle.id = 'popupTitle';
+		titleHolder.appendChild(this.popupTitle);
+		this.popupContent.appendChild(titleHolder);
+		
+		this.popupResponse = document.createElement('div');
+		this.popupResponse.id = 'popupResponse';
+		this.popupResponse.style.width = 'inherit';
+		this.popupResponse.style.minHeight = '170px';
+		this.popupResponse.style.maxHeight = '320px';
+		this.popupResponse.style.overflow = 'auto';
+		this.popupContent.appendChild(this.popupResponse);
+		
+		var buttonHolder = document.createElement('div');
+		buttonHolder.id='buttonHolder';
+		buttonHolder.width = 'inherit';
+		buttonHolder.style.height= '30px';
+		buttonHolder.align = 'left';
+		this.popupContent.appendChild(buttonHolder);
+		
 		this.buttonProceed = document.createElement('button');
 		this.buttonProceed.className = 'popupButton';
-		this.buttonProceed.style.left = '440px';
-		this.buttonProceed.style.top = '215px';
+		this.buttonProceed.style.left = '390px';
+		this.buttonProceed.style.top = '2px';
 		this.buttonProceed.innerHTML = 'Next';
 		this.buttonProceed.onclick = function(){popup.proceedClicked();};
 		
 		this.buttonPrevious = document.createElement('button');
 		this.buttonPrevious.className = 'popupButton';
 		this.buttonPrevious.style.left = '10px';
-		this.buttonPrevious.style.top = '215px';
+		this.buttonPrevious.style.top = '2px';
 		this.buttonPrevious.innerHTML = 'Back';
 		this.buttonPrevious.onclick = function(){popup.previousClick();};
 		
+		buttonHolder.appendChild(this.buttonPrevious);
+		buttonHolder.appendChild(this.buttonProceed);
+		
 		this.popup.style.zIndex = -1;
 		this.popup.style.visibility = 'hidden';
 		blank.style.zIndex = -2;
@@ -126,19 +157,20 @@
 		var blank = document.getElementsByClassName('testHalt')[0];
 		blank.style.zIndex = -2;
 		blank.style.visibility = 'hidden';
+		this.buttonPrevious.style.visibility = 'inherit';
 	};
 	
 	this.postNode = function() {
 		// This will take the node from the popupOptions and display it
 		var node = this.popupOptions[this.currentIndex];
-		this.popupContent.innerHTML = null;
+		this.popupResponse.innerHTML = null;
 		if (node.type == 'statement') {
-			var span = document.createElement('span');
-			span.textContent = node.statement;
-			this.popupContent.appendChild(span);
+			this.popupTitle.textContent = null;
+			var statement = document.createElement('span');
+			statement.textContent = node.statement;
+			this.popupResponse.appendChild(statement);
 		} else if (node.type == 'question') {
-			var span = document.createElement('span');
-			span.textContent = node.question;
+			this.popupTitle.textContent = node.question;
 			var textArea = document.createElement('textarea');
 			switch (node.boxsize) {
 			case 'small':
@@ -158,18 +190,11 @@
 				textArea.rows = "10";
 				break;
 			}
-			var br = document.createElement('br');
-			this.popupContent.appendChild(span);
-			this.popupContent.appendChild(br);
-			this.popupContent.appendChild(textArea);
-			this.popupContent.childNodes[2].focus();
+			this.popupResponse.appendChild(textArea);
+			textArea.focus();
 		} else if (node.type == 'checkbox') {
-			var span = document.createElement('span');
-			span.textContent = node.statement;
-			this.popupContent.appendChild(span);
-			var optHold = document.createElement('div');
-			optHold.id = 'option-holder';
-			optHold.align = 'left';
+			this.popupTitle.textContent = node.statement;
+			var optHold = this.popupResponse;
 			for (var i=0; i<node.options.length; i++) {
 				var option = node.options[i];
 				var input = document.createElement('input');
@@ -179,22 +204,14 @@
 				span.textContent = option.text;
 				var hold = document.createElement('div');
 				hold.setAttribute('name','option');
-				hold.style.float = 'left';
 				hold.style.padding = '4px';
 				hold.appendChild(input);
 				hold.appendChild(span);
 				optHold.appendChild(hold);
 			}
-			this.popupContent.appendChild(optHold);
 		} else if (node.type == 'radio') {
-			var span = document.createElement('span');
-			span.textContent = node.statement;
-			this.popupContent.appendChild(span);
-			var optHold = document.createElement('div');
-			optHold.id = 'option-holder';
-			optHold.align = 'none';
-			optHold.style.float = 'left';
-			optHold.style.width = "100%";
+			this.popupTitle.textContent = node.statement;
+			var optHold = this.popupResponse;
 			for (var i=0; i<node.options.length; i++) {
 				var option = node.options[i];
 				var input = document.createElement('input');
@@ -210,20 +227,15 @@
 				hold.appendChild(span);
 				optHold.appendChild(hold);
 			}
-			this.popupContent.appendChild(optHold);
 		} else if (node.type == 'number') {
-			var span = document.createElement('span');
-			span.textContent = node.statement;
-			this.popupContent.appendChild(span);
-			this.popupContent.appendChild(document.createElement('br'));
+			this.popupTitle.textContent = node.statement;
 			var input = document.createElement('input');
 			input.type = 'textarea';
 			if (node.min != null) {input.min = node.min;}
 			if (node.max != null) {input.max = node.max;}
 			if (node.step != null) {input.step = node.step;}
-			this.popupContent.appendChild(input);
+			this.popupResponse.appendChild(input);
 		}
-		this.popupContent.appendChild(this.buttonProceed);
 		if(this.currentIndex+1 == this.popupOptions.length) {
 			if (this.responses.nodeName == "PRETEST") {
 				this.buttonProceed.textContent = 'Start';
@@ -234,7 +246,9 @@
 			this.buttonProceed.textContent = 'Next';
 		}
 		if(this.currentIndex > 0)
-			this.popupContent.appendChild(this.buttonPrevious);
+			this.buttonPrevious.style.visibility = 'visible';
+		else
+			this.buttonPrevious.style.visibility = 'hidden';
 	};
 	
 	this.initState = function(node) {
@@ -278,7 +292,7 @@
 			}
 		} else if (node.type == 'checkbox') {
 			// Must extract checkbox data
-			var optHold = document.getElementById('option-holder');
+			var optHold = this.popupResponse;
 			var hold = document.createElement('checkbox');
 			console.log("Checkbox: "+ node.statement);
 			hold.id = node.id;
@@ -293,7 +307,7 @@
 			}
 			this.responses.appendChild(hold);
 		} else if (node.type == "radio") {
-			var optHold = document.getElementById('option-holder');
+			var optHold = this.popupResponse;
 			var hold = document.createElement('radio');
 			var responseID = null;
 			var i=0;
@@ -549,16 +563,6 @@
 	specification.decode();
 	
 	testState.stateMap.push(specification.preTest);
-	 
-	// New check if we need to randomise the test order
-	if (specification.randomiseOrder)
-	{
- 		specification.audioHolders = randomiseOrder(specification.audioHolders);
- 		for (var i=0; i<specification.audioHolders.length; i++)
- 		{
- 			specification.audioHolders[i].presentedId = i;
- 		}
-	}
 	
 	$(specification.audioHolders).each(function(index,elem){
 		testState.stateMap.push(elem);
@@ -613,11 +617,22 @@
 		css.href = 'ape.css';
 		
 		document.getElementsByTagName("head")[0].appendChild(css);
+	} else if (specification.interfaceType == "MUSHRA")
+	{
+		interfaceJS.setAttribute("src","mushra.js");
+		
+		// MUSHRA comes with a css file
+		var css = document.createElement('link');
+		css.rel = 'stylesheet';
+		css.type = 'text/css';
+		css.href = 'mushra.css';
+		
+		document.getElementsByTagName("head")[0].appendChild(css);
 	}
 	document.getElementsByTagName("head")[0].appendChild(interfaceJS);
 	
 	// Define window callbacks for interface
-	window.onresize = function(event){resizeWindow(event);};
+	window.onresize = function(event){interfaceContext.resizeWindow(event);};
 }
 
 function createProjectSave(destURL) {
@@ -713,7 +728,6 @@
 	
 	// Use this to detect playback state: 0 - stopped, 1 - playing
 	this.status = 0;
-	this.audioObjectsReady = false;
 	
 	// Connect both gains to output
 	this.outputGain.connect(audioContext.destination);
@@ -731,21 +745,24 @@
 	
 	this.play = function(id) {
 		// Start the timer and set the audioEngine state to playing (1)
-		if (this.status == 0) {
+		if (this.status == 0 && this.loopPlayback) {
 			// Check if all audioObjects are ready
-			if (this.audioObjectsReady == false) {
-				this.audioObjectsReady = this.checkAllReady();
-			}
-			if (this.audioObjectsReady == true) {
-				this.timer.startTest();
-				if (this.loopPlayback)
-					{this.setSynchronousLoop();}
+			if(this.checkAllReady())
+			{
 				this.status = 1;
+				this.setSynchronousLoop();
 			}
 		}
+		else
+		{
+			this.status = 1;
+		}
 		if (this.status== 1) {
+			this.timer.startTest();
 			if (id == undefined) {
 				id = -1;
+				console.log('FATAL - Passed id was undefined - AudioEngineContext.play(id)');
+				return;
 			} else {
 				interfaceContext.playhead.setTimePerPixel(this.audioObjects[id]);
 			}
@@ -832,40 +849,37 @@
 	
 	this.setSynchronousLoop = function() {
 		// Pads the signals so they are all exactly the same length
-		if (this.audioObjectsReady)
+		var length = 0;
+		var lens = [];
+		var maxId;
+		for (var i=0; i<this.audioObjects.length; i++)
 		{
-			var length = 0;
-			var lens = [];
-			var maxId;
-			for (var i=0; i<this.audioObjects.length; i++)
+			lens.push(this.audioObjects[i].buffer.length);
+			if (length < this.audioObjects[i].buffer.length)
 			{
-				lens.push(this.audioObjects[i].buffer.length);
-				if (length < this.audioObjects[i].buffer.length)
-				{
-					length = this.audioObjects[i].buffer.length;
-					maxId = i;
-				}
+				length = this.audioObjects[i].buffer.length;
+				maxId = i;
 			}
-			// Perform difference
-			for (var i=0; i<lens.length; i++)
+		}
+		// Perform difference
+		for (var i=0; i<lens.length; i++)
+		{
+			lens[i] = length - lens[i];
+		}
+		// Extract the audio and zero-pad
+		for (var i=0; i<lens.length; i++)
+		{
+			var orig = this.audioObjects[i].buffer;
+			var hold = audioContext.createBuffer(orig.numberOfChannels,length,orig.sampleRate);
+			for (var c=0; c<orig.numberOfChannels; c++)
 			{
-				lens[i] = length - lens[i];
+				var inData = hold.getChannelData(c);
+				var outData = orig.getChannelData(c);
+				for (var n=0; n<orig.length; n++)
+				{inData[n] = outData[n];}
 			}
-			// Extract the audio and zero-pad
-			for (var i=0; i<lens.length; i++)
-			{
-				var orig = this.audioObjects[i].buffer;
-				var hold = audioContext.createBuffer(orig.numberOfChannels,length,orig.sampleRate);
-				for (var c=0; c<orig.numberOfChannels; c++)
-				{
-					var inData = hold.getChannelData(c);
-					var outData = orig.getChannelData(c);
-					for (var n=0; n<orig.length; n++)
-					{inData[n] = outData[n];}
-				}
-				this.audioObjects[i].buffer = hold;
-				delete orig;
-			}
+			this.audioObjects[i].buffer = hold;
+			delete orig;
 		}
 	};
 	
@@ -917,9 +931,9 @@
 			this.bufferNode.connect(this.outputGain);
 			this.bufferNode.buffer = this.buffer;
 			this.bufferNode.loop = audioEngineContext.loopPlayback;
-			this.bufferNode.onended = function() {
+			this.bufferNode.onended = function(event) {
 				// Safari does not like using 'this' to reference the calling object!
-				event.srcElement.owner.metric.stopListening(audioEngineContext.timer.getTestTime(),event.srcElement.owner.getCurrentPosition());
+				event.currentTarget.owner.metric.stopListening(audioEngineContext.timer.getTestTime(),event.currentTarget.owner.getCurrentPosition());
 			};
 			if (this.bufferNode.loop == false) {
 				this.metric.startListening(audioEngineContext.timer.getTestTime());
@@ -1282,37 +1296,6 @@
 	
 }
 
-function testWaitIndicator() {
-	if (audioEngineContext.checkAllReady() == false) {
-		var hold = document.createElement("div");
-		hold.id = "testWaitIndicator";
-		hold.className = "indicator-box";
-		hold.style.zIndex = 3;
-		var span = document.createElement("span");
-		span.textContent = "Please wait! Elements still loading";
-		hold.appendChild(span);
-		var blank = document.createElement('div');
-		blank.className = 'testHalt';
-		blank.id = "testHaltBlank";
-		var body = document.getElementsByTagName('body')[0];
-		body.appendChild(hold);
-		body.appendChild(blank);
-		testWaitTimerIntervalHolder = setInterval(function(){
-			var ready = audioEngineContext.checkAllReady();
-			if (ready) {
-				var elem = document.getElementById('testWaitIndicator');
-				var blank = document.getElementById('testHaltBlank');
-				var body = document.getElementsByTagName('body')[0];
-				body.removeChild(elem);
-				body.removeChild(blank);
-				clearInterval(testWaitTimerIntervalHolder);
-			}
-		},500,false);
-	}
-}
-
-var testWaitTimerIntervalHolder = null;
-
 function Specification() {
 	// Handles the decoding of the project specification XML into a simple JavaScript Object.
 	
@@ -1321,6 +1304,7 @@
 	this.projectReturn;
 	this.randomiseOrder;
 	this.collectMetrics;
+	this.testPages;
 	this.preTest;
 	this.postTest;
 	this.metrics =[];
@@ -1333,12 +1317,20 @@
 		var setupNode = projectXML.getElementsByTagName('setup')[0];
 		this.interfaceType = setupNode.getAttribute('interface');
 		this.projectReturn = setupNode.getAttribute('projectReturn');
+		this.testPages = setupNode.getAttribute('testPages');
 		if (setupNode.getAttribute('randomiseOrder') == "true") {
 			this.randomiseOrder = true;
 		} else {this.randomiseOrder = false;}
 		if (setupNode.getAttribute('collectMetrics') == "true") {
 			this.collectMetrics = true;
 		} else {this.collectMetrics = false;}
+		if (isNaN(Number(this.testPages)) || this.testPages == undefined)
+		{
+			this.testPages = null;
+		} else {
+			this.testPages = Number(this.testPages);
+			if (this.testPages == 0) {this.testPages = null;}
+		}
 		var metricCollection = setupNode.getElementsByTagName('Metric');
 		
 		this.preTest = new this.prepostNode('pretest',setupNode.getElementsByTagName('PreTest'));
@@ -1405,6 +1397,30 @@
 			this.audioHolders.push(new this.audioHolderNode(this,audioHolders[i]));
 		}
 		
+		// New check if we need to randomise the test order
+		if (this.randomiseOrder)
+		{
+	 		this.audioHolders = randomiseOrder(this.audioHolders);
+	 		for (var i=0; i<this.audioHolders.length; i++)
+	 		{
+	 			this.audioHolders[i].presentedId = i;
+	 		}
+		}
+		
+		if (this.testPages != null || this.testPages != undefined)
+		{
+			if (this.testPages > audioHolders.length)
+			{
+				console.log('Warning: You have specified '+audioHolders.length+' tests but requested '+this.testPages+' be completed!');
+				this.testPages = audioHolders.length;
+			}
+			var aH = this.audioHolders;
+			this.audioHolders = [];
+			for (var i=0; i<this.testPages; i++)
+			{
+				this.audioHolders.push(aH[i]);
+			}
+		}
 	};
 	
 	this.prepostNode = function(type,Collection) {
@@ -1711,6 +1727,23 @@
 	this.interfaceObjects = [];
 	this.interfaceObject = function(){};
 	
+	this.resizeWindow = function(event)
+	{
+		for(var i=0; i<this.commentBoxes.length; i++)
+		{this.commentBoxes[i].resize();}
+		for(var i=0; i<this.commentQuestions.length; i++)
+		{this.commentQuestions[i].resize();}
+		try
+		{
+			resizeWindow(event);
+		}
+		catch(err)
+		{
+			console.log("Warning - Interface does not have Resize option");
+			console.log(err);
+		}
+	};
+	
 	this.commentBoxes = [];
 	this.elementCommentBox = function(audioObject) {
 		var element = audioObject.specification;
@@ -1749,6 +1782,21 @@
 			}
 			return root;
 		};
+		this.resize = function()
+		{
+			var boxwidth = (window.innerWidth-100)/2;
+			if (boxwidth >= 600)
+			{
+				boxwidth = 600;
+			}
+			else if (boxwidth < 400)
+			{
+				boxwidth = 400;
+			}
+			this.trackComment.style.width = boxwidth+"px";
+			this.trackCommentBox.style.width = boxwidth-6+"px";
+		};
+		this.resize();
 	};
 	
 	this.commentQuestions = [];
@@ -1781,6 +1829,21 @@
 			console.log("Response: "+root.textContent);
 			return root;
 		};
+		this.resize = function()
+		{
+			var boxwidth = (window.innerWidth-100)/2;
+			if (boxwidth >= 600)
+			{
+				boxwidth = 600;
+			}
+			else if (boxwidth < 400)
+			{
+				boxwidth = 400;
+			}
+			this.holder.style.width = boxwidth+"px";
+			this.textArea.style.width = boxwidth-6+"px";
+		};
+		this.resize();
 	};
 	
 	this.radioBox = function(commentQuestion) {
@@ -1805,15 +1868,11 @@
 		this.span.style.marginTop = '15px';
 		
 		var optCount = commentQuestion.options.length;
-		var spanMargin = Math.floor(((600-(optCount*100))/(optCount))/2)+'px';
-		console.log(spanMargin);
 		for (var i=0; i<optCount; i++)
 		{
 			var div = document.createElement('div');
-			div.style.width = '100px';
+			div.style.width = '80px';
 			div.style.float = 'left';
-			div.style.marginRight = spanMargin;
-			div.style.marginLeft = spanMargin;
 			var input = document.createElement('input');
 			input.type = 'radio';
 			input.name = commentQuestion.id;
@@ -1824,10 +1883,8 @@
 			
 			
 			div = document.createElement('div');
-			div.style.width = '100px';
+			div.style.width = '80px';
 			div.style.float = 'left';
-			div.style.marginRight = spanMargin;
-			div.style.marginLeft = spanMargin;
 			div.align = 'center';
 			var span = document.createElement('span');
 			span.textContent = commentQuestion.options[i].text;
@@ -1865,6 +1922,39 @@
 			root.appendChild(response);
 			return root;
 		};
+		this.resize = function()
+		{
+			var boxwidth = (window.innerWidth-100)/2;
+			if (boxwidth >= 600)
+			{
+				boxwidth = 600;
+			}
+			else if (boxwidth < 400)
+			{
+				boxwidth = 400;
+			}
+			this.holder.style.width = boxwidth+"px";
+			var text = this.holder.children[2];
+			var options = this.holder.children[3];
+			var optCount = options.children.length;
+			var spanMargin = Math.floor(((boxwidth-20-(optCount*80))/(optCount))/2)+'px';
+			var options = options.firstChild;
+			var text = text.firstChild;
+			options.style.marginRight = spanMargin;
+			options.style.marginLeft = spanMargin;
+			text.style.marginRight = spanMargin;
+			text.style.marginLeft = spanMargin;
+			while(options.nextSibling != undefined)
+			{
+				options = options.nextSibling;
+				text = text.nextSibling;
+				options.style.marginRight = spanMargin;
+				options.style.marginLeft = spanMargin;
+				text.style.marginRight = spanMargin;
+				text.style.marginLeft = spanMargin;
+			}
+		};
+		this.resize();
 	};
 	
 	this.checkboxBox = function(commentQuestion) {
@@ -1889,15 +1979,11 @@
 		this.span.style.marginTop = '15px';
 		
 		var optCount = commentQuestion.options.length;
-		var spanMargin = Math.floor(((600-(optCount*100))/(optCount))/2)+'px';
-		console.log(spanMargin);
 		for (var i=0; i<optCount; i++)
 		{
 			var div = document.createElement('div');
-			div.style.width = '100px';
+			div.style.width = '80px';
 			div.style.float = 'left';
-			div.style.marginRight = spanMargin;
-			div.style.marginLeft = spanMargin;
 			var input = document.createElement('input');
 			input.type = 'checkbox';
 			input.name = commentQuestion.id;
@@ -1908,10 +1994,8 @@
 			
 			
 			div = document.createElement('div');
-			div.style.width = '100px';
+			div.style.width = '80px';
 			div.style.float = 'left';
-			div.style.marginRight = spanMargin;
-			div.style.marginLeft = spanMargin;
 			div.align = 'center';
 			var span = document.createElement('span');
 			span.textContent = commentQuestion.options[i].text;
@@ -1940,6 +2024,39 @@
 			}
 			return root;
 		};
+		this.resize = function()
+		{
+			var boxwidth = (window.innerWidth-100)/2;
+			if (boxwidth >= 600)
+			{
+				boxwidth = 600;
+			}
+			else if (boxwidth < 400)
+			{
+				boxwidth = 400;
+			}
+			this.holder.style.width = boxwidth+"px";
+			var text = this.holder.children[2];
+			var options = this.holder.children[3];
+			var optCount = options.children.length;
+			var spanMargin = Math.floor(((boxwidth-20-(optCount*80))/(optCount))/2)+'px';
+			var options = options.firstChild;
+			var text = text.firstChild;
+			options.style.marginRight = spanMargin;
+			options.style.marginLeft = spanMargin;
+			text.style.marginRight = spanMargin;
+			text.style.marginLeft = spanMargin;
+			while(options.nextSibling != undefined)
+			{
+				options = options.nextSibling;
+				text = text.nextSibling;
+				options.style.marginRight = spanMargin;
+				options.style.marginLeft = spanMargin;
+				text.style.marginRight = spanMargin;
+				text.style.marginLeft = spanMargin;
+			}
+		};
+		this.resize();
 	};
 
 	this.createCommentBox = function(audioObject) {

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/docs/Instructions/BuildingInterface.tex	Tue Sep 15 10:20:50 2015 +0100
@@ -0,0 +1,60 @@
+\documentclass[11pt, oneside]{article}   	% use "amsart" instead of "article" for AMSLaTeX format
+\usepackage[margin=2cm]{geometry}            		% See geometry.pdf to learn the layout options. There are lots.
+\geometry{letterpaper}                   		% ... or a4paper or a5paper or ... 
+%\geometry{landscape}                		% Activate for rotated page geometry
+\usepackage[parfill]{parskip}    		% Activate to begin paragraphs with an empty line rather than an indent
+\usepackage{graphicx}				% Use pdf, png, jpg, or eps§ with pdflatex; use eps in DVI mode
+								% TeX will automatically convert eps --> pdf in pdflatex		
+								
+\usepackage{listings}				% Source code
+\usepackage{amssymb}
+\usepackage{cite}
+\usepackage{hyperref}				% Hyperlinks
+
+
+\graphicspath{{img/}}					% Relative path where the images are stored. 
+
+\title{Building your own Interface for\\ Web Audio Evaluation Tool}
+\author{Nicholas Jillings}
+\date{}							% Activate to display a given date or no date
+
+\begin{document}
+\maketitle
+
+\section{Introduction}
+This guide will help you to construct your own interface on top of the WAET (Web Audio Evaluation Tool) engine. The WAET engine resides in the core.js file, this contains prototype objects to handle most of the test creation, operation and data collection. The interface simply has to link into this at the correct points.
+
+\subsection{Nodes to familiarise}
+Core.js handles several very important nodes which you should become familiar with. The first is the Audio Engine, initialised and stored in variable 'AudioEngineContext'. This handles the playback of the web audio nodes as well as storing the 'AudioObjects'. The 'AudioObjects' are custom nodes which hold the audio fragments for playback. These nodes also have a link to two interface objects, the comment box if enabled and the interface providing the ranking. On creation of an 'AudioObject' the interface link will be nulled, it is up to the interface to link these correctly.
+
+The specification document will be decoded and parsed into an object called 'specification'. This will hold all of the specifications various nodes. The test pages and any pre/post test objects are processed by a test state which will proceed through the test when called to by the interface. Any checks (such as playback or movement checks) are to be completed by the interface before instructing the test state to proceed. The test state will call the interface on each page load with the page specification node.
+
+\subsection{Modifying Core.js}
+Whilst there is very little code actually needed, you do need to instruct core.js to load your interface file when called for from a specification node. There is a function called 'loadProjectSpecCallback' which handles the decoding of the specification and setting any external items (such as metric collection). At the very end of this function there is an if statement, add to this list with your interface string to link to the source. There is an example in there for both the APE and MUSHRA tests already included. Note: Any updates to core.js in future work will most likely overwrite your changes to this file, so remember to check your interface is still here after any update that interferes with core.js.
+Any further files can be loaded here as well, such as css styling files. jQuery is already included.
+
+\section{Building the Interface}
+Your interface file will get loaded automatically when the 'interface' attribute of the setup node matches the string in the 'loadProjectSpecCallback' function. The following functions must be defined in your interface file.
+\begin{itemize}
+\item \texttt{loadInterface} - Called once when the document is parsed. This creates any necessary bindings, such as to the metric collection classes and any check commands. Here you can also start the structure for your test such as placing in any common nodes (such as the title and empty divs to drop content into later).
+\item \texttt{loadTest(audioHolderObject)} - Called for each page load. The audioHolderObject contains a specification node holding effectively one of the audioHolder nodes.
+\item \texttt{resizeWindow(event)} - Handle for any window resizing. Simply scale your interface accordingly. This function must be here, but can me an empty function call.
+\end{itemize}
+
+\subsection{loadInterface}
+This function is called by the interface once the document has been parsed since some browsers may parse files asynchronously. The best method is simply to put 'loadInterface()' at the top of your interface file, therefore when the JavaScript engine is ready the function is called.
+
+By default the HTML file has an element with id "topLevelBody" where you can build your interface. Make sure you blank the contents of that object. This function is the perfect time to build any fixed items, such as the page title, session titles, interface buttons (Start, Stop, Submit) and any holding and structure elements for later on.
+
+At the end of the function, insert these two function calls: testState.initialise() and testState.advanceState();. This will actually begin the test sequence, including the pre-test options (if any are included in the specification document).
+
+\subsection{loadTest(audioHolderObject)}
+This function is called on each new test page. It is this functions job to clear out the previous test and set up the new page. Use the function audioEngineContext.newTestPage(); to instruct the audio engine to prepare for a new page. "audioEngineContext.audioObjects = [];" will delete any audioObjects, interfaceContext.deleteCommentBoxes(); will delete any comment boxes and interfaceContext.deleteCommentQuestions(); will delete any extra comment boxes specified by commentQuestion nodes.
+
+This function will need to instruct the audio engine to build each fragment. Just passing the constructor each element from the audioHolderObject will build the track, audioEngineContext.newTrack(element) (where element is the audioHolderObject audio element). This will return a reference to the constructed audioObject. Decoding of the audio will happen asynchronously.
+
+You also need to link audioObject.interfaceDOM with your interface object for that audioObject. The interfaceDOM object has a few default methods. Firstly it must start disabled and become enabled once the audioObject has decoded the audio (function call: enable()). Next it must have a function exportXMLDOM(), this will return the xml node for your interface, however the default is for it to return a value node, with textContent equal to the normalised value. You can perform other functions, but our scripts may not work if something different is specified (as it will breach our results specifications). Finally it must also have a method getValue, which returns the normalised value.
+
+It is also the job the interfaceDOM to call any metric collection functions necessary, however some functions may be better placed outside (for example, the APE interface uses drag and drop, therefore the best way was to call the metric functions from the dragEnd function, which is called when the interface object is dropped). Metrics based upon listening are handled by the audioObject. The interfaceDOM object must manage any movement metrics. For a list of valid metrics and their behaviours, look at the project specification document included in the repository/docs location. The same goes for any checks required when pressing the submit button, or any other method to proceed the test state.
+
+\end{document}
\ No newline at end of file

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/docs/Instructions/User Guide.tex	Tue Sep 15 10:20:50 2015 +0100
@@ -0,0 +1,75 @@
+\documentclass[11pt, oneside]{article}   	% use "amsart" instead of "article" for AMSLaTeX format
+\usepackage{geometry}                		% See geometry.pdf to learn the layout options. There are lots.
+\geometry{letterpaper}                   		% ... or a4paper or a5paper or ... 
+%\geometry{landscape}                		% Activate for rotated page geometry
+\usepackage[parfill]{parskip}    		% Activate to begin paragraphs with an empty line rather than an indent
+\usepackage{graphicx}				% Use pdf, png, jpg, or eps§ with pdflatex; use eps in DVI mode
+								% TeX will automatically convert eps --> pdf in pdflatex		
+								
+\usepackage{listings}				% Source code
+\usepackage{amssymb}
+\usepackage{cite}
+\usepackage{hyperref}				% Hyperlinks
+
+\graphicspath{{img/}}					% Relative path where the images are stored. 
+
+\title{Web Audio Evaluation Tool \\User Guide}
+\date{}							% Activate to display a given date or no date
+
+\begin{document}
+\maketitle
+
+These instructions are about use of the Web Audio Evaluation Tool \cite{deman2015c}.
+Version 1.0
+
+\tableofcontents
+
+\section{Installing}
+
+The tool can be downloaded from the SoundSoftware website, available at \url{https://code.soundsoftware.ac.uk/projects/webaudioevaluationtool/repository}. The repository contains all the files required by the tool, along with interfaces to post bug reports or issue any feature requests.
+
+Once downloaded and extracted (either through a Mercurial client or the available zip download) the tool is ready to be operated with. The tool is designed for three modes of use:
+\begin{itemize}
+\item Single Location, One User - A listening test which will be conducted in a single location, one user at a time. Possibly on a machine with no network or internet connectivity
+\item Single Location, Multiple Users - Similar to the above but where the hosting server is located behind a networked firewall which all test machines can access
+\item Multiple Location, Multiple Users - A test operated over the web by multiple end users
+\end{itemize}
+There are other modes of use which we cannot document due to the flexible nature of the test. If your test does not mostly fit into one of these three categories, have a look in the Advanced Test section.
+
+\subsection{Python}
+
+To trial the test before deployment, or if you are performing a test on a non-networked machine, you will need to run our python script to launch a local python web server. This script is designed for Python 2.7. Running the script will open a basic web server, hosting the directory it is contained in. Visit \url{http://localhost:8080/} to launch the test instance once the server is running. To quit the server, either close the terminal window or press Ctrl+C on your keyboard to forcibly shut the server.
+
+If your system already uses port 8080 and you wish to use the server, please read the Advanced Test Creation section.
+
+\section{Designing a Test}
+
+The test specification document is an XML file containing all the information the tool requires to operate your test. No coding in JavaScript or HTML is needed to get this test running.
+
+
+
+\subsection{Using the test create tool}
+We have supplied a test creation tool, available in the repository directory test\_creation. This tool is a self-contained web page, so doubling clicking will launch the page in your system default browser.
+
+The test creation tool can help you build a simple test very quickly. By simply selecting your interface and clicking check-boxes you can build a test in minutes.
+
+Audio is handled by directing the tool to where
+
+The tool examines your XML before exporting to ensure you do not export an invalid XML structure which would crash the test.
+
+\subsection{Setting up the test directory}
+
+\section{Launching and operating}
+
+\section{Advanced Test Creation}
+\subsection{Multi-User}
+\subsection{3rd Party Server}
+
+\section{Errors and Troubleshooting}
+\subsection{Common Errors}
+\subsection{Forcing an Export}
+\subsection{Terminal}
+
+\section{Future Work}
+
+\end{document}
\ No newline at end of file

Binary file docs/ProjectSpecificationDocument.pdf has changed

--- a/docs/ProjectSpecificationDocument.tex	Fri Sep 04 12:22:55 2015 +0200
+++ b/docs/ProjectSpecificationDocument.tex	Tue Sep 15 10:20:50 2015 +0100
@@ -28,16 +28,46 @@
 \begin{itemize}
 \item \texttt{interface} - Mandatory, String. Defaults to APE, otherwise use to load any of the available interfaces. Currently only valid string is APE.
 \item \texttt{projectReturn} - Mandatory, String. Specify the URL to return the test results. If null client will generate XML locally and prompt user to return the file.
-\item \texttt{randomiseOrder} - Optional, default to false. Specify if the order of the tests can be randomised.
-\item \texttt{collectMetrics} - Optional, Boolean. Default to false. Determine if the test metrics should be collected. These include how long each test session took etc. The full metrics list can be modified in the 'metrics' tag.
+\item \texttt{randomiseOrder} - Optional, default to false. Specify if the order of the test pages are to be randomised.
+\item \texttt{collectMetrics} - Deprecated. Optional, Boolean. Default to false. Determine if the test metrics should be collected. These include how long each test session took etc. The full metrics list can be modified in the 'metrics' tag.
 \end{itemize}
 
 \subsection{Elements}
 None
 
+\section{Metric tag}
+A 'setup' node child tag, metrics must be declared in the setup tag. This takes a set of children 'metricEnable' to define which metrics to collect and present, for example \texttt{<metricEnable> testTimer </metricEnable>}. The interface may not be able to utilise all of these features. It is up to the interface to determine whether to use the metric or not. For example, 'elementFlagMoved' would not be usable in an AB test as there are no interface value objects.
+
+\subsection{metricEnable tag}
+This takes a single attribute to determine which metric to enable for collection. Some of these are a global, per track or per test instance.
+\begin{itemize}
+\item testTimer - Return the global test timer and test instance timers. Measures the time between the first start and final submit.
+\item elementTimer - Return the total time each audioElement in each test was listened too. Measures time between successive clicks on the track changer
+\item elementTracker - Return the initial position of each track
+\item elementTrackerFull - Return an enumerated pair of time and position. Track the entire movement of each element position. NOTE: Will override the elementTracker option above and throw an error into the browser console.
+\item elementFlagListenedTo - Return a boolean per elementck to see if the element was listened to
+\item elementFlagMoved - Return a boolean per element to see if the element slider was moved.
+\item elementFlagComments - Return a boolean per element to see if the element has comments.
+\end{itemize}
+
+\section{Interface tag}
+This enables any interface options for each test page. Further interface tags in each audioHolder add further options. This takes option nodes only. Each option node takes a 'name' to determine what feature to enable. The following options are currently employed.
+
+\subsection{Option nodes}
+
+\begin{itemize}
+\item \texttt{fragmentPlayed} - Enforce each fragment be partially played before finishing the page
+\item \texttt{fragmentFullPlayback} - Enforce each fragment to be fully played from start to end before finishing the page. Not enabled if an audioHolder reports it is to be looped playback.
+\item \texttt{fragmentMoved} - Enforce each fragment to be moved at least once from its starting position.
+\item \texttt{fragmentComments} - Enforce each fragment comment to have some text entered.
+\item \texttt{playhead} - Show the playhead object.
+\item \texttt{page-count} - Show the current test page number and the total number
+\item \texttt{scalerange} - Must also have min and max values between 0 and 100. Enforce that at least one fragment is below the min value and one fragment is above the max value before continuing.
+\end{itemize}
+
 \section{AudioHolder tag}
 
-There should be one audioHolder tag per test session, inside which each audioElement is specified as children. The audioHolder tag can help to generalise certain objects. Each audioHolder instance specifies a separate listening test to be paged, each with their own specific requirements.
+There should be one audioHolder tag for each test page, inside which each audioElement is specified as children. The audioHolder tag can help to generalise certain objects. 
 
 \subsection{Attributes}
 \begin{itemize}
@@ -47,6 +77,7 @@
 \item \texttt{randomiseOrder} - Optional, Boolean String. Defaults to false. Determine if the track order should be randomised. Must be true or false.
 \item \texttt{repeatCount} - Optional, Number. Defaults to 0 (ie: no repeats). The number of times a test should be repeated.
 \item \texttt{loop} - Optional, Boolean String. Defaults to false. Enable if audioElements should loop their playback or not.
+\item \texttt{elementComments} - Optional, Boolean String. Defaults to false. Enable to populate the test page with Comment Boxes linked to each fragment.
 \end{itemize}
 
 \subsection{Elements}
@@ -60,6 +91,7 @@
 \begin{itemize}
 \item \texttt{id} - Mandatory, String. Must give a string or number to identify each audio element. This id is used in the output to identify each track once randomised.
 \item \texttt{url} - Mandatory, String. Contain the full URL to the track. If the Tracks tag hostURL is set, concatenate this tag with the hostURL attribute to obtain the full URL.
+\item \texttt{type} - Optional, String. Can be 'normal', 'anchor', 'reference' or 'outside-reference'. Default is for normal. Only one anchor can be specified per page. Only one reference can be specified per page. Only one outside-reference can be specified per page. If multiple audioelements have the same type in the same page, the browser console will explain the problem and the audioelements will be treated as 'normal' fragments.
 \end{itemize}
 
 \section{interface tag}
@@ -68,21 +100,31 @@
 \begin{itemize}
 \item 'title' - Contains the test title to be shown at the top of the page. Can only be one title node per interface.
 \item 'scale' - Takes the attribute position to be a value between 0 and 100 indicating where on the scale to place the text contained inside. Can be multiple scale tags per interface.
+\item 'option' - Can hold any of the option tags available in the setup tag. These will only be enabled for the page instance.
 \end{itemize}
 
 \section {CommentQuestion tag}
 
-This is a 1st level tag (same level as AudioHolder and setup). This allows another question and comment box to be presented on the page. The results of these are passed back in the results XML with both the comment and the question. The id attribute is set to keep track at the results XML.
+This allows another question and comment box to be presented on the page. The results of these are passed back in the results XML with both the comment and the question. An id must be set, otherwise the result is undefined. Also the type must be set as follows.
+\begin{itemize}
+\item 'type="text"' - Default type. Creates a text box on the page. The text is included as the element.
+\item 'type="radio"' - Create radio button entry. Multiple equally spaced entried per box. Only one entry can be selected. Each radio button is specified by an option tag. The tag must contain a name attribute, which will be the response if true. Optional text can be included as the element to label the box. Presented question is included in a statement node.
+\item 'type="checkbox"' - Create a checkbox entry. Multiple equally space entries per box, multiple can be selected. Each checkbox is specified by an option tag. The tag must contain a name attribute. Optional text can be included as the element to label the checkbox. Presented question is included in a statement node.
+\end{itemize}
+
 
 \section {PreTest tag and PostTest tag}
 
 These are 1st level tags. The PreTest tag allows for the specifying of pre test instructions and questions. These appear as a pop-up style window with next buttons and other automatic GUI. The postTest tag allows for specifying post test instructions, questions and resources. These appear as a pop-up style window after the submit button is pressed.
 
+PreTest and PostTag nodes can be included in the audioHolders (for pre and post for that test page) and in the setup node for pre-test before the first page, and post-test for after the last test.
+
 \subsection{Attributes}
 None.
 
 \subsection{Elements}
-Takes the \texttt{statement} and \texttt{question} tags. The order these are presented in the XML define the order they appear on the screen.
+
+Takes the following available tags to structure the pre and post test options. The order these are presented in the XML define the order they appear.
 
 \subsubsection{Statement}
 
@@ -90,63 +132,29 @@
 
 \subsubsection{Question}
 
-This allows for a question to be asked pre/post the test. This is added to the response XML in the same location as the other common/global questions. The response includes both the question asked and the response. This takes two attributes, id and mandatory. ID is a mandatory field. The same ID will be used in the results so it is important it is properly entered. Mandatory is optional. True means the field must be entered before continuing.
-
-\subsubsection{Resource}
-
-The resource tag is only available in the postTest tag. This allows for the linking to some external resource via the href attribute.
-
-\section{Metric tag}
-A 1st level tag, metrics must be declared in the setup tag. This takes a set of children 'metricEnable' to define which metrics to collect and present.
-
-\subsection{metricEnable tag}
-This takes a single attribute to determine which metric to enable for collection. Some of these are a global, per track or per test instance.
+This allows for a question to be asked pre/post the test. The response includes both the question asked and the response. The following attributes are used:
 \begin{itemize}
-\item testTimer - Return the global test timer and test instance timers. Measures the time between the first start and final submit.
-\item elementTimer - Return the total time each audioElement in each test was listened too. Measures time between successive clicks on the track changer
-\item elementTracker - Return the initial position of each track
-\item elementTrackerFull - Return an enumerated pair of time and position. Track the entire movement of each element position. NOTE: Will override the elementTracker option above and throw an error into the browser console.
-\item elementFlagListenedTo - Return a boolean per elementck to see if the element was listened to
-\item elementFlagMoved - Return a boolean per element to see if the element slider was moved.
-\item elementFlagComments - Return a boolean per element to see if the element has comments.
+\item \texttt{id} - Mandatory, String. Used to reference to the response.
+\item \texttt{mandatory} - Optional, String Boolean. Determine if this question must have some response. Defaults to false.
+\item \texttt{boxsize} - Optional, String. Defaults to normal. Allows 'small', 'normal', 'large' or 'huge'. This determines the size of the box entry. All entries are wrappable, so this does not determine the maximum size of the text response, but can be used to encourage (or dicourage) long answers.
 \end{itemize}
 
-\section{Feature List}
+\subsubsection{Number}
+
+Gives a number box entry defined with the following attributes:
 \begin{itemize}
-\item Paging listening tests - eg. Ask multiple questions in each experiment
-\item Labels on X axis - scale
-\item Input questions/comment at top to guide towards the question being asked.
-\item Randomise track numbers -(inc. comment boxes and relate back to correct reference track)
-\item Randomise order of individual tests
-\item Save output XML file to remote server
-\item Tests Metrics
-\begin{itemize}
-\item Duration of listening to each track
-\item Time spent on each individual test
-\item Start and end position of every track
-\item Flags on each track, to ensure each track (but may not restrict users from submitting)
-\begin{itemize}
-\item Has been listened to 
-\item Has been moved
-\item Has comments about it
-\end{itemize}
-\end{itemize}
+\item \texttt{id} - Mandatory, String. Used to reference to the response.
+\item \texttt{mandatory} - Optional, String Boolean. Determine if this question must have some response. Defaults to false.
+\item \texttt{min, max} - Optional, Number. Defaults to undefined. Used to bound the number response. If a number entered is below this, the pre/post sequence will not continued.
 \end{itemize}
 
-\subsection{Advanced feature list}
-\begin{itemize}
-\item Repeat each tests number of times (2 or 3?) to remove learning / experience bias and ensure that the order is consistent
-\item Perform Loudness equalisation on all tracks
-\item Selection of test type
-\item Pre-test of some basic hearing test
-\begin{itemize}
-\item MUSHRA (with vertical slider per track)
-\item APE (Single horizontal slider)
-\item AB Test
-\end{itemize}
-\end{itemize}
+\subsubsection{Radio}
 
+Create a set of radio boxes. Only one element can be returned as true. The radio node must have an id to reference for the output. The radio node also must have a statment node which will contain the text to show on the popup. Radio buttons are created using option nodes. Each node must have a name attribute to indentify which radio was selected in the response. The option node can also contain any text to link to the node.
 
+\subsubsection{Checkbox}
+
+Create a set of checkbox boxes. Multiple elements can be returned as true. The checkbox node must have an id to reference for the output. The checkbox node also must have a statment node which will contain the text to show on the popup. Checkbox buttons are created using option nodes. Each node must have a name attribute to indentify which radio was selected in the response. The option node can also contain any text to link to the node.
 
 \section{Example}
 

--- a/example_eval/project.xml	Fri Sep 04 12:22:55 2015 +0200
+++ b/example_eval/project.xml	Tue Sep 15 10:20:50 2015 +0100
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <BrowserEvalProjectDocument>
-	<setup interface="APE" projectReturn="/save" randomiseOrder='true' collectMetrics='true'>
+	<setup interface="APE" projectReturn="save.php" randomiseOrder='true' collectMetrics='true' testPages="2">
 		<PreTest>
 			<question id="Location" mandatory="true" boxsize="large">Please enter your location.</question>
 			<checkbox id="experience">
@@ -35,10 +35,7 @@
 			<metricEnable>elementListenTracker</metricEnable>
 		</Metric>
 		<interface>
-			<!--<check name="fragmentPlayed"/>
-			<check name="fragmentFullPlayback"/>
 			<check name="fragmentMoved"/>
-			<check name="fragmentComments"/>-->
 			<check name="scalerange" min="25" max="75"/>
 			<option name='playhead'/>
 			<option name="page-count"/>
@@ -58,13 +55,7 @@
 		<audioElements url="1.wav" id="1"/>
 		<audioElements url="2.wav" id="2"/>
 		<audioElements url="3.wav" id="3"/>
-		<audioElements url="4.wav" id="4" type="outsidereference"/>
-		<!--<audioElements url="5.wav" id="5"/>
-		<audioElements url="6.wav" id="6"/>
-		<audioElements url="7.wav" id="7"/>
-		<audioElements url="8.wav" id="8"/>
-		<audioElements url="9.wav" id="9"/>
-		<audioElements url="10.wav" id="10"/>-->
+		<audioElements url="4.wav" id="4"/>
 		<CommentQuestion id='mixingExperience' type="text">What is your mixing experience</CommentQuestion>
 		<CommentQuestion id="preference" type="radio">
 			<statement>Please enter your ranking preference on this song</statement>
@@ -103,11 +94,7 @@
         <audioElements url="3.wav" id="3"/>
         <audioElements url="4.wav" id="4"/>
         <audioElements url="5.wav" id="5"/>
-        <audioElements url="6.wav" id="6"/>
-        <!-- <audioElements url="7.wav" id="7"/>
-         <audioElements url="8.wav" id="8"/>
-         <audioElements url="9.wav" id="9"/>
-         <audioElements url="10.wav" id="10"/>-->
+        <audioElements url="6.wav" id="6" type="outsidereference"/>
         <CommentQuestion id='mixingExperience' type="text">What is your mixing experience?</CommentQuestion>
         <CommentQuestion id="preference" type="radio">
             <statement>Please enter your ranking preference on this song.</statement>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/mushra.css	Tue Sep 15 10:20:50 2015 +0100
@@ -0,0 +1,55 @@
+/*
+ * Hold any style information for MUSHRA 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.pageTitle {
+	width: auto;
+	height: 20px;
+	margin-top: 20px;
+}
+
+div.pageTitle span{
+	font-size: 1.5em;
+}
+
+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.track-slider {
+	float: left;
+	width: 94px;
+	border: solid;
+	border-width: 1px;
+	border-color: black;
+	padding:2px;
+}
+
+input[type=range][orient=vertical]
+{
+    writing-mode: bt-lr; /* IE */
+    -webkit-appearance: slider-vertical; /* WebKit */
+    width: 8px;
+    height: 175px;
+    padding: 0 5px;
+}
\ No newline at end of file

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/mushra.js	Tue Sep 15 10:20:50 2015 +0100
@@ -0,0 +1,334 @@
+/**
+ *  mushra.js
+ *  Create the MUSHRA interface
+ */
+
+// Once this is loaded and parsed, begin execution
+loadInterface();
+
+function loadInterface() {
+	// Get the dimensions of the screen available to the page
+	var width = window.innerWidth;
+	var height = window.innerHeight;
+	
+	// The injection point into the HTML page
+	interfaceContext.insertPoint = document.getElementById("topLevelBody");
+	var testContent = document.createElement('div');
+	testContent.id = 'testContent';
+	
+	// Create the top div for the Title element
+	var titleAttr = specification.title;
+	var title = document.createElement('div');
+	title.className = "title";
+	title.align = "center";
+	var titleSpan = document.createElement('span');
+	
+	// Set title to that defined in XML, else set to default
+	if (titleAttr != undefined) {
+		titleSpan.textContent = titleAttr;
+	} else {
+		titleSpan.textContent =  'Listening test';
+	}
+	// 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);
+	
+	// Create Interface buttons!
+	var interfaceButtons = document.createElement('div');
+	interfaceButtons.id = 'interface-buttons';
+	
+	// Create playback start/stop points
+	var playback = document.createElement("button");
+	playback.innerHTML = 'Stop';
+	playback.id = 'playback-button';
+	// onclick function. Check if it is playing or not, call the correct function in the
+	// audioEngine, change the button text to reflect the next state.
+	playback.onclick = function() {
+		if (audioEngineContext.status == 1) {
+			audioEngineContext.stop();
+			this.innerHTML = 'Stop';
+            var time = audioEngineContext.timer.getTestTime();
+            console.log('Stopped at ' + time); // DEBUG/SAFETY
+		}
+	};
+	// Create Submit (save) button
+	var submit = document.createElement("button");
+	submit.innerHTML = 'Submit';
+	submit.onclick = buttonSubmitClick;
+	submit.id = 'submit-button';
+	// Append the interface buttons into the interfaceButtons object.
+	interfaceButtons.appendChild(playback);
+	interfaceButtons.appendChild(submit);
+	
+	// Create a slider box
+	var sliderBox = document.createElement('div');
+	sliderBox.style.width = "100%";
+	sliderBox.style.height = window.innerHeight - 180 + 'px';
+	sliderBox.id = 'slider';
+	sliderBox.align = "center";
+	
+	// Global parent for the comment boxes on the page
+	var feedbackHolder = document.createElement('div');
+	feedbackHolder.id = 'feedbackHolder';
+	
+	testContent.style.zIndex = 1;
+	interfaceContext.insertPoint.innerHTML = null; // Clear the current schema
+	
+	// Inject into HTML
+	testContent.appendChild(title); // Insert the title
+	testContent.appendChild(pagetitle);
+	testContent.appendChild(interfaceButtons);
+	testContent.appendChild(sliderBox);
+	testContent.appendChild(feedbackHolder);
+	interfaceContext.insertPoint.appendChild(testContent);
+
+	// Load the full interface
+	testState.initialise();
+	testState.advanceState();
+}
+
+function loadTest(audioHolderObject)
+{
+	// Reset audioEngineContext.Metric globals for new test
+	audioEngineContext.newTestPage();
+	
+	// Delete any previous audioObjects associated with the audioEngine
+	audioEngineContext.audioObjects = [];
+	interfaceContext.deleteCommentBoxes();
+	interfaceContext.deleteCommentQuestions();
+	
+	var id = audioHolderObject.id;
+	
+	var feedbackHolder = document.getElementById('feedbackHolder');
+	var interfaceObj = audioHolderObject.interfaces;
+	
+	var sliderBox = document.getElementById('slider');
+	feedbackHolder.innerHTML = null;
+	sliderBox.innerHTML = null;
+	
+	var commentBoxPrefix = "Comment on track";
+	if (interfaceObj.commentBoxPrefix != undefined) {
+		commentBoxPrefix = interfaceObj.commentBoxPrefix;
+	}
+	
+	/// CHECK FOR SAMPLE RATE COMPATIBILITY
+	if (audioHolderObject.sampleRate != undefined) {
+		if (Number(audioHolderObject.sampleRate) != audioContext.sampleRate) {
+			var errStr = 'Sample rates do not match! Requested '+Number(audioHolderObject.sampleRate)+', got '+audioContext.sampleRate+'. Please set the sample rate to match before completing this test.';
+			alert(errStr);
+			return;
+		}
+	}
+	
+	var loopPlayback = audioHolderObject.loop;
+	
+	audioEngineContext.loopPlayback = loopPlayback;
+	
+	currentTestHolder = document.createElement('audioHolder');
+	currentTestHolder.id = audioHolderObject.id;
+	currentTestHolder.repeatCount = audioHolderObject.repeatCount;
+	
+	$(audioHolderObject.commentQuestions).each(function(index,element) {
+		var node = interfaceContext.createCommentQuestion(element);
+		feedbackHolder.appendChild(node.holder);
+	});
+	
+	// Find all the audioElements from the audioHolder
+	$(audioHolderObject.audioElements).each(function(index,element){
+		// Find URL of track
+		// In this jQuery loop, variable 'this' holds the current audioElement.
+		
+		// Now load each audio sample. First create the new track by passing the full URL
+		var trackURL = audioHolderObject.hostURL + element.url;
+		var audioObject = audioEngineContext.newTrack(element);
+		
+		var node = interfaceContext.createCommentBox(audioObject);
+		
+		// Create a slider per track
+		audioObject.interfaceDOM = new sliderObject(audioObject);
+		
+		// Distribute it randomnly
+		audioObject.interfaceDOM.slider.value = Math.random();
+		
+		sliderBox.appendChild(audioObject.interfaceDOM.holder);
+		audioObject.metric.initialised(audioObject.interfaceDOM.slider.value);
+        
+	});
+	
+	// Auto-align
+	var numObj = audioHolderObject.audioElements.length;
+	var totalWidth = (numObj-1)*150+100;
+	var diff = (window.innerWidth - totalWidth)/2;
+	audioEngineContext.audioObjects[0].interfaceDOM.holder.style.marginLeft = diff + 'px';
+}
+
+function sliderObject(audioObject)
+{
+	// Constructs the slider object. We use the HTML5 slider object
+	this.parent = audioObject;
+	this.holder = document.createElement('div');
+	this.title = document.createElement('span');
+	this.slider = document.createElement('input');
+	this.play = document.createElement('button');
+	
+	this.holder.className = 'track-slider';
+	this.holder.style.height = window.innerHeight-200 + 'px';
+	this.holder.appendChild(this.title);
+	this.holder.appendChild(this.slider);
+	this.holder.appendChild(this.play);
+	this.holder.align = "center";
+	this.holder.style.marginLeft = "50px";
+	this.holder.setAttribute('trackIndex',audioObject.id);
+	
+	this.title.textContent = audioObject.id;
+	this.title.style.width = "100%";
+	this.title.style.float = "left";
+	
+	this.slider.type = "range";
+	this.slider.min = "0";
+	this.slider.max = "1";
+	this.slider.step = "0.01";
+	this.slider.setAttribute('orient','vertical');
+	this.slider.style.float = "left";
+	this.slider.style.width = "100%";
+	this.slider.style.height = window.innerHeight-250 + 'px';
+	this.slider.onchange = function()
+	{
+		var time = audioEngineContext.timer.getTestTime();
+		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.play.textContent = "Play";
+	this.play.value = audioObject.id;
+	this.play.style.float = "left";
+	this.play.style.width = "100%";
+	this.play.onclick = function()
+	{
+		audioEngineContext.play();
+		if (audioEngineContext.audioObjectsReady) {
+			var id = Number(event.srcElement.value);
+			//audioEngineContext.metric.sliderPlayed(id);
+			audioEngineContext.play(id);
+		}
+	};
+	
+	this.enable = function() {
+		if (this.parent.state == 1)
+		{
+			$(this.slider).removeClass('track-slider-disabled');
+		}
+	};
+	
+	this.exportXMLDOM = function(audioObject) {
+		// Called by the audioObject holding this element. Must be present
+		var node = document.createElement('value');
+		node.textContent = this.slider.value;
+		return node;
+	};
+	this.getValue = function() {
+		return this.slider.value;
+	};
+}
+
+
+function buttonSubmitClick() // TODO: Only when all songs have been played!
+{
+	var checks = testState.currentStateMap[testState.currentIndex].interfaces[0].options;
+	var canContinue = true;
+	
+	// Check that the anchor and reference objects are correctly placed
+	if (interfaceContext.checkHiddenAnchor() == false) {return;}
+	if (interfaceContext.checkHiddenReference() == false) {return;}
+	/*
+	for (var i=0; i<checks.length; i++) {
+		if (checks[i].type == 'check')
+		{
+			switch(checks[i].check) {
+			case 'fragmentPlayed':
+				// Check if all fragments have been played
+				var checkState = interfaceContext.checkAllPlayed();
+				if (checkState == false) {canContinue = false;}
+				break;
+			case  'fragmentFullPlayback':
+				// Check all fragments have been played to their full length
+				var checkState = interfaceContext.checkAllPlayed();
+				if (checkState == false) {canContinue = false;}
+				console.log('NOTE: fragmentFullPlayback not currently implemented, performing check fragmentPlayed instead');
+				break;
+			case 'fragmentMoved':
+				// Check all fragment sliders have been moved.
+				var checkState = interfaceContext.checkAllMoved();
+				if (checkState == false) {canContinue = false;}
+				break;
+			case 'fragmentComments':
+				// Check all fragment sliders have been moved.
+				var checkState = interfaceContext.checkAllCommented();
+				if (checkState == false) {canContinue = false;}
+				break;
+			case 'scalerange':
+				// Check the scale is used to its full width outlined by the node
+				var checkState = interfaceContext.checkScaleRange();
+				if (checkState == false) {canContinue = false;}
+				break;
+			}
+
+		}
+		if (!canContinue) {break;}
+	}
+   */
+    if (canContinue) {
+	    if (audioEngineContext.status == 1) {
+	        var playback = document.getElementById('playback-button');
+	        playback.click();
+	    // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options
+	    } else
+	    {
+	        if (audioEngineContext.timer.testStarted == false)
+	        {
+	            alert('You have not started the test! Please press start to begin the test!');
+	            return;
+	        }
+	    }
+	    testState.advanceState();
+    } 
+}
+
+function pageXMLSave(store, testXML)
+{
+	// Saves a specific test page
+	var xmlDoc = store;
+	// Check if any session wide metrics are enabled
+	
+	var commentShow = testXML.elementComments;
+	
+	var metric = document.createElement('metric');
+	if (audioEngineContext.metric.enableTestTimer)
+	{
+		var testTime = document.createElement('metricResult');
+		testTime.id = 'testTime';
+		testTime.textContent = audioEngineContext.timer.testDuration;
+		metric.appendChild(testTime);
+	}
+	xmlDoc.appendChild(metric);
+	var audioObjects = audioEngineContext.audioObjects;
+	for (var i=0; i<audioObjects.length; i++) 
+	{
+		var audioElement = audioEngineContext.audioObjects[i].exportXMLDOM();
+		audioElement.setAttribute('presentedId',i);
+		xmlDoc.appendChild(audioElement);
+	}
+	
+	$(interfaceContext.commentQuestions).each(function(index,element){
+		var node = element.exportXMLDOM();
+		xmlDoc.appendChild(node);
+	});
+	store = xmlDoc;
+}

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/save.php	Tue Sep 15 10:20:50 2015 +0100
@@ -0,0 +1,9 @@
+<?php
+	head('Access-Control-Allow-Origin: *');
+	$postText = file_get_contents('php://input');
+	$datetime = date('ymdHis');
+	$xmlfile = "save".$datetime.".xml";
+	$fileHandle = fopen("saves/".$xmlfile, 'w');
+	fwrite($fileHandle, $postText);
+	fclose($fileHandle);
+?>
\ No newline at end of file

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/test_create/test_create_2.html	Tue Sep 15 10:20:50 2015 +0100
@@ -0,0 +1,793 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+
+		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
+		Remove this if you use the .htaccess -->
+		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+		<title>test_create_2</title>
+		<meta name="description" content="">
+		<meta name="author" content="Nicholas">
+
+		<meta name="viewport" content="width=device-width; initial-scale=1.0">
+		
+		<script type="text/javascript">
+			window.onload = function() {
+				var dropBody = document.getElementById('dragFile');
+				dropBody.addEventListener('dragover', handleDragOver, false);
+				dropBody.addEventListener('dragenter',handleDragEnter,false);
+				dropBody.addEventListener('dragleave',handleDragLeave,false);
+				dropBody.addEventListener('drop', handleDrop,false);
+			};
+			
+			function handleDragOver(e) {
+				e.stopPropagation();
+				e.preventDefault();
+			}
+			function handleDragEnter(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				this.style.backgroundColor = '#AAFFAA';
+			}
+			function handleDragLeave(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				this.style.backgroundColor = "#FFFFFF";
+			}
+			function handleDrop(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				
+				var file = e.dataTransfer.files[0];
+				
+				// Uses HTML5 FileAPI - https://w3c.github.io/FileAPI/#filereader-interface
+				var reader = new FileReader();
+				reader.onload = function() {
+					var parse = new DOMParser();
+					var xml = parse.parseFromString(reader.result,'text/xml');
+					importXML(xml);
+				};
+				reader.readAsText(file);
+				
+			}
+			
+			function removeNode(event) {
+				event.srcElement.parentElement.parentElement.removeChild(event.srcElement.parentElement);
+			}
+			
+			function removeNodeButton()
+			{
+				var button = document.createElement('button');
+				button.textContent = 'Remove';
+				button.onclick = function(event){removeNode(event);};
+				return button;
+			}
+			
+			function attributePair(type,text,name,mandatory)
+			{
+				var node = document.createElement('div');
+				node.setAttribute('name','attribute');
+				var span = document.createElement('span');
+				span.textContent = text;
+				var input = document.createElement('input');
+				input.type = type;
+				input.setAttribute('attrib-name',name);
+				input.setAttribute('mandatory',mandatory);
+				node.appendChild(span);
+				node.appendChild(input);
+				return node;
+			}
+			
+			function buttonClickedValidate()
+			{
+				var allInputs = document.getElementsByTagName('input');
+				for (var i=0; i<allInputs.length; i++)
+				{goodNode(allInputs[i]);}
+				var errList = document.getElementById('errorMessage');
+				errList.innerHTML = "";
+				validate(document.getElementById('topLevelBody'));
+				var submit = document.getElementById('createXML');
+				if (errList.innerHTML == "")
+				{submit.disabled = false;}
+				else {submit.disabled = true;}
+			}
+			
+			function validate(node)
+			{
+				var name = node.getAttribute('name');
+				if (name != 'attribute' && name != 'element') {
+					var child = node.children;
+					for (var i=0; i<node.childElementCount; i++)
+					{
+						if (child[i].nodeName == "DIV")
+						{
+							validate(child[i]);
+						}
+					}
+				} else if (name == 'attribute')
+				{
+					var child = node.children;
+					for (var i=0; i<node.childElementCount; i++)
+					{
+						if (child[i].nodeName == "INPUT")
+						{
+							var mandatory = child[i].getAttribute('mandatory');
+							if (mandatory == 'true') {mandatory = true;}
+							else {mandatory = false;}
+							if (child[i].type =='text' || child[i].type =='number')
+							{
+								if (child[i].value.length == 0)
+								{
+									if (mandatory == true) {errorNode(child[i]);}
+									else {warningNode(child[i]);}
+								} else {goodNode(child[i]);}
+							}
+						}
+					}
+				} else if (name == 'element')
+				{
+					var child = node.children;
+					for (var i=0; i<node.childElementCount; i++)
+					{
+						if (child[i].nodeName == "INPUT")
+						{
+							if (child[i].value.length == 0){warningNode(child[i]);}
+							else {goodNode(child[i]);}
+						}
+					}
+				}
+			}
+			
+			function buttonClickedSubmit()
+			{
+				var xml = document.createElement('BrowserEvalProjectDocument');
+				var dom = document.getElementById('topLevelBody');
+				xml = extractXML(xml,dom);
+				var drop = document.getElementById('errorMessage');
+				createProjectSave(xml,drop);
+			}
+			
+			function createProjectSave(xmlDoc, injectPoint) {
+				var parent = document.createElement("div");
+				parent.appendChild(xmlDoc);
+				var file = [parent.innerHTML];
+				var bb = new Blob(file,{type : 'application/xml'});
+				var dnlk = window.URL.createObjectURL(bb);
+				var a = document.createElement("a");
+				a.hidden = '';
+				a.href = dnlk;
+				a.download = "save.xml";
+				a.textContent = "Save File";
+				injectPoint.appendChild(a);
+			}
+			
+			function extractXML(xml,node)
+			{
+				if(node.getAttribute('class')=='attrib')
+				{
+					var children = node.children;
+					for (var i=0; i<children.length; i++)
+					{
+						if (children[i].getAttribute('name')=='attribute')
+						{
+							var input = children[i].children[1];
+							if (input.type == 'checkbox')
+							{
+								xml.setAttribute(input.getAttribute('attrib-name'),input.checked);
+							} else {
+								xml.setAttribute(input.getAttribute('attrib-name'),input.value);
+							}
+						} else if (children[i].getAttribute('name') == 'element')
+						{
+							var input = children[i].children[1];
+							xml.textContent = input.value;
+						}
+					}
+					return xml;
+				} else if (node.getAttribute('node-name') != undefined)
+				{
+					var xmlDom = document.createElement(node.getAttribute('node-name'));
+					xml.appendChild(xmlDom);
+					var children = node.children;
+					for (var i=0; i<children.length; i++)
+					{
+						if (children[i].nodeName == "DIV")
+						{
+							xmlDom = extractXML(xmlDom,children[i]);
+						}
+					}
+				} else {
+					var children = node.children;
+					for (var i=0; i<children.length; i++)
+					{
+						if (children[i].nodeName == "DIV")
+						{
+							xml = extractXML(xml,children[i]);
+						}
+					}
+				}
+				return xml;
+			}
+			
+			function goodNode(node)
+			{node.style.backgroundColor="#FFFFFF";}
+			
+			function warningNode(node)
+			{node.style.backgroundColor="#FFFF88";}
+			
+			function errorNode(node)
+			{
+				var errLog = document.getElementById('errorMessage');
+				var div = document.createElement('div');
+				var span = document.createElement('span');
+				span.textContent = 'Invalid Data: ';
+				var list = [node.getAttribute('attrib-name')];
+				var pNode = node;
+				while (pNode.id != 'topLevelBody')
+				{
+					if (pNode.getAttribute('node-name') != undefined)
+					{list.push(pNode.getAttribute('node-name'));}
+					pNode = pNode.parentElement;
+				}
+				for (var i=list.length-1; i>=0; i--)
+				{
+					span.textContent = span.textContent +' ->'+ list[i];
+				}
+				div.appendChild(span);
+				errLog.appendChild(div);
+				errLog.style.visibility = 'visible';
+				node.style.backgroundColor="#FF0000";
+			}
+			
+			function importXML(xml)
+			{
+				xml = xml.children[0];
+				var setup = xml.getElementsByTagName('setup')[0];
+				var DOM = document.getElementById('setup');
+				// Insert any setup node attributes
+				setAttributes(DOM,setup);
+				
+				for (var i=0; i<setup.childElementCount; i++)
+				{
+					var node = DOM.getElementsByClassName(setup.children[i].nodeName);
+					if (node.length != 0)
+					{
+						node = node[0];
+						setAttributes(node,setup.children[i]);
+						buildNode(node,setup.children[i]);
+					}
+				}
+				
+				var holders = xml.getElementsByTagName('audioHolder');
+				for (var i=0; i<holders.length; i++)
+				{
+					var node = addAudioHolder();
+					document.getElementById('topLevelBody').appendChild(node);
+					setAttributes(node,holders[i]);
+					buildNode(node,holders[i]);
+				}
+			}
+			
+			function setAttributes(node,xml)
+			{
+				var attribs = node.getElementsByClassName('attrib');
+				if (attribs.length != 0){
+					attribs = attribs[0];
+					for (var i=0; i < attribs.children.length; i++)
+					{
+						if(attribs.children[i].getAttribute('name')=='attribute'){
+							var input = attribs.children[i].children[1];
+							var value = xml.attributes.getNamedItem(input.getAttribute('attrib-name'));
+							if (value != undefined) {value = value.value;}
+							if (input.type == 'checkbox')
+							{input.checked = value;}
+							else
+							{input.value = value;}
+						} else if(attribs.children[i].getAttribute('name')=='element'){
+							var input = attribs.children[i].children[1];
+							input.value = xml.textContent;
+						}
+					}
+				}
+			}
+			
+			function buildNode(parent,xml)
+			{
+				for (var i=0; i<xml.childElementCount; i++)
+				{
+					var child = xml.children[i];
+					var name = child.nodeName;
+					var node = null;
+					if (name == 'statement'){node = addPPStatement();}
+					else if (name == 'question' || name == 'number'){node = addPPQuestion();}
+					else if (name == 'checkbox'){node = addPPCheckbox();}
+					else if (name == 'radio'){node = addPPRadio();}
+					else if (name == 'metricEnable'){node = addMetricEnable();}
+					else if (name == 'check'){node = addInterfaceCheck();}
+					else if (name == 'option'){node = addInterfaceOption();}
+					else if (name == 'scale'){node = addScaleMarker();}
+					else if (name == 'audioHolder'){node = addAudioHolder();}
+					else if (name == 'audioElements'){node = addAudioElement();}
+					else if (name == 'commentQuestion'){node = addExtraComment();}
+					else if (name == 'interface'){node = parent.getElementsByClassName('interface')[0];}
+					else if (name == 'preTest' || name == 'PreTest')
+					{
+						node = parent.getElementsByClassName('preTest')[0];
+					}
+					else if (name == 'postTest' || name == 'PostTest')
+					{
+						node = parent.getElementsByClassName('postTest')[0];
+					}
+					else if (name == 'title' || name == 'commentBoxPrefix')
+					{
+						node = parent.getElementsByClassName(name)[0];
+					}
+					if (node != null) {
+						if (name == 'radio' || name == 'checkbox')
+						{
+							buildRadio(node,xml.children[i]);
+							parent.appendChild(node);
+						} else
+						{
+							setAttributes(node,child);
+							parent.appendChild(node);
+							buildNode(node,child);
+						}
+					} else {
+						var node = createHead(name,name,'h3');
+						
+						var attrib = document.createElement('div');
+						attrib.className = 'attrib';
+						for (var j=0; j<child.attributes.length; j++)
+						{
+							attrib.appendChild(attributePair('text',child.attributes[j].name,child.attributes[j].name,false));
+						}
+						
+						node.appendChild(attrib);
+						parent.appendChild(node);
+						setAttributes(node,child);
+						/*
+						buildNode(node,child);
+						*/
+					}
+				}
+			}
+			
+			function buildRadio(node,xml)
+			{
+				setAttributes(node,xml);
+				setAttributes(node.getElementsByClassName('statement')[0],xml.getElementsByTagName('statement')[0]);
+				var options = xml.getElementsByTagName('option');
+				var addOptionButton = node.getElementsByTagName('button')[2];
+				for (var i=0; i<options.length; i++)
+				{
+					addOptionButton.click();
+					setAttributes(node.getElementsByClassName('option')[i],options[i]);
+				}
+			}
+			
+			function createHead(name,title,size)
+			{
+				var node = document.createElement('div');
+				node.setAttribute('class','head '+name);
+				node.setAttribute('node-name',name);
+				if (size == undefined)
+				{var node_T = document.createElement('h3');}
+				else{var node_T = document.createElement(size);}
+				node_T.textContent = title;
+				node.appendChild(node_T);
+				node.appendChild(removeNodeButton());
+				return node;
+			}
+			
+			function addPretestNode()
+			{
+				var node = createHead('preTest', 'Pre Test','h3');
+				var addStatement = document.createElement('button');
+				addStatement.textContent = 'Add Statement';
+				addStatement.onclick = function(){event.srcElement.parentElement.appendChild(addPPStatement());};
+				node.appendChild(addStatement);
+				var addQuestion = document.createElement('button');
+				addQuestion.textContent = 'Add Question';
+				addQuestion.onclick = function(){event.srcElement.parentElement.appendChild(addPPQuestion());};
+				node.appendChild(addQuestion);
+				var addCheckbox = document.createElement('button');
+				addCheckbox.textContent = 'Add Checkbox';
+				addCheckbox.onclick = function(){event.srcElement.parentElement.appendChild(addPPCheckbox());};
+				node.appendChild(addCheckbox);
+				var addRadio = document.createElement('button');
+				addRadio.textContent = 'Add Checkbox';
+				addRadio.onclick = function(){event.srcElement.parentElement.appendChild(addPPRadio());};
+				node.appendChild(addRadio);
+				return node;
+			};
+			
+			function addPosttestNode()
+			{
+				var node = createHead('postTest', 'Post Test','h3');
+				var addStatement = document.createElement('button');
+				addStatement.textContent = 'Add Statement';
+				addStatement.onclick = function(){event.srcElement.parentElement.appendChild(addPPStatement());};
+				node.appendChild(addStatement);
+				var addQuestion = document.createElement('button');
+				addQuestion.textContent = 'Add Question';
+				addQuestion.onclick = function(){event.srcElement.parentElement.appendChild(addPPQuestion());};
+				node.appendChild(addQuestion);
+				var addCheckbox = document.createElement('button');
+				addCheckbox.textContent = 'Add Checkbox';
+				addCheckbox.onclick = function(){event.srcElement.parentElement.appendChild(addPPCheckbox());};
+				node.appendChild(addCheckbox);
+				var addRadio = document.createElement('button');
+				addRadio.textContent = 'Add Checkbox';
+				addRadio.onclick = function(){event.srcElement.parentElement.appendChild(addPPRadio());};
+				node.appendChild(addRadio);
+				return node;
+			};
+		
+			function addPPStatement()
+			{
+				var node = createHead('statement', 'Statement','h4');
+				var attrib = document.createElement('div');
+				attrib.className = "attrib";
+				var element = document.createElement('div');
+				element.setAttribute('name','element');
+				var span = document.createElement('span');
+				span.textContent = "Enter statement: ";
+				element.appendChild(span);
+				var input = document.createElement('input');
+				input.type = "text";
+				input.style.width = "500px";
+				element.appendChild(input);
+				attrib.appendChild(element);
+				node.appendChild(attrib);
+				return node;
+			};
+			function addPPQuestion()
+			{
+				var node = createHead('question', 'Question','h4');
+				var attrib = document.createElement('div');
+				attrib.className = "attrib";
+				attrib.appendChild(attributePair('text','ID: ','id',true));
+				attrib.appendChild(attributePair('checkbox','Mandatory: ','mandatory',false));
+				attrib.appendChild(attributePair('text','Box size: ','boxsize',false));
+				var element = document.createElement('div');
+				element.setAttribute('name','element');
+				var span = document.createElement('span');
+				span.textContent = "Enter Question: ";
+				element.appendChild(span);
+				var input = document.createElement('input');
+				input.type = "text";
+				input.style.width = "500px";
+				element.appendChild(input);
+				attrib.appendChild(element);
+				node.appendChild(attrib);
+				return node;
+			};
+			function addPPCheckbox()
+			{
+				var node = createHead('checkbox', 'Checkbox','h4');
+				var attrib = document.createElement('div');
+				attrib.className = "attrib";
+				attrib.appendChild(attributePair('text','ID: ','id',true));
+				attrib.appendChild(attributePair('checkbox','Mandatory: ','mandatory',false));
+				node.appendChild(attrib);
+				node.appendChild(addPPStatement());
+				var addOption = document.createElement('button');
+				addOption.textContent = 'Add Checkbox';
+				addOption.onclick = function() {
+					var node = createHead('option', 'Option','h4');
+					var attrib = document.createElement('div');
+					attrib.className = "attrib";
+					attrib.appendChild(attributePair('text','ID: ','id',true));
+					var element = document.createElement('div');
+					element.setAttribute('name','element');
+					var span = document.createElement('span');
+					span.textContent = "Enter Text: ";
+					var input = document.createElement('input');
+					input.type = 'text';
+					element.appendChild(span);
+					element.appendChild(input);
+					attrib.appendChild(element);
+					node.appendChild(attrib);
+					event.srcElement.parentElement.appendChild(node);
+				};
+				node.appendChild(addOption);
+				return node;
+			};
+			
+			function addPPRadio()
+			{
+				var node = createHead('radio', 'Radio','h4');
+				var attrib = document.createElement('div');
+				attrib.className = "attrib";
+				attrib.appendChild(attributePair('text','ID: ','id',true));
+				attrib.appendChild(attributePair('checkbox','Mandatory: ','mandatory',false));
+				node.appendChild(attrib);
+				node.appendChild(addPPStatement());
+				var addOption = document.createElement('button');
+				addOption.textContent = 'Add Radio';
+				addOption.onclick = function() {
+					var node = createHead('option', 'Option','h4');
+					var attrib = document.createElement('div');
+					attrib.className = "attrib";
+					attrib.appendChild(attributePair('text','Name: ','name',true));
+					var element = document.createElement('div');
+					element.setAttribute('name','element');
+					var span = document.createElement('span');
+					span.textContent = "Enter Text: ";
+					var input = document.createElement('input');
+					input.type = 'text';
+					element.appendChild(span);
+					element.appendChild(input);
+					attrib.appendChild(element);
+					node.appendChild(attrib);
+					event.srcElement.parentElement.appendChild(node);
+				};
+				node.appendChild(addOption);
+				return node;
+			};
+			
+			function addMetricEnable()
+			{
+				var node = createHead('metricEnable', '','h4');
+				var attrib = document.createElement('div');
+				attrib.className = "attrib";
+				var element = document.createElement('div');
+				element.setAttribute('name','element');
+				var span = document.createElement('span');
+				span.textContent = "Enter Metric Name: ";
+				element.appendChild(span);
+				var input = document.createElement('input');
+				input.type = "text";
+				input.style.width = "500px";
+				element.appendChild(input);
+				attrib.appendChild(element);
+				node.appendChild(attrib);
+				return node;
+			};
+			
+			function addInterfaceCheck()
+			{
+				var node = createHead('check', 'Check','h4');
+				var attrib = document.createElement('div');
+				attrib.className = "attrib";
+				attrib.appendChild(attributePair('text','Name','name',true));
+				node.appendChild(attrib);
+				return node;
+			}
+			function addInterfaceOption()
+			{
+				var node = createHead('option', 'Option','h4');
+				var attrib = document.createElement('div');
+				attrib.className = "attrib";
+				attrib.appendChild(attributePair('text','Name','name',true));
+				node.appendChild(attrib);
+				return node;
+			}
+			
+			
+			function addAudioHolder()
+			{
+				var node = createHead('audioHolder','Audio Holder / Test Page','h2');
+				var attrib = document.createElement('div');
+				attrib.className = "attrib";
+				node.appendChild(attrib);
+				
+				attrib.appendChild(attributePair('text','ID: ','id',true));
+				attrib.appendChild(attributePair('url','Host URL: ','hostURL',false));
+				attrib.appendChild(attributePair('number','Sample Rate: ','sampleRate',false));
+				attrib.appendChild(attributePair('checkbox','Randomise Fragment Order: ','randomiseOrder',false));
+				attrib.appendChild(attributePair('number','Repeat Count: ','repeatCount',false));
+				attrib.appendChild(attributePair('checkbox','Loop Fragments: ','loop',false));
+				attrib.appendChild(attributePair('checkbox','Fragment Comment Boxes: ','enableComments',false));
+				
+				node.appendChild(addPretestNode());
+				
+				node.appendChild(addPosttestNode());
+				
+				var interfaceNode = createHead('interface','Interface','h3');
+				var addOption = document.createElement('button');
+				addOption.textContent = 'Add Option';
+				addOption.onclick = function(){event.srcElement.parentElement.appendChild(addInterfaceOption());};
+				interfaceNode.appendChild(addOption);
+				var scale = document.createElement('button');
+				scale.textContent = 'Add scale';
+				scale.onclick = function(){event.srcElement.parentElement.appendChild(addScaleMarker());};
+				interfaceNode.appendChild(scale);
+				
+				var PageTitle = createHead('title','Page Title','h4');
+				var attrib = document.createElement('div');
+				attrib.className='attrib';
+				var element = document.createElement('div');
+				element.setAttribute('name','element');
+				var span = document.createElement('span');
+				span.textContent = 'Page Title: ';
+				element.appendChild(span);
+				var input = document.createElement('input');
+				input.type = 'text';
+				input.style.width = "500px";
+				element.appendChild(input);
+				attrib.appendChild(element);
+				PageTitle.appendChild(attrib);
+				interfaceNode.appendChild(PageTitle);
+				
+				var commentBoxPrefix = createHead('commentBoxPrefix','Comment Box Prefix','h4');
+				var attrib = document.createElement('div');
+				attrib.className='attrib';
+				var element = document.createElement('div');
+				element.setAttribute('name','element');
+				var span = document.createElement('span');
+				span.textContent = 'Prefix: ';
+				element.appendChild(span);
+				var input = document.createElement('input');
+				input.type = 'text';
+				input.style.width = "500px";
+				element.appendChild(input);
+				attrib.appendChild(element);
+				commentBoxPrefix.appendChild(attrib);
+				interfaceNode.appendChild(commentBoxPrefix);
+				
+				node.appendChild(interfaceNode);
+				
+				var addElement = document.createElement('button');
+				addElement.textContent = 'Add Audio Element';
+				addElement.onclick = function(){event.srcElement.parentElement.appendChild(addAudioElement());};
+				node.appendChild(addElement);
+				
+				var addCQ = document.createElement('button');
+				addCQ.textContent = 'Add Comment Box';
+				addCQ.onclick = function(){event.srcElement.parentElement.appendChild(addExtraComment());};
+				node.appendChild(addCQ);
+				
+				return node;
+			};
+			
+			function addScaleMarker(){
+				var node = createHead('scale','Scale','h4');
+				var attrib = document.createElement('div');
+				attrib.className = "attrib";
+				node.appendChild(attrib);
+				attrib.appendChild(attributePair('number','Position','position',true));
+				var element = document.createElement('div');
+				element.setAttribute('name','element');
+				var span = document.createElement('span');
+				span.textContent = 'Marker Text (Optional): ';
+				element.appendChild(span);
+				var input = document.createElement('input');
+				input.type = 'text';
+				element.appendChild(input);
+				attrib.appendChild(element);
+				return node;
+			};
+			
+			function addAudioElement()
+			{
+				var node = createHead('audioElements','Audio Element');
+				var attrib = document.createElement('div');
+				attrib.className = "attrib";
+				node.appendChild(attrib);
+				
+				attrib.appendChild(attributePair('text','ID: ','id',true));
+				attrib.appendChild(attributePair('text','URL: ','url',true));
+				attrib.appendChild(attributePair('text','Type: ','type',false));
+				
+				return node;
+			};
+			
+			function addExtraComment()
+			{
+				var node = createHead('CommentQuestion','Comment');
+				var attrib = document.createElement('div');
+				attrib.className = "attrib";
+				node.appendChild(attrib);
+				attrib.appendChild(attributePair('text','ID: ','id',true));
+				
+				var element = document.createElement('div');
+				element.setAttribute('name','element');
+				var span = document.createElement('span');
+				span.textContent = 'Question: ';
+				element.appendChild(span);
+				var input = document.createElement('input');
+				input.type = 'text';
+				input.style.width = "500px";
+				element.appendChild(input);
+				attrib.appendChild(element);
+				return node;
+			}
+		</script>
+
+		<style>
+			h4 {margin: 0px;}
+			div {
+				padding: 2px;
+				margin-top: 2px;
+				margin-bottom: 2px;
+			}
+			div.head{
+				margin-left: 10px;
+				border: black;
+				border-width: 2px;
+				border-style: solid;
+			}
+			div.attrib{
+				margin-left:25px;
+				border: black;
+				border-width: 2px;
+				border-style: dashed;
+				margin-bottom: 10px;
+				display: table;
+				background-color: rgb(200,255,255);
+			}
+			div.attrib div {
+				width: auto;
+				position: relative;
+				display: table-cell;
+			}
+			div#dragFile{
+				height:100px;
+				border-width: 2px;
+				border-style: dashed;
+				margin-bottom: 10px;
+			}
+		</style>
+	</head>
+
+	<body>
+		<h1>Create Test Setup XML</h1>
+		<div id="dragFile">
+			<span>Drag and Drop an XML specification file here to auto-load.</span>
+		</div>
+		<button id="validateXML" onclick="buttonClickedValidate();">Validate</button>
+		<button id="createXML" onclick="buttonClickedSubmit();" disabled>Submit</button>
+		<div id="errorMessage" visibility="hidden"></div>
+		<div id="topLevelBody" align="left">
+			<div id='setup' class="head setup" node-name='setup'>
+				<h2>Setup Node</h2>
+				<div class="attrib">
+					<div name="attribute">
+						<span>Interface: </span>
+						<input type="text" attrib-name='interface' mandatory='true'/>
+					</div>
+					<div name="attribute">
+						<span>Project Return: </span>
+						<input type="url" attrib-name='projectReturn'/>
+					</div>
+					<div name="attribute">
+						<span>Randomise Page Order: </span>
+						<input type="checkbox" attrib-name='randomiseOrder'/>
+					</div>
+					<div name="attribute">
+						<span>Collect Metrics: </span>
+						<input type="checkbox" attrib-name='collectMetrics'/>
+					</div>
+				</div>
+				<div class="head PreTest" node-name="preTest">
+					<h3>Pre Test</h3>
+					<button onclick="event.srcElement.parentElement.appendChild(addPPStatement());">Add Statement</button>
+					<button onclick="event.srcElement.parentElement.appendChild(addPPQuestion());">Add Question</button>
+					<button onclick="event.srcElement.parentElement.appendChild(addPPCheckbox());">Add Checkbox</button>
+					<button onclick="event.srcElement.parentElement.appendChild(addPPRadio());">Add Radio</button>
+				</div>
+				<div class="head PostTest" node-name="postTest">
+					<h3>Post Test</h3>
+					<button onclick="event.srcElement.parentElement.appendChild(addPPStatement());">Add Statement</button>
+					<button onclick="event.srcElement.parentElement.appendChild(addPPQuestion());">Add Question</button>
+					<button onclick="event.srcElement.parentElement.appendChild(addPPCheckbox());">Add Checkbox</button>
+					<button onclick="event.srcElement.parentElement.appendChild(addPPRadio());">Add Radio</button>
+				</div>
+				<div class="head Metric" node-name="metrics">
+					<h3>Metrics</h3>
+					<button onclick="event.srcElement.parentElement.appendChild(addMetricEnable());">Add Metric Enable</button>
+				</div>
+				<div class="head interface" node-name="interface">
+					<h3>Interface</h3>
+					<button onclick="event.srcElement.parentElement.appendChild(addInterfaceCheck());">Add Check</button>
+					<button onclick="event.srcElement.parentElement.appendChild(addInterfaceOption());">Add Option</button>
+				</div>
+			</div>
+			<button onclick="event.srcElement.parentElement.appendChild(addAudioHolder());">Add Audio Holder</button>
+		</div>
+	</body>
+</html>