diff test_create/test_create.html @ 371:ad267c5e32ae

Merge of dev into default/master

--- a/test_create/test_create.html	Fri Dec 04 10:57:39 2015 +0000
+++ b/test_create/test_create.html	Fri Dec 04 11:00:55 2015 +0000
@@ -7,78 +7,2612 @@
 		Remove this if you use the .htaccess -->
 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
-		<title>WAET Create Test</title>
-		<meta name="description" content="">
-		<meta name="author" content="">
+		<title>WAET: Test Creator</title>
 
 		<meta name="viewport" content="width=device-width; initial-scale=1.0">
+		<script type="text/javascript">
 		
-		<script type="text/javascript">
-			// To aid 'one-page set-up' all scripts and CSS must be included directly in this file!
-			var topLevel;
-			window.onload = function() {
-				// Initialise page
-				topLevel = document.getElementById('topLevelBody');
-				var setup = document.createElement('div');
-				setup.id = 'setupTagDiv';
-				
-				// Setup drag/drop handles
-				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);
+			var APEInterfaceOptions = [["playhead","page-count"],["Show the playhead/scrubber bar", "Show test page count"]];
+			var APEInterfaceChecks = [["fragmentPlayed","fragmentFullPlayback","fragmentMoved","fragmentComments"],["All Fragments Played","All Fragments Played in entirety","All sliders moved","All fragments have comments"]];
+			var APEInterfaceMetrics = [["testTimer","elementTimer","elementTracker","elementTrackerFull","elementFlagListenedTo","elementFlagMoved","elementFlagComments"],["Test Duration","Total time each fragment was listened to","Return initialised position of marker","Fragment movement tracker with timestamps","Flag if fragment listened to","Flag if fragment moved","Flag if fragment has comments"]];
+			var MUSHRAInterfaceOptions = [[],[]];
+			var MUSHRAInterfaceChecks = [["fragmentPlayed","fragmentMoved","fragmentComments"],["All Fragments Played","All sliders moved","All fragments have comments"]];
+			var MUSHRAInterfaceMetrics = [["testTimer","elementTimer","elementTracker","elementTrackerFull","elementFlagListenedTo","elementFlagMoved","elementFlagComments"],["Test Duration","Total time each fragment was listened to","Return initialised position of marker","Fragment movement tracker with timestamps","Flag if fragment listened to","Flag if fragment moved","Flag if fragment has comments"]];
+			var popupInstance;
+			var specificationNode;
+			var audioContext;
+			var audioObjects = [];
+			window.onload = function()
+			{
+				var AudioContext = window.AudioContext || window.webkitAudioContext;
+				audioContext = new AudioContext;
+				popupInstance = new popup();
+				popupInstance.advanceState();
+				specificationNode = new Specification();
+				specificationNode.projectReturn = "null";
 			};
 			
