Index: lams_admin/web/config/editconfig.jsp
===================================================================
diff -u -r509e81cd8bc4486fab7de352c4e8cfafd38efe48 -r6773df2f14e862722e0c63f969649af559ec0439
--- lams_admin/web/config/editconfig.jsp	(.../editconfig.jsp)	(revision 509e81cd8bc4486fab7de352c4e8cfafd38efe48)
+++ lams_admin/web/config/editconfig.jsp	(.../editconfig.jsp)	(revision 6773df2f14e862722e0c63f969649af559ec0439)
@@ -67,6 +67,16 @@
 												</c:forEach>
 											</select>
 										</c:when>
+										<c:when test="${row.key == 'ServerTimezone'}">
+											<select name="value" class="form-control" id="${row.key}">
+												<option value="">---</option>
+												<c:forEach items="${timezones}" var="timezone">
+													<option value="${timezone}" ${timezone == row.value ? 'selected="selected"' : '' }>
+														<c:out value="${timezone}" />
+													</option>
+												</c:forEach>
+											</select>
+										</c:when>
 										<c:when test="${row.format==BOOLEAN}">
 											<select id="${row.key}" name="value" class="form-control">
 												<option value="true" ${row.value ? 'selected="selected"' : '' }>true</option>
@@ -105,4 +115,4 @@
 		
 	</lams:Page5>
 </body>
-</lams:html>
+</lams:html>
\ No newline at end of file
Index: lams_admin/web/integration/ltiConsumer.jsp
===================================================================
diff -u -r509e81cd8bc4486fab7de352c4e8cfafd38efe48 -r6773df2f14e862722e0c63f969649af559ec0439
--- lams_admin/web/integration/ltiConsumer.jsp	(.../ltiConsumer.jsp)	(revision 509e81cd8bc4486fab7de352c4e8cfafd38efe48)
+++ lams_admin/web/integration/ltiConsumer.jsp	(.../ltiConsumer.jsp)	(revision 6773df2f14e862722e0c63f969649af559ec0439)
@@ -128,10 +128,8 @@
 						<div class="mb-3">
 							<label for="defaultTimeZone" class="form-label"><fmt:message key="admin.user.time.zone" /></label>
 							<form:select path="defaultTimeZone" cssClass="form-select">
-								<c:forEach items="${timezoneDtos}" var="timezoneDto">
-									<form:option value="${timezoneDto.timeZoneId}">
-										${timezoneDto.timeZoneId} - ${timezoneDto.displayName}
-									</form:option>
+								<c:forEach items="${timezones}" var="timezone">
+									<form:option value="${timezone}"><c:out value="${timezone}" /></form:option>
 								</c:forEach>
 							</form:select>
 							<lams:errors path="defaultTimeZone"/>
Index: lams_admin/web/user.jsp
===================================================================
diff -u -r509e81cd8bc4486fab7de352c4e8cfafd38efe48 -r6773df2f14e862722e0c63f969649af559ec0439
--- lams_admin/web/user.jsp	(.../user.jsp)	(revision 509e81cd8bc4486fab7de352c4e8cfafd38efe48)
+++ lams_admin/web/user.jsp	(.../user.jsp)	(revision 6773df2f14e862722e0c63f969649af559ec0439)
@@ -463,10 +463,8 @@
 								key="admin.user.time.zone" />:
 						</label>
 						<form:select path="timeZone" cssClass="form-select">
-							<c:forEach items="${timezoneDtos}" var="timezoneDto">
-								<form:option value="${timezoneDto.timeZoneId}">
-									${timezoneDto.timeZoneId} - ${timezoneDto.displayName}
-								</form:option>
+							<c:forEach items="${timezones}" var="timezone">
+								<form:option value="${timezone}"><c:out value="${timezone}" /></form:option>
 							</c:forEach>
 						</form:select>
 					</div>
Index: lams_monitoring/web/css/components-monitoring.css
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -r6773df2f14e862722e0c63f969649af559ec0439
--- lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 6773df2f14e862722e0c63f969649af559ec0439)
@@ -238,7 +238,6 @@
 	width: 100%;
 	display: flex;
 	overflow: auto;
-	justify-content: center;
 	align-items: center;
 	-webkit-touch-callout: none;
 	-webkit-user-select: none;
@@ -296,6 +295,7 @@
 .monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas svg.svg-learning-design {
 	display: block;
 	overflow: visible;
+	margin: auto;
 }
 
 .monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas svg.svg-learning-design g.gate svg {
Index: lams_tool_doku/conf/language/lams/ApplicationResources.properties
===================================================================
diff -u -ra0e86d739df8fd8659a5676dddafcd6c87723baf -r6773df2f14e862722e0c63f969649af559ec0439
--- lams_tool_doku/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision a0e86d739df8fd8659a5676dddafcd6c87723baf)
+++ lams_tool_doku/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision 6773df2f14e862722e0c63f969649af559ec0439)
@@ -160,3 +160,22 @@
 label.comment.textarea.tip = Type your comment here then click on the green tick
 monitoring.summary.gallery.walk.skip = Skip Gallery Walk
 monitoring.summary.gallery.walk.skip.confirm = Are you sure you want to cancel Gallery Walk? Students will finish the activity as if Gallery Walk was not enabled.\n
