Mercurial > hg > webaudioevaluationtool

view test_create/test_create.html @ 159:2799bb693f70 Dev_main

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Creat_Test: Structure for APE created.
author Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
date Mon, 01 Jun 2015 15:26:58 +0100
parents 0a6077dd8b78
children 918d9a5943cd
line wrap: on
line source
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>WAET Create Test</title>
		<meta name="description" content="">
		<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>
		<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>