# HG changeset patch
# User Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
# Date 1433240663 -3600
# Node ID f0fb39c61967b0488bb705ff73f2547891d04ed6
# Parent  2799bb693f707ae5a4eef7cf4a77c4255bf144bc# Parent  826dfaa860d136664b0b67f1f3002dc59ec9dfb6
Merge from the default branch

diff -r 826dfaa860d1 -r f0fb39c61967 test_create/test_create.html
--- a/test_create/test_create.html	Mon Jun 01 17:00:45 2015 +0100
+++ b/test_create/test_create.html	Tue Jun 02 11:24:23 2015 +0100
@@ -12,14 +12,285 @@
 		<meta name="author" content="">
 
 		<meta name="viewport" content="width=device-width; initial-scale=1.0">
+		
+		<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';
+				
+			};
+			
+			function attributePair(string, type){
+				var id = document.createElement("span");
+				id.textContent = string;
+				var input = document.createElement("input");
+				input.type = type;
+				return [id, input];
+			}
+			
+			function removeNode(event) {
+				event.srcElement.parentElement.parentElement.removeChild(event.srcElement.parentElement);
+			}
+			
+			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");
+				var question = attributePair("Question:","text");
+				node.appendChild(nodeTitle);
+				id.forEach(function(item){attributes.appendChild(item);},false);
+				question.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','question-node');
+				var nodeTitle = document.createElement("span");
+				nodeTitle.textContent = "Statement";
+				var attributes = document.createElement("div");
+				attributes.setAttribute('class','attrib');
+				var statement = attributePair("Statement:","text");
+				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");
+				id[1].value=audioHolderCounts;
+				var hostURL = attributePair("Host URL:", "text");
+				var sampleRate = attributePair("Sample Rate:","text");
+				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 removeButton = document.createElement("button");
+				removeButton.textContent = "Remove Audio Holder";
+				removeButton.onclick = removeNode;
+				node.appendChild(removeButton);
+				return node;
+			}
+			
+			function audioElementNode() {
+				var parentStructure = event.srcElement.parentElement.childNodes;
+				var audioElemCounts = 0;
+				for (var i=0; i<parentStructure.length; i++) {
+					if (parentStructure[i].getAttribute('name') == "audio-element")
+					{audioElemCounts++;}
+				}
+				var node = document.createElement('div');
+				node.setAttribute('class','head');
+				node.setAttribute('name','audio-element');
+				var nodeTitle = document.createElement('span');
+				nodeTitle.textContent = 'Audio Element '+(audioElemCounts+1);
+				
+				var attributes = document.createElement("div");
+				attributes.setAttribute('class','attrib');
+				var id = attributePair("ID:","text");
+				id[1].value = audioElemCounts;
+				var url = attributePair("URL:","text");
+				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');
+				var question = attributePair("Question:",'text');
+				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;
+			}
+		</script>
+		<style>
+			div {
+				padding: 2px;
+				margin-top: 2px;
+				margin-bottom: 2px;
+			}
+			div.head{
+				margin-left: 10px;
+				border: black;
+				border-width: 2px;
+				border-style: solid;
+			}
+			div.attrib{
+				margin-left:25px;
+				border: black;
+				border-width: 2px;
+				border-style: dashed;
+				margin-bottom: 10px;
+			}
+		</style>
+		
 	</head>
 
 	<body>
-		<div>
-			<h1>Create Test Setup XML</h1>
-		</div>
-		<div id="topLevelBody">
+		<h1>Create Test Setup XML</h1>
+		<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">
+						<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 Flag Listened To</span>
+							<input type="checkbox" id="elementFlagListened" />
+							<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>
 	</body>
 </html>