+button.post.comment = Post comment
+label.stars.rate = Select stars to rate
+label.comment.minimum.number.words = Minimum number of words in a comment {0}
+label.side.menu = Side menu
+label.close.and.return = Close and return to the course
+label.lams.logo = LAMS logo
+label.support.activities = Support activities
+label.my.progress = My progress
+label.progress = Progress
+label.skip.to.main.content = Skip to the main content
+label.your.lesson.completion = Your lesson completion
+label.your.portrait = Your profile portrait
+label.lesson.name = Lesson name
+label.activity.name = Activity name
+label.confirm = Confirm
+label.close = Close
+label.cancel = Cancel
+label.rating.textarea.tip = Leave a comment...
+label.minimum.number.words = Minimum number of words in a comment {0}
\ No newline at end of file
Index: lams_tool_doku/conf/language/lams/ApplicationResources_en_AU.properties
===================================================================
diff -u -ra0e86d739df8fd8659a5676dddafcd6c87723baf -r6773df2f14e862722e0c63f969649af559ec0439
--- lams_tool_doku/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision a0e86d739df8fd8659a5676dddafcd6c87723baf)
+++ lams_tool_doku/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision 6773df2f14e862722e0c63f969649af559ec0439)
@@ -160,3 +160,22 @@
 label.comment.textarea.tip = Type your comment here then click on the green tick
 monitoring.summary.gallery.walk.skip = Skip Gallery Walk
 monitoring.summary.gallery.walk.skip.confirm = Are you sure you want to cancel Gallery Walk? Students will finish the activity as if Gallery Walk was not enabled.\n
+button.post.comment = Post comment
+label.stars.rate = Select stars to rate
+label.comment.minimum.number.words = Minimum number of words in a comment {0}
+label.side.menu = Side menu
+label.close.and.return = Close and return to the course
+label.lams.logo = LAMS logo
+label.support.activities = Support activities
+label.my.progress = My progress
+label.progress = Progress
+label.skip.to.main.content = Skip to the main content
+label.your.lesson.completion = Your lesson completion
+label.your.portrait = Your profile portrait
+label.lesson.name = Lesson name
+label.activity.name = Activity name
+label.confirm = Confirm
+label.close = Close
+label.cancel = Cancel
+label.rating.textarea.tip = Leave a comment...
+label.minimum.number.words = Minimum number of words in a comment {0}
\ No newline at end of file
Index: lams_tool_mindmap/conf/language/lams/ApplicationResources.properties
===================================================================
diff -u -ra0e86d739df8fd8659a5676dddafcd6c87723baf -r6773df2f14e862722e0c63f969649af559ec0439
--- lams_tool_mindmap/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision a0e86d739df8fd8659a5676dddafcd6c87723baf)
+++ lams_tool_mindmap/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision 6773df2f14e862722e0c63f969649af559ec0439)
@@ -69,7 +69,7 @@
 node.learner.label = Learner
 local.yes = Yes
 label.nogroups = No groups found for activity.
-monitor.summary.date.restriction = Mindmap availability
+monitor.summary.date.restriction = Deadline
 monitor.summary.when.date.restriction.is.set = Learners will not be able to use this activity after the set date and time.
 monitor.summary.after.date = Date/time:
 monitor.summary.set.restriction = Set restriction
@@ -133,3 +133,24 @@
 button.print = Print
 monitoring.summary.gallery.walk.skip = Skip Gallery Walk
 monitoring.summary.gallery.walk.skip.confirm = Are you sure you want to cancel Gallery Walk? Students will finish the activity as if Gallery Walk was not enabled.\n
+label.background.color = Background colour of an idea
+label.enter.full.screen = Enter full screen
+label.exit.full.screen = Exit full screen
+button.post.comment = Post comment
+label.stars.rate = Select stars to rate
+label.comment.minimum.number.words = Minimum number of words in a comment {0}
+label.side.menu = Side menu
+label.close.and.return = Close and return to the course
+label.lams.logo = LAMS logo
+label.support.activities = Support activities
+label.my.progress = My progress
+label.progress = Progress
+label.skip.to.main.content = Skip to the main content
+label.your.lesson.completion = Your lesson completion
+label.your.portrait = Your profile portrait
+label.lesson.name = Lesson name
+label.activity.name = Activity name
+label.confirm = Confirm
+label.close = Close
+label.rating.textarea.tip = Leave a comment...
+label.minimum.number.words = Minimum number of words in a comment {0}
\ No newline at end of file
Index: lams_tool_mindmap/conf/language/lams/ApplicationResources_en_AU.properties
===================================================================
diff -u -ra0e86d739df8fd8659a5676dddafcd6c87723baf -r6773df2f14e862722e0c63f969649af559ec0439
--- lams_tool_mindmap/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision a0e86d739df8fd8659a5676dddafcd6c87723baf)
+++ lams_tool_mindmap/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision 6773df2f14e862722e0c63f969649af559ec0439)
@@ -69,7 +69,7 @@
 node.learner.label = Learner
 local.yes = Yes
 label.nogroups = No groups found for activity.
-monitor.summary.date.restriction = Mindmap availability
+monitor.summary.date.restriction = Deadline
 monitor.summary.when.date.restriction.is.set = Learners will not be able to use this activity after the set date and time.
 monitor.summary.after.date = Date/time:
 monitor.summary.set.restriction = Set restriction
@@ -133,3 +133,24 @@
 button.print = Print
 monitoring.summary.gallery.walk.skip = Skip Gallery Walk
 monitoring.summary.gallery.walk.skip.confirm = Are you sure you want to cancel Gallery Walk? Students will finish the activity as if Gallery Walk was not enabled.\n
+label.background.color = Background colour of an idea
+label.enter.full.screen = Enter full screen
+label.exit.full.screen = Exit full screen
+button.post.comment = Post comment
+label.stars.rate = Select stars to rate
+label.comment.minimum.number.words = Minimum number of words in a comment {0}
+label.side.menu = Side menu
+label.close.and.return = Close and return to the course
+label.lams.logo = LAMS logo
+label.support.activities = Support activities
+label.my.progress = My progress
+label.progress = Progress
+label.skip.to.main.content = Skip to the main content
+label.your.lesson.completion = Your lesson completion
+label.your.portrait = Your profile portrait
+label.lesson.name = Lesson name
+label.activity.name = Activity name
+label.confirm = Confirm
+label.close = Close
+label.rating.textarea.tip = Leave a comment...
+label.minimum.number.words = Minimum number of words in a comment {0}
\ No newline at end of file
Index: lams_tool_scratchie/web/pages/learning/learning.jsp
===================================================================
diff -u -r4a366cab6c7fbf3a8211f8bb99295eed75e08453 -r6773df2f14e862722e0c63f969649af559ec0439
--- lams_tool_scratchie/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 4a366cab6c7fbf3a8211f8bb99295eed75e08453)
+++ lams_tool_scratchie/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 6773df2f14e862722e0c63f969649af559ec0439)
@@ -4,7 +4,7 @@
 
 <%-- param has higher level for request attribute --%>
 <c:if test="${not empty param.sessionMapID}">
