Index: lams_tool_laqa/conf/language/lams/ApplicationResources.properties
===================================================================
diff -u -r70a326811aab339193f6031102dfde367b21cc5c -r2f6e8f9ecfee5b8078479721374d0cbeee3d699d
--- lams_tool_laqa/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision 70a326811aab339193f6031102dfde367b21cc5c)
+++ lams_tool_laqa/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision 2f6e8f9ecfee5b8078479721374d0cbeee3d699d)
@@ -146,7 +146,7 @@
 textsearch.questions = Search in these questions:
 label.allowRichEditor = Allow rich text editor
 label.required.desc = Answer required?
-label.required = (Required)
+label.required = Required
 error.required = You must answer Question {0}.
 label.learning.number.of.votes = {0} / {1} votes
 label.authoring.allow.rate.answers = Allow learners to rate each other's answers
Index: lams_tool_laqa/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u
--- lams_tool_laqa/web/WEB-INF/tags/Errors5.tag	(revision 0)
+++ lams_tool_laqa/web/WEB-INF/tags/Errors5.tag	(revision 2f6e8f9ecfee5b8078479721374d0cbeee3d699d)
@@ -0,0 +1,48 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ attribute name="path" required="false" rtexprvalue="true"%>
+
+<%-- To show the GLOBAL messages (default case) use no parameters --%>
+<%-- To show the all messages, ignoring their keys (e.g. Change Password) use path="*" --%>
+<%-- To show the messages for a particular item use path="itemName" --%>
+
+<c:choose>
+
+<%-- Show Messages for GLOBAL. Usual alert box --%>
+<c:when test="${empty path}">
+   	<c:set var="apath" value="GLOBAL" />
+	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
+   	<lams:Alert5 id="error" type="danger" close="false"> 
+       <c:forEach var="error" items="${errorMap[apath]}"> 
+       	<c:out value="${error}" /><br /> 
+       </c:forEach> 
+	</lams:Alert5> 
+	</c:if>
+</c:when>
+
+<%-- Show All Messages --%>
+<c:when test="${path eq '*'}">
+	<c:if test="${not empty errorMap}"> 
+   	<lams:Alert5 id="error" type="danger" close="false"> 
+       <c:forEach var="error" items="${errorMap}"> 
+       <c:forEach var="erorString" items="${error.value}"> 
+       	<c:out value="${erorString}" /><br /> 
+       </c:forEach> 
+       </c:forEach> 
+	</lams:Alert5> 
+	</c:if>
+</c:when>
+
+<%-- Show messages for a particular key --%>
+<c:otherwise>
+	<c:if test="${not empty errorMap and not empty errorMap[path]}">
+		<span class="text-danger">
+		<c:forEach var="error" items="${errorMap[path]}"> 
+	       	<c:out value="${error}" /><br /> 
+        </c:forEach> 
+        </span>
+    </c:if>
+</c:otherwise>
+
+</c:choose>
Index: lams_tool_laqa/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u
--- lams_tool_laqa/web/WEB-INF/tags/PageLearner.tag	(revision 0)
+++ lams_tool_laqa/web/WEB-INF/tags/PageLearner.tag	(revision 2f6e8f9ecfee5b8078479721374d0cbeee3d699d)
@@ -0,0 +1,150 @@
+<%@ tag body-content="scriptless" %>
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+
+<%@ taglib uri="tags-core" prefix="c" %>
+<%@ taglib uri="tags-fmt" prefix="fmt" %>
+<%@ taglib uri="tags-lams" prefix="lams" %>
+
+<c:set var="lams"><lams:LAMSURL /></c:set>
+<c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
+<c:choose>
+    <c:when test="${not empty pageLearnerPortraitUuid}">
+        <c:set var="pageLearnerPortraitSrc">${lams}download/?uuid=${pageLearnerPortraitUuid}&preferDownload=false&version=4</c:set>
+    </c:when>
+    <c:otherwise>
+        <c:set var="pageLearnerPortraitSrc">${lams}images/css/john-doe-portrait.jpg</c:set>
+    </c:otherwise>
+</c:choose>
+<c:set var="pageLearnerFirstName"><lams:user property="firstName" /></c:set>
+<c:set var="pageLearnerLastName"><lams:user property="lastName" /></c:set>
+
+<lams:html>
+    <lams:head>
+        <title>LAMS ::
+            <c:choose>
+                <c:when test="${empty title}">
+                    <fmt:message key="activity.title"/>
+                </c:when>
+                <c:otherwise>
+                    <c:out value="${title}" />
+                </c:otherwise>
+            </c:choose>
+        </title>
+
+        <link rel="icon" type="image/x-icon" href="<lams:LAMSURL/>images/svg/lamsv5_logo.svg">
+        <link rel="stylesheet" href="<lams:LAMSURL/>css/bootstrap5.custom.css">
+        <link rel="stylesheet" href="<lams:LAMSURL/>includes/font-awesome6/css/all.css">
+        <link rel="stylesheet" href="<lams:LAMSURL/>css/components.css">
+        <link rel="stylesheet" href="<lams:LAMSURL/>learning/css/components-learner.css">
+
+        <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
+        <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
+        <script src="<lams:LAMSURL/>includes/javascript/popper.min.js"></script>
+        <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
+        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+        <lams:JSImport src="learning/includes/javascript/learnerPage.js" />
+        <lams:JSImport src="includes/javascript/dialog5.js" />
+
+        <script>
+            const LAMS_URL = '<lams:LAMSURL/>',
+                decoderDiv = $('<div />');
+
+            $(document).ready(function (){
+                initLearnerPage(${toolSessionID});
+            });
+        </script>
+    </lams:head>
+
+    <body class="component">
+    <div class="component-page-wrapper">
+        <nav inert class="component-sidebar" role="navigation dialog"
+             aria-label="Side menu" aria-expanded="false"  aria-modal="true">
+            <button class="sidebar-toggle-button no-decoration" aria-labelledby="progress-bar-title">
+                <i class="fa-solid fa-xmark"></i>
+            </button>
+            <a href="/" title="Return to course page" class="lams-logo">
+                <img src="<lams:LAMSURL/>images/svg/lamsv5_logo.svg" alt="LAMS logo" aria-hidden="false"/>
+            </a>
+
+            <div id="support-bar" class="d-none pb-4 w-100">
+                <span class="sidebar-title"><i class="fa-solid fa-toolbox sidebar-title-icon"></i>&nbsp;<span tabindex="0" id="support-bar-title">Support activities</span></span>
+                <ul id="support-bar-items" class="progress-bar-items" role="menu">
+                </ul>
+            </div>
+
+            <span class="sidebar-title"><i class="fa-solid fa-fw fa-bars-progress sidebar-title-icon"></i>&nbsp;<span tabindex="0" id="progress-bar-title">Progress bar</span></span>
+            <ul id="progress-bar-items" class="progress-bar-items w-100" role="menu">
+            </ul>
+        </nav>
+
+        <div class="component-page-content">
+            <a href="#component-main-content" class="visually-hidden-focusable p-2">Skip to main content</a>
+
+            <header id="header" class="d-flex justify-content-between" role="banner">
+                <div class="d-flex">
+                    <button class="sidebar-toggle-button no-decoration" accesskey="p" id="hamb"
+                            data-closed-class="fa-bars" data-opened-class="fa-bars-staggered"
+                            aria-labelledby="progress-bar-title" aria-expanded="false">
+                        <i class="fa-solid fa-fw fa-bars" aria-hidden="true"></i>
+                    </button>
+                    <h1 id="lesson-name"></h1>
+                </div>
+                <div class="top-menu">
+                    <div id="progress-bar-widget" title="Your lesson completion" class="d-none d-sm-none d-md-block">
+                        <div class="row">
+                            <div class="col-6">
+                                Progress
+                            </div>
+                            <div class="col-6 text-end" id="progress-bar-widget-value">
+                            </div>
+                        </div>
+                        <div class="progress mt-1 mb-2">
+                            <div class="progress-bar bg-success" role="progressbar" aria-label="Progress bar widget"
+                                 aria-valuemin="0" aria-valuemax="100"></div>
+                        </div>
+                    </div>
+                    <button id="profile-picture" class="no-decoration px-3 py-1" type="button"
+                            onclick="javascript:showMyPortraitDialog()">
+                        <img class="portrait-sm portrait-round" src="${pageLearnerPortraitSrc}" aria-label="<c:out value="${pageLearnerFirstName} ${pageLearnerLastName}" escapeXml="true"/> profile picture" alt="User profile picture">
+                    </button>
+                </div>
+            </header>
+
+            <main class="p-3" id="component-main-content" tabindex="-1">
+                <c:if test="${not empty title}">
+                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                </c:if>
+
+                <jsp:doBody/>
+
+            </main>
+        </div>
+    </div>
+
+    <div id="confirmationDialog" class="modal dialogContainer fade" tabindex="-1" role="dialog">
+        <div class="modal-dialog  modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-body">
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" id="confirmationDialogCancelButton">Cancel</button>
+                    <button type="button" class="btn btn-primary" id="confirmationDialogConfirmButton">Confirm</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="toast-container position-fixed top-0 start-50 translate-middle-x p-3" id="toast-container">
+    </div>
+
+    <div id="toast-template" class="toast align-items-center bg-white" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="d-flex">
+            <div class="toast-body"></div>
+            <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+    </div>
+
+    </body>
+
+</lams:html>
\ No newline at end of file
Index: lams_tool_laqa/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r6a7abdf7fa2c5646e736550302dcc376397cd645 -r2f6e8f9ecfee5b8078479721374d0cbeee3d699d
--- lams_tool_laqa/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 6a7abdf7fa2c5646e736550302dcc376397cd645)
+++ lams_tool_laqa/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 2f6e8f9ecfee5b8078479721374d0cbeee3d699d)
@@ -309,6 +309,10 @@
 		<path>/WEB-INF/tags/Page.tag</path>
    	</tag-file>
    	<tag-file>
+	    <name>PageLearner</name>
+		<path>/WEB-INF/tags/PageLearner.tag</path>
+   	</tag-file> 
+   	<tag-file>
 	    <name>TSTable</name>
 		<path>/WEB-INF/tags/TSTable.tag</path>
    	</tag-file>    
@@ -355,7 +359,11 @@
    	<tag-file>
 	    <name>Widget</name>
 		<path>/WEB-INF/tags/Widget.tag</path>
-   	</tag-file>   
+   	</tag-file>
+    <tag-file>
+	    <name>errors5</name>
+		<path>/WEB-INF/tags/Errors5.tag</path>
+   	</tag-file>        
    	<tag-file>
 	    <name>Page5</name>
 		<path>/WEB-INF/tags/Page5.tag</path>
Index: lams_tool_laqa/web/learning/AnswersContent.jsp
===================================================================
diff -u -reb06bfe26264fed6597191965bc0631a9431a29e -r2f6e8f9ecfee5b8078479721374d0cbeee3d699d
--- lams_tool_laqa/web/learning/AnswersContent.jsp	(.../AnswersContent.jsp)	(revision eb06bfe26264fed6597191965bc0631a9431a29e)
+++ lams_tool_laqa/web/learning/AnswersContent.jsp	(.../AnswersContent.jsp)	(revision 2f6e8f9ecfee5b8078479721374d0cbeee3d699d)
@@ -10,11 +10,10 @@
 <c:set var="isLeadershipEnabled" value="${sessionMap.content.useSelectLeaderToolOuput}" scope="request" />
 <c:set var="hasEditRight" value="${!isLeadershipEnabled || isLeadershipEnabled && isUserLeader}" scope="request" />
 <c:set var="localeLanguage"><lams:user property="localeLanguage" /></c:set>
+<fmt:message key="activity.title" var="title"/>
 
-<lams:html>
-<lams:head>
-	<title><fmt:message key="activity.title" /></title>
-	<lams:css />
+<lams:PageLearner title="${generalLearnerFlowDTO.activityTitle}" toolSessionID="${generalLearnerFlowDTO.toolSessionID}" >
+
 	<style media="screen,projection" type="text/css">
 		
 		div.growlUI h1, div.growlUI h2 {
@@ -25,276 +24,276 @@
 		}
 	</style>
 
