Mercurial > hg > webaudioevaluationtool

changeset 193:b0d683510881

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Feature #1208: Added radio box option to page 'commentQuestion'. Also commentQuestion nodes are now common to core.js.
author Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
date Mon, 08 Jun 2015 11:00:15 +0100
parents 566fc4fa2bea
children 8ea4b48bbe11 a7b377b86ed6
files ape.css ape.js core.css core.js example_eval/project.xml
diffstat 5 files changed, 167 insertions(+), 43 deletions(-) [+]
line wrap: on
line diff
--- a/ape.css	Sat Jun 06 11:54:43 2015 +0100
+++ b/ape.css	Mon Jun 08 11:00:15 2015 +0100
@@ -51,15 +51,11 @@
 	min-height: 30px;
 }
 
-div.sliderScale span{
-	font-size: 1.2em;
-}
-
 div.sliderScale span {
 	/* Any formatting of text below scale */
+	font-size: 1.2em;
 	min-width: 5px;
 	height: 20px;
-	height: 100%;
 	position: absolute;
 }
 
--- a/ape.js	Sat Jun 06 11:54:43 2015 +0100
+++ b/ape.js	Mon Jun 08 11:00:15 2015 +0100
@@ -292,27 +292,9 @@
 		interfaceContext.showCommentBoxes(feedbackHolder,true);
 	}
 	
-	// Append any commentQuestion boxes
 	$(audioHolderObject.commentQuestions).each(function(index,element) {
-		// Create document objects to hold the comment boxes
-		var trackComment = document.createElement('div');
-		trackComment.className = 'comment-div commentQuestion';
-		trackComment.id = element.id;
-		// Create a string next to each comment asking for a comment
-		var trackString = document.createElement('span');
-		trackString.innerHTML = element.question;
-		// Create the HTML5 comment box 'textarea'
-		var trackCommentBox = document.createElement('textarea');
-		trackCommentBox.rows = '4';
-		trackCommentBox.cols = '100';
-		trackCommentBox.name = 'commentQuestion'+index;
-		trackCommentBox.className = 'trackComment';
-		var br = document.createElement('br');
-		// Add to the holder.
-		trackComment.appendChild(trackString);
-		trackComment.appendChild(br);
-		trackComment.appendChild(trackCommentBox);
-		feedbackHolder.appendChild(trackComment);
+		var node = interfaceContext.createCommentQuestion(element);
+		feedbackHolder.appendChild(node.holder);
 	});
 	
 	
@@ -484,19 +466,10 @@
 		var audioElement = audioEngineContext.audioObjects[i].exportXMLDOM();
 		xmlDoc.appendChild(audioElement);
 	}
-	var commentQuestion = document.getElementsByClassName('commentQuestion');
-	for (var i=0; i<commentQuestion.length; i++)
-	{
-		var cqHolder = document.createElement('CommentQuestion');
-		var comment = document.createElement('comment');
-		var question = document.createElement('question');
-		cqHolder.id = commentQuestion[i].id;
-		comment.textContent = commentQuestion[i].children[2].value;
-		question.textContent = commentQuestion[i].children[0].textContent;
-        console.log('Question ' + i + ': ' + commentQuestion[i].children[2].value); // DEBUG/SAFETY
-		cqHolder.appendChild(question);
-		cqHolder.appendChild(comment);
-		xmlDoc.appendChild(cqHolder);
-	}
+	
+	$(interfaceContext.commentQuestions).each(function(index,element){
+		var node = element.exportXMLDOM();
+		xmlDoc.appendChild(node);
+	});
 	store = xmlDoc;
 }
\ No newline at end of file
--- a/core.css	Sat Jun 06 11:54:43 2015 +0100
+++ b/core.css	Mon Jun 08 11:00:15 2015 +0100
@@ -27,6 +27,7 @@
 	width: 624px;
 	float: left;
 	margin: 5px;
