Index: lams_central/web/css/free.ui.jqgrid.custom.css
===================================================================
diff -u -rf5fa910456cca31846e2c1a097bb4ab750a345ab -rbbe6b21a663059e2539bc0ea5ce761445b5ae1c1
--- lams_central/web/css/free.ui.jqgrid.custom.css	(.../free.ui.jqgrid.custom.css)	(revision f5fa910456cca31846e2c1a097bb4ab750a345ab)
+++ lams_central/web/css/free.ui.jqgrid.custom.css	(.../free.ui.jqgrid.custom.css)	(revision bbe6b21a663059e2539bc0ea5ce761445b5ae1c1)
@@ -24,7 +24,8 @@
 	font-size: 1.1rem;
 	margin: 0;
 	width: 100%;
-	background-color: #fff;
+	background-color: var(--bs-gray-200) !important;
+    border-top: 1px solid var(--bs-gray-400) !important;
 }
 
 .ui-jqgrid-labels th {
Index: lams_tool_scratchie/conf/language/lams/ApplicationResources_en_AU.properties
===================================================================
diff -u -ra455dd0a59c45ffc1d9f9ebd34f33f158bc08d46 -rbbe6b21a663059e2539bc0ea5ce761445b5ae1c1
--- lams_tool_scratchie/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision a455dd0a59c45ffc1d9f9ebd34f33f158bc08d46)
+++ lams_tool_scratchie/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision bbe6b21a663059e2539bc0ea5ce761445b5ae1c1)
@@ -33,6 +33,7 @@
 label.up = Up
 label.down = Down
 label.authoring.advanced.reflectOnActivity = Add Notebook at end with the following instructions:
+label.notebook = Notebook entry
 label.continue = Continue
 page.title.monitoring.view.reflection = View notebook entries
 button.close = Close
Index: lams_tool_scratchie/web/includes/css/scratchie-learning.scss
===================================================================
diff -u -r206674f9049f7887849d7dab02f97fcf1a1e5dc8 -rbbe6b21a663059e2539bc0ea5ce761445b5ae1c1
--- lams_tool_scratchie/web/includes/css/scratchie-learning.scss	(.../scratchie-learning.scss)	(revision 206674f9049f7887849d7dab02f97fcf1a1e5dc8)
+++ lams_tool_scratchie/web/includes/css/scratchie-learning.scss	(.../scratchie-learning.scss)	(revision bbe6b21a663059e2539bc0ea5ce761445b5ae1c1)
@@ -12,11 +12,23 @@
 	border-bottom: none;
 }
 
+.scratches .row {
+	align-items: center;
+	border-top: 1px solid #ddd;
+	padding: 12px;
+}
+.scratches .row:hover{
+	background-color: var(--bs-gray-200);
+}
+.scratches .scartchie-image-col {
+	width: 100px;
+	margin-left: -1rem;
+}
+
 .scartchie-image {
 	border: 0;
 }
 
-
 .jGrowl {
   	font-size: 22px;
   	font-family: $font-family-base;
@@ -59,15 +71,12 @@
     margin-top: 10px;
     margin-bottom: 15px;
 }
-.lead {
-	margin-top: 30px;
+[data-bs-toggle="collapse"].collapsed .if-not-collapsed {
+	display: none;
 }
-[data-toggle="collapse"].collapsed .if-not-collapsed {
-  display: none;
+[data-bs-toggle="collapse"]:not(.collapsed) .if-collapsed {
+	display: none;
 }
-[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
-  display: none;
-}
 	
 /* confidence levels tooltips */
 .tooltip.top .tooltip-inner {
@@ -76,14 +85,14 @@
     border:  1px solid #ddd;
 }
 .tooltip.top .tooltip-arrow {
-      border-top-color:grey;
-      color:black;
+	border-top-color:grey;
+	color:black;
 }
 .tooltip {
-background-color: transparent;
-border: none;
-color:black;
-box-shadow:none;
+	background-color: transparent;
+	border: none;
+	color:black;
+	box-shadow:none;
 }
 		
 .item-score {
@@ -104,4 +113,13 @@
 	font-style: italic; 
 	color:#47bc23;
 	text-align: center;
+}
+
+.bq-title {
+	text-decoration: underline;
+}
+	
+.fake-validation-input {
+	visibility: hidden;
+	height: 0px;	
 }
\ No newline at end of file
Index: lams_tool_scratchie/web/includes/css/scratchie.scss
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rbbe6b21a663059e2539bc0ea5ce761445b5ae1c1
--- lams_tool_scratchie/web/includes/css/scratchie.scss	(.../scratchie.scss)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_scratchie/web/includes/css/scratchie.scss	(.../scratchie.scss)	(revision bbe6b21a663059e2539bc0ea5ce761445b5ae1c1)
@@ -1,9 +1,4 @@
 @import "_lams_variables.scss";
-	
-.fake-validation-input {
-	visibility: hidden;
-	height: 0px;	
-}
 
 label.error { 
 	float: none; 
@@ -12,7 +7,3 @@
 	font-weight: bold; 
 	font-style: italic;
 }
-
-.bq-title {
-        text-decoration: underline;
-}
Index: lams_tool_scratchie/web/pages/learning/finish.jsp
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rbbe6b21a663059e2539bc0ea5ce761445b5ae1c1
--- lams_tool_scratchie/web/pages/learning/finish.jsp	(.../finish.jsp)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_scratchie/web/pages/learning/finish.jsp	(.../finish.jsp)	(revision bbe6b21a663059e2539bc0ea5ce761445b5ae1c1)
@@ -1,16 +1,10 @@
 <!DOCTYPE html>
-		
-
 <%@ include file="/common/taglibs.jsp"%>
 <%-- This page just for : redir finish page to parent rather that part of the frame --%>
 <html>
 	<body class="stripes">
 	<script type="text/javascript">
-	<!--
 		document.location.href = "${nextActivityUrl}";
-	-->        
     </script>
-	
-	
 	</body>
 </html>
Index: lams_tool_scratchie/web/pages/learning/learning.jsp
===================================================================
diff -u -r79123cc650a4028c6dfa0e931d9a074b07234be3 -rbbe6b21a663059e2539bc0ea5ce761445b5ae1c1
--- lams_tool_scratchie/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 79123cc650a4028c6dfa0e931d9a074b07234be3)
+++ lams_tool_scratchie/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision bbe6b21a663059e2539bc0ea5ce761445b5ae1c1)
@@ -15,29 +15,25 @@
 <c:set var="isWaitingForLeaderToSubmitNotebook" value="${sessionMap.isWaitingForLeaderToSubmitNotebook}" />
 <c:set var="hideFinishButton" value="${!isUserLeader && (!isScratchingFinished || isWaitingForLeaderToSubmitNotebook)}" />
 
-<lams:html>
-<lams:head>
-	<title><fmt:message key="label.learning.title" /></title>
+<fmt:message key="label.learning.title" var="titlr"/>
+<lams:PageLearner title="${title}" toolSessionID="${toolSessionID}">
 
 	<!-- ********************  CSS ********************** -->
-	<lams:css />
+	
 	<link rel="stylesheet" type="text/css" href="${lams}css/jquery-ui-bootstrap-theme.css" />
-	<link href="<lams:WebAppURL/>includes/css/scratchie.css" rel="stylesheet" type="text/css">
+	<link rel="stylesheet" type="text/css" href="<lams:WebAppURL/>includes/css/scratchie.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/circle.css" />
 	<link rel="stylesheet" type="text/css" href="<lams:WebAppURL/>includes/css/scratchie-learning.css" />
 
 	<!-- ********************  javascript ********************** -->
-	<lams:JSImport src="includes/javascript/common.js" />
-	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
 	<script>
 		//Resolve name collision between jQuery UI and Twitter Bootstrap
 		$.widget.bridge('uitooltip', $.ui.tooltip);
 	</script>
 	<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>    