-	<script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/jquery.form.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/jquery.blockUI.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/jquery.timeago.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/timeagoi18n/jquery.timeago.${fn:toLowerCase(localeLanguage)}.js"></script>
-	<script type="text/JavaScript">
-		var minWordsLimitLabel = '<fmt:message key="label.minimum.number.words" ><fmt:param>{0}</fmt:param></fmt:message>';
-	
-		function submitMethod(actionMethod) {
-			
-			//validate answers
-			var submit = true;
-			if (actionMethod != 'getPreviousQuestion') {
-				
-				//check for min words limit 
-				jQuery(".min-words-limit-enabled").each(function() {
-					
-					var questionId = (${generalLearnerFlowDTO.questionListingMode == 'questionListingModeSequential'}) ? "" : $(this).data("sequence-id");
-					var isCkeditor = $(this).data("is-ckeditor");
-					
-					var value;
-					var instance;
-					if (isCkeditor) {
-						instance = CKEDITOR.instances["answer" + questionId];
-					    value = CKEDITOR.instances["answer" + questionId].getData();
-					    
-					} else {
-						instance = $("#answer"+ questionId);
-						value =  $("#answer"+ questionId).val();
-					}
-					
-					var numberEnteredWords = getNumberOfWords(value, isCkeditor); 
-					
-					var minWordsLimit = $(this).data("min-words-limit");
-					if (numberEnteredWords < minWordsLimit) {
-						var minWordsLimitLabelStr = minWordsLimitLabel.replace("{0}", ": " + minWordsLimit);
-						alert("<fmt:message key="label.question" /> "+ questionId +". " +  minWordsLimitLabelStr);
-						instance.focus();
-						return submit = false;
-					}
-				});
+	<div id="instructions" class="instructions" aria-label="<fmt:message key='label.authoring.instructions'/>">
+		<c:out value="${generalLearnerFlowDTO.activityInstructions}" escapeXml="false" />
+	</div>
+	<hr class="mx-5 text-primary">		
 
-				//check for blank answers
-				if (submit) {
-					jQuery(".text-area").each(function() {
-						if (jQuery.trim($(this).val()) == "") {
-							if (confirm("<fmt:message key="warning.empty.answers" />")) {
-								doSubmit(actionMethod);
-								return false;
-							} else {
-								this.focus();
-								return submit = false;
-							}
-						}
-					});
-				}
-			}
-			
-			if (submit) {
-				doSubmit(actionMethod);
-			}
-		}
-		
-		function doSubmit(actionMethod) {
-			$('.btn').prop('disabled', true);
-			document.forms.qaLearningForm.action=actionMethod+".do"; 
-			document.forms.qaLearningForm.submit();
-		}
 
-		<c:if test="${!hasEditRight && mode != 'teacher'}">
-			setInterval("checkLeaderProgress();",45000);// Auto-Refresh every 1 minute for non-leaders
-		</c:if>
-		
-		function checkLeaderProgress() {
-	        $.ajax({
-	        	async: false,
-	            url: '<c:url value="checkLeaderProgress.do"/>',
-	            data: 'toolSessionID=' + $("#tool-session-id").val(),
-	            dataType: 'json',
-	            type: 'post',
-	            success: function (json) {
-	            	if (json.isLeaderResponseFinalized) {
-	            		location.reload();
-	            	}
-	            }
-	       	});
-		}
-		
-		//autoSaveAnswers if hasEditRight
-		if (${hasEditRight}) {
-				
-			var interval = "30000"; // = 30 seconds
-			window.setInterval(learnerAutosave, interval);
-			
-			function learnerAutosave(isCommand){
-                // isCommand means that the autosave was triggered by force complete or another command websocket message
-			    // in this case do not check multiple tabs open, just autosave
-			    if (!isCommand) {
-				  let shouldAutosave = preventLearnerAutosaveFromMultipleTabs(interval);
-				  if (!shouldAutosave) {
-					return;
-				  }
-			    }
-			    
-				//fire onchange event for textareas/ckeditors
-				if (${generalLearnerFlowDTO.allowRichEditor}) {
-				    for ( instance in CKEDITOR.instances ) {
-				        CKEDITOR.instances[instance].updateElement();
-				    }
-				} else {
-					$("textarea[name$=__textarea]").change();
-				}
-				
-				//ajax form submit
-				$('#qaLearningForm').ajaxSubmit({
-					url: '<c:url value="autoSaveAnswers.do?date=" />' + new Date().getTime(),
-		            success: function() {
-		               	$.growlUI('<i class="fa fa-lg fa-floppy-o"></i> <fmt:message key="label.learning.draft.autosaved" />');
-		            }
-				});
-			}
-		}
+	<div class="container-lg">
+		<!-- form needs to be outside page so that the form bean can be picked up by Page tag. -->
+		<form:form action="${generalLearnerFlowDTO.questionListingMode == 'questionListingModeSequential' ? 'getNextQuestion.do' : 'submitAnswersContent.do'}"
+		method="POST" target="_self" id="qaLearningForm" modelAttribute="qaLearningForm">
 
-		//min words counter
-		$(document).ready(function() {
-			
-			//character count fuction in case ckeditor is OFF
-			function counter(event) {
-				var questionId = event.data.questionId;
-				var minWordsLimit = event.data.minWordsLimit;
-				var value = $("#answer"+ questionId).val();
-				
-				var numberEnteredWords = getNumberOfWords(value, false);
-				var numberRequiredWords = (minWordsLimit > numberEnteredWords) ? minWordsLimit - numberEnteredWords : 0;
-				$('#words-required-' + questionId).html(numberRequiredWords);
-			};
+			<!-- Advanced settings and notices -->
 
-			//character count fuction in case ckeditor is ON
-			function ckeditorCounter(event) {
-				var questionId = event.listenerData.questionId;
-				var minWordsLimit = event.listenerData.minWordsLimit;
-				var value = event.editor.getData();
-				
-				var numberEnteredWords = getNumberOfWords(value, true);
-				var numberRequiredWords = (minWordsLimit > numberEnteredWords) ? minWordsLimit - numberEnteredWords : 0;
-				$('#words-required-' + questionId).html(numberRequiredWords);
-			};
+			<c:if test="${generalLearnerFlowDTO.noReeditAllowed}">
+				<lams:Alert type="danger" id="noRedosAllowed" close="false">
+					<fmt:message key="label.noredo.enabled" />
+				</lams:Alert>
+			</c:if>
 
-			//check for min words limit 
-			jQuery(".min-words-limit-enabled").each(function() {
+			<c:if test="${not empty sessionMap.submissionDeadline}">
+				<lams:Alert type="danger" id="submission-deadline" close="false">
+					<fmt:message key="authoring.info.teacher.set.restriction">
+						<fmt:param>
+							<lams:Date value="${sessionMap.submissionDeadline}" />
+						</fmt:param>
+					</fmt:message>
+				</lams:Alert>
+			</c:if>
 
-				var isCkeditor = $(this).data("is-ckeditor");
-				var questionId = (${generalLearnerFlowDTO.questionListingMode == 'questionListingModeSequential'}) ? "" : $(this).data("sequence-id");
-				var minWordsLimit = $(this).data("min-words-limit");
-				
-				//assign function
-				if (isCkeditor) {
-					var ckeditor = CKEDITOR.instances["answer" + questionId];
-					
-				    ckeditor.on('change', ckeditorCounter, null, {questionId: questionId, minWordsLimit: minWordsLimit} );
-					//count characters initially
-				    ckeditor.on('instanceReady', ckeditorCounter, null, {questionId: questionId, minWordsLimit: minWordsLimit});
-				      
-				} else {
-					$("#answer" + questionId)
-						.on('change keydown keypress keyup paste', {questionId: questionId, minWordsLimit: minWordsLimit}, counter)
-						.trigger( "change", {questionId: questionId, minWordsLimit: minWordsLimit} );
-				}
-				
-			});
-
-			<%-- Connect to command websocket only if it is learner UI --%>
-			<c:if test="${isLeadershipEnabled and mode == 'learner'}">
-				// command websocket stuff for refreshing
-				// trigger is an unique ID of page and action that command websocket code in Page.tag recognises
-				commandWebsocketHookTrigger = 'qa-leader-change-refresh-${generalLearnerFlowDTO.toolSessionID}';
-				// if the trigger is recognised, the following action occurs
-				commandWebsocketHook = function() {
-					location.reload();
-				};
+			<c:if test="${isLeadershipEnabled}">
+				<lams:LeaderDisplay idName="leader-enabled" username="${sessionMap.groupLeader.fullname}" userId="${sessionMap.groupLeader.queUsrId}"/>
 			</c:if>
-		});
-		
-	</script>
-</lams:head>
 
-<body class="stripes">
+			<!-- End advanced settings and notices -->
+			<form:hidden path="toolSessionID" id="tool-session-id" />
+			<form:hidden path="userID" />
+			<form:hidden path="sessionMapID" />
+			<form:hidden path="questionIndex" />
+			<form:hidden path="totalQuestionCount" />
 
-	<!-- form needs to be outside page so that the form bean can be picked up by Page tag. -->
-	<form:form action="${generalLearnerFlowDTO.questionListingMode == 'questionListingModeSequential' ? 'getNextQuestion.do' : 'submitAnswersContent.do'}"
-	 method="POST" target="_self" id="qaLearningForm" modelAttribute="qaLearningForm">
+			<div id="errors">
+				<lams:errors5/>
+			</div>
 
-	<lams:Page type="learner" title="${generalLearnerFlowDTO.activityTitle}">
+			<div id="questions" aria-label="<fmt:message key='label.questions'/>">
+				<c:choose>
+					<c:when test="${(generalLearnerFlowDTO.questionListingMode == 'questionListingModeSequential') && hasEditRight}">
+						<c:if test="${generalLearnerFlowDTO.totalQuestionCount != 1}">
+							<c:if test="${generalLearnerFlowDTO.initialScreen == 'true'}">
+								<p>
+									<fmt:message key="label.feedback.seq" />&nbsp;
+									<c:out value="${generalLearnerFlowDTO.remainingQuestionCount}" />&nbsp;
+									<fmt:message key="label.questions.simple" />
+								</p>
+							</c:if>
+						</c:if>
 
-		<!-- Advanced settings and notices -->
+						<c:if test="${generalLearnerFlowDTO.initialScreen != 'true'}">
+							<p>
+								<fmt:message key="label.questions.remaining" />&nbsp;
+								<c:out value="${generalLearnerFlowDTO.remainingQuestionCount}" />&nbsp;
+							</p>
+						</c:if>
 
-		<c:if test="${generalLearnerFlowDTO.noReeditAllowed}">
-			<lams:Alert type="danger" id="noRedosAllowed" close="false">
-				<fmt:message key="label.noredo.enabled" />
-			</lams:Alert>
-		</c:if>
+						<jsp:include page="/learning/SequentialAnswersContent.jsp" />
+					</c:when>
 
-		<c:if test="${not empty sessionMap.submissionDeadline}">
-			<lams:Alert type="danger" id="submission-deadline" close="false">
-				<fmt:message key="authoring.info.teacher.set.restriction">
-					<fmt:param>
-						<lams:Date value="${sessionMap.submissionDeadline}" />
-					</fmt:param>
-				</fmt:message>
-			</lams:Alert>
-		</c:if>
+					<c:otherwise>
+						<c:if test="${generalLearnerFlowDTO.totalQuestionCount != 1}">
+							<p style="font-size: smaller;">
+							<fmt:message key="label.feedback.combined" />&nbsp;<c:out
+								value="${generalLearnerFlowDTO.remainingQuestionCount}" />&nbsp;<fmt:message key="label.questions.simple" />
+							</p>
+						</c:if>
 
-		<c:if test="${isLeadershipEnabled}">
-			<lams:LeaderDisplay idName="leader-enabled" username="${sessionMap.groupLeader.fullname}" userId="${sessionMap.groupLeader.queUsrId}"/>
-		</c:if>
+						<jsp:include page="/learning/CombinedAnswersContent.jsp" />
+					</c:otherwise>
+				</c:choose>
+			</div>
 
