Index: lams_tool_assessment/.gitignore
===================================================================
diff -u -re055e9ceb6b787c1f14e0db6e6735d08d14769c5 -rea355e79020de11b00f2acf713ed79ec603d7679
--- lams_tool_assessment/.gitignore	(.../.gitignore)	(revision e055e9ceb6b787c1f14e0db6e6735d08d14769c5)
+++ lams_tool_assessment/.gitignore	(.../.gitignore)	(revision ea355e79020de11b00f2acf713ed79ec603d7679)
@@ -1,5 +1,5 @@
 /bin/
 /build/
 /.sass-cache/
-/web/includes/css/*.css
+/web/includes/css/assessment.css
 .DS_Store
\ No newline at end of file
Index: lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/MonitoringController.java
===================================================================
diff -u -rbb6788de1fe910e6ab6fb14bb54b5e21551392de -rea355e79020de11b00f2acf713ed79ec603d7679
--- lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/MonitoringController.java	(.../MonitoringController.java)	(revision bb6788de1fe910e6ab6fb14bb54b5e21551392de)
+++ lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/MonitoringController.java	(.../MonitoringController.java)	(revision ea355e79020de11b00f2acf713ed79ec603d7679)
@@ -329,9 +329,8 @@
 
     @RequestMapping(path = "/allocateUserAnswer", method = RequestMethod.POST)
     @ResponseBody
-    public String allocateUserAnswer(HttpServletRequest request, HttpServletResponse response,
-	    @RequestParam Long questionUid, @RequestParam Long targetOptionUid, @RequestParam Long previousOptionUid,
-	    @RequestParam String answer) {
+    public String allocateUserAnswer(HttpServletResponse response, @RequestParam Long questionUid,
+	    @RequestParam Long targetOptionUid, @RequestParam Long previousOptionUid, @RequestParam String answer) {
 
 	Long optionUid = null;
 	boolean answerFoundInResults = false;
Fisheye: Tag ea355e79020de11b00f2acf713ed79ec603d7679 refers to a dead (removed) revision in file `lams_tool_assessment/web/includes/css/addQuestion.css'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_assessment/web/includes/css/vsaAllocate.css
===================================================================
diff -u
--- lams_tool_assessment/web/includes/css/vsaAllocate.css	(revision 0)
+++ lams_tool_assessment/web/includes/css/vsaAllocate.css	(revision ea355e79020de11b00f2acf713ed79ec603d7679)
@@ -0,0 +1,46 @@
+.sortable-on {
+	border: 3px solid #286090;
+	border-radius: 10px;
+	height: 200px;
+	padding: 10px;
+	overflow-y: auto;
+}
+
+.sortable-on .portrait-generic-sm {
+	margin-right: 5px;
+}
+
+.sortable-on .portrait-anonymous {
+	color: #ddd;
+}
+
+.tbl-correct-list {
+	border: 3px solid #3c763d;
+	background-color: #3c763d10;
+}
+
+.tbl-incorrect-list {
+	border: 3px solid #a94442;
+	background-color: #a9444210;
+}
+
+.answer-queue {
+	border: 2px solid #ddd;
+}
+
+.answer-alternatives {
+	text-align: left;
+	margin-top: 5px;
+}
+
+.answer-alternatives button {
+	margin: 2px;
+}
+
+.filtered {
+	background-color: lightgrey;
+}
+
+.list-group-item {
+	cursor: pointer;
+}
\ No newline at end of file
Index: lams_tool_assessment/web/includes/javascript/vsaAllocate.js
===================================================================
diff -u
--- lams_tool_assessment/web/includes/javascript/vsaAllocate.js	(revision 0)
+++ lams_tool_assessment/web/includes/javascript/vsaAllocate.js	(revision ea355e79020de11b00f2acf713ed79ec603d7679)
@@ -0,0 +1,78 @@
+$(document).ready(function(){
+    //init options sorting feature
+	$('.sortable-on').each(function() {
+		let questionUid = $(this).data('question-uid');
+		updateAnswerQueueSize(questionUid);
+		
+	    new Sortable(this, {
+	    	group: 'question' + questionUid,
+		    animation: 150,
+		  	filter: '.filtered', // 'filtered' class is not draggable
+			onEnd: function (evt) {
+				let data = {
+		            	questionUid: questionUid,
+		            	targetOptionUid: $(evt.to).data("option-uid"),
+		            	previousOptionUid: $(evt.from).data("option-uid"),
+		            	answer: $('.answer-text', evt.item).text()
+				    };
+				data[csrfTokenName] = csrfTokenValue;
+				
+		        $.ajax({
+		            url: WEB_APP_URL + 'monitoring/allocateUserAnswer.do',
+		            data: data,
+		            method: 'post',
+		          	dataType: "json",
+			        success: function (data) {
+			        	updateAnswerQueueSize(questionUid);
+			        	
+			            if (data.isAnswerDuplicated) {
+  				        	alert(VS_ANSWER_ALLOCATED_ALERT);
+  				        	$(evt.item).appendTo("#answer-group" + data.optionUid);
+  				        	$(evt.item).addClass("filtered");
+	  				    }
+			        }
+		       	});
+			}
+		});
+	});
+
+	$('.answer-alternatives button').click(function(){
+		var button = $(this),
+			answer = button.text(),
+			container = button.closest('.answer-alternatives'),
+			questionUid = container.data('question-uid'),
+			optionUid = container.data('option-uid'),
+			data = {
+	            	questionUid: questionUid,
+	            	targetOptionUid: -1,
+	            	previousOptionUid: optionUid,
+	            	answer: answer
+				    };
+
+		data[csrfTokenName] = csrfTokenValue;
+				
+        $.ajax({
+		    url: WEB_APP_URL + 'monitoring/allocateUserAnswer.do',
+            data: data,
+            method: 'post',
+          	dataType: "json",
+		        success: function (data) {
+		            if (data.answerFoundInResults) {
+				        $('<div class="list-group-item" />')
+				        	.append($('<div class="portrait-anonymous portrait-generic-sm" />'))
+				        	.append($('<span class="answer-text"/>').text(answer))
+				        	.appendTo('#answer-queue' + questionUid);
+
+				        updateAnswerQueueSize(questionUid);
+  				    }
+
+  				   	button.remove();
+		    }
+       	});
+	});
+});
+
+function updateAnswerQueueSize(questionUid) {
+	 var answerQueueLength = $('#answer-queue' + questionUid + ' .list-group-item').length;
+	 $('#answer-queue-size' + questionUid).text(answerQueueLength ? ' (' + answerQueueLength + ')' : '');
+}
\ No newline at end of file
Index: lams_tool_assessment/web/pages/monitoring/monitoring.jsp
===================================================================
diff -u -rff9b1c659da59060b4690a29bfdd493e8741b224 -rea355e79020de11b00f2acf713ed79ec603d7679
--- lams_tool_assessment/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision ff9b1c659da59060b4690a29bfdd493e8741b224)
+++ lams_tool_assessment/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision ea355e79020de11b00f2acf713ed79ec603d7679)
@@ -7,6 +7,8 @@
 
 <lams:html>
 	<lams:head>
+		<title><c:out value="${assessment.title}" /></title>
+		
 		<%@ include file="/common/tabbedheader.jsp" %>
 		<link href="${lams}css/jquery-ui-bootstrap-theme.css" rel="stylesheet" type="text/css">
 		<link href="${lams}css/jquery-ui.timepicker.css" rel="stylesheet" type="text/css">
Index: lams_tool_assessment/web/pages/monitoring/parts/questionsummary.jsp
===================================================================
diff -u -r2f296f6624f5d9420257eae30ecd19713a95fbe2 -rea355e79020de11b00f2acf713ed79ec603d7679
--- lams_tool_assessment/web/pages/monitoring/parts/questionsummary.jsp	(.../questionsummary.jsp)	(revision 2f296f6624f5d9420257eae30ecd19713a95fbe2)
+++ lams_tool_assessment/web/pages/monitoring/parts/questionsummary.jsp	(.../questionsummary.jsp)	(revision ea355e79020de11b00f2acf713ed79ec603d7679)
@@ -4,7 +4,6 @@
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 <c:set var="assessment" value="${sessionMap.assessment}"/>
 <c:set var="sessionDtos" value="${sessionMap.sessionDtos}"/>
-<% pageContext.setAttribute("newLineChar", "\r\n"); %>
 
 <lams:html>
 	<lams:head>
@@ -14,21 +13,11 @@
 		<link type="text/css" href="${lams}css/jquery-ui-bootstrap-theme.css" rel="stylesheet">
 		<link type="text/css" href="${lams}css/free.ui.jqgrid.min.css" rel="stylesheet">
 		<link type="text/css" href="${lams}css/jquery.jqGrid.confidence-level-formattter.css" rel="stylesheet">
+		<link type="text/css" href="<lams:WebAppURL />includes/css/vsaAllocate.css" rel="stylesheet">
 		<c:if test="${not empty questionDto.codeStyle}">
 			<link rel="stylesheet" type="text/css" href="${lams}css/codemirror.css" />
 		</c:if>
 		<style>
-			.sortable-on {
-				background: lightgoldenrodyellow;
-    			min-height: 110px;
-    			padding: 10px;
-			}
-			.filtered {
-			    background-color: lightgrey;
-			}
-			.list-group-item {
-				cursor: pointer;
-			}
 	  		pre {
 				background-color: initial;
 				border: none;
@@ -64,13 +53,20 @@
 				COMMENT_TEXTAREA_TIP_LABEL = '',
 				WARN_COMMENTS_IS_BLANK_LABEL = '',
 				WARN_MIN_NUMBER_WORDS_LABEL = '';
+
+			//vars for VSA allocation
+			var VS_ANSWER_ALLOCATED_ALERT = "<fmt:message key="label.someone.allocated.this.answer" />",
+				WEB_APP_URL = "<lams:WebAppURL />",
+				csrfTokenName = "<csrf:tokenname/>",
+				csrfTokenValue = "<csrf:tokenvalue/>";
 		</script>
 		<script type="text/javascript" src="${lams}includes/javascript/free.jquery.jqgrid.min.js"></script>
 	 	<script type="text/javascript" src="${lams}includes/javascript/jquery.jqGrid.confidence-level-formattter.js"></script>
 	 	<script type="text/javascript" src="${lams}includes/javascript/portrait.js"></script>
 	 	<script type="text/javascript" src="${lams}includes/javascript/Sortable.js"></script>
 	 	<script type="text/javascript" src="${lams}includes/javascript/jquery.jRating.js"></script>
 		<script type="text/javascript" src="${lams}includes/javascript/rating.js"></script> 	
+		<script type="text/javascript" src="<lams:WebAppURL />includes/javascript/vsaAllocate.js"></script>
 
 		<c:if test="${not empty questionDto.codeStyle}">
 			<script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/runmode-standalone.js"></script>
@@ -262,44 +258,6 @@
 	  		        }
 	  			});
 	  			setTimeout(function(){ window.dispatchEvent(new Event('resize')); }, 300);
-
-	  		    //init options sorting feature
-	  			$('.sortable-on').each(function() {
-	  			    new Sortable($(this)[0], {
-	  			    	group: 'shared',
-	  				    animation: 150,
-	  				  	filter: '.filtered', // 'filtered' class is not draggable
-	  				    //ghostClass: 'sortable-placeholder',
-	  				    //direction: 'vertical',
-	  					onStart: function (evt) {
-	  						//stop answers' hover effect, once element dragging started
-	  						//$("#option-table").removeClass("hover-active");
-	  					},
-	  					onEnd: function (evt) {
-	  				        $.ajax({
-	  				            url: '<c:url value="/monitoring/allocateUserAnswer.do"/>',
-	  				            data: {
-	  				            	sessionMapID: "${sessionMapID}",
-	  				            	questionUid: ${questionDto.uid},
-	  				            	targetOptionUid: $(evt.to).data("option-uid"),
-	  				            	previousOptionUid: $(evt.from).data("option-uid"),
-	  				            	questionResultUid: $(evt.item).data("question-result-uid"),
-	  								"<csrf:tokenname/>":"<csrf:tokenvalue/>"
-	  						    },
-	  				            method: 'post',
-	  				          	dataType: "json",
-		  				        success: function (data) {
-		  				            if (data.isAnswerDuplicated) {
-			  				        	alert("<fmt:message key="label.someone.allocated.this.answer" />");
-			  				        	$(evt.item).appendTo("#answer-group" + data.optionUid);
-			  				        	$(evt.item).addClass("filtered");
-				  				    }
-		  				        }
-	  				            	
-	  				       	});
-	  					}
-	  				});
-	  			});
 	  		});  	    	
 	  		
     		function refreshSummaryPage()  { 
@@ -379,88 +337,7 @@
             <!--allocate responses-->
 			<c:if test="${questionDto.type == 3}">
 				<br><br>
-				
-				<div class="row">
-					<div class="col-sm-4 text-center">
-						<c:set var="option0" value="${questionDto.optionDtos.toArray()[0]}"/>
-						<h4>
-							<c:choose>
-								<c:when test="${questionSummary.tbl && option0.maxMark == 1}">
-									<i class="fa fa-check fa-lg text-success"></i> <fmt:message key="label.correct" />
-								</c:when>
-								<c:when test="${questionSummary.tbl && option0.maxMark == 0}">
-									<i class="fa fa-times fa-lg text-danger"></i>	<fmt:message key="label.incorrect" />
-								</c:when>
-								<c:otherwise>
-									<fmt:message key="label.authoring.basic.option.grade"/>: ${option0.maxMark}
-								</c:otherwise>
-							</c:choose>
-						</h4>
-						
-						<div class="list-group col sortable-on" data-option-uid="${option0.uid}" id="answer-group${option0.uid}"></div>
-						
-						<fmt:message key="label.answer.alternatives" />: 
-						${fn:replace(option0.name, newLineChar, ', ')}
-					</div>
-					
-					<div class="col-sm-4 text-center">
-		            	<h4><fmt:message key="label.answer.queue" /></h4>
-	            		(<fmt:message key="label.drag.and.drop" />)	
-	            		
-	            		<div class="list-group col sortable-on" data-option-uid="-1" id="answer-group-1">
-		            		<c:forEach var="questionResult" items="${questionSummary.notAllocatedQuestionResults}">
-		            			<div class="list-group-item" data-question-result-uid="${questionResult.uid}">
-		            				<lams:Portrait userId="${questionResult.assessmentResult.user.userId}"/>&nbsp;
-		            				${questionResult.answer}
-		            			</div>
-		            		</c:forEach>
-	            		</div>		
-					</div>
-					
-					<div class="col-sm-4 text-center">
-						<c:set var="option1" value="${questionDto.optionDtos.toArray()[1]}"/>
-						<h4>
-							<c:choose>
-								<c:when test="${questionSummary.tbl && option1.maxMark == 1}">
-									<i class="fa fa-check fa-lg text-success"></i> <fmt:message key="label.correct" />
-								</c:when>
-								<c:when test="${questionSummary.tbl && option1.maxMark == 0}">
-									<i class="fa fa-times fa-lg text-danger"></i>	<fmt:message key="label.incorrect" />
-								</c:when>
-								<c:otherwise>
-									<fmt:message key="label.authoring.basic.option.grade"/>: ${option1.maxMark}
-								</c:otherwise>
-							</c:choose>
-						</h4>
-						
-						<div class="list-group col sortable-on" data-option-uid="${option1.uid}" id="answer-group${option1.uid}"></div>	
-						
-						<fmt:message key="label.answer.alternatives" />: 
-						${fn:replace(option1.name, newLineChar, ', ')}
-					</div>
-				</div>
-				
-				<c:forEach var="optionDto" items="${questionDto.optionDtos}" begin="2" varStatus="status">
-				
-					<c:if test="${status.count % 3 == 0}">
-						<div class="row">
-					</c:if>
-				
-					<div class="col-sm-4 text-center">
-						<h4>
-							<fmt:message key="label.authoring.basic.option.grade"/>: ${optionDto.maxMark}
-						</h4>
-						
-						<div class="list-group col sortable-on" data-option-uid="${optionDto.uid}" id="answer-group${optionDto.uid}"></div>	
-						
-						<fmt:message key="label.answer.alternatives" />: 
-						${fn:replace(optionDto.name, newLineChar, ', ')}
-					</div>
-					
-					<c:if test="${status.count % 3 == 0 || status.last}">
-						</div>
-					</c:if>
-				</c:forEach>
+				<%@ include file="vsaQuestionAllocate.jsp"%>
 			</c:if>
 			
 			<div id="bottom-buttons">
Index: lams_tool_assessment/web/pages/monitoring/parts/vsaQuestionAllocate.jsp
===================================================================
diff -u
--- lams_tool_assessment/web/pages/monitoring/parts/vsaQuestionAllocate.jsp	(revision 0)
+++ lams_tool_assessment/web/pages/monitoring/parts/vsaQuestionAllocate.jsp	(revision ea355e79020de11b00f2acf713ed79ec603d7679)
@@ -0,0 +1,139 @@
+<% pageContext.setAttribute("newLineChar", "\r\n"); %>
+
+<div class="panel panel-default">
+	<div class="panel-heading">
+		<div class="panel-title">
+			<c:out value="${questionDto.title}" escapeXml="true"/>
+		</div>
+	</div>
+		
+	<div class="panel-body">
+		<lams:errors/>
+         
+        <c:if test="${not empty questionDto.question}">
+	        <div class="question-description">
+	        	<c:out value="${questionDto.question}" escapeXml="false"/>
+			</div>
+		</c:if>
+		
+        <!--allocate responses-->
+		<div class="row">
+			<div class="col-sm-4 text-center">
+				<c:set var="option0" value="${questionDto.optionDtos.toArray()[0]}"/>
+				<h4>
+					<c:choose>
+						<c:when test="${questionSummary.tbl && option0.maxMark == 1}">
+							<i class="fa fa-check fa-lg text-success"></i> <fmt:message key="label.correct" />
+						</c:when>
+						<c:when test="${questionSummary.tbl && option0.maxMark == 0}">
+							<i class="fa fa-times fa-lg text-danger"></i>	<fmt:message key="label.incorrect" />
+						</c:when>
+						<c:otherwise>
+							<fmt:message key="label.authoring.basic.option.grade"/>: ${option0.maxMark}
+						</c:otherwise>
+					</c:choose>
+				</h4>
+				
+				<div class="list-group col sortable-on ${questionSummary.tbl ? 'tbl-correct-list' : ''}" 
+					 data-question-uid="${questionDto.uid}"
+					 data-option-uid="${option0.uid}" id="answer-group${option0.uid}"></div>
+				
+				<c:if test="${not empty option0.name}">
+					<fmt:message key="label.answer.alternatives" />:
+					<div class="answer-alternatives" id="answer-alternatives${option0.uid}"
+						 data-question-uid="${questionDto.uid}"
+						 data-option-uid="${option0.uid}">
+						<c:forEach var="answer" items="${fn:split(option0.name, newLineChar)}">
+							<button type="button" class="btn btn-xs ${questionSummary.tbl ? 'btn-success' : 'btn-primary'}"
+									title='<fmt:message key="label.vsa.deallocate.button.tip" />'>${answer}</button>
+						</c:forEach>
+					</div>
+				</c:if>
+			</div>
+			
+			<div class="col-sm-4 text-center">
+            	<h4>
+            		<fmt:message key="label.answer.queue" />
+            		<span id="answer-queue-size${questionDto.uid}"></span>
+            	</h4>
+           		
+           		<div class="list-group col sortable-on answer-queue"
+           			 data-question-uid="${questionDto.uid}" 
+           			 data-option-uid="-1"
+           			 id="answer-queue${questionDto.uid}">
+            		<c:forEach var="questionResult" items="${questionSummary.notAllocatedQuestionResults}">
+            			<div class="list-group-item">
+            				<lams:Portrait userId="${questionResult.assessmentResult.user.userId}"/>
+            				<span class="answer-text">${questionResult.answer}</span>
+            			</div>
+            		</c:forEach>
+           		</div>		
+			</div>
+			
+			<div class="col-sm-4 text-center">
+				<c:set var="option1" value="${questionDto.optionDtos.toArray()[1]}"/>
+				<h4>
+					<c:choose>
+						<c:when test="${questionSummary.tbl && option1.maxMark == 1}">
+							<i class="fa fa-check fa-lg text-success"></i> <fmt:message key="label.correct" />
+						</c:when>
+						<c:when test="${questionSummary.tbl && option1.maxMark == 0}">
+							<i class="fa fa-times fa-lg text-danger"></i>	<fmt:message key="label.incorrect" />
+						</c:when>
+						<c:otherwise>
+							<fmt:message key="label.authoring.basic.option.grade"/>: ${option1.maxMark}
+						</c:otherwise>
+					</c:choose>
+				</h4>
+				
+				<div class="list-group col sortable-on ${questionSummary.tbl ? 'tbl-incorrect-list' : ''}"
+					 data-question-uid="${questionDto.uid}"
+					 data-option-uid="${option1.uid}" id="answer-group${option1.uid}"></div>
+					 	
+				<c:if test="${not empty option1.name}">
+					<fmt:message key="label.answer.alternatives" />:
+					<div class="answer-alternatives" id="answer-alternatives${option0.uid}"
+						 data-question-uid="${questionDto.uid}"
+						 data-option-uid="${option1.uid}">
+						<c:forEach var="answer" items="${fn:split(option1.name, newLineChar)}">
+							<button type="button" class="btn btn-xs ${questionSummary.tbl ? 'btn-danger' : 'btn-primary'}"
+									title='<fmt:message key="label.vsa.deallocate.button.tip" />'>${answer}</button>
+						</c:forEach>
+					</div>
+				</c:if>
+			</div>
+		</div>
+		
+		<c:forEach var="optionDto" items="${questionDto.optionDtos}" begin="2" varStatus="status">
+		
+			<c:if test="${status.count % 3 == 1}">
+				<div class="row">
+			</c:if>
+		
+			<div class="col-sm-4 text-center">
+				<h4>
+					<fmt:message key="label.authoring.basic.option.grade"/>: ${optionDto.maxMark}
+				</h4>
+				
+				<div class="list-group col sortable-on" data-question-uid="${questionDto.uid}"
+					 data-option-uid="${optionDto.uid}" id="answer-group${optionDto.uid}"></div>
+					 	
+				<c:if test="${not empty optionDto.name}">
+					<fmt:message key="label.answer.alternatives" />:
+					<div class="answer-alternatives" id="answer-alternatives${optionDto.uid}"
+						 data-question-uid="${questionDto.uid}"
+						 data-option-uid="${optionDto.uid}">
+						<c:forEach var="answer" items="${fn:split(optionDto.name, newLineChar)}">
+							<button type="button" class="btn btn-xs btn-primary"
+									title='<fmt:message key="label.vsa.deallocate.button.tip" />'>${answer}</button>
+						</c:forEach>
+					</div>
+				</c:if>
+			</div>
+			
+			<c:if test="${status.count % 3 == 0 || status.last}">
+				</div>
+			</c:if>
+		</c:forEach>
+	</div>
+</div>
\ No newline at end of file
Index: lams_tool_assessment/web/pages/monitoring/vsaAllocate.jsp
===================================================================
diff -u -r50355d50e8589a7db85b359d72e4335a2e3f0c17 -rea355e79020de11b00f2acf713ed79ec603d7679
--- lams_tool_assessment/web/pages/monitoring/vsaAllocate.jsp	(.../vsaAllocate.jsp)	(revision 50355d50e8589a7db85b359d72e4335a2e3f0c17)
+++ lams_tool_assessment/web/pages/monitoring/vsaAllocate.jsp	(.../vsaAllocate.jsp)	(revision ea355e79020de11b00f2acf713ed79ec603d7679)
@@ -1,165 +1,42 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
-<% pageContext.setAttribute("newLineChar", "\r\n"); %>
 
 <lams:html>
 	<lams:head>
 	
 		<%@ include file="/common/header.jsp"%>
 		
 		<title><fmt:message key="label.vsa.allocate.button" /></title>
+		
+		<link href="<lams:WebAppURL />includes/css/vsaAllocate.css" rel="stylesheet" type="text/css">
 		<style>
 			body {
 				padding: 10px;
 			}
 			
-			.sortable-on {
-				border: 3px solid #286090;
-				border-radius: 10px;
-    			height: 200px;
-    			padding: 10px;
-    			overflow-y: auto;
-			}
-			
-			.sortable-on .portrait-generic-sm {
-				margin-right: 5px;
-			}
-			
-			.sortable-on .portrait-anonymous {
-				color: #ddd;
-			}
-			
-			.tbl-correct-list {
-				border: 3px solid #3c763d;
-				background-color: #3c763d10;
-			}
-			
-			.tbl-incorrect-list {
-				border: 3px solid #a94442;
-				background-color: #a9444210;
-			}
-			
-			.answer-queue {
-				border: 2px solid #ddd;
-			}
-			
-			.answer-alternatives {
-				text-align: left;
-				margin-top: 5px;
-			}
-			.answer-alternatives button {
-				margin-bottom: 2px;
-			}
-			
-			.filtered {
-			    background-color: lightgrey;
-			}
-			
-			.list-group-item {
-				cursor: pointer;
-			}
-			
 			#page-description, .question-description {
 				margin-bottom: 20px;
 			}
 		</style>
 		
 	 	<script type="text/javascript" src="${lams}includes/javascript/portrait.js"></script>
 	 	<script type="text/javascript" src="${lams}includes/javascript/Sortable.js"></script>
-
   	    <script>
-	  	$(document).ready(function(){
-		    //init options sorting feature
-			$('.sortable-on').each(function() {
-				let questionUid = $(this).data('question-uid');
-				updateAnswerQueueSize(questionUid);
-				
-			    new Sortable(this, {
-			    	group: 'question' + questionUid,
-				    animation: 150,
-				  	filter: '.filtered', // 'filtered' class is not draggable
-				    //ghostClass: 'sortable-placeholder',
-				    //direction: 'vertical',
-					onStart: function (evt) {
-						//stop answers' hover effect, once element dragging started
-						//$("#option-table").removeClass("hover-active");
-					},
-					onEnd: function (evt) {
-				        $.ajax({
-				            url: '<c:url value="/monitoring/allocateUserAnswer.do"/>',
-				            data: {
-				            	sessionMapID: "${sessionMapID}",
-				            	questionUid: questionUid,
-				            	targetOptionUid: $(evt.to).data("option-uid"),
-				            	previousOptionUid: $(evt.from).data("option-uid"),
-				            	answer: $('.answer-text', evt.item).text(),
-								"<csrf:tokenname/>":"<csrf:tokenvalue/>"
-						    },
-				            method: 'post',
-				          	dataType: "json",
-	  				        success: function (data) {
-	  				        	updateAnswerQueueSize(questionUid);
-	  				        	
-	  				            if (data.isAnswerDuplicated) {
-		  				        	alert("<fmt:message key="label.someone.allocated.this.answer" />");
-		  				        	$(evt.item).appendTo("#answer-group" + data.optionUid);
-		  				        	$(evt.item).addClass("filtered");
-			  				    }
-	  				        }
-				       	});
-					}
-				});
-			});
-
-			$('.answer-alternatives button').click(function(){
-				var button = $(this),
-					answer = button.text(),
-					container = button.closest('.answer-alternatives'),
-					questionUid = container.data('question-uid'),
-					optionUid = container.data('option-uid');
-				
-		        $.ajax({
-		            url: '<c:url value="/monitoring/allocateUserAnswer.do"/>',
-		            data: {
-		            	sessionMapID: "${sessionMapID}",
-		            	questionUid: questionUid,
-		            	targetOptionUid: -1,
-		            	previousOptionUid: optionUid,
-		            	answer: answer,
-						"<csrf:tokenname/>":"<csrf:tokenvalue/>"
-				    },
-		            method: 'post',
-		          	dataType: "json",
-				        success: function (data) {
-				            if (data.answerFoundInResults) {
-						        $('<div class="list-group-item" />')
-						        	.append($('<div class="portrait-anonymous portrait-generic-sm" />'))
-						        	.append($('<span class="answer-text"/>').text(answer))
-						        	.appendTo('#answer-queue' + questionUid);
-
-						        updateAnswerQueueSize(questionUid);
-		  				    }
-
-		  				   	button.remove();
-				    }
-		       	});
-			});
-	  	});
-
-	  	function updateAnswerQueueSize(questionUid) {
-	  		 var answerQueueLength = $('#answer-queue' + questionUid + ' .list-group-item').length;
-			 $('#answer-queue-size' + questionUid).text(answerQueueLength ? ' (' + answerQueueLength + ')' : '');
-		}
-	  	
-   		function refreshPage() { 
-       		location.reload();
-   		}
-
-   		function closePage() { 
-   			self.parent.tb_remove();
-   		}
+			var VS_ANSWER_ALLOCATED_ALERT = "<fmt:message key="label.someone.allocated.this.answer" />",
+				WEB_APP_URL = "<lams:WebAppURL />",
+				csrfTokenName = "<csrf:tokenname/>",
+				csrfTokenValue = "<csrf:tokenvalue/>";
+  	    
+	   		function refreshPage() { 
+	       		location.reload();
+	   		}
+	
+	   		function closePage() { 
+	   			self.parent.tb_remove();
+	   		}
   		</script>
+  		<script src="<lams:WebAppURL />includes/javascript/vsaAllocate.js"></script>
 	</lams:head>
 	
 <body>
@@ -177,144 +54,7 @@
 	
 	<c:forEach var="questionSummary" items="${questionSummaries}">
 		<c:set var="questionDto" value="${questionSummary.questionDto}"/>
-		
-		<div class="panel panel-default">
-			<div class="panel-heading">
-				<div class="panel-title">
-					<c:out value="${questionDto.title}" escapeXml="true"/>
-				</div>
-			</div>
-				
-			<div class="panel-body">
-				<lams:errors/>
-		         
-		        <c:if test="${not empty questionDto.question}">
-			        <div class="question-description">
-			        	<c:out value="${questionDto.question}" escapeXml="false"/>
-					</div>
-				</c:if>
-				
-		        <!--allocate responses-->
-				<div class="row">
-					<div class="col-sm-4 text-center">
-						<c:set var="option0" value="${questionDto.optionDtos.toArray()[0]}"/>
-						<h4>
-							<c:choose>
-								<c:when test="${questionSummary.tbl && option0.maxMark == 1}">
-									<i class="fa fa-check fa-lg text-success"></i> <fmt:message key="label.correct" />
-								</c:when>
-								<c:when test="${questionSummary.tbl && option0.maxMark == 0}">
-									<i class="fa fa-times fa-lg text-danger"></i>	<fmt:message key="label.incorrect" />
-								</c:when>
-								<c:otherwise>
-									<fmt:message key="label.authoring.basic.option.grade"/>: ${option0.maxMark}
-								</c:otherwise>
-							</c:choose>
-						</h4>
-						
-						<div class="list-group col sortable-on ${questionSummary.tbl ? 'tbl-correct-list' : ''}" 
-							 data-question-uid="${questionDto.uid}"
-							 data-option-uid="${option0.uid}" id="answer-group${option0.uid}"></div>
-						
-						<c:if test="${not empty option0.name}">
-							<fmt:message key="label.answer.alternatives" />:
-							<div class="answer-alternatives" id="answer-alternatives${option0.uid}"
-								 data-question-uid="${questionDto.uid}"
-								 data-option-uid="${option0.uid}">
-								<c:forEach var="answer" items="${fn:split(option0.name, newLineChar)}">
-									<button type="button" class="btn btn-xs ${questionSummary.tbl ? 'btn-success' : 'btn-primary'}"
-											title='<fmt:message key="label.vsa.deallocate.button.tip" />'>${answer}</button>
-								</c:forEach>
-							</div>
-						</c:if>
-					</div>
-					
-					<div class="col-sm-4 text-center">
-		            	<h4>
-		            		<fmt:message key="label.answer.queue" />
-		            		<span id="answer-queue-size${questionDto.uid}"></span>
-		            	</h4>
-		           		
-		           		<div class="list-group col sortable-on answer-queue"
-		           			 data-question-uid="${questionDto.uid}" 
-		           			 data-option-uid="-1"
-		           			 id="answer-queue${questionDto.uid}">
-		            		<c:forEach var="questionResult" items="${questionSummary.notAllocatedQuestionResults}">
-		            			<div class="list-group-item">
-		            				<lams:Portrait userId="${questionResult.assessmentResult.user.userId}"/>
-		            				<span class="answer-text">${questionResult.answer}</span>
-		            			</div>
-		            		</c:forEach>
-		           		</div>		
-					</div>
-					
-					<div class="col-sm-4 text-center">
-						<c:set var="option1" value="${questionDto.optionDtos.toArray()[1]}"/>
-						<h4>
-							<c:choose>
-								<c:when test="${questionSummary.tbl && option1.maxMark == 1}">
-									<i class="fa fa-check fa-lg text-success"></i> <fmt:message key="label.correct" />
-								</c:when>
-								<c:when test="${questionSummary.tbl && option1.maxMark == 0}">
-									<i class="fa fa-times fa-lg text-danger"></i>	<fmt:message key="label.incorrect" />
-								</c:when>
-								<c:otherwise>
-									<fmt:message key="label.authoring.basic.option.grade"/>: ${option1.maxMark}
-								</c:otherwise>
-							</c:choose>
-						</h4>
-						
-						<div class="list-group col sortable-on ${questionSummary.tbl ? 'tbl-incorrect-list' : ''}"
-							 data-question-uid="${questionDto.uid}"
-							 data-option-uid="${option1.uid}" id="answer-group${option1.uid}"></div>
-							 	
-						<c:if test="${not empty option1.name}">
-							<fmt:message key="label.answer.alternatives" />:
-							<div class="answer-alternatives" id="answer-alternatives${option0.uid}"
-								 data-question-uid="${questionDto.uid}"
-								 data-option-uid="${option1.uid}">
-								<c:forEach var="answer" items="${fn:split(option1.name, newLineChar)}">
-									<button type="button" class="btn btn-xs ${questionSummary.tbl ? 'btn-danger' : 'btn-primary'}"
-											title='<fmt:message key="label.vsa.deallocate.button.tip" />'>${answer}</button>
-								</c:forEach>
-							</div>
-						</c:if>
-					</div>
-				</div>
-				
-				<c:forEach var="optionDto" items="${questionDto.optionDtos}" begin="2" varStatus="status">
-				
-					<c:if test="${status.count % 3 == 1}">
-						<div class="row">
-					</c:if>
-				
-					<div class="col-sm-4 text-center">
-						<h4>
-							<fmt:message key="label.authoring.basic.option.grade"/>: ${optionDto.maxMark}
-						</h4>
-						
-						<div class="list-group col sortable-on" data-question-uid="${questionDto.uid}"
-							 data-option-uid="${optionDto.uid}" id="answer-group${optionDto.uid}"></div>
-							 	
-						<c:if test="${not empty optionDto.name}">
-							<fmt:message key="label.answer.alternatives" />:
-							<div class="answer-alternatives" id="answer-alternatives${optionDto.uid}"
-								 data-question-uid="${questionDto.uid}"
-								 data-option-uid="${optionDto.uid}">
-								<c:forEach var="answer" items="${fn:split(optionDto.name, newLineChar)}">
-									<button type="button" class="btn btn-xs btn-primary"
-											title='<fmt:message key="label.vsa.deallocate.button.tip" />'>${answer}</button>
-								</c:forEach>
-							</div>
-						</c:if>
-					</div>
-					
-					<c:if test="${status.count % 3 == 0 || status.last}">
-						</div>
-					</c:if>
-				</c:forEach>
-			</div>
-		</div>
+		<%@ include file="parts/vsaQuestionAllocate.jsp"%>
 	</c:forEach>		
 	
 	<div id="footer">