-	<c:set var="sessionMapID" value="${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}" />
@@ -15,534 +15,543 @@
 <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>
+<lams:PageLearner title="${title}" toolSessionID="${toolSessionID}">
+    <!-- ********************  CSS ********************** -->
+    <link rel="stylesheet" type="text/css" href="${lams}css/jquery-ui-bootstrap-theme.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" />
 
-		<!-- ********************  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}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 ********************** -->
+    <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/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>
+    <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/jquery.form.js"></script>
+    <script type="text/javascript">
+        var isScratching = false,
+            requireAllAnswers = <c:out value="${scratchie.requireAllAnswers}" />;
 
-		<!-- ********************  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>
-			//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>
-		<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/jquery.form.js"></script>
-		<script type="text/javascript">
-			var isScratching = false,
-					requireAllAnswers = <c:out value="${scratchie.requireAllAnswers}" />;
+        $(document).ready(function(){
+            //handler for VSA input fields
+            $('.submit-user-answer-input').keypress(function(event){
+                var keycode = (event.keyCode ? event.keyCode : event.which);
+                if(keycode == '13') {
+                    var itemUid = $(this).data("item-uid");
+                    scratchVsa(itemUid);
+                    return false;
+                }
+            });
 
-			$(document).ready(function(){
-				//handler for VSA input fields
-				$('.submit-user-answer-input').keypress(function(event){
-					var keycode = (event.keyCode ? event.keyCode : event.which);
-					if(keycode == '13') {
-						var itemUid = $(this).data("item-uid");
-						scratchVsa(itemUid);
-						return false;
-					}
-				});
+            //handler for VSA submit buttons
+            $(".submit-user-answer").on('click', function(){
+                var itemUid = $(this).data("item-uid");
+                scratchVsa(itemUid);
+                return false;
+            });
 
-				//handler for VSA submit buttons
-				$(".submit-user-answer").on('click', function(){
-					var itemUid = $(this).data("item-uid");
-					scratchVsa(itemUid);
-					return false;
-				});
+            //autocomplete for VSA
+            $('.ui-autocomplete-input').each(function(){
+                $(this).autocomplete({
+                    'source' : '<c:url value="/learning/vsaAutocomplete.do"/>?itemUid=' + $(this).data("item-uid"),
+                    'delay'  : 500,
+                    'minLength' : 3
+                });
+            });
 
-				//autocomplete for VSA
-				$('.ui-autocomplete-input').each(function(){
-					$(this).autocomplete({
-						'source' : '<c:url value="/learning/vsaAutocomplete.do"/>?itemUid=' + $(this).data("item-uid"),
-						'delay'  : 500,
-						'minLength' : 3
-					});
-				});
+            // show etherpads only on Discussion expand
+            $('.question-etherpad-collapse').on('show.bs.collapse', function(){
+                var etherpad = $('.etherpad-container', this);
+                if (!etherpad.hasClass('initialised')) {
+                    var id = etherpad.attr('id'),
+                        groupId = id.substring('etherpad-container-'.length);
+                    etherpadInitMethods[groupId]();
+                }
+            });
 
-				// show etherpads only on Discussion expand
-				$('.question-etherpad-collapse').on('show.bs.collapse', function(){
-					var etherpad = $('.etherpad-container', this);
-					if (!etherpad.hasClass('initialised')) {
-						var id = etherpad.attr('id'),
-								groupId = id.substring('etherpad-container-'.length);
-						etherpadInitMethods[groupId]();
-					}
-				});
+            <c:if test="${scratchie.revealOnDoubleClick}">
+            $('.scratchie-link').on('touchend', function(){
+                if (!this.hasAttribute('onDblClick')) {
+                    return;
+                }
 
-				<c:if test="${scratchie.revealOnDoubleClick}">
-				$('.scratchie-link').on('touchend', function(){
-					if (!this.hasAttribute('onDblClick')) {
-						return;
-					}
+                // allow single touch scratching on iPads even if double click scratching is enabled
+                var itemUid = $(this).data('itemUid'),
+                    optionUid = $(this).data('optionUid');
+                scratchMcq(itemUid, optionUid);
+            });
+            </c:if>
 
-					// allow single touch scratching on iPads even if double click scratching is enabled
-					var itemUid = $(this).data('itemUid'),
-							optionUid = $(this).data('optionUid');
-					scratchMcq(itemUid, optionUid);
-				});
-				</c:if>
+            // hide Finish button for non-leaders until leader finishes
+            if (${hideFinishButton}) {
+                $("#finishButton").hide();
+            } else if (requireAllAnswers) {
+                checkAllCorrectMcqAnswersFound();
+            }
 
+            <%-- Connect to command websocket only if it is learner UI --%>
+            <c:if test="${mode == 'learner'}">
+            // command websocket stuff for refreshing
+            // trigger is an unique ID of page and action that command websocket code in Page.tag recognises
+            commandWebsocketHookTrigger = 'scratchie-leader-change-refresh-${toolSessionID}';
+            // if the trigger is recognised, the following action occurs
+            commandWebsocketHook = function() {
+                location.reload();
+            };
+            </c:if>
 
+            //initialize tooltips showing user names next to confidence levels
+            $('[data-bs-toggle="tooltip"]').tooltip();
+        });
 
-				// hide Finish button for non-leaders until leader finishes
-				if (${hideFinishButton}) {
-					$("#finishButton").hide();
-				} else if (requireAllAnswers) {
-					checkAllCorrectMcqAnswersFound();
-				}
+        //Scratch SVG. Function is used by both scratchMcq() and scratchVsa().
+        function scratchImage(itemUid, optionUid, isCorrect) {
+            // first show animation, then put static image
+            var svg = $('#svg-' + itemUid + '-' + optionUid);
 
-				<%-- Connect to command websocket only if it is learner UI --%>
-				<c:if test="${mode == 'learner'}">
-				// command websocket stuff for refreshing
-				// trigger is an unique ID of page and action that command websocket code in Page.tag recognises
-				commandWebsocketHookTrigger = 'scratchie-leader-change-refresh-${toolSessionID}';
-				// if the trigger is recognised, the following action occurs
-				commandWebsocketHook = function() {
-					location.reload();
-				};
-				</c:if>
+            //show VSA question image
+            if (svg.css('visibility') != 'visible') {
+                svg.css('visibility', 'visible');
+            }
 
-				//initialize tooltips showing user names next to confidence levels
-				$('[data-toggle="tooltip"]').tooltip();
-			});
+            svg.addClass("show-" + (isCorrect ? 'tick' : 'cross'));
+        }
 