-		<!-- End advanced settings and notices -->
-		<form:hidden path="toolSessionID" id="tool-session-id" />
-		<form:hidden path="userID" />
-		<form:hidden path="sessionMapID" />
-		<form:hidden path="questionIndex" />
-		<form:hidden path="totalQuestionCount" />
 
-		<div class="panel">
-			<c:out value="${generalLearnerFlowDTO.activityInstructions}" escapeXml="false" />
-		</div>
 
-		<lams:errors/>
+		</form:form>
+	</div>
+
+<script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.form.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.blockUI.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.timeago.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/timeagoi18n/jquery.timeago.${fn:toLowerCase(localeLanguage)}.js"></script>
+<script type="text/JavaScript">
+	var minWordsLimitLabel = '<fmt:message key="label.minimum.number.words" ><fmt:param>{0}</fmt:param></fmt:message>';
+
+	function submitMethod(actionMethod) {
+		
+		//validate answers
+		var submit = true;
+		if (actionMethod != 'getPreviousQuestion') {
 			
-		<c:choose>
-			<c:when test="${(generalLearnerFlowDTO.questionListingMode == 'questionListingModeSequential') && hasEditRight}">
-				<c:if test="${generalLearnerFlowDTO.totalQuestionCount != 1}">
-					<c:if test="${generalLearnerFlowDTO.initialScreen == 'true'}">
-						<p>
-							<fmt:message key="label.feedback.seq" />&nbsp;
-							<c:out value="${generalLearnerFlowDTO.remainingQuestionCount}" />&nbsp;
-							<fmt:message key="label.questions.simple" />
-						</p>
-					</c:if>
-				</c:if>
+			//check for min words limit 
+			jQuery(".min-words-limit-enabled").each(function() {
+				
+				var questionId = (${generalLearnerFlowDTO.questionListingMode == 'questionListingModeSequential'}) ? "" : $(this).data("sequence-id");
+				var isCkeditor = $(this).data("is-ckeditor");
+				
+				var value;
+				var instance;
+				if (isCkeditor) {
+					instance = CKEDITOR.instances["answer" + questionId];
+					value = CKEDITOR.instances["answer" + questionId].getData();
+					
+				} else {
+					instance = $("#answer"+ questionId);
+					value =  $("#answer"+ questionId).val();
+				}
+				
+				var numberEnteredWords = getNumberOfWords(value, isCkeditor); 
+				
+				var minWordsLimit = $(this).data("min-words-limit");
+				if (numberEnteredWords < minWordsLimit) {
+					var minWordsLimitLabelStr = minWordsLimitLabel.replace("{0}", ": " + minWordsLimit);
+					alert("<fmt:message key="label.question" /> "+ questionId +". " +  minWordsLimitLabelStr);
+					instance.focus();
+					return submit = false;
+				}
+			});
 
-				<c:if test="${generalLearnerFlowDTO.initialScreen != 'true'}">
-					<p>
-						<fmt:message key="label.questions.remaining" />&nbsp;
-						<c:out value="${generalLearnerFlowDTO.remainingQuestionCount}" />&nbsp;
-					</p>
-				</c:if>
+			//check for blank answers
+			if (submit) {
+				jQuery(".text-area").each(function() {
+					if (jQuery.trim($(this).val()) == "") {
+						if (confirm("<fmt:message key="warning.empty.answers" />")) {
+							doSubmit(actionMethod);
+							return false;
+						} else {
+							this.focus();
+							return submit = false;
+						}
+					}
+				});
+			}
+		}
+		
+		if (submit) {
+			doSubmit(actionMethod);
+		}
+	}
+	
+	function doSubmit(actionMethod) {
+		$('.btn').prop('disabled', true);
+		document.forms.qaLearningForm.action=actionMethod+".do"; 
+		document.forms.qaLearningForm.submit();
+	}
 
-				<jsp:include page="/learning/SequentialAnswersContent.jsp" />
-			</c:when>
+	<c:if test="${!hasEditRight && mode != 'teacher'}">
+		setInterval("checkLeaderProgress();",45000);// Auto-Refresh every 1 minute for non-leaders
+	</c:if>
+	
+	function checkLeaderProgress() {
+		$.ajax({
+			async: false,
+			url: '<c:url value="checkLeaderProgress.do"/>',
+			data: 'toolSessionID=' + $("#tool-session-id").val(),
+			dataType: 'json',
+			type: 'post',
+			success: function (json) {
+				if (json.isLeaderResponseFinalized) {
+					location.reload();
+				}
+			}
+		   });
+	}
+	
+	//autoSaveAnswers if hasEditRight
+	if (${hasEditRight}) {
+			
+		var interval = "30000"; // = 30 seconds
+		window.setInterval(learnerAutosave, interval);
+		
+		function learnerAutosave(isCommand){
+			// isCommand means that the autosave was triggered by force complete or another command websocket message
+			// in this case do not check multiple tabs open, just autosave
+			if (!isCommand) {
+			  let shouldAutosave = preventLearnerAutosaveFromMultipleTabs(interval);
+			  if (!shouldAutosave) {
+				return;
+			  }
+			}
+			
+			//fire onchange event for textareas/ckeditors
+			if (${generalLearnerFlowDTO.allowRichEditor}) {
+				for ( instance in CKEDITOR.instances ) {
+					CKEDITOR.instances[instance].updateElement();
+				}
+			} else {
+				$("textarea[name$=__textarea]").change();
+			}
+			
+			//ajax form submit
+			$('#qaLearningForm').ajaxSubmit({
+				url: '<c:url value="autoSaveAnswers.do?date=" />' + new Date().getTime(),
+				success: function() {
+					   $.growlUI('<i class="fa fa-lg fa-floppy-o"></i> <fmt:message key="label.learning.draft.autosaved" />');
+				}
+			});
+		}
+	}
 
-			<c:otherwise>
-				<c:if test="${generalLearnerFlowDTO.totalQuestionCount != 1}">
-					<p style="font-size: smaller;">
-					<fmt:message key="label.feedback.combined" />&nbsp;<c:out
-						value="${generalLearnerFlowDTO.remainingQuestionCount}" />&nbsp;<fmt:message key="label.questions.simple" />
-					</p>
-				</c:if>
+	//min words counter
+	$(document).ready(function() {
+		
+		//character count fuction in case ckeditor is OFF
+		function counter(event) {
+			var questionId = event.data.questionId;
+			var minWordsLimit = event.data.minWordsLimit;
+			var value = $("#answer"+ questionId).val();
+			
+			var numberEnteredWords = getNumberOfWords(value, false);
+			var numberRequiredWords = (minWordsLimit > numberEnteredWords) ? minWordsLimit - numberEnteredWords : 0;
+			$('#words-required-' + questionId).html(numberRequiredWords);
+		};
 
-				<jsp:include page="/learning/CombinedAnswersContent.jsp" />
-			</c:otherwise>
-		</c:choose>
+		//character count fuction in case ckeditor is ON
+		function ckeditorCounter(event) {
+			var questionId = event.listenerData.questionId;
+			var minWordsLimit = event.listenerData.minWordsLimit;
+			var value = event.editor.getData();
+			
+			var numberEnteredWords = getNumberOfWords(value, true);
+			var numberRequiredWords = (minWordsLimit > numberEnteredWords) ? minWordsLimit - numberEnteredWords : 0;
+			$('#words-required-' + questionId).html(numberRequiredWords);
+		};
 
-	<div id="footer"></div>
+		//check for min words limit 
+		jQuery(".min-words-limit-enabled").each(function() {
 
-	</lams:Page>
+			var isCkeditor = $(this).data("is-ckeditor");
+			var questionId = (${generalLearnerFlowDTO.questionListingMode == 'questionListingModeSequential'}) ? "" : $(this).data("sequence-id");
+			var minWordsLimit = $(this).data("min-words-limit");
+			
+			//assign function
+			if (isCkeditor) {
+				var ckeditor = CKEDITOR.instances["answer" + questionId];
+				
+				ckeditor.on('change', ckeditorCounter, null, {questionId: questionId, minWordsLimit: minWordsLimit} );
+				//count characters initially
+				ckeditor.on('instanceReady', ckeditorCounter, null, {questionId: questionId, minWordsLimit: minWordsLimit});
+				  
+			} else {
+				$("#answer" + questionId)
+					.on('change keydown keypress keyup paste', {questionId: questionId, minWordsLimit: minWordsLimit}, counter)
+					.trigger( "change", {questionId: questionId, minWordsLimit: minWordsLimit} );
+			}
+			
+		});
 
-	</form:form>
+		<%-- Connect to command websocket only if it is learner UI --%>
+		<c:if test="${isLeadershipEnabled and mode == 'learner'}">
+			// command websocket stuff for refreshing
+			// trigger is an unique ID of page and action that command websocket code in Page.tag recognises
+			commandWebsocketHookTrigger = 'qa-leader-change-refresh-${generalLearnerFlowDTO.toolSessionID}';
+			// if the trigger is recognised, the following action occurs
+			commandWebsocketHook = function() {
+				location.reload();
+			};
+		</c:if>
+	});
+	
+</script>
 
-</body>
-</lams:html>
+</lams:PageLearner>
\ No newline at end of file
Index: lams_tool_laqa/web/learning/CombinedAnswersContent.jsp
===================================================================
diff -u -reb06bfe26264fed6597191965bc0631a9431a29e -r2f6e8f9ecfee5b8078479721374d0cbeee3d699d
--- lams_tool_laqa/web/learning/CombinedAnswersContent.jsp	(.../CombinedAnswersContent.jsp)	(revision eb06bfe26264fed6597191965bc0631a9431a29e)
+++ lams_tool_laqa/web/learning/CombinedAnswersContent.jsp	(.../CombinedAnswersContent.jsp)	(revision 2f6e8f9ecfee5b8078479721374d0cbeee3d699d)
@@ -6,80 +6,78 @@
 	<c:forEach var="answerEntry" items="${generalLearnerFlowDTO.mapAnswers}">
 
 		<c:if test="${questionEntry.key == answerEntry.key}">
-			<div class="row no-gutter">
-				<div class="col-xs-12">
-					<div class="panel panel-default">
-						<div class="panel-heading">
-							<div class="panel-title">
-								<c:if test="${generalLearnerFlowDTO.mapQuestionContentLearner.size() !=1}"><c:out value="${questionEntry.key}" />. </c:if>  <c:out value="${questionEntry.value.name}" escapeXml="false" />
-							</div>
-						</div>
 
-						<div class="panel-body">
-							<c:if test="${not empty questionEntry.value.description}">
-								<div class="panel">
-									<c:out value="${questionEntry.value.description}" escapeXml="false" />
-								</div>
-							</c:if>
-						
-							<div class="answer-req">
-								<c:if test="${questionEntry.value.required}">
-									<span class="label label-danger pull-right"><fmt:message key="label.required" /></span>
-								</c:if> 
+			<div class="card lcard lcard-no-borders shadow my-4" id="question<c:out value='${questionEntry.key}' />" aria-label="question">
+				<div class="card-header lcard-header lcard-header-button-border">
+					<c:if test="${generalLearnerFlowDTO.mapQuestionContentLearner.size() !=1}"><c:out value="${questionEntry.key}" />. </c:if>  <c:out value="${questionEntry.value.name}" escapeXml="false" />
+				</div>
 
-								<c:if test="${questionEntry.value.minWordsLimit != 0}">
-								<button class="btn btn-xs btn-primary" type="button">
-									<strong><fmt:message key="label.words.required" />&nbsp;</strong><span id="words-required-${questionEntry.key}" class="badge"></span>
-								</button>
-								<div class="voffset5">&nbsp;</div>
-								</c:if>
+				<div class="card-body">
+					<c:if test="${not empty questionEntry.value.description}">
+						<div class="" id="questionDescription">
+							<c:out value="${questionEntry.value.description}" escapeXml="false" />
+						</div>
+					</c:if>
+				
+					<div class="answer-req text-end">
+						<c:if test="${questionEntry.value.required}">
+							<span class="badge text-bg-danger"><fmt:message key="label.required" /></span>
+						</c:if> 
 