-	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.timeago.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.plugin.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.countdown.js"></script>
@@ -265,26 +261,26 @@
 
 		//add new VSA answer to the table (required in case user entered answer not present in the previous answers)
 		function paintNewVsaAnswer(itemUid, answer) {
-			var optionsLength = $("table#scratches-" + itemUid + " tr").length;
+			var optionsLength = $("#scratches #scratches-" + itemUid + " .row").length;
 			var idSuffix = '-' + itemUid + '-' + hashCode(answer);
 			
 			var trElem = 
-				'<tr id="tr' + idSuffix + '">' +
-					'<td style="width: 40px; border: none;">' +
+				'<div id="tr' + idSuffix + '" class="row mx-2">' +
+					'<div class="scartchie-image-col">' +
 						'<img src="<lams:WebAppURL/>includes/images/answer-' + optionsLength + '.png" class="scartchie-image" id="image' + idSuffix + '" />' +
-					'</td>' +
+					'</div>' +
 
-					'<td class="answer-with-confidence-level-portrait">' +
+					'<div class="col answer-with-confidence-level-portrait">' +
 						'<div class="answer-description">' +
 							xmlEscape(answer) +
 						'</div>' +
 						'<hr class="hr-confidence-level" />' +
 						'<div style="padding-bottom: 10px;">' +
 							'<lams:Portrait userId="${sessionMap.groupLeaderUserId}"/>' +
 						'</div>' +
-					'</td>' +
-				'</tr>';
-			$("table#scratches-" + itemUid).append(trElem);
+					'</div>' +
+				'</div>';
+			$(".table#scratches-" + itemUid).append(trElem);
 		}
 
 		function checkAllCorrectMcqAnswersFound() {
@@ -296,7 +292,7 @@
 			} else {
 				$('#finishButton').prop('disabled', false)
 								  .css('pointer-events', 'auto')
-								  .parent().tooltip('destroy');
+								  .parent().tooltip('dispose');
 			}
 		}
 