-			//scratch image (used by both scratchMcq() and scratchVsa())
-			function scratchImage(itemUid, optionUid, isCorrect) {
-				// first show animation, then put static image
-				var imageSuffix = isCorrect ? 'correct' : 'wrong';
-				var image = $('#image-' + itemUid + '-' + optionUid);
+        //scratch MCQ answer
+        function scratchMcq(itemUid, optionUid){
+            if (isScratching) {
+                // do not allow parallel scratching
+                return;
+            }
 
-				//show VSA question image
-				if (image.css('visibility') != 'visible') {
-					image.css('visibility', 'visible');
-				}
+            isScratching = true;
+            $.ajax({
+                url: '<c:url value="/learning/recordItemScratched.do"/>',
+                data: 'sessionMapID=${sessionMapID}&optionUid=' + optionUid + '&itemUid=' + itemUid,
+                dataType: 'json',
+                type: 'post',
+                success: function (json) {
+                    if (json == null) {
+                        return false;
+                    }
 
-				image.on('load', function(){
-					var image = $(this).off("load");
-					// show static image after animation
-					setTimeout(
-							function(){
-								image.attr("src", "<lams:WebAppURL/>includes/images/scratchie-" + imageSuffix + ".png");
-							},
-							1300
-					);
-				}).attr("src", "<lams:WebAppURL/>includes/images/scratchie-" + imageSuffix + "-animation.gif");
-			}
+                    scratchImage(itemUid, optionUid, json.optionCorrect);
 
-			//scratch MCQ answer
-			function scratchMcq(itemUid, optionUid){
-				if (isScratching) {
-					// do not allow parallel scratching
-					return;
-				}
+                    //disable scratching
+                    var imageLinkIds = json.optionCorrect ? "[id^=imageLink-" + itemUid + "]" : '#imageLink' + '-' + itemUid + '-' + optionUid;
+                    var imageLinks = $(imageLinkIds);
+                    imageLinks.removeAttr("href").removeAttr('onClick').removeAttr('onDblClick');
+                    imageLinks.css('cursor', 'default');
+                    imageLinks.attr('aria-disabled', 'true');
 
-				isScratching = true;
-				$.ajax({
-					url: '<c:url value="/learning/recordItemScratched.do"/>',
-					data: 'sessionMapID=${sessionMapID}&optionUid=' + optionUid + '&itemUid=' + itemUid,
-					dataType: 'json',
-					type: 'post',
-					success: function (json) {
-						if (json == null) {
-							return false;
-						}
+                    if (json.optionCorrect) {
+                        //fade all related images
+                        $("[id^=svg-" + itemUid + "]").not("#svg-" + itemUid + "-" + optionUid).fadeTo(1300, 0.3);
 
-						scratchImage(itemUid, optionUid, json.optionCorrect);
+                        //enable Finish button
+                        if (requireAllAnswers) {
+                            checkAllCorrectMcqAnswersFound();
+                        }
+                    }
 
-						if (json.optionCorrect) {
-							//disable scratching
-							$("[id^=imageLink-" + itemUid + "]").removeAttr('onClick').removeAttr('onDblClick');
-							$("[id^=imageLink-" + itemUid + "]").css('cursor','default');
-							$("[id^=image-" + itemUid + "]").not("img[src*='scratchie-correct-animation.gif']").not("img[src*='scratchie-correct.gif']").fadeTo(1300, 0.3);
-							if (requireAllAnswers) {
-								checkAllCorrectMcqAnswersFound();
-							}
-						} else {
-							var id = '-' + itemUid + '-' + optionUid;
-							$('#imageLink' + id).removeAttr('onclick');
-							$('#imageLink' + id).css('cursor','default');
-						}
+                },
+                complete : function(){
+                    // enable scratching again
+                    isScratching = false;
+                }
+            });
+        }
 
-					},
-					complete : function(){
-						// enable scratching again
-						isScratching = false;
-					}
-				});
-			}
+        //scratch VSA answer
+        function scratchVsa(itemUid) {
+            var input = $("#input-" + itemUid),
+                answer = input.val();
 
-			//scratch VSA answer
-			function scratchVsa(itemUid) {
-				var input = $("#input-" + itemUid),
-						answer = input.val();
+            if (answer == "") {
+                return;
+            }
 
-				if (answer == "") {
-					return;
-				}
+            if (isScratching) {
+                // do not allow parallel scratching
+                return;
+            }
 
-				if (isScratching) {
-					// do not allow parallel scratching
-					return;
-				}
+            isScratching = true;
 
-				isScratching = true;
+            $.ajax({
+                url: '<c:url value="/learning/recordVsaAnswer.do"/>',
+                data: {
+                    sessionMapID: "${sessionMapID}",
+                    itemUid: itemUid,
+                    answer: answer
+                },
+                dataType: 'json',
+                type: 'post',
+                success: function (json) {
+                    if (json == null) {
+                        return false;
+                    }
 
-				$.ajax({
-					url: '<c:url value="/learning/recordVsaAnswer.do"/>',
-					data: {
-						sessionMapID: "${sessionMapID}",
-						itemUid: itemUid,
-						answer: answer
-					},
-					dataType: 'json',
-					type: 'post',
-					success: function (json) {
-						if (json == null) {
-							return false;
-						}
+                    var loggedAnswerHash = json.loggedAnswerHash,
+                        isAnswerUnique = loggedAnswerHash == -1,
+                        answerHashToScratch = isAnswerUnique ? hashCode(answer) : loggedAnswerHash
+                    trId = "#tr-" + itemUid + "-" + answerHashToScratch;
 
-						var loggedAnswerHash = json.loggedAnswerHash,
-								isAnswerUnique = loggedAnswerHash == -1,
-								answerHashToScratch = isAnswerUnique ? hashCode(answer) : loggedAnswerHash
-						trId = "#tr-" + itemUid + "-" + answerHashToScratch;
+                    //if answer was not provided yet, add it to the list
+                    if (isAnswerUnique) {
+                        paintNewVsaAnswer(itemUid, answer);
+                    }
 
-						//if answer was not provided yet, add it to the list
-						if (isAnswerUnique) {
-							paintNewVsaAnswer(itemUid, answer);
-						}
+                    var isScrathed = $(trId + ' .scratched,' + trId + ' .show-tick,' + trId + ' .show-cross', "#vsa-" + itemUid).length > 0;
+                    //highlight already scratched answer
+                    if (isScrathed) {
+                        var tableRowTohighlight = $(trId, "#vsa-" + itemUid);
+                        $([document.documentElement, document.body]).animate(
+                            {
+                                scrollTop: tableRowTohighlight.offset().top
+                            },
+                            1000,
+                            function() {
+                                tableRowTohighlight.effect("highlight", 1500);
+                            }
+                        );
 
-						var isScrathed = $(trId + ' img[src*="scratchie-correct.png"], ' + trId + ' img[src*="scratchie-wrong.png"]', "#scratches-" + itemUid).length > 0;
-						//highlight already scratched answer
-						if (isScrathed) {
-							var tableRowTohighlight = $(trId, "#scratches-" + itemUid);
-							$([document.documentElement, document.body]).animate(
-									{
-										scrollTop: tableRowTohighlight.offset().top
-									},
-									1000,
-									function() {
-										tableRowTohighlight.effect("highlight", 1500);
-									}
-							);
+                        //scratch it otherwise
+                    } else {
+                        scratchImage(itemUid, answerHashToScratch, json.isAnswerCorrect);
 
-							//scratch it otherwise
-						} else {
-							scratchImage(itemUid, answerHashToScratch, json.isAnswerCorrect);
+                        if (json.isAnswerCorrect) {
+                            //disable further answering
+                            $("[id^=svg-" + itemUid + "]").not("#svg-" + itemUid + "-" + answerHashToScratch).fadeTo(1300, 0.3);
 
-							if (json.isAnswerCorrect) {
-								//disable further answering
-								$("[id^=image-" + itemUid + "]").not("img[src*='scratchie-correct-animation.gif']").not("img[src*='scratchie-correct.gif']").fadeTo(1300, 0.3);
+                            //disable submit button
+                            $("#type-your-answer-" + itemUid).hide();
+                        }
+                    }
+                },
+                complete : function(){
+                    // enable scratching again
+                    isScratching = false;
+                }
+            });
 
-								//disable submit button
-								$("#type-your-answer-" + itemUid).hide();
-							}
-						}
-					},
-					complete : function(){
-						// enable scratching again
-						isScratching = false;
-					}
-				});
+            //blank input field
+            input.val("");
+        }
 
-				//blank input field
-				input.val("");
-			}
+        //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 = $("#vsa-" + itemUid + " .row").length;
+            var svgId = itemUid + '-' + hashCode(answer);
 