-							</div>
+						<c:if test="${questionEntry.value.minWordsLimit != 0}">
+						<span class="badge text-bg-primary">
+							<fmt:message key="label.words.required" />&nbsp;<span id="words-required-${questionEntry.key}"></span>
+						</span>
+						</c:if>
 
-							<c:choose>
-								<c:when test="${hasEditRight}">
-									<c:set var="placeholder"><fmt:message key="label.learning.yourAnswer" />...</c:set>
-									<div data-sequence-id="${questionEntry.key}"
-										data-is-ckeditor="${generalLearnerFlowDTO.allowRichEditor}"
-										data-min-words-limit="${questionEntry.value.minWordsLimit}"
-										<c:if test="${questionEntry.value.minWordsLimit != 0}">class="min-words-limit-enabled"</c:if>>
-										<c:choose>
-											<c:when test="${generalLearnerFlowDTO.allowRichEditor}">
-												<lams:CKEditor id="answer${questionEntry.key}"
-													value="${answerEntry.value}" 
-													contentFolderID="${sessionMap.learnerContentFolder}"
-													toolbarSet="DefaultLearner">
-												</lams:CKEditor>
-											</c:when>
+					</div>
 
-											<c:otherwise>
-												<lams:textarea name="answer${questionEntry.key}"
-													id="answer${questionEntry.key}" rows="5" placeholder="${placeholder}"
-													class="form-control"><c:out value='${answerEntry.value}' escapeXml='false' /></lams:textarea>
-											</c:otherwise>
-										</c:choose>
-									</div>
-								</c:when>
+					<div class="my-2" id="answerResponse">
+					<c:choose>
+						<c:when test="${hasEditRight}">
+							<label id="yourAnswer" class="d-none"><fmt:message key="label.learning.yourAnswer" /></label>
+							<c:set var="placeholder"><fmt:message key="label.learning.yourAnswer" />...</c:set>
+							<div data-sequence-id="${questionEntry.key}"
+								data-is-ckeditor="${generalLearnerFlowDTO.allowRichEditor}"
+								data-min-words-limit="${questionEntry.value.minWordsLimit}"
+								<c:if test="${questionEntry.value.minWordsLimit != 0}">class="min-words-limit-enabled"</c:if>>
+								<c:choose>
+									<c:when test="${generalLearnerFlowDTO.allowRichEditor}">
+										<lams:CKEditor id="answer${questionEntry.key}"
+											value="${answerEntry.value}" 
+											contentFolderID="${sessionMap.learnerContentFolder}"
+											toolbarSet="DefaultLearner">
+										</lams:CKEditor>
+									</c:when>
 
-								<c:otherwise>
-									<lams:textarea name="answer${questionEntry.key}" rows="5"
-										class="form-control" disabled="disabled">
-										<c:out value='${answerEntry.value}' escapeXml='false' />
-									</lams:textarea>
-								</c:otherwise>
-							</c:choose>
-						</div>
+									<c:otherwise>
+										<lams:textarea name="answer${questionEntry.key}"
+											id="answer${questionEntry.key}" rows="5" placeholder="${placeholder}" aria-labelledby="yourAnswer"
+											class="form-control"><c:out value='${answerEntry.value}' escapeXml='false' /></lams:textarea>
+									</c:otherwise>
+								</c:choose>
+							</div>
+						</c:when>
+
+						<c:otherwise>
+							<lams:textarea name="answer${questionEntry.key}" rows="5"
+								class="form-control" disabled="disabled">
+								<c:out value='${answerEntry.value}' escapeXml='false' />
+							</lams:textarea>
+						</c:otherwise>
+					</c:choose>
 					</div>
 				</div>
 			</div>
+
 		</c:if>
 
 	</c:forEach>
 </c:forEach>
 
 <c:if test="${hasEditRight}">
-	<div class="right-buttons">
-		<button name="btnCombined" type="button" class="btn btn-default pull-right voffset5"
+	<div class="activity-bottom-buttons">
+		<button name="btnCombined" type="button" class="btn btn-primary mt-2"
 			onclick="javascript:submitMethod('submitAnswersContent');">
 			<fmt:message key="button.submitAllContent" />
 		</button>
Index: lams_tool_laqa/web/learning/IndividualLearnerResults.jsp
===================================================================
diff -u -rd5fa41792bdb2657d0d53c35126a64604510d18a -r2f6e8f9ecfee5b8078479721374d0cbeee3d699d
--- lams_tool_laqa/web/learning/IndividualLearnerResults.jsp	(.../IndividualLearnerResults.jsp)	(revision d5fa41792bdb2657d0d53c35126a64604510d18a)
+++ lams_tool_laqa/web/learning/IndividualLearnerResults.jsp	(.../IndividualLearnerResults.jsp)	(revision 2f6e8f9ecfee5b8078479721374d0cbeee3d699d)
@@ -2,57 +2,36 @@
 <%@ include file="/common/taglibs.jsp"%>
 <c:set var="sessionMap" value="${sessionScope[generalLearnerFlowDTO.sessionMapID]}" />
 
-<lams:html>
-<lams:head>
-	<lams:css />
-	<title><fmt:message key="activity.title" /></title>
+<lams:PageLearner title="${generalLearnerFlowDTO.activityTitle}" toolSessionID="${generalLearnerFlowDTO.toolSessionID}" >
 
-	<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/jquery.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"></script>
-	<lams:JSImport src="learning/includes/javascript/gate-check.js" />
-	
-	<script type="text/javascript">
-		checkNextGateActivity('finishButton', '${qaLearningForm.toolSessionID}', '', function(){
-			submitMethod('storeAllResults');
-		});
 
-		function submitMethod(actionMethod) {
-			$('.btn').prop('disabled', true);
-			document.forms.qaLearningForm.action = actionMethod+".do";
-			document.forms.qaLearningForm.submit();
-		}
-	</script>
-</lams:head>
-
-<body class="stripes">
-
-	<!-- form needs to be outside page so that the form bean can be picked up by Page tag. -->
+	<div class="container-lg">
+		<h1>sessionid <c:out value="${generalLearnerFlowDTO.toolSessionID}"></c:out></h1>
+<!-- form needs to be outside page so that the form bean can be picked up by Page tag. -->
 	<form:form action="/lams/tool/laqa11/learning/learning.do" method="POST" modelAttribute="qaLearningForm" target="_self">
 
-		<lams:Page type="learner" title="${generalLearnerFlowDTO.activityTitle}">
-
 		<!--  Announcements and advanced settings -->
 
 		<c:if test="${generalLearnerFlowDTO.noReeditAllowed}">
-			<lams:Alert type="danger" id="noRedosAllowed" close="false">
+			<lams:Alert5 type="danger" id="noRedosAllowed" close="false">
 				<fmt:message key="label.noredo.enabled" />
-			</lams:Alert>
+			</lams:Alert5>
 		</c:if>
 
 		<c:if test="${generalLearnerFlowDTO.lockWhenFinished && not generalLearnerFlowDTO.noReeditAllowed}">
-			<lams:Alert type="danger" id="lockWhenFinished" close="false">
+			<lams:Alert5 type="danger" id="lockWhenFinished" close="false">
 				<fmt:message key="label.responses.locked" />
-			</lams:Alert>
+			</lams:Alert5>
 		</c:if>
 
 		<c:if test="${not empty sessionMap.submissionDeadline}">
-			<lams:Alert type="danger" id="submissionDeadline" close="false">
+			<lams:Alert5 type="danger" id="submissionDeadline" close="false">
 				<fmt:message key="authoring.info.teacher.set.restriction">
 					<fmt:param>
 						<lams:Date value="${sessionMap.submissionDeadline}" />
 					</fmt:param>
 				</fmt:message>
-			</lams:Alert>
+			</lams:Alert5>
 		</c:if>
 		<!-- End announcements -->
 
@@ -63,71 +42,58 @@
 
 		<c:forEach var="questionEntry" items="${generalLearnerFlowDTO.mapQuestionContentLearner}">
 
-				<div class="row no-gutter">
-					<div class="col-xs-12">
-						<div class="panel panel-default">
-							<div class="panel-heading panel-title">
-								<strong>
-									<c:if test="${generalLearnerFlowDTO.mapQuestionContentLearner.size() != 1}">${questionEntry.key}.&nbsp;</c:if> <c:out value="${questionEntry.value.name}" escapeXml="false" /> 
-								</strong> 
-							</div>
-							
-							<div class="panel-body">
-								<div class="panel">
-									<c:out value="${questionEntry.value.description}" escapeXml="false" />
-								</div>
 
-								<c:forEach var="answerEntry" items="${generalLearnerFlowDTO.mapAnswersPresentable}">
-									<c:if test="${answerEntry.key == questionEntry.key}">
-										<h5>
-											<fmt:message key="label.learning.yourAnswer" />
-										</h5>
+			<div class="card lcard lcard-no-borders shadow mb-3 my-4" id="questions${questionEntry.key}"> 
+				<div class="card-header ">
+					<strong>
+						<c:if test="${generalLearnerFlowDTO.mapQuestionContentLearner.size() != 1}">${questionEntry.key}.&nbsp;</c:if> <c:out value="${questionEntry.value.name}" escapeXml="false" /> 
+					</strong> 
+				</div>
+				
+				<div class="card-body">
+					<div class="mb-3" >
+						<c:out value="${questionEntry.value.description}" escapeXml="false" />
+					</div>
 
-										<div class="panel" id="answer${questionEntry.key}">
-											<c:out value="${answerEntry.value}" escapeXml="false" />
-										</div>
-									</c:if>
-								</c:forEach>
+					<c:forEach var="answerEntry" items="${generalLearnerFlowDTO.mapAnswersPresentable}">
+						<c:if test="${answerEntry.key == questionEntry.key}">
+							<span class="fw-bold my-1">
+								<fmt:message key="label.learning.yourAnswer" />
+							</span>
 
-								<!-- Feedback -->
-								<c:if test="${(questionEntry.value.feedback != '') && (questionEntry.value.feedback != null) }">
-									<div class="row no-gutter">
-										<div class="col-xs-12">
-											<div class="panel panel-default voffset5" id="feedback${questionEntry.key}">
-												<div class="panel-heading panel-heading-sm panel-title">
-													<fmt:message key="label.feedback" />
-												</div>
-												<div class="panel-body panel-body-sm">
-													<c:out value="${questionEntry.value.feedback}" escapeXml="false" />
-												</div>
-											</div>
-										</div>
-									</div>
-								</c:if>
+							<div class="border border-primary p-3 m-2 border-opacity-50 rounded-2" id="answer${questionEntry.key}">
+								<c:out value="${answerEntry.value}" escapeXml="false" />
+							</div>
+						</c:if>
+					</c:forEach>
 
+					<!-- Feedback -->
+					<c:if test="${(questionEntry.value.feedback != '') && (questionEntry.value.feedback != null) }">
+
+						<div class="panel panel-default mt-4" id="feedback${questionEntry.key}">
+							<div class="panel-heading panel-heading-sm panel-title">
+								<fmt:message key="label.feedback" />
 							</div>
+							<div class="panel-body panel-body-sm">
+								<c:out value="${questionEntry.value.feedback}" escapeXml="false" />
+							</div>
 						</div>
-					</div>
+
+					</c:if>
+
 				</div>
-				<div class="shading-bg">
-					<p></p>
-				</div>
+			</div>
 
+
 		</c:forEach>
 
 		<hr class="msg-hr" />
 
-		<div class="voffset10">
-			<c:if test="${!generalLearnerFlowDTO.noReeditAllowed}">
-				<button type="button" name="redoQuestions" class="btn btn-default pull-left"
-					onclick="submitMethod('redoQuestions');">
-					<fmt:message key="label.redo" />
-				</button>
-			</c:if>
+		<div class="activity-bottom-buttons">
 
 			<c:if test="${generalLearnerFlowDTO.showOtherAnswers}">
 				<button name="viewAllResults" type="button" onclick="submitMethod('storeAllResults');"
