Mercurial > hg > webaudioevaluationtool

changeset 194:8ea4b48bbe11 Dev_main

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Merge from the default branch
author Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
date Mon, 08 Jun 2015 11:01:21 +0100
parents f4c6c9805529 (current diff) b0d683510881 (diff)
children d5d09345e8ba
files
diffstat 7 files changed, 201 insertions(+), 54 deletions(-) [+]
line wrap: on
line diff
--- a/ape.css	Fri Jun 05 12:42:32 2015 +0100
+++ b/ape.css	Mon Jun 08 11:01:21 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	Fri Jun 05 12:42:32 2015 +0100
+++ b/ape.js	Mon Jun 08 11:01:21 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	Fri Jun 05 12:42:32 2015 +0100
+++ b/core.css	Mon Jun 08 11:01:21 2015 +0100
@@ -27,6 +27,7 @@
 	width: 624px;
 	float: left;
 	margin: 5px;
+	height: 90px;
 }
 
 div.comment-div span {
--- a/core.js	Fri Jun 05 12:42:32 2015 +0100
+++ b/core.js	Mon Jun 08 11:01:21 2015 +0100
@@ -116,6 +116,24 @@
 			var span = document.createElement('span');
 			span.textContent = node.question;
 			var textArea = document.createElement('textarea');
+			switch (node.boxsize) {
+			case 'small':
+				textArea.cols = "20";
+				textArea.rows = "1";
+				break;
+			case 'normal':
+				textArea.cols = "30";
+				textArea.rows = "2";
+				break;
+			case 'large':
+				textArea.cols = "40";
+				textArea.rows = "5";
+				break;
+			case 'huge':
+				textArea.cols = "50";
+				textArea.rows = "10";
+				break;
+			}
 			var br = document.createElement('br');
 			this.popupContent.appendChild(span);
 			this.popupContent.appendChild(br);
@@ -1100,7 +1118,7 @@
 				this.id = element.id;
 				this.name = element.getAttribute('name');
 				this.text = element.textContent;
-			}
+			};
 			
 			this.type = child.nodeName;
 			if (child.nodeName == "question") {
@@ -1109,6 +1127,11 @@
 				if (child.getAttribute('mandatory') == "true") {this.mandatory = true;}
 				else {this.mandatory = false;}
 				this.question = child.textContent;
+				if (child.getAttribute('boxsize') == null) {
+					this.boxsize = 'normal';
+				} else {
+					this.boxsize = child.getAttribute('boxsize');
+				}
 			} else if (child.nodeName == "statement") {
 				this.statement = child.textContent;
 			} else if (child.nodeName == "checkbox" || child.nodeName == "radio") {
@@ -1174,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;
@@ -1233,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;
@@ -1271,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;
@@ -1293,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	Fri Jun 05 12:42:32 2015 +0100
+++ b/example_eval/project.xml	Mon Jun 08 11:01:21 2015 +0100
@@ -2,7 +2,7 @@
 <BrowserEvalProjectDocument>
 	<setup interface="APE" projectReturn="/save" randomiseOrder='true' collectMetrics='true'>
 		<PreTest>
-			<question id="Location" mandatory="true">Please enter your location.</question>
+			<question id="Location" mandatory="true" boxsize="large">Please enter your location.</question>
 			<checkbox id="experience">
 				<statement>Check options which are relevant to you</statement>
 				<option id="digital">Digital Consoles</option>
@@ -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>
--- a/scripts/score_boxplot.py	Fri Jun 05 12:42:32 2015 +0100
+++ b/scripts/score_boxplot.py	Mon Jun 08 11:01:21 2015 +0100
@@ -64,8 +64,7 @@
         plt.ylabel('Rating')
         plt.ylim(0,1)
 
-        plt.show()
+        #plt.show() # show plot
         #exit()
 
-        #TODO Save output automatically
-
+        plt.savefig(rating_folder+page_name+"-ind.png")
--- a/scripts/score_individual.py	Fri Jun 05 12:42:32 2015 +0100
+++ b/scripts/score_individual.py	Mon Jun 08 11:01:21 2015 +0100
@@ -9,7 +9,7 @@
 markerlist = ["x", ".", "o", "*", "+", "v", ">", "<", "8", "s", "p"]
 
 # get every csv file in folder
-for file in os.listdir(rating_folder): # You have to put this in folder where rating csv files are.
+for file in os.listdir(rating_folder):
     if file.endswith(".csv"):
         page_name = file[:-4] # file name (without extension) is page ID
 
@@ -47,13 +47,14 @@
 
             plt.legend(linehandles, legendnames,
                        loc='upper right',
-                       bbox_to_anchor=(1.1, 1), borderaxespad=0.)
+                       bbox_to_anchor=(1.1, 1),
+                       borderaxespad=0.,
+                       numpoints=1 # remove extra marker
+                       )
 
             #TODO Put legend outside of box
-            #TODO Why two markers in legend?
 
-            plt.show()
+            #plt.show() # show plot
             #exit()
 
-            #TODO Save output automatically
-
+            plt.savefig(rating_folder+page_name+"-ind.png")