-			//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 idSuffix = '-' + itemUid + '-' + hashCode(answer);
+            //get SVG from .jsp
+            $.ajax({
+                type : "POST",
+                async: false,
+                url : '<c:url value="/pages/learning/parts/scratchieSvg.jsp"/>',
+                data : "type=full&svgId=" + svgId + "&letter=" + optionsLength + "&isHidden=false",
+                success : function(scratchieSvg) {
+                    var trElem =
+                        '<div id="tr-' + svgId + '" class="row">' +
+                        '<div class="scartchie-image-col">' +
+                        scratchieSvg +
+                        '</div>' +
 
-				var trElem =
-						'<tr id="tr' + idSuffix + '">' +
-						'<td style="width: 40px; border: none;">' +
-						'<img src="<lams:WebAppURL/>includes/images/answer-' + optionsLength + '.png" class="scartchie-image" id="image' + idSuffix + '" />' +
-						'</td>' +
+                        '<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;">' +
+                        '<spring:escapeBody javaScriptEscape="true"><lams:Portrait userId="${sessionMap.groupLeaderUserId}"/></spring:escapeBody>' +
+                        '</div>' +
+                        '</div>' +
+                        '</div>';
+                    $("#vsa-" + itemUid).append(trElem);
+                }
+            });
+        }
 