-					class="btn btn-default pull-right">
+					class="btn btn-primary mx-2">
 					<fmt:message key="label.allResponses" />
 				</button>
 			</c:if>
@@ -148,6 +114,7 @@
 						</button>
 					</div>
 				</c:if>
+				
 
 				<c:if test="${generalLearnerFlowDTO.reflection == 'true'}">
 					<button name="forwardtoReflection" type="button" onclick="javascript:submitMethod('storeAllResults');"
@@ -157,15 +124,28 @@
 				</c:if>
 			</c:if>
 
+			<c:if test="${!generalLearnerFlowDTO.noReeditAllowed}">
+				<button type="button" name="redoQuestions" class="btn btn-primary mx-2 float-start"
+					onclick="submitMethod('redoQuestions');">
+					<fmt:message key="label.redo" />
+				</button>
+			</c:if>
 		</div>
 
 
-		<div id="footer"></div>
-
-		</lams:Page>
-
 	</form:form>
+	</div>
 	<!-- end form -->
 
-</body>
-</lams:html>
+	<script type="text/javascript">
+		checkNextGateActivity('finishButton', '${qaLearningForm.toolSessionID}', '', function(){
+			submitMethod('storeAllResults');
+		});
+
+		function submitMethod(actionMethod) {
+			$('.btn').prop('disabled', true);
+			document.forms.qaLearningForm.action = actionMethod+".do";
+			document.forms.qaLearningForm.submit();
+		}
+	</script>
+</lams:PageLearner>
Index: lams_tool_laqa/web/learning/LearnerRep.jsp
===================================================================
diff -u -rd5fa41792bdb2657d0d53c35126a64604510d18a -r2f6e8f9ecfee5b8078479721374d0cbeee3d699d
--- lams_tool_laqa/web/learning/LearnerRep.jsp	(.../LearnerRep.jsp)	(revision d5fa41792bdb2657d0d53c35126a64604510d18a)
+++ lams_tool_laqa/web/learning/LearnerRep.jsp	(.../LearnerRep.jsp)	(revision 2f6e8f9ecfee5b8078479721374d0cbeee3d699d)
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
-
 <c:set var="lams">
 	<lams:LAMSURL />
 </c:set>
@@ -13,9 +12,7 @@
 <c:set var="hasEditRight" value="${!isLeadershipEnabled || isLeadershipEnabled && isUserLeader}" />
 <c:set var="localeLanguage"><lams:user property="localeLanguage" /></c:set>
 
-<lams:html>
-<lams:head>
-	<title><fmt:message key="activity.title" /></title>
+<lams:PageLearner title="${generalLearnerFlowDTO.activityTitle}" toolSessionID="${sessionMap.toolSessionID}" >
 	<lams:css suffix="jquery.jRating"/>
 	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme-blue.css">
 	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager.css">
@@ -53,243 +50,9 @@
 		}
 	</style>
 
-	<script type="text/javascript">
-		//var for jquery.jRating.js
-		var pathToImageFolder = "${lams}images/css/";
-		
-		//vars for rating.js
-		var MAX_RATES = ${qaContent.maximumRates},
-		MIN_RATES = ${qaContent.minimumRates},
-		COMMENTS_MIN_WORDS_LIMIT = ${sessionMap.commentsMinWordsLimit},
-		LAMS_URL = '${lams}',
-		COUNT_RATED_ITEMS = ${sessionMap.countRatedItems},
-		COMMENT_TEXTAREA_TIP_LABEL = '<fmt:message key="label.comment.textarea.tip"/>',
-		WARN_COMMENTS_IS_BLANK_LABEL = '<fmt:message key="warning.comment.blank"/>',
-		WARN_MIN_NUMBER_WORDS_LABEL = "<fmt:message key="warning.minimum.number.words"><fmt:param value="${sessionMap.commentsMinWordsLimit}"/></fmt:message>",
-		ALLOW_RERATE = false,
-		SESSION_ID = ${toolSessionID};
-	</script>
-	<script src="${lams}includes/javascript/jquery.js" type="text/javascript"></script>
-	<script src="${lams}includes/javascript/jquery.jRating.js" type="text/javascript"></script>
-	<script src="${lams}includes/javascript/jquery.tablesorter.js" type="text/javascript"></script>
-	<script src="${lams}includes/javascript/jquery.tablesorter-pager.js" type="text/javascript"></script>
-	<script src="${lams}includes/javascript/jquery.timeago.js" type="text/javascript"></script>
-	<script src="${lams}includes/javascript/common.js" type="text/javascript"></script>
-	<script src="${lams}includes/javascript/rating.js" type="text/javascript"></script>
-	<script src="${lams}includes/javascript/bootstrap.min.js" type="text/javascript"></script>
-	<script src="${lams}includes/javascript/jquery.tablesorter-widgets.js" type="text/javascript"></script>
-	<script src="${lams}includes/javascript/timeagoi18n/jquery.timeago.${fn:toLowerCase(localeLanguage)}.js" type="text/javascript"></script>
-	<script src="${lams}includes/javascript/portrait.js" type="text/javascript" ></script>
-	<lams:JSImport src="learning/includes/javascript/gate-check.js" />
-	
-	<script type="text/javascript">
-		checkNextGateActivity('finishButton', '${toolSessionID}', '', function(){
-			submitMethod('endLearning');
-		});
-		
-		var AVG_RATING_LABEL = '<fmt:message key="label.average.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param></fmt:message>',
-			YOUR_RATING_LABEL = '<fmt:message key="label.your.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param><fmt:param>@3@</fmt:param></fmt:message>',
-			IS_DISABLED =  ${sessionMap.isDisabled};
-		
-		$(document).ready(function(){
-			
-			jQuery("time.timeago").timeago();
-			
-			$(".tablesorter").tablesorter({
-				theme: 'bootstrap',
-				headerTemplate : '{content} {icon}',
-			    widthFixed: true,
-			    widgets: ['uitheme','zebra'],
-		        headers: { 
-		            2: {
-		                sorter: false 
-		            } 
-		        } 
-			});
-			
-			$(".tablesorter").each(function() {
-				$(this).tablesorterPager({
-					// set to false otherwise it remembers setting from other jsFiddle demos
-					savePages: false,
-				      // use this format: "http:/mydatabase.com?page={page}&size={size}&{sortList:col}"
-				      // where {page} is replaced by the page number (or use {page+1} to get a one-based index),
-				      // {size} is replaced by the number of records to show,
-				      // {sortList:col} adds the sortList to the url into a "col" array, and {filterList:fcol} adds
-				      // the filterList to the url into an "fcol" array.
-				      // So a sortList = [[2,0],[3,0]] becomes "&col[2]=0&col[3]=0" in the url
-					ajaxUrl : "<c:url value='getResponses.do'/>?page={page}&size={size}&{sortList:column}&isAllowRateAnswers=${qaContent.allowRateAnswers}&isAllowRichEditor=${qaContent.allowRichEditor}&isOnlyLeadersIncluded=${qaContent.useSelectLeaderToolOuput}&qaContentId=${qaContent.qaContentId}&qaSessionId=" + $("#toolSessionID").val() + "&questionUid=" + $(this).attr('data-question-uid') + "&userId=" + $("#userID").val() + "&reqID=" + (new Date()).getTime(),
-					ajaxProcessing: function (data) {
-				    	if (data && data.hasOwnProperty('rows')) {
-				    		var rows = [],
-				            json = {},
-							countRatedItems = data.countRatedItems;
-				    		
-							for (i = 0; i < data.rows.length; i++){
-								var userData = data.rows[i];
-								var itemId = userData["responseUid"];
-								var isItemAuthoredByUser = userData["isItemAuthoredByUser"];
-								
-								rows += '<tr>';
-								rows += '<td style="vertical-align:top;">';
-								
-								if (${generalLearnerFlowDTO.userNameVisible}) {
-									rows += definePortraitMiniHeader(userData["portraitId"], userData["userID"], '${lams}',
-																	 ${qaContent.useSelectLeaderToolOuput} ? userData["sessionName"] : userData["userName"], 
-											'<time class="timeago" title="' + userData["attemptTime"] + '" datetime="' + userData["timeAgo"] + '"></time>', 
-											false, "sbox-heading bg-warning")
-								}
-								
-								rows += 	'<div class="user-answer">';
-								if (userData["visible"] == 'true') {
-									rows += 	userData["answer"];
-								} else {
-									rows += 	'<i><fmt:message key="label.hidden"/></i>';
-								}
-								rows += 	'</div>';
-								
-								rows += '</td>';
-								
-								var usesRatings = false;
-								var hasStartedRating = false;
 
-								if (${generalLearnerFlowDTO.allowRateAnswers}) {
-									rows += '<td style="width:150px;vertical-align:top;">';
-									
-									if (userData["visible"] == 'true') {
-										rows += '<div class="rating-stars-holder">';
 
-										// if the user has left a comment or done a rating in a batch of ratings, we need to keep all related ratings open.
-										usesRatings = true;
-										for (j = 0; !hasStartedRating && j < userData.criteriaDtos.length; j++){
-											hasStartedRating = userData.criteriaDtos[j].userRating != "";
-											if ( hasStartedRating) {
-												idsBeingRated.push(itemId); // idsBeingRated defined in rating.js
-											}
-										}
-										hasStartedRating = hasStartedRating || ${isCommentsEnabled} && userData["commentPostedByUser"] != "";
 
-										for (j = 0; j < userData.criteriaDtos.length; j++){
-											var criteriaDto = userData.criteriaDtos[j];
-											var objectId = criteriaDto["ratingCriteriaId"] + "-" + itemId;
-											var averageRating = criteriaDto.averageRating;
-											var numberOfVotes = criteriaDto.numberOfVotes;
-											var userRating = criteriaDto.userRating;
-											var isCriteriaNotRatedByUser = userRating == "";
-											var averageRatingDisplayed = (isItemAuthoredByUser || !isCriteriaNotRatedByUser) ? averageRating : 0;
-											var ratingStarsClass = (IS_DISABLED || isItemAuthoredByUser || (MAX_RATES > 0) && (countRatedItems >= MAX_RATES)  && (!hasStartedRating) || !isCriteriaNotRatedByUser) ? "rating-stars-disabled" : "rating-stars";
-								
-											rows += '<strong>';
-											rows += 	 criteriaDto.title;
-											rows += '</strong>';
-											
-											rows += '<div class="'+ ratingStarsClass +' rating-stars-new" data-average="'+ averageRatingDisplayed +'" data-id="'+ objectId +'">';
-											rows += '</div>';
-											
-											if (isItemAuthoredByUser) {
-												rows += '<div class="rating-stars-caption">';
-												rows += 	AVG_RATING_LABEL.replace("@1@", averageRating).replace("@2@", numberOfVotes);
-												rows += '</div>';
-												
-											} else {
-												rows += '<div class="rating-stars-caption" id="rating-stars-caption-'+ objectId +'"';
-												if (isCriteriaNotRatedByUser) {
-													rows += ' style="visibility: hidden;"';	
-												}
-												rows += '>';
-												var temp = YOUR_RATING_LABEL.replace("@1@", '<span id="user-rating-'+ objectId +'">'+ userRating + '</span>');
-												temp = temp.replace("@2@", '<span id="average-rating-'+ objectId +'">'+ averageRating + '</span>');
-												temp = temp.replace("@3@", '<span id="number-of-votes-'+ objectId +'">'+ numberOfVotes + '</span>');
-												rows += 	temp;
-												rows += '</div>';
-											}
-										}
-										
-										rows += '</div>';
-									}
-									
-									rows += '</td>';
-								} else {
-									// need a column or sorting is confused
-									rows += '<td style="display:none;"></td>';
-								}
-								
-								if (${isCommentsEnabled}) {
-									rows += '<td style="width:30%; min-width: 250px; vertical-align:top;" id="comments-area-' + itemId + '">';
-									
-									if (userData["visible"] == 'true') {
-										var commentsCriteriaId = userData["commentsCriteriaId"];
-										var commentPostedByUser = userData["commentPostedByUser"];
-										
-										//show all comments needs to be shown
-										if (isItemAuthoredByUser) {
-											for (j = 0; i < userData.comments.length; j++){
-												var comment = userData.comments[j];
-												rows += '<div class="rating-comment">';
-												rows += 	comment.comment;
-												rows += '</div>';
-											}
-											
-										} else if (commentPostedByUser != "") {
-											rows += '<div class="rating-comment">';
-											rows += 	commentPostedByUser;
-											rows += '</div>';
-											
-										//show comments textarea and a submit button
-										} else if (! (IS_DISABLED || usesRatings && MAX_RATES>0 && countRatedItems >= MAX_RATES && !hasStartedRating)) {
-											rows += '<div id="add-comment-area-' + itemId + '">';											
-											rows +=		'<textarea class="form-control comment-textarea" name="comment" rows="4" id="comment-textarea-'+ itemId +'" onfocus="if(this.value==this.defaultValue)this.value=\'\';" onblur="if(this.value==\'\')this.value=this.defaultValue;"><fmt:message key="label.comment.textarea.tip"/></textarea>';
-											
-											rows += 	'<div class="button add-comment add-comment-new" data-item-id="'+ itemId +'" data-comment-criteria-id="'+ commentsCriteriaId +'">';
-											rows += 	'</div>';
-											rows += '</div>';											
-										}
-									}
-									
-									rows += '</td>';
-								}
-								
-								rows += '</tr>';
-							}
-				            
-							json.total = data.total_rows; // only allow 100 rows in total
-							//json.filteredRows = 100; // no filtering
-							json.rows = $(rows);
-							return json;
-				            
-				    	}
-					},
-					container: $(this).find(".ts-pager"),
-					output: '{startRow} to {endRow} ({totalRows})',
-				  	cssPageDisplay: '.pagedisplay',
-					cssPageSize: '.pagesize',
-					cssDisabled: 'disabled'
-				})
-				
-				// bind to pager events
-				.bind('pagerInitialized pagerComplete', function(event, options){
-					initializeJRating();
-					jQuery("time.timeago").timeago();
-				});
-			});
-
-		 });
-
-		function refreshPage(reload) {
-			if ( "reload" == reload ) { 
-				location.href = "<lams:WebAppURL/>learning/learning.do?mode=learner&toolSessionID="+SESSION_ID;
-			} else {
-				submitMethod('refreshAllResults');
-			}
-		}
-		function submitMethod(actionMethod) {
-			document.forms.qaLearningForm.action=actionMethod+".do"; 
-			document.forms.qaLearningForm.submit();
-		}
-	</script>
-</lams:head>
-
-<body class="stripes">
-
 	<!-- form needs to be outside page so that the form bean can be picked up by Page tag. -->
 	<form:form action="/lams/tool/laqa11/learning/learning.do"  modelAttribute="qaLearningForm" method="POST" target="_self">
 		<form:hidden path="toolSessionID" id="toolSessionID" />
