# HG changeset patch
# User Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
# Date 1433925104 -3600
# Node ID a7b377b86ed6180865a2c5d1272e5e7a71d8459a
# Parent  b0d68351088179a0cdd0a335274d32e53a8bf1dd# Parent  c53ba966b7160a5827f6f771a31178af7c4cf414
Merge from branch "Dev_main"

diff -r b0d683510881 -r a7b377b86ed6 core.js
--- a/core.js	Mon Jun 08 11:00:15 2015 +0100
+++ b/core.js	Wed Jun 10 09:31:44 2015 +0100
@@ -49,7 +49,7 @@
 	// Creates an object to manage the popup
 	this.popup = null;
 	this.popupContent = null;
-	this.popupButton = null;
+	this.buttonProceed = null;
 	this.popupOptions = null;
 	this.currentIndex = null;
 	this.responses = null;
@@ -73,10 +73,10 @@
 		this.popupContent.align = 'center';
 		this.popup.appendChild(this.popupContent);
 		
-		this.popupButton = document.createElement('button');
-		this.popupButton.className = 'popupButton';
-		this.popupButton.innerHTML = 'Next';
-		this.popupButton.onclick = function(){popup.buttonClicked();};
+		this.buttonProceed = document.createElement('button');
+		this.buttonProceed.className = 'popupButton';
+		this.buttonProceed.innerHTML = 'Next';
+		this.buttonProceed.onclick = function(){popup.proceedClicked();};
 		this.popup.style.zIndex = -1;
 		this.popup.style.visibility = 'hidden';
 		blank.style.zIndex = -2;
@@ -187,8 +187,19 @@
 				optHold.appendChild(hold);
 			}
 			this.popupContent.appendChild(optHold);
+		} else if (node.type == 'number') {
+			var span = document.createElement('span');
+			span.textContent = node.statement;
+			this.popupContent.appendChild(span);
+			this.popupContent.appendChild(document.createElement('br'));
+			var input = document.createElement('input');
+			input.type = 'number';
+			if (node.min != null) {input.min = node.min;}
+			if (node.max != null) {input.max = node.max;}
+			if (node.step != null) {input.step = node.step;}
+			this.popupContent.appendChild(input);
 		}
-		this.popupContent.appendChild(this.popupButton);
+		this.popupContent.appendChild(this.buttonProceed);
 	};
 	
 	this.initState = function(node) {
@@ -212,7 +223,7 @@
 		}
 	};
 	
-	this.buttonClicked = function() {
+	this.proceedClicked = function() {
 		// Each time the popup button is clicked!
 		var node = this.popupOptions[this.currentIndex];
 		if (node.type == 'question') {
@@ -226,7 +237,7 @@
 				var hold = document.createElement('comment');
 				hold.id = node.id;
 				hold.innerHTML = textArea.value;
-				console.log("Question: "+ node.textContent);
+				console.log("Question: "+ node.question);
 				console.log("Question Response: "+ textArea.value);
 				this.responses.appendChild(hold);
 			}
@@ -240,8 +251,8 @@
 				var input = optHold.childNodes[i].getElementsByTagName('input')[0];
 				var statement = optHold.childNodes[i].getElementsByTagName('span')[0];
 				var response = document.createElement('option');
-				response.setAttribute('id',input.id);
-				response.setAttribute('checked',input.checked);
+				response.setAttribute('name',input.id);
+				response.textContent = input.checked;
 				hold.appendChild(response);
 				console.log(input.id +': '+ input.checked);
 			}
@@ -262,9 +273,35 @@
 			hold.setAttribute('name',node.options[responseID].name);
 			hold.textContent = node.options[responseID].text;
 			this.responses.appendChild(hold);
+		} else if (node.type == "number") {
+			var input = this.popupContent.getElementsByTagName('input')[0];
+			if (node.mandatory == true && input.value.length == 0) {
+				alert('This question is mandatory. Please enter a number');
+				return;
+			}
+			var enteredNumber = Number(input.value);
+			if (enteredNumber == undefined) {
+				alert('Please enter a valid number');
+				return;
+			}
+			if (enteredNumber < node.min && node.min != null) {
+				alert('Number is below the minimum value of '+node.min);
+				return;
+			}
+			if (enteredNumber > node.max && node.max != null) {
+				alert('Number is above the maximum value of '+node.max);
+				return;
+			}
+			var hold = document.createElement('number');
+			hold.id = node.id;
+			hold.textContent = input.value;
+			this.responses.appendChild(hold);
 		}
 		this.currentIndex++;
 		if (this.currentIndex < this.popupOptions.length) {
+			if(this.currentIndex+1 == this.popupOptions.length) {
+				this.buttonProceed.textContent = 'Submit';
+			}
 			this.postNode();
 		} else {
 			// Reached the end of the popupOptions
@@ -1152,6 +1189,12 @@
 						element = element.nextElementSibling;
 					}
 				}
+			} else if (child.nodeName == "number") {
+				this.statement = child.textContent;
+				this.id = child.id;
+				this.min = child.getAttribute('min');
+				this.max = child.getAttribute('max');
+				this.step = child.getAttribute('step');
 			}
 		};
 		
@@ -1222,6 +1265,19 @@
 					}
 					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;
 			}
 		};
 		