-						'<td class="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);
-			}
+        function checkAllCorrectMcqAnswersFound() {
+			var numberOfAvailableScratches = $('[id^=imageLink-][${scratchie.revealOnDoubleClick ? "ondblclick" : "onclick"}]').length;
+            if (numberOfAvailableScratches > 0) {
+                $('#finishButton')
+                    .prop('disabled', true)
+                    .css('pointer-events', 'none')
+                    .parent().attr('data-title', '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.learning.require.all.answers" /></spring:escapeBody>')
+                    .tooltip();
+            } else {
+                $('#finishButton')
+                    .prop('disabled', false)
+                    .css('pointer-events', 'auto')
+                    .parent().tooltip('dispose');
+            }
+        }
 
-			function checkAllCorrectMcqAnswersFound() {
-				var numberOfAvailableScratches = $('[id^=imageLink-][${scratchie.revealOnDoubleClick ? "ondblclick" : "onclick"}]').length;
-				if (numberOfAvailableScratches > 0) {
-					$('#finishButton').prop('disabled', true).css('pointer-events', 'none')
-							.parent().attr('data-title', '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.learning.require.all.answers" /></spring:escapeBody>')
-							.tooltip();
-				} else {
-					$('#finishButton').prop('disabled', false)
-							.css('pointer-events', 'auto')
-							.parent().tooltip('destroy');
-				}
-			}
+        function xmlEscape(value) {
+            return value.replace(/&/g, '&amp;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;')
+                .replace(/"/g, '&#034;')
+                .replace(/'/g, '&#039;');
+        }
 
-			function xmlEscape(value) {
-				return value.replace(/&/g, '&amp;')
-						.replace(/</g, '&lt;')
-						.replace(/>/g, '&gt;')
-						.replace(/"/g, '&#034;')
-						.replace(/'/g, '&#039;');
-			}
+        //a direct replacement for Java's String.hashCode() method
+        function hashCode(str) {
+            var hash = 0;
+            if (str.length == 0) {
+                return hash;
+            }
+            for (var i = 0; i < str.length; i++) {
+                var char = str.charCodeAt(i);
+                hash = ((hash<<5)-hash)+char;
+                hash = hash & hash; // Convert to 32bit integer
+            }
+            return hash;
+        }
 
-			//a direct replacement for Java's String.hashCode() method
-			function hashCode(str) {
-				var hash = 0;
-				if (str.length == 0) {
-					return hash;
-				}
-				for (var i = 0; i < str.length; i++) {
-					var char = str.charCodeAt(i);
-					hash = ((hash<<5)-hash)+char;
-					hash = hash & hash; // Convert to 32bit integer
-				}
-				return hash;
-			}
+        // time limit feature
+        <c:if test="${mode != 'teacher'}">
+        $(document).ready(function(){
+            // time limit feature
+            initWebsocket('scratchieTimeLimit${scratchie.contentId}',
+                '<lams:WebAppURL />'.replace('http', 'ws')
+                + 'learningWebsocket?toolSessionID=${toolSessionID}&toolContentID=${scratchie.contentId}',
+                function (e) {
 
-			<c:if test="${mode != 'teacher'}">
-			$(document).ready(function(){
-				// time limit feature
-				initWebsocket('scratchieTimeLimit${scratchie.contentId}',
-						'<lams:WebAppURL />'.replace('http', 'ws')
-						+ 'learningWebsocket?toolSessionID=${toolSessionID}&toolContentID=${scratchie.contentId}',
-						function (e) {
+                    // create JSON object
+                    var input = JSON.parse(e.data);
 
-							// create JSON object
-							var input = JSON.parse(e.data);
+                    if (input.pageRefresh) {
+                        location.reload();
+                        return;
+                    }
 
-							if (input.pageRefresh) {
-								location.reload();
-								return;
-							}
+                    if (input.clearTimer == true) {
+                        // teacher stopped the timer, destroy it
+                        $('#countdown').countdown('destroy').remove();
+                    } else if (typeof input.secondsLeft != 'undefined'){
+                        // teacher updated the timer
+                        var secondsLeft = +input.secondsLeft,
+                            counterInitialised = $('#countdown').length > 0;
 
-							if (input.clearTimer == true) {
-								// teacher stopped the timer, destroy it
-								$('#countdown').countdown('destroy').remove();
-							} else if (typeof input.secondsLeft != 'undefined'){
-								// teacher updated the timer
-								var secondsLeft = +input.secondsLeft,
-										counterInitialised = $('#countdown').length > 0;
+                        if (counterInitialised) {
+                            // just set the new time
+                            $('#countdown').countdown('option', 'until', secondsLeft + 'S');
+                        } else {
+                            // initialise the timer
+                            displayCountdown(secondsLeft);
+                        }
+                    } else if (${not isUserLeader}){
+                        // reflect the leader's choices
+                        $.each(input, function(itemUid, options) {
+                            $.each(options, function(optionUid, optionProperties){
 
-								if (counterInitialised) {
-									// just set the new time
-									$('#countdown').countdown('option', 'until', secondsLeft + 'S');
-								} else {
-									// initialise the timer
-									displayCountdown(secondsLeft);
-								}
-							} else if (${not isUserLeader}){
-								// reflect the leader's choices
-								$.each(input, function(itemUid, options) {
-									$.each(options, function(optionUid, optionProperties){
+                                if (optionProperties.isVSA) {
+                                    var answer = optionUid;
+                                    optionUid = hashCode(optionUid);
 
-										if (optionProperties.isVSA) {
-											var answer = optionUid;
-											optionUid = hashCode(optionUid);
+                                    //check if such image exists, create it otherwise
+                                    if ($('#image-' + itemUid + '-' + optionUid).length == 0) {
+                                        paintNewVsaAnswer(eval(itemUid), answer);
+                                    }
+                                }
 
-											//check if such image exists, create it otherwise
-											if ($('#image-' + itemUid + '-' + optionUid).length == 0) {
-												paintNewVsaAnswer(eval(itemUid), answer);
-											}
-										}
+                                scratchImage(itemUid, optionUid, optionProperties.isCorrect);
+                            });
+                        });
+                    }
 
-										scratchImage(itemUid, optionUid, optionProperties.isCorrect);
-									});
-								});
-							}
+                    // reset ping timer
+                    websocketPing('scratchieTimeLimit${scratchie.contentId}', true);
+                });
+        });
 
-							// reset ping timer
-							websocketPing('scratchieTimeLimit${scratchie.contentId}', true);
-						});
-			});
+        function displayCountdown(secondsLeft){
+            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,
+                showOverlay: false,
+                focusInput: false,
+                css: {
+                    top: '40px',
+                    left: '',
+                    right: '0%',
+                    opacity: '.8',
+                    width: '230px',
+                    cursor: 'default',
+                    border: 'none'
+                }
+            });
 
-			function displayCountdown(secondsLeft){
-				var countdown = '<div id="countdown"></div>'
-				$.blockUI({
-					message: countdown,
-					showOverlay: false,
-					focusInput: false,
-					css: {
-						top: '40px',
-						left: '',
-						right: '0%',
-						opacity: '.8',
-						width: '230px',
-						cursor: 'default',
-						border: 'none'
-					}
-				});
+            $('#countdown').countdown({
+                until: '+' + secondsLeft +'S',
+                format: 'hMS',
+                compact: true,
+                alwaysExpire : true,
+                onTick: function(periods) {
+                    // check for 30 seconds or less and display timer in red
+                    var secondsLeft = $.countdown.periodsToSeconds(periods);
+                    if (secondsLeft <= 30) {
+                        $(this).addClass('countdown-timeout');
+                    } else {
+                        $(this).removeClass('countdown-timeout');
+                    }
 
-				$('#countdown').countdown({
-					until: '+' + secondsLeft +'S',
-					format: 'hMS',
-					compact: true,
-					alwaysExpire : true,
-					onTick: function(periods) {
-						// check for 30 seconds or less and display timer in red
-						var secondsLeft = $.countdown.periodsToSeconds(periods);
-						if (secondsLeft <= 30) {
-							$(this).addClass('countdown-timeout');
-						} else {
-							$(this).removeClass('countdown-timeout');
-						}
-					},
-					onExpiry: function(periods) {
-						if (isWebsocketClosed('scratchieTimeLimit${scratchie.contentId}')){
-							console.error('Time limit websocket closed on time expire, reloading page');
-							alert('Connection issue. The page will now reload.');
-							document.location.reload();
-							return;
-						}
-						$.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>' });
+                    //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);
 
-						setTimeout(function() {
-							if (${isUserLeader}) {
-								finish(true);
-							} else {
-								location.reload();
-							}
-						}, 4000);
-					},
-					description: "<div id='countdown-label'><spring:escapeBody javaScriptEscape='true'><fmt:message key='label.countdown.time.left' /></spring:escapeBody></div>"
-				});
-			}
-			</c:if>
+                        screenCountdown.data("hours", hours);
+                        screenCountdown.data("minutes", minutes);
+                    }
+                },
+                onExpiry: function(periods) {
+                    if (isWebsocketClosed('scratchieTimeLimit${scratchie.contentId}')){
+                        console.error('Time limit websocket closed on time expire, reloading page');
+                        alert('Connection issue. The page will now reload.');
+                        document.location.reload();
+                        return;
+                    }
+                    $.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}) {
+                            finish(true);
+                        } else {
+                            location.reload();
+                        }
+                    }, 4000);
+                },
+                description: "<div id='countdown-label'><spring:escapeBody javaScriptEscape='true'><fmt:message key='label.countdown.time.left' /></spring:escapeBody></div>"
+            });
+        }
+        </c:if>
 