-			function attributePair(string, type, mandatory){
-				var id = document.createElement("span");
-				id.textContent = string;
-				var input = document.createElement("input");
-				input.type = type;
-				if (type == 'text') {
-					if (mandatory == true) {
-						input.setAttribute('mandatory','true');
+			function popup()
+			{
+				var x = window.innerWidth;
+				var y = window.innerHeight;
+				this.popupHolder = document.createElement('div');
+				this.popupHolder.style.visibility = 'hidden';
+				this.popupContent = document.createElement('div');
+				this.popupTitle = document.createElement('div');
+				this.popupBody = document.createElement('div');
+				this.popupFooter = document.createElement('div');
+				this.popupTitleText = document.createElement('span');
+				this.popupTitle.appendChild(this.popupTitleText);
+				
+				this.popupHolder.className = "popup";
+				this.popupHolder.style.left = (x-500)/2 +'px';
+				this.popupHolder.style.top = (y-400)/2 + 'px';
+				this.popupContent.style.padding = "20px";
+				this.popupHolder.appendChild(this.popupContent);
+				
+				this.popupTitle.style.width = "100%";
+				this.popupTitle.style.height = "50px";
+				this.popupTitle.style.fontSize = "xx-large";
+				this.popupContent.appendChild(this.popupTitle);
+				
+				this.popupBody.style.width = "100%";
+				this.popupBody.style.height = "280px";
+				this.popupContent.appendChild(this.popupBody);
+				
+				this.popupFooter.style.width = "100%";
+				this.popupFooter.style.height = "30px";
+				this.popupContent.appendChild(this.popupFooter);
+				var body = document.getElementsByTagName('body')[0];
+				body.appendChild(this.popupHolder);
+				
+				this.pageBlank = document.createElement('div');
+				body.appendChild(this.pageBlank);
+				this.pageBlank.style.width = "100%";
+				this.pageBlank.style.height = "100%";
+				this.pageBlank.style.position = "absolute";
+				this.pageBlank.style.left = "0px";
+				this.pageBlank.style.top = "0px";
+				this.pageBlank.style.backgroundColor = "rgba(0,0,0,0.5)";
+				this.pageBlank.style.visibility = 'hidden';
+				
+				this.state = 0;
+				this.dataTransfer = null;
+				
+				this.showPopup = function()
+				{
+					this.popupHolder.style.visibility = 'visible';
+					this.popupHolder.style.zIndex = "3";
+					this.pageBlank.style.visibility = 'visible';
+					this.pageBlank.style.zIndex = "2";
+				};
+				
+				this.hidePopup = function()
+				{
+					this.popupHolder.style.visibility = 'hidden';
+					this.popupHolder.style.zIndex = "-1";
+					this.pageBlank.style.visibility = 'hidden';
+					this.pageBlank.style.zIndex = "-2";
+				};
+				
+				this.init = function()
+				{
+					this.popupTitleText.textContent = "Welcome";
+					var text = document.createElement('span');
+					text.textContent = "Thank you for downloading the Web Audio Evaluation Toolbox. This page will help guide you through creating the documents required to run a test. If you have an existing XML file you wish to edit, please drag and drop it into the box below";
+					var dnd = document.createElement('div');
+					dnd.style.width = "100%";
+					dnd.style.height = "50px";
+					dnd.className = "dragndrop";
+					this.popupBody.appendChild(text);
+					this.popupBody.appendChild(dnd);
+					this.showPopup();
+					
+					var button = document.createElement('button');
+					button.className = "popupButton";
+					button.textContent = "New File";
+					button.onclick = function(event) {
+						popupInstance.advanceState();
+					};
+					this.popupFooter.appendChild(button);
+				};
+				
+				this.advanceState = function()
+				{
+					this.popupBody.innerHTML = null;
+					this.popupFooter.innerHTML = null;
+					this.popupTitleText.textContent = null;
+					switch(this.state)
+					{
+					case 0:
+						this.init();
+						break;
+					case 1:
+						this.popupTitleText.textContent = "Test Type";
+						var text = document.createElement("span");
+						text.textContent = "What type of test would you like to use. Currently APE (Audio Perceptual Evaluation) and MUSHRA style interfaces are available";
+						this.popupBody.appendChild(text);
+						var select = document.createElement("select");
+						select.id="interface-select";
+						var opt1 = document.createElement("option");
+						opt1.value = "APE";
+						opt1.textContent = "APE";
+						select.appendChild(opt1);
+						var opt2 = document.createElement("option");
+						opt2.value = "MUSHRA";
+						opt2.textContent = "MUSHRA";
+						select.appendChild(opt2);
+						this.popupBody.appendChild(select);
+						
+						var button = document.createElement('button');
+						button.className = "popupButton";
+						button.textContent = "Submit";
+						button.onclick = function(event) {
+							var select = document.getElementById("interface-select");
+							specificationNode.interfaceType = select.value;
+							specificationNode.collectMetrics = true;
+							popupInstance.advanceState();
+						};
+						this.popupFooter.appendChild(button);
+						break;
+					case 2:
+						this.popupTitleText.textContent = "Test Options";
+						var holder = document.createElement('div');
+						holder.style.margin = "5px";
+						var checkbox = document.createElement('input');
+						checkbox.type = 'checkbox';
+						checkbox.id = "Randomise-Page";
+						var text = document.createElement('span');
+						text.textContent = "Randomise Page Order";
+						holder.appendChild(checkbox);
+						holder.appendChild(text);
+						this.popupBody.appendChild(holder);
+						switch(specificationNode.interfaceType)
+						{
+						case "APE":
+							for (var i=0; i<APEInterfaceOptions[0].length; i++)
+							{
+								holder = document.createElement('div');
+								holder.style.margin = "5px";
+								checkbox = document.createElement('input');
+								checkbox.type = 'checkbox';
+								checkbox.setAttribute("name","option");
+								checkbox.id = APEInterfaceOptions[0][i];
+								text = document.createElement('span');
+								text.textContent = APEInterfaceOptions[1][i];
+								holder.appendChild(checkbox);
+								holder.appendChild(text);
+								this.popupBody.appendChild(holder);
+							}
+							for (var i=0; i<APEInterfaceChecks[0].length; i++)
+							{
+								holder = document.createElement('div');
+								holder.style.margin = "5px";
+								checkbox = document.createElement('input');
+								checkbox.type = 'checkbox';
+								checkbox.setAttribute("name","check");
+								checkbox.id = APEInterfaceChecks[0][i];
+								text = document.createElement('span');
+								text.textContent = APEInterfaceChecks[1][i];
+								holder.appendChild(checkbox);
+								holder.appendChild(text);
+								this.popupBody.appendChild(holder);
+							}
+							break;
+						case "MUSHRA":
+							for (var i=0; i<MUSHRAInterfaceOptions[0].length; i++)
+							{
+								holder = document.createElement('div');
+								holder.style.margin = "5px";
+								checkbox = document.createElement('input');
+								checkbox.type = 'checkbox';
+								checkbox.setAttribute("name","option");
+								checkbox.id = MUSHRAInterfaceOptions[0][i];
+								text = document.createElement('span');
+								text.textContent = MUSHRAInterfaceOptions[1][i];
+								holder.appendChild(checkbox);
+								holder.appendChild(text);
+								this.popupBody.appendChild(holder);
+							}
+							for (var i=0; i<MUSHRAInterfaceChecks[0].length; i++)
+							{
+								holder = document.createElement('div');
+								holder.style.margin = "5px";
+								checkbox = document.createElement('input');
+								checkbox.type = 'checkbox';
+								checkbox.setAttribute("name","check");
+								checkbox.id = MUSHRAInterfaceChecks[0][i];
+								text = document.createElement('span');
+								text.textContent = MUSHRAInterfaceChecks[1][i];
+								holder.appendChild(checkbox);
+								holder.appendChild(text);
+								this.popupBody.appendChild(holder);
+							}
+						}
+						var button = document.createElement('button');
+						button.className = "popupButton";
+						button.textContent = "Submit";
+						button.onclick = function(event) {
+							var optHold = popupInstance.popupBody;
+							var opt = optHold.firstChild;
+							var input = opt.getElementsByTagName('input')[0];
+							specificationNode.randomiseOrder = input.checked;
+							while(opt.nextSibling != null)
+							{
+								opt = opt.nextSibling;
+								input = opt.getElementsByTagName('input')[0];
+								if (input.checked)
+								{
+									specificationNode.commonInterface.options.push(new specificationNode.commonInterface.optionNode(input));
+								}
+								
+							}
+							popupInstance.advanceState();
+						};
+						this.popupFooter.appendChild(button);
+						break;
+					case 3:
+						audioObjects = [];
+						this.popupTitleText.textContent = "Test Page";
+						var span = document.createElement('span');
+						span.textContent = "Drag and drop your audio files into the box below to add them to a test page";
+						this.popupBody.appendChild(span);
+						var dnd = document.createElement('div');
+						dnd.id = "audio-holder-drop";
+						dnd.style.width = "100%";
+						dnd.style.minHeight = "50px";
+						dnd.style.maxHeight = "220px";
+						dnd.style.overflow = 'auto';
+						dnd.className = "dragndrop";
+						dnd.ondragover = function(e) {
+							if(e.preventDefault) {e.preventDefault();}
+							return false;
+						};
+						dnd.ondragenter = function(e) {
+							if(e.preventDefault) {e.preventDefault();}
+							return false;
+						};
+						dnd.ondrop = function(e) {
+							if(e.preventDefault) {e.preventDefault();}
+							var dt = e.dataTransfer;
+							var body = document.getElementById("audio-holder-drop");
+							var files = dt.files;
+							for (var i = 0, f; f = files[i]; i++)
+							{
+								var ao = new audioObject();
+								ao.constructTrack(f);
+								audioObjects.push(ao);
+								var dndHeader = document.createElement('div');
+								dndHeader.style.width = "100%";
+								dndHeader.style.height = "20px";
+								dndHeader.style.borderBottom = "#DDD";
+								dndHeader.style.borderBottomWidth = "1px";
+								dndHeader.style.borderBottomStyle = "solid";
+								dndHeader.setAttribute('aoID',audioObjects.length-1);
+								var dndHInclude = document.createElement('div');
+								dndHInclude.style.width = "30px";
+								dndHInclude.className = "dndheaderelement";
+								var includeCheck = document.createElement('input');
+								includeCheck.type = "checkbox";
+								includeCheck.name = "include-check";
+								includeCheck.checked = true;
+								includeCheck.onchange = function()
+								{
+									var i = event.currentTarget.parentElement.parentElement.getAttribute('aoID');
+									audioObjects[i].include = event.currentTarget.checked;
+								};
+								dndHInclude.appendChild(includeCheck);
+								dndHeader.appendChild(dndHInclude);
+								var dndHTitle = document.createElement('div');
+								dndHTitle.style.width = "180px";
+								dndHTitle.className = "dndheaderelement";
+								var text = document.createElement('span');
+								text.textContent = f.name;
+								dndHTitle.appendChild(text);
+								dndHeader.appendChild(dndHTitle);
+								var dndHID = document.createElement('div');
+								dndHID.style.width = "100px";
+								dndHID.className = "dndheaderelement";
+								var IDInput = document.createElement('input');
+								IDInput.name = "audio-fragment-ID";
+								IDInput.value = f.name.split('.')[0];
+								IDInput.onchange = function()
+								{
+									var allIDInput = document.getElementsByName("audio-fragment-ID");
+									var isCopy = new Array(allIDInput.length);
+									isCopy.fill(0,0,this.length);
+									if (allIDInput.length > 1)
+									{
+										for (var j=0; j<allIDInput.length; j++)
+										{
+											var textCompare1 = allIDInput[j].value;
+											for (var k=j+1; k<allIDInput.length; k++)
+											{
+												var textCompare2 = allIDInput[k].value;
+												if (textCompare1 == textCompare2)
+												{
+													isCopy[j] = 1;
+													isCopy[k] = 1;
+												}
+											}
+										}
+									}
+									var button = document.getElementById('submit');
+									button.disabled = false;
+									for (var j=0; j<allIDInput.length; j++)
+									{
+										if (isCopy[j] == 1)
+										{
+											allIDInput[j].style.backgroundColor = '#F22';
+											button.disabled = true;
+										}
+										else
+										{
+											allIDInput[j].style.backgroundColor = '#FFF';
+											audioObjects[j].id = allIDInput[j].value;
+										}
+									}
+								};
+								IDInput.style.width = "96px";
+								dndHID.appendChild(IDInput);
+								dndHeader.appendChild(dndHID);
+								var dndHPlay = document.createElement('div');
+								dndHPlay.style.width = "100px";
+								dndHPlay.className = "dndheaderelement";
+								var audio = document.createElement('button');
+								audio.textContent = 'Play';
+								audio.className = "popupButton";
+								audio.style.height = "inherit";
+								audio.onclick = function()
+								{
+									var i = event.currentTarget.parentElement.parentElement.getAttribute('aoID');
+									audioObjects[i].play();
+								};
+								dndHPlay.appendChild(audio);
+								dndHeader.appendChild(dndHPlay);
+								dnd.appendChild(dndHeader);
+								IDInput.onchange();
+							}
+						};
+						var dndHeader = document.createElement('div');
+						dndHeader.style.width = "100%";
+						dndHeader.style.height = "15px";
+						dndHeader.style.borderBottom = "#DDD";
+						dndHeader.style.borderBottomWidth = "1px";
+						dndHeader.style.borderBottomStyle = "solid";
+						var dndHInclude = document.createElement('div');
+						dndHInclude.style.width = "30px";
+						dndHInclude.className = "dndheaderelement";
+						var text = document.createElement('span');
+						text.textContent = "Inc.";
+						dndHInclude.appendChild(text);
+						dndHeader.appendChild(dndHInclude);
+						var dndHTitle = document.createElement('div');
+						dndHTitle.style.width = "180px";
+						dndHTitle.className = "dndheaderelement";
+						text = document.createElement('span');
+						text.textContent = "File Name";
+						dndHTitle.appendChild(text);
+						dndHeader.appendChild(dndHTitle);
+						var dndHID = document.createElement('div');
+						dndHID.style.width = "100px";
+						dndHID.className = "dndheaderelement";
+						text = document.createElement('span');
+						text.textContent = "ID";
+						dndHID.appendChild(text);
+						dndHeader.appendChild(dndHID);
+						var dndHPlay = document.createElement('div');
+						dndHPlay.style.width = "100px";
+						dndHPlay.className = "dndheaderelement";
+						text = document.createElement('span');
+						text.textContent = "Sample";
+						dndHPlay.appendChild(text);
+						dndHeader.appendChild(dndHPlay);
+						dnd.appendChild(dndHeader);
+						this.popupBody.appendChild(dnd);
+						var button = document.createElement('button');
+						button.id = 'submit';
+						button.className = "popupButton";
+						button.textContent = "Submit";
+						button.onclick = function(event)
+						{
+							// Construct the audio-holder nodes;
+							for (var i=0; i<audioObjects.length; i++)
+							{
+								if (!audioObjects[i].include)
+								{
+									audioObjects.pop(audioObjects[i]);
+								}
+							}
+							if (audioObjects.length != 0)
+							{
+								popupInstance.advanceState();
+							}
+						};
+						this.popupFooter.appendChild(button);
+						break;
+					case 4:
+						this.popupTitleText.textContent = "Test Page - Options";
+						var span = document.createElement('span');
+						span.textContent = "Set your test page options here";
+						this.popupBody.appendChild(span);
+						var pair = document.createElement('div');
+						pair.style.margin = '5px';
+						var text = document.createElement('span');
+						text.textContent = "Page ID:";
+						var input = document.createElement('input');
+						input.value = specificationNode.audioHolders.length;
+						input.id = "id";
+						pair.appendChild(text);
+						pair.appendChild(input);
+						this.popupBody.appendChild(pair);
+						pair = document.createElement('div');
+						pair.style.margin = '5px';
+						text = document.createElement('span');
+						text.textContent = "Randomise Fragment Order";
+						input = document.createElement('input');
+						input.type = "checkbox";
+						input.id = "randomiseOrder";
+						pair.appendChild(input);
+						pair.appendChild(text);
+						this.popupBody.appendChild(pair);
+						pair = document.createElement('div');
+						pair.style.margin = '5px';
+						text = document.createElement('span');
+						text.textContent = "Loop Fragment Playback";
+						input = document.createElement('input');
+						input.type = "checkbox";
+						input.id = "loop";
+						pair.appendChild(input);
+						pair.appendChild(text);
+						this.popupBody.appendChild(pair);
+						pair = document.createElement('div');
+						pair.style.margin = '5px';
+						text = document.createElement('span');
+						text.textContent = "Show fragment comment boxes";
+						input = document.createElement('input');
+						input.type = "checkbox";
+						input.id = "elementComments";
+						pair.appendChild(input);
+						pair.appendChild(text);
+						this.popupBody.appendChild(pair);
+						var button = document.createElement('button');
+						button.id = 'submit';
+						button.className = "popupButton";
+						button.textContent = "Next";
+						button.onclick = function(event)
+						{
+							var ah = new specificationNode.audioHolderNode(specificationNode);
+							ah.id = document.getElementById('id').value;
+							ah.presentedId = specificationNode.audioHolders.length;
+							ah.hostURL = ah.id+'/';
+							ah.randomiseOrder = document.getElementById('randomiseOrder').checked;
+							ah.loop = document.getElementById('loop').checked;
+							ah.elementComments = document.getElementById('elementComments').checked;
+							for (var i=0; i<audioObjects.length; i++)
+							{
+								ah.audioElements.push(new ah.audioElementNode(ah,audioObjects[i]));
+							}
+							specificationNode.audioHolders.push(ah);
+							popupInstance.advanceState();
+						};
+						this.popupFooter.appendChild(button);
+						break;
+					case 5:
+						this.dataTransfer = null;
+						this.popupTitleText.textContent = "Test Page - Pre/Post Survey";
+						var span = document.createElement('span');
+						span.textContent = "Add your pre test page options here";
+						this.popupBody.appendChild(span);
+						var preHolder = document.createElement('div');
+						preHolder.id = "preHolder";
+						preHolder.style.width = "460px";
+						preHolder.style.minHeight = "100px";
+						preHolder.style.maxHeight = "220px";
+						preHolder.style.overflow = 'auto';
+						preHolder.style.border = "black";
+						preHolder.style.borderStyle = "solid";
+						preHolder.style.borderWidth = "1px";
+						this.popupBody.appendChild(preHolder);
+						var audioHolder = specificationNode.audioHolders[specificationNode.audioHolders.length-1];
+						var preHeaderHolder = document.createElement('div');
+						preHeaderHolder.style.width = "456px";
+						preHeaderHolder.style.height= "20px";
+						preHeaderHolder.style.margin= "2px";
+						preHeaderHolder.style.borderBottom = "#DDD";
+						preHeaderHolder.style.borderBottomWidth = "1px";
+						preHeaderHolder.style.borderBottomStyle = "solid";
+						var mvH = document.createElement('div');
+						mvH.className = "dndheaderelement";
+						mvH.style.width = "50px";
+						var text = document.createElement('span');
+						text.textContent = "Order";
+						mvH.appendChild(text);
+						preHeaderHolder.appendChild(mvH);
+						var idH = document.createElement('div');
+						idH.className = "dndheaderelement";
+						idH.style.width = "150px";
+						text = document.createElement('span');
+						text.textContent = "ID";
+						idH.appendChild(text);
+						preHeaderHolder.appendChild(idH);
+						var tH = document.createElement('div');
+						tH.className = "dndheaderelement";
+						tH.style.width = "150px";
+						text = document.createElement('span');
+						text.textContent = "Type";
+						tH.appendChild(text);
+						preHeaderHolder.appendChild(tH);
+						var editH = document.createElement('div');
+						editH.className = "dndheaderelement";
+						editH.style.width = "50px";
+						text = document.createElement('span');
+						text.textContent = "Edit";
+						editH.appendChild(text);
+						preHeaderHolder.appendChild(editH);
+						var deleteH = document.createElement('div');
+						deleteH.className = "dndheaderelement";
+						deleteH.style.width = "50px";
+						text = document.createElement('span');
+						text.textContent = "Delete";
+						deleteH.appendChild(text);
+						preHeaderHolder.appendChild(deleteH);
+						preHolder.appendChild(preHeaderHolder);
+						
+						
+						for (var i=0; i<audioHolder.preTest.options.length; i++)
+						{
+							var optionNode = audioHolder.preTest.options[i];
+							var entry = document.createElement('div');
+							entry.style.width = "456px";
+							entry.style.height= "20px";
+							entry.style.margin= "2px";
+							entry.style.borderBottom = "#DDD";
+							entry.style.borderBottomWidth = "1px";
+							entry.style.borderBottomStyle = "solid";
+							entry.setAttribute("node-id",i);
+							var node = audioHolder.preTest.options[i];
+							var mvH = document.createElement('div');
+							mvH.className = "dndheaderelement";
+							mvH.style.width = "50px";
+							var mvup = document.createElement("button");
+							mvup.textContent = "Up";
+							mvup.style.width = "25px";
+							mvup.style.padding = "1px 0px";
+							mvup.onclick = function()
+							{
+								var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
+								if (i != 0)
+								{
+									var next = audioHolder.preTest.options[i-1];
+									var cur = audioHolder.preTest.options[i];
+									audioHolder.preTest.options[i-1] = cur;
+									audioHolder.preTest.options[i] = next;
+									popupInstance.state = 5;
+									popupInstance.advanceState();
+								}
+							};
+							mvH.appendChild(mvup);
+							var mvdn = document.createElement("button");
+							mvdn.textContent = "Dn";
+							mvdn.style.width = "25px";
+							mvdn.style.padding = "1px 0px";
+							mvdn.onclick = function()
+							{
+								var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
+								if (i != audioHolder.preTest.options.length-1)
+								{
+									var next = audioHolder.preTest.options[i+1];
+									var cur = audioHolder.preTest.options[i];
+									audioHolder.preTest.options[i+1] = cur;
+									audioHolder.preTest.options[i] = next;
+									popupInstance.state = 5;
+									popupInstance.advanceState();
+								}
+							};
+							mvH.appendChild(mvdn);
+							entry.appendChild(mvH);
+							var idH = document.createElement('div');
+							idH.className = "dndheaderelement";
+							idH.style.width = "150px";
+							if (optionNode.type != "statement")
+							{
+								var span = document.createElement('span');
+								span.textContent = optionNode.id;
+								idH.appendChild(span);
+							}
+							entry.appendChild(idH);
+							var typeH = document.createElement('div');
+							typeH.className = "dndheaderelement";
+							typeH.style.width = "150px";
+							var span = document.createElement('span');
+							span.textContent = optionNode.type;
+							typeH.appendChild(span);
+							entry.appendChild(typeH);
+							var editH = document.createElement('div');
+							editH.className = "dndheaderelement";
+							editH.style.width = "50px";
+							var editButton = document.createElement("button");
+							editButton.textContent = "Edit";
+							editButton.style.width = "48px";
+							editButton.style.padding = "1px 0px";
+							editButton.onclick = function()
+							{
+								var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
+								popupInstance.dataTransfer = new function() {
+									this.title = "Edit Test Node";
+									this.parent = specificationNode.audioHolders[specificationNode.audioHolders.length-1].preTest;
+									this.node = this.parent.options[i];
+									this.previousState = 5;
+								};
+								popupInstance.advanceState();
+							};
+							editH.appendChild(editButton);
+							entry.appendChild(editH);
+							var deleteH = document.createElement('div');
+							deleteH.className = "dndheaderelement";
+							deleteH.style.width = "50px";
+							var deleteButton = document.createElement("button");
+							deleteButton.textContent = "Del";
+							deleteButton.style.width = "48px";
+							deleteButton.style.padding = "1px 0px";
+							deleteButton.onclick = function()
+							{
+								var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
+								var j = i+1;
+								while(j < audioHolder.preTest.options.length)
+								{
+									audioHolder.preTest.options[i] = audioHolder.preTest.options[j];
+									j++;
+									i++;
+								}
+								audioHolder.preTest.options.pop();
+								popupInstance.state = 5;
+								popupInstance.advanceState();
+							};
+							deleteH.appendChild(deleteButton);
+							entry.appendChild(deleteH);
+							preHolder.appendChild(entry);
+						}
+						var entry = document.createElement('div');
+						entry.style.width = "456px";
+						entry.style.height= "20px";
+						entry.style.margin= "2px";
+						entry.style.borderBottom = "#DDD";
+						entry.style.borderBottomWidth = "1px";
+						entry.style.borderBottomStyle = "solid";
+						entry.align = "center";
+						var addPre = document.createElement('button');
+						addPre.className = "popupButton";
+						addPre.textContent = "Add New Entry";
+						addPre.style.height = "20px";
+						addPre.onclick = function()
+						{
+							popupInstance.dataTransfer = new function() {
+								this.title = "New Pre Test Node";
+								this.parent = specificationNode.audioHolders[specificationNode.audioHolders.length-1].preTest;
+								this.node = null;
+								this.previousState = 5;
+							};
+							popupInstance.advanceState();
+						};
+						entry.appendChild(addPre);
+						preHolder.appendChild(entry);
+						
+						var span = document.createElement('span');
+						span.textContent = "Add your post test page options here";
+						this.popupBody.appendChild(span);
+						var postHolder = document.createElement('div');
+						postHolder.id = "preHolder";
+						postHolder.style.width = "100%";
+						postHolder.style.minHeight = "100px";
+						postHolder.style.maxHeight = "220px";
+						postHolder.style.overflow = 'auto';
+						postHolder.style.border = "black";
+						postHolder.style.borderStyle = "solid";
+						postHolder.style.borderWidth = "1px";
+						this.popupBody.appendChild(postHolder);
+						var postHeaderHolder = document.createElement('div');
+						postHeaderHolder.style.width = "456px";
+						postHeaderHolder.style.height= "20px";
+						postHeaderHolder.style.margin= "2px";
+						postHeaderHolder.style.borderBottom = "#DDD";
+						postHeaderHolder.style.borderBottomWidth = "1px";
+						postHeaderHolder.style.borderBottomStyle = "solid";
+						var mvH = document.createElement('div');
+						mvH.className = "dndheaderelement";
+						mvH.style.width = "50px";
+						var text = document.createElement('span');
+						text.textContent = "Order";
+						mvH.appendChild(text);
+						postHeaderHolder.appendChild(mvH);
+						var idH = document.createElement('div');
+						idH.className = "dndheaderelement";
+						idH.style.width = "150px";
+						text = document.createElement('span');
+						text.textContent = "ID";
+						idH.appendChild(text);
+						postHeaderHolder.appendChild(idH);
+						var tH = document.createElement('div');
+						tH.className = "dndheaderelement";
+						tH.style.width = "150px";
+						text = document.createElement('span');
+						text.textContent = "Type";
+						tH.appendChild(text);
+						postHeaderHolder.appendChild(tH);
+						var editH = document.createElement('div');
+						editH.className = "dndheaderelement";
+						editH.style.width = "50px";
+						text = document.createElement('span');
+						text.textContent = "Edit";
+						editH.appendChild(text);
+						postHeaderHolder.appendChild(editH);
+						var deleteH = document.createElement('div');
+						deleteH.className = "dndheaderelement";
+						deleteH.style.width = "50px";
+						text = document.createElement('span');
+						text.textContent = "Delete";
+						deleteH.appendChild(text);
+						postHeaderHolder.appendChild(deleteH);
+						postHolder.appendChild(postHeaderHolder);
+						
+						for (var i=0; i<audioHolder.postTest.options.length; i++)
+						{
+							var optionNode = audioHolder.postTest.options[i];
+							var entry = document.createElement('div');
+							entry.style.width = "456px";
+							entry.style.height= "20px";
+							entry.style.margin= "2px";
+							entry.style.borderBottom = "#DDD";
+							entry.style.borderBottomWidth = "1px";
+							entry.style.borderBottomStyle = "solid";
+							entry.setAttribute("node-id",i);
+							var node = audioHolder.postTest.options[i];
+							var mvH = document.createElement('div');
+							mvH.className = "dndheaderelement";
+							mvH.style.width = "50px";
+							var mvup = document.createElement("button");
+							mvup.textContent = "Up";
+							mvup.style.width = "25px";
+							mvup.style.padding = "1px 0px";
+							mvup.onclick = function()
+							{
+								var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
+								if (i != 0)
+								{
+									var next = audioHolder.postTest.options[i-1];
+									var cur = audioHolder.postTest.options[i];
+									audioHolder.postTest.options[i-1] = cur;
+									audioHolder.postTest.options[i] = next;
+									popupInstance.state = 5;
+									popupInstance.advanceState();
+								}
+							};
+							mvH.appendChild(mvup);
+							var mvdn = document.createElement("button");
+							mvdn.textContent = "Dn";
+							mvdn.style.width = "25px";
+							mvdn.style.padding = "1px 0px";
+							mvdn.onclick = function()
+							{
+								var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
+								if (i != audioHolder.postTest.options.length-1)
+								{
+									var next = audioHolder.postTest.options[i+1];
+									var cur = audioHolder.postTest.options[i];
+									audioHolder.postTest.options[i+1] = cur;
+									audioHolder.postTest.options[i] = next;
+									popupInstance.state = 5;
+									popupInstance.advanceState();
+								}
+							};
+							mvH.appendChild(mvdn);
+							entry.appendChild(mvH);
+							var idH = document.createElement('div');
+							idH.className = "dndheaderelement";
+							idH.style.width = "150px";
+							if (optionNode.type != "statement")
+							{
+								var span = document.createElement('span');
+								span.textContent = optionNode.id;
+								idH.appendChild(span);
+							}
+							entry.appendChild(idH);
+							var typeH = document.createElement('div');
+							typeH.className = "dndheaderelement";
+							typeH.style.width = "150px";
+							var span = document.createElement('span');
+							span.textContent = optionNode.type;
+							typeH.appendChild(span);
+							entry.appendChild(typeH);
+							var editH = document.createElement('div');
+							editH.className = "dndheaderelement";
+							editH.style.width = "50px";
+							var editButton = document.createElement("button");
+							editButton.textContent = "Edit";
+							editButton.style.width = "48px";
+							editButton.style.padding = "1px 0px";
+							editButton.onclick = function()
+							{
+								var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
+								popupInstance.dataTransfer = new function() {
+									this.title = "Edit Test Node";
+									this.parent = specificationNode.audioHolders[specificationNode.audioHolders.length-1].postTest;
+									this.node = this.parent.options[i];
+									this.previousState = 5;
+								};
+								popupInstance.advanceState();
+							};
+							editH.appendChild(editButton);
+							entry.appendChild(editH);
+							var deleteH = document.createElement('div');
+							deleteH.className = "dndheaderelement";
+							deleteH.style.width = "50px";
+							var deleteButton = document.createElement("button");
+							deleteButton.textContent = "Del";
+							deleteButton.style.width = "48px";
+							deleteButton.style.padding = "1px 0px";
+							deleteButton.onclick = function()
+							{
+								var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
+								var j = i+1;
+								while(j < audioHolder.postTest.options.length)
+								{
+									audioHolder.postTest.options[i] = audioHolder.postTest.options[j];
+									j++;
+									i++;
+								}
+								audioHolder.postTest.options.pop();
+								popupInstance.state = 5;
+								popupInstance.advanceState();
+							};
+							deleteH.appendChild(deleteButton);
+							entry.appendChild(deleteH);
+							postHolder.appendChild(entry);
+						}
+						
+						var entry = document.createElement('div');
+						entry.style.width = "456px";
+						entry.style.height= "20px";
+						entry.style.margin= "2px";
+						entry.style.borderBottom = "#DDD";
+						entry.style.borderBottomWidth = "1px";
+						entry.style.borderBottomStyle = "solid";
+						entry.align = "center";
+						var addPost = document.createElement('button');
+						addPost.className = "popupButton";
+						addPost.textContent = "Add New Entry";
+						addPost.style.height = "20px";
+						addPost.onclick = function()
+						{
+							popupInstance.dataTransfer = new function() {
+								this.title = "New Pre Test Node";
+								this.parent = specificationNode.audioHolders[specificationNode.audioHolders.length-1].postTest;
+								this.node = null;
+								this.previousState = 5;
+							};
+							popupInstance.advanceState();
+						};
+						entry.appendChild(addPost);
+						postHolder.appendChild(entry);
+						
+						var button = document.createElement('button');
+						button.id = 'submit';
+						button.className = "popupButton";
+						button.textContent = "Finish";
+						button.onclick = function(event)
+						{
+							popupInstance.state = 7;
+							popupInstance.advanceState();
+						};
+						this.popupFooter.appendChild(button);
+						button = document.createElement('button');
+						button.id = 'submit';
+						button.className = "popupButton";
+						button.textContent = "Add Another Page";
+						button.onclick = function(event)
+						{
+							popupInstance.state = 3;
+							popupInstance.advanceState();
+						};
+						this.popupFooter.appendChild(button);
+						break;
+					case 6:
+						this.popupTitleText.textContent = this.dataTransfer.title;
+						var span = document.createElement('span');
+						span.textContent = "Select survey settings here";
+						this.popupBody.appendChild(span);
+						var div = document.createElement('div');
+						span = document.createElement("span");
+						span.textContent = "Survey Type";
+						var select = document.createElement("select");
+						select.id="survey-select";
+						var option = document.createElement('option');
+						option.textContent = "Statement";
+						option.value = "statement";
+						select.appendChild(option);
+						option = document.createElement('option');
+						option.textContent = "Question";
+						option.value = "question";
+						select.appendChild(option);
+						option = document.createElement('option');
+						option.textContent = "Number";
+						option.value = "number";
+						select.appendChild(option);
+						option = document.createElement('option');
+						option.textContent = "Radio";
+						option.value = "radio";
+						select.appendChild(option);
+						option = document.createElement('option');
+						option.textContent = "Checkbox";
+						option.value = "checkbox";
+						select.appendChild(option);
+						this.popupBody.appendChild(select);
+						var options = document.createElement('div');
+						options.id = "survey-options";
+						this.popupBody.appendChild(options);
+						var button = document.createElement('button');
+						button.id = 'submit';
+						button.className = "popupButton";
+						button.textContent = "Add";
+						button.onclick = function(event)
+						{
+							var parent = popupInstance.dataTransfer.parent;
+							if (popupInstance.dataTransfer.node == null)
+							{
+								var node = new parent.OptionNode();
+							} else
+							{
+								var node = popupInstance.dataTransfer.node;
+							}
+							node.type = document.getElementById("survey-select").value;
+							switch(node.type)
+							{
+							case "statement":
+								node.statement = document.getElementById("statement").value;
+								break;
+							case "question":
+								node.question = document.getElementById("question").value;
+								node.id = document.getElementById("ID").value;
+								node.mandatory = document.getElementById("mandatory").checked;
+								node.boxsize = document.getElementById("boxsize").value;
+								break;
+							}
+							if (popupInstance.dataTransfer.node == null)
+							{parent.options.push(node);}
+							popupInstance.state = popupInstance.dataTransfer.previousState;
+							popupInstance.advanceState();
+						};
+						this.popupFooter.appendChild(button);
+						select.onchange = function()
+						{
+							var options = document.getElementById("survey-options");
+							options.innerHTML = null;
+							switch(this.value)
+							{
+							case "statement":
+								var span = document.createElement('span');
+								span.textContent = "Enter Statement";
+								var tA = document.createElement('textarea');
+								tA.id = "statement";
+								tA.style.width = "460px";
+								tA.style.height = "96px";
+								if (popupInstance.dataTransfer.node != null)
+								{tA.value = this.dataTransfer.node.statement;}
+								options.appendChild(span);
+								options.appendChild(tA);
+								break;
+							case "question":
+								var span = document.createElement('span');
+								span.textContent = "Enter Question";
+								var tA = document.createElement('textarea');
+								tA.style.width = "460px";
+								tA.style.height = "54px";
+								tA.id = "question";
+								options.appendChild(span);
+								options.appendChild(tA);
+								var div = document.createElement('div');
+								var input = document.createElement('input');
+								input.id = "ID";
+								span = document.createElement('span');
+								span.textContent = "ID:";
+								div.appendChild(span);
+								div.appendChild(input);
+								options.appendChild(div);
+								div = document.createElement('div');
+								input = document.createElement('input');
+								input.type = "checkbox";
+								input.id = "mandatory";
+								span = document.createElement('span');
+								span.textContent = "Mandatory";
+								div.appendChild(span);
+								div.appendChild(input);
+								options.appendChild(div);
+								div = document.createElement('div');
+								var boxsize = document.createElement("select");
+								boxsize.id = "boxsize";
+								var selOpt = document.createElement("option");
+								selOpt.value = "normal";
+								selOpt.textContent = "Normal";
+								boxsize.appendChild(selOpt);
+								selOpt = document.createElement("option");
+								selOpt.value = "small";
+								selOpt.textContent = "Small";
+								boxsize.appendChild(selOpt);
+								selOpt = document.createElement("option");
+								selOpt.value = "large";
+								selOpt.textContent = "Large";
+								boxsize.appendChild(selOpt);
+								selOpt = document.createElement("option");
+								selOpt.value = "huge";
+								selOpt.textContent = "Huge";
+								boxsize.appendChild(selOpt);
+								span = document.createElement('span');
+								span.textContent = "Response Text Area";
+								div.appendChild(span);
+								div.appendChild(boxsize);
+								options.appendChild(div);
+								if (popupInstance.dataTransfer.node != null)
+								{
+									tA.value = popupInstance.dataTransfer.node.question;
+									document.getElementById("ID").value = popupInstance.dataTransfer.node.id;
+									document.getElementById("mandatory").value = popupInstance.dataTransfer.node.mandatory;
+									document.getElementById("boxsize").value = popupInstance.dataTransfer.node.boxsize;
+								}
+								break;
+							case "number":
+								var span = document.createElement('span');
+								span.textContent = "Enter Question";
+								var tA = document.createElement('textarea');
+								tA.style.width = "460px";
+								tA.style.height = "54px";
+								tA.id = "question";
+								options.appendChild(span);
+								options.appendChild(tA);
+								var div = document.createElement('div');
+								var input = document.createElement('input');
+								input.id = "ID";
+								span = document.createElement('span');
+								span.textContent = "ID:";
+								div.appendChild(span);
+								div.appendChild(input);
+								options.appendChild(div);
+								div = document.createElement('div');
+								input = document.createElement('input');
+								input.type = "checkbox";
+								input.id = "mandatory";
+								span = document.createElement('span');
+								span.textContent = "Mandatory";
+								div.appendChild(span);
+								div.appendChild(input);
+								options.appendChild(div);
+								div = document.createElement('div');
+								break;
+							}
+						};
+						if (this.dataTransfer.node != null)
+						{
+							select.value = this.dataTransfer.node.type;
+						}
+						select.onchange();
+						break;
+					case 7:
+						this.dataTransfer = null;
+						this.popupTitleText.textContent = "Test Session - Pre/Post Survey";
+						var span = document.createElement('span');
+						span.textContent = "Add your pre test session and post test session survey options here";
+						this.popupBody.appendChild(span);
+						var preHolder = document.createElement('div');
+						preHolder.id = "preHolder";
+						preHolder.style.width = "460px";
+						preHolder.style.minHeight = "100px";
+						preHolder.style.maxHeight = "220px";
+						preHolder.style.overflow = 'auto';
+						preHolder.style.border = "black";
+						preHolder.style.borderStyle = "solid";
+						preHolder.style.borderWidth = "1px";
+						this.popupBody.appendChild(preHolder);
+						var preHeaderHolder = document.createElement('div');
+						preHeaderHolder.style.width = "456px";
+						preHeaderHolder.style.height= "20px";
+						preHeaderHolder.style.margin= "2px";
+						preHeaderHolder.style.borderBottom = "#DDD";
+						preHeaderHolder.style.borderBottomWidth = "1px";
+						preHeaderHolder.style.borderBottomStyle = "solid";
+						var mvH = document.createElement('div');
+						mvH.className = "dndheaderelement";
+						mvH.style.width = "50px";
+						var text = document.createElement('span');
+						text.textContent = "Order";
+						mvH.appendChild(text);
+						preHeaderHolder.appendChild(mvH);
+						var idH = document.createElement('div');
+						idH.className = "dndheaderelement";
+						idH.style.width = "150px";
+						text = document.createElement('span');
+						text.textContent = "ID";
+						idH.appendChild(text);
+						preHeaderHolder.appendChild(idH);
+						var tH = document.createElement('div');
+						tH.className = "dndheaderelement";
+						tH.style.width = "150px";
+						text = document.createElement('span');
+						text.textContent = "Type";
+						tH.appendChild(text);
+						preHeaderHolder.appendChild(tH);
+						var editH = document.createElement('div');
+						editH.className = "dndheaderelement";
+						editH.style.width = "50px";
+						text = document.createElement('span');
+						text.textContent = "Edit";
+						editH.appendChild(text);
+						preHeaderHolder.appendChild(editH);
+						var deleteH = document.createElement('div');
+						deleteH.className = "dndheaderelement";
+						deleteH.style.width = "50px";
+						text = document.createElement('span');
+						text.textContent = "Delete";
+						deleteH.appendChild(text);
+						preHeaderHolder.appendChild(deleteH);
+						preHolder.appendChild(preHeaderHolder);
+						
+						
+						for (var i=0; i<specificationNode.preTest.options.length; i++)
+						{
+							var optionNode = specificationNode.preTest.options[i];
+							var entry = document.createElement('div');
+							entry.style.width = "456px";
+							entry.style.height= "20px";
+							entry.style.margin= "2px";
+							entry.style.borderBottom = "#DDD";
+							entry.style.borderBottomWidth = "1px";
+							entry.style.borderBottomStyle = "solid";
+							entry.setAttribute("node-id",i);
+							var node = specificationNode.preTest.options[i];
+							var mvH = document.createElement('div');
+							mvH.className = "dndheaderelement";
+							mvH.style.width = "50px";
+							var mvup = document.createElement("button");
+							mvup.textContent = "Up";
+							mvup.style.width = "25px";
+							mvup.style.padding = "1px 0px";
+							mvup.onclick = function()
+							{
+								var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
+								if (i != 0)
+								{
+									var next = specificationNode.preTest.options[i-1];
+									var cur = specificationNode.preTest.options[i];
+									specificationNode.preTest.options[i-1] = cur;
+									specificationNode.preTest.options[i] = next;
+									popupInstance.state = 7;
+									popupInstance.advanceState();
+								}
+							};
+							mvH.appendChild(mvup);
+							var mvdn = document.createElement("button");
+							mvdn.textContent = "Dn";
+							mvdn.style.width = "25px";
+							mvdn.style.padding = "1px 0px";
+							mvdn.onclick = function()
+							{
+								var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
+								if (i != specificationNode.preTest.options.length-1)
+								{
+									var next = specificationNode.preTest.options[i+1];
+									var cur = specificationNode.preTest.options[i];
+									specificationNode.preTest.options[i+1] = cur;
+									specificationNode.preTest.options[i] = next;
+									popupInstance.state = 7;
+									popupInstance.advanceState();
+								}
+							};
+							mvH.appendChild(mvdn);
+							entry.appendChild(mvH);
+							var idH = document.createElement('div');
+							idH.className = "dndheaderelement";
+							idH.style.width = "150px";
+							if (optionNode.type != "statement")
+							{
+								var span = document.createElement('span');
+								span.textContent = optionNode.id;
+								idH.appendChild(span);
+							}
+							entry.appendChild(idH);
+							var typeH = document.createElement('div');
+							typeH.className = "dndheaderelement";
+							typeH.style.width = "150px";
+							var span = document.createElement('span');
+							span.textContent = optionNode.type;
+							typeH.appendChild(span);
+							entry.appendChild(typeH);
+							var editH = document.createElement('div');
+							editH.className = "dndheaderelement";
+							editH.style.width = "50px";
+							var editButton = document.createElement("button");
+							editButton.textContent = "Edit";
+							editButton.style.width = "48px";
+							editButton.style.padding = "1px 0px";
+							editButton.onclick = function()
+							{
+								var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
+								popupInstance.dataTransfer = new function() {
+									this.title = "Edit Test Node";
+									this.parent = specificationNode.preTest;
+									this.node = this.parent.options[i];
+									this.previousState = 7;
+								};
+								popupInstace.state = 6;
+								popupInstance.advanceState();
+							};
+							editH.appendChild(editButton);
+							entry.appendChild(editH);
+							var deleteH = document.createElement('div');
+							deleteH.className = "dndheaderelement";
+							deleteH.style.width = "50px";
+							var deleteButton = document.createElement("button");
+							deleteButton.textContent = "Del";
+							deleteButton.style.width = "48px";
+							deleteButton.style.padding = "1px 0px";
+							deleteButton.onclick = function()
+							{
+								var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
+								var j = i+1;
+								while(j < specificationNode.preTest.options.length)
+								{
+									specificationNode.preTest.options[i] = specificationNode.preTest.options[j];
+									j++;
+									i++;
+								}
+								specificationNode.preTest.options.pop();
+								popupInstance.state = 7;
+								popupInstance.advanceState();
+							};
+							deleteH.appendChild(deleteButton);
+							entry.appendChild(deleteH);
+							preHolder.appendChild(entry);
+						}
+						var entry = document.createElement('div');
+						entry.style.width = "456px";
+						entry.style.height= "20px";
+						entry.style.margin= "2px";
+						entry.style.borderBottom = "#DDD";
+						entry.style.borderBottomWidth = "1px";
+						entry.style.borderBottomStyle = "solid";
+						entry.align = "center";
+						var addPre = document.createElement('button');
+						addPre.className = "popupButton";
+						addPre.textContent = "Add New Entry";
+						addPre.style.height = "20px";
+						addPre.onclick = function()
+						{
+							popupInstance.dataTransfer = new function() {
+								this.title = "New Pre Test Node";
+								this.parent = specificationNode.preTest;
+								this.node = null;
+								this.previousState = 7;
+							};
+							popupInstance.state = 6;
+							popupInstance.advanceState();
+						};
+						entry.appendChild(addPre);
+						preHolder.appendChild(entry);
+						
+						var span = document.createElement('span');
+						span.textContent = "Add your post test page options here";
+						this.popupBody.appendChild(span);
+						var postHolder = document.createElement('div');
+						postHolder.id = "preHolder";
+						postHolder.style.width = "100%";
+						postHolder.style.minHeight = "100px";
+						postHolder.style.maxHeight = "220px";
+						postHolder.style.overflow = 'auto';
+						postHolder.style.border = "black";
+						postHolder.style.borderStyle = "solid";
+						postHolder.style.borderWidth = "1px";
+						this.popupBody.appendChild(postHolder);
+						var postHeaderHolder = document.createElement('div');
+						postHeaderHolder.style.width = "456px";
+						postHeaderHolder.style.height= "20px";
+						postHeaderHolder.style.margin= "2px";
+						postHeaderHolder.style.borderBottom = "#DDD";
+						postHeaderHolder.style.borderBottomWidth = "1px";
+						postHeaderHolder.style.borderBottomStyle = "solid";
+						var mvH = document.createElement('div');
+						mvH.className = "dndheaderelement";
+						mvH.style.width = "50px";
+						var text = document.createElement('span');
+						text.textContent = "Order";
+						mvH.appendChild(text);
+						postHeaderHolder.appendChild(mvH);
+						var idH = document.createElement('div');
+						idH.className = "dndheaderelement";
+						idH.style.width = "150px";
+						text = document.createElement('span');
+						text.textContent = "ID";
+						idH.appendChild(text);
+						postHeaderHolder.appendChild(idH);
+						var tH = document.createElement('div');
+						tH.className = "dndheaderelement";
+						tH.style.width = "150px";
+						text = document.createElement('span');
+						text.textContent = "Type";
+						tH.appendChild(text);
+						postHeaderHolder.appendChild(tH);
+						var editH = document.createElement('div');
+						editH.className = "dndheaderelement";
+						editH.style.width = "50px";
+						text = document.createElement('span');
+						text.textContent = "Edit";
+						editH.appendChild(text);
+						postHeaderHolder.appendChild(editH);
+						var deleteH = document.createElement('div');
+						deleteH.className = "dndheaderelement";
+						deleteH.style.width = "50px";
+						text = document.createElement('span');
+						text.textContent = "Delete";
+						deleteH.appendChild(text);
+						postHeaderHolder.appendChild(deleteH);
+						postHolder.appendChild(postHeaderHolder);
+						
+						for (var i=0; i<specificationNode.postTest.options.length; i++)
+						{
+							var optionNode = specificationNode.postTest.options[i];
+							var entry = document.createElement('div');
+							entry.style.width = "456px";
+							entry.style.height= "20px";
+							entry.style.margin= "2px";
+							entry.style.borderBottom = "#DDD";
+							entry.style.borderBottomWidth = "1px";
+							entry.style.borderBottomStyle = "solid";
+							entry.setAttribute("node-id",i);
+							var node = specificationNode.postTest.options[i];
+							var mvH = document.createElement('div');
+							mvH.className = "dndheaderelement";
+							mvH.style.width = "50px";
+							var mvup = document.createElement("button");
+							mvup.textContent = "Up";
+							mvup.style.width = "25px";
+							mvup.style.padding = "1px 0px";
+							mvup.onclick = function()
+							{
+								var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
+								if (i != 0)
+								{
+									var next = specificationNode.postTest.options[i-1];
+									var cur = specificationNode.postTest.options[i];
+									specificationNode.postTest.options[i-1] = cur;
+									specificationNode.postTest.options[i] = next;
+									popupInstance.state = 7;
+									popupInstance.advanceState();
+								}
+							};
+							mvH.appendChild(mvup);
+							var mvdn = document.createElement("button");
+							mvdn.textContent = "Dn";
+							mvdn.style.width = "25px";
+							mvdn.style.padding = "1px 0px";
+							mvdn.onclick = function()
+							{
+								var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
+								if (i != specificationNode.postTest.options.length-1)
+								{
+									var next = specificationNode.postTest.options[i+1];
+									var cur = specificationNode.postTest.options[i];
+									specificationNode.postTest.options[i+1] = cur;
+									specificationNode.postTest.options[i] = next;
+									popupInstance.state = 7;
+									popupInstance.advanceState();
+								}
+							};
+							mvH.appendChild(mvdn);
+							entry.appendChild(mvH);
+							var idH = document.createElement('div');
+							idH.className = "dndheaderelement";
+							idH.style.width = "150px";
+							if (optionNode.type != "statement")
+							{
+								var span = document.createElement('span');
+								span.textContent = optionNode.id;
+								idH.appendChild(span);
+							}
+							entry.appendChild(idH);
+							var typeH = document.createElement('div');
+							typeH.className = "dndheaderelement";
+							typeH.style.width = "150px";
+							var span = document.createElement('span');
+							span.textContent = optionNode.type;
+							typeH.appendChild(span);
+							entry.appendChild(typeH);
+							var editH = document.createElement('div');
+							editH.className = "dndheaderelement";
+							editH.style.width = "50px";
+							var editButton = document.createElement("button");
+							editButton.textContent = "Edit";
+							editButton.style.width = "48px";
+							editButton.style.padding = "1px 0px";
+							editButton.onclick = function()
+							{
+								var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
+								popupInstance.dataTransfer = new function() {
+									this.title = "Edit Test Node";
+									this.parent = specificationNode.postTest;
+									this.node = this.parent.options[i];
+									this.previousState = 7;
+								};
+								popupInstance.state = 6;
+								popupInstance.advanceState();
+							};
+							editH.appendChild(editButton);
+							entry.appendChild(editH);
+							var deleteH = document.createElement('div');
+							deleteH.className = "dndheaderelement";
+							deleteH.style.width = "50px";
+							var deleteButton = document.createElement("button");
+							deleteButton.textContent = "Del";
+							deleteButton.style.width = "48px";
+							deleteButton.style.padding = "1px 0px";
+							deleteButton.onclick = function()
+							{
+								var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id"));
+								var j = i+1;
+								while(j < specificationNode.postTest.options.length)
+								{
+									specificationNode.postTest.options[i] = specificationNode.postTest.options[j];
+									j++;
+									i++;
+								}
+								audioHolder.postTest.options.pop();
+								popupInstance.state = 7;
+								popupInstance.advanceState();
+							};
+							deleteH.appendChild(deleteButton);
+							entry.appendChild(deleteH);
+							postHolder.appendChild(entry);
+						}
+						
+						var entry = document.createElement('div');
+						entry.style.width = "456px";
+						entry.style.height= "20px";
+						entry.style.margin= "2px";
+						entry.style.borderBottom = "#DDD";
+						entry.style.borderBottomWidth = "1px";
+						entry.style.borderBottomStyle = "solid";
+						entry.align = "center";
+						var addPost = document.createElement('button');
+						addPost.className = "popupButton";
+						addPost.textContent = "Add New Entry";
+						addPost.style.height = "20px";
+						addPost.onclick = function()
+						{
+							popupInstance.dataTransfer = new function() {
+								this.title = "New Pre Test Node";
+								this.parent = specificationNode.postTest;
+								this.node = null;
+								this.previousState = 7;
+							};
+							popupInstance.state = 6;
+							popupInstance.advanceState();
+						};
+						entry.appendChild(addPost);
+						postHolder.appendChild(entry);
+						
+						var button = document.createElement('button');
+						button.id = 'submit';
+						button.className = "popupButton";
+						button.textContent = "Finish";
+						button.onclick = function(event)
+						{
+							popupInstance.state = 8;
+							popupInstance.advanceState();
+						};
+						this.popupFooter.appendChild(button);
+						break;
+					case 8:
+						this.hidePopup();
+						this.state = 0;
+						SpecficationToHTML();
 					}
-					else {
-						input.setAttribute('mandatory','false');
+					this.state++;
+				};
+			};
+			
+			function audioObject()
+			{
+				// Used to hold audio information in buffers for quick playback
+				this.bufferObject;
+				this.bufferNode = undefined;
+				this.state = 0;
+				this.gain = audioContext.createGain();
+				this.gain.connect(audioContext.destination);
+				this.include = true;
+				this.id = undefined;
+				this.file = undefined;
+				
+				this.play = function()
+				{
+					if (this.bufferNode != undefined)
+					{
+						this.bufferNode.stop(0);
+						this.bufferNode = undefined;
 					}
-				}
-				return [id, input];
+					if(this.state == 1)
+					{
+						this.bufferNode = audioContext.createBufferSource();
+						this.bufferNode.connect(this.gain);
+						this.bufferNode.buffer = this.bufferObject;
+						this.bufferNode.onended = function(event) {
+							// Safari does not like using 'this' to reference the calling object!
+							event.currentTarget = undefined;
+						};
+						this.bufferNode.start(audioContext.currentTime);
+						this.bufferNode.stop(audioContext.currentTime+3);
+					}
+				};
+				
+				this.constructTrack = function(file) {
+					var reader = new FileReader();
+					this.file = file;
+					var audioObj = this;
+					// Create callback to decode the data asynchronously
+					reader.onloadend = function() {
+						audioContext.decodeAudioData(reader.result, function(decodedData) {
+							audioObj.bufferObject = decodedData;
+							audioObj.state = 1;
+						}, function(){});
+					};
+					reader.readAsArrayBuffer(file);
+				};
+			};
+			
+			function Specification() {
+				// Handles the decoding of the project specification XML into a simple JavaScript Object.
+				
+				this.interfaceType = null;
+				this.commonInterface = new function()
+				{
+					this.options = [];
+					this.optionNode = function(input)
+					{
+						var name = input.getAttribute('name');
+						this.type = name;
+						if(this.type == "option")
+						{
+							this.name = input.id;
+						} else if (this.type == "check")
+						{
+							this.check = input.id;
+						}
+					};
+				};
+				this.projectReturn = null;
+				this.randomiseOrder = null;
+				this.collectMetrics = null;
+				this.testPages = null;
+				this.audioHolders = [];
+				this.metrics = [];
+				
+				this.decode = function() {
+					// projectXML - DOM Parsed document
+					this.projectXML = projectXML.childNodes[0];
+					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'));
+					this.postTest = new this.prepostNode('posttest',setupNode.getElementsByTagName('PostTest'));
+					
+					if (metricCollection.length > 0) {
+						metricCollection = metricCollection[0].getElementsByTagName('metricEnable');
+						for (var i=0; i<metricCollection.length; i++) {
+							this.metrics.push(new this.metricNode(metricCollection[i].textContent));
+						}
+					}
+					
+					var commonInterfaceNode = setupNode.getElementsByTagName('interface');
+					if (commonInterfaceNode.length > 0) {
+						commonInterfaceNode = commonInterfaceNode[0];
+					} else {
+						commonInterfaceNode = undefined;
+					}
+					
+					this.commonInterface = new function() {
+						this.OptionNode = function(child) {
+							this.type = child.nodeName;
+							if (this.type == 'option')
+							{
+								this.name = child.getAttribute('name');
+							}
+							else if (this.type == 'check') {
+								this.check = child.getAttribute('name');
+								if (this.check == 'scalerange') {
+									this.min = child.getAttribute('min');
+									this.max = child.getAttribute('max');
+									if (this.min == null) {this.min = 1;}
+									else if (Number(this.min) > 1 && this.min != null) {
+										this.min = Number(this.min)/100;
+									} else {
+										this.min = Number(this.min);
+									}
+									if (this.max == null) {this.max = 0;}
+									else if (Number(this.max) > 1 && this.max != null) {
+										this.max = Number(this.max)/100;
+									} else {
+										this.max = Number(this.max);
+									}
+								}
+							} else if (this.type == 'anchor' || this.type == 'reference') {
+								this.value = Number(child.textContent);
+								this.enforce = child.getAttribute('enforce');
+								if (this.enforce == 'true') {this.enforce = true;}
+								else {this.enforce = false;}
+							}
+						};
+						this.options = [];
+						if (commonInterfaceNode != undefined) {
+							var child = commonInterfaceNode.firstElementChild;
+							while (child != undefined) {
+								this.options.push(new this.OptionNode(child));
+								child = child.nextElementSibling;
+							}
+						}
+					};
+					
+					var audioHolders = projectXML.getElementsByTagName('audioHolder');
+					for (var i=0; i<audioHolders.length; i++) {
+						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.encode = function()
+				{
+					var root = document.implementation.createDocument(null,"BrowserEvalProjectDocument");
+					// First get all the <setup> tag compiled
+					var setupNode = root.createElement("setup");
+					setupNode.setAttribute('interface',this.interfaceType);
+					setupNode.setAttribute('projectReturn',this.projectReturn);
+					setupNode.setAttribute('randomiseOrder',this.randomiseOrder);
+					setupNode.setAttribute('collectMetrics',this.collectMetrics);
+					setupNode.setAttribute('testPages',this.testPages);
+					
+					var setupPreTest = root.createElement("PreTest");
+					for (var i=0; i<this.preTest.options.length; i++)
+					{
+						setupPreTest.appendChild(this.preTest.options.exportXML(root));
+					}
+					
+					var setupPostTest = root.createElement("PostTest");
+					for (var i=0; i<this.preTest.options.length; i++)
+					{
+						setupPostTest.appendChild(this.postTest.options.exportXML(root));
+					}
+					
+					setupNode.appendChild(setupPreTest);
+					setupNode.appendChild(setupPostTest);
+					
+					// <Metric> tag
+					var Metric = root.createElement("Metric");
+					for (var i=0; i<this.metrics.length; i++)
+					{
+						var metricEnable = document.createElement("metricEnable");
+						metricEnable.textContent = this.metrics[i].enabled;
+						Metric.appendChild(metricEnable);
+					}
+					setupNode.appendChild(Metric);
+					
+					// <interface> tag
+					var CommonInterface = root.createElement("interface");
+					for (var i=0; i<this.commonInterface.options.length; i++)
+					{
+						var CIObj = this.commonInterface.options[i];
+						var CINode = document.createElement(CIObj.type);
+						if (CIObj.type == "check") {CINode.setAttribute("name",CIObj.check);}
+						else {CINode.setAttribute("name",CIObj.name);}
+						CommonInterface.appendChild(CINode);
+					}
+					setupNode.appendChild(CommonInterface);
+					
+					root.getElementsByTagName("BrowserEvalProjectDocument")[0].appendChild(setupNode);
+					// Time for the <audioHolder> tags
+					for (var ahIndex = 0; ahIndex < this.audioHolders.length; ahIndex++)
+					{
+						var AHObj = this.audioHolders[ahIndex];
+						var AHNode = root.createElement("audioHolder");
+						AHNode.id = AHObj.id;
+						AHNode.setAttribute("hostURL",AHObj.hostURL);
+						AHNode.setAttribute("sampleRate",AHObj.samplerate);
+						AHNode.setAttribute("randomiseOrder",AHObj.randomiseOrder);
+						AHNode.setAttribute("repeatCount",AHObj.repeatCount);
+						AHNode.setAttribute("loop",AHObj.loop);
+						AHNode.setAttribute("elementComments",AHObj.elementComments);
+						
+						// Create <interface> tag
+						for (var i=0; i<AHObj.interfaces.length; i++)
+						{
+							var AHObjInterface = AHObj.interfaces[i];
+							var AHinterface = root.createElement("interface");
+							if (AHObjInterface.title != undefined)
+							{
+								var title = root.createElement("title");
+								title.textContent = AHObjInterface.title;
+								AHinterface.appendChild(title);
+							}
+							for (var j=0; j<AHObjInterface.options.length; j++)
+							{
+								var CIObj = AHObjInterface.options[j];
+								var CINode = root.createElement(CIObj.type);
+								if (CIObj.type == "check") {CINode.setAttribute("name",CIObj.check);}
+								else {CINode.setAttribute("name",CIObj.name);}
+								AHinterface.appendChild(CINode);
+							}
+							if (AHObjInterface.scale != undefined)
+							{
+								for (var j=0; j<AHObjInterface.scale.length; j++)
+								{
+									var CIObj = AHObjInterface.scale[j];
+									var CINode = root.createElement("scale");
+									CINode.setAttribute("position",CIObj[0]);
+									CINode.textContent = CIObj[1];
+									AHinterface.appendChild(CINode);
+								}
+							}
+							AHNode.appendChild(AHinterface);
+						}
+						
+						// Create <audioElements>
+						for (var aeIndex = 0; aeIndex < AHObj.audioElements.length; aeIndex++)
+						{
+							var AEObj = AHObj.audioElements[aeIndex];
+							var AENode = root.createElement("audioElements");
+							AENode.id = AEObj.id;
+							AENode.setAttribute("url",AEObj.url);
+							AENode.setAttribute("type",AEObj.type);
+							if (AEObj.marker != undefined && AEObj.enforce)
+							{
+								AENode.setAttribute("marker",AEObj.marker*100);
+							}
+							AHNode.appendChild(AENode);
+						}
+						
+						// Create <CommentQuestion>
+						for (var i=0; i<AHObj.commentQuestions.length; i++)
+						{
+							AHNode.appendChild(AHObj.commentQuestions[i].exportXML(root));
+						}
+						
+						// Create <PreTest>
+						var AHPreTest = document.createElement("PreTest");
+						for (var i=0; i<AHObj.preTest.options.length; i++)
+						{
+							AHPreTest.appendChild(AHObj.preTest.options.exportXML(root));
+						}
+						
+						var AHPostTest = document.createElement("PostTest");
+						for (var i=0; i<AHObj.preTest.options.length; i++)
+						{
+							AHPostTest.appendChild(AHObj.postTest.options.exportXML(root));
+						}
+						AHNode.appendChild(AHPreTest);
+						AHNode.appendChild(AHPostTest);
+						root.getElementsByTagName("BrowserEvalProjectDocument")[0].appendChild(AHNode);
+					}
+					return root;
+				};
+				
+				this.prepostNode = function(type) {
+					this.type = type;
+					this.options = [];
+					
+					this.OptionNode = function() {
+						
+						this.childOption = function() {
+							this.type = 'option';
+							this.id = element.id;
+							this.name = element.getAttribute('name');
+							this.text = element.textContent;
+						};
+						
+						this.type = undefined;
+						this.id = undefined;
+						this.mandatory = undefined;
+						this.question = undefined;
+						this.statement = undefined;
+						this.boxsize = undefined;
+						this.options = [];
+						this.min = undefined;
+						this.max = undefined;
+						this.step = undefined;
+						
+						this.exportXML = function(root)
+						{
+							var node = root.createElement(this.type);
+							switch(this.type)
+							{
+							case "statement":
+								node.textContent = this.statement;
+								break;
+							case "question":
+								node.id = this.id;
+								node.setAttribute("mandatory",this.mandatory);
+								node.setAttribute("boxsize",this.boxsize);
+								node.textContent = this.question;
+								break;
+							case "number":
+								node.id = this.id;
+								node.setAttribute("mandatory",this.mandatory);
+								node.setAttribute("min"), this.min;
+								node.setAttribute("max"), this.max;
+								node.setAttribute("step"), this.step;
+								break;
+							case "checkbox":
+								node.id = this.id;
+								var statement = document.createElement("statement");
+								statement.textContent = this.statement;
+								node.appendChild(statement);
+								for (var i=0; i<this.options.length; i++)
+								{
+									var option = this.option[i];
+									var optionNode = document.createElement("option");
+									optionNode.id = option.id;
+									optionNode.textContent = option.text;
+									node.appendChild(option);
+								}
+								break;
+							case "radio":
+								node.id = this.id;
+								var statement = document.createElement("statement");
+								statement.textContent = this.statement;
+								node.appendChild(statement);
+								for (var i=0; i<this.options.length; i++)
+								{
+									var option = this.option[i];
+									var optionNode = document.createElement("option");
+									optionNode.setAttribute("name") = option.name;
+									optionNode.textContent = option.text;
+									node.appendChild(option);
+								}
+								break;
+							}
+							return node;
+						};
+					};
+				};
+				
+				this.metricNode = function(name) {
+					this.enabled = name;
+				};
+				
+				this.audioHolderNode = function(parent) {
+					this.type = 'audioHolder';
+					this.presentedId = undefined;
+					this.id = undefined;
+					this.hostURL = undefined;
+					this.sampleRate = undefined;
+					this.randomiseOrder = undefined;
+					this.loop = undefined;
+					this.elementComments = undefined;
+					this.preTest = new parent.prepostNode('pretest');
+					this.postTest = new parent.prepostNode('posttest');
+					this.interfaces = [];
+					this.commentBoxPrefix = "Comment on track";
+					this.audioElements = [];
+					this.commentQuestions = [];
+					
+					this.interfaceNode = function(DOM) {
+						var title = DOM.getElementsByTagName('title');
+						if (title.length == 0) {this.title = null;}
+						else {this.title = title[0].textContent;}
+						this.options = parent.commonInterface.options;
+						var scale = DOM.getElementsByTagName('scale');
+						this.scale = [];
+						for (var i=0; i<scale.length; i++) {
+							var arr = [null, null];
+							arr[0] = scale[i].getAttribute('position');
+							arr[1] = scale[i].textContent;
+							this.scale.push(arr);
+						}
+					};
+					
+					this.audioElementNode = function(parent,audioObject) {
+						this.url = audioObject.file.name;
+						this.id = audioObject.id;
+						this.parent = parent;
+						this.type = "normal";
+						
+						this.marker = undefined;
+					};
+					
+					this.commentQuestionNode = function(xml) {
+						this.exportXML = function(root)
+						{
+							var CQNode = root.createElement("CommentQuestion");
+							CQNode.id = this.id;
+							CQNode.setAttribute("type",this.type);
+							switch(this.type)
+							{
+							case "text":
+								CQNode.textContent = this.question;
+								break;
+							case "radio" || "checkbox":
+								var statement = document.createElement("statement");
+								statement.textContent = this.statement;
+								CQNode.appendChild(statement);
+								for (var i=0; i<this.options.length; i++)
+								{
+									var optionNode = document.createElement("option");
+									optionNode.setAttribute("name",this.options[i].name);
+									optionNode.textContent = this.options[i].text;
+									CQNode.appendChild(optionNode);
+								}
+								break;
+							}
+							return CQNode;
+						};
+						this.childOption = function(element) {
+							this.type = 'option';
+							this.name = element.getAttribute('name');
+							this.text = element.textContent;
+						};
+						this.id = xml.id;
+						if (xml.getAttribute('mandatory') == 'true') {this.mandatory = true;}
+						else {this.mandatory = false;}
+						this.type = xml.getAttribute('type');
+						if (this.type == undefined) {this.type = 'text';}
+						switch (this.type) {
+						case 'text':
+							this.question = xml.textContent;
+							break;
+						case 'radio':
+							var child = xml.firstElementChild;
+							this.options = [];
+							while (child != undefined) {
+								if (child.nodeName == 'statement' && this.statement == undefined) {
+									this.statement = child.textContent;
+								} else if (child.nodeName == 'option') {
+									this.options.push(new this.childOption(child));
+								}
+								child = child.nextElementSibling;
+							}
+							break;
+						case 'checkbox':
+							var child = xml.firstElementChild;
+							this.options = [];
+							while (child != undefined) {
+								if (child.nodeName == 'statement' && this.statement == undefined) {
+									this.statement = child.textContent;
+								} else if (child.nodeName == 'option') {
+									this.options.push(new this.childOption(child));
+								}
+								child = child.nextElementSibling;
+							}
+							break;
+						}
+					};
+				};
+				
+				this.preTest = new this.prepostNode("pretest");
+				this.postTest = new this.prepostNode("posttest");
 			}
 			
-			function removeNode(event) {
-				event.srcElement.parentElement.parentElement.removeChild(event.srcElement.parentElement);
+			function createDeleteNodeButton(node)
+			{
+				var button = document.createElement("button");
+				button.textContent = "Delete";
+				button.onclick = function(event)
+				{
+					var node = event.target.parentElement;
+					node.parentElement.removeChild(node);	
+				};
+				return button;
 			}
 			
-			function buttonClickedValidate() {
-				var ready = validate();
-				if (ready == false) {
-					var errMsg = document.getElementById('errorMessage');
-					errMsg.textContent = "There were some errors with your XML. Any input boxes highlighted in red are invalid because they are empty or because its ID matches another elements ID. Please fill these in correctly. Any boxes which are yellow are not-invalid but will use the default value.";
-					errMsg.style.visibility = 'visible';
-					document.getElementById('createXML').disabled = true;
+			function SpecficationToHTML()
+			{
+				// Take information from Specification Node and format it into an HTML layout
+				var destination = document.getElementById("content");
+				// Setup Header Node
+				var setupNode = document.createElement("div");
+				setupNode.className = "topLevel";
+				setupNode.name = "setup";
+				var title = document.createElement("h2");
+				title.textContent = "Setup";
+				setupNode.appendChild(title);
+				// Interface Type
+				var div = document.createElement("div");
+				div.name = "attributes";
+				div.style.margin = "5px";
+				var select = document.createElement("select");
+				select.id = "interfaceSelect";
+				select.style.margin = "5px";
+				var option = document.createElement("option");
+				option.value = "APE";
+				option.textContent = "APE";
+				select.appendChild(option);
+				option = document.createElement("option");
+				option.value = "MUSHRA";
+				option.textContent = "MUSHRA";
+				select.appendChild(option);
+				select.value = specificationNode.interfaceType;
+				select.onchange = function(event)
+				{
+					specificationNode.interfaceType = event.currentTarget.value;
+				};
+				var span = document.createElement("span");
+				span.textContent = "Interface Type";
+				div.appendChild(span);
+				div.appendChild(select);
+				// Project Return Attribute
+				span = document.createElement("span");
+				span.style.margin = "5px";
+				span.textContent = "Project Return";
+				var input = document.createElement("input");
+				input.value = specificationNode.projectReturn;
+				input.id = "projectReturn";
+				input.style.margin = "5px";
+				input.onchange = function(event) {
+					specificationNode.projectReturn = event.currentTarget.value;
+				};
+				div.appendChild(span);
+				div.appendChild(input);
+				// Randomise Order
+				span = document.createElement("span");
+				span.textContent = "Randomise Order";
+				input = document.createElement("input");
+				input.id = "randomiseOrder";
+				input.style.margin = "5px";
+				input.type = "checkbox";
+				input.checked = specificationNode.randomiseOrder;
+				input.onchange = function(event) {
+					specificationNode.randomiseOrder = event.currentTarget.checked;
+				};
+				div.appendChild(span);
+				div.appendChild(input);
+				setupNode.appendChild(div);
+				
+				// Now create the common Interface Node
+				var commonInterface = document.createElement("div");
+				commonInterface.id = "interface";
+				commonInterface.className = "SecondLevel";
+				var title = document.createElement("h3");
+				title.textContent = "Common Interface";
+				commonInterface.appendChild(title);
+				var div = document.createElement("div");
+				div.name = "attributes";
+				var interfaceOptions;
+				var interfaceChecks;
+				switch(select.value)
+				{
+				case "APE":
+					interfaceOptions = APEInterfaceOptions;
+					interfaceChecks = APEInterfaceChecks;
+					break;
+				case "MUSHRA":
+					interfaceOptions = MUSHRAInterfaceOptions;
+					interfaceChecks = MUSHRAInterfaceChecks;
+					break;
+				}
+				for (var i=0; i<interfaceOptions[0].length; i++)
+				{
+					var span = document.createElement("span");
+					span.textContent = interfaceOptions[1][i];
+					var input = document.createElement("input");
+					input.type = "checkbox";
+					input.id = interfaceOptions[0][i];
+					input.setAttribute("name", "option");
+					div.appendChild(input);
+					div.appendChild(span);
+					commonInterface.appendChild(div);
+					for (var j=0; j<specificationNode.commonInterface.options.length; j++)
+					{
+						if (specificationNode.commonInterface.options[j].name == interfaceOptions[0][i])
+						{
+							input.checked = true;
+							break;
+						}
+					}
+					input.onchange = function(event) {
+						var id = event.currentTarget.id;
+						if (event.currentTarget.checked) {
+							specificationNode.commonInterface.options.push(new specificationNode.commonInterface.optionNode(event.currentTarget));
+						} else {
+							for (var j=0; j<specificationNode.commonInterface.options.length; j++)
+							{
+								if (specificationNode.commonInterface.options[j].name == event.currentTarget.id)
+								{
+									specificationNode.commonInterface.options.splice(j,1);
+									break;
+								}
+							}
+						}
+					};
+				}
+				for (var i=0; i<interfaceChecks[0].length; i++)
+				{
+					var span = document.createElement("span");
+					span.textContent = interfaceChecks[1][i];
+					var input = document.createElement("input");
+					input.type = "checkbox";
+					input.id = interfaceChecks[0][i];
+					input.setAttribute("name", "check");
+					div.appendChild(input);
+					div.appendChild(span);
+					commonInterface.appendChild(div);
+					for (var j=0; j<specificationNode.commonInterface.options.length; j++)
+					{
+						if (specificationNode.commonInterface.options[j].check == interfaceChecks[0][i])
+						{
+							input.checked = true;
+							break;
+						}
+					}
+					input.onchange = function(event) {
+						var id = event.currentTarget.id;
+						if (event.currentTarget.checked) {
+							specificationNode.commonInterface.options.push(new specificationNode.commonInterface.optionNode(event.currentTarget));
+						} else {
+							for (var j=0; j<specificationNode.commonInterface.options.length; j++)
+							{
+								if (specificationNode.commonInterface.options[j].name == event.currentTarget.id)
+								{
+									specificationNode.commonInterface.options.splice(j,1);
+									break;
+								}
+							}
+						}
+					};
+				}
+				setupNode.appendChild(commonInterface);
+				// Now the Metric Node
+				var metrics = document.createElement("div");
+				metrics.id = "metrics";
+				metrics.className = "SecondLevel";
+				var title = document.createElement("h3");
+				title.textContent = "Metric Collections";
+				metrics.appendChild(title);
+				var div = document.createElement("div");
+				div.name = "attributes";
+				metrics.appendChild(div);
+				var supportedMetrics;
+				switch(select.value)
+				{
+				case "APE":
+					supportedMetrics = APEInterfaceMetrics;
+					break;
+				case "MUSHRA":
+					supportedMetrics = MUSHRAInterfaceMetrics;
+					break;
+				}
+				
+				for (var i=0; i<supportedMetrics[0].length; i++)
+				{
+					var span = document.createElement("span");
+					span.textContent = supportedMetrics[1][i];
+					var input = document.createElement("input");
+					input.type = "checkbox";
+					input.id = supportedMetrics[0][i];
+					div.appendChild(input);
+					div.appendChild(span);
+					for (var j=0; j<specificationNode.metrics.length; j++)
+					{
+						if (specificationNode.metrics[j].enabled == supportedMetrics[0][i])
+						{
+							input.checked = true;
+						}
+					}
+					input.onchange = function(event)
+					{
+						if (event.currentTarget.checked) {
+							specificationNode.metrics.push(new specificationNode.metricNode(event.currentTarget.id));
+						} else {
+							for (var j=0; j<specificationNode.metrics.length; j++)
+							{
+								if (specificationNode.metrics[j].enabled == event.currentTarget.id)
+								{
+									specificationNode.metrics.splice(j,1);
+									break;
+								}
+							}
+						}
+					};
+				}
+				
+				setupNode.appendChild(metrics);
+				
+				// Test Session Pre Test
+				var preTest = document.createElement("div");
+				preTest.id = "preTest";
+				preTest.className = "SecondLevel";
+				var title = document.createElement("h3");
+				title.textContent = "Pre test Survey";
+				preTest.appendChild(title);
+				var div = document.createElement("div");
+				div.name = "attributes";
+				for (var j=0; j<specificationNode.preTest.options.length; j++)
+				{
+					var node = PPSurveyToHTML(specificationNode.preTest.options[j]);
+					node.className = "SecondLevel";
+					node.id = preTest.id+"-"+j;
+					var del_button = document.createElement("button");
+					del_button.textContent = "Delete";
+					del_button.onclick = function(event) {
+						var node = event.currentTarget.parentElement;
+						var id = node.id.split("-")[1];
+						specificationNode.preTest.options.splice(id,1);
+						node.parentElement.removeChild(node);	
+					};
+					node.appendChild(del_button);
+					preTest.appendChild(node);
+				}
+				setupNode.appendChild(preTest);
+				
+				// Test Session Post Test
+				var postTest = document.createElement("div");
+				postTest.id = "postTest";
+				postTest.className = "SecondLevel";
+				var title = document.createElement("h3");
+				title.textContent = "Post test Survey";
+				postTest.appendChild(title);
+				var div = document.createElement("div");
+				div.name = "attributes";
+				
+				for (var j=0; j<specificationNode.postTest.options.length; j++)
+				{
+					var node = PPSurveyToHTML(specificationNode.postTest.options[j]);
+					node.className = "SecondLevel";
+					node.id = postTest.id+"-"+j;
+					var del_button = document.createElement("button");
+					del_button.textContent = "Delete";
+					del_button.onclick = function(event) {
+						var node = event.currentTarget.parentElement;
+						var id = node.id.split("-")[1];
+						specificationNode.postTest.options.splice(id,1);
+						node.parentElement.removeChild(node);	
+					};
+					node.appendChild(del_button);
+					postTest.appendChild(node);
+				}
+				
+				setupNode.appendChild(postTest);
+				
+				destination.appendChild(setupNode);
+				
+				// Now we step through the AudioHolders
+				for (var i=0; i<specificationNode.audioHolders.length; i++)
+				{
+					var aH = specificationNode.audioHolders[i];
+					var aHTML = document.createElement("div");
+					aHTML.name = "audioHolder";
+					aHTML.id = "audioHolder-"+i;
+					aHTML.className = "topLevel";
+					aHTML.appendChild(createDeleteNodeButton());
+					destination.appendChild(aHTML);
+					var title = document.createElement("h2");
+					title.textContent = "Audio Holder "+aH.id;
+					aHTML.appendChild(title);
+					var attributes = document.createElement("div");
+					attributes.name = "attributes";
+					aHTML.appendChild(attributes);
+					var text = document.createElement("span");
+					text.textContent = "ID: ";
+					var input = document.createElement("input");
+					input.id = aHTML.id+"-id";
+					input.value = aH.id;
+					input.onchange = function()
+					{
+						var IDSplit = event.currentTarget.id.split('-');
+						var aholderID = IDSplit[0]+"-"+IDSplit[1];
+						var aholder = document.getElementById(aholderID);
+						title = aholder.getElementsByTagName("h2")[0];
+						title.textContent = "Audio Holder "+event.currentTarget.value;
+						specificationNode.audioHolders[IDSplit[1]].id = event.currentTarget.value;
+					};
+					text.style.margin = "5px";
+					input.style.margin = "5px";
+					attributes.appendChild(text);
+					attributes.appendChild(input);
+					text = document.createElement("span");
+					text.textContent = "Host URL: ";
+					input = document.createElement("input");
+					input.id = aHTML.id+"-hostURL";
+					input.value = aH.hostURL;
+					input.onchange = function()
+					{
+						var IDSplit = event.currentTarget.id.split('-');
+						specificationNode.audioHolders[IDSplit[1]].hostURL = event.currentTarget.value;
+					};
+					text.style.margin = "5px";
+					input.style.margin = "5px";
+					attributes.appendChild(text);
+					attributes.appendChild(input);
+					text = document.createElement("span");
+					text.textContent = "Loop Fragments: ";
+					input = document.createElement("input");
+					input.id = aHTML.id+"-loop";
+					input.type = "checkbox";
+					input.checked = aH.loop;
+					input.onchange = function()
+					{
+						var IDSplit = event.currentTarget.id.split('-');
+						specificationNode.audioHolders[IDSplit[1]].loop = event.currentTarget.checked;
+					};
+					text.style.margin = "5px";
+					input.style.margin = "5px";
+					attributes.appendChild(text);
+					attributes.appendChild(input);
+					text = document.createElement("span");
+					text.textContent = "Randomise Order: ";
+					input = document.createElement("input");
+					input.id = aHTML.id+"-randomiseOrder";
+					input.type = "checkbox";
+					input.checked = aH.randomiseOrder;
+					input.onchange = function()
+					{
+						var IDSplit = event.currentTarget.id.split('-');
+						specificationNode.audioHolders[IDSplit[1]].randomiseOrder = event.currentTarget.checked;
+					};
+					text.style.margin = "5px";
+					input.style.margin = "5px";
+					attributes.appendChild(text);
+					attributes.appendChild(input);
+					text = document.createElement("span");
+					text.textContent = "Show Fragment Comments";
+					input = document.createElement("input");
+					input.id = aHTML.id+"-elementComments";
+					input.type = "checkbox";
+					input.checked = aH.elementComments;
+					input.onchange = function()
+					{
+						var IDSplit = event.currentTarget.id.split('-');
+						specificationNode.audioHolders[IDSplit[1]].elementComments = event.currentTarget.checked;
+					};
+					text.style.margin = "5px";
+					input.style.margin = "5px";
+					attributes.appendChild(text);
+					attributes.appendChild(input);
 					
-				} else {
-					var errMsg = document.getElementById('errorMessage');
-					errMsg.textContent = "";
-					errMsg.style.visiblity = 'hidden';
-					document.getElementById('createXML').disabled = false;
+					// Test Session Pre Test
+					var preTest = document.createElement("div");
+					preTest.id = aHTML.id+"-pretest";
+					preTest.className = "SecondLevel";
+					var title = document.createElement("h3");
+					title.textContent = "Pre test Survey";
+					preTest.appendChild(title);
+					var div = document.createElement("div");
+					div.name = "attributes";
+					
+					for (var j=0; j<aH.preTest.options.length; j++)
+					{
+						var node = PPSurveyToHTML(aH.preTest.options[j]);
+						node.className = "SecondLevel";
+						node.id = preTest.id+"-"+j;
+						var button_delete = document.createElement("button");
+						button_delete.textContent = "Delete";
+						button_delete.onclick = function(event)
+						{
+							var node = event.currentTarget.parentElement;
+							var IDSplit = node.id.split("-");
+							var preTest = specificationNode.audioHolders[IDSplit[1]].preTest;
+							preTest.options.splice(IDSplit[3],1);
+							node.parentElement.removeChild(node);
+						};
+						node.appendChild(button_delete);
+						preTest.appendChild(node);
+					}
+					
+					aHTML.appendChild(preTest);
+					
+					// Test Session Post Test
+					var postTest = document.createElement("div");
+					postTest.id = aHTML.id+"-postTest";
+					postTest.className = "SecondLevel";
+					var title = document.createElement("h3");
+					title.textContent = "Post test Survey";
+					postTest.appendChild(title);
+					var div = document.createElement("div");
+					div.name = "attributes";
+					
+					for (var j=0; j<aH.postTest.options.length; j++)
+					{
+						var node = PPSurveyToHTML(aH.postTest.options[j]);
+						node.className = "SecondLevel";
+						node.id = postTest.id+"-"+j;
+						var button_delete = document.createElement("button");
+						button_delete.textContent = "Delete";
+						button_delete.onclick = function(event)
+						{
+							var node = event.currentTarget.parentElement;
+							var IDSplit = node.id.split("-");
+							var postTest = specificationNode.audioHolders[IDSplit[1]].postTest;
+							postTest.options.splice(IDSplit[3],1);
+							node.parentElement.removeChild(node);
+						};
+						node.appendChild(button_delete);
+						postTest.appendChild(node);
+					}
+					
+					aHTML.appendChild(postTest);
+					
+					//Audio Elements
+					var audioElems = document.createElement("div");
+					audioElems.id = aHTML.id+"-audioElements";
+					audioElems.className = "SecondLevel";
+					var title = document.createElement("h3");
+					title.textContent = "Audio Elements";
+					audioElems.appendChild(title);
+					for (var i=0; i<aH.audioElements.length; i++)
+					{
+						var entry = document.createElement("div");
+						entry.className = "SecondLevel";
+						entry.id = audioElems.id+"-"+aH.audioElements[i].id;
+						var text = document.createElement("span");
+						text.textContent = "ID:";
+						var input = document.createElement("input");
+						input.id = entry.id+"-id";
+						input.value = aH.audioElements[i].id;
+						input.onchange = function() {
+							var IDSplit = event.currentTarget.id.split("-");
+							var ahNode = specificationNode.audioHolders[IDSplit[1]];
+							ahNode.audioElements[IDSplit[3]].id = event.currentTarget.value;
+						};
+						text.style.margin = "5px";
+						input.style.margin = "5px";
+						entry.appendChild(text);
+						entry.appendChild(input);
+						text = document.createElement("span");
+						text.textContent = "URL:";
+						input = document.createElement("input");
+						input.id = entry.id+"-URL";
+						input.value = aH.audioElements[i].url;
+						input.onchange = function() {
+							var IDSplit = event.currentTarget.id.split("-");
+							var ahNode = specificationNode.audioHolders[IDSplit[1]];
+							ahNode.audioElements[IDSplit[3]].url = event.currentTarget.value;
+						};
+						text.style.margin = "5px";
+						input.style.margin = "5px";
+						entry.appendChild(text);
+						entry.appendChild(input);
+						var button_delete = document.createElement("button");
+						button_delete.textContent = "Delete";
+						button_delete.onclick = function() {
+							var node = event.currentTarget.parentElement;
+							var IDSplit = node.id.split("-");
+							var ahNode = specificationNode.audioHolders[IDSplit[1]];
+							ahNode.audioElements.splice(IDSplit[3],1);
+							node.parentElement.removeChild(node);
+						};
+						entry.appendChild(button_delete);
+						audioElems.appendChild(entry);
+					}
+					aHTML.appendChild(audioElems);
+				}
+				
+				function PPSurveyToHTML(node)
+				{
+					var holder = document.createElement("div");
+					var title = document.createElement("h4");
+					holder.appendChild(title);
+					var attributes = document.createElement("div");
+					holder.appendChild(attributes);
+					switch(node.type)
+					{
+					case "statement":
+						title.textContent = "Statement";
+						var tA = document.createElement("textarea");
+						attributes.style.height = "150px";
+						tA.style.width = "500px";
+						tA.style.height = "100px";
+						tA.value = node.statement;
+						attributes.appendChild(tA);
+						break;
+					case "question":
+						title.textContent = "Question";
+						var text = document.createElement("span");
+						text.textContent = "ID :";
+						var input = document.createElement("input");
+						input.name = "id";
+						input.value = node.id;
+						text.style.margin = "5px";
+						input.style.margin = "5px";
+						attributes.appendChild(text);
+						attributes.appendChild(input);
+						text = document.createElement("span");
+						text.textContent = "Question";
+						input = document.createElement("input");
+						input.name = "question";
+						input.style.width = "400px";
+						input.value = node.question;
+						text.style.margin = "5px";
+						input.style.margin = "5px";
+						attributes.appendChild(text);
+						attributes.appendChild(input);
+						text = document.createElement("span");
+						text.textContent = "Mandatory";
+						input = document.createElement("input");
+						input.name = "mandatory";
+						input.type = "checkbox";
+						input.checked = node.mandatory;
+						text.style.margin = "5px";
+						input.style.margin = "5px";
+						attributes.appendChild(text);
+						attributes.appendChild(input);
+						text = document.createElement("span");
+						text.textContent = "Reply box size";
+						input = document.createElement("select");
+						input.name = "boxsize";
+						var option = document.createElement("option");
+						option.textContent = "Normal";
+						option.value = "normal";
+						input.appendChild(option);
+						option = document.createElement("option");
+						option.textContent = "Large";
+						option.value = "large";
+						input.appendChild(option);
+						option = document.createElement("option");
+						option.textContent = "Small";
+						option.value = "small";
+						input.appendChild(option);
+						option = document.createElement("option");
+						option.textContent = "Huge";
+						option.value = "huge";
+						input.appendChild(option);
+						text.style.margin = "5px";
+						input.style.margin = "5px";
+						attributes.appendChild(text);
+						attributes.appendChild(input);
+						input.value = node.boxsize;
+						break;
+					}
+					return holder;
 				}
 			}
-			
-			function buttonClickedSubmit() {
-				var ready = validate();
-				if (ready == true) {
-					var xmlDoc = buildXML();
-					var inject = document.getElementById('errorMessage');
-					createProjectSave(xmlDoc, inject);
-				}
-			}
-			
-			function createProjectSave(xmlDoc, injectPoint) {
+			function exportToXML()
+			{
+				var xmlDoc = specificationNode.encode();
+				var oSerializer = new XMLSerializer();
+				xmlDoc = oSerializer.serializeToString(xmlDoc);
 				var parent = document.createElement("div");
-				parent.appendChild(xmlDoc);
-				var file = [parent.innerHTML];
+				var file = [xmlDoc];
 				var bb = new Blob(file,{type : 'application/xml'});
 				var dnlk = window.URL.createObjectURL(bb);
 				var a = document.createElement("a");
@@ -86,712 +2620,79 @@
 				a.href = dnlk;
 				a.download = "save.xml";
 				a.textContent = "Save File";
-				injectPoint.appendChild(a);
-			}
-			
-			function buildXML() {
-				var xmlDoc = document.createElement('BrowserEvalProjectDocument');
-				var setup = document.createElement('setup');
-				setup.setAttribute('interface',document.getElementById('interface').value);
-				if (document.getElementById('projectReturn').value == "") {
-					setup.setAttribute('projectReturn',"null");
-				} else {
-					setup.setAttribute('projectReturn',document.getElementById('projectReturn').value);
-				}
-				setup.setAttribute('randomiseOrder',document.getElementById('randomisePageOrder').checked);
-				setup.setAttribute('collectMetrics',document.getElementById('collectMetrics').checked);
 				
-				var globalPreTest = document.createElement('preTest');
-				var options = document.getElementById('globalPreTest').getElementsByClassName('head');
-				constructPrePost(globalPreTest, options);
-				
-				var globalPostTest = document.createElement('postTest');
-				options = document.getElementById('globalPostTest').getElementsByClassName('head');
-				constructPrePost(globalPostTest, options);
-				
-				var globalMetrics = document.createElement('metric');
-				options = document.getElementById('globalMetric').getElementsByClassName('attrib')[0].getElementsByTagName('input');
-				for (var i=0; i<options.length; i++) {
-					if (options[i].checked) {
-						var metric = document.createElement('metricEnable');
-						metric.textContent = options[i].id;
-						globalMetrics.appendChild(metric);
-					}
-				}
-				setup.appendChild(globalPreTest);
-				setup.appendChild(globalPostTest);
-				setup.appendChild(globalMetrics);
-				xmlDoc.appendChild(setup);
-				
-				var audioHolders = document.getElementsByName('audio-holder');
-				for (var i=0; i<audioHolders.length; i++) {
-					var audioHolder = document.createElement('audioHolder');
-					var audioHolderDOM = audioHolders[i];
-					var attribs = audioHolderDOM.getElementsByClassName('attrib')[0].getElementsByTagName('input');
-					audioHolder.id = attribs[0].value;
-					if (attribs[1].value != "") {audioHolder.setAttribute('sampleRate',attribs[1].value);}
-					if (attribs[2].value != "") {audioHolder.setAttribute('hostURL',attribs[2].value);}
-					audioHolder.setAttribute('randomiseOrder',attribs[3].checked);
-					audioHolder.setAttribute('repeatCount',attribs[4].checked);
-					audioHolder.setAttribute('loop',attribs[5].checked);
-					audioHolder.setAttribute('elementComments',attribs[6].checked);
-					
-					// Audio-Holder PreTests
-					var audioHolderPreTest = document.createElement('preTest');
-					var audioHolderPostTest = document.createElement('postTest');
-					options = audioHolderDOM.childNodes[2].getElementsByClassName('head');
-					constructPrePost(audioHolderPreTest, options);
-					options = audioHolderDOM.childNodes[3].getElementsByClassName('head');
-					constructPrePost(audioHolderPostTest, options);
-					
-					audioHolder.appendChild(audioHolderPreTest);
-					audioHolder.appendChild(audioHolderPostTest);
-					
-					// Interface Nodes
-					
-					// audio-Elements
-					var audioElementsDOM = [];
-					var commentQuestionDOM = [];
-					var interfacesDOM = [];
-					for (var j=0; j<audioHolderDOM.childElementCount; j++) {
-						var child = audioHolderDOM.childNodes[j];
-						var name = child.getAttribute('name');
-						if (name == 'audio-element') {audioElementsDOM.push(child);}
-						else if (name == 'comment-question') {commentQuestionDOM.push(child);}
-						else if (name == 'interface-options') {interfacesDOM.push(child);}
-					}
-					
-					for (var j=0; j<interfacesDOM.length; j++) {
-						var interfaceNode = document.createElement('interface');
-						attribs = interfacesDOM[j].getElementsByClassName('attrib')[0].getElementsByTagName('input');
-						var title = document.createElement('title');
-						title.textContent = attribs[0].value;
-						interfaceNode.appendChild(title);
-						
-						
-						var markers = interfacesDOM[j].getElementsByClassName('head');
-						for (var k=0; k<markers.length; k++) {
-							var markerNode = document.createElement('scale');
-							attribs = markers[k].getElementsByClassName('attrib')[0].getElementsByTagName('input');
-							markerNode.textContent = attribs[0].value;
-							markerNode.setAttribute('position',attribs[1].value);
-							interfaceNode.appendChild(markerNode);
-						}
-						audioHolder.appendChild(interfaceNode);
-					}
-					
-					for (var j=0; j<audioElementsDOM.length; j++) {
-						var audioElement = document.createElement('audioElement');
-						attribs = audioElementsDOM[j].getElementsByClassName('attrib')[0].getElementsByTagName('input');
-						audioElement.id = attribs[0].value;
-						audioElement.setAttribute('url',attribs[1].value);
-						audioHolder.appendChild(audioElement);
-					}
-					
-					for (var j=0; j<commentQuestionDOM.length; j++) {
-						var commentQuestion = document.createElement('commentQuestion');
-						attribs = commentQuestionDOM[j].getElementsByClassName('attrib')[0].getElementsByTagName('input');
-						commentQuestion.id = attribs[0].value;
-						commentQuestion.textContent = attribs[1].value;
-						audioHolder.appendChild(commentQuestion);
-					}
-					xmlDoc.appendChild(audioHolder);
-				}
-				return xmlDoc;
-			}
-			
-			function constructPrePost(parent, options) {
-				for (var i=0; i<options.length; i++) {
-					var elem = options[i];
-					var attributes = elem.getElementsByClassName('attrib')[0].getElementsByTagName('input');
-					if (elem.getAttribute('name') == 'question-node') {
-						var node = document.createElement('question');
-						node.setAttribute('id',attributes[0].value);
-						node.textContent = attributes[1].value;
-						node.setAttribute('mandatory',attributes[2].checked);
-					} else if (elem.getAttribute('name') == 'statement-node') {
-						var node = document.createElement('statement');
-						node.textContent = attributes[0].value;
-					}
-					parent.appendChild(node);
-				}
-			}
-			
-			function validate() {
-				var canExport = true;
-				// Checks if the XML can be created from the given entries
-				var inputs = document.getElementsByTagName('input');
-				for (var i=0; i<inputs.length; i++) {
-					if (inputs[i].type == 'text') {
-						if (inputs[i].value == "") {
-							var mandatory = inputs[i].getAttribute('mandatory');
-							if (mandatory == "true") {
-								errorInput(inputs[i]);
-								canExport = false;
-							} else {
-								warningInput(inputs[i]);
-							}
-						} else {
-							goodInput(inputs[i]);
-						}
-					}
-				}
-				
-				var audioHolders = document.getElementsByName('audio-holder');
-				for (var i=0; i<audioHolders.length; i++) {
-					var divs = audioHolders[i].getElementsByClassName('head');
-					var IDs = [];
-					for (var j=0; j<divs.length; j++) {
-						if (divs[j].getAttribute('name') == 'audio-element') {
-							var obj = divs[j].getElementsByClassName('attrib')[0].children[1];
-							var aeID = obj.value;
-							if (aeID != "") {
-								var unique = true;
-								for (var k=0; k<IDs.length; k++) {
-									if (aeID == IDs[k]) {
-										unique = false;
-										break;
-									}
-								}
-								if (unique == true) {
-									IDs.push(aeID);
-								} else {
-									errorInput(obj);
-									canExport = false;
-								}
-							}
-						}
-					}
-				}
-				return canExport;
-			};
-			
-			function errorInput(node) {
-				node.style.backgroundColor = "#FF0000";
-			}
-			
-			function warningInput(node) {
-				node.style.backgroundColor = "#FFFF00";
-			}
-			
-			function goodInput(node) {
-				node.style.backgroundColor = "#FFFFFF";
-			}
-			
-			function questionNode() {
-				var node = document.createElement("div");
-				node.setAttribute('class','head');
-				node.setAttribute('name','question-node');
-				var nodeTitle = document.createElement("span");
-				nodeTitle.textContent = "Question";
-				var attributes = document.createElement("div");
-				attributes.setAttribute('class','attrib');
-				var id = attributePair("ID:","text", true);
-				var question = attributePair("Question:","text", false);
-				question[1].style.width = "500px";
-				var mandatory = attributePair("Mandatory:","checkbox", false);
-				node.appendChild(nodeTitle);
-				id.forEach(function(item){attributes.appendChild(item);},false);
-				question.forEach(function(item){attributes.appendChild(item);},false);
-				mandatory.forEach(function(item){attributes.appendChild(item);},false);
-				node.appendChild(attributes);
-				
-				var removeButton = document.createElement("button");
-				removeButton.textContent = "Remove";
-				removeButton.onclick = removeNode;
-				node.appendChild(removeButton);
-				return node;
-			}
-			
-			function statementNode() {
-				var node = document.createElement("div");
-				node.setAttribute('class','head');
-				node.setAttribute('name','statement-node');
-				var nodeTitle = document.createElement("span");
-				nodeTitle.textContent = "Statement";
-				var attributes = document.createElement("div");
-				attributes.setAttribute('class','attrib');
-				var statement = attributePair("Statement:","text",false);
-				statement[1].style.width = "500px";
-				node.appendChild(nodeTitle);
-				statement.forEach(function(item){attributes.appendChild(item);},false);
-				node.appendChild(attributes);
-				
-				var removeButton = document.createElement("button");
-				removeButton.textContent = "Remove";
-				removeButton.onclick = removeNode;
-				node.appendChild(removeButton);
-				return node;
-			}
-			
-			function audioHolderNode() {
-				var audioHolderCounts = document.getElementsByName("audio-holder").length;
-				var node = document.createElement("div");
-				node.setAttribute("class","head");
-				node.setAttribute("name","audio-holder");
-				node.setAttribute("id","audio-holder-"+audioHolderCounts);
-				var nodeTitle = document.createElement("span");
-				nodeTitle.textContent = "Audio Holder "+(audioHolderCounts+1);
-				
-				var attributes = document.createElement("div");
-				attributes.setAttribute('class','attrib');
-				var id = attributePair("ID:","text",true);
-				id[1].value=audioHolderCounts;
-				var hostURL = attributePair("Host URL:", "text",false);
-				var sampleRate = attributePair("Sample Rate:","text",false);
-				var randomiseOrder = attributePair("Randomise Element Order:","checkbox");
-				var repeatCount = attributePair("Repeat Page Count:","number");
-				repeatCount[1].value = 0;
-				var loop = attributePair("Loop Element Playback","checkbox");
-				var elementComments = attributePair("Enable Comment Boxes","checkbox");
-				id.forEach(function(item){attributes.appendChild(item);},false);
-				hostURL.forEach(function(item){attributes.appendChild(item);},false);
-				sampleRate.forEach(function(item){attributes.appendChild(item);},false);
-				hostURL.forEach(function(item){attributes.appendChild(item);},false);
-				randomiseOrder.forEach(function(item){attributes.appendChild(item);},false);
-				repeatCount.forEach(function(item){attributes.appendChild(item);},false);
-				loop.forEach(function(item){attributes.appendChild(item);},false);
-				elementComments.forEach(function(item){attributes.appendChild(item);},false);
-				
-				node.appendChild(nodeTitle);
-				node.appendChild(attributes);
-				
-				var pretest = document.createElement("div");
-				pretest.setAttribute('class','head');
-				pretest.setAttribute('name','pre-test');
-				var pretestTitle = document.createElement("h4");
-				pretestTitle.textContent = "Pre Test";
-				var buttonAddQ = document.createElement("button");
-				buttonAddQ.textContent = "Add Pre Test Question";
-				buttonAddQ.onclick = function(){event.srcElement.parentElement.appendChild(questionNode());};
-				var buttonAddS = document.createElement("button");
-				buttonAddS.textContent = "Add Pre Test Statement";
-				buttonAddS.onclick = function(){event.srcElement.parentElement.appendChild(statementNode());};
-				pretest.appendChild(pretestTitle);
-				pretest.appendChild(buttonAddQ);
-				pretest.appendChild(buttonAddS);
-				
-				var posttest = document.createElement("div");
-				posttest.setAttribute('class','head');
-				posttest.setAttribute('name','post-test');
-				var posttestTitle = document.createElement("h4");
-				posttestTitle.textContent = "Post Test";
-				var buttonAddQ = document.createElement("button");
-				buttonAddQ.textContent = "Add Post Test Question";
-				buttonAddQ.onclick = function(){event.srcElement.parentElement.appendChild(questionNode());};
-				var buttonAddS = document.createElement("button");
-				buttonAddS.textContent = "Add Post Test Statement";
-				buttonAddS.onclick = function(){event.srcElement.parentElement.appendChild(statementNode());};
-				posttest.appendChild(posttestTitle);
-				posttest.appendChild(buttonAddQ);
-				posttest.appendChild(buttonAddS);
-				
-				node.appendChild(pretest);
-				node.appendChild(posttest);
-				
-				var newAudioElementButton = document.createElement("button");
-				newAudioElementButton.textContent = "Add audio element";
-				newAudioElementButton.onclick = function(){
-					event.srcElement.parentElement.appendChild(audioElementNode());
-				};
-				node.appendChild(newAudioElementButton);
-				
-				var newCommentButton = document.createElement("button");
-				newCommentButton.textContent = "Add Comment Box";
-				newCommentButton.onclick = function() {
-					event.srcElement.parentElement.appendChild(commentBox());
-				};
-				node.appendChild(newCommentButton);
-				
-				var newInterface = document.createElement("button");
-				newInterface.textContent = "Add Interface";
-				newInterface.onclick = function() {
-					event.srcElement.parentElement.appendChild(interfaceNode());
-				};
-				node.appendChild(newInterface);
-				
-				var removeButton = document.createElement("button");
-				removeButton.textContent = "Remove Audio Holder";
-				removeButton.onclick = removeNode;
-				node.appendChild(removeButton);
-				return node;
-			}
-			
-			function audioElementNode() {
-				var node = document.createElement('div');
-				node.setAttribute('class','head');
-				node.setAttribute('name','audio-element');
-				var nodeTitle = document.createElement('span');
-				nodeTitle.textContent = 'Audio Element';
-				
-				var attributes = document.createElement("div");
-				attributes.setAttribute('class','attrib');
-				var id = attributePair("ID:","text",true);
-				var url = attributePair("URL:","text",true);
-				id.forEach(function(item){attributes.appendChild(item);},false);
-				url.forEach(function(item){attributes.appendChild(item);},false);
-				
-				node.appendChild(nodeTitle);
-				node.appendChild(attributes);
-				
-				var removeButton = document.createElement("button");
-				removeButton.textContent = "Remove Audio Element";
-				removeButton.onclick = removeNode;
-				node.appendChild(removeButton);
-				return node;
-			}
-			
-			function commentBox() {
-				var node = document.createElement('div');
-				node.setAttribute('class','head');
-				node.setAttribute('name','comment-question');
-				var nodeTitle = document.createElement('h4');
-				nodeTitle.textContent = "Comment Box";
-				
-				var attributes = document.createElement('div');
-				attributes.setAttribute('class','attrib');
-				var id = attributePair("ID:",'text',true);
-				var question = attributePair("Question:",'text',true);
-				question[1].style.width = "500px";
-				id.forEach(function(item){attributes.appendChild(item);},false);
-				question.forEach(function(item){attributes.appendChild(item);},false);
-				
-				var removeButton = document.createElement("button");
-				removeButton.textContent = "Remove Comment Box";
-				removeButton.onclick = removeNode;
-				
-				node.appendChild(nodeTitle);
-				node.appendChild(attributes);
-				node.appendChild(removeButton);
-				return node;
-			}
-			
-			function interfaceNode() {
-				var selectedInterface = document.getElementById('interface').value;
-				var node = document.createElement('div');
-				node.setAttribute('class','head');
-				node.setAttribute('name','interface-options');
-				var nodeTitle = document.createElement('h4');
-				nodeTitle.textContent = "Interface";
-				
-				var attributes = document.createElement('div');
-				attributes.setAttribute('class','attrib');
-				var title = attributePair('Title: ','text',false);
-				title[1].style.width = "500px";
-				
-				var addMarker = document.createElement('button');
-				addMarker.textContent = "Add Scale Marker";
-				addMarker.onclick = function() {
-					event.srcElement.parentElement.appendChild(newScaleMarker());
-				};
-				
-				title.forEach(function(item){attributes.appendChild(item);},false);
-				
-				var removeButton = document.createElement("button");
-				removeButton.textContent = "Remove Interface";
-				removeButton.onclick = removeNode;
-				
-				node.appendChild(nodeTitle);
-				node.appendChild(attributes);
-				node.appendChild(addMarker);
-				node.appendChild(removeButton);
-				return node;
-			}
-			
-			function newScaleMarker() {
-				var node = document.createElement('div');
-				node.setAttribute('class','head');
-				node.setAttribute('name','interface-options');
-				var nodeTitle = document.createElement('span');
-				nodeTitle.textContent = "Marker";
-				var attributes = document.createElement('div');
-				attributes.setAttribute('class','attrib');
-				var text = attributePair('Text: ','text',true);
-				var position = attributePair('Positon','number',true);
-				
-				text.forEach(function(item){attributes.appendChild(item);},false);
-				position.forEach(function(item){attributes.appendChild(item);},false);
-				
-				var removeButton = document.createElement("button");
-				removeButton.textContent = "Remove Marker";
-				removeButton.onclick = removeNode;
-				
-				node.appendChild(nodeTitle);
-				node.appendChild(attributes);
-				node.appendChild(removeButton);
-				return node;
-			}
-			
-			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);
-				
-			}
-			var g_XML;
-			
-			function importXML(xml) {
-				g_XML = xml;
-				
-				var root = xml.getElementsByTagName('BrowserEvalProjectDocument')[0];
-				var setup = xml.getElementsByTagName('setup')[0];
-				document.getElementById('interface').value = setup.getAttribute('interface');
-				document.getElementById('projectReturn').value = setup.getAttribute('projectReturn');
-				document.getElementById('randomisePageOrder').checked = setup.getAttribute('randomiseOrder');
-				document.getElementById('collectMetrics').checked = setup.getAttribute('collectMetrics');
-				
-				var globalPreTest = setup.getElementsByTagName('PreTest')[0];
-				var globalPostTest = setup.getElementsByTagName('PostTest')[0];
-				for (var i=0; i<globalPreTest.childElementCount; i++) {
-					var child = globalPreTest.children[i];
-					var node;
-					if (child.nodeName == "question") {
-						node = questionNode();
-						var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
-						attribs[0].value = child.id;
-						attribs[1].value = child.textContent;
-						attribs[2].checked = child.getAttribute('mandatory');
-					} else if (child.nodeName == "statement") {
-						node = statementNode();
-						var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
-						attribs[0].value = child.textContent;
-					}
-					document.getElementById('globalPreTest').appendChild(node);
-				}
-				
-				for (var i=0; i<globalPostTest.childElementCount; i++) {
-					var child = globalPostTest.children[i];
-					var node;
-					if (child.nodeName == "question") {
-						node = questionNode();
-						var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
-						attribs[0].value = child.id;
-						attribs[1].value = child.textContent;
-						attribs[2].checked = child.getAttribute('mandatory');
-					} else if (child.nodeName == "statement") {
-						node = statementNode();
-						var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
-						attribs[0].value = child.textContent;
-					}
-					document.getElementById('globalPostTest').appendChild(node);
-				}
-				
-				// Metric Enable Flags
-				var mEnable = setup.getElementsByTagName('Metric')[0].getElementsByTagName('metricEnable');
-				for (var i=0; i<mEnable.length; i++) {
-					var node = mEnable[i];
-					var enabled = node.textContent;
-					document.getElementById(enabled).checked = true;
-				}
-				
-				var audioHolders = root.getElementsByTagName('audioHolder');
-				for (var i=0; i<audioHolders.length; i++) {
-					var audioHolderDOM = audioHolderNode();
-					var attribs = audioHolderDOM.getElementsByClassName('attrib')[0].getElementsByTagName('input');
-					attribs[0].value = audioHolders[i].id;
-					attribs[1].value = audioHolders[i].getAttribute('sampleRate');
-					attribs[2].value = audioHolders[i].getAttribute('hostURL');
-					attribs[3].checked = audioHolders[i].getAttribute('randomiseOrder');
-					attribs[4].value = audioHolders[i].getAttribute('repeatCount');
-					attribs[5].checked = audioHolders[i].getAttribute('loop');
-					attribs[6].checked = audioHolders[i].getAttribute('elementComments');
-					
-					var PreTest = audioHolders[i].getElementsByTagName('PreTest');
-					var PostTest = audioHolders[i].getElementsByTagName('PostTest');
-					if (PreTest.length != 0) {
-						PreTest = PreTest[0];
-						for (var j=0; j<PreTest.childElementCount; j++) {
-							var child = PreTest.children[j];
-							var node;
-							if (child.nodeName == "question") {
-								node = questionNode();
-								var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
-								attribs[0].value = child.id;
-								attribs[1].value = child.textContent;
-								attribs[2].checked = child.getAttribute('mandatory');
-							} else if (child.nodeName == "statement") {
-								node = statementNode();
-								var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
-								attribs[0].value = child.textContent;
-							}
-							audioHolderDOM.children[2].appendChild(node);
-						}
-					}
-					if (PostTest.length != 0) {
-						PostTest = PostTest[0];
-						for (var j=0; j<PostTest.childElementCount; j++) {
-							var child = PostTest.children[j];
-							var node;
-							if (child.nodeName == "question") {
-								node = questionNode();
-								var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
-								attribs[0].value = child.id;
-								attribs[1].value = child.textContent;
-								attribs[2].checked = child.getAttribute('mandatory');
-							} else if (child.nodeName == "statement") {
-								node = statementNode();
-								var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
-								attribs[0].value = child.textContent;
-							}
-							audioHolderDOM.children[3].appendChild(node);
-						}
-					}
-					// Process interface
-					var interfaceNodes = audioHolders[i].getElementsByTagName('interface');
-					for (var j=0; j<interfaceNodes.length; j++) {
-						var node = interfaceNode();
-						var child = interfaceNodes[j];
-						var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
-						attribs[0].value = child.getElementsByTagName('title')[0].textContent;
-						
-						var markers = child.getElementsByTagName('scale');
-						for (var k=0; k<markers.length; k++) {
-							var markerNode = newScaleMarker();
-							attribs = markerNode.getElementsByClassName('attrib')[0].getElementsByTagName('input');
-							attribs[0].value = markers[k].textContent;
-							attribs[1].value = markers[k].getAttribute('position');
-							node.appendChild(markerNode);
-						}
-						audioHolderDOM.appendChild(node);
-					}
-					
-					
-					// Process audio-element
-					var audioElements = audioHolders[i].getElementsByTagName('audioElements');
-					for (var j=0; j<audioElements.length; j++) {
-						var node = audioElementNode();
-						var child = audioElements[j];
-						var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
-						attribs[0].value = child.id;
-						attribs[1].value = child.getAttribute('url');
-						audioHolderDOM.appendChild(node);
-					}
-					
-					// Process comment-question
-					var commentQuestion = audioHolders[0].getElementsByTagName('CommentQuestion');
-					for (var j=0; j<commentQuestion.length; j++) {
-						var node = commentBox();
-						var child = commentQuestion[j];
-						var attribs = node.getElementsByClassName('attrib')[0].getElementsByTagName('input');
-						attribs[0].value = child.id;
-						attribs[1].value = child.textContent;
-						audioHolderDOM.appendChild(node);
-					}
-					
-					document.getElementById('setup').appendChild(audioHolderDOM);
-				}
+				popupInstance.showPopup();
+				popupInstance.popupBody.innerHTML = null;
+				var body = document.createElement("span");
+				body.textContent = "Right click and save the file using the link below. Place this file in your WAET directory as 'project.xml' in the example_eval/ directory. Place your media files in the location specified by the Host URL entries. If you wish to review this XML or edit it, refresh this tool and drag your XML document into the page on the welcome screen.";
+				popupInstance.popupBody.appendChild(body);
+				popupInstance.popupBody.appendChild(a);
+				popupInstance.popupTitle.innerHTML = "<span>Thank You</span>";
 			}
 		</script>
 		<style>
-			div {
-				padding: 2px;
-				margin-top: 2px;
-				margin-bottom: 2px;
+			div.popup {
+				width: 500px;
+				position: absolute;
+				height: 400px;
+				background-color: #fff;
+				border-radius: 10px;
+				box-shadow: 0px 0px 50px #000;
+				z-index: 2;
 			}
-			div.head{
-				margin-left: 10px;
-				border: black;
+			
+			button.popupButton {
+				/* Button for popup window
+				 */
+				min-width: 50px;
+				height: 25px;
+				position: relative;
+				border-radius: 5px;
+				border: #444;
+				border-width: 1px;
+				border-style: solid;
+				background-color: #fff;
+			}
+			
+			div.dragndrop {
+				margin-top: 10px;
+				border:#000000;
+				border-style: dashed;
 				border-width: 2px;
+			}
+			div.dndheaderelement {
+				float: left;
+				height: 100%;
+				border-right: #DDDDDD;
+				border-right-width: 1px;
+				border-right-style: solid;
+			}
+			div.dndheaderelement span{
+				padding-left: 5px;
+			}
+			
+			div.topLevel {
+				border: #000;
 				border-style: solid;
+				border-width: 5px;
+				padding: 10px;
+				margin: 10px;
 			}
-			div.attrib{
-				margin-left:25px;
-				border: black;
-				border-width: 2px;
-				border-style: dashed;
-				margin-bottom: 10px;
-			}
-			div#dragFile{
-				height:100px;
-				border-width: 2px;
-				border-style: dashed;
-				margin-bottom: 10px;
+			
+			div.SecondLevel {
+				border: #000;
+				border-style: solid;
+				border-width: 1px;
+				padding: 10px;
+				margin: 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 id="export">
+			<button id="exportToXML" onclick="exportToXML();">Export XML</button>
 		</div>
-		<button id="validateXML" onclick="buttonClickedValidate();">Validate</button>
-		<button id="createXML" onclick="buttonClickedSubmit();" disabled>Submit</button>
-		<span id="errorMessage" visibility="hidden"></span>
-		<div id="topLevelBody" align="left">
-			<!-- Interface goes here -->
-			<div name='test-setup'>
-				<div id="setup" class="head">
-					<h2>Setup Tag</h2>
-					<div id="setup-attribs" class="attrib">
-						<span>Interface</span>
-						<select id="interface">
-							<option value='APE'>APE</option>
-						</select>
-						<span>Project Return</span>
-						<input type="text" id="projectReturn" mandatory="false">
-						<span>Randomise Test Page Order</span>
-						<input id="randomisePageOrder" type="checkbox" value="false">
-						<span>Collect Session Metrics</span>
-						<input id="collectMetrics" type="checkbox">
-					</div>
-					<div id="globalPreTest" class="head">
-						<h3>Pre Test</h3>
-						<button id="addPreTestQ" onclick="event.srcElement.parentElement.appendChild(questionNode());">Add Pre Test Question</button>
-						<button id="addPreTestS" onclick="event.srcElement.parentElement.appendChild(statementNode());">Add Pre Test Statement</button>
-					</div>
-					<div id="globalPostTest" class="head">
-						<h3>Post Test</h3>
-						<button id="addPreTestQ" onclick="event.srcElement.parentElement.appendChild(questionNode());">Add Post Test Question</button>
-						<button id="addPreTestS" onclick="event.srcElement.parentElement.appendChild(statementNode());">Add Post Test Statement</button>
-					</div>
-					<div id="globalMetric" class="head">
-						<h3>Global Metrics</h3>
-						<div id="globalMetric-attrib" class="attrib">
-							<span>Test Timer</span>
-							<input type="checkbox" id="testTimer" />
-							<span>Element Playback Timer</span>
-							<input type="checkbox" id="elementTimer" />
-							<span>Element Initial Position</span>
-							<input type="checkbox" id="elementInitialPosition" />
-							<span>Element Tracker</span>
-							<input type="checkbox" id="elementTracker" />
-							<span>Element Listen Tracker</span>
-							<input type="checkbox" id="elementListenTracker" />
-							<span>Element Flag Listened To</span>
-							<input type="checkbox" id="elementFlagListenedTo" />
-							<span>Element Flag Moved</span>
-							<input type="checkbox" id="elementFlagMoved" />
-						</div>
-					</div>
-					<button id="addAudioHolder" onclick="event.srcElement.parentElement.appendChild(audioHolderNode());">Add AudioHolder / Test Page</button>
-				</div>
-			</div>
-		</div>
+		<div id="content"></div>
 	</body>
 </html>