@@ -298,24 +61,23 @@
 		<form:hidden path="totalQuestionCount" />
 		<form:hidden path="refreshAnswers" />
 
-		<lams:Page type="learner" title="${qaContent.title}">
 	
 			<!-- Announcements -->
 	
 			<c:if test="${not empty sessionMap.submissionDeadline}">
-				<lams:Alert id="submission-deadline" type="danger" close="false">
+				<lams:Alert5 id="submission-deadline" type="danger" close="false">
 					<fmt:message key="authoring.info.teacher.set.restriction">
 						<fmt:param>
 							<lams:Date value="${sessionMap.submissionDeadline}" />
 						</fmt:param>
 					</fmt:message>
-				</lams:Alert>
+				</lams:Alert5>
 			</c:if>
 	
 			<!-- Rating limits info -->
 			<c:if test="${generalLearnerFlowDTO.allowRateAnswers && (qaContent.minimumRates ne 0 || qaContent.maximumRates ne 0)}">
 	
-				<lams:Alert id="rating-info" type="info" close="true">
+				<lams:Alert5 id="rating-info" type="info" close="true">
 					<c:choose>
 						<c:when test="${qaContent.minimumRates ne 0 and qaContent.maximumRates ne 0}">
 							<fmt:message key="label.rate.limits.reminder">
@@ -341,7 +103,7 @@
 					<fmt:message key="label.rate.limits.topic.reminder">
 						<fmt:param value="<span id='count-rated-items'>${sessionMap.countRatedItems}</span>" />
 					</fmt:message>
-				</lams:Alert>
+				</lams:Alert5>
 			</c:if>
 	
 			<c:if test="${isLeadershipEnabled}">
@@ -350,134 +112,130 @@
 	
 			<!-- Questions and answers -->
 			<c:forEach var="question" items="${generalLearnerFlowDTO.questions}" varStatus="status">
-				<div class="row no-gutter voffset20">
-					<div class="col-xs-12">
-						<div class="panel panel-default">
-							<div class="panel-heading panel-title">
-								<c:if test="${generalLearnerFlowDTO.questions.size() != 1}">${status.count}.&nbsp;</c:if> 
-								<c:out value="${question.qbQuestion.name}" escapeXml="false" />
+
+				<div class="panel panel-default">
+					<div class="panel-heading panel-title">
+						<c:if test="${generalLearnerFlowDTO.questions.size() != 1}">${status.count}.&nbsp;</c:if> 
+						<c:out value="${question.qbQuestion.name}" escapeXml="false" />
+					</div>
+
+					<div class="panel-body">
+						<c:if test="${not empty question.qbQuestion.description}">
+							<div class="panel">
+								<c:out value="${question.qbQuestion.description}" escapeXml="false" />
 							</div>
+						</c:if>
 
-							<div class="panel-body">
-								<c:if test="${not empty question.qbQuestion.description}">
-									<div class="panel">
-										<c:out value="${question.qbQuestion.description}" escapeXml="false" />
-									</div>
+						<%--User own responses---------------------------------------%>
+						<c:set var="userResponse" value="${question.userResponse}"/>
+						<c:if test="${userResponse != null}">
+							<div class="row no-gutter">
+								<!-- split if ratings are on -->
+								<c:set var="splitRow" value="col-xs-12" />
+								<c:if test="${generalLearnerFlowDTO.allowRateAnswers}">
+									<c:set var="splitRow" value="col-xs-12 col-sm-9 col-md-10 col-lg-10" />
 								</c:if>
-	
-								<%--User own responses---------------------------------------%>
-								<c:set var="userResponse" value="${question.userResponse}"/>
-								<c:if test="${userResponse != null}">
-									<div class="row no-gutter">
-										<!-- split if ratings are on -->
-										<c:set var="splitRow" value="col-xs-12" />
-										<c:if test="${generalLearnerFlowDTO.allowRateAnswers}">
-											<c:set var="splitRow" value="col-xs-12 col-sm-9 col-md-10 col-lg-10" />
-										</c:if>
-										<div class="${splitRow}">
-											<div class="sbox">
-												<div class="sbox-heading bg-warning">
-													<div class="pull-left roffset5"><lams:Portrait userId="${userResponse.qaQueUser.queUsrId}"/></div>
-														<span><c:out value="${userResponse.qaQueUser.fullname}" /></span>
-														<br><span style="font-size: smaller"><lams:Date value="${userResponse.attemptTime}" timeago="true"/></span>
-												</div>
-												<div class="sbox-body">
-													<c:out value="${userResponse.answer}" escapeXml="false" />
-												</div>
-											</div>
+								<div class="${splitRow}">
+									<div class="sbox">
+										<div class="sbox-heading bg-warning">
+											<div class="pull-left roffset5"><lams:Portrait userId="${userResponse.qaQueUser.queUsrId}"/></div>
+												<span><c:out value="${userResponse.qaQueUser.fullname}" /></span>
+												<br><span style="font-size: smaller"><lams:Date value="${userResponse.attemptTime}" timeago="true"/></span>
 										</div>
-										<c:if test="${generalLearnerFlowDTO.allowRateAnswers}">
-											<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2 rate-answers-area">
-												<h4 class="text-center">
-													<fmt:message key="label.learning.rating" />
-												</h4>
-												<lams:Rating itemRatingDto="${userResponse.itemRatingDto}" disabled="true" isItemAuthoredByUser="true"
-													maxRates="${qaContent.maximumRates}" />
-											</div>
-										</c:if>
+										<div class="sbox-body">
+											<c:out value="${userResponse.answer}" escapeXml="false" />
+										</div>
 									</div>
-								</c:if>
-								
-								<!-- Others users' responses -->
-								<c:if test="${generalLearnerFlowDTO.showOtherAnswers}">
-									<c:if test="${isCommentsEnabled && sessionMap.commentsMinWordsLimit != 0}">
-										<lams:Alert id="rating-comment-info" type="info" close="false" >
-											<fmt:message key="label.comment.minimum.number.words">
-												<fmt:param>: ${sessionMap.commentsMinWordsLimit}</fmt:param>
-											</fmt:message>
-										</lams:Alert>
-									</c:if>
-					
-									<c:choose>
-										<c:when test="${isCommentsEnabled}">
-											<c:set var="numColumns" value="3" />
-										</c:when>
-										<c:when test="${!isCommentsEnabled and generalLearnerFlowDTO.allowRateAnswers}">
-											<c:set var="numColumns" value="2" />
-										</c:when>
-										<c:otherwise>
-											<c:set var="numColumns" value="1" />
-										</c:otherwise>
-									</c:choose>
-					
-									<div class="other-users-responses">
-										<lams:TSTable numColumns="${numColumns}" dataId='data-question-uid="${question.uid}"' >
-											<thead>
-												<tr>
-													<th title="<fmt:message key='label.sort.by.answer'/>"><fmt:message key="label.learning.answer" /></th>
-													<c:choose>
-													<c:when test="${generalLearnerFlowDTO.allowRateAnswers}">
-														<th title="<fmt:message key='label.sort.by.rating'/>"><fmt:message key="label.learning.rating" /></th>
-													</c:when>
-													<c:otherwise>
-														<th style="display:none;"></th>
-													</c:otherwise>
-													</c:choose>
-													<c:if test="${isCommentsEnabled}">
-														<th><fmt:message key="label.comment" /></th>
-													</c:if>
-												</tr>
-											</thead>
-											<tbody>
-						
-											</tbody>
-										</lams:TSTable>
+								</div>
+								<c:if test="${generalLearnerFlowDTO.allowRateAnswers}">
+									<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2 rate-answers-area">
+										<h4 class="text-center">
+											<fmt:message key="label.learning.rating" />
+										</h4>
+										<lams:Rating itemRatingDto="${userResponse.itemRatingDto}" disabled="true" isItemAuthoredByUser="true"
+											maxRates="${qaContent.maximumRates}" />
 									</div>
 								</c:if>
-								
 							</div>
-						</div>
+						</c:if>
+						
+						<!-- Others users' responses -->
+						<c:if test="${generalLearnerFlowDTO.showOtherAnswers}">
+							<c:if test="${isCommentsEnabled && sessionMap.commentsMinWordsLimit != 0}">
+								<lams:Alert id="rating-comment-info" type="info" close="false" >
+									<fmt:message key="label.comment.minimum.number.words">
+										<fmt:param>: ${sessionMap.commentsMinWordsLimit}</fmt:param>
+									</fmt:message>
+								</lams:Alert>
+							</c:if>
+			
+							<c:choose>
+								<c:when test="${isCommentsEnabled}">
+									<c:set var="numColumns" value="3" />
+								</c:when>
+								<c:when test="${!isCommentsEnabled and generalLearnerFlowDTO.allowRateAnswers}">
+									<c:set var="numColumns" value="2" />
+								</c:when>
+								<c:otherwise>
+									<c:set var="numColumns" value="1" />
+								</c:otherwise>
+							</c:choose>
+			
+							<div class="other-users-responses">
+								<lams:TSTable numColumns="${numColumns}" dataId='data-question-uid="${question.uid}"' >
+									<thead>
+										<tr>
+											<th title="<fmt:message key='label.sort.by.answer'/>"><fmt:message key="label.learning.answer" /></th>
+											<c:choose>
+											<c:when test="${generalLearnerFlowDTO.allowRateAnswers}">
+												<th title="<fmt:message key='label.sort.by.rating'/>"><fmt:message key="label.learning.rating" /></th>
+											</c:when>
+											<c:otherwise>
+												<th style="display:none;"></th>
+											</c:otherwise>
+											</c:choose>
+											<c:if test="${isCommentsEnabled}">
+												<th><fmt:message key="label.comment" /></th>
+											</c:if>
+										</tr>
+									</thead>
+									<tbody>
+				
+									</tbody>
+								</lams:TSTable>
+							</div>
+						</c:if>
+						
 					</div>
 				</div>