-			//autosave feature
-			<c:if test="${isUserLeader && (mode != 'teacher')}">
-			var autosaveInterval = "60000"; // 60 seconds interval
-			window.setInterval(learnerAutosave,	autosaveInterval);
+        //autosave feature
+        <c:if test="${isUserLeader && (mode != 'teacher')}">
+        var autosaveInterval = "60000"; // 60 seconds interval
+        window.setInterval(learnerAutosave,	autosaveInterval);
 
-			function learnerAutosave(isCommand){
-				// isCommand means that the autosave was triggered by force complete or another command websocket message
-				// in this case do not check multiple tabs open, just autosave
-				if (!isCommand) {
-					let shouldAutosave = preventLearnerAutosaveFromMultipleTabs(autosaveInterval);
-					if (!shouldAutosave) {
-						return;
-					}
-				}
+        function learnerAutosave(isCommand){
+            // isCommand means that the autosave was triggered by force complete or another command websocket message
+            // in this case do not check multiple tabs open, just autosave
+            if (!isCommand) {
+                let shouldAutosave = preventLearnerAutosaveFromMultipleTabs(autosaveInterval);
+                if (!shouldAutosave) {
+                    return;
+                }
+            }
 
-				//ajax form submit
-				$('#burning-questions').ajaxSubmit({
-					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>",
-								{ life: 2000, closeTemplate: '' }
-						);
-					}
-				});
-			}
-			</c:if>
+            //ajax form submit
+            $('#burning-questions').ajaxSubmit({
+                url: "<lams:WebAppURL/>learning/autosaveBurningQuestions.do?sessionMapID=${sessionMapID}&date=" + new Date().getTime(),
+                success: function() {
+                    $.jGrowl(
+                        "<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: '' }
+                    );
+                }
+            });
+        }
+        </c:if>
 