+	height: 90px;
 }
 
 div.comment-div span {
--- a/core.js	Sat Jun 06 11:54:43 2015 +0100
+++ b/core.js	Mon Jun 08 11:00:15 2015 +0100
@@ -1197,10 +1197,32 @@
 		};
 		
 		this.commentQuestionNode = function(xml) {
+			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.question = xml.textContent;
+			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;
+				}
+			}
 		};
 		
 		this.id = xml.id;
@@ -1256,7 +1278,7 @@
 	this.interfaceObject = function(){};
 	
 	this.commentBoxes = [];
-	this.commentBox = function(audioObject) {
+	this.elementCommentBox = function(audioObject) {
 		var element = audioObject.specification;
 		this.audioObject = audioObject;
 		this.id = audioObject.id;
@@ -1294,8 +1316,121 @@
 		};
 	};
 	
+	this.commentQuestions = [];
+	
+	this.commentBox = 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.question;
+		// Create the HTML5 comment box 'textarea'
+		this.textArea = document.createElement('textarea');
+		this.textArea.rows = '4';
+		this.textArea.cols = '100';
+		this.textArea.className = 'trackComment';
+		var br = document.createElement('br');
+		// Add to the holder.
+		this.holder.appendChild(this.string);
+		this.holder.appendChild(br);
+		this.holder.appendChild(this.textArea);
+		
+		this.exportXMLDOM = function() {
+			var root = document.createElement('comment');
+			root.id = this.specification.id;
+			root.setAttribute('type',this.specification.type);
+			root.textContent = this.textArea.value;
+			return root;
+		};
+	};
+	
+	this.radioBox = 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 = 'radio';
+			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;
+			var response = document.createElement('response');
+			var i=0;
+			while(this.options[i].checked == false) {
+				i++;
+				if (i >= this.options.length) {
+					break;
+				}
+			}
+			if (i >= this.options.length) {
+				response.textContent = 'null';
+			} else {
+				response.textContent = this.options[i].getAttribute('setvalue');
+				response.setAttribute('number',i);
+			}
+			root.appendChild(question);
+			root.appendChild(response);
+			return root;
+		};
+	};
+	
+
 	this.createCommentBox = function(audioObject) {
-		var node = new this.commentBox(audioObject);
+		var node = new this.elementCommentBox(audioObject);
 		this.commentBoxes.push(node);
 		audioObject.commentDOM = node;
 		return node;
@@ -1316,5 +1451,16 @@
 			inject.appendChild(this.commentBoxes[i].trackComment);
 		}
 	};
+	
+	this.createCommentQuestion = function(element) {
+		var node;
+		if (element.type == 'text') {
+			node = new this.commentBox(element);
+		} else if (element.type == 'radio') {
+			node = new this.radioBox(element);
+		}
+		this.commentQuestions.push(node);
+		return node;
+	};
 }
 
--- a/example_eval/project.xml	Sat Jun 06 11:54:43 2015 +0100
+++ b/example_eval/project.xml	Mon Jun 08 11:00:15 2015 +0100
@@ -54,7 +54,15 @@
 		<audioElements url="8.wav" id="8"/>
 		<audioElements url="9.wav" id="9"/>
 		<audioElements url="10.wav" id="10"/>-->
-		<CommentQuestion id='mixingExperience'>What is your mixing experience</CommentQuestion>
+		<CommentQuestion id='mixingExperience' type="text">What is your mixing experience</CommentQuestion>
+		<CommentQuestion id="preference" type="radio">
+			<statement>Please enter your ranking preference on this song</statement>
+			<option name="worst">Very Bad</option>
+			<option name="bad"></option>
+			<option name="OK">OK</option>
+			<option name="Good"></option>
+			<option name="Great">Great</option>
+		</CommentQuestion>
 		<PreTest/>
 		<PostTest>
 			<question id="genre" mandatory="true">Please enter the genre</question>