+
 			</c:forEach>
 			<!-- End questions and answers -->
 				
 			<!-- reflections -->
 			<c:if test="${generalLearnerFlowDTO.reflection == 'true' && generalLearnerFlowDTO.isLearnerFinished}">
-				<div class="row no-gutter">
-					<div class="col-xs-12">
-						<div class="panel panel-default voffset10">
-							<div class="panel-heading panel-title">
-								<fmt:message key="label.reflection" />
-							</div>
-							<div class="panel-body">
-								<div class="reflectionInstructions">
-									<lams:out value="${generalLearnerFlowDTO.reflectionSubject}" escapeHtml="true" />
-								</div>
-								<div class="panel">
-									<lams:out value="${qaLearningForm.entryText}" escapeHtml="true" />
-								</div>
 
-								<c:if test="${hasEditRight && mode != 'teacher'}">
-									<button name="forwardtoReflection" type="button" class="btn btn-default pull-left"
-										onclick="submitMethod('forwardtoReflection');">
-										<fmt:message key="label.edit" />
-									</button>
-								</c:if>
-							</div>
+				<div class="panel panel-default voffset10">
+					<div class="panel-heading panel-title">
+						<fmt:message key="label.reflection" />
+					</div>
+					<div class="panel-body">
+						<div class="reflectionInstructions">
+							<lams:out value="${generalLearnerFlowDTO.reflectionSubject}" escapeHtml="true" />
 						</div>
+						<div class="panel">
+							<lams:out value="${qaLearningForm.entryText}" escapeHtml="true" />
+						</div>
+
+						<c:if test="${hasEditRight && mode != 'teacher'}">
+							<button name="forwardtoReflection" type="button" class="btn btn-default pull-left"
+								onclick="submitMethod('forwardtoReflection');">
+								<fmt:message key="label.edit" />
+							</button>
+						</c:if>
 					</div>
 				</div>
+
 			</c:if>
 	
 			<!-- buttons -->
@@ -506,7 +264,7 @@
 						</c:when>
 	
 						<c:when test="${(generalLearnerFlowDTO.reflection != 'true') || !hasEditRight || generalLearnerFlowDTO.isLearnerFinished}">
-							<button type="button" id="finishButton" class="btn btn-primary pull-right na">
+							<button type="button" id="finishButton" class="btn btn-primary float-end na">
 								<c:choose>
 									<c:when test="${sessionMap.isLastActivity}">
 										<fmt:message key="button.submit" />
@@ -520,9 +278,239 @@
 					</c:choose>
 				</div>
 			</c:if>
-	
-			<div id="footer"></div>
-		</lams:Page>
+
 	</form:form>
-</body>
-</lams:html>
+
+<script type="text/javascript">
+	//var for jquery.jRating.js
+	var pathToImageFolder = "${lams}images/css/";
+	
+	//vars for rating.js
+	var MAX_RATES = ${qaContent.maximumRates},
+	MIN_RATES = ${qaContent.minimumRates},
+	COMMENTS_MIN_WORDS_LIMIT = ${sessionMap.commentsMinWordsLimit},
+	LAMS_URL = '${lams}',
+	COUNT_RATED_ITEMS = ${sessionMap.countRatedItems},
+	COMMENT_TEXTAREA_TIP_LABEL = '<fmt:message key="label.comment.textarea.tip"/>',
+	WARN_COMMENTS_IS_BLANK_LABEL = '<fmt:message key="warning.comment.blank"/>',
+	WARN_MIN_NUMBER_WORDS_LABEL = "<fmt:message key="warning.minimum.number.words"><fmt:param value="${sessionMap.commentsMinWordsLimit}"/></fmt:message>",
+	ALLOW_RERATE = false,
+	SESSION_ID = ${toolSessionID};
+</script>
+<script src="${lams}includes/javascript/jquery.js" type="text/javascript"></script>
+<script src="${lams}includes/javascript/jquery.jRating.js" type="text/javascript"></script>
+<script src="${lams}includes/javascript/jquery.tablesorter.js" type="text/javascript"></script>
+<script src="${lams}includes/javascript/jquery.tablesorter-pager.js" type="text/javascript"></script>
+<script src="${lams}includes/javascript/jquery.timeago.js" type="text/javascript"></script>
+<script src="${lams}includes/javascript/common.js" type="text/javascript"></script>
+<script src="${lams}includes/javascript/rating.js" type="text/javascript"></script>
+<script src="${lams}includes/javascript/jquery.tablesorter-widgets.js" type="text/javascript"></script>
+<script src="${lams}includes/javascript/timeagoi18n/jquery.timeago.${fn:toLowerCase(localeLanguage)}.js" type="text/javascript"></script>
+<script src="${lams}includes/javascript/portrait.js" type="text/javascript" ></script>
+<lams:JSImport src="learning/includes/javascript/gate-check.js" />
+
+<script type="text/javascript">
+	checkNextGateActivity('finishButton', '${toolSessionID}', '', function(){
+		submitMethod('endLearning');
+	});
+	
+	var AVG_RATING_LABEL = '<fmt:message key="label.average.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param></fmt:message>',
+		YOUR_RATING_LABEL = '<fmt:message key="label.your.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param><fmt:param>@3@</fmt:param></fmt:message>',
+		IS_DISABLED =  ${sessionMap.isDisabled};
+	
+	$(document).ready(function(){
+		
+		jQuery("time.timeago").timeago();
+		
+		$(".tablesorter").tablesorter({
+			theme: 'bootstrap',
+			headerTemplate : '{content} {icon}',
+			widthFixed: true,
+			widgets: ['uitheme','zebra'],
+			headers: { 
+				2: {
+					sorter: false 
+				} 
+			} 
+		});
+		
+		$(".tablesorter").each(function() {
+			$(this).tablesorterPager({
+				// set to false otherwise it remembers setting from other jsFiddle demos
+				savePages: false,
+				  // use this format: "http:/mydatabase.com?page={page}&size={size}&{sortList:col}"
+				  // where {page} is replaced by the page number (or use {page+1} to get a one-based index),
+				  // {size} is replaced by the number of records to show,
+				  // {sortList:col} adds the sortList to the url into a "col" array, and {filterList:fcol} adds
+				  // the filterList to the url into an "fcol" array.
+				  // So a sortList = [[2,0],[3,0]] becomes "&col[2]=0&col[3]=0" in the url
+				ajaxUrl : "<c:url value='getResponses.do'/>?page={page}&size={size}&{sortList:column}&isAllowRateAnswers=${qaContent.allowRateAnswers}&isAllowRichEditor=${qaContent.allowRichEditor}&isOnlyLeadersIncluded=${qaContent.useSelectLeaderToolOuput}&qaContentId=${qaContent.qaContentId}&qaSessionId=" + $("#toolSessionID").val() + "&questionUid=" + $(this).attr('data-question-uid') + "&userId=" + $("#userID").val() + "&reqID=" + (new Date()).getTime(),
+				ajaxProcessing: function (data) {
+					if (data && data.hasOwnProperty('rows')) {
+						var rows = [],
+						json = {},
+						countRatedItems = data.countRatedItems;
+						
+						for (i = 0; i < data.rows.length; i++){
+							var userData = data.rows[i];
+							var itemId = userData["responseUid"];
+							var isItemAuthoredByUser = userData["isItemAuthoredByUser"];
+							
+							rows += '<tr>';
+							rows += '<td style="vertical-align:top;">';
+							
+							if (${generalLearnerFlowDTO.userNameVisible}) {
+								rows += definePortraitMiniHeader(userData["portraitId"], userData["userID"], '${lams}',
+																 ${qaContent.useSelectLeaderToolOuput} ? userData["sessionName"] : userData["userName"], 
+										'<time class="timeago" title="' + userData["attemptTime"] + '" datetime="' + userData["timeAgo"] + '"></time>', 
+										false, "sbox-heading bg-warning")
+							}
+							
+							rows += 	'<div class="user-answer">';
+							if (userData["visible"] == 'true') {
+								rows += 	userData["answer"];
+							} else {
+								rows += 	'<i><fmt:message key="label.hidden"/></i>';
+							}
+							rows += 	'</div>';
+							
+							rows += '</td>';
+							
+							var usesRatings = false;
+							var hasStartedRating = false;
+
+							if (${generalLearnerFlowDTO.allowRateAnswers}) {
+								rows += '<td style="width:150px;vertical-align:top;">';
+								
+								if (userData["visible"] == 'true') {
+									rows += '<div class="rating-stars-holder">';
+
+									// if the user has left a comment or done a rating in a batch of ratings, we need to keep all related ratings open.
+									usesRatings = true;
+									for (j = 0; !hasStartedRating && j < userData.criteriaDtos.length; j++){
+										hasStartedRating = userData.criteriaDtos[j].userRating != "";
+										if ( hasStartedRating) {
+											idsBeingRated.push(itemId); // idsBeingRated defined in rating.js
+										}
+									}
+									hasStartedRating = hasStartedRating || ${isCommentsEnabled} && userData["commentPostedByUser"] != "";
+
+									for (j = 0; j < userData.criteriaDtos.length; j++){
+										var criteriaDto = userData.criteriaDtos[j];
+										var objectId = criteriaDto["ratingCriteriaId"] + "-" + itemId;
+										var averageRating = criteriaDto.averageRating;
+										var numberOfVotes = criteriaDto.numberOfVotes;
+										var userRating = criteriaDto.userRating;
+										var isCriteriaNotRatedByUser = userRating == "";
+										var averageRatingDisplayed = (isItemAuthoredByUser || !isCriteriaNotRatedByUser) ? averageRating : 0;
+										var ratingStarsClass = (IS_DISABLED || isItemAuthoredByUser || (MAX_RATES > 0) && (countRatedItems >= MAX_RATES)  && (!hasStartedRating) || !isCriteriaNotRatedByUser) ? "rating-stars-disabled" : "rating-stars";
+							
+										rows += '<strong>';
+										rows += 	 criteriaDto.title;
+										rows += '</strong>';
+										
+										rows += '<div class="'+ ratingStarsClass +' rating-stars-new" data-average="'+ averageRatingDisplayed +'" data-id="'+ objectId +'">';
+										rows += '</div>';
+										
+										if (isItemAuthoredByUser) {
+											rows += '<div class="rating-stars-caption">';
+											rows += 	AVG_RATING_LABEL.replace("@1@", averageRating).replace("@2@", numberOfVotes);
+											rows += '</div>';
+											
+										} else {
+											rows += '<div class="rating-stars-caption" id="rating-stars-caption-'+ objectId +'"';
+											if (isCriteriaNotRatedByUser) {
+												rows += ' style="visibility: hidden;"';	
+											}
+											rows += '>';
+											var temp = YOUR_RATING_LABEL.replace("@1@", '<span id="user-rating-'+ objectId +'">'+ userRating + '</span>');
+											temp = temp.replace("@2@", '<span id="average-rating-'+ objectId +'">'+ averageRating + '</span>');
+											temp = temp.replace("@3@", '<span id="number-of-votes-'+ objectId +'">'+ numberOfVotes + '</span>');
+											rows += 	temp;
+											rows += '</div>';
+										}
+									}
+									
+									rows += '</div>';
+								}
+								
+								rows += '</td>';
+							} else {
+								// need a column or sorting is confused
+								rows += '<td style="display:none;"></td>';
+							}
+							
+							if (${isCommentsEnabled}) {
+								rows += '<td style="width:30%; min-width: 250px; vertical-align:top;" id="comments-area-' + itemId + '">';
+								
+								if (userData["visible"] == 'true') {
+									var commentsCriteriaId = userData["commentsCriteriaId"];
+									var commentPostedByUser = userData["commentPostedByUser"];
+									
+									//show all comments needs to be shown
+									if (isItemAuthoredByUser) {
+										for (j = 0; i < userData.comments.length; j++){
+											var comment = userData.comments[j];
+											rows += '<div class="rating-comment">';
+											rows += 	comment.comment;
+											rows += '</div>';
+										}
+										
+									} else if (commentPostedByUser != "") {
+										rows += '<div class="rating-comment">';
+										rows += 	commentPostedByUser;
+										rows += '</div>';
+										
+									//show comments textarea and a submit button
+									} else if (! (IS_DISABLED || usesRatings && MAX_RATES>0 && countRatedItems >= MAX_RATES && !hasStartedRating)) {
+										rows += '<div id="add-comment-area-' + itemId + '">';											
+										rows +=		'<textarea class="form-control comment-textarea" name="comment" rows="4" id="comment-textarea-'+ itemId +'" onfocus="if(this.value==this.defaultValue)this.value=\'\';" onblur="if(this.value==\'\')this.value=this.defaultValue;"><fmt:message key="label.comment.textarea.tip"/></textarea>';
+										
+										rows += 	'<div class="button add-comment add-comment-new" data-item-id="'+ itemId +'" data-comment-criteria-id="'+ commentsCriteriaId +'">';
+										rows += 	'</div>';
+										rows += '</div>';											
+									}
+								}
+								
+								rows += '</td>';
+							}
+							
+							rows += '</tr>';
+						}
+						
+						json.total = data.total_rows; // only allow 100 rows in total
+						//json.filteredRows = 100; // no filtering
+						json.rows = $(rows);
+						return json;
+						
+					}
+				},
+				container: $(this).find(".ts-pager"),
+				output: '{startRow} to {endRow} ({totalRows})',
+				  cssPageDisplay: '.pagedisplay',
+				cssPageSize: '.pagesize',
+				cssDisabled: 'disabled'
+			})
+			
+			// bind to pager events
+			.bind('pagerInitialized pagerComplete', function(event, options){
+				initializeJRating();
+				jQuery("time.timeago").timeago();
+			});
+		});
+
+	 });
+
+	function refreshPage(reload) {
+		if ( "reload" == reload ) { 
+			location.href = "<lams:WebAppURL/>learning/learning.do?mode=learner&toolSessionID="+SESSION_ID;
+		} else {
+			submitMethod('refreshAllResults');
+		}
+	}
+	function submitMethod(actionMethod) {
+		document.forms.qaLearningForm.action=actionMethod+".do"; 
+		document.forms.qaLearningForm.submit();
+	}
+</script>
+</lams:PageLearner>
\ No newline at end of file
Index: lams_tool_laqa/web/learning/SequentialAnswersContent.jsp
===================================================================
diff -u -rf27fea8eb6533208beffced8d55e3544857577e8 -r2f6e8f9ecfee5b8078479721374d0cbeee3d699d
--- lams_tool_laqa/web/learning/SequentialAnswersContent.jsp	(.../SequentialAnswersContent.jsp)	(revision f27fea8eb6533208beffced8d55e3544857577e8)
+++ lams_tool_laqa/web/learning/SequentialAnswersContent.jsp	(.../SequentialAnswersContent.jsp)	(revision 2f6e8f9ecfee5b8078479721374d0cbeee3d699d)
@@ -7,59 +7,59 @@
 <c:forEach var="questionEntry" items="${generalLearnerFlowDTO.mapQuestionContentLearner}">
 
 	<c:if test="${questionEntry.key == generalLearnerFlowDTO.currentQuestionIndex}">