@@ -326,7 +322,7 @@
 			// time limit feature
 			
 			function displayCountdown(secondsLeft){
-				var countdown = '<div id="countdown"></div>' 
+				var countdown = '<div id="countdown" role="timer"></div>' 
 				$.blockUI({
 					message: countdown, 
 					showOverlay: false,
@@ -357,7 +353,7 @@
 						}
 					},
 					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.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.time.is.over" /></spring:escapeBody></h1>' }); 
 				        
 				        setTimeout(function() { 
 					        if (${isUserLeader}) {
@@ -453,8 +449,7 @@
 				scratchieWebsocketPingFunc(true);
 			};
 		</c:if>
-			
-		
+
 		//autosave feature
 		<c:if test="${isUserLeader && (mode != 'teacher')}">
 			var autosaveInterval = "60000"; // 60 seconds interval
@@ -475,7 +470,7 @@
 					url: "<lams:WebAppURL/>learning/autosaveBurningQuestions.do?sessionMapID=${sessionMapID}&date=" + new Date().getTime(),
 	                success: function() {
 		                $.jGrowl(
-		                	"<i class='fa fa-lg fa-floppy-o'></i> <spring:escapeBody javaScriptEscape='true'><fmt:message key='label.burning.questions.autosaved' /></spring:escapeBody>",
+		                	"<span aria-live='polite'><i class='fa fa-lg fa-floppy-o'></i> <spring:escapeBody javaScriptEscape='true'><fmt:message key='label.burning.questions.autosaved' /></spring:escapeBody><span>",
 		                	{ life: 2000, closeTemplate: '' }
 		                );
 	                }
@@ -505,51 +500,44 @@
 			return false;
 		}
     </script>
-</lams:head>
-<body class="stripes">
 
-	<lams:Page type="learner" title="${scratchie.title}">
-
+	<div class="container-lg">
 		<lams:LeaderDisplay username="${sessionMap.groupLeaderName}" userId="${sessionMap.groupLeaderUserId}"/>
 
 		<c:if test="${sessionMap.userFinished && (mode == 'teacher')}">
-			<div class="voffset10">
-				<lams:Alert id="score" type="info" close="false">
+			<div class="mt-3">
+				<lams:Alert5 id="score" type="info" close="false">
 					<fmt:message key="label.you.ve.got">
 						<fmt:param>${score}</fmt:param>
 						<fmt:param>${scorePercentage}</fmt:param>
 					</fmt:message>
-				</lams:Alert>
+				</lams:Alert5>
 			</div>
 		</c:if>
 		
 		<c:if test="${isUserLeader and scratchie.revealOnDoubleClick}">
-			<div class="row no-gutter voffset20">
-				<div class="col-xs-12 col-sm-offset-3 col-sm-6">
-					<div class="alert alert-warning">
-						<i class="fa fa-info-circle fa-lg" aria-hidden="true"></i> <fmt:message key="label.learning.reveal.double.click" />
-					</div>
-				</div>
-			</div>
+			<lams:Alert5 type="warning" id="reveal-double-click-warning" close="false">
+				<i class="fa fa-info-circle fa-lg" aria-hidden="true"></i> <fmt:message key="label.learning.reveal.double.click" />
+			</lams:Alert5>			
 		</c:if>
 
-		<div class="panel">
+		<div id="instructions" class="instructions">
 			<c:out value="${scratchie.instructions}" escapeXml="false" />
 		</div>
 
 		<c:if test="${not empty sessionMap.submissionDeadline}">
-			<lams:Alert id="submissionDeadline" close="true" type="info">
+			<lams:Alert5 id="submissionDeadline" close="true" type="info">
 				<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="${mode != 'teacher'}">
-			<div id="timelimit-start-dialog"> 
-		        <h4>
+			<div id="timelimit-start-dialog" role="alertdialog" aria-labelledby="are-you-ready"> 
+		        <h4 id="are-you-ready">
 		        	<fmt:message key='label.are.you.ready' />
 		        </h4>
 		        <button name="ok" id="timelimit-start-ok" class="button">
@@ -558,13 +546,11 @@
 			</div>
 		</c:if>
 
-		<lams:errors/>
+		<lams:errors5/>
 
 		<div id="questionListArea">
 			<%@ include file="questionlist.jsp"%>
 		</div>
-
-		<div id="footer"></div>
-	</lams:Page>
-</body>
-</lams:html>
\ No newline at end of file
+		
+	</div>
+</lams:PageLearner>
Index: lams_tool_scratchie/web/pages/learning/parts/confidenceLevelPortrait.jsp
===================================================================
diff -u -r8d47a3cb3a070260df7888bf9ed5177290499f9d -rbbe6b21a663059e2539bc0ea5ce761445b5ae1c1
--- lams_tool_scratchie/web/pages/learning/parts/confidenceLevelPortrait.jsp	(.../confidenceLevelPortrait.jsp)	(revision 8d47a3cb3a070260df7888bf9ed5177290499f9d)
+++ lams_tool_scratchie/web/pages/learning/parts/confidenceLevelPortrait.jsp	(.../confidenceLevelPortrait.jsp)	(revision bbe6b21a663059e2539bc0ea5ce761445b5ae1c1)
@@ -47,7 +47,7 @@
 </c:choose>
 </c:set>
 
-<div class="c100 p${confidenceLevelDto.level}0 small" data-toggle="tooltip" data-placement="top" title="${confidenceLevelsAnonymous ? '' : confidenceLevelDto.userName}">
+<div class="c100 p${confidenceLevelDto.level}0 small" data-bs-toggle="tooltip" data-bs-placement="top" title="${confidenceLevelsAnonymous ? '' : confidenceLevelDto.userName}">
 	<span>
 		<c:choose>
 			<c:when test="${confidenceLevelsAnonymous}">
Index: lams_tool_scratchie/web/pages/learning/questionlist.jsp
===================================================================
diff -u -r705c0f72b765849974bfa0d9f8b04797619e8da7 -rbbe6b21a663059e2539bc0ea5ce761445b5ae1c1
--- lams_tool_scratchie/web/pages/learning/questionlist.jsp	(.../questionlist.jsp)	(revision 705c0f72b765849974bfa0d9f8b04797619e8da7)
+++ lams_tool_scratchie/web/pages/learning/questionlist.jsp	(.../questionlist.jsp)	(revision bbe6b21a663059e2539bc0ea5ce761445b5ae1c1)
@@ -1,7 +1,5 @@
 <%@ include file="/common/taglibs.jsp"%>
-<c:set var="lams">
-	<lams:LAMSURL />
-</c:set>
+<c:set var="lams"><lams:LAMSURL /></c:set>
 
 <!-- Used by TestHarness 
 	 isUserLeader=${isUserLeader}
@@ -12,15 +10,19 @@
 	
 	<%-- show general burning question --%>
 	<c:if test="${isUserLeader && scratchie.burningQuestionsEnabled || (mode == 'teacher')}">
-		<div class="form-group burning-question-container">
-			<a data-toggle="collapse" data-target="#burning-question-general" href="#bqg"
+		<div class="burning-question-container mb-3">
+			<a data-bs-toggle="collapse" data-bs-target="#burning-question-general" href="#bqg" role="button"
 					<c:if test="${empty sessionMap.generalBurningQuestion}">class="collapsed"</c:if>>
-				<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>
+				<span class="if-collapsed">
+					<i class="fa fa-xs fa-regular fa-square-plus" aria-hidden="true"></i>
+				</span>
+	  			<span class="if-not-collapsed">
+	  				<i class="fa fa-xs fa-regular fa-square-minus" aria-hidden="true"></i>
+	  			</span>
 				<fmt:message key="label.general.burning.question" />
 			</a>
 	
-			<div id="burning-question-general" class="collapse <c:if test="${not empty sessionMap.generalBurningQuestion}">in</c:if>">
+			<div id="burning-question-general" class="collapse <c:if test="${not empty sessionMap.generalBurningQuestion}">show</c:if>">
 				<textarea rows="5" name="generalBurningQuestion" class="form-control"
 					<c:if test="${mode == 'teacher'}">disabled="disabled"</c:if>
 				>${sessionMap.generalBurningQuestion}</textarea>
@@ -30,17 +32,17 @@
 </form>
 
 <c:if test="${mode != 'teacher'}">
-	<div class="voffset10 pull-right">
+	<div class="activity-bottom-buttons">
 		<c:choose>
 			<c:when test="${isUserLeader && sessionMap.reflectOn}">
 				<input type="hidden" name="method" id="method" value="newReflection">
-				<button nae="finishButton" id="finishButton" onclick="return finish(false);" class="btn btn-default">
+				<button name="finishButton" id="finishButton" onclick="return finish(false);" class="btn btn-primary">
 					<fmt:message key="label.continue" />
 				</button>
 			</c:when>
 			<c:otherwise>
 				<input type="hidden" name="method" id="method" value="showResults">
-				<button name="finishButton" id="finishButton" onclick="return finish(false);" class="btn btn-default">
+				<button name="finishButton" id="finishButton" onclick="return finish(false);" class="btn btn-primary">
 					<fmt:message key="label.submit" />
 				</button>
 			</c:otherwise>
Index: lams_tool_scratchie/web/pages/learning/results.jsp
===================================================================
diff -u -r79123cc650a4028c6dfa0e931d9a074b07234be3 -rbbe6b21a663059e2539bc0ea5ce761445b5ae1c1
--- lams_tool_scratchie/web/pages/learning/results.jsp	(.../results.jsp)	(revision 79123cc650a4028c6dfa0e931d9a074b07234be3)
+++ lams_tool_scratchie/web/pages/learning/results.jsp	(.../results.jsp)	(revision bbe6b21a663059e2539bc0ea5ce761445b5ae1c1)
@@ -14,22 +14,19 @@
 <c:set var="scratchie" value="${sessionMap.scratchie}" />
 <c:set var="isUserLeader" value="${sessionMap.isUserLeader}" />
 
-<lams:html>
-<lams:head>
-	<title><fmt:message key="label.learning.title" /></title>
-	<%@ include file="/common/header.jsp"%>
+<c:set var="title">
+	${scratchie.title} / <fmt:message key='label.score' />
+</c:set>
+<lams:PageLearner title="${title}" toolSessionID="${toolSessionID}">
 	
 	<link rel="stylesheet" type="text/css" href="<lams:LAMSURL/>css/circle.css" />
 	<link rel="stylesheet" type="text/css" href="<lams:WebAppURL/>includes/css/scratchie-learning.css" />
 	<link type="text/css" href="<lams:LAMSURL/>css/free.ui.jqgrid.min.css" rel="stylesheet">
-	<link rel="stylesheet" href="<lams:LAMSURL />/includes/font-awesome/css/font-awesome.min.css">
+	<link type="text/css" href="<lams:LAMSURL/>css/free.ui.jqgrid.custom.css" rel="stylesheet">
 	<style type="text/css">
 		#reflections-div {
 			padding-bottom: 20px;
 		}
-		.burning-question-dto {
-			padding-bottom: 5px; 
-		}
 	    
 	    /* when item is editable - show pencil icon on hover */
 	    .burning-question-text:hover +span+ i, /* when link is hovered select i */
@@ -66,15 +63,14 @@
 	</style>
 
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/free.jquery.jqgrid.min.js"></script>
-	<lams:JSImport src="learning/includes/javascript/gate-check.js" />
 	<script type="text/javascript">
 		checkNextGateActivity('finishButton', '${toolSessionID}', '', finishSession);
 		
 		function likeEntry(scratchieItemUid, rowid, burningQuestionUid) {
 			
 			var jqGrid = $("#burningQuestions" + scratchieItemUid);
 			var likeCell = jqGrid.jqGrid('getCell', rowid, 'like');
-			var isLike = likeCell.includes( 'fa-thumbs-o-up' );
+			var isLike = likeCell.includes( 'fa-regular' );
 
 			if (isLike) {
 				$.ajax({
@@ -91,7 +87,7 @@
 		  				jqGrid.jqGrid('setCell', rowid, 'count', currentCount + 1);
 		  				
 		  				//update 'like' column
-		  				jqGrid.jqGrid('setCell',rowid,'like', likeCell.replace("fa-thumbs-o-up", "fa-thumbs-up"));
+		  				jqGrid.jqGrid('setCell',rowid,'like', likeCell.replace("fa-regular", "fa-solid"));
 		  				
 					} else {
 						alert("Error");
@@ -113,7 +109,7 @@
 		  				jqGrid.jqGrid('setCell', rowid, 'count', currentCount - 1);
 		  				
 		  				//update 'like' column
-		  				jqGrid.jqGrid('setCell',rowid,'like', likeCell.replace("fa-thumbs-up", "fa-thumbs-o-up"));
+		  				jqGrid.jqGrid('setCell',rowid,'like', likeCell.replace("fa-solid", "fa-regular"));
 			       		
 		  			} else {
 						alert("Error");
@@ -136,8 +132,8 @@
 					height: 'auto',
 					autowidth: true,
 					shrinkToFit: false,
-					guiStyle: "bootstrap",
-					iconSet: 'fontAwesome',
+					guiStyle: "bootstrap4",
+					iconSet: 'fontAwesomeSolid',
 				   	colNames:[
 						'#',
 						'isUserAuthor',
@@ -208,8 +204,8 @@
 	  	                }
 
 	  	                //edit row on its selection, unless "thumbs up" button is pressed
-	  	                if (e.target.classList.contains("fa") && e.target.classList.contains("fa-2x") 
-	  		  	                && (e.target.classList.contains("fa-thumbs-o-up") || e.target.classList.contains("fa-thumbs-up"))) { 
+	  	                if (e.target.classList.contains("fa-thumbs-up") && e.target.classList.contains("fa-lg") 
+	  		  	                && (e.target.classList.contains("fa-regular") || e.target.classList.contains("fa-solid"))) { 
 	  	                	return;
 		  	            } else {
 		  	            	$self.jqGrid("editRow", rowid, { focusField: "burningQuestion" });
@@ -235,17 +231,17 @@
 				   	    burningQuestion:"${burningQuestionDto.escapedBurningQuestion}",
 				   	 	<c:choose>
 				   			<c:when test="${!isUserLeader && burningQuestionDto.userLiked}">
-				   				like:'<span class="fa fa-thumbs-up fa-2x"></span>',
+				   				like:'<span class="fa-solid fa-thumbs-up fa-lg"></span>',
 				   			</c:when>
 					   		<c:when test="${!isUserLeader}">
 				   				like:'',
 				   			</c:when>
 							<c:when test="${burningQuestionDto.userLiked}">
-								like:'<span class="fa fa-thumbs-up fa-2x" title="<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.unlike'/></spring:escapeBody>"' +
+								like:'<span class="fa-solid fa-thumbs-up fa-lg" role="button" title="<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.unlike'/></spring:escapeBody>" aria-label="<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.unlike'/></spring:escapeBody>"' +
 										'onclick="javascript:likeEntry(${scratchieItemUid}, ${i.index + 1}, ${burningQuestionDto.burningQuestion.uid});" />',
 							</c:when>
 							<c:otherwise>
-								like:'<span class="fa fa-thumbs-o-up fa-2x" title="<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.like'/></spring:escapeBody>"' +
+								like:'<span class="fa-regular fa-thumbs-up fa-lg" role="button" title="<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.like'/></spring:escapeBody>" aria-label="<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.like'/></spring:escapeBody>"' +
 										'onclick="javascript:likeEntry(${scratchieItemUid}, ${i.index + 1}, ${burningQuestionDto.burningQuestion.uid});" />',
 							</c:otherwise>
 						</c:choose>
@@ -263,8 +259,8 @@
 				height: 'auto',
 				autowidth: true,
 				shrinkToFit: false,
-				guiStyle: "bootstrap",
-				iconSet: 'fontAwesome',
+				guiStyle: "bootstrap4",
+				iconSet: 'fontAwesomeSolid',
 			   	colNames:[
 				   	'#',
 					"<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.monitoring.summary.user.name' /></spring:escapeBody>",
@@ -310,7 +306,7 @@
 
 			//handler for expand/collapse all button
 			$("#toggle-burning-questions-button").click(function() {
-				var isExpanded = eval($(this).data("expanded"));
+				var isExpanded = eval($(this).data("bs-expanded"));
 				
 				//fire the actual buttons so burning questions can be closed/expanded
 				$(".ui-jqgrid-titlebar-close").each(function() {
@@ -322,17 +318,17 @@
 
 				//change button label
 				var newButtonLabel = isExpanded ? "<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.expand.all' /></spring:escapeBody>" : "<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.collapse.all' /></spring:escapeBody>";
-				$(".hidden-xs", $(this)).text(newButtonLabel);
+				$(".d-none.d-sm-block", $(this)).text(newButtonLabel);
 
 				//change button icon
 				if (isExpanded) {
-					$(".fa", $(this)).removeClass("fa-minus-square").addClass("fa-plus-circle");
+					$(".fa", $(this)).removeClass("fa-square-minus").addClass("fa-circle-plus");
 				} else {
-					$(".fa", $(this)).removeClass("fa-plus-circle").addClass("fa-minus-square");
+					$(".fa", $(this)).removeClass("fa-circle-plus").addClass("fa-square-minus");
 				}
 
-				//change button's data-expanded attribute
-				$(this).data("expanded", !isExpanded);
+				//change button's data-bs-expanded attribute
+				$(this).data("bs-expanded", !isExpanded);
 			});
 		    
 		})
@@ -351,64 +347,58 @@
 			return false;
 		}
     </script>
-</lams:head>
 
-<body class="stripes">
-
-	<c:set var="title">
-		${scratchie.title} / <fmt:message key='label.score' />
-	</c:set>
-	<lams:Page type="learner" title="${title}">
-
+	<div class="container-lg">
 		<c:if test="${not empty sessionMap.submissionDeadline}">
-			<lams:Alert id="submissionDeadline">
+			<lams:Alert5 id="submissionDeadline">
 				<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>
 
-		<lams:errors/>
+		<lams:errors5/>
 
-		<lams:Alert id="score" type="info" close="false">
+		<lams:Alert5 id="score" type="info" close="false">
 			<fmt:message key="label.you.ve.got">
 				<fmt:param>${score}</fmt:param>
 				<fmt:param>${scorePercentage}</fmt:param>
 			</fmt:message>
-		</lams:Alert>
+		</lams:Alert5>
 
 		<c:if test="${showResults}">
 			<%@ include file="scratchies.jsp"%>
 		</c:if>
 		
 		<!-- Display burningQuestionItemDtos -->
 		<c:if test="${sessionMap.isBurningQuestionsEnabled and not empty burningQuestionItemDtos}">
+            <div class="d-flex justify-content-end" id="burning-questions-buttons">
+	            <a class="btn btn-sm btn-secondary me-2 d-flex align-items-center" href="#" onclick="return refreshToBurningQuestions()" role="button">
+	            	<i class="fa-solid fa-refresh me-1"></i> 
+	            	<span class="d-none d-sm-block">
+	            		<fmt:message key="label.refresh" />
+	            	</span>
+	            </a>
+	
+	            <a id="toggle-burning-questions-button" class="btn btn-sm btn-secondary me-2 d-flex align-items-center" data-bs-expanded="true" href="#nogo" role="button">
+	            	<i class="fa-solid fa-minus-square me-1"></i> 
+	            	<span class="d-none d-sm-block">
+	            		<fmt:message key="label.collapse.all" />
+	            	</span>
+	            </a>
+            </div>
             
-            <a class="btn btn-sm btn-default pull-right roffset10" href="#" onclick="return refreshToBurningQuestions()">
-            	<i class="fa fa-refresh"></i> 
-            	<span class="hidden-xs">
-            		<fmt:message key="label.refresh" />
-            	</span>
-            </a>
-
-            <a id="toggle-burning-questions-button" class="btn btn-sm btn-default pull-right roffset10" data-expanded="true" href="#nogo">
-            	<i class="fa fa-minus-square"></i> 
-            	<span class="hidden-xs">
-            		<fmt:message key="label.collapse.all" />
-            	</span>
-            </a>
-            
-			<div id="burning-questions-container" class="voffset5">
-				<div class="lead">
+			<div id="burning-questions-container">
+				<div class="lead mb-2">
 					<fmt:message key="label.burning.questions" />
 				</div>
 
 				<c:forEach var="burningQuestionItemDto" items="${burningQuestionItemDtos}" varStatus="i">
 					<c:if test="${not empty burningQuestionItemDto.burningQuestionDtos}">
 						<c:set var="scratchieItemUid" value="${empty burningQuestionItemDto.scratchieItem.uid ? 0 : burningQuestionItemDto.scratchieItem.uid}"/>
-						<div class="burning-question-dto">
+						<div class="burning-question-dto mb-2">
 							<table id="burningQuestions${scratchieItemUid}" class="scroll" cellpadding="0" cellspacing="0"></table>
 						</div>
 					</c:if>
@@ -418,30 +408,32 @@
 
 		<!-- Display reflections -->
 		<c:if test="${sessionMap.reflectOn}">
-			<div class="voffset20">
-				<div class="panel panel-default">
-					<div class="panel-heading-sm  bg-success">
-						<fmt:message key="monitor.summary.td.notebookInstructions" />
+			<div class="card shadow-sm mt-5">
+				<div class="card-header">
+					<fmt:message key="monitor.summary.td.notebookInstructions" />
+				</div>
+				
+				<div class="card-body">
+					<div class="m-2" aria-label="<fmt:message key='monitor.summary.td.notebookInstructions'/>">
+						<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
 					</div>
-					<div class="panel-body-sm">
-						<div class="panel">
-							<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
-						</div>
-						<c:choose>
-							<c:when test="${empty sessionMap.reflectEntry}">
-								<p>
-									<fmt:message key="message.no.reflection.available" />
-								</p>
-							</c:when>
-							<c:otherwise>
-								<div class="panel-body-sm bg-warning">
+					<hr/>
+
+					<div class="m-2">
+						<p>
+							<c:choose>
+								<c:when test="${empty sessionMap.reflectEntry}">
+									<em><fmt:message key="message.no.reflection.available" /></em>
+								</c:when>
+								<c:otherwise>
 									<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
-								</div>
-							</c:otherwise>
-						</c:choose>
+								</c:otherwise>
+							</c:choose>
+						</p>
+						
 						<c:if test="${(mode != 'teacher') && isUserLeader}">
-							<div class="voffset5">
-								<button name="finishButton" onclick="return continueReflect()" class="btn btn-sm btn-default">
+							<div class="mt-2">
+								<button name="editNotebookButton" id="edit-notebook-button" onclick="return continueReflect()" class="btn btn-sm btn-secondary btn-disable-on-submit">
 									<fmt:message key="label.edit" />
 								</button>
 							</div>
@@ -459,9 +451,8 @@
 
 		<!-- Display finish buttons -->
 		<c:if test="${mode != 'teacher'}">
-			<div class="voffset10 pull-right">
-				<a href="#nogo" name="finishButton" id="finishButton"
-					class="btn btn-primary na">
+			<div class="activity-bottom-buttons">
+				<a href="#nogo" name="finishButton" id="finishButton" class="btn btn-primary btn-disable-on-submit na">
 					<c:choose>
 						<c:when test="${sessionMap.isLastActivity}">
 							<fmt:message key="label.submit" />
@@ -473,8 +464,6 @@
 				</a>
 			</div>
 		</c:if>
-
-		<div id="footer"></div>
-	</lams:Page>
-</body>
-</lams:html>
+		
+	</div>
+</lams:PageLearner>
\ No newline at end of file
Index: lams_tool_scratchie/web/pages/learning/scratchies.jsp
===================================================================
diff -u -re22b8f5915240affea6809ba241203cae45cb6d4 -rbbe6b21a663059e2539bc0ea5ce761445b5ae1c1
--- lams_tool_scratchie/web/pages/learning/scratchies.jsp	(.../scratchies.jsp)	(revision e22b8f5915240affea6809ba241203cae45cb6d4)
+++ lams_tool_scratchie/web/pages/learning/scratchies.jsp	(.../scratchies.jsp)	(revision bbe6b21a663059e2539bc0ea5ce761445b5ae1c1)
@@ -3,219 +3,222 @@
 <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>
 
 <c:forEach var="item" items="${sessionMap.itemList}" varStatus="questionNumber">
-	
-	<div class="lead" id="questionTitle${questionNumber.count}">
-        ${questionNumber.count})&nbsp;
-        <c:if test="${not sessionMap.hideTitles}">
-        	<c:out value="${item.qbQuestion.name}" escapeXml="true" />
-       </c:if>
-	</div>
-	
-	<div class="panel-body-sm">
-		<c:out value="${item.qbQuestion.description}" escapeXml="false" />
-	</div>
-	
-	<c:if test="${(sessionMap.userFinished && (mode == 'teacher')) || showResults}">
-		<div class="panel-footer item-score">
-			<fmt:message key="label.score" />&nbsp;${item.mark}
+	<div class="card lcard lcard-no-borders shadow my-4" id="question${questionNumber.count}" aria-label="question">
+		
+		<div class="card-header lcard-header lcard-header-button-border lead" id="questionTitle${questionNumber.count}">
+	        ${questionNumber.count})&nbsp;
+	        <c:if test="${not sessionMap.hideTitles}">
+	        	<c:out value="${item.qbQuestion.name}" escapeXml="true" />
+	       </c:if>
 		</div>
-	</c:if>
-
-	<c:choose>
-	<c:when test="${item.qbQuestion.type == 1 or item.qbQuestion.type == 8}">
-		<table class="table table-hover scratches">
-			<c:forEach var="optionDto" items="${item.optionDtos}" varStatus="status">
-				<tr id="tr${optionDto.qbOptionUid}">
-					<td style="width: 40px;vertical-align: top;">
-						<c:choose>
-							<c:when test="${optionDto.scratched && optionDto.correct}">
-								<img src="<lams:WebAppURL/>includes/images/scratchie-correct.png" class="scartchie-image"
-									 id="image-${item.uid}-${optionDto.qbOptionUid}">
-							</c:when>
-							<c:when test="${optionDto.scratched && !optionDto.correct}">
-								<img src="<lams:WebAppURL/>includes/images/scratchie-wrong.png" class="scartchie-image"
-									 id="image-${item.uid}-${optionDto.qbOptionUid}">
-							</c:when>
-							<c:when test="${sessionMap.userFinished || item.unraveled || !isUserLeader || (mode == 'teacher') || showResults}">
-								<img src="<lams:WebAppURL/>includes/images/answer-${status.index + 1}.png" class="scartchie-image"
-									 id="image-${item.uid}-${optionDto.qbOptionUid}">
-							</c:when>
-							<c:otherwise>
-								<a href="#nogo" data-item-uid="${item.uid}" data-option-uid="${optionDto.qbOptionUid}"
-								    <c:choose>
-								    	<c:when test="${scratchie.revealOnDoubleClick}">
-								    		onDblClick=
-								    	</c:when>
-								    	<c:otherwise>
-								    		onClick=
-								    	</c:otherwise>
-								    </c:choose>
-								    <%-- call this function either on click or double click --%>
-								    "scratchMcq(${item.uid}, ${optionDto.qbOptionUid}); return false;"
-								    
-									id="imageLink-${item.uid}-${optionDto.qbOptionUid}" class="scratchie-link">
-									<img src="<lams:WebAppURL/>includes/images/answer-${status.index + 1}.png"
-										class="scartchie-image"	id="image-${item.uid}-${optionDto.qbOptionUid}" />
-								</a>
-							</c:otherwise>
-						</c:choose> 
-						
-						<c:if test="${(showResults || mode == 'teacher') && (optionDto.attemptOrder != -1)}">
-							<div style="text-align: center; margin-top: 2px;">
-								<fmt:message key="label.choice.number">
-									<fmt:param>${optionDto.attemptOrder}</fmt:param>
-								</fmt:message>
-							</div>
-						</c:if>
-					</td>
+		
+		<div class="card-body">
+			<div class="question-description">
+				<c:out value="${item.qbQuestion.description}" escapeXml="false" />
+			</div>
+		
+			<c:if test="${(sessionMap.userFinished && (mode == 'teacher')) || showResults}">
+				<div class="panel-footer item-score">
+					<fmt:message key="label.score" />&nbsp;${item.mark}
+				</div>
+			</c:if>
 	
-					<td
-						<c:if test="${fn:length(optionDto.confidenceLevelDtos) > 0}">class="answer-with-confidence-level-portrait"</c:if>
-					>
-						<div class="answer-description">
-							<c:out value="${optionDto.answer}" escapeXml="false" />
-						</div>
-						
-						<c:if test="${fn:length(optionDto.confidenceLevelDtos) > 0}">
-							<hr class="hr-confidence-level" />
-						
-							<div>
-								<c:set var="confidenceLevelsAnonymous" value="${mode != 'teacher' && scratchie.confidenceLevelsAnonymous}" />
-								<c:forEach var="confidenceLevelDto" items="${optionDto.confidenceLevelDtos}" varStatus="status">
-									<%@ include file="parts/confidenceLevelPortrait.jsp"%>
-								</c:forEach>
+			<c:choose>
+			<c:when test="${item.qbQuestion.type == 1 or item.qbQuestion.type == 8}">
+				<div class="table div-hover scratches">
+					<c:forEach var="optionDto" items="${item.optionDtos}" varStatus="status">
+						<div id="tr${optionDto.qbOptionUid}" class="row mx-2">
+							<div class="scartchie-image-col" id="image-col-${item.uid}-${optionDto.qbOptionUid}" aria-live="polite">
+								<c:choose>
+									<c:when test="${optionDto.scratched && optionDto.correct}">
+										<img src="<lams:WebAppURL/>includes/images/scratchie-correct.png" class="scartchie-image" alt="<fmt:message key='label.correct'/>"
+											 id="image-${item.uid}-${optionDto.qbOptionUid}">
+									</c:when>
+									<c:when test="${optionDto.scratched && !optionDto.correct}">
+										<img src="<lams:WebAppURL/>includes/images/scratchie-wrong.png" class="scartchie-image" alt="<fmt:message key='label.incorrect'/>"
+											 id="image-${item.uid}-${optionDto.qbOptionUid}">
+									</c:when>
+									<c:when test="${sessionMap.userFinished || item.unraveled || !isUserLeader || (mode == 'teacher') || showResults}">
+										<img src="<lams:WebAppURL/>includes/images/answer-${status.index + 1}.png" class="scartchie-image" alt="<fmt:message key='label.monitoring.summary.answer'/> ${status.index + 1}"
+											 id="image-${item.uid}-${optionDto.qbOptionUid}">
+									</c:when>
+									<c:otherwise>
+										<a href="#" data-item-uid="${item.uid}" data-option-uid="${optionDto.qbOptionUid}" aria-labelledby="answer-description-${optionDto.qbOptionUid}" aria-controls="image-col-${item.uid}-${optionDto.qbOptionUid}"
+										    <c:choose>
+										    	<c:when test="${scratchie.revealOnDoubleClick}">
+										    		onDblClick=
+										    	</c:when>
+										    	<c:otherwise>
+										    		onClick=
+										    	</c:otherwise>
+										    </c:choose>
+										    <%-- call this function either on click or double click --%>
+										    "scratchMcq(${item.uid}, ${optionDto.qbOptionUid}); return false;"
+										    
+											id="imageLink-${item.uid}-${optionDto.qbOptionUid}" class="scratchie-link">
+											<img src="<lams:WebAppURL/>includes/images/answer-${status.index + 1}.png" alt="<fmt:message key='label.monitoring.summary.answer'/> ${status.index + 1}"
+												class="scartchie-image"	id="image-${item.uid}-${optionDto.qbOptionUid}" />
+										</a>
+									</c:otherwise>
+								</c:choose> 
+								
+								<c:if test="${(showResults || mode == 'teacher') && (optionDto.attemptOrder != -1)}">
+									<div style="text-align: center; margin-top: 2px;">
+										<fmt:message key="label.choice.number">
+											<fmt:param>${optionDto.attemptOrder}</fmt:param>
+										</fmt:message>
+									</div>
+								</c:if>
 							</div>
-						</c:if>
-					</td>
-				</tr>
-			</c:forEach>
-		</table>
-	</c:when>
-	
-	<c:otherwise>
-		<table id="scratches-${item.uid}"  class="table table-hover scratches">
-			<c:forEach var="optionDto" items="${item.optionDtos}" varStatus="status">
-				<tr id="tr-${item.uid}-${optionDto.answerHash}">
-				
-					<td style="width: 40px; border: none;">
-						<c:choose>
-							<c:when test="${optionDto.scratched && optionDto.correct}">
-								<img src="<lams:WebAppURL/>includes/images/scratchie-correct.png" class="scartchie-image"
-									 id="image-${item.uid}-${optionDto.answerHash}">
-							</c:when>
-							<c:when test="${optionDto.scratched && !optionDto.correct}">
-								<img src="<lams:WebAppURL/>includes/images/scratchie-wrong.png" class="scartchie-image"
-									 id="image-${item.uid}-${optionDto.answerHash}">
-							</c:when>
-							<c:otherwise>
-								<img src="<lams:WebAppURL/>includes/images/answer-${status.index + 1}.png" class="scartchie-image"
-									id="image-${item.uid}-${optionDto.answerHash}" 
-									<c:if test="${!sessionMap.userFinished && !item.unraveled && (mode != 'teacher') && !showResults}">style="visibility: hidden;"</c:if>
-									/>
-							</c:otherwise>
-						</c:choose>
-						
-						<c:if test="${(showResults || mode == 'teacher') && (optionDto.attemptOrder != -1)}">
-							<div style="text-align: center; margin-top: 2px;">
-								<fmt:message key="label.choice.number">
-									<fmt:param>${optionDto.attemptOrder}</fmt:param>
-								</fmt:message>
+			
+							<div class="col <c:if test="${fn:length(optionDto.confidenceLevelDtos) > 0}">answer-with-confidence-level-portrait</c:if>">
+								<div id="answer-description-${optionDto.qbOptionUid}">
+									<c:out value="${optionDto.answer}" escapeXml="false" />
+								</div>
+								
+								<c:if test="${fn:length(optionDto.confidenceLevelDtos) > 0}">
+									<hr class="hr-confidence-level" />
+								
+									<div>
+										<c:set var="confidenceLevelsAnonymous" value="${mode != 'teacher' && scratchie.confidenceLevelsAnonymous}" />
+										<c:forEach var="confidenceLevelDto" items="${optionDto.confidenceLevelDtos}" varStatus="status">
+											<%@ include file="parts/confidenceLevelPortrait.jsp"%>
+										</c:forEach>
+									</div>
+								</c:if>
 							</div>
-						</c:if>
-					</td>
-	
-					<td class="answer-with-confidence-level-portrait" style="vertical-align: top;">
-						<div class="answer-description">
-							<c:out value="${optionDto.answer}" escapeXml="true" />
 						</div>
+					</c:forEach>
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<div id="scratches-${item.uid}" class="scratches table">
+					<c:forEach var="optionDto" items="${item.optionDtos}" varStatus="status">
+						<div id="tr-${item.uid}-${optionDto.answerHash}" class="row mx-2">
 						
-						<c:if test="${fn:length(optionDto.confidenceLevelDtos) > 0}">
-							<hr class="hr-confidence-level" />
-							
-							<div>
-								<c:forEach var="confidenceLevelDto" items="${optionDto.confidenceLevelDtos}" varStatus="status">
-									<%@ include file="parts/confidenceLevelPortrait.jsp"%>
-								</c:forEach>
+							<div class="scartchie-image-col">
+								<c:choose>
+									<c:when test="${optionDto.scratched && optionDto.correct}">
+										<img src="<lams:WebAppURL/>includes/images/scratchie-correct.png" class="scartchie-image" alt="<fmt:message key='label.correct'/>"
+											 id="image-${item.uid}-${optionDto.answerHash}">
+									</c:when>
+									<c:when test="${optionDto.scratched && !optionDto.correct}">
+										<img src="<lams:WebAppURL/>includes/images/scratchie-wrong.png" class="scartchie-image" alt="<fmt:message key='label.incorrect'/>"
+											 id="image-${item.uid}-${optionDto.answerHash}">
+									</c:when>
+									<c:otherwise>
+										<img src="<lams:WebAppURL/>includes/images/answer-${status.index + 1}.png" class="scartchie-image" alt="<fmt:message key='label.monitoring.summary.answer'/> ${status.index + 1}"
+											id="image-${item.uid}-${optionDto.answerHash}" 
+											<c:if test="${!sessionMap.userFinished && !item.unraveled && (mode != 'teacher') && !showResults}">style="visibility: hidden;"</c:if>
+											/>
+									</c:otherwise>
+								</c:choose>
+								
+								<c:if test="${(showResults || mode == 'teacher') && (optionDto.attemptOrder != -1)}">
+									<div style="text-align: center; margin-top: 2px;">
+										<fmt:message key="label.choice.number">
+											<fmt:param>${optionDto.attemptOrder}</fmt:param>
+										</fmt:message>
+									</div>
+								</c:if>
 							</div>
-						</c:if>
-					</td>
-				</tr>
-			</c:forEach>
-		</table>
-		
-		<c:if test="${!sessionMap.userFinished && !item.unraveled && isUserLeader && (mode != 'teacher') && !showResults}">
-			<div id="type-your-answer-${item.uid}" style="padding: 0 0 15px 100px; margin-top:-20px;">
-				<div>
-					<fmt:message key="label.type.your.group.answer" />
+			
+							<div class="col answer-with-confidence-level-portrait" style="vertical-align: top;">
+								<div>
+									<c:out value="${optionDto.answer}" escapeXml="true" />
+								</div>
+								
+								<c:if test="${fn:length(optionDto.confidenceLevelDtos) > 0}">
+									<hr class="hr-confidence-level" />
+									
+									<div>
+										<c:forEach var="confidenceLevelDto" items="${optionDto.confidenceLevelDtos}" varStatus="status">
+											<%@ include file="parts/confidenceLevelPortrait.jsp"%>
+										</c:forEach>
+									</div>
+								</c:if>
+							</div>
+						</div>
+					</c:forEach>
 				</div>
-							
-				<div>
-					<input type="text" id="input-${item.uid}" size="70" class="form-control input-sm voffset5 submit-user-answer-input
-						<c:if test="${item.qbQuestion.autocompleteEnabled}">ui-autocomplete-input</c:if>"
-						style="display: inline-block; width: 70%;" data-item-uid="${item.uid}"/>
-							
-					<button class="btn btn-default btn-sm submit-user-answer" data-item-uid="${item.uid}" >
-						<fmt:message key="label.button.submit" />
-					</button>
-				</div>		
-			</div>
-		</c:if>
-	</c:otherwise>
-	</c:choose>
-	
-		
-	<%--Display Etherpad for each question --%>
-	<c:if test="${isQuestionEtherpadEnabled}">
-		<div class="form-group question-etherpad-container">
-			<a data-toggle="collapse" data-target="#question-etherpad-${item.uid}" href="#qe${item.uid}" 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>
-				<fmt:message key="label.etherpad.discussion" />
-			</a>
+				
+				<c:if test="${!sessionMap.userFinished && !item.unraveled && isUserLeader && (mode != 'teacher') && !showResults}">
+					<div id="type-your-answer-${item.uid}" style="padding: 0 0 15px 100px; margin-top:-10px;">
+						<div id="type-your-answer-descr-${item.uid}">
+							<fmt:message key="label.type.your.group.answer" />
+						</div>
+									
+						<div>
+							<input type="text" id="input-${item.uid}" size="70" class="form-control input-sm submit-user-answer-input
+								<c:if test="${item.qbQuestion.autocompleteEnabled}">ui-autocomplete-input</c:if>"
+								style="display: inline-block; width: 70%;" data-item-uid="${item.uid}" aria-labelledby="type-your-answer-descr-${item.uid}"/>
+									
+							<button class="btn btn-secondary btn-sm submit-user-answer" data-item-uid="${item.uid}" >
+								<fmt:message key="label.button.submit" />
+							</button>
+						</div>		
+					</div>
+				</c:if>
+			</c:otherwise>
+			</c:choose>
+				
+			<%--Display Etherpad for each question --%>
+			<c:if test="${isQuestionEtherpadEnabled}">
+				<div class="question-etherpad-container mb-3">
+					<a data-bs-toggle="collapse" data-bs-target="#question-etherpad-${item.uid}" href="#qe${item.uid}" class="collapsed" role="button">
+						<span class="if-collapsed"><i class="fa fa-xs fa-regular fa-square-plus" aria-hidden="true"></i></span>
+		  				<span class="if-not-collapsed"><i class="fa fa-xs fa-regular fa-square-minus" aria-hidden="true"></i></span>
+						<fmt:message key="label.etherpad.discussion" />
+					</a>
+					
+					<div id="question-etherpad-${item.uid}" class="question-etherpad-collapse collapse">
+						<div class="card question-etherpad">
+							<lams:Etherpad groupId="etherpad-scratchie-${toolSessionID}-question-${item.uid}" 
+							   showControls="${mode eq 'teacher'}" showChat="false" heightAutoGrow="true" showOnDemand="true"
+							>${questionEtherpadContent}</lams:Etherpad>
+						</div>
+					</div>
+				</div>
+			</c:if>
 			
-			<div id="question-etherpad-${item.uid}" class="question-etherpad-collapse collapse">
-				<div class="panel panel-default question-etherpad">
-					<lams:Etherpad groupId="etherpad-scratchie-${toolSessionID}-question-${item.uid}" 
-					   showControls="${mode eq 'teacher'}" showChat="false" heightAutoGrow="true" showOnDemand="true"
-					>${questionEtherpadContent}</lams:Etherpad>
+			<%-- show burning questions --%>
+			<c:if test="${!showResults && scratchie.burningQuestionsEnabled && (isUserLeader || (mode == 'teacher'))}">
+				<div class="burning-question-container mb-3">
+					<!-- LDEV-4532: href is needed for the collapsing to work on an ipad but do not make it the same as the data-target here or the screen will jump around. -->
+					<a data-bs-toggle="collapse" data-bs-target="#burning-question-item${item.uid}" href="#bqi${item.uid}" role="button"
+							<c:if test="${empty item.burningQuestion}">class="collapsed"</c:if>>
+						<span class="if-collapsed"><i class="fa fa-xs fa-regular fa-square-plus" aria-hidden="true"></i></span>
+		  				<span class="if-not-collapsed"><i class="fa fa-xs fa-regular fa-square-minus" aria-hidden="true"></i></span>
+						<fmt:message key="label.burning.question" />
+					</a>
+					
+					<div id="burning-question-item${item.uid}" class="collapse <c:if test="${not empty item.burningQuestion}">show</c:if>">
+						<textarea rows="5" name="burningQuestion${item.uid}" class="form-control"
+							<c:if test="${mode == 'teacher'}">disabled="disabled"</c:if>
+						>${item.burningQuestion}</textarea>
+					</div>
 				</div>
-			</div>
-		</div>
-	</c:if>
-	
-	<%-- show burning questions --%>
-	<c:if test="${!showResults && scratchie.burningQuestionsEnabled && (isUserLeader || (mode == 'teacher'))}">
-		<div class="form-group burning-question-container">
-			<!-- LDEV-4532: href is needed for the collapsing to work on an ipad but do not make it the same as the data-target here or the screen will jump around. -->
-			<a data-toggle="collapse" data-target="#burning-question-item${item.uid}" href="#bqi${item.uid}"
-					<c:if test="${empty item.burningQuestion}">class="collapsed"</c:if>>
-				<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>
-				<fmt:message key="label.burning.question" />
-			</a>
+			</c:if>
 			
-			<div id="burning-question-item${item.uid}" class="collapse <c:if test="${not empty item.burningQuestion}">in</c:if>">
-				<textarea rows="5" name="burningQuestion${item.uid}" class="form-control"
-					<c:if test="${mode == 'teacher'}">disabled="disabled"</c:if>
-				>${item.burningQuestion}</textarea>
-			</div>
+			<%-- show link to burning questions (only for results page) --%>
+			<c:if test="${showResults && mode != 'teacher' && scratchie.burningQuestionsEnabled}">
+				<div class="scroll-down-to-bq">
+					<a href='#gbox_burningQuestions${item.uid}' data-item-uid="${item.uid}" class='float-end' title="<fmt:message key="label.scroll.down.to.burning.question"/>">
+						<i class="fa fa-xs fa-solid fa-angles-down me-1"></i>
+					</a>
+				</div>
+			</c:if>
 		</div>
-	</c:if>
-	
-	<%-- show link to burning questions (only for results page) --%>
-	<c:if test="${showResults && mode != 'teacher' && scratchie.burningQuestionsEnabled}">
-		<div class="scroll-down-to-bq">
-			<a href='#gbox_burningQuestions${item.uid}' data-item-uid="${item.uid}" class='pull-right' title="<fmt:message key="label.scroll.down.to.burning.question"/>">
-				<i class="fa fa-xs fa-angle-double-down roffset5"></i>
-			</a>
-		</div>
-	</c:if>
-
+	</div>
 </c:forEach>
Index: lams_tool_scratchie/web/pages/learning/submissionDeadline.jsp
===================================================================
diff -u -rc1d637e4d2786f97672dd38f6e3278d5c4f7b79c -rbbe6b21a663059e2539bc0ea5ce761445b5ae1c1
--- lams_tool_scratchie/web/pages/learning/submissionDeadline.jsp	(.../submissionDeadline.jsp)	(revision c1d637e4d2786f97672dd38f6e3278d5c4f7b79c)
+++ lams_tool_scratchie/web/pages/learning/submissionDeadline.jsp	(.../submissionDeadline.jsp)	(revision bbe6b21a663059e2539bc0ea5ce761445b5ae1c1)
@@ -2,13 +2,8 @@
 <%@include file="/common/taglibs.jsp"%>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 
-<lams:html>
-<lams:head>
-	<%@ include file="/common/header.jsp"%>
-
-	<title><fmt:message key="label.learning.title" /></title>
+<lams:PageLearner title="${sessionMap.title}" toolSessionID="${sessionMap.toolSessionID}" >
 	<script type="text/javascript">
-	
 		function finishSession(){
 			document.getElementById("finishButton").disabled = true;
 			document.location.href ='<c:url value="/learning/finish.do?sessionMapID=${sessionMapID}"/>';
@@ -17,67 +12,68 @@
 		function continueReflect(){
 			document.location.href='<c:url value="/learning/newReflection.do?sessionMapID=${sessionMapID}"/>';
 		}
-		
     </script>
-</lams:head>
 
-<body class="stripes">
-	<lams:Page type="learner" title="${sessionMap.title}">
-
-		<lams:Alert id="deadline" type="danger" close="false">
+	<div class="container-lg">
+		<lams:Alert5 id="deadline" type="danger" close="false">
 			<fmt:message key="label.sorry.the.deadline.has.passed" />
-		</lams:Alert>
+		</lams:Alert5>
 
+		<!-- Display reflections -->
 		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn and empty sessionMap.submissionDeadline}">
-			<div class="voffset10">
-				<h2>
-					${sessionMap.reflectInstructions}
-				</h2>
+			<div class="card shadow-sm mt-5">
+				<div class="card-header">
+					<fmt:message key="monitor.summary.td.notebookInstructions" />
+				</div>
+				
+				<div class="card-body">
+					<div class="m-2" aria-label="<fmt:message key='monitor.summary.td.notebookInstructions'/>">
+						<lams:out escapeHtml="true" value="${sessionMap.reflectInstructions}" />
+					</div>
+					<hr/>
 
-				<c:choose>
-					<c:when test="${empty sessionMap.reflectEntry}">
+					<div class="m-2">
 						<p>
-							<em> <fmt:message key="message.no.reflection.available" />
-							</em>
+							<c:choose>
+								<c:when test="${empty sessionMap.reflectEntry}">
+									<em> <fmt:message key="message.no.reflection.available" /></em>
+								</c:when>
+								<c:otherwise>
+									<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
+								</c:otherwise>
+							</c:choose>
 						</p>
-					</c:when>
-					<c:otherwise>
-						<p>
-							<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
-						</p>
-					</c:otherwise>
-				</c:choose>
-
-				<button name="FinishButton"
-					onclick="return continueReflect()" class="button">
-					<fmt:message key="label.edit" />
-				</button>
+						
+						<div>
+							<button name="FinishButton" onclick="return continueReflect()" class="btn btn-sm btn-secondary">
+								<fmt:message key="label.edit" />
+							</button>
+						</div>
+					</div>
+				</div>
 			</div>
 		</c:if>
 
-		<div class="voffset10 pull-right">
+		<div class="activity-bottom-buttons">
 			<c:choose>
 				<c:when test="${sessionMap.reflectOn && (not sessionMap.userFinished) && empty sessionMap.submissionDeadline}">
-					<button name="FinishButton" onclick="return continueReflect()" class="button">
+					<button name="FinishButton" onclick="return continueReflect()" class="btn btn-primary">
 						<fmt:message key="label.continue" />
 					</button>
 				</c:when>
 				<c:otherwise>
-					<a href="#nogo" name="FinishButton" id="finishButton"	onclick="return finishSession()" 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>
+					<a href="#nogo" name="FinishButton" id="finishButton" onclick="return finishSession()" 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>
 					</a>
 				</c:otherwise>
 			</c:choose>
 		</div>
-		
-		<div id="footer"></div>
-	</lams:Page>
-</body>
-</lams:html>
+	</div>
+</lams:PageLearner>
Index: lams_tool_scratchie/web/pages/learning/waitForLeaderTimeLimit.jsp
===================================================================
diff -u -r7d11dff5efc5ae24542a53dd8f753bfab66be71d -rbbe6b21a663059e2539bc0ea5ce761445b5ae1c1
--- lams_tool_scratchie/web/pages/learning/waitForLeaderTimeLimit.jsp	(.../waitForLeaderTimeLimit.jsp)	(revision 7d11dff5efc5ae24542a53dd8f753bfab66be71d)
+++ lams_tool_scratchie/web/pages/learning/waitForLeaderTimeLimit.jsp	(.../waitForLeaderTimeLimit.jsp)	(revision bbe6b21a663059e2539bc0ea5ce761445b5ae1c1)
@@ -1,12 +1,8 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
+<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:PageLearner title="${sessionMap.title}" toolSessionID="${sessionMap.toolSessionID}">
 	<script type="text/javascript">
 		function refresh() {
 			location.reload();
@@ -15,24 +11,17 @@
 		//refresh page every 30 sec
 		setTimeout("refresh();", 30000);
 	</script>
-</lams:head>
-<body class="stripes">
 
-	<lams:Page type="learner" title="${scratchie.title}">
-
-		<lams:Alert id="waitingForLeader" type="info" close="false">
+	<div class="container-lg">
+		<lams:Alert5 id="waitingForLeader" type="info" close="false">
 			<fmt:message key="${waitingMessageKey}" />
-		</lams:Alert>
+		</lams:Alert5>
 
-		<div class="voffset10">
-			<button name="refreshButton" onclick="refresh();" class="btn btn-sm btn-default pull-right">
+		<div class="activity-bottom-buttons">
+			<button id="refreshButton" name="refreshButton" onclick="refresh();" class="btn btn-primary">
 				<fmt:message key="label.refresh" />
 			</button>
 		</div>
+	</div>
+</lams:PageLearner>
 
-
-		<div id="footer"></div>
-	</lams:Page>
-</body>
-</lams:html>
-