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