+		
+		<div class="card lcard lcard-no-borders shadow my-4" id="question<c:out value='${questionEntry.key}' />" aria-label="question">
+			<div class="card-header lcard-header lcard-header-button-border">
+				<div class="card-title">
+					<c:if test="${generalLearnerFlowDTO.mapQuestionContentLearner.size() != 1}"><c:out value="${questionEntry.key}" />.&nbsp;</c:if> <c:out value="${questionEntry.value.name}" escapeXml="false" />
+				</div>
+			</div>
 
-		<div class="row no-gutter">
-			<div class="col-xs-12">
-				<div class="panel panel-default">
-					<div class="panel-heading">
-						<div class="panel-title">
-							<c:if test="${generalLearnerFlowDTO.mapQuestionContentLearner.size() != 1}"><c:out value="${questionEntry.key}" />.&nbsp;</c:if> <c:out value="${questionEntry.value.name}" escapeXml="false" />
-						</div>
+			<div class="card-body">
+				<c:if test="${not empty questionEntry.value.description}">
+					<div class="" id="questionDescription">
+						<c:out value="${questionEntry.value.description}" escapeXml="false" />
 					</div>
+				</c:if>
+				
+				<div class="answer-req text-end">
+					<c:if test="${questionEntry.value.required}">
+						<span class="badge text-bg-danger"><fmt:message key="label.required" /></span>
+					</c:if>
+					<c:if test="${questionEntry.value.minWordsLimit != 0}">
+						<span class="badge text-bg-primary">
+							<fmt:message key="label.words.required" />&nbsp;<span id="words-required-"></span>
+						</span>				
+					</c:if>
+				</div>
 
-					<div class="panel-body">
-						<c:if test="${not empty questionEntry.value.description}">
-							<div class="panel">
-								<c:out value="${questionEntry.value.description}" escapeXml="false" />
-							</div>
-						</c:if>
-						
-						<div class="answer-req">
-							<c:if test="${questionEntry.value.required}">
-									<span class="label label-danger pull-right"><fmt:message key="label.required" /></span>
-							</c:if>
-							<c:if test="${questionEntry.value.minWordsLimit != 0}">
-								<button class="btn btn-xs btn-primary" type="button">
-									<strong><fmt:message key="label.words.required" />&nbsp;</strong><span id="words-required-" class="badge"></span>
-								</button>
-								<div class="voffset5">&nbsp;</div>
-							</c:if>
-						</div>
+				<div class="my-2" id="answerResponse">
+					<label id="yourAnswer" class="d-none"><fmt:message key="label.learning.yourAnswer" /></label>
+					<div data-sequence-id="${questionEntry.key}" data-is-ckeditor="${generalLearnerFlowDTO.allowRichEditor}"
+						data-min-words-limit="${questionEntry.value.minWordsLimit}"
+						<c:if test="${questionEntry.value.minWordsLimit != 0}">class="min-words-limit-enabled"</c:if>>
+						<c:set var="placeholder"><fmt:message key="label.learning.yourAnswer" />...</c:set>
+						<c:choose>
+							<c:when test="${generalLearnerFlowDTO.allowRichEditor}">
+								<lams:CKEditor id="answer" value="${generalLearnerFlowDTO.currentAnswer}"
+								 contentFolderID="${sessionMap.learnerContentFolder}" toolbarSet="DefaultLearner">
+								</lams:CKEditor>
+							</c:when>
 
-						<div data-sequence-id="${questionEntry.key}" data-is-ckeditor="${generalLearnerFlowDTO.allowRichEditor}"
-							data-min-words-limit="${questionEntry.value.minWordsLimit}"
-							<c:if test="${questionEntry.value.minWordsLimit != 0}">class="min-words-limit-enabled"</c:if>>
-							<c:set var="placeholder"><fmt:message key="label.learning.yourAnswer" />...</c:set>
-							<c:choose>
-								<c:when test="${generalLearnerFlowDTO.allowRichEditor}">
-									<lams:CKEditor id="answer" value="${generalLearnerFlowDTO.currentAnswer}"
-										contentFolderID="${sessionMap.learnerContentFolder}" toolbarSet="DefaultLearner">
-									</lams:CKEditor>
-								</c:when>
-
-								<c:otherwise>
-									<lams:textarea name="answer" id="answer" rows="5" placeholder="${placeholder}" class="form-control">
-										<c:out value='${generalLearnerFlowDTO.currentAnswer}' escapeXml='false' />
-									</lams:textarea>
-								</c:otherwise>
-							</c:choose>
-						</div>
-
-						<input type="hidden" name="currentQuestionIndex" value="${questionEntry.key}" />
+							<c:otherwise>
+								<lams:textarea name="answer" id="answer" rows="5" placeholder="${placeholder}" aria-labelledby="yourAnswer" class="form-control">
+									<c:out value='${generalLearnerFlowDTO.currentAnswer}' escapeXml='false' />
+								</lams:textarea>
+							</c:otherwise>
+						</c:choose>
 					</div>
+
+					<input type="hidden" name="currentQuestionIndex" value="${questionEntry.key}" />
 				</div>
 			</div>
 		</div>
+
+		
 	</c:if>
 </c:forEach>
 
@@ -69,24 +69,24 @@
 		<c:when test="${(generalLearnerFlowDTO.currentQuestionIndex == generalLearnerFlowDTO.totalQuestionCount) && 
 				  				  (generalLearnerFlowDTO.totalQuestionCount != 1) }">
 			<button id="btnGetPrevious" type="button" onclick="javascript:submitMethod('getPreviousQuestion');"
-				class="btn btn-sm btn-default voffset10">
+				class="btn btn-sm btn-primary mt-2">
 				<i class="fa fa-arrow-left"></i>
 				<fmt:message key="button.getPreviousQuestion" />
 			</button>
 
-			<div align="right-buttons">
+			<div class="activity-bottom-buttons">
 				<button id="btnDone" type="button" onclick="javascript:submitMethod('submitAnswersContent');"
-					class="btn btn-primary voffset10 pull-right">
+					class="btn btn-primary float-end mt-3">
 					<fmt:message key="button.done" />
 				</button>
 			</div>
 		</c:when>
 
 		<c:when test="${(generalLearnerFlowDTO.currentQuestionIndex == generalLearnerFlowDTO.totalQuestionCount) && 
 				  				  (generalLearnerFlowDTO.totalQuestionCount == 1) }">
-			<div align="right-buttons">
+			<div class="activity-bottom-buttons">
 				<button id="btnDone" type="button" onclick="javascript:submitMethod('submitAnswersContent');"
-					class="btn btn-primary pull-right voffset10">
+					class="btn btn-primary float-end mt-3">
 					<fmt:message key="button.done" />
 				</button>
 			</div>
@@ -95,20 +95,20 @@
 		<c:when test="${generalLearnerFlowDTO.currentQuestionIndex != generalLearnerFlowDTO.totalQuestionCount && 
 				 				  generalLearnerFlowDTO.currentQuestionIndex > 1}">
 			<button id="btnGetPrevious" type="button" onclick="javascript:submitMethod('getPreviousQuestion');"
-				class="btn btn-sm btn-default voffset10">
+				class="btn btn-sm btn-primary mt-2">
 				<i class="fa fa-arrow-left"></i>&nbsp;
 				<fmt:message key="button.getPreviousQuestion" />
 			</button>
 			<button id="btnGetNext" type="button" onclick="javascript:submitMethod('getNextQuestion');"
-				class="btn btn-sm btn-default voffset10 pull-right">
+				class="btn btn-sm btn-primary mt-2 float-end">
 				<fmt:message key="button.getNextQuestion" />
 				&nbsp; <i class="fa fa-arrow-right"></i>
 			</button>
 		</c:when>
 
 		<c:otherwise>
 			<button id="btnGetNext" type="button" onclick="javascript:submitMethod('getNextQuestion');"
-				class="btn btn-sm btn-default voffset10 pull-right">
+				class="btn btn-sm btn-primary mt-2 float-end">
 				<fmt:message key="button.getNextQuestion" />
 				&nbsp; <i class="fa fa-arrow-right"></i>
 			</button>