Index: lams_central/web/css/_jquery.jRating_base.scss
===================================================================
diff -u -r1a6cc3c4f7fa5ff432c34cb13d94ff44d15ccf1b -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_central/web/css/_jquery.jRating_base.scss	(.../_jquery.jRating_base.scss)	(revision 1a6cc3c4f7fa5ff432c34cb13d94ff44d15ccf1b)
+++ lams_central/web/css/_jquery.jRating_base.scss	(.../_jquery.jRating_base.scss)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -61,11 +61,6 @@
 	margin-top: 30px;
 }
 
-.comment-textarea {
-	margin: 0 auto 15px auto;
-	width: 90%;
-}
-
 .rating-comment {
 	padding: 15px;
 	width: 80%;
Index: lams_central/web/css/components.scss
===================================================================
diff -u -r78d4b7fda7982f0f9957d6ab206ce9c741f2eea1 -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_central/web/css/components.scss	(.../components.scss)	(revision 78d4b7fda7982f0f9957d6ab206ce9c741f2eea1)
+++ lams_central/web/css/components.scss	(.../components.scss)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -325,11 +325,6 @@
 	cursor: pointer;
 }
 
-body.component table.table thead th {
-	border: none;
-	border-bottom: 2px solid var(--bs-blue);
-}
-
 body.component table.table tbody td,
 body.component table.table tbody th,
 body.component .ui-jqgrid-bdiv .ui-row-ltr.jqgrow td {
@@ -483,6 +478,7 @@
 	min-height: 100vh;
 	border-radius: 2.8rem;
 	overflow: hidden;
+	background-color: var(--bs-white);
 }
 
 .component-page-wrapper button.no-decoration {
Index: lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/LearningController.java
===================================================================
diff -u -r193e1ddf0d23bb2d90636908378b8dbe4a089dbc -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/LearningController.java	(.../LearningController.java)	(revision 193e1ddf0d23bb2d90636908378b8dbe4a089dbc)
+++ lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/LearningController.java	(.../LearningController.java)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1344,9 +1344,8 @@
 	sessionMap.put(AssessmentConstants.ATTR_ASSESSMENT, assessment);
 	sessionMap.put(AssessmentConstants.CONFIG_KEY_HIDE_TITLES,
 		Boolean.valueOf(service.getConfigValue(AssessmentConstants.CONFIG_KEY_HIDE_TITLES)));
-	boolean newUI = WebUtil.readBooleanParam(request, "newUI", false);
 
-	return "pages/learning/results" + (embedded ? "/allquestions" + (newUI ? "5" : "") : "");
+	return "pages/learning/results" + (embedded ? "/allquestions" : "");
     }
 
     @RequestMapping(path = "/logLearnerInteractionEvent", method = RequestMethod.POST)
Index: lams_tool_assessment/web/includes/css/assessment.scss
===================================================================
diff -u -ra898da07b88fd1549722167d5d557dd96e7ef819 -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/includes/css/assessment.scss	(.../assessment.scss)	(revision a898da07b88fd1549722167d5d557dd96e7ef819)
+++ lams_tool_assessment/web/includes/css/assessment.scss	(.../assessment.scss)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -30,36 +30,65 @@
 	float: left; 
 	padding-right: 5px;
 }
-.ordering-option {
-	vertical-align: middle !important;
-} 
-.question-type {
+
+.card-subheader {
 	padding-bottom: 7px; 
-	font-style: italic;
+	//font-style: italic;
+	font-weight: 500;
+	color: rgba(5, 112, 213,1) !important;
 }
 .question-table {
 	width: 98%;
 }
-.has-radio-button {
-	padding:5px 0px 2px 15px; 
-	width: 5px;
-}
-.has-radio-button-prefix {
-	padding:5px 0px 5px 5px !important; 
-	width: 45px;
-}
-.has-radio-button-prefix-answer {
-	padding-left:0px !important; 
-}
 
 .complete-item-gif {
-	padding:5px 0px 2px 15px; 
-	width: 7px;
+	width: 30px;
 }
 .complete-item-gif img {
 	border:1px;
 }
 
+.feedback {
+	padding-bottom: 10px;
+}
+
+.selected-by-groups {
+	margin-left: 55px;
+}
+
+[data-bs-toggle="collapse"].collapsed .if-not-collapsed,
+[data-bs-toggle="collapse"]:not(.collapsed) .if-collapsed,
+.max-word-limit-exceeded {
+	display: none;
+}
+
+.countdown-timeout {
+	color: #FF3333 !important;
+}
+
+#leader-info {
+	margin-bottom: 10px;
+}
+
+.question-etherpad {
+	padding: 0;
+}
+
+@media (min-width: 0px) and (max-width: 767px) {
+	.discussion-sentiment-start-button {
+		padding: 1px 5px;
+	}
+}
+
+.discussion-sentiment-start-button .fa-comments {
+	color: black !important;
+}
+
+.monitor-question-buttons {
+	text-align: right;
+	float: right;
+}
+
 #pager {
 	text-align: center; 
 	font-size: 110%;
@@ -72,13 +101,6 @@
 	display: none;
 }
 
-.reg-info {
-	margin-top: 10px;
-	margin-left: 10px;
-	margin-bottom: 10px;
-	width: 80%;
-}
-
 .button-disabled {
 	opacity:.2;
 }
@@ -104,6 +126,33 @@
     border-radius: 10px
 }
 
+.div-hover .row {
+    padding: 12px 0 !important;
+}
+.div-table .row {
+	border-bottom: 2px solid var(--bs-gray-200) !important;
+	padding: 0.5rem;
+}
+
+/*----------slider----------------*/
+
+.bootstrap-slider input[type="range"] {
+  width: 210px;
+  margin: 0;
+}
+
+.bootstrap-slider datalist {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  writing-mode: vertical-lr;
+  width: 210px;
+}
+
+.bootstrap-slider option {
+  padding: 0;
+}
+
 /*----------countdown growl----------------*/
 .jGrowl {
   	font-size: 22px;
Index: lams_tool_assessment/web/pages/learning/learning.jsp
===================================================================
diff -u -r4cf35e7c4a45c574ba62a76a3dd47ba7495a23f6 -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 4cf35e7c4a45c574ba62a76a3dd47ba7495a23f6)
+++ lams_tool_assessment/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
-<c:set var="lams"><lams:LAMSURL /></c:set>
+<c:set var="lams"><lams:LAMSURL/></c:set>
 <%-- param has higher level for request attribute --%>
 <c:if test="${not empty param.sessionMapID}">
 	<c:set var="sessionMapID" value="${param.sessionMapID}" />
@@ -18,52 +18,21 @@
 <c:set var="isLeadershipEnabled" value="${assessment.useSelectLeaderToolOuput}"/>
 <!-- hasEditRight=${hasEditRight} -->
 
-<lams:html>
-<lams:head>
-	<title><fmt:message key="label.learning.title" /></title>
-	<%@ include file="/common/header.jsp"%>
-	
-	<link rel="stylesheet" type="text/css" href="${lams}css/jquery-ui-bootstrap-theme.css" />
+<lams:PageLearner title="${assessment.title}" toolSessionID="${toolSessionID}">
+	<link href="<lams:WebAppURL/>includes/css/assessment.css" rel="stylesheet" type="text/css">
 	<link rel="stylesheet" type="text/css" href="${lams}css/jquery.countdown.css" />
 	<link rel="stylesheet" type="text/css" href="${lams}css/jquery.jgrowl.css" />
-	<link rel="stylesheet" type="text/css" href="${lams}css/bootstrap-slider.css" />
 	<c:if test="${not empty codeStyles}">
 		<link rel="stylesheet" type="text/css" href="${lams}css/codemirror.css" />
 		<link rel="stylesheet" type="text/css" href="${lams}css/codemirror_simplescrollbars.css" />
 	</c:if>
-	<style>
-		.slider.slider-horizontal {
-			margin-left: 40px;
-		}
-		
-		.question-etherpad {
-			padding: 0;
-		}
-		
-		[data-bs-toggle="collapse"].collapsed .if-not-collapsed,
-		[data-bs-toggle="collapse"]:not(.collapsed) .if-collapsed,
-		.max-word-limit-exceeded {
-  			display: none;
-  		}
-  		
-  		.countdown-timeout {
-  			color: #FF3333 !important;
-  		}
-  		
-  		#leader-info {
-  			margin-bottom: 10px;
-  		}
-	</style>
 
-	<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.plugin.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.form.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.countdown.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.blockUI.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.jgrowl.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/bootstrap-slider.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/Sortable.js"></script>
-	
 	<c:if test="${not empty codeStyles}">
 		<script type="text/javascript" src="${lams}includes/javascript/codemirror/codemirror.js"></script>
 		<script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/scroll/simplescrollbars.js"></script>
@@ -73,7 +42,6 @@
 			<script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/edit/closebrackets.js"></script>
 			<script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/edit/matchbrackets.js"></script>
 		</c:if>
-
 		<script type="text/javascript">
 			CodeMirror.defaults.readOnly = ${!hasEditRight};
 			CodeMirror.defaults.lineNumbers = true;
@@ -98,7 +66,6 @@
 			</c:when>
 		</c:choose>
 	</c:forEach>
-	
 	<script type="text/javascript">
 		var skipValidation = false;
 		
@@ -123,22 +90,19 @@
 				}).trigger("change");
 			}
 