-			function finish(isTimelimitExpired) {
-				var method = $("#method").val();
+        function finish(isTimelimitExpired) {
+            var method = $("#method").val();
 
-				var proceed = true;
-				// ask for leave confirmation only if time limit is not expired
-				if (!isTimelimitExpired) {
-					var numberOfAvailableScratches = $("[id^=imageLink-][${scratchie.revealOnDoubleClick ? "ondblclick" : "onclick"}], [id^=type-your-answer-]:visible").length;
-					proceed = numberOfAvailableScratches == 0 ||
-							confirm("<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.one.or.more.questions.not.completed'/></spring:escapeBody>");
-				}
+            var proceed = true;
+            // ask for leave confirmation only if time limit is not expired
+            if (!isTimelimitExpired) {
+				var numberOfAvailableScratches = $("[id^=imageLink-][${scratchie.revealOnDoubleClick ? "ondblclick" : "onclick"}], [id^=type-your-answer-]:visible").length;
+                proceed = numberOfAvailableScratches == 0 ||
+                    confirm("<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.one.or.more.questions.not.completed'/></spring:escapeBody>");
+            }
 
-				if (proceed) {
-					document.getElementById("finishButton").disabled = true;
+            if (proceed) {
+                document.getElementById("finishButton").disabled = true;
 
-					var myForm = $('#burning-questions');
-					myForm.attr("action", '<lams:WebAppURL />learning/' + method + '.do?sessionMapID=${sessionMapID}&date=' + new Date().getTime());
-					myForm.submit();
-				}
+                var myForm = $('#burning-questions');
+                myForm.attr("action", '<lams:WebAppURL />learning/' + method + '.do?sessionMapID=${sessionMapID}&date=' + new Date().getTime());
+                myForm.submit();
+            }
 
-				return false;
-			}
-		</script>
-	</lams:head>
-	<body class="stripes">
+            return false;
+        }
+    </script>
 
-	<lams:Page type="learner" title="${scratchie.title}">
+    <div id="container-main">
+        <lams:LeaderDisplay username="${sessionMap.groupLeaderName}" userId="${sessionMap.groupLeaderUserId}"/>
 
-		<lams:LeaderDisplay username="${sessionMap.groupLeaderName}" userId="${sessionMap.groupLeaderUserId}"/>
+        <c:if test="${sessionMap.userFinished && (mode == 'teacher')}">
+            <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:Alert5>
+            </div>
+        </c:if>
 
-		<c:if test="${sessionMap.userFinished && (mode == 'teacher')}">
-			<div class="voffset10">
-				<lams:Alert 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>
-			</div>
-		</c:if>
+        <c:if test="${isUserLeader and scratchie.revealOnDoubleClick}">
+            <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>
 
-		<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>
-		</c:if>
+        <c:if test="${not empty sessionMap.submissionDeadline}">
+            <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:Alert5>
+        </c:if>
 
-		<div class="panel">
-			<c:out value="${scratchie.instructions}" escapeXml="false" />
-		</div>
+        <c:if test="${mode != 'teacher'}">
+            <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">
+                    <fmt:message key='label.ok' />
+                </button>
+            </div>
+        </c:if>
 
-		<c:if test="${not empty sessionMap.submissionDeadline}">
-			<lams:Alert 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>
-		</c:if>
+        <lams:errors5/>
 
-		<c:if test="${mode != 'teacher'}">
-			<div id="timelimit-start-dialog">
-				<h4>
-					<fmt:message key='label.are.you.ready' />
-				</h4>
-				<button name="ok" id="timelimit-start-ok" class="button">
-					<fmt:message key='label.ok' />
-				</button>
-			</div>
-		</c:if>
+        <div id="instructions" class="instructions">
+            <c:out value="${scratchie.instructions}" escapeXml="false" />
+        </div>
 
-		<lams:errors/>
+        <div id="questionListArea">
+            <%@ include file="questionlist.jsp"%>
+        </div>
 
-		<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>
\ No newline at end of file
Index: lams_tool_whiteboard/conf/language/lams/ApplicationResources.properties
===================================================================
diff -u -ra0e86d739df8fd8659a5676dddafcd6c87723baf -r6773df2f14e862722e0c63f969649af559ec0439
--- lams_tool_whiteboard/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision a0e86d739df8fd8659a5676dddafcd6c87723baf)
+++ lams_tool_whiteboard/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision 6773df2f14e862722e0c63f969649af559ec0439)
@@ -132,7 +132,7 @@
 label.authoring.advance.time.limit.relative.tooltip = Set the duration in minutes that the learners will have to complete the assessment. The duration will apply from the moment each learner begins the assessment. For example, if set to 5 minutes, all learners will have 5 minutes from the moment each of them start the assessment.
 label.authoring.advance.time.limit.absolute = for all learners
 label.authoring.advance.time.limit.absolute.tooltip = Set the number of minutes to finish the assessment for all learners. The duration will apply from the moment the first learner starts the assessment.
-monitor.summary.date.restriction = Date and time restriction
+monitor.summary.date.restriction = Deadline
 monitor.summary.when.date.restriction.is.set = If a date and time restriction is set, learners will not be able to submit assignments after this date.
 monitor.summary.after.date = Date and time:
 monitor.summary.set.restriction = Set restriction
@@ -144,3 +144,22 @@
 label.sorry.the.deadline.has.passed = Sorry, the deadline to participate in this activity has passed. Please contact your teacher for further details.
 monitoring.summary.gallery.walk.skip = Skip Gallery Walk
 monitoring.summary.gallery.walk.skip.confirm = Are you sure you want to cancel Gallery Walk? Students will finish the activity as if Gallery Walk was not enabled.\n
+button.post.comment = Post comment
+label.stars.rate = Select stars to rate
+label.comment.minimum.number.words = Minimum number of words in a comment {0}
+label.side.menu = Side menu
+label.close.and.return = Close and return to the course
+label.lams.logo = LAMS logo
+label.support.activities = Support activities
+label.my.progress = My progress
+label.progress = Progress
+label.skip.to.main.content = Skip to the main content
+label.your.lesson.completion = Your lesson completion
+label.your.portrait = Your profile portrait
+label.lesson.name = Lesson name
+label.activity.name = Activity name
+label.confirm = Confirm
+label.close = Close
+label.cancel = Cancel
+label.rating.textarea.tip = Leave a comment...
+label.minimum.number.words = Minimum number of words in a comment {0}
\ No newline at end of file