@@ -1422,12 +1478,88 @@
 				response.textContent = this.options[i].getAttribute('setvalue');
 				response.setAttribute('number',i);
 			}
+			console.log('Comment: '+question.textContent);
+			console.log('Response: '+response.textContent);
 			root.appendChild(question);
 			root.appendChild(response);
 			return root;
 		};
 	};
 	
+	this.checkboxBox = function(commentQuestion) {
+		this.specification = commentQuestion;
+		// Create document objects to hold the comment boxes
+		this.holder = document.createElement('div');
+		this.holder.className = 'comment-div';
+		// Create a string next to each comment asking for a comment
+		this.string = document.createElement('span');
+		this.string.innerHTML = commentQuestion.statement;
+		var br = document.createElement('br');
+		// Add to the holder.
+		this.holder.appendChild(this.string);
+		this.holder.appendChild(br);
+		this.options = [];
+		this.inputs = document.createElement('div');
+		this.span = document.createElement('div');
+		this.inputs.align = 'center';
+		this.inputs.style.marginLeft = '12px';
+		this.span.style.marginLeft = '12px';
+		this.span.align = 'center';
+		this.span.style.marginTop = '15px';
+		
+		var optCount = commentQuestion.options.length;
+		var spanMargin = Math.floor(((600-(optCount*100))/(optCount))/2)+'px';
+		console.log(spanMargin);
+		for (var i=0; i<optCount; i++)
+		{
+			var div = document.createElement('div');
+			div.style.width = '100px';
+			div.style.float = 'left';
+			div.style.marginRight = spanMargin;
+			div.style.marginLeft = spanMargin;
+			var input = document.createElement('input');
+			input.type = 'checkbox';
+			input.name = commentQuestion.id;
+			input.setAttribute('setvalue',commentQuestion.options[i].name);
+			input.className = 'comment-radio';
+			div.appendChild(input);
+			this.inputs.appendChild(div);
+			
+			
+			div = document.createElement('div');
+			div.style.width = '100px';
+			div.style.float = 'left';
+			div.style.marginRight = spanMargin;
+			div.style.marginLeft = spanMargin;
+			div.align = 'center';
+			var span = document.createElement('span');
+			span.textContent = commentQuestion.options[i].text;
+			span.className = 'comment-radio-span';
+			div.appendChild(span);
+			this.span.appendChild(div);
+			this.options.push(input);
+		}
+		this.holder.appendChild(this.span);
+		this.holder.appendChild(this.inputs);
+		
+		this.exportXMLDOM = function() {
+			var root = document.createElement('comment');
+			root.id = this.specification.id;
+			root.setAttribute('type',this.specification.type);
+			var question = document.createElement('question');
+			question.textContent = this.string.textContent;
+			root.appendChild(question);
+			console.log('Comment: '+question.textContent);
+			for (var i=0; i<this.options.length; i++) {
+				var response = document.createElement('response');
+				response.textContent = this.options[i].checked;
+				response.setAttribute('name',this.options[i].getAttribute('setvalue'));
+				root.appendChild(response);
+				console.log('Response '+response.getAttribute('name') +': '+response.textContent);
+			}
+			return root;
+		};
+	};
 
 	this.createCommentBox = function(audioObject) {
 		var node = new this.elementCommentBox(audioObject);
@@ -1458,6 +1590,8 @@
 			node = new this.commentBox(element);
 		} else if (element.type == 'radio') {
 			node = new this.radioBox(element);
+		} else if (element.type == 'checkbox') {
+			node = new this.checkboxBox(element);
 		}
 		this.commentQuestions.push(node);
 		return node;
diff -r b0d683510881 -r a7b377b86ed6 example_eval/project.xml
--- a/example_eval/project.xml	Mon Jun 08 11:00:15 2015 +0100
+++ b/example_eval/project.xml	Wed Jun 10 09:31:44 2015 +0100
@@ -11,6 +11,11 @@
 				<option id="studio">Studio Mixing</option>
 				<option id="player">Play an instrument</option>
 			</checkbox>
+			<number id="age" min="0">Please enter your age</number>
+			<statement>Please listen to all mixes</statement>
+		</PreTest>
+		<PostTest>
+			<question id="SessionID" mandatory="true">Please enter your name.</question>
 			<radio id="rating">
 				<statement>Please rate this interface</statement>
 				<option name="bad">Bad</option>
@@ -18,10 +23,6 @@
 				<option name="Good">Good</option>
 				<option name="Great">Great</option>
 			</radio>
-			<statement>Please listen to all mixes</statement>
-		</PreTest>
-		<PostTest>
-			<question id="SessionID" mandatory="true">Please enter your name.</question>
 			<statement>Thank you for taking this listening test.</statement>
 		</PostTest>
 		<Metric>
@@ -63,6 +64,14 @@
 			<option name="Good"></option>
 			<option name="Great">Great</option>
 		</CommentQuestion>
+		<CommentQuestion id="preference" type="checkbox">
+			<statement>Describe this song</statement>
+			<option name="bright">Bright</option>
+			<option name="punchy">Punchy</option>
+			<option name="dark">Dark</option>
+			<option name="moody">Moody</option>
+			<option name="dull">Dull</option>
+		</CommentQuestion>
 		<PreTest/>
 		<PostTest>
 			<question id="genre" mandatory="true">Please enter the genre</question>