-			//initialize bootstrap-sliders if "Enable confidence level" option is ON
-			$('.bootstrap-slider').bootstrapSlider();
-
 			//init options sorting feature
 			if (${hasEditRight}) {
-				$("table.ordering-table tbody").each(function () {
+				$(".ordering-question-type").each(function () {
 					new Sortable($(this)[0], {
 					    animation: 150,
 					    ghostClass: 'sortable-placeholder',
 					    direction: 'vertical',
 						store: {
 							set: function (sortable) {
 								//update all sequenceIds in order to later save it as options' order
-								for (var i = 0; i < sortable.el.rows.length; i++) {
-									var tr = sortable.el.rows[i];
-									var input = $("input", $(tr));
+								for (var i = 0; i < sortable.el.children.length; i++) {
+									var divContainingInput = sortable.el.children[i];
+									var input = $("input", $(divContainingInput));
 								    input.val(i);
 								}
 							}
@@ -272,7 +236,8 @@
 		}
 		
 		function displayCountdown(secondsLeft){
-			var countdown = '<div id="countdown"></div>';
+			var countdown = '<div id="countdown" role="timer"></div>' +
+				'<div id="screenreader-countdown" aria-live="polite" class="visually-hidden" aria-atomic="true"></div>';
 			
 			$.blockUI({
 				message: countdown, 
@@ -302,10 +267,31 @@
 					} else {
 						$(this).removeClass('countdown-timeout');
 					}
+
+					//handle screenreaders
+					var screenCountdown = $("#screenreader-countdown");
+					var hours = $("#countdown").countdown('getTimes')[4];
+					var minutes = $("#countdown").countdown('getTimes')[5];
+					if (screenCountdown.data("hours") != hours || screenCountdown.data("minutes") != minutes) {
+						var timeLeftText = "<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.countdown.time.left' /></spring:escapeBody> ";
+						if (hours > 0) {
+							timeLeftText += hours + " <spring:escapeBody javaScriptEscape='true'><fmt:message key='label.hours' /></spring:escapeBody> ";
+						}
+						timeLeftText += minutes + " <spring:escapeBody javaScriptEscape='true'><fmt:message key='label.minutes' /></spring:escapeBody> ";
+						screenCountdown.html(timeLeftText);
+						
+						screenCountdown.data("hours", hours);
+						screenCountdown.data("minutes", minutes);
+					}					
 				},
 				<c:if test="${hasEditRight && (mode != 'teacher')}">
 					onExpiry: function(periods) {
-				        $.blockUI({ message: '<h1 id="timelimit-expired"><i class="fa fa-refresh fa-spin fa-1x fa-fw"></i> <spring:escapeBody javaScriptEscape="true"><fmt:message key="label.learning.blockui.time.is.over" /></spring:escapeBody></h1>' }); 
+				        $.blockUI({ 
+					        message: '<h1 id="timelimit-expired" role="alert">' +
+					        			'<i class="fa fa-refresh fa-spin fa-1x fa-fw"></i> ' +
+					        			'<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.learning.blockui.time.is.over" /></spring:escapeBody>' + 
+					        		 '</h1>' 
+						});  
 				        
 				        setTimeout(function() { 
 				        	submitAll(true);
@@ -315,7 +301,6 @@
 				description: "<div id='countdown-label'><spring:escapeBody javaScriptEscape='true'><fmt:message key='label.learning.countdown.time.left' /></spring:escapeBody></div>"
 			});
 		}
-			
 		
 		//autosave feature
 		<c:if test="${hasEditRight && (mode != 'teacher')}">
@@ -344,8 +329,6 @@
 					this.value = ((ckeditorData == null) || (ckeditorData.replace(/&nbsp;| |<br \/>|\s|<p>|<\/p>|\xa0/g, "").length == 0)) ? "" : ckeditorData;		
 				});
 
-				
-
 				// copy value from lams:textarea (only available in essay and mark hedging type of questions) to hidden input before ajax submit
 				$("textarea[name$=__textarea]").change();
 				
@@ -359,7 +342,10 @@
 			            }
 			            
 		                $.jGrowl(
-		                	"<i class='fa fa-lg fa-floppy-o'></i> <spring:escapeBody javaScriptEscape='true'><fmt:message key='label.learning.draft.autosaved' /></spring:escapeBody>",
+				            "<span aria-live='polite'>" +
+				            	"<i class='fa fa-lg fa-floppy-o'></i> " +
+				            	"<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.learning.draft.autosaved' /></spring:escapeBody>" +
+				            "</span>",
 		                	{ life: 2000, closeTemplate: '' }
 		                );
 	                },
@@ -628,16 +614,14 @@
 			});
 		}
     </script>
-</lams:head>
-<body class="stripes">
 
-	<lams:Page type="learner" title="${assessment.title}">
+	<div class="container-lg">
 		<c:if test="${not empty sessionMap.submissionDeadline && (sessionMap.mode == 'author' || sessionMap.mode == 'learner')}">
-			<lams:Alert id="submission-deadline" type="info" close="true">
+			<lams:Alert5 id="submission-deadline" type="info" close="true">
 				<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>
 		
 		<c:if test="${isLeadershipEnabled}">
@@ -646,57 +630,49 @@
 		</c:if>
 		
 		<c:if test="${assessment.allowDiscloseAnswers}">
-			<lams:Alert type="info" close="true">
+			<lams:Alert5 type="info" close="true">
 				<fmt:message key="label.learning.disclose.tip" />
-			</lams:Alert>
+			</lams:Alert5>
 		</c:if>
 		
 		<c:if test="${hasEditRight}">
-			<lams:Alert type="info" close="true">
+			<lams:Alert5 type="info" close="true">
 				<fmt:message key="label.learning.submit.all.tip" />
-			</lams:Alert>
+			</lams:Alert5>
 		</c:if>
 		
-		<div class="panel">
+		<div id="instructions" class="instructions my-3">
 			<c:out value="${assessment.instructions}" escapeXml="false"/>
 		</div>
 		
-		<lams:Alert id="warning-answers-required" type="warning" close="true">
+		<lams:Alert5 id="warning-answers-required" type="warning" close="true">
 			<fmt:message key="warn.answers.required" />
-		</lams:Alert>
+		</lams:Alert5>
 		
-		<lams:Alert id="warning-words-limit" type="warning" close="true">
+		<lams:Alert5 id="warning-words-limit" type="warning" close="true">
 			<fmt:message key="warn.answers.word.requirements.limit" />
-		</lams:Alert>
+		</lams:Alert5>
 		
-		<lams:Alert id="warning-mark-hedging-wrong-total" type="warning" close="true">
+		<lams:Alert5 id="warning-mark-hedging-wrong-total" type="warning" close="true">
 			<fmt:message key="warn.mark.hedging.wrong.total" />
-		</lams:Alert>
+		</lams:Alert5>
 		
 		<lams:errors/>
-		<br>
 		
-		<div class="form-group">
-			<%@ include file="parts/paging.jsp"%>
-			<br>
-			
+		<%@ include file="parts/paging.jsp"%>
+		
+		<div id="all-questions">	
 			<%@ include file="parts/allquestions.jsp"%>
-			
-			<%@ include file="parts/paging.jsp"%>
 		</div>
+			
+		<%@ include file="parts/paging.jsp"%>
 
-		<c:if test="${mode != 'teacher'}">
-			<div class="activity-bottom-buttons">
-				<c:if test="${hasEditRight}">
-					<button type="button" name="submitAll"
-						onclick="return submitAll(false);" class="btn btn-primary na">
-						<fmt:message key="label.learning.submit.all" />
-					</button>
-				</c:if>
-			</div>
-		</c:if>
-
-	</lams:Page>
-
-</body>
-</lams:html>
\ No newline at end of file
+		<div class="activity-bottom-buttons">
+			<c:if test="${mode != 'teacher' && hasEditRight}">
+				<button type="button" name="submitAll" onclick="return submitAll(false);" class="btn btn-primary na">
+					<fmt:message key="label.learning.submit.all" />
+				</button>
+			</c:if>
+		</div>
+	</div>
+</lams:PageLearner>
Index: lams_tool_assessment/web/pages/learning/notebook.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_assessment/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,58 +1,11 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
-<c:set var="sessionMapID" value="${param.sessionMapID}" />
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
-	
-<lams:html>
-<lams:head>
-	<title><fmt:message key="label.learning.title" />
-	</title>
-	<%@ include file="/common/header.jsp"%>
-	
-	<lams:JSImport src="learning/includes/javascript/gate-check.js" />
-	<script type="text/javascript">
-		 checkNextGateActivity('finishButton', '${sessionMap.toolSessionID}', '', function(){
-			$('#reflectionForm').submit();
-		 });
-	 
-		function disableFinishButton() {
-			document.getElementById("finishButton").disabled = true;
-		}
-	    $(document).ready(function(){
-	    	window.onload = function() {
-	    		document.getElementById("focused").focus();
-	    	}
-	    });
-	</script>
-</lams:head>
-<body class="stripes">
-	<lams:Page type="learner" title="${sessionMap.title}">
-	
-		<form:form action="submitReflection.do" method="post" onsubmit="disableFinishButton();" modelAttribute="reflectionForm" id="reflectionForm">
-			<form:hidden path="userID" />
-			<form:hidden path="sessionMapID" />
 
-			<lams:errors/>
-
-			<div class="panel">
-				<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
-			</div>
-
-			<form:textarea rows="5" path="entryText" cssClass="form-control" id="focused" />
-
-			<button type="submit" class="btn btn-primary voffset10 float-end na" id="finishButton">
-				<c:choose>
-					<c:when test="${sessionMap.isLastActivity}">
-						<fmt:message key="label.submit" />
-					</c:when>
-					<c:otherwise>
-						<fmt:message key="label.finished" />
-					</c:otherwise>
-				</c:choose>
-			</button>
-				
-		</form:form>
-
-	</lams:Page>
-</body>
-</lams:html>
+<lams:Notebook title="${sessionMap.title}"
+	toolSessionID="${sessionMap.toolSessionID}"
+	instructions="${sessionMap.reflectInstructions}"
+	formActionUrl="/learning/submitReflection.do"
+	isNextActivityButtonSupported="true"
+	isLastActivity="${sessionMap.isLastActivity}" 
+	notebookLabelKey="titleHeading.reflection"/>
\ No newline at end of file
Index: lams_tool_assessment/web/pages/learning/parts/allquestions.jsp
===================================================================
diff -u -r4cf35e7c4a45c574ba62a76a3dd47ba7495a23f6 -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/parts/allquestions.jsp	(.../allquestions.jsp)	(revision 4cf35e7c4a45c574ba62a76a3dd47ba7495a23f6)
+++ lams_tool_assessment/web/pages/learning/parts/allquestions.jsp	(.../allquestions.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -3,52 +3,60 @@
 <c:if test="${isQuestionEtherpadEnabled and not empty allGroupUsers}">
 	<%-- Prepare same content for each question Etherpad. Each group participant's first and last name --%>
 	<c:set var="questionEtherpadContent">
-		<c:forEach items="${allGroupUsers}" var="user"><c:out value="${user.firstName}" />&nbsp;<c:out value="${user.lastName}" />:<br />
-	<br />
-	<br /></c:forEach>
+		<c:forEach items="${allGroupUsers}" var="user">
+			<c:out value="${user.firstName}" />&nbsp;<c:out
+				value="${user.lastName}" />:<br />
+			<br />
+			<br />
+		</c:forEach>
 	</c:set>
 </c:if>
 
 <form id="answers" name="answers" method="post" action="<c:url value='/learning/submitAll.do?sessionMapID=${sessionMapID}'/>">
 	<c:forEach var="question" items="${sessionMap.pagedQuestions[pageNumber-1]}" varStatus="status">
-						
-		<input type="hidden" name="questionUid${status.index}" id="questionUid${status.index}" value="${question.uid}" />						
+		<c:set var="questionIndex" value="${status.index}"/>
+		<input type="hidden" name="questionUid${questionIndex}" id="questionUid${questionIndex}" value="${question.uid}" />						
 							
-		<div class="panel panel-default">
-			<div class="panel-heading">
-				<h3 class="panel-title" style="margin-bottom: 10px;font-size: initial;">
-					<c:if test="${assessment.numbered}">
-							${status.index + sessionMap.questionNumberingOffset}.
+		<div class="card lcard">
+			<div class="card-header">
+				<div class="card-title">
+					<span id="question-title-${questionIndex}">
+						<c:if test="${assessment.numbered}">
+							${questionIndex + sessionMap.questionNumberingOffset}.
+						</c:if>
+		  				
+		  				<c:if test="${not sessionMap.hideTitles}">
+							${question.title}
+						</c:if>
+					</span>
+
+					<c:if test="${assessment.displayMaxMark}">
+						<span class="float-end badge alert alert-info fw-normal m-1 p-2">
+							<fmt:message key="label.learning.max.mark">
+								<fmt:param value="${question.maxMark}" />
+							</fmt:message>
+						</span>
 					</c:if>
-	  				
-	  				<c:if test="${not sessionMap.hideTitles}">
-						${question.title}
+										
+					<c:if test="${question.answerRequired}">
+						<span class="asterisk float-end"> 
+							<i class="fa fa-xs fa-asterisk text-danger"
+							title="<fmt:message key="label.answer.required"/>"
+							alt="<fmt:message key="label.answer.required"/>"></i>
+						</span>
 					</c:if>
-				</h3>
+				</div>
 
-				<c:if test="${assessment.displayMaxMark}">
-					<span class="float-end small loffset10" style="padding-top: 3px">
-						<fmt:message key="label.learning.max.mark">
-							<fmt:param value="${question.maxMark}" />
-						</fmt:message>
-					</span>
-				</c:if>
-									
-				<c:if test="${question.answerRequired}">
-					<span class="asterisk float-end">
-						<i class="fa fa-xs fa-asterisk text-danger" title="<fmt:message key="label.answer.required"/>" 
-								alt="<fmt:message key="label.answer.required"/>"></i>
-					</span>
-				</c:if>
-							
-				<c:if test="${empty question.question}">
-					<!--  must have something here otherwise the question-numbers span does not float properly -->
-					&nbsp;
-				</c:if>
-				${question.question}
+				<div class="font-size-init" id="question-description-${question.uid}">
+					<c:if test="${empty question.question}">
+						<!--  must have something here otherwise the question-numbers span does not float properly -->
+						&nbsp;
+					</c:if>
+					${question.question}
+				</div>
 			</div>
 					
-			<div class="panel-body question-area" id="question-area-${status.index}">
+			<div class="card-body question-area" id="question-area-${questionIndex}">
 				<c:choose>
 					<c:when test="${question.type == 1}">
 						<c:set var="justificationEligible" value="true" />
@@ -80,8 +88,6 @@
 					</c:when>
 					<c:when test="${question.type == 8}">
 						<c:set var="justificationEligible" value="true" />
-						<c:set var="questionIndex" value="${status.index}"/>
-						
 						<c:choose>
 							<c:when test="${question.responseSubmitted}">
 								<%@ include file="../results/markhedging.jsp"%>
@@ -102,35 +108,44 @@
 				<%--Display jsutification for each question --%>
 				<c:if test="${(assessment.allowAnswerJustification || (question.type == 8 && question.hedgingJustificationEnabled)) 
 							&& justificationEligible && (!isLeadershipEnabled or isUserLeader)}">
-					<div class="form-group answer-justification-container voffset20">
-						<a data-bs-toggle="collapse" data-bs-target="#answer-justification-${question.uid}" role="button" class="collapsed">
-							<span class="if-collapsed"><i class="fa fa-xs fa-plus-square-o roffset5" aria-hidden="true"></i></span>
-				 				<span class="if-not-collapsed"><i class="fa fa-xs fa-minus-square-o roffset5" aria-hidden="true"></i></span>
+					<div class="answer-justification-container mt-4 mb-3">
+						<button type="button" data-bs-toggle="collapse"
+							data-bs-target="#answer-justification-${questionIndex}"
+							class="btn btn-light btn-sm collapsed card-subheader"
+							id="justification-button-${questionIndex}"
+						>
+							<span class="if-collapsed"> 
+								<i class="fa-regular fa-square-plus fa-xs me-2" aria-hidden="true"></i>
+							</span> 
+							<span class="if-not-collapsed"> 
+								<i class="fa-regular fa-square-minus fa-xs me-2" aria-hidden="true"></i>
+							</span>
 							<fmt:message key="label.answer.justification" />
-						</a>
-						
-						<div id="answer-justification-${question.uid}" class="collapse">
-							<textarea name="answerJustification${status.index}" class="form-control" rows="6" 
+						</button>
+
+						<div id="answer-justification-${questionIndex}" class="collapse">
+							<textarea name="answerJustification${questionIndex}" class="form-control mt-2" rows="6" 
 									  placeholder='<fmt:message key="label.answer.justification.prompt"/>'
+									  aria-labelledby="question-title-${questionIndex} justification-button-${questionIndex}"
 							>${question.justification}</textarea>
 						</div>
 					</div>
 				</c:if>
-				
-			</div>
-					
+			</div>		
 		</div>
 		
-
-		
 		<%--Display Etherpad for each question --%>
 		<c:if test="${isQuestionEtherpadEnabled}">
-			<div class="form-group question-etherpad-container">
-				<a data-bs-toggle="collapse" data-bs-target="#question-etherpad-${question.uid}" role="button" class="collapsed">
-					<span class="if-collapsed"><i class="fa fa-xs fa-plus-square-o roffset5" aria-hidden="true"></i></span>
-		 				<span class="if-not-collapsed"><i class="fa fa-xs fa-minus-square-o roffset5" aria-hidden="true"></i></span>
+			<div class="question-etherpad-container mb-3">
+				<button type="button" data-bs-toggle="collapse" data-bs-target="#question-etherpad-${question.uid}" class="btn btn-light btn-sm collapsed">
+					<span class="if-collapsed">
+						<i class="fa-regular fa-square-plus fa-xs me-2" aria-hidden="true"></i>
+					</span>
+		 			<span class="if-not-collapsed">
+		 				<i class="fa-regular fa-square-minus fa-xs me-2" aria-hidden="true"></i>
+		 			</span>
 					<fmt:message key="label.etherpad.discussion" />
-				</a>
+				</button>
 				
 				<div id="question-etherpad-${question.uid}" class="question-etherpad-collapse collapse">
 					<div class="panel panel-default question-etherpad">
Index: lams_tool_assessment/web/pages/learning/parts/confidencelevel.jsp
===================================================================
diff -u -r6b89d0c84a5695fb1ad02d5525eb240a9f4d3134 -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/parts/confidencelevel.jsp	(.../confidencelevel.jsp)	(revision 6b89d0c84a5695fb1ad02d5525eb240a9f4d3134)
+++ lams_tool_assessment/web/pages/learning/parts/confidencelevel.jsp	(.../confidencelevel.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,35 +1,39 @@
 <%@ include file="/common/taglibs.jsp"%>
 <c:choose>
 	<c:when test="${assessment.confidenceLevelsType == 2}">
-		<c:set var="confidenceLabels">["<fmt:message key="label.not.confident" />", "<fmt:message key="label.confident" />", "<fmt:message key="label.very.confident" />"]</c:set>
+		<c:set var="sliderLabels"><fmt:message key="label.not.confident" />;<fmt:message key="label.confident" />;<fmt:message key="label.very.confident" /></c:set>
+		<c:set var="sliderStep">5</c:set>
 	</c:when>
 	<c:when test="${assessment.confidenceLevelsType == 3}">
-		<c:set var="confidenceLabels">["<fmt:message key="label.not.sure" />", "<fmt:message key="label.sure" />", "<fmt:message key="label.very.sure" />"]</c:set>
+		<c:set var="sliderLabels"><fmt:message key="label.not.sure" />;<fmt:message key="label.sure" />;<fmt:message key="label.very.sure" /></c:set>
+		<c:set var="sliderStep">5</c:set>
 	</c:when>
 	<c:otherwise>
-		<c:set var="confidenceLabels">["0", "50", "100%"]</c:set> 
+		<c:set var="sliderLabels">0%;50%;100%</c:set> 
+		<c:set var="sliderStep">1</c:set>
 	</c:otherwise>
 </c:choose>
+<c:set var="sliderLabelsArray" value="${fn:split(sliderLabels, ';')}" />
 
-<div class="question-type">
-	<fmt:message key="label.what.is.your.confidence.level" />
+<div class="bootstrap-slider mt-4">
+	<div class="card-subheader">
+		<label for="confidenceLevel${questionIndex}">
+			<fmt:message key="label.what.is.your.confidence.level" />
+		</label>
+	</div>
+	
+	<div>
+		<input type="range" name="confidenceLevel${questionIndex}" id="confidenceLevel${questionIndex}" 
+			list="slider-step-list-${question.uid}" 
+			min="0" max="10" step="${sliderStep}" 
+			<c:if test="${question.confidenceLevel != -1}">value="${question.confidenceLevel}"</c:if>
+			<c:if test="${!hasEditRight}">disabled</c:if>
+		>
+		<datalist id="slider-step-list-${question.uid}">
+			<option value="0" label="${sliderLabelsArray[0]}"/>
+			<option value="5" label="${sliderLabelsArray[1]}"/>
+			<option value="10" label="${sliderLabelsArray[2]}"/>
+		</datalist>
+	</div>
 </div>
 
-<div>
-	<input name="confidenceLevel${status.index}" class="bootstrap-slider" type="text"
-		data-slider-enabled="${hasEditRight}" data-slider-tooltip="hide"
-		<c:if test="${question.confidenceLevel != -1}">data-slider-value="${question.confidenceLevel}"</c:if>
-		data-slider-ticks-labels='${confidenceLabels}'
-		<c:choose>
-			<c:when test="${assessment.confidenceLevelsType == 2}">
-				data-slider-ticks="[0, 5, 10]"  data-slider-step="5"
-			</c:when>
-			<c:when test="${assessment.confidenceLevelsType == 3}">
-				data-slider-ticks="[0, 5, 10]" data-slider-step="5"
-			</c:when>
-			<c:otherwise>
-				data-slider-ticks="[0, 5, 10]" 
-			</c:otherwise>
-		</c:choose>
-		/>
-</div>
\ No newline at end of file
Index: lams_tool_assessment/web/pages/learning/parts/essay.jsp
===================================================================
diff -u -r7f7dad397eb6aa9321ea2aff135160b525270840 -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/parts/essay.jsp	(.../essay.jsp)	(revision 7f7dad397eb6aa9321ea2aff135160b525270840)
+++ lams_tool_assessment/web/pages/learning/parts/essay.jsp	(.../essay.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,31 +1,30 @@
 <%@ include file="/common/taglibs.jsp"%>
 <c:set var="isWordsLimitEnabled" value="${hasEditRight && (question.maxWordsLimit != 0 || question.minWordsLimit != 0)}"/>
 
-<c:if test="${isWordsLimitEnabled}">
 <script type="text/javascript">
-	
+<c:if test="${isWordsLimitEnabled}">
 	$(document).ready(function() {
 		var isCkeditor = ${question.allowRichEditor};
 			
 		if (isCkeditor) {
-			var ckeditor = CKEDITOR.instances['question${status.index}'];
+			var ckeditor = CKEDITOR.instances['question${questionIndex}'];
 			// each event needs to be specified separately
 			ckeditor.on('change', function(){
-				$('#word-count${status.index}').html(this.wordCount.wordCount);
+				$('#word-count${questionIndex}').html(this.wordCount.wordCount);
 			});
 			ckeditor.on('paste', function(){
-				$('#word-count${status.index}').html(this.wordCount.wordCount);
+				$('#word-count${questionIndex}').html(this.wordCount.wordCount);
 			});
 			ckeditor.on('blur', function(){
-				$('#word-count${status.index}').html(this.wordCount.wordCount);
+				$('#word-count${questionIndex}').html(this.wordCount.wordCount);
 			});
 			
 			// trigger count after load
 			ckeditor.on('instanceReady', function() {
 				ckeditor.fire('change');
 			});
 		} else {
-			$("#essay-question${status.index}").on('change keyup keydown paste', function(event){
+			$("#essay-question${questionIndex}").on('change keyup keydown paste', function(event){
 				var newText = '';
 				
 				// if it is a single key typed
@@ -43,7 +42,7 @@
 					newText = newText.getData('Text');
 				}
 				
-				var value = $("#essay-question${status.index}").val() + newText,
+				var value = $("#essay-question${questionIndex}").val() + newText,
 			    	wordCount = getNumberOfWords(value),
 			    	maxWordsLimit = ${question.maxWordsLimit};
 			    	
@@ -66,96 +65,118 @@
 						}
 				    }
 				
-				$('#word-count${status.index}').html(wordCount);
+				$('#word-count${questionIndex}').html(wordCount);
 			}).change();
 		}
 	});
-</script>
 </c:if>
 
-<c:if test="${not empty question.codeStyle}">
-	<script type="text/javascript">
+	<c:if test="${not empty question.codeStyle}">
 		// initialise syntax highlighter depending on programming language
 		$(document).ready(function() {
-			var codeArea = $('#essay-question${status.index}'),
+			var codeArea = $('#essay-question${questionIndex}'),
 				codeMirror = CodeMirror.fromTextArea(codeArea[0], {
 					'mode' : '${question.codeStyleMime}'
 				}),
 				// on the back end we keep essay answer lines <BR>-separated, but CodeMirror uses \n
 				content = codeMirror.getValue().replaceAll('<BR>', '\n');
 			codeMirror.setValue(content);
 		});
-	</script>
-</c:if>
+	</c:if>
+</script>
 
-<div class="question-type">
-	<fmt:message key="label.learning.short.answer.answer" />
+<div class="card-subheader" id="instructions-${questionIndex}">
+	<label for="essay-question${questionIndex}">
+		<fmt:message key="label.learning.short.answer.answer" />
+	</label>
 </div>
 
-<div class="table-responsive">
-	<table class="table table-condensed">
-		<c:if test="${isWordsLimitEnabled}">
-			<tr>
-				<td>
-					<c:choose>
-						<c:when test="${question.maxWordsLimit != 0 && question.minWordsLimit != 0}">
-							<div class="reg-info">
-								<fmt:message key="label.info.max.and.min.number.words" >
-									<fmt:param>${question.minWordsLimit}</fmt:param>
-									<fmt:param>${question.maxWordsLimit}</fmt:param>
-								</fmt:message>
-							</div>
-							<div class="reg-info max-word-limit-exceeded text-danger">
-								<fmt:message key="warn.maximum.number.words" />
-							</div>
-						</c:when>
-						<c:when test="${question.maxWordsLimit != 0}">
-							<div class="reg-info">
-								<fmt:message key="label.info.maximum.number.words" >
-									<fmt:param>${question.maxWordsLimit}</fmt:param>
-								</fmt:message>
-							</div>
-							<div class="reg-info max-word-limit-exceeded text-danger">
-								<fmt:message key="warn.maximum.number.words" />
-							</div>
-						</c:when>
-						<c:when test="${question.minWordsLimit != 0}">
-							<div class="reg-info">
-								<fmt:message key="label.info.minimum.number.words" >
-									<fmt:param>${question.minWordsLimit}</fmt:param>
-								</fmt:message>
-							</div>
-						</c:when>
-					</c:choose>
-				</td>
-			</tr>
-		</c:if>
-	
-		<tr>
-			<td>
-				<c:choose>
-					<c:when test="${question.allowRichEditor && hasEditRight}">
-						<lams:CKEditor id="question${status.index}" value="${question.answer}" contentFolderID="${sessionMap.learnerContentFolder}" toolbarSet="DefaultLearner" height="174px" maxWords="${question.maxWordsLimit}"></lams:CKEditor>
-					</c:when>
-					<c:when test="${not empty question.codeStyle}">
-						<textarea id="essay-question${status.index}" name="question${status.index}">${question.answer}</textarea>
-					</c:when>
-					<c:when test="${not hasEditRight}">
-						${question.answer}
-					</c:when>
-					<c:otherwise>
-						<lams:textarea id="essay-question${status.index}" name="question${status.index}" class="form-control" rows="8">${question.answer}</lams:textarea>
-					</c:otherwise>
-				</c:choose>
-			</td>
-		</tr>
-		
-		<c:if test="${isWordsLimitEnabled}">
-			<tr>
-				<td>
-					<fmt:message key="label.words" /> <span id="word-count${status.index}">0</span>
-				</td>
-			</tr>
-		</c:if>
-	</table>
+<div>
+	<c:if test="${isWordsLimitEnabled}">
+		<c:choose>
+			<c:when test="${question.maxWordsLimit != 0 && question.minWordsLimit != 0}">
+				<div class="alert" role="alert">
+					<span class="alert alert-info">
+						<fmt:message key="label.info.max.and.min.number.words">
+							<fmt:param>${question.minWordsLimit}</fmt:param>
+							<fmt:param>${question.maxWordsLimit}</fmt:param>
+						</fmt:message>
+					</span>
+				</div>
+				
+				<div class="alert max-word-limit-exceeded" role="alert">
+					<span class="alert alert-danger">
+						<fmt:message key="warn.maximum.number.words" />
+					</span>
+				</div>
+			</c:when>
+			
+			<c:when test="${question.maxWordsLimit != 0}">
+				<div class="alert" role="alert">
+					<span class="alert alert-info">
+						<fmt:message key="label.info.maximum.number.words">
+							<fmt:param>${question.maxWordsLimit}</fmt:param>
+						</fmt:message>
+					</span>
+				</div>
+				
+				<div class="alert max-word-limit-exceeded" role="alert">
+					<span class="alert alert-danger">
+						<fmt:message key="warn.maximum.number.words" />
+					</span>
+				</div>
+			</c:when>
+			
+			<c:when test="${question.minWordsLimit != 0}">
+				<div class="alert" role="alert">
+					<span class="alert alert-info">
+						<fmt:message key="label.info.minimum.number.words">
+							<fmt:param>${question.minWordsLimit}</fmt:param>
+						</fmt:message>
+					</span>
+				</div>
+			</c:when>
+		</c:choose>
+	</c:if>
+
+	<div>
+		<c:choose>
+			<c:when test="${question.allowRichEditor && hasEditRight}">
+				<lams:CKEditor id="essay-question${questionIndex}"
+					value="${question.answer}"
+					contentFolderID="${sessionMap.learnerContentFolder}"
+					toolbarSet="DefaultLearner" height="174px"
+					maxWords="${question.maxWordsLimit}"
+					ariaLabelledby="question-title-${questionIndex} instructions-${questionIndex}"
+					ariaRequired="${question.answerRequired}"
+					></lams:CKEditor>
+			</c:when>
+			
+			<c:when test="${not empty question.codeStyle}">
+				<textarea id="essay-question${questionIndex}" name="question${questionIndex}"
+					aria-labelledby="question-title-${questionIndex} instructions-${questionIndex}"
+					${question.answerRequired? 'aria-required="true" required="true"' : ''}
+				>${question.answer}</textarea>
+			</c:when>
+			
+			<c:when test="${not hasEditRight}">
+				${question.answer}
+			</c:when>
+			
+			<c:otherwise>
+				<lams:textarea id="essay-question${questionIndex}"
+					name="question${questionIndex}" class="form-control" rows="8"
+					aria-labelledby="question-title-${questionIndex} instructions-${questionIndex}"
+					aria-describedby="question-description-${question.uid}"
+					aria-required="${question.answerRequired}"
+				>${question.answer}</lams:textarea>
+			</c:otherwise>
+		</c:choose>
+	</div>
+
+	<c:if test="${isWordsLimitEnabled}">
+		<div class="mt-1">
+			<fmt:message key="label.words" /> <span id="word-count${questionIndex}">0</span>
+		</div>
+	</c:if>
 </div>
Index: lams_tool_assessment/web/pages/learning/parts/markhedging.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/parts/markhedging.jsp	(.../markhedging.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_assessment/web/pages/learning/parts/markhedging.jsp	(.../markhedging.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,41 +1,39 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<div class="question-type">
+<div class="card-subheader" id="instructions-${questionIndex}">
 	<fmt:message key="label.assign.hedging.mark">
 		<fmt:param>${question.maxMark}</fmt:param>
 	</fmt:message>
 </div>
 
-<div class="table-responsive">
-	<table class="table table-hover table-condensed">
-		<c:forEach var="option" items="${question.optionDtos}">
-			<tr>
-				<td>
-					<c:out value="${option.name}" escapeXml="false" />
-				</td>
+<div class="table table-sm div-hover px-3">
+	<c:forEach var="option" items="${question.optionDtos}">
+		<div class="row">
+			<div class="col" id="option-name-${option.uid}">
+				<c:out value="${option.name}" escapeXml="false" />
+			</div>
 				
-				<td style="width: 100px;">
-					<select name="question${questionIndex}_${option.uid}" class="mark-hedging-select" data-question-index="${questionIndex}"
-						<c:if test="${!hasEditRight}">disabled="disabled"</c:if>				
-					>
-						
-						<c:forEach var="i" begin="0" end="${question.maxMark}">
-							<option
-								<c:if test="${option.answerInt == i}">selected="selected"</c:if>						
-							>${i}</option>
-						</c:forEach>
-						
-					</select>
-				</td>				
-			</tr>
-		</c:forEach>
-	</table>
+			<div style="width: 60px;">
+				<select name="question${questionIndex}_${option.uid}" class="mark-hedging-select" data-question-index="${questionIndex}"
+					<c:if test="${!hasEditRight}">disabled="disabled"</c:if>
+					aria-labelledby="instructions-${questionIndex} option-name-${option.uid}"
+					${question.answerRequired? 'aria-required="true" required="true"' : ''}			
+				>
+					<c:forEach var="i" begin="0" end="${question.maxMark}">
+						<option
+							<c:if test="${option.answerInt == i}">selected="selected"</c:if>						
+						>${i}</option>
+					</c:forEach>
+				</select>
+			</div>				
+		</div>
+	</c:forEach>
 </div>
 
 <c:if test="${isLeadershipEnabled && isUserLeader}">
-	<div class="float-right">
-		<button type="button" name="submit-hedging-question${questionIndex}" onclick="return submitSingleMarkHedgingQuestion(${question.uid}, ${questionIndex});" 
-				class="btn float-end">
+	<div>
+		<button type="button" name="submit-hedging-question${questionIndex}" onclick="submitSingleMarkHedgingQuestion(${question.uid}, ${questionIndex});" 
+				class="btn btn-sm btn-secondary float-end me-2">
 			<fmt:message key="label.learning.submit" />
 		</button>
 	</div>
Index: lams_tool_assessment/web/pages/learning/parts/matchingpairs.jsp
===================================================================
diff -u -r6f59d1b57843500bf2a226bfea958cc2b9d795ee -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/parts/matchingpairs.jsp	(.../matchingpairs.jsp)	(revision 6f59d1b57843500bf2a226bfea958cc2b9d795ee)
+++ lams_tool_assessment/web/pages/learning/parts/matchingpairs.jsp	(.../matchingpairs.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,10 +1,10 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<div class="question-type">
+<div class="card-subheader" id="instructions-${questionIndex}">
 	<fmt:message key="label.learning.matching.pairs.pick.up" />
 </div>
 
-<div class="question-type">
+<div class="fst-italic">
 	<fmt:message key="label.learning.matching.pairs.possible" />
 	<ul>
 		<c:forEach var="possibleOption" items="${question.matchingPairOptions}">
@@ -13,29 +13,32 @@
 	</ul>
 </div>
 
-<div class="table-responsive">
-	<table class="table table-hover table-condensed">
-		<c:forEach var="option" items="${question.optionDtos}">
-			<tr>
-				<td>
-					<c:out value="${option.matchingPair}" escapeXml="false" />
-				</td>
+<div class="table table-sm div-hover px-3">
+	<c:forEach var="option" items="${question.optionDtos}">
+		<div class="row">
+			<div class="col" id="option-name-${option.uid}">
+				<c:out value="${option.matchingPair}" escapeXml="false" />
+			</div>
 				
-				<td style="width: 100px;">
-					<select name="question${status.index}_${option.uid}" <c:if test="${!hasEditRight}">disabled="disabled"</c:if>>
-						<option value="-1">
-							<fmt:message key="label.learning.matching.pairs.choose" />
-						</option>
+			<div style="width: 250px;">
+				<select name="question${questionIndex}_${option.uid}" 
+					<c:if test="${!hasEditRight}">disabled="disabled"</c:if>
+					${question.answerRequired? 'aria-required="true" required="true"' : ''}
+					aria-labelledby="option-name-${option.uid} instructions-${questionIndex}"
+				>						
+					<option value="-1">
+						<fmt:message key="label.learning.matching.pairs.choose" />
+					</option>
 						
-						<c:forEach var="selectOption" items="${question.matchingPairOptions}">
-							<option value="${selectOption.uid}"
-								<c:if test="${option.answerInt == selectOption.uid}">selected="selected"</c:if>>
-								${selectOption.name}
-							</option>
-						</c:forEach>
-					</select>
-				</td>
-			</tr>
-		</c:forEach>
-	</table>
-</div>
\ No newline at end of file
+					<c:forEach var="selectOption" items="${question.matchingPairOptions}">
+						<option value="${selectOption.uid}"
+							<c:if test="${option.answerInt == selectOption.uid}">selected="selected"</c:if>
+						>
+							${selectOption.name}
+						</option>
+					</c:forEach>
+				</select>
+			</div>
+		</div>
+	</c:forEach>
+</div>
Index: lams_tool_assessment/web/pages/learning/parts/multiplechoice.jsp
===================================================================
diff -u -r292df3a6fb3cce2b31c9d9ee33c61bbe931e58ab -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/parts/multiplechoice.jsp	(.../multiplechoice.jsp)	(revision 292df3a6fb3cce2b31c9d9ee33c61bbe931e58ab)
+++ lams_tool_assessment/web/pages/learning/parts/multiplechoice.jsp	(.../multiplechoice.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,6 +1,5 @@
 <%@ include file="/common/taglibs.jsp"%>
-
-<div class="question-type">
+<c:set var="mcqInstructions">
 	<c:choose>
 		<c:when test="${question.multipleAnswersAllowed}">
 			<fmt:message key="label.learning.choose.at.least.one.answer" />
@@ -9,45 +8,56 @@
 			<fmt:message key="label.learning.choose.one.answer" />
 		</c:otherwise>
 	</c:choose>
+</c:set>
+
+<div class="card-subheader" id="instructions-${questionIndex}">
+	${mcqInstructions}
 </div>
 
-<div class="table-responsive">
-	<table class="table table-hover table-condensed">
+<fieldset>
+	<legend class="visually-hidden">
+		${mcqInstructions}
+	</legend>
+		
+	<div class="table table-sm div-hover px-3">
 		<c:forEach var="option" items="${question.optionDtos}"  varStatus="answerStatus">
-			
-			<tr>
-				<td class="${question.prefixAnswersWithLetters?'has-radio-button-prefix':'has-radio-button'}">
+			<div class="row">
+				<div class="col">
 					<c:choose>
 						<c:when test="${question.multipleAnswersAllowed}">
-							<c:set var="inputName">question${status.index}_${option.uid}</c:set>
+							<c:set var="inputName">question${questionIndex}_${option.uid}</c:set>
 							<c:set var="inputId" value="${inputName}" />
-							<input type="checkbox" name="${inputName}" id="${inputId}" value="${true}"
-								   onclick="javascript:logLearnerInteractionEvent($(this).is(':checked') ? 2 : 3, ${question.uid}, ${option.uid})" 
+							<input type="checkbox" name="${inputName}" id="${inputId}" class="me-2"
+									value="${true}"
+								    onclick="javascript:logLearnerInteractionEvent($(this).is(':checked') ? 2 : 3, ${question.uid}, ${option.uid})" 
 		 						<c:if test="${option.answerBoolean}">checked="checked"</c:if>
 								<c:if test="${!hasEditRight}">disabled="disabled"</c:if>
+								aria-labelledby="option-name-${option.uid}"
 							/>
 						</c:when>
+						
 						<c:otherwise>
-							<c:set var="inputName">question${status.index}</c:set>
+							<c:set var="inputName">question${questionIndex}</c:set>
 							<c:set var="inputId">${inputName}_${option.uid}</c:set>
-							<input type="radio" name="${inputName}" id="${inputId}" value="${option.uid}"
-								   onclick="javascript:logLearnerInteractionEvent(1, ${question.uid}, ${option.uid})" 
+							<input type="radio" name="${inputName}" id="${inputId}" class="me-2"
+									value="${option.uid}"
+								    onclick="javascript:logLearnerInteractionEvent(1, ${question.uid}, ${option.uid})" 
 		 						<c:if test="${option.answerBoolean}">checked="checked"</c:if>
 		 						<c:if test="${!hasEditRight}">disabled="disabled"</c:if>
+		 						aria-labelledby="option-name-${option.uid}"
 							/>
 						</c:otherwise>
 					</c:choose>
+					
 			 		<c:if test="${question.prefixAnswersWithLetters}">
 			 			&nbsp;${option.formatPrefixLetter(answerStatus.index)}
- 	                </c:if>				
-				</td>
-				
-				<td ${question.prefixAnswersWithLetters?'class="has-radio-button-prefix-answer"':''}">
-					<label for="${inputId}">
+	 	              </c:if>
+					
+					<label for="${inputId}" id="option-name-${option.uid}">
 						<c:out value="${option.name}" escapeXml="false" />
 					</label>
-				</td>
-			</tr>
+				</div>
+			</div>
 		</c:forEach>
-	</table>
-</div>
+	</div>
+</fieldset>
Index: lams_tool_assessment/web/pages/learning/parts/numerical.jsp
===================================================================
diff -u -rb572d63caa0dd458b32ca8962d4dfc230b80680a -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/parts/numerical.jsp	(.../numerical.jsp)	(revision b572d63caa0dd458b32ca8962d4dfc230b80680a)
+++ lams_tool_assessment/web/pages/learning/parts/numerical.jsp	(.../numerical.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,19 +1,15 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<div class="question-type">
-	<fmt:message key="label.learning.short.answer.answer" />
+<div class="card-subheader" id="instructions-${questionIndex}">
+	<label for="question${questionIndex}">
+		<fmt:message key="label.learning.short.answer.answer" />
+	</label>
 </div>
 
-<div class="table-responsive">
-	<table class="table table-hover table-condensed">
-		<tr>
-			<td>
-				<input type="text" autocomplete="off" name="question${status.index}" value="<c:out value='${question.answer}' />"
-					   onkeydown="return event.key != 'Enter';"
-					   class="form-control"
-					<c:if test="${!hasEditRight}">disabled="disabled"</c:if>
-				/>	
-			</td>
-		</tr>
-	</table>
-</div>
+<input type="text" autocomplete="off" name="question${questionIndex}" id="question${questionIndex}" value="<c:out value='${question.answer}' />"
+	onkeydown="return event.key != 'Enter';"
+	class="form-control"
+	<c:if test="${!hasEditRight}">disabled="disabled"</c:if>
+	aria-labelledby="question-title-${questionIndex} instructions-${questionIndex}"
+	${question.answerRequired? 'aria-required="true" required="true"' : ''}
+/>
Index: lams_tool_assessment/web/pages/learning/parts/ordering.jsp
===================================================================
diff -u -r394f403c289f0fd7808c228840bead5c4e7d5d32 -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/parts/ordering.jsp	(.../ordering.jsp)	(revision 394f403c289f0fd7808c228840bead5c4e7d5d32)
+++ lams_tool_assessment/web/pages/learning/parts/ordering.jsp	(.../ordering.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,20 +1,19 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<div>
-	<div class="question-type">
-		<fmt:message key="label.learning.ordering.sort.answers" />
-	</div>
-	
-	<div class="table-responsive">
-		<table class="table table-condensed ordering-table">
-			<c:forEach var="option" items="${question.optionDtos}" varStatus="ordStatus">
-				<tr>
-					<td class="ordering-option">
-						<input type="hidden" name="question${status.index}_${option.uid}" value="${ordStatus.index}" />
-						<c:out value="${option.name}" escapeXml="false" />
-					</td>
-				</tr>
-			</c:forEach>
-		</table>
-	</div>
+<div class="card-subheader" id="instructions-${questionIndex}">
+	<fmt:message key="label.learning.ordering.sort.answers" />
 </div>
+
+<div class="list-group ordering-question-type">
+	<c:forEach var="option" items="${question.optionDtos}" varStatus="ordStatus">
+		<div class="list-group-item ordering-option">
+			<input type="hidden" name="question${questionIndex}_${option.uid}"
+				value="${ordStatus.index}" 
+				aria-labelledby="instructions-${questionIndex} option-name-${option.uid}" />
+				
+			<span id="option-name-${option.uid}">
+				<c:out value="${option.name}" escapeXml="false" />
+			</span>
+		</div>
+	</c:forEach>
+</div>
Index: lams_tool_assessment/web/pages/learning/parts/paging.jsp
===================================================================
diff -u -r948dbcd765de9641ee116c7a4b2424b9607dc172 -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/parts/paging.jsp	(.../paging.jsp)	(revision 948dbcd765de9641ee116c7a4b2424b9607dc172)
+++ lams_tool_assessment/web/pages/learning/parts/paging.jsp	(.../paging.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -3,84 +3,88 @@
 <c:set var="useSections" value="${assessment.questionsPerPage eq -1}" />
 
 <c:if test="${pageCount > 1}">
-	<div id="pager" class="voffset10">
-		<c:if test="${pageNumber > 1}">
-			<button type="button" onClick="return nextPage(${pageNumber - 1})" class="btn btn-default roffset10">
-				<c:choose>
-					<c:when test="${useSections}">
-						<fmt:message key="label.learning.section.previous" />
-					</c:when>
-					<c:otherwise>
-						<fmt:message key="label.learning.page.previous" />
-					</c:otherwise>
-				</c:choose>
-			</button>
-		</c:if>
-		
+	<div id="pager" class="py-3">
+
+		<button type="button" onClick="nextPage(${pageNumber - 1})"
+			class="btn btn-outline-secondary btn-sm btn-icon-previous me-2"
+			<c:if test="${pageNumber == 1}">disabled</c:if>>
+			<c:choose>
+				<c:when test="${useSections}">
+					<fmt:message key="label.learning.section.previous" />
+				</c:when>
+				<c:otherwise>
+					<fmt:message key="label.learning.page.previous" />
+				</c:otherwise>
+			</c:choose>
+		</button>
+
 		<c:choose>
 			<c:when test="${useSections}">
-				<fmt:message key="label.learning.section" />
 				<c:forEach var="section" items="${assessment.sections}" varStatus="status">
-					<c:choose>
-						<c:when	test="${status.index + 1 eq pageNumber}">
-							<a href="#nogo" onclick="return nextPage(${status.index + 1})" class="text-danger">
-						</c:when>
-						<c:otherwise>
-							<a href="#nogo" onclick="return nextPage(${status.index + 1})">
-						</c:otherwise>
-					</c:choose>
-					<c:choose>
-						<c:when	test="${empty section.name}">
-							<fmt:message key="label.learning.section.default.name">	
-								<fmt:param value="${status.index + 1}" />
-							</fmt:message>
-						</c:when>
-						<c:otherwise>
-							<c:out value="${section.name}" />
-						</c:otherwise>
-					</c:choose>
+					<button type="button" onclick="nextPage(${status.index + 1})"
+						<c:choose>
+							<c:when	test="${status.index + 1 eq pageNumber}">
+								 class="btn btn-outline-danger btn-sm ms-2" disabled
+							</c:when>
+							<c:otherwise>
+								class="btn btn-outline-secondary btn-sm ms-2"
+							</c:otherwise>
+						</c:choose>
+						>
+						
+						<c:choose>
+							<c:when	test="${empty section.name}">
+								<fmt:message key="label.learning.section.default.name">	
+									<fmt:param value="${status.index + 1}" />
+								</fmt:message>
+							</c:when>
+							<c:otherwise>
+								<c:out value="${section.name}" />
+							</c:otherwise>
+						</c:choose>
 					
-					<c:if test="${pageNumber != status.index + 1}">
-						<c:set var="questionsPage" value="${sessionMap.pagedQuestions[status.index]}" />
-						<c:set var="answeredQuestions" value="0" />
-						<c:forEach var="question" items="${questionsPage}">
-							<c:if test="${question.questionAnswered}">
-								<c:set var="answeredQuestions" value="${answeredQuestions + 1}" />
-							</c:if>
-						</c:forEach>
-						[${answeredQuestions}/${fn:length(questionsPage)}]
-					</c:if>
-					</a>
+						<c:if test="${pageNumber != status.index + 1}">
+							<c:set var="questionsPage" value="${sessionMap.pagedQuestions[status.index]}" />
+							<c:set var="answeredQuestions" value="0" />
+							<c:forEach var="question" items="${questionsPage}">
+								<c:if test="${question.questionAnswered}">
+									<c:set var="answeredQuestions" value="${answeredQuestions + 1}" />
+								</c:if>
+							</c:forEach>
+							[${answeredQuestions}/${fn:length(questionsPage)}]
+						</c:if>
+					</button>
 				</c:forEach>
 			</c:when>
 			<c:otherwise>
-				<fmt:message key="label.learning.page" />
 				<c:forEach items="${sessionMap.pagedQuestions}" varStatus="status">
-					<c:choose>
-						<c:when	test="${status.index + 1 eq pageNumber}">
-							<a href="#nogo" onclick="return nextPage(${status.index + 1})" class="text-danger">
-						</c:when>
-						<c:otherwise>
-							<a href="#nogo" onclick="return nextPage(${status.index + 1})">
-						</c:otherwise>
-					</c:choose>			
-					${status.index + 1}
-					</a>
+					<button type="button" onclick="nextPage(${status.index + 1})"
+						<c:choose>
+							<c:when	test="${status.index + 1 eq pageNumber}">
+								 class="btn btn-outline-danger btn-sm ms-2" disabled
+							</c:when>
+							<c:otherwise>
+								class="btn btn-outline-secondary btn-sm ms-2"
+							</c:otherwise>
+						</c:choose>		
+					>
+						${status.index + 1}
+					</button>
 				</c:forEach>	
 			</c:otherwise>
 		</c:choose>
-			
-		<c:if test="${pageNumber < pageCount}">
-			<button type="button" onClick="return nextPage(${pageNumber + 1})" class="btn btn-default loffset10">
-				<c:choose>
-					<c:when test="${useSections}">
-						<fmt:message key="label.learning.section.next" />
-					</c:when>
-					<c:otherwise>
-						<fmt:message key="label.learning.page.next" />
-					</c:otherwise>
-				</c:choose>
-			</button>
-		</c:if>
+
+		<button type="button" onClick="nextPage(${pageNumber + 1})"
+			class="btn btn-outline-secondary btn-sm btn-icon-next ms-3"
+			<c:if test="${pageNumber == pageCount}">disabled</c:if>>
+			<c:choose>
+				<c:when test="${useSections}">
+					<fmt:message key="label.learning.section.next" />
+				</c:when>
+				<c:otherwise>
+					<fmt:message key="label.learning.page.next" />
+				</c:otherwise>
+			</c:choose>
+		</button>
 	</div>
 </c:if>
\ No newline at end of file
Index: lams_tool_assessment/web/pages/learning/parts/truefalse.jsp
===================================================================
diff -u -r292df3a6fb3cce2b31c9d9ee33c61bbe931e58ab -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/parts/truefalse.jsp	(.../truefalse.jsp)	(revision 292df3a6fb3cce2b31c9d9ee33c61bbe931e58ab)
+++ lams_tool_assessment/web/pages/learning/parts/truefalse.jsp	(.../truefalse.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,34 +1,48 @@
 <%@ include file="/common/taglibs.jsp"%>
-
-<div class="question-type">
+<c:set var="truefalseInstructions">
 	<fmt:message key="label.learning.short.answer.answer" />
+</c:set>
+
+<div class="card-subheader" id="instructions-${questionIndex}">
+	${truefalseInstructions}
 </div>
 
-<div class="table-responsive">
-	<table class="table table-hover table-condensed">
-		<tr>
-			<td class="has-radio-button">
-				<input type="radio" name="question${status.index}" value="${true}"
-					   onclick="javascript:logLearnerInteractionEvent(1, ${question.uid}, 1)"
-	 				<c:if test="${question.answerBoolean}">checked="checked"</c:if>
-					<c:if test="${!hasEditRight}">disabled="disabled"</c:if>					 
+<fieldset>
+	<legend class="visually-hidden">
+		${truefalseInstructions}
+	</legend>
+	
+	<div class="table-sm div-hover mx-3">	
+		<div class="row">
+			<div class="col">
+				<input type="radio" name="question${questionIndex}" id="question${questionIndex}-true" class="me-2"
+						value="${true}"
+					    onclick="javascript:logLearnerInteractionEvent(1, ${question.uid}, 1)"
+					<c:if test="${question.answerBoolean}">checked="checked"</c:if>
+					<c:if test="${!hasEditRight}">disabled="disabled"</c:if>	
+					aria-labelledby="instructions-${questionIndex} option-name-true"				 
 				/>
-			</td>
-			<td>
-				<fmt:message key="label.learning.true.false.true" />
-			</td>
-		</tr>
-		<tr>
-			<td class="has-radio-button">
-				<input type="radio" name="question${status.index}" value="${false}"
-					   onclick="javascript:logLearnerInteractionEvent(1, ${question.uid}, 2)" 
-	 				<c:if test="${(!question.answerBoolean) and (question.answer != null)}">checked="checked"</c:if>
+					
+				<label for="question${questionIndex}-true" id="option-name-true">
+					<fmt:message key="label.learning.true.false.true" />
+				</label>
+			</div>
+		</div>
+		
+		<div class="row">
+			<div class="col">
+				<input type="radio" name="question${questionIndex}" id="question${questionIndex}-false" class="me-2"
+						value="${false}"
+					    onclick="javascript:logLearnerInteractionEvent(1, ${question.uid}, 2)" 
+					<c:if test="${(!question.answerBoolean) and (question.answer != null)}">checked="checked"</c:if>
 					<c:if test="${!hasEditRight}">disabled="disabled"</c:if>
+					aria-labelledby="instructions-${questionIndex} option-name-false"
 				/>
-			</td>
-			<td>
-				<fmt:message key="label.learning.true.false.false" />
-			</td>
-		</tr>
-	</table>
-</div>
+	
+				<label for="question${questionIndex}-false" id="option-name-false">
+					<fmt:message key="label.learning.true.false.false" />
+				</label>
+			</div>
+		</div>
+	</div>
+</fieldset>
\ No newline at end of file
Index: lams_tool_assessment/web/pages/learning/parts/vsa.jsp
===================================================================
diff -u -r5b343b1b8c827678c1c87a0ae4a3d27ba3281f6b -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/parts/vsa.jsp	(.../vsa.jsp)	(revision 5b343b1b8c827678c1c87a0ae4a3d27ba3281f6b)
+++ lams_tool_assessment/web/pages/learning/parts/vsa.jsp	(.../vsa.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,20 +1,17 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<div class="question-type">
-	<fmt:message key="label.learning.short.answer.answer" />
+<div class="card-subheader" id="instructions-${questionIndex}">
+	<label for="question${questionIndex}">
+		<fmt:message key="label.learning.short.answer.answer" />
+	</label>
 </div>
 
-<div class="table-responsive">
-	<table class="table table-hover table-condensed">
-		<tr>
-			<td>
-				<input type="text" autocomplete="off" name="question${status.index}" onkeydown="return event.key != 'Enter';"
-					class="form-control 
-					<c:if test="${question.autocompleteEnabled}">ui-autocomplete-input</c:if>" 
-					value="<c:out value='${question.answer}' />" data-question-uid="${question.uid}"  
-					<c:if test="${!hasEditRight}">disabled="disabled"</c:if>
-				/>
-			</td>	
-		</tr>
-	</table>
-</div>
+<input type="text" autocomplete="off" name="question${questionIndex}"
+	id="question${questionIndex}" onkeydown="return event.key != 'Enter';"
+	class="form-control <c:if test="${question.autocompleteEnabled}">ui-autocomplete-input</c:if>"
+	value="<c:out value='${question.answer}' />"
+	data-question-uid="${question.uid}"
+	<c:if test="${!hasEditRight}">disabled="disabled"</c:if>
+	aria-labelledby="question-title-${questionIndex} instructions-${questionIndex}"
+	${question.answerRequired? 'aria-required="true" required="true" ' : ''}
+/>
Index: lams_tool_assessment/web/pages/learning/results.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/results.jsp	(.../results.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_assessment/web/pages/learning/results.jsp	(.../results.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,11 +1,23 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
 <c:set var="lams"><lams:LAMSURL /></c:set>
+<%-- param has higher level for request attribute --%>
+<c:if test="${not empty param.sessionMapID}">
+	<c:set var="sessionMapID" value="${param.sessionMapID}" />
+</c:if>
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
+<c:set var="mode" value="${sessionMap.mode}" />
+<c:set var="toolSessionID" value="${sessionMap.toolSessionID}" />
+<c:set var="assessment" value="${sessionMap.assessment}" />
+<c:set var="pageNumber" value="${sessionMap.pageNumber}" />
+<c:set var="isResubmitAllowed" value="${sessionMap.isResubmitAllowed}" />
+<c:set var="hasEditRight" value="${sessionMap.hasEditRight}" />
+<c:set var="result" value="${sessionMap.assessmentResult}" />
+<c:set var="isUserLeader" value="${sessionMap.isUserLeader}" />
+<c:set var="isLeadershipEnabled" value="${assessment.useSelectLeaderToolOuput}" />
 
-<lams:html>
-<lams:head>
-	<title><fmt:message key="label.learning.title" /></title>
-	<%@ include file="/common/header.jsp"%>
+<lams:PageLearner title="${assessment.title}" toolSessionID="${toolSessionID}">
+	<link href="<lams:WebAppURL/>includes/css/assessment.css" rel="stylesheet" type="text/css">
 	<lams:css suffix="jquery.jRating"/>
 	<c:if test="${not empty codeStyles}">
 		<link rel="stylesheet" type="text/css" href="${lams}css/codemirror.css" />
@@ -16,24 +28,6 @@
 				border: none;
 			}
 		</style>
-	</c:if>
-	
-	<%-- param has higher level for request attribute --%>
-	<c:if test="${not empty param.sessionMapID}">
-		<c:set var="sessionMapID" value="${param.sessionMapID}" />
-	</c:if>
-	<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
-	<c:set var="mode" value="${sessionMap.mode}" />
-	<c:set var="toolSessionID" value="${sessionMap.toolSessionID}" />
-	<c:set var="assessment" value="${sessionMap.assessment}" />
-	<c:set var="pageNumber" value="${sessionMap.pageNumber}" />
-	<c:set var="isResubmitAllowed" value="${sessionMap.isResubmitAllowed}" />
-	<c:set var="hasEditRight" value="${sessionMap.hasEditRight}"/>
-	<c:set var="result" value="${sessionMap.assessmentResult}" />
-	<c:set var="isUserLeader" value="${sessionMap.isUserLeader}"/>
-	<c:set var="isLeadershipEnabled" value="${assessment.useSelectLeaderToolOuput}"/>
-		
-	<c:if test="${not empty codeStyles}">
 		<script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/runmode-standalone.js"></script>
 		<script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/colorize.js"></script>
 	</c:if>
@@ -51,7 +45,6 @@
 			</c:when>
 		</c:choose>
 	</c:forEach>
-	
 	<c:if test="${not empty codeStyles}">
 		<script type="text/javascript">
 			// initialise syntax highlighter depending on programming language in data-lang attribute
@@ -61,7 +54,6 @@
 		</script>
 	</c:if>
 	
-	<lams:JSImport src="learning/includes/javascript/gate-check.js" />
 	<script type="text/javascript">
 		 checkNextGateActivity('finishButton', '${toolSessionID}', '', function(){
 			 document.location.href ='<c:url value="/learning/finish.do"/>?sessionMapID=${sessionMapID}&mode=${mode}&toolSessionID=${toolSessionID}';
@@ -87,44 +79,40 @@
 			return false;			
 		}
     </script>
-</lams:head>
-<body class="stripes">
-
-	<lams:Page type="learner" title="${assessment.title}">
-		
+	
+	<div class="container-lg">
 		<c:if test="${not empty sessionMap.submissionDeadline && (sessionMap.mode == 'author' || sessionMap.mode == 'learner')}">
-			<lams:Alert id="submission-deadline" type="info" close="true">
+			<lams:Alert5 id="submission-deadline" type="info" close="true">
 				<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>
 		
 		<c:if test="${sessionMap.isUserFailed}">
-			<lams:Alert id="passing-mark-not-reached" type="warning" close="true">
+			<lams:Alert5 id="passing-mark-not-reached" type="warning" close="true">
 				<fmt:message key="label.learning.havent.reached.passing.mark">
 					<fmt:param>${assessment.passingMark}</fmt:param>
 				</fmt:message>
-			</lams:Alert>
+			</lams:Alert5>
 		</c:if>
 		
 		<c:if test="${isLeadershipEnabled and not empty sessionMap.groupLeader}">
 			<lams:LeaderDisplay username="${sessionMap.groupLeader.firstName} ${sessionMap.groupLeader.lastName}" userId="${sessionMap.groupLeader.userId}"/>
 		</c:if>
 		
 		<lams:errors/>
-		<br>
 		
 		<c:if test="${not empty result}">
 			<%@ include file="results/attemptsummary.jsp"%>
 		</c:if>
 		
 		<c:if test="${assessment.displaySummary}">
-			<div class="panel">
+			<div id="instructions" class="instructions py-3">
 				<c:out value="${assessment.instructions}" escapeXml="false"/>
 			</div>
 
-			<div class="form-group">
+			<div id="all-questions">
 				<%@ include file="results/allquestions.jsp"%>
 				
 				<%@ include file="parts/paging.jsp"%>
@@ -133,51 +121,15 @@
 		
 		<%-- Reflection entry --%>
 		<c:if test="${sessionMap.reflectOn && (sessionMap.userFinished || !hasEditRight)}">
-		 	 <div class="panel panel-default">
-	
-				<div class="panel-heading panel-title">
-			 		<fmt:message key="label.export.reflection" />
-			 	</div>
-				 	
-			 	<div class="panel-body">
-				 	<div class="panel">
-				 		<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true"/>
-					</div>
-						
-					<div class="form-group">
-						<c:choose>
-							<c:when test="${empty sessionMap.reflectEntry}">
-								<p>
-									<em> <fmt:message key="message.no.reflection.available" />	</em>
-								</p>
-							</c:when>
-							<c:otherwise>
-								<p>
-									<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
-								</p>
-							</c:otherwise>
-						</c:choose>
-			
-						<c:if test="${(mode != 'teacher') && hasEditRight}">
-							<button type="button" name="FinishButton" onclick="return continueReflect()" 
-									class="btn btn-sm btn-secondary float-start voffset10">
-								<fmt:message key="label.edit" />
-							</button>
-						</c:if>
-					</div>
-		
-				</div>
-			</div>
+			<lams:NotebookReedit
+				reflectInstructions="${sessionMap.reflectInstructions}"
+				reflectEntry="${sessionMap.reflectEntry}"
+				isEditButtonEnabled="${(mode != 'teacher') && isUserLeader}"
+				notebookHeaderLabelKey="label.export.reflection"/>
 		</c:if>
 
 		<c:if test="${mode != 'teacher'}">
 			<div class="activity-bottom-buttons">
-				<c:if test="${isResubmitAllowed && hasEditRight}">
-					<button type="submit" onclick="resubmit()" class="btn btn-default">
-						<fmt:message key="label.learning.resubmit" />
-					</button>
-				</c:if>	
-						
 				<c:if test="${!sessionMap.isUserFailed}">
 					<c:choose>
 						<c:when	test="${sessionMap.reflectOn && (not sessionMap.userFinished) && hasEditRight}">
@@ -188,27 +140,26 @@
 						</c:when>
 						
 						<c:otherwise>
-							<button id="finishButton"
-							        name="FinishButton"
-									class="btn btn-primary na">
-								<span class="nextActivity">
-									<c:choose>
-										<c:when test="${sessionMap.isLastActivity}">
-											<fmt:message key="label.submit" />
-										</c:when>
-										<c:otherwise>
-							 				<fmt:message key="label.finished" />
-										</c:otherwise>
-									</c:choose>
-		 						</span>
+							<button id="finishButton" name="FinishButton" class="btn btn-primary na">
+								<c:choose>
+									<c:when test="${sessionMap.isLastActivity}">
+										<fmt:message key="label.submit" />
+									</c:when>
+									<c:otherwise>
+										<fmt:message key="label.finished" />
+									</c:otherwise>
+								</c:choose>
 							</button>
 						</c:otherwise>
 					</c:choose>
 				</c:if>
+				
+				<c:if test="${isResubmitAllowed && hasEditRight}">
+					<button type="submit" onclick="resubmit()" class="btn btn-secondary btn-icon-return me-2">
+						<fmt:message key="label.learning.resubmit" />
+					</button>
+				</c:if>
 			</div>
 		</c:if>
-
-	</lams:Page>
-
-</body>
-</lams:html>
\ No newline at end of file
+	</div>
+</lams:PageLearner>
Index: lams_tool_assessment/web/pages/learning/results/allquestions.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/results/allquestions.jsp	(.../allquestions.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_assessment/web/pages/learning/results/allquestions.jsp	(.../allquestions.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,5 +1,4 @@
 <%@ include file="/common/taglibs.jsp"%>
-
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 <c:set var="assessment" value="${sessionMap.assessment}" />
@@ -15,45 +14,18 @@
 	<link href="<lams:WebAppURL/>includes/css/assessment.css" rel="stylesheet" type="text/css">
 </c:if>
 
-<link rel="stylesheet" type="text/css" href="${lams}css/bootstrap-slider.css" />
 <style>
-	tr.selected-by-groups td {
-		border-top: none !important;
-	}
-	
-	tr.selected-by-groups span {
-		font-weight: bold;
-	}
-	
-	.slider.slider-horizontal {
-		margin-left: 40px;
-	}
-	
-	.monitor-question-buttons {
-		text-align: right;
-		float: right;
-	}
-	
-	@media (min-width: 0px) and (max-width: 767px){
-		.discussion-sentiment-start-button {
-			padding: 1px 5px;
-		}
-	}
-	
-	.discussion-sentiment-start-button .fa-comments {
-		color: black !important;
-	}
-	
 	<c:if test="${param.embedded and empty toolSessionID and (assessment.allowDiscloseAnswers or assessment.allowDiscussionSentiment)}">	
 		.panel-heading .asterisk {
 			margin-right: 30px;
 		}
 	</c:if>
 </style>
-	
+
 <script type="text/javascript" src="${lams}includes/javascript/jquery.timeago.js"></script> 
 <script type="text/javascript" src="${lams}includes/javascript/timeagoi18n/jquery.timeago.${fn:toLowerCase(localeLanguage)}.js"></script>
-<script type="text/javascript" src="${lams}includes/javascript/bootstrap-slider.js"></script>
+<lams:JSImport src="includes/javascript/rating.js" />
+<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.jRating.js"></script>
 <script type="text/javascript">
 	//var for jquery.jRating.js
 	var pathToImageFolder = "${lams}images/css/",
@@ -64,7 +36,6 @@
 		COMMENTS_MIN_WORDS_LIMIT = 0,
 		MAX_RATES = 0,
 		MIN_RATES = 0,
-		LAMS_URL = '${lams}',
 		COUNT_RATED_ITEMS = true,
 		COMMENT_TEXTAREA_TIP_LABEL = '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.comment.textarea.tip"/></spring:escapeBody>',
 		WARN_COMMENTS_IS_BLANK_LABEL = '<spring:escapeBody javaScriptEscape="true"><fmt:message key="error.resource.image.comment.blank"/></spring:escapeBody>',
@@ -87,7 +58,7 @@
 		function startDiscussionSentiment(toolQuestionUid, burningQuestionUid, markAsActive) {
 			// burningQuestionUid is not used in Assessment, but must be added for function signature consistency
 			
-			$('#discussion-sentiment-chart-panel-container-' + toolQuestionUid).load(
+			$('#discussion-sentiment-chart-card-container-' + toolQuestionUid).load(
 				'${lams}learning/discussionSentiment/startMonitor.do',
 				{
 					toolQuestionUid : toolQuestionUid,
@@ -102,9 +73,6 @@
 	
 	$(document).ready(function() {
 		$("time.timeago").timeago();
-	
-		//initialize bootstrap-sliders if "Enable confidence level" option is ON
-		$('.bootstrap-slider').bootstrapSlider();
 
 		<c:if test="${param.showQuestionDetailsButton}">
 			tb_init('a.thickbox');
@@ -140,201 +108,204 @@
 		</c:if>
 	});
 </script>
-<lams:JSImport src="includes/javascript/rating.js" />
-<script type="text/javascript" src="${lams}includes/javascript/jquery.jRating.js"></script>
 	
-<c:forEach var="question" items="${sessionMap.pagedQuestions[pageNumber-1]}" varStatus="status">						
-							
-	<div class="panel panel-default">
-		<div class="panel-heading">			
+<c:forEach var="question" items="${sessionMap.pagedQuestions[pageNumber-1]}" varStatus="status">
+	<div class="card lcard">
+		<div class="card-header">
+		
 			<c:if test="${param.embedded and empty toolSessionID}">
 				<div class="monitor-question-buttons">
 					<c:if test="${assessment.allowDiscloseAnswers and showQuestionMonitoringActionButtons}">
-						<div class="btn-group-xs disclose-button-group" questionUid="${question.uid}">
+						<div class="btn-group-sm disclose-button-group ms-2" questionUid="${question.uid}">
 							<%-- Allow disclosing correct answers only for multiple choice questions --%>
 							<c:if test="${question.type == 1}">
-								<div class="btn btn-default disclose-correct-button"
+								<div class="btn btn-secondary disclose-correct-button"
 									<c:if test="${question.correctAnswersDisclosed}">
-										disabled="disabled"><i class="fa fa-check text-success">&nbsp;</i
-									</c:if>
-									>
-									<fmt:message key="label.disclose.correct.answers"/>
+												disabled="disabled"><i class="fa fa-check">&nbsp;</i
+										</c:if>>
+									<fmt:message key="label.disclose.correct.answers" />
 								</div>
 							</c:if>
-							<div class="btn btn-default disclose-groups-button"
-								<c:if test="${question.groupsAnswersDisclosed}">
-									disabled="disabled"><i class="fa fa-check text-success">&nbsp;</i
-								</c:if>
-								>
-								<fmt:message key="label.disclose.groups.answers"/>
+							<div class="btn btn-secondary disclose-groups-button"
+								<c:if test="${question.groupsAnswersDisclosed}">disabled="disabled">
+										<i class="fa fa-check">&nbsp;</i</c:if>>
+								<fmt:message key="label.disclose.groups.answers" />
 							</div>
 						</div>
 					</c:if>
-					
+
 					<c:if test="${param.showQuestionDetailsButton or assessment.allowDiscussionSentiment}">
-						<div class="btn-group-xs voffset5">
+						<div class="btn-group-sm mt-3">
 							<c:if test="${param.showQuestionDetailsButton}">
-								<a class="thickbox btn btn-default"
-								   href='<c:url value="/monitoring/questionSummary.do?sessionMapID=${sessionMapID}"/>&questionUid=${question.uid}&KeepThis=true&TB_iframe=true&modal=true'>
-									<i class="fa fa-info-circle"></i>&nbsp;<fmt:message key="label.monitoring.summary.results.question" />
+								<a class="thickbox btn btn-secondary"
+									href='<c:url value="/monitoring/questionSummary.do?sessionMapID=${sessionMapID}"/>&questionUid=${question.uid}&KeepThis=true&TB_iframe=true&modal=true'>
+									<i class="fa fa-info-circle"></i>&nbsp; <fmt:message
+										key="label.monitoring.summary.results.question" />
 								</a>
 							</c:if>
-							
+
 							<c:if test="${assessment.allowDiscussionSentiment and showQuestionMonitoringActionButtons}">
 								<div id="discussion-sentiment-start-button-${question.uid}"
-								     class="btn btn-default discussion-sentiment-start-button"
-								     onClick="javascript:startDiscussionSentiment(${question.uid}, null, true)">
-									<i class="fa fa-comments"></i>&nbsp;<fmt:message key="label.monitoring.discussion.start"/>
+									class="btn btn-secondary discussion-sentiment-start-button"
+									onClick="javascript:startDiscussionSentiment(${question.uid}, null, true)">
+									<i class="fa fa-comments"></i>&nbsp;
+									<fmt:message key="label.monitoring.discussion.start" />
 								</div>
 							</c:if>
 						</div>
 					</c:if>
-					
 				</div>
 			</c:if>
-			
+
 			<c:if test="${assessment.displayMaxMark}">
-				<span class="float-end small loffset10" style="padding-top: 3px">
+				<span class="float-end badge alert alert-info fw-normal m-1 p-2">
 					<fmt:message key="label.learning.max.mark">
 						<fmt:param value="${question.maxMark}" />
 					</fmt:message>
 				</span>
 			</c:if>
-				
+
 			<c:if test="${question.answerRequired}">
-				<span class="asterisk float-end">
-					<i class="fa fa-xs fa-asterisk text-danger" title="<fmt:message key="label.answer.required"/>" 
-							alt="<fmt:message key="label.answer.required"/>"></i>
+				<span class="asterisk float-end"> 
+					<i class="fa fa-xs fa-asterisk text-danger"
+					title="<fmt:message key="label.answer.required"/>"
+					alt="<fmt:message key="label.answer.required"/>"></i>
 				</span>
 			</c:if>
-			
-			<h3 class="panel-title" style="margin-bottom: 10px;font-size: initial;">
+
+			<div class="card-title">
 				<c:if test="${assessment.numbered}">
-						${status.index + sessionMap.questionNumberingOffset}.
+					${status.index + sessionMap.questionNumberingOffset}.
 				</c:if>
 
-  				<c:if test="${not sessionMap.hideTitles}">
+				<c:if test="${not sessionMap.hideTitles}">
 					${question.title}
 				</c:if>
-			</h3>
-			
-	
-							
-			<c:if test="${empty question.question}">
-				<!--  must have something here otherwise the question-numbers span does not float properly -->
-				&nbsp;
-			</c:if>
-			${question.question}
+			</div>
+
+			<div class="font-size-init">
+				${question.question}
+			</div>
 		</div>
-					
-		<div class="panel-body" id="question-area-${status.index}">
+
+		<div class="card-body" id="question-area-${status.index}">
 			<c:choose>
 				<c:when test="${question.type == 1}">
-					<c:set var="justificationEligible" value="true" />	
+					<c:set var="justificationEligible" value="true" />
 					<%@ include file="multiplechoice.jsp"%>
 				</c:when>
 				<c:when test="${question.type == 2}">
-					<c:set var="justificationEligible" value="true" />	
+					<c:set var="justificationEligible" value="true" />
 					<%@ include file="matchingpairs.jsp"%>
 				</c:when>
 				<c:when test="${question.type == 3}">
-					<c:set var="justificationEligible" value="false" />	
+					<c:set var="justificationEligible" value="false" />
 					<%@ include file="vsa.jsp"%>
 				</c:when>
 				<c:when test="${question.type == 4}">
-					<c:set var="justificationEligible" value="true" />	
+					<c:set var="justificationEligible" value="true" />
 					<%@ include file="numerical.jsp"%>
 				</c:when>
 				<c:when test="${question.type == 5}">
-					<c:set var="justificationEligible" value="true" />	
+					<c:set var="justificationEligible" value="true" />
 					<%@ include file="truefalse.jsp"%>
 				</c:when>
 				<c:when test="${question.type == 6}">
-					<c:set var="justificationEligible" value="false" />	
+					<c:set var="justificationEligible" value="false" />
 					<%@ include file="essay.jsp"%>
 				</c:when>
 				<c:when test="${question.type == 7}">
-					<c:set var="justificationEligible" value="true" />	
+					<c:set var="justificationEligible" value="true" />
 					<%@ include file="ordering.jsp"%>
 				</c:when>
 				<c:when test="${question.type == 8}">
-					<c:set var="justificationEligible" value="true" />	
-					<c:set var="questionIndex" value="${status.index}"/>
+					<c:set var="justificationEligible" value="true" />
+					<c:set var="questionIndex" value="${status.index}" />
 					<%@ include file="markhedging.jsp"%>
-				</c:when>			
+				</c:when>
 			</c:choose>
-			
+
 			<c:if test="${question.type != 8}">
 				<%@ include file="markandpenaltyarea.jsp"%>
 			</c:if>
-			
-			<c:if test="${not empty toolSessionID}">			
-				<%@ include file="historyresponses.jsp"%>
-				
+
+			<c:if test="${not empty toolSessionID}">
 				<c:if test="${assessment.enableConfidenceLevels and question.type != 8}">
 					<%@ include file="confidencelevel.jsp"%>
 				</c:if>
+				
+				<%@ include file="historyresponses.jsp"%>
 			</c:if>
-			
-			<c:if test="${justificationEligible and 
-							 (assessment.allowAnswerJustification or (question.type == 8 and question.hedgingJustificationEnabled))}">
+
+			<c:if test="${justificationEligible and (assessment.allowAnswerJustification or (question.type == 8 and question.hedgingJustificationEnabled))}">
 				<c:choose>
 					<c:when test="${assessment.allowDiscloseAnswers and question.groupsAnswersDisclosed and fn:length(sessions) > 1}">
 						<%-- Display a table with other groups' justifications --%>
-						<div class="question-type voffset20">
+						<div class="card-subheader mt-4">
 							<fmt:message key="label.answer.justification" />
 						</div>
-						
-						<table class="table table-responsive table-striped table-bordered table-condensed">
+
+						<div class="div-table table-responsive table-sm w-75 mx-auto">
+							<!-- 
+							<div class="row fw-bold text-muted">
+								<div class="w-25">
+									<fmt:message key="monitoring.label.group" />
+								</div>
+								<div class="col">
+									<fmt:message key="label.answer.justification" />
+								</div>
+							</div>
+							 -->
+							
 							<c:forEach var="session" items="${sessions}" varStatus="status">
 								<c:set var="sessionResults" value="" />
-								
+
 								<%-- Get the needed piece of information from a complicated questionSummaries structure --%>
 								<c:set var="questionSummary" value="${questionSummaries[question.uid]}" />
-								<c:set var="sessionResults" 
-									value="${questionSummary.questionResultsPerSession[status.index]}" />
+								<c:set var="sessionResults" value="${questionSummary.questionResultsPerSession[status.index]}" />
 								<c:set var="sessionResults" value="${sessionResults[fn:length(sessionResults)-1]}" />
 
 								<c:if test="${not empty sessionResults.uid and not empty sessionResults.justification}">
-									<tr role="row">
-										<td width="30%">
+									<div class="row">
+										<div class="w-25">
 											<c:if test="${not empty session.groupLeader}">
-												<lams:Portrait userId="${session.groupLeader.userId}"/>&nbsp;
-											</c:if>
+												<lams:Portrait userId="${session.groupLeader.userId}" />&nbsp;
+											</c:if> 
 											<c:choose>
 												<c:when test="${not empty toolSessionID and toolSessionID == session.sessionId}">
-													<b><fmt:message key="label.your.team"/></b>
+													<b><fmt:message key="label.your.team" /></b>
 												</c:when>
 												<c:otherwise>
 													<%-- Sessions are named after groups --%>
-													<c:out value="${session.sessionName}" escapeXml="true"/> 
+													<c:out value="${session.sessionName}" escapeXml="true" />
 												</c:otherwise>
 											</c:choose>
-										</td>
-										<td>
+										</div>
+										
+										<div class="col">
 											<c:out value="${sessionResults.justificationEscaped}" escapeXml="false" />
-										</td>
-									</tr>
+										</div>
+									</div>
 								</c:if>
 							</c:forEach>
-						</table>
+						</div>
 					</c:when>
+					
 					<c:when test="${not empty toolSessionID and not empty question.justification}">
 						<%-- Display only own justification --%>
-						<div class="question-type voffset20">
+						<div class="card-subheader mt-2">
 							<fmt:message key="label.answer.justification" />
 						</div>
-						<p>
+						<p class="ms-4">
 							<c:out value="${question.justificationHtml}" escapeXml="false" />
 						</p>
 					</c:when>
 				</c:choose>
 			</c:if>
-			
+
 			<c:if test="${param.embedded and empty toolSessionID and assessment.allowDiscussionSentiment}">
-				<div id="discussion-sentiment-chart-panel-container-${question.uid}"></div>
+				<div id="discussion-sentiment-chart-card-container-${question.uid}"></div>
 			</c:if>
 		</div>
-					
 	</div>
 </c:forEach>
\ No newline at end of file
Fisheye: Tag 6866da235d682d74f883afdd01e00e92d16a13eb refers to a dead (removed) revision in file `lams_tool_assessment/web/pages/learning/results/allquestions5.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_assessment/web/pages/learning/results/attemptsummary.jsp
===================================================================
diff -u -r4bc058a05be932f9db42e5df63d1e7a2356cb885 -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/results/attemptsummary.jsp	(.../attemptsummary.jsp)	(revision 4bc058a05be932f9db42e5df63d1e7a2356cb885)
+++ lams_tool_assessment/web/pages/learning/results/attemptsummary.jsp	(.../attemptsummary.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,70 +1,75 @@
-<lams:Alert id="attempt-summary" type="info" close="false">
-	<table class="table table-hover">
-		<tr>
-			<th style="width: 130px;">
-				<fmt:message key="label.learning.summary.started.on" />
-			</th>
-			<td >
-				<lams:Date value="${result.startDate}"/>
-			</td>
-		</tr>
-			
-		<tr>
-			<th>
-				<fmt:message key="label.learning.summary.completed.on" />
-			</th>
-			<td>
-				<lams:Date value="${result.finishDate}" />
-			</td>
-		</tr>
-			
-		<tr>
-			<th>
-				<fmt:message key="label.learning.summary.time.taken" />
-			</th>
-			<td>
-				<fmt:formatDate value="${result.timeTaken}" pattern="H" timeZone="GMT" />&nbsp;<fmt:message key="label.learning.summary.hours" />&nbsp;
-				<fmt:formatDate value="${result.timeTaken}" pattern="m" timeZone="GMT" />&nbsp;<fmt:message key="label.learning.summary.minutes" />
-			</td>
-		</tr>
-			
-		<c:if test="${assessment.allowGradesAfterAttempt}">
-			<tr>
-				<th>
-					<fmt:message key="label.learning.summary.grade" />:&thinsp;
-				</th>
-				<td style="padding-left: 5px">
-					
-					<c:choose>
-						<c:when  test="${result.maximumGrade == 0}">
-							<c:set var="resultPercentage" value="0"/>
-						</c:when>
-						<c:otherwise>
-							<c:set var="resultPercentage">
-								<fmt:formatNumber value="${result.grade * 100 / result.maximumGrade}" maxFractionDigits="2"/>
-							</c:set>
-						</c:otherwise>
-					</c:choose>
-					
-					&thinsp;
-					<fmt:message key='label.learning.summary.out.of.maximum'>
-						<fmt:param ><fmt:formatNumber value="${result.grade}" maxFractionDigits="3"/></fmt:param>
-						<fmt:param >${result.maximumGrade}</fmt:param>
-						<fmt:param >${resultPercentage}</fmt:param>
-					</fmt:message>
-				</td>
-			</tr>
-		</c:if>
-			
-		<c:if test="${assessment.allowOverallFeedbackAfterQuestion && (result.overallFeedback != null)}">
-			<tr>
-				<th>
-					<fmt:message key="label.learning.summary.feedback" />
-				</th>
-				<td>
-					<c:out value="${result.overallFeedback}" escapeXml="true"/>
-				</td>
-			</tr>			
-		</c:if>				
-	</table>
-</lams:Alert>
+<div id="attempt-summary" class="alert alert-success shadow mx-auto col-sm-8">
+	<div class="row">
+		<div class="col-sm-5">
+			<fmt:message key="label.learning.summary.started.on" />
+		</div>
+		<div class="col-sm-7">
+			<lams:Date value="${result.startDate}" />
+		</div>
+	</div>
+
+	<div class="row">
+		<div class="col-sm-5">
+			<fmt:message key="label.learning.summary.completed.on" />
+		</div>
+		<div class="col-sm-7">
+			<lams:Date value="${result.finishDate}" />
+		</div>
+	</div>
+
+	<div class="row">
+		<div class="col-sm-5">
+			<fmt:message key="label.learning.summary.time.taken" />
+		</div>
+		<div class="col-sm-7">
+			<fmt:formatDate value="${result.timeTaken}" pattern="H" timeZone="GMT" />
+			&nbsp;
+			<fmt:message key="label.learning.summary.hours" />
+			&nbsp;
+			<fmt:formatDate value="${result.timeTaken}" pattern="m" timeZone="GMT" />
+			&nbsp;
+			<fmt:message key="label.learning.summary.minutes" />
+		</div>
+	</div>
+
+	<c:if test="${assessment.allowGradesAfterAttempt}">
+		<div class="row">
+			<div class="col-sm-5">
+				<fmt:message key="label.learning.summary.grade" />
+			</div>
+			<div class="col-sm-7">
+				<c:choose>
+					<c:when test="${result.maximumGrade == 0}">
+						<c:set var="resultPercentage" value="0" />
+					</c:when>
+					<c:otherwise>
+						<c:set var="resultPercentage">
+							<fmt:formatNumber
+								value="${result.grade * 100 / result.maximumGrade}"
+								maxFractionDigits="2" />
+						</c:set>
+					</c:otherwise>
+				</c:choose>
+
+				<fmt:message key='label.learning.summary.out.of.maximum'>
+					<fmt:param>
+						<fmt:formatNumber value="${result.grade}" maxFractionDigits="3" />
+					</fmt:param>
+					<fmt:param>${result.maximumGrade}</fmt:param>
+					<fmt:param>${resultPercentage}</fmt:param>
+				</fmt:message>
+			</div>
+		</div>
+	</c:if>
+
+	<c:if test="${assessment.allowOverallFeedbackAfterQuestion && (result.overallFeedback != null)}">
+		<div class="row">
+			<div class="col-sm-5">
+				<fmt:message key="label.learning.summary.feedback" />
+			</div>
+			<div class="col-sm-7">
+				<c:out value="${result.overallFeedback}" escapeXml="true" />
+			</div>
+		</div>
+	</c:if>
+</div>
Index: lams_tool_assessment/web/pages/learning/results/confidencelevel.jsp
===================================================================
diff -u -r6b89d0c84a5695fb1ad02d5525eb240a9f4d3134 -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/results/confidencelevel.jsp	(.../confidencelevel.jsp)	(revision 6b89d0c84a5695fb1ad02d5525eb240a9f4d3134)
+++ lams_tool_assessment/web/pages/learning/results/confidencelevel.jsp	(.../confidencelevel.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,35 +1,36 @@
 <%@ include file="/common/taglibs.jsp"%>
 <c:choose>
 	<c:when test="${assessment.confidenceLevelsType == 2}">
-		<c:set var="confidenceLabels">["<fmt:message key="label.not.confident" />", "<fmt:message key="label.confident" />", "<fmt:message key="label.very.confident" />"]</c:set>
+		<c:set var="sliderLabels"><fmt:message key="label.not.confident" />;<fmt:message key="label.confident" />;<fmt:message key="label.very.confident" /></c:set>
+		<c:set var="sliderStep">5</c:set>
 	</c:when>
 	<c:when test="${assessment.confidenceLevelsType == 3}">
-		<c:set var="confidenceLabels">["<fmt:message key="label.not.sure" />", "<fmt:message key="label.sure" />", "<fmt:message key="label.very.sure" />"]</c:set>
+		<c:set var="sliderLabels"><fmt:message key="label.not.sure" />;<fmt:message key="label.sure" />;<fmt:message key="label.very.sure" /></c:set>
+		<c:set var="sliderStep">5</c:set>
 	</c:when>
 	<c:otherwise>
-		<c:set var="confidenceLabels">["0", "50", "100%"]</c:set> 
+		<c:set var="sliderLabels">0%;50%;100%</c:set> 
+		<c:set var="sliderStep">1</c:set>
 	</c:otherwise>
 </c:choose>
+<c:set var="sliderLabelsArray" value="${fn:split(sliderLabels, ';')}" />
 
-<div class="question-type">
-	<fmt:message key="label.confidence" />
-</div>
-
-<div>
-	<input class="bootstrap-slider" type="text"
-		data-slider-enabled="false" data-slider-tooltip="hide"
-		<c:if test="${question.confidenceLevel != -1}">data-slider-value="${question.confidenceLevel}"</c:if>
-		data-slider-ticks-labels='${confidenceLabels}'
-		<c:choose>
-			<c:when test="${assessment.confidenceLevelsType == 2}">
-				data-slider-ticks="[0, 5, 10]"  data-slider-step="5"
-			</c:when>
-			<c:when test="${assessment.confidenceLevelsType == 3}">
-				data-slider-ticks="[0, 5, 10]" data-slider-step="5"
-			</c:when>
-			<c:otherwise>
-				data-slider-ticks="[0, 5, 10]" 
-			</c:otherwise>
-		</c:choose>
-		/>
+<div class="bootstrap-slider mt-2">
+	<div class="card-subheader">
+		<label for="confidence-level-${questionIndex}">
+			<fmt:message key="label.confidence" />
+		</label>
+	</div>
+	
+	<div class="ms-2">
+		<input type="range" id="confidence-level-${questionIndex}" 
+			list="slider-step-list-${question.uid}" disabled
+			min="0" max="10" step="${sliderStep}" 
+			<c:if test="${question.confidenceLevel != -1}">value="${question.confidenceLevel}"</c:if>>
+		<datalist id="slider-step-list-${question.uid}">
+			<option value="0" label="${sliderLabelsArray[0]}"/>
+			<option value="5" label="${sliderLabelsArray[1]}"/>
+			<option value="10" label="${sliderLabelsArray[2]}"/>
+		</datalist>
+	</div>
 </div>
\ No newline at end of file
Index: lams_tool_assessment/web/pages/learning/results/essay.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/results/essay.jsp	(.../essay.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_assessment/web/pages/learning/results/essay.jsp	(.../essay.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,40 +1,35 @@
 <%@ include file="/common/taglibs.jsp"%>
 
 <c:if test="${not empty toolSessionID}">
-	<div class="question-type">
+	<div class="card-subheader">
 		<fmt:message key="label.learning.short.answer.answer" />
 	</div>
-	
-	<div class="table-responsive">
-		<table class="table table-condensed ${empty question.codeStyle ? 'table-hover' : ''}">
-			<tr>
-				<td>
-					<c:choose>
-						<c:when test="${empty question.codeStyle}">
-							${question.answer}
-						</c:when>
-						<c:otherwise>
-							<pre class="code-style" data-lang="${question.codeStyleMime}">${question.answer}</pre>
-						</c:otherwise>
-					</c:choose>
-				</td>
-			</tr>
-		</table>
-	</div>
+
+	<c:choose>
+		<c:when test="${empty question.codeStyle}">
+			${question.answer}
+		</c:when>
+		<c:otherwise>
+			<pre class="code-style" data-lang="${question.codeStyleMime}">${question.answer}</pre>
+		</c:otherwise>
+	</c:choose>
 </c:if>
 
 <c:if test="${assessment.allowDiscloseAnswers && fn:length(sessions) > 1}">
-	<table class="table table-responsive table-striped table-bordered table-hover table-condensed" id="rating-table-${question.uid}">
-		<tr role="row">
-			<td colspan="2" class="text-center">
-				<b><fmt:message key="label.learning.summary.other.team.answers"/></b>
-				<c:if test="${question.groupsAnswersDisclosed and not empty toolSessionID}">
-					<button type="button" class="btn btn-xs btn-default float-end" onClick="javascript:refreshToRating(${question.uid})">
-						<fmt:message key="label.refresh"/>
-					</button>
-				</c:if>
-			</td>
-		</tr>
+	<div class="card-subheader mt-3">
+		<fmt:message key="label.learning.summary.other.team.answers"/>
+	</div>
+	
+	<div class="table-responsive table-sm div-table mt-2 w-75 mx-auto" id="rating-table-${question.uid}">
+		<div class="row fw-bold text-muted">
+			<div class="w-25">
+				<fmt:message key="monitoring.label.group" />
+			</div>
+			<div class="col">
+				<fmt:message key="label.learning.short.answer.answer" />
+			</div>
+		</div>
+
 		<c:forEach var="session" items="${sessions}" varStatus="status">
 			<%-- Default answer value, when answers are not disclosed yet --%>
 			<c:set var="answer"><i><fmt:message key="label.not.yet.disclosed"/></i></c:set>
@@ -46,69 +41,76 @@
 			<c:if test="${question.groupsAnswersDisclosed}">
 				<%-- Get the needed piece of information from a complicated questionSummaries structure --%>
 				<c:set var="questionSummary" value="${questionSummaries[question.uid]}" />
-				<c:set var="sessionResults" 
-					value="${questionSummary.questionResultsPerSession[status.index]}" />
+				<c:set var="sessionResults" value="${questionSummary.questionResultsPerSession[status.index]}" />
 				<c:set var="sessionResults" value="${sessionResults[fn:length(sessionResults)-1]}" />
 				<c:choose>
 					<%-- If uid is NULL then it is a dummy session result, for a group that has not provided answers
 						 Do not display the group's rating then --%>
 					<c:when test="${empty sessionResults.uid}">
 						<c:set var="sessionResults" value="" />
 					</c:when>
+					
 					<c:otherwise>
 						<c:set var="answer" value="${sessionResults.answer}" />
 						<c:set var="itemRatingDto" value="${itemRatingDtos[sessionResults.uid]}" />
 					</c:otherwise>
 				</c:choose>
 				<c:set var="canRate" value="${toolSessionID != session.sessionId and (!isLeadershipEnabled or isUserLeader)}" />
-				<c:set var="showRating" 
-					value="${canRate or (not empty itemRatingDto.commentDtos and (toolSessionID != session.sessionId or questionSummary.showOwnGroupRating))}" />
+				<c:set var="showRating" value="${canRate or (not empty itemRatingDto.commentDtos and (toolSessionID != session.sessionId or questionSummary.showOwnGroupRating))}" />
 			</c:if>
 			
 			<%-- Show answers for all other teams, and just rating if someone has already commented on this team's answer --%>
 			<c:if test="${not empty sessionResults and (toolSessionID != session.sessionId or showRating)}">
-				<tr role="row" ${toolSessionID == session.sessionId ? 'class="bg-success"' : ''}>
-					<td class="text-center" style="width: 20%" ${showRating ? 'rowspan="2"' : ''}>
-						<lams:Portrait userId="${session.groupLeader.userId}"/>&nbsp;
+				<div class="row ${toolSessionID == session.sessionId ? 'bg-success' : ''}">
+					<div class="w-25">
+						<lams:Portrait userId="${session.groupLeader.userId}"/>
+						
 						<c:choose>
 							<c:when test="${toolSessionID == session.sessionId}">
 								<b><fmt:message key="label.your.team"/></b>
 							</c:when>
+							
 							<c:otherwise>
 								<%-- Sessions are named after groups --%>
 								<c:out value="${session.sessionName}" escapeXml="true"/> 
 							</c:otherwise>
 						</c:choose>
-					</td>
+					</div>
 					
-					<%-- Do not show your own answer --%> 
-					<c:if test="${toolSessionID != session.sessionId}">
-							<td>
-								<c:choose>
-									<c:when test="${empty question.codeStyle}">
-										<c:out value="${answer}" escapeXml="false" /> 
-									</c:when>
-									<c:otherwise>
-										<pre class="code-style" data-lang="${question.codeStyleMime}">${answer}</pre>
-									</c:otherwise>
-								</c:choose>
-							</td>
-						</tr>
-					</c:if>
-
-					<c:if test="${showRating}">
-						<tr>
-							<td>
-								<%-- Do not allow voting for own answer, and for non-leaders if leader is enabled --%>
-								<lams:Rating itemRatingDto="${itemRatingDto}"
-											 isItemAuthoredByUser="${not canRate}"
-											 showAllComments="true"
-											 refreshOnComment="rating-table-${question.uid}" />
-							</td>
-						</tr>
-					</c:if>
+					<div class="col">
+						<%-- Do not show your own answer --%> 
+						<c:if test="${toolSessionID != session.sessionId}">	
+							<c:choose>
+								<c:when test="${empty question.codeStyle}">
+									<c:out value="${answer}" escapeXml="false" /> 
+								</c:when>
+								<c:otherwise>
+									<pre class="code-style" data-lang="${question.codeStyleMime}">${answer}</pre>
+								</c:otherwise>
+							</c:choose>
+						</c:if>
 				
+						<c:if test="${showRating}">
+							<%-- Do not allow voting for own answer, and for non-leaders if leader is enabled --%>
+							<lams:Rating itemRatingDto="${itemRatingDto}"
+										 isItemAuthoredByUser="${not canRate}"
+										 showAllComments="true"
+										 refreshOnComment="rating-table-${question.uid}" />
+						</c:if>	
+					</div>
+				</div>
 			</c:if>
 		</c:forEach>
-	</table>
+		
+		<c:if test="${question.groupsAnswersDisclosed and not empty toolSessionID}">
+			<div>
+				<button type="button"
+					class="btn btn-sm btn-secondary btn-icon-refresh float-end mt-2"
+					onClick="javascript:refreshToRating(${question.uid})">
+					<fmt:message key="label.refresh" />
+				</button>
+			</div>
+		</c:if>
+	</div>
+
 </c:if>
\ No newline at end of file
Index: lams_tool_assessment/web/pages/learning/results/historyresponses.jsp
===================================================================
diff -u -r2b3d3b2f61d37cf2fa7cccc0cf4565e5dfc4b88e -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/results/historyresponses.jsp	(.../historyresponses.jsp)	(revision 2b3d3b2f61d37cf2fa7cccc0cf4565e5dfc4b88e)
+++ lams_tool_assessment/web/pages/learning/results/historyresponses.jsp	(.../historyresponses.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,25 +1,31 @@
 <%@ include file="/common/taglibs.jsp"%>
 
 <c:if test="${assessment.allowHistoryResponses && (fn:length(question.questionResults) > 1)}">
-	<h5 class="text-muted"><fmt:message key="label.learning.question.summary.history.responces" /></h5>
+	<div class="card-subheader">
+		<fmt:message key="label.learning.question.summary.history.responces" />
+	</div>
 
-	<table class="table table-striped text-muted">
-		<tr>
-			<th style="width: 70px">
-				#
-			</th>		
-			<th style="width: 25%">
-				<fmt:message key="label.learning.summary.completed.on" />
-			</th>
-			<th>
-				<fmt:message key="label.learning.question.summary.response" />
-			</th>
-			<c:if test="${assessment.allowGradesAfterAttempt}">			
-				<th style="width: 70px" >
-					<fmt:message key="label.authoring.basic.list.header.mark" />
-				</th>	
-			</c:if>		
-		</tr>
+	<div class="ms-4x">
+	<table class="table table-sm text-muted w-75 mx-auto">
+		<thead>
+			<tr>
+				<th style="width: 70px">
+					#
+				</th>		
+				<th style="width: 25%">
+					<fmt:message key="label.learning.summary.completed.on" />
+				</th>
+				<th>
+					<fmt:message key="label.learning.question.summary.response" />
+				</th>
+				<c:if test="${assessment.allowGradesAfterAttempt}">			
+					<th style="width: 70px" >
+						<fmt:message key="label.authoring.basic.list.header.mark" />
+					</th>	
+				</c:if>		
+			</tr>
+		</thead>
+		
 		<c:forEach var="item" items="${question.questionResults}" varStatus="status">
 			<c:set var="questionResult" value="${item[0]}" />
 			<c:set var="currentAssessmentResult" value="${item[1]}" />
@@ -104,6 +110,6 @@
 				</c:if>		
 			</tr>
 		</c:forEach>
-
 	</table>
+	</div>
 </c:if>							
\ No newline at end of file
Index: lams_tool_assessment/web/pages/learning/results/markandpenaltyarea.jsp
===================================================================
diff -u -r9c3a64b840753192b333afb73c8fe7bdb54be638 -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/results/markandpenaltyarea.jsp	(.../markandpenaltyarea.jsp)	(revision 9c3a64b840753192b333afb73c8fe7bdb54be638)
+++ lams_tool_assessment/web/pages/learning/results/markandpenaltyarea.jsp	(.../markandpenaltyarea.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,17 +1,21 @@
 <%@ include file="/common/taglibs.jsp"%>
 
 <c:if test="${assessment.allowQuestionFeedback && (question.feedback != null)}">
+	<div class="card-subheader mt-2">
+		<fmt:message key="label.learning.summary.feedback" />
+	</div>
 	<div class="feedback">
 		<c:out value="${question.feedback}" escapeXml="false" />
 	</div>
 </c:if>
 	
 <c:if test="${assessment.allowGradesAfterAttempt}">
-	<div class="text-primary voffset5">
+	<div class="card-subheader text-primary mt-2">
 		<fmt:message key="label.learning.marks" >
 			<fmt:param><fmt:formatNumber value="${question.mark}" maxFractionDigits="3"/></fmt:param>
 			<fmt:param>${question.maxMark}</fmt:param>
-		</fmt:message>&nbsp;		
+		</fmt:message>&nbsp;
+			
 		<c:if test="${(question.penalty ne 0) && (question.mark != question.maxMark) && (fn:length(question.questionResults) > 1) }">
 			<fmt:message key="label.learning.penalty" >
 				<fmt:param><fmt:formatNumber value="${question.penalty}" maxFractionDigits="2"/></fmt:param>
Index: lams_tool_assessment/web/pages/learning/results/markhedging.jsp
===================================================================
diff -u -r2dcf5343340a4114c364ed2b5e769f7902b559e3 -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/results/markhedging.jsp	(.../markhedging.jsp)	(revision 2dcf5343340a4114c364ed2b5e769f7902b559e3)
+++ lams_tool_assessment/web/pages/learning/results/markhedging.jsp	(.../markhedging.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,56 +1,53 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<div class="question-type">
+<div class="card-subheader">
 	<fmt:message key="label.assign.hedging.mark">
 		<fmt:param>${question.maxMark}</fmt:param>
 	</fmt:message>
 </div>
 
-<div class="table-responsive">
-	<table class="table table-hover table-condensed">
-		<c:forEach var="option" items="${question.optionDtos}">
-			<tr>
-				<td class="complete-item-gif">
-					
+<div class="table table-sm table-responsive div-hover px-3">
+	<c:forEach var="option" items="${question.optionDtos}">
+		<div class="row">
+			<c:if test="${assessment.allowRightAnswersAfterQuestion || assessment.allowWrongAnswersAfterQuestion}">
+				<div class="complete-item-gif">
 					<c:if test="${assessment.allowRightAnswersAfterQuestion && option.correct}">
 						<i class="fa fa-check text-success"></i>
 					</c:if>
 					<c:if test="${assessment.allowWrongAnswersAfterQuestion && !option.correct}">
 						<i class="fa fa-times text-danger"></i>
 					</c:if>
-							
-				</td>
+				</div>
+			</c:if>
 				
-				<td>
-					<c:out value="${option.name}" escapeXml="false" />
-				</td>
+			<div class="col">
+				<c:out value="${option.name}" escapeXml="false" />
+			</div>
 				
-				<td style="width: 100px;">
-					<c:if test="${not empty toolSessionID}">
-						<select name="question${questionIndex}_${option.displayOrder}" class="mark-hedging-select" data-question-index="${questionIndex}"
-								disabled="disabled">
-							
-							<c:forEach var="i" begin="0" end="${question.maxMark}">
-								<option
-									<c:if test="${option.answerInt == i}">selected="selected"</c:if>						
-								>${i}</option>
-							</c:forEach>
-							
-						</select>
+			<c:if test="${assessment.allowQuestionFeedback}">
+				<div style="width:30%;">
+					<c:if test="${option.answerInt > 0}">
+						<c:out value="${option.feedback}" escapeXml="false" />
 					</c:if>
-				</td>
+				</div>
+			</c:if>
 				
-				<c:if test="${assessment.allowQuestionFeedback}">
-					<td width="30%">
-						<c:if test="${option.answerInt > 0}">
-							<c:out value="${option.feedback}" escapeXml="false" />
-						</c:if>
-					</td>
+			<div style="width:60px;">
+				<c:if test="${not empty toolSessionID}">
+					<select name="question${questionIndex}_${option.displayOrder}" class="mark-hedging-select" data-question-index="${questionIndex}"
+							disabled="disabled">
+							
+						<c:forEach var="i" begin="0" end="${question.maxMark}">
+							<option
+								<c:if test="${option.answerInt == i}">selected="selected"</c:if>						
+							>${i}</option>
+						</c:forEach>
+							
+					</select>
 				</c:if>
-				
-			</tr>
-		</c:forEach>
-	</table>
+			</div>
+		</div>
+	</c:forEach>
 </div>
 
 <c:if test="${assessment.allowQuestionFeedback}">
@@ -76,7 +73,7 @@
 </c:if>
 
 <c:if test="${not empty toolSessionID and assessment.allowRightAnswersAfterQuestion}">
-	<div class="question-feedback" style="padding-bottom: 10px;">
+	<div class="feedback">
 		<fmt:message key="label.learning.marks" >
 			<fmt:param><fmt:formatNumber value="${question.mark}" maxFractionDigits="3"/></fmt:param>
 			<fmt:param>${question.maxMark}</fmt:param>
Index: lams_tool_assessment/web/pages/learning/results/matchingpairs.jsp
===================================================================
diff -u -r6f59d1b57843500bf2a226bfea958cc2b9d795ee -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/results/matchingpairs.jsp	(.../matchingpairs.jsp)	(revision 6f59d1b57843500bf2a226bfea958cc2b9d795ee)
+++ lams_tool_assessment/web/pages/learning/results/matchingpairs.jsp	(.../matchingpairs.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,50 +1,50 @@
 <%@ include file="/common/taglibs.jsp"%>
 
 <c:if test="${not empty toolSessionID}">
-	<div class="question-type">
+	<div class="card-subheader">
 		<fmt:message key="label.authoring.basic.type.matching.pairs" />
 	</div>
 </c:if>
 
-<div class="question-type">
+<div class="fst-italic">
 	<fmt:message key="label.learning.matching.pairs.possible" />
-	<ul class="${empty toolSessionID ? 'loffset20' : ''}">
+	<ul class="${empty toolSessionID ? 'ms-4' : ''}">
 		<c:forEach var="possibleOption" items="${question.matchingPairOptions}">
 			<li>${possibleOption.name}</li>
 		</c:forEach>
 	</ul>
 </div>
 
 <div class="table-responsive">
-	<table class="table table-hover table-condensed">
+	<div class="table div-hover table-sm">
 		<c:forEach var="option" items="${question.optionDtos}">
-			<tr>
-				<c:if test="${not empty toolSessionID}">
-					<td class="complete-item-gif">
+			<div class="row">
+				<c:if test="${not empty toolSessionID && (assessment.allowRightAnswersAfterQuestion || assessment.allowWrongAnswersAfterQuestion)}">
+					<div class="complete-item-gif">
 						<c:if test="${assessment.allowRightAnswersAfterQuestion && (option.answerInt == option.uid)}">
 							<i class="fa fa-check text-success"></i>	
 						</c:if>
 						<c:if test="${assessment.allowWrongAnswersAfterQuestion && (option.answerInt != -1) && (option.answerInt != option.uid)}">
 							<i class="fa fa-times text-danger"></i>	
 						</c:if>			
-					</td>
+					</div>
 				</c:if>
-						
-				<td>
+
+				<div class="col">
 					<c:out value="${option.matchingPair}" escapeXml="false" />
-				</td>
+				</div>
 				
 				<c:if test="${not empty toolSessionID}">
-					<td style="width: 100px;">
+					<div style="width: 100px;">
 						<fmt:message key="label.learning.matching.pairs.chosen" /><br>
 						<c:forEach var="possibleOption" items="${question.matchingPairOptions}">
 							<c:if test="${option.answerInt == possibleOption.uid}">
 								${possibleOption.name}
 							</c:if>
 						</c:forEach>
-					</td>
+					</div>
 				</c:if>
-			</tr>
+			</div>
 		</c:forEach>
-	</table>
+	</div>
 </div>
Index: lams_tool_assessment/web/pages/learning/results/multiplechoice.jsp
===================================================================
diff -u -rf93bacc70ee7bfbb4503c0d0da18140bb77f63a0 -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/results/multiplechoice.jsp	(.../multiplechoice.jsp)	(revision f93bacc70ee7bfbb4503c0d0da18140bb77f63a0)
+++ lams_tool_assessment/web/pages/learning/results/multiplechoice.jsp	(.../multiplechoice.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,118 +1,120 @@
 <%@ include file="/common/taglibs.jsp"%>
+<c:set var="mcqInstructions">
+	<c:choose>
+		<c:when test="${question.multipleAnswersAllowed}">
+			<fmt:message key="label.learning.choose.at.least.one.answer" />
+		</c:when>
+		<c:otherwise>
+			<fmt:message key="label.learning.choose.one.answer" />
+		</c:otherwise>
+	</c:choose>
+</c:set>
 
 <c:if test="${not empty toolSessionID}">
-	<div class="question-type">
-		<c:choose>
-			<c:when test="${question.multipleAnswersAllowed}">
-				<fmt:message key="label.learning.choose.at.least.one.answer" />
-			</c:when>
-			<c:otherwise>
-				<fmt:message key="label.learning.choose.one.answer" />
-			</c:otherwise>
-		</c:choose>
+	<div class="card-subheader">
+		${mcqInstructions}
 	</div>
 </c:if>
 
-<div class="table-responsive">
-	<table class="table table-hover table-condensed">
-		<c:forEach var="option" items="${question.optionDtos}" varStatus="answerStatus">
-			<c:set var="isCorrect" 
-				   value="${(assessment.allowDiscloseAnswers 
-				   			 ? question.correctAnswersDisclosed : assessment.allowRightAnswersAfterQuestion)
-				    		 && (option.maxMark > 0)}" />
-			<c:set var="isWrong"
-				   value="${(assessment.allowDiscloseAnswers 
-				   			 ? question.correctAnswersDisclosed : assessment.allowWrongAnswersAfterQuestion)
-				    		&& (option.maxMark <= 0)}" />
-			<tr ${isCorrect ? 'class="bg-success"' : '' }>
-				<td class="complete-item-gif">
-				    <c:if test="${option.answerBoolean && isCorrect}">
-					    <i class="fa fa-check text-success"></i>
-		            </c:if>
-				    <c:if test="${option.answerBoolean && isWrong}">
-					    <i class="fa fa-times text-danger"></i>	
-				    </c:if>			
-                </td>
-				<td class="${question.prefixAnswersWithLetters?'has-radio-button-prefix':'has-radio-button'}">
-					<c:if test="${not empty toolSessionID}">
-						<c:choose>
-							<c:when test="${question.multipleAnswersAllowed}">
-								<input type="checkbox" name="question${status.index}_${option.displayOrder}" value="${true}"
-			 						<c:if test="${option.answerBoolean}">checked="checked"</c:if>
-									disabled="disabled"
-								/>
-							</c:when>
-							<c:otherwise>
-								<input type="radio" name="question${status.index}" value="${option.displayOrder}"
-			 						<c:if test="${option.answerBoolean}">checked="checked"</c:if>
-			 						disabled="disabled"
-								/>
-							</c:otherwise>
-						</c:choose>
-					</c:if>
+<fieldset>
+	<legend class="visually-hidden">
+		${mcqInstructions}
+	</legend>
+
+	<div class="table-responsive">		
+		<div class="table-sm div-hover">
+			<c:forEach var="option" items="${question.optionDtos}" varStatus="answerStatus">
+				<c:set var="isCorrect" value="${(assessment.allowDiscloseAnswers 
+					   			 ? question.correctAnswersDisclosed : assessment.allowRightAnswersAfterQuestion)
+					    		 && (option.maxMark > 0)}" />
+				<c:set var="isWrong" value="${(assessment.allowDiscloseAnswers 
+					   			 ? question.correctAnswersDisclosed : assessment.allowWrongAnswersAfterQuestion)
+					    		&& (option.maxMark <= 0)}" />
+	
+				<div class="row ${isCorrect ? 'text-success' : '' }">
+					<div class="complete-item-gif">
+					    <c:if test="${option.answerBoolean && isCorrect}">
+						    <i class="fa fa-check text-success"></i>
+			            </c:if>
+					    <c:if test="${option.answerBoolean && isWrong}">
+						    <i class="fa fa-times text-danger"></i>	
+					    </c:if>			
+	                </div>
+	                
+					<div class="complete-item-gif">
+						<c:if test="${not empty toolSessionID}">
+							<c:choose>
+								<c:when test="${question.multipleAnswersAllowed}">
+									<input type="checkbox" name="question${status.index}_${option.displayOrder}" value="${true}"
+				 						<c:if test="${option.answerBoolean}">checked="checked"</c:if>
+										disabled="disabled"
+									/>
+								</c:when>
+								<c:otherwise>
+									<input type="radio" name="question${status.index}" value="${option.displayOrder}"
+				 						<c:if test="${option.answerBoolean}">checked="checked"</c:if>
+				 						disabled="disabled"
+									/>
+								</c:otherwise>
+							</c:choose>
+						</c:if>
+						
+						<c:if test="${question.prefixAnswersWithLetters}">
+				 			&nbsp;${option.formatPrefixLetter(answerStatus.index)}
+	 	                </c:if>	
+					</div>
 					
-					<c:if test="${question.prefixAnswersWithLetters}">
-			 			&nbsp;${option.formatPrefixLetter(answerStatus.index)}
- 	                </c:if>	
-				</td>
+					<div class="col">
+						<c:out value="${option.name}" escapeXml="false" />
+					</div>
+					
+					<c:if test="${assessment.allowQuestionFeedback}">
+						<div style="width:30%;">
+							<c:if test="${option.answerBoolean}">
+								<c:out value="${option.feedback}" escapeXml="false" />
+							</c:if>
+						</div>		
+					</c:if>
 				
-				<td ${question.prefixAnswersWithLetters?'class="has-radio-button-prefix-answer"':''}">
-					<c:out value="${option.name}" escapeXml="false" />
-				</td>
-				
-				<c:if test="${assessment.allowQuestionFeedback}">
-					<td width=30%;">
-						<c:if test="${option.answerBoolean}">
-							<c:out value="${option.feedback}" escapeXml="false" />
-						</c:if>
-					</td>		
-				</c:if>
-				
-			</tr>
-			
-			<c:if test="${assessment.allowDiscloseAnswers && question.groupsAnswersDisclosed && fn:length(sessions) > 1}">
-				<c:set var="teams" value="" />
-				<c:forEach var="session" items="${sessions}" varStatus="sessionStatus">
-					<%-- Now groups other than this one --%>
-					<c:if test="${sessionMap.toolSessionID != session.sessionId}">
-						<%-- Get the needed piece of information from a complicated questionSummaries structure --%>
-						<c:set var="sessionResults" 
-							   value="${questionSummaries[question.uid].questionResultsPerSession[sessionStatus.index]}" />
-						<c:set var="sessionResults"
-						 	   value="${sessionResults[fn:length(sessionResults)-1]}" />
-						<c:forEach var="sessionOption" items="${sessionResults.optionAnswers}">
-							<c:if test="${sessionOption.answerBoolean && option.uid == sessionOption.optionUid}">
-								<c:set var="teams">
-									${teams}
-									<lams:Portrait userId="${session.groupLeader.userId}"/>&nbsp;
-									<c:out value="${session.sessionName}" escapeXml="true"/>&nbsp;
-									<c:if test="${not empty sessionResults.justification}">
-										<lams:Popover titleKey="label.answer.justification">
-							          		<c:out value='${sessionResults.justification}' />
-							          	</lams:Popover>
+					<c:if test="${assessment.allowDiscloseAnswers && question.groupsAnswersDisclosed && fn:length(sessions) > 1}">
+						<c:set var="teams" value="" />
+						<c:forEach var="session" items="${sessions}" varStatus="sessionStatus">
+							<%-- Now groups other than this one --%>
+							<c:if test="${sessionMap.toolSessionID != session.sessionId}">
+								<%-- Get the needed piece of information from a complicated questionSummaries structure --%>
+								<c:set var="sessionResults" value="${questionSummaries[question.uid].questionResultsPerSession[sessionStatus.index]}" />
+								<c:set var="sessionResults" value="${sessionResults[fn:length(sessionResults)-1]}" />
+								<c:forEach var="sessionOption" items="${sessionResults.optionAnswers}">
+									<c:if test="${sessionOption.answerBoolean && option.uid == sessionOption.optionUid}">
+										<c:set var="teams">
+											${teams}
+											<lams:Portrait userId="${session.groupLeader.userId}"/>&nbsp;
+											<c:out value="${session.sessionName}" escapeXml="true"/>&nbsp;
+											<c:if test="${not empty sessionResults.justification}">
+												<lams:Popover titleKey="label.answer.justification">
+									          		<c:out value='${sessionResults.justification}' />
+									          	</lams:Popover>
+											</c:if>
+										</c:set>
 									</c:if>
-								</c:set>
+								</c:forEach>
 							</c:if>
 						</c:forEach>
+						
+						<c:if test="${not empty teams}">
+							<div class="selected-by-groups mt-2">
+								<div class="${isCorrect ? 'text-success' : '' }">
+									<fmt:message key="label.learning.summary.selected.by" />
+									${teams}
+								</div>
+							</div>
+						</c:if>
 					</c:if>
-				</c:forEach>
-				<c:if test="${not empty teams}">
-					<tr class="selected-by-groups" >
-						<td ${isCorrect ? "class='bg-success'" : "" }></td>
-						<td ${isCorrect ? "class='bg-success'" : "" }></td>
-						<td colspan="2" ${isCorrect ? "class='bg-success'" : "" }>
-							<span >
-								<fmt:message key="label.learning.summary.selected.by" />
-							</span>
-							${teams}
-						</td>
-					</tr>
-				</c:if>
-			</c:if>
-			
-		</c:forEach>
-	</table>
-</div>
+				</div>
+			</c:forEach>
+		</div>
+	</div>
+</fieldset>
 
 <c:if test="${assessment.allowQuestionFeedback}">
 	<div class="feedback">
Index: lams_tool_assessment/web/pages/learning/results/numerical.jsp
===================================================================
diff -u -r3437878235018c207f602ea0464c109dd8e077c9 -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/results/numerical.jsp	(.../numerical.jsp)	(revision 3437878235018c207f602ea0464c109dd8e077c9)
+++ lams_tool_assessment/web/pages/learning/results/numerical.jsp	(.../numerical.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,29 +1,23 @@
 <%@ include file="/common/taglibs.jsp"%>
 
 <c:if test="${not empty toolSessionID}">
-	<div class="question-type">
+	<div class="card-subheader">
 		<fmt:message key="label.learning.short.answer.answer" />
 	</div>
 	
-	<div class="table-responsive">
-		<table class="table table-hover table-condensed">
-			<tr>
-				<td class="complete-item-gif">
-					<c:if test="${assessment.allowRightAnswersAfterQuestion && question.answerBoolean}">
-						<i class="fa fa-check text-success"></i>	
-					</c:if>			
-					<c:if test="${assessment.allowWrongAnswersAfterQuestion && !question.answerBoolean}">
-						<i class="fa fa-times text-danger"></i>	
-					</c:if>
-				</td>
+	<div class="table-responsive mb-3 d-flex align-items-center">
+		<c:if test="${assessment.allowRightAnswersAfterQuestion || assessment.allowWrongAnswersAfterQuestion}">
+			<span class="complete-item-gif">
+				<c:if test="${assessment.allowRightAnswersAfterQuestion && question.answerBoolean}">
+					<i class="fa fa-check text-success"></i>	
+				</c:if>			
+				<c:if test="${assessment.allowWrongAnswersAfterQuestion && !question.answerBoolean}">
+					<i class="fa fa-times text-danger"></i>	
+				</c:if>
+			</span>
+		</c:if>		
 				
-				<td>
-					<input type="text" autocomplete="off" name="question${status.index}" value="<c:out value='${question.answer}' />" class="form-control"
-						disabled="disabled"
-					/>	
-				</td>
-			</tr>
-		</table>
+		<c:out value='${question.answer}' />		
 	</div>		
 </c:if>
 
Index: lams_tool_assessment/web/pages/learning/results/ordering.jsp
===================================================================
diff -u -r3f939ddd8d8263c84e06bb7cf46c2db4b45ec1e5 -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/results/ordering.jsp	(.../ordering.jsp)	(revision 3f939ddd8d8263c84e06bb7cf46c2db4b45ec1e5)
+++ lams_tool_assessment/web/pages/learning/results/ordering.jsp	(.../ordering.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,30 +1,32 @@
 <%@ include file="/common/taglibs.jsp"%>
 
 <c:if test="${not empty toolSessionID}">
-	<div class="question-type">
+	<div class="card-subheader">
 		<fmt:message key="label.learning.ordering.sort.answers" />
 	</div>
 </c:if>
 
 <div class="table-responsive">
-	<table class="table table-hover table-condensed">
+	<div class="div-hover table-sm">
 		<c:forEach var="option" items="${question.optionDtos}" varStatus="ordStatus">
-			<tr>
-				<td class="complete-item-gif">
-					<c:if test="${assessment.allowRightAnswersAfterQuestion && (option.displayOrder == ordStatus.index)}">
-						<i class="fa fa-check text-success"></i>	
-					</c:if>
-					<c:if test="${assessment.allowWrongAnswersAfterQuestion && (option.displayOrder != ordStatus.index)}">
-						<i class="fa fa-times text-danger"></i>	
-					</c:if>			
-				</td>											
+			<div class="row">			
+				<c:if test="${assessment.allowRightAnswersAfterQuestion || assessment.allowWrongAnswersAfterQuestion}">
+					<div class="complete-item-gif">
+						<c:if test="${assessment.allowRightAnswersAfterQuestion && (option.displayOrder == ordStatus.index)}">
+							<i class="fa fa-check text-success"></i>	
+						</c:if>
+						<c:if test="${assessment.allowWrongAnswersAfterQuestion && (option.displayOrder != ordStatus.index)}">
+							<i class="fa fa-times text-danger"></i>	
+						</c:if>			
+					</div>
+				</c:if>										
 			
-				<td class="ordering-option">
+				<div class="col">
 					<c:out value="${option.name}" escapeXml="false" />
-				</td>		
-			</tr>
+				</div>		
+			</div>
 		</c:forEach>
-	</table>
+	</div>
 </div>
 	
 <c:if test="${assessment.allowQuestionFeedback}">
Index: lams_tool_assessment/web/pages/learning/results/truefalse.jsp
===================================================================
diff -u -r3437878235018c207f602ea0464c109dd8e077c9 -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/results/truefalse.jsp	(.../truefalse.jsp)	(revision 3437878235018c207f602ea0464c109dd8e077c9)
+++ lams_tool_assessment/web/pages/learning/results/truefalse.jsp	(.../truefalse.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,89 +1,94 @@
 <%@ include file="/common/taglibs.jsp"%>
+<c:set var="truefalseInstructions">
+	<fmt:message key="label.learning.short.answer.answer" />
+</c:set>
 
 <c:if test="${not empty toolSessionID}">
-	<div class="question-type">
-		<fmt:message key="label.learning.short.answer.answer" />
+	<div class="card-subheader">
+		${truefalseInstructions}
 	</div>
 </c:if>
 
-<div class="table-responsive">
-	<table class="table table-hover table-condensed">
-		<tr>
-			<td class="complete-item-gif">
-				
-				<c:if test="${(question.answer != null) 
-						&& (assessment.allowRightAnswersAfterQuestion && (question.answerBoolean == question.correctAnswer) 
-						|| assessment.allowWrongAnswersAfterQuestion && (question.answerBoolean != question.correctAnswer)) }">
-					
-					<c:choose>
-						<c:when test="${question.correctAnswer}">
-							<i class="fa fa-check text-success"></i>
-						</c:when>
-						<c:otherwise>
-							<i class="fa fa-times text-danger"></i>	
-						</c:otherwise>		
-					</c:choose>					
-					
-				</c:if>
+<fieldset>
+	<legend class="visually-hidden">
+		${truefalseInstructions}
+	</legend>
+		
+	<div class="table-responsive">
+		<div class="table div-hover table-sm">
+			<div class="row">
+				<div class="complete-item-gif"><i class="fa fa-check text-success"></i>
+					<c:if test="${(question.answer != null) 
+							&& (assessment.allowRightAnswersAfterQuestion && (question.answerBoolean == question.correctAnswer) 
+							|| assessment.allowWrongAnswersAfterQuestion && (question.answerBoolean != question.correctAnswer)) }">
 						
-			</td>
-					
-			<td class="has-radio-button">
-				<c:if test="${not empty toolSessionID}">
-					<input type="radio" name="question${status.index}" value="${true}"
-		 				<c:if test="${question.answerBoolean}">checked="checked"</c:if>
-						disabled="disabled"	
-					/>
-				</c:if>
-			</td>
-			<td>
-				<fmt:message key="label.learning.true.false.true" />
-			</td>
-		</tr>
-		<tr>
-			<td class="complete-item-gif">
-				
-				<c:if test="${(question.answer != null) 
-						&& (assessment.allowRightAnswersAfterQuestion && (question.answerBoolean == question.correctAnswer) 
-						|| assessment.allowWrongAnswersAfterQuestion && (question.answerBoolean != question.correctAnswer)) }">
-					
-					<c:choose>
-						<c:when test="${!question.correctAnswer}">
-							<i class="fa fa-check text-success"></i>	
-						</c:when>
-						<c:otherwise>
-							<i class="fa fa-times text-danger"></i>	
-						</c:otherwise>		
-					</c:choose>					
-				</c:if>				
+						<c:choose>
+							<c:when test="${question.correctAnswer}">
+								<i class="fa fa-check text-success"></i>
+							</c:when>
+							<c:otherwise>
+								<i class="fa fa-times text-danger"></i>	
+							</c:otherwise>		
+						</c:choose>					
 						
-			</td>
+					</c:if>	
+				</div>
 						
-			<td class="has-radio-button">
-				<c:if test="${not empty toolSessionID}">
-					<input type="radio" name="question${status.index}" value="${false}"
-		 				<c:if test="${(!question.answerBoolean) and (question.answer != null)}">checked="checked"</c:if>
-						disabled="disabled"
-					/>
-				</c:if>
-			</td>
-			<td>
-				<fmt:message key="label.learning.true.false.false" />
-			</td>
-		</tr>
-	</table>
-</div>
-
-<c:choose>
-	<c:when test="${question.answerBoolean}">
-		<div class="feedback">
-			<c:out value="${question.feedbackOnCorrect}" escapeXml="false" />
+				<div class="complete-item-gif">
+					<c:if test="${not empty toolSessionID}">
+						<input type="radio" name="question${status.index}" value="${true}"
+			 				<c:if test="${question.answerBoolean}">checked="checked"</c:if>
+							disabled="disabled"	
+						/>
+					</c:if>
+				</div>
+				
+				<div class="col">
+					<fmt:message key="label.learning.true.false.true" />
+				</div>
+			</div>
+			
+			<div class="row">
+				<div class="complete-item-gif">
+					<c:if test="${(question.answer != null) 
+							&& (assessment.allowRightAnswersAfterQuestion && (question.answerBoolean == question.correctAnswer) 
+							|| assessment.allowWrongAnswersAfterQuestion && (question.answerBoolean != question.correctAnswer)) }">
+						
+						<c:choose>
+							<c:when test="${!question.correctAnswer}">
+								<i class="fa fa-check text-success"></i>	
+							</c:when>
+							<c:otherwise>
+								<i class="fa fa-times text-danger"></i>	
+							</c:otherwise>		
+						</c:choose>					
+					</c:if>		
+				</div>
+							
+				<div class="complete-item-gif">
+					<c:if test="${not empty toolSessionID}">
+						<input type="radio" name="question${status.index}" value="${false}"
+			 				<c:if test="${(!question.answerBoolean) and (question.answer != null)}">checked="checked"</c:if>
+							disabled="disabled"
+						/>
+					</c:if>
+				</div>
+				
+				<div class="col">
+					<fmt:message key="label.learning.true.false.false" />
+				</div>
+			</div>
 		</div>
-	</c:when>
-	<c:when test="${!question.answerBoolean}">
-		<div class="feedback">
-			<c:out value="${question.feedbackOnIncorrect}" escapeXml="false" />
-		</div>
-	</c:when>		
-</c:choose>
+	</div>
+</fieldset>
 
+<div class="feedback">
+	<c:choose>
+		<c:when test="${question.answerBoolean}">
+			<c:out value="${question.feedbackOnCorrect}" escapeXml="false" />
+		</c:when>
+		<c:when test="${!question.answerBoolean}">
+			<c:out value="${question.feedbackOnIncorrect}" escapeXml="false" />	
+		</c:when>		
+	</c:choose>
+</div>
Index: lams_tool_assessment/web/pages/learning/results/vsa.jsp
===================================================================
diff -u -r3437878235018c207f602ea0464c109dd8e077c9 -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/results/vsa.jsp	(.../vsa.jsp)	(revision 3437878235018c207f602ea0464c109dd8e077c9)
+++ lams_tool_assessment/web/pages/learning/results/vsa.jsp	(.../vsa.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,31 +1,20 @@
 <%@ include file="/common/taglibs.jsp"%>
 
 <c:if test="${not empty toolSessionID}">
-	<div class="question-type">
+	<div class="card-subheader">
 		<fmt:message key="label.learning.short.answer.answer" />
 	</div>
 	
-	<div class="table-responsive">
-		<table class="table table-hover table-condensed">
-			<tr>
-				<td class="complete-item-gif">
-					<c:if test="${assessment.allowRightAnswersAfterQuestion && question.answerBoolean}">
-						<i class="fa fa-check text-success"></i>
-					</c:if>			
-					<c:if test="${assessment.allowWrongAnswersAfterQuestion && !question.answerBoolean}">
-						<i class="fa fa-times text-danger"></i>
-					</c:if>	
-				</td>
-				
-				<td>
-					<input type="text" autocomplete="off" name="question${status.index}" value="<c:out value='${question.answer}' />"  class="form-control" 
-						disabled="disabled"
-					/>	
-				</td>	
-			</tr>
-		</table>
-	</div>	
+	<div class="d-flex align-items-center">
+		<c:if test="${assessment.allowRightAnswersAfterQuestion && question.answerBoolean}">
+			<i class="fa fa-check text-success m-2"></i>
+		</c:if>			
+		<c:if test="${assessment.allowWrongAnswersAfterQuestion && !question.answerBoolean}">
+			<i class="fa fa-times text-danger m-2"></i>
+		</c:if>
 
+		<c:out value='${question.answer}' />
+	</div>
 </c:if>
 
 <c:if test="${assessment.allowQuestionFeedback && (question.questionFeedback != null)}">
Index: lams_tool_assessment/web/pages/learning/waitForLeaderTimeLimit.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/learning/waitForLeaderTimeLimit.jsp	(.../waitForLeaderTimeLimit.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_assessment/web/pages/learning/waitForLeaderTimeLimit.jsp	(.../waitForLeaderTimeLimit.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -1,37 +1,26 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 
-<lams:html>
-<lams:head>
-	<title><fmt:message key="activity.title" /></title>
-
-	<lams:css />
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
-
+<lams:PageLearner title="${sessionMap.title}" toolSessionID="${sessionMap.toolSessionID}">
 	<script type="text/javascript">
 		function refresh() {
 			location.reload();
 		}
-		
+
 		//refresh page every 30 sec
-		setTimeout("refresh();",30000);
-    </script>
-</lams:head>
-<body class="stripes">
+		setTimeout("refresh();", 30000);
+	</script>
 
-	<lams:Page type="learner" title="${content.title}">
-		
-		<h4>
+	<div class="container-lg">
+		<lams:Alert5 id="waitingForLeader" type="info" close="false">
 			<fmt:message key="${waitingMessageKey}" />
-		</h4>
-		
+		</lams:Alert5>
+
 		<div class="activity-bottom-buttons">
-			<button type="button" name="refreshButton" onclick="refresh();" class="btn btn-primary">
+			<button id="refresh-button" name="refreshButton" onclick="refresh();" class="btn btn-primary btn-icon-refresh">
 				<fmt:message key="label.refresh" />
 			</button>
 		</div>
-
-	</lams:Page>
-
-</body>
-</lams:html>
+	</div>
+</lams:PageLearner>
Index: lams_tool_assessment/web/pages/monitoring/parts/discloseAnswers5.jsp
===================================================================
diff -u -rcfd463431d2171b40403dcff2508408e72685c0e -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/monitoring/parts/discloseAnswers5.jsp	(.../discloseAnswers5.jsp)	(revision cfd463431d2171b40403dcff2508408e72685c0e)
+++ lams_tool_assessment/web/pages/monitoring/parts/discloseAnswers5.jsp	(.../discloseAnswers5.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -5,7 +5,7 @@
 		var toolContentId = resultsPane.data('toolContentId');
 		// load an embedded results list
 		// show details button needs to be set in the page which included this page
-		resultsPane.load("<c:url value='/learning/showResultsForTeacher.do'/>?embedded=true&newUI=true&sessionMapID=${sessionMapID}&showQuestionDetailsButton="
+		resultsPane.load("<c:url value='/learning/showResultsForTeacher.do'/>?embedded=true&sessionMapID=${sessionMapID}&showQuestionDetailsButton="
 						  + showQuestionDetailsButton + "&toolContentID=" + toolContentId, function(){
 			var assessmentQuestionsPane = $(this).closest('.assessment-questions-pane'),
 				// are any correct/groups buttons clickable?
Index: lams_tool_assessment/web/pages/monitoring/parts/usersummary.jsp
===================================================================
diff -u -rcfd463431d2171b40403dcff2508408e72685c0e -r6866da235d682d74f883afdd01e00e92d16a13eb
--- lams_tool_assessment/web/pages/monitoring/parts/usersummary.jsp	(.../usersummary.jsp)	(revision cfd463431d2171b40403dcff2508408e72685c0e)
+++ lams_tool_assessment/web/pages/monitoring/parts/usersummary.jsp	(.../usersummary.jsp)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
@@ -15,10 +15,6 @@
 		</c:if>
 	
 		<style>
-			.question-etherpad {
-				padding: 0;
-			}
-			
 			[data-toggle="collapse"].collapsed .if-not-collapsed, [data-toggle="collapse"]:not(.collapsed) .if-collapsed {
 	  			display: none;
 	  		}