Index: lams_central/web/css/components.css
===================================================================
diff -u -r0a61360ea0ff74fb89766166cae19bdd18403694 -r72bf0041a18e7e902404c65e55e167bf6ff84269
--- lams_central/web/css/components.css	(.../components.css)	(revision 0a61360ea0ff74fb89766166cae19bdd18403694)
+++ lams_central/web/css/components.css	(.../components.css)	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -1,7 +1,7 @@
 /* For Boostrap 3 & 5 compability */
 .img-responsive {
-    max-width: 100%;
-    height: auto;
+	max-width: 100%;
+	height: auto;
 }
 
 body.component {
@@ -11,7 +11,7 @@
 
 body.component .btn-success,
 body.component .btn-success:hover {
-  color: #fff;
+	color: #fff;
 }
 
 body.component .form-select-sm,
@@ -54,27 +54,27 @@
 }
 
 body.component .dialogContainer {
-  display: none;
-  -webkit-overflow-scrolling: touch !important;
-  overflow: auto;
+	display: none;
+	-webkit-overflow-scrolling: touch !important;
+	overflow: auto;
 }
 
 body.component .dialogContainer iframe {
-  width: 100%;
-  height: calc(100% - 10px);
-  border: none;
+	width: 100%;
+	height: calc(100% - 10px);
+	border: none;
 }
 
 body.component .dialogContainer .dialogTitle {
 	text-align: center;
-	font-weight: 500;	
+	font-weight: 500;
 }
 
 body.component .dialogContainer .modal-body {
-  height: 100%;
-  max-height: calc(100% - 56px);
-  padding: 10px;
-  overflow: auto;
+	height: 100%;
+	max-height: calc(100% - 56px);
+	padding: 10px;
+	overflow: auto;
 }
 
 body.component .dialogContainer .bottom-buttons {
@@ -222,47 +222,47 @@
 }
 
 body.component .portrait-round {
-  border-radius: 50%;
+	border-radius: 50%;
 }
 
 body.component .cke_textarea_inline {
-  /* From bootstrap form-control */
-  display: block;
-  width: 100%;
-  padding: 6px 12px;
-  font-size: 14px;
-  line-height: 1.42857143;
-  color: #555;
-  background-color: var(--bs-white);
-  background-image: none;
-  border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
-  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-  border: thin solid var(--bs-secondary);
-  overflow: hidden;
-  /* keeps floating objects within ckeditor area */
-  /* LAMS -  min height is set in ckconfig_custom.js but keep the default here too so that most fields 
-   * are the right size and only the ones where the height is overridden does the size change.  */
-  min-height: 60px;
-  -webkit-appearance: textfield;
+	/* From bootstrap form-control */
+	display: block;
+	width: 100%;
+	padding: 6px 12px;
+	font-size: 14px;
+	line-height: 1.42857143;
+	color: #555;
+	background-color: var(--bs-white);
+	background-image: none;
+	border-radius: 4px;
+	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+	-webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
+	-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+	transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+	border: thin solid var(--bs-secondary);
+	overflow: hidden;
+	/* keeps floating objects within ckeditor area */
+	/* LAMS -  min height is set in ckconfig_custom.js but keep the default here too so that most fields
+     * are the right size and only the ones where the height is overridden does the size change.  */
+	min-height: 60px;
+	-webkit-appearance: textfield;
 }
 body.component .cke_textarea_inline:focus {
-  border-color: var(--bs-blue);
-  outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+	border-color: var(--bs-blue);
+	outline: 0;
+	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
 }
 
 body.component .cke_float {
-  width: 70% !important;
+	width: 70% !important;
 }
 
 /** Overwrite CKEditor's default CSS, so that content in an editor is displayed the same way as in real life */
 body.component .cke_widget_inline {
-  display: block !important;
+	display: block !important;
 }
 
 body.component .btn {
@@ -429,6 +429,25 @@
 	overflow: hidden;
 }
 
+.component-page-wrapper #lesson-name {
+	font-size: 2rem;
+	margin-left: 1.8rem;
+}
+
+.component-page-wrapper #sidebar-opener-button {
+	font-size: 2rem;
+	margin-top: .3rem;
+	color: var(--bs-blue);
+	cursor: pointer;
+}
+
+.component-page-wrapper .component-page-content {
+	min-height: 100%;
+	padding: 1rem 4rem 2rem 8rem;
+	transition: all .3s ease;
+	vertical-align: top;
+}
+
 .component-page-wrapper .component-sidebar {
 	position: absolute;
 	height: initial;
@@ -443,15 +462,15 @@
 	transition: all .3s ease;
 	transform: translateX(-7rem);
 	z-index: 1;
-	
+
 }
 
 .component-page-wrapper .component-sidebar.active {
 	transform: translateX(0);
 }
 
 .component-page-wrapper .component-sidebar .lams-logo {
-	width: 3.6rem;	
+	width: 3.6rem;
 	margin-bottom: 1.2rem;
 }
 
@@ -499,7 +518,7 @@
 }
 
 /* Unused or used in assessment rewritten authoring */
-/* 
+/*
 
 .content-left {
 	-ms-flex: 0 0 26.5rem;
@@ -636,11 +655,6 @@
 	content: "\f054";
 }
 
-.component-page-content {
-	width: 100%;
-	min-height: 100%;
-	padding: 1.5rem 4.8rem;
-}
 
 .banner-box-col {
 	box-shadow: 0px 20px 20px #2E384D1A;
Index: lams_learning/src/java/org/lamsfoundation/lams/learning/web/controller/LearnerController.java
===================================================================
diff -u -r3d9c6d823f8b59f95278f92c1c88038b21511f80 -r72bf0041a18e7e902404c65e55e167bf6ff84269
--- lams_learning/src/java/org/lamsfoundation/lams/learning/web/controller/LearnerController.java	(.../LearnerController.java)	(revision 3d9c6d823f8b59f95278f92c1c88038b21511f80)
+++ lams_learning/src/java/org/lamsfoundation/lams/learning/web/controller/LearnerController.java	(.../LearnerController.java)	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -148,9 +148,8 @@
 
     public LearnerController() {
 	FluxRegistry.initFluxMap(LEARNER_TIMELINE_FLUX_NAME, CommonConstants.ACTIVITY_ENTERED_SINK_NAME,
-		(LearnerActivityCompleteFluxItem item,
-			LearnerActivityCompleteFluxItem key) -> item.getLessonId() == key.getLessonId()
-				&& item.getUserId() == key.getUserId(),
+		(LearnerActivityCompleteFluxItem item, LearnerActivityCompleteFluxItem key) ->
+			item.getLessonId() == key.getLessonId() && item.getUserId() == key.getUserId(),
 		(LearnerActivityCompleteFluxItem item) -> {
 		    ObjectNode responseJSON = null;
 		    try {
@@ -184,18 +183,16 @@
      * </p>
      *
      * @param mapping
-     *            An ActionMapping class that will be used by the Action class to tell the ActionServlet where to send
-     *            the end-user.
-     *
+     * 	An ActionMapping class that will be used by the Action class to tell the ActionServlet where to send the
+     * 	end-user.
      * @param form
-     *            The ActionForm class that will contain any data submitted by the end-user via a form.
+     * 	The ActionForm class that will contain any data submitted by the end-user via a form.
      * @param request
-     *            A standard Servlet HttpServletRequest class.
+     * 	A standard Servlet HttpServletRequest class.
      * @param response
-     *            A standard Servlet HttpServletResponse class.
+     * 	A standard Servlet HttpServletResponse class.
      * @return An ActionForward class that will be returned to the ActionServlet indicating where the user is to go
-     *         next.
-     *
+     * 	next.
      * @throws IOException
      * @throws ServletException
      */
@@ -328,7 +325,8 @@
 	    response.setStatus(HttpServletResponse.SC_NO_CONTENT);
 	    return null;
 	}
-
+	Lesson lesson = lessonService.getLesson(lessonId);
+	responseJSON.put("lessonName", lesson.getLessonName());
 	responseJSON.set("messages", getProgressBarMessages());
 
 	response.setContentType("application/json;charset=utf-8");
@@ -490,8 +488,9 @@
 
 	if (activity.getChildActivities() != null) {
 	    for (ActivityURL childActivity : activity.getChildActivities()) {
-		activityJSON.withArray("childActivities").add(
-			activityProgressToJSON(childActivity, currentActivityId, lessonId, learnerId, monitorMode));
+		activityJSON.withArray("childActivities")
+			.add(activityProgressToJSON(childActivity, currentActivityId, lessonId, learnerId,
+				monitorMode));
 	    }
 	}
 
Index: lams_learning/web/includes/javascript/learnerPage.js
===================================================================
diff -u
--- lams_learning/web/includes/javascript/learnerPage.js	(revision 0)
+++ lams_learning/web/includes/javascript/learnerPage.js	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -0,0 +1,16 @@
+
+// refresh progress bar on first/next activity load
+function initLearnerPage(toolSessionId, userId) {
+    $.ajax({
+        url : LAMS_URL + 'learning/learner/getLearnerProgress.do',
+        data : {
+            'toolSessionID' : toolSessionId,
+            'userID'   : userId
+        },
+        cache : false,
+        dataType : 'json',
+        success : function(result){
+            $('#lesson-name').text(result.lessonName);
+        }
+    });
+}
\ No newline at end of file
Index: lams_monitoring/web/css/components-monitoring.css
===================================================================
diff -u -r4fedcb4cf4ff6424821847b4280f18fa25a17f22 -r72bf0041a18e7e902404c65e55e167bf6ff84269
--- lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 4fedcb4cf4ff6424821847b4280f18fa25a17f22)
+++ lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -11,7 +11,7 @@
 	height: 3rem;
 	border-color: var(--bs-gray-300);
 	border-bottom-width: 2px;
-    cursor: pointer;
+	cursor: pointer;
 }
 
 body.component .dialogContainer .dialogListItem:hover {
@@ -36,7 +36,7 @@
 }
 
 body.component .dialogContainer .dialogListItem.dialogListItemSelected {
-    background-color: rgba(0, 145, 74, 0.1) !important;
+	background-color: rgba(0, 145, 74, 0.1) !important;
 }
 
 body.component .dialogContainer #classMonitorSearchRow {
@@ -52,38 +52,26 @@
 	cursor: pointer;
 }
 
-.monitoring-page-content {
-	min-height: 100%;
-	padding: 1rem 4rem 2rem 8rem;
-	transition: all .3s ease;
-	vertical-align: top;
-}
-
-.monitoring-page-wrapper #lesson-name {
-	font-size: 2rem;
-	margin-left: 1.8rem;
-}
-
 .monitoring-page-wrapper #sequenceSearchPhraseContainer {
 	width: 20rem;
 	margin-left: 1rem;
 }
 
 .monitoring-page-wrapper #sequenceSearchPhrase {
 	width: 15rem;
-} 
+}
 
 .monitoring-page-wrapper #sequenceSearchPhraseButton {
 	border: none;
 	height: 3rem;
-} 
+}
 
 .monitoring-page-wrapper #sequenceSearchPhraseClearIcon {
 	display: none;
 }
 
 .monitoring-page-wrapper .component-sidebar.active.expanded {
-	width: 25rem;	
+	width: 25rem;
 }
 
 .monitoring-page-wrapper .component-sidebar.active.expanded ~ .monitoring-page-content.active {
@@ -161,7 +149,7 @@
 }
 
 .monitoring-page-wrapper #sequence-tab-content {
-	text-align: center;	
+	text-align: center;
 }
 
 .monitoring-page-wrapper #sequence-tab-content .countdown-timeout {
@@ -203,7 +191,7 @@
 }
 
 .monitoring-page-wrapper #sequence-tab-content #required-tasks .dropdown-menu {
-	padding: 0;	
+	padding: 0;
 }
 
 .monitoring-page-wrapper #sequence-tab-content #required-tasks .dropdown-item {
@@ -238,7 +226,7 @@
 .monitoring-page-wrapper #sequence-tab-content #canvas-container.svg-learner-draggable-area.force-completing,
 .monitoring-page-wrapper #sequence-tab-content #canvas-container.svg-learner-draggable-area.force-completing div#sequenceCanvas svg.svg-learning-design,
 .monitoring-page-wrapper #sequence-tab-content #canvas-container.svg-learner-draggable-area.force-completing div#sequenceCanvas svg.svg-learning-design * {
-	cursor: wait !important;	
+	cursor: wait !important;
 }
 
 .monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas div.learner-icon-container {
@@ -263,12 +251,12 @@
 }
 
 .monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas div.portrait-generic-sm.learner-icon.learner-searched
-	{
+{
 	border: none;
 }
 
 .monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas div.portrait-generic-sm.learner-icon.learner-searched::before
-	{
+{
 	border: red 3px solid;
 	border-radius: 25px;
 }
@@ -345,7 +333,7 @@
 }
 
 .monitoring-page-wrapper #learners-accordion .no-progress {
-	display: none;	
+	display: none;
 	text-align: center;
 	position: relative;
 	top: 33%;
Index: lams_monitoring/web/monitor.jsp
===================================================================
diff -u -re0ca5962f24c57a3a693dc5046f8489ab23f5776 -r72bf0041a18e7e902404c65e55e167bf6ff84269
--- lams_monitoring/web/monitor.jsp	(.../monitor.jsp)	(revision e0ca5962f24c57a3a693dc5046f8489ab23f5776)
+++ lams_monitoring/web/monitor.jsp	(.../monitor.jsp)	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -10,943 +10,934 @@
 </c:if>
 
 <lams:html>
-<head>
-	<meta charset="utf-8" />
-	<title><fmt:message key="monitor.title" /></title>
-	
-	<link rel="icon" type="image/x-icon" href="<lams:LAMSURL/>images/svg/lamsv5_logo.svg">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme5.css">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/bootstrap5.custom.css">
-	<link rel="stylesheet" href="<lams:LAMSURL/>includes/font-awesome6/css/all.css">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/vertical-timeline.css"> 
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/x-editable.css">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/free.ui.jqgrid.min.css">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/free.ui.jqgrid.custom.css">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/tempus-dominus.min.css">
-	<link rel="stylesheet" href="<lams:LAMSURL/>gradebook/includes/css/gradebook.css" />
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/components.css">
-	<link rel="stylesheet" href="<lams:WebAppURL/>css/components-monitoring.css">
+	<head>
+		<meta charset="utf-8" />
+		<title><fmt:message key="monitor.title" /></title>
 
-	<lams:css suffix="chart"/>
-		
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.plugin.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.countdown.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.cookie.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.timeago.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/timeagoi18n/jquery.timeago.${fn:toLowerCase(localeLanguage)}.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/popper.min.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/x-editable.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/d3.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/chart.bundle.min.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/chart.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/free.jquery.jqgrid.min.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/tempus-dominus.min.js"></script>
-	
-	<c:choose>
-		<c:when test="${localeLanguage eq 'es'}">
-			<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jqgrid-i18n/grid.locale-es.js"></script>
-			<c:set var="jqGridInternationalised" value="true" />
-	 	</c:when>
-	 	 <c:when test="${localeLanguage eq 'fr'}">
-	 	 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jqgrid-i18n/grid.locale-fr.js"></script>
-	 	 	<c:set var="jqGridInternationalised" value="true" />
-	 	 </c:when>
-	 	 <c:when test="${localeLanguage eq 'el'}">
-	 	 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jqgrid-i18n/grid.locale-el.js"></script>
-	 	 	<c:set var="jqGridInternationalised" value="true" />
-	 	 </c:when>
-	 	<c:when test="${localeLanguage eq 'no'}">
-	 		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jqgrid-i18n/grid.locale-no.js"></script>
-	 	 	<c:set var="jqGridInternationalised" value="true" />
-	 	 </c:when>
-	</c:choose>
-	
-	<lams:JSImport src="includes/javascript/common.js" />
-	<lams:JSImport src="includes/javascript/download.js" />
-	<lams:JSImport src="includes/javascript/portrait5.js" />
-	<lams:JSImport src="includes/javascript/dialog5.js" />
-	<lams:JSImport src="includes/javascript/monitorLesson.js" relative="true" />
-	
-	
-	<script type="text/javascript">
-		var lessonId = ${lesson.lessonID},
-			userId = '<lams:user property="userID"/>',
-			ldId = ${lesson.learningDesignID},
-			lessonStateId = ${lesson.lessonStateID},
-			createDateTimeStr = '${lesson.createDateTimeStr}',
-			lessonStartDate = '${lesson.scheduleStartDate}',
-			lessonEndDate = '${lesson.scheduleEndDate}',
-			liveEditEnabled = ${enableLiveEdit && lesson.liveEditEnabled},
-			TOTAL_LESSON_LEARNERS_NUMBER = ${lesson.numberPossibleLearners},
-			
-			iraToolContentId = '${iraToolContentId}',
-			traToolContentId = '${traToolContentId}',
-			aeToolContentIds = "${aeToolContentIds}",
-			aeToolTypes = "${aeToolTypes}",
-			aeActivityTitles = "${aeActivityTitles}",
-			peerreviewToolContentId = "${peerreviewToolContentId}",
-			
-			LAMS_URL = '<lams:LAMSURL/>',
-			csrfToken = '<csrf:tokenname/> : <csrf:tokenvalue/>',
-			csrfTokenName = '<csrf:tokenname/>',
-			csrfTokenValue = '<csrf:tokenvalue/>',
-			
-			decoderDiv = $('<div />'),
-			LABELS = {
-				<fmt:message key="index.emailnotifications" var="EMAIL_NOTIFICATIONS_TITLE_VAR"/>
-				EMAIL_NOTIFICATIONS_TITLE : '<c:out value="${EMAIL_NOTIFICATIONS_TITLE_VAR}" />',
-				<fmt:message key="force.complete.click" var="FORCE_COMPLETE_CLICK_VAR"/>
-				FORCE_COMPLETE_CLICK : decoderDiv.html('<c:out value="${FORCE_COMPLETE_CLICK_VAR}" />').text(),
-				<fmt:message key="button.force.complete" var="FORCE_COMPLETE_BUTTON_VAR"/>
-		        FORCE_COMPLETE_BUTTON : '<c:out value="${FORCE_COMPLETE_BUTTON_VAR}" />',
-				<fmt:message key="force.complete.end.lesson.confirm" var="FORCE_COMPLETE_END_LESSON_CONFIRM_VAR"/>
-				FORCE_COMPLETE_END_LESSON_CONFIRM : decoderDiv.html('<c:out value="${FORCE_COMPLETE_END_LESSON_CONFIRM_VAR}" />').text(),
-				<fmt:message key="force.complete.activity.confirm" var="FORCE_COMPLETE_ACTIVITY_CONFIRM_VAR"/>
-				FORCE_COMPLETE_ACTIVITY_CONFIRM : decoderDiv.html('<c:out value="${FORCE_COMPLETE_ACTIVITY_CONFIRM_VAR}" />').text(),
-				<fmt:message key="force.complete.remove.content" var="FORCE_COMPLETE_REMOVE_CONTENT_VAR"/>
-				FORCE_COMPLETE_REMOVE_CONTENT : decoderDiv.html('<c:out value="${FORCE_COMPLETE_REMOVE_CONTENT_VAR}" />').text(),
-				<fmt:message key="force.complete.drop.fail" var="FORCE_COMPLETE_DROP_FAIL_VAR"/>
-				FORCE_COMPLETE_DROP_FAIL : '<c:out value="${FORCE_COMPLETE_DROP_FAIL_VAR}" />',
-				<fmt:message key="learner.group.count" var="LEARNER_GROUP_COUNT_VAR"/>
-				LEARNER_GROUP_COUNT : '<c:out value="${LEARNER_GROUP_COUNT_VAR}" />',
-				<fmt:message key="learner.group.show" var="LEARNER_GROUP_SHOW_VAR"/>
-				LEARNER_GROUP_SHOW : '<c:out value="${LEARNER_GROUP_SHOW_VAR}" />',
-				<fmt:message key="learner.group.remove.progress" var="LEARNER_GROUP_REMOVE_PROGRESS_VAR"/>
-				LEARNER_GROUP_REMOVE_PROGRESS : decoderDiv.html('<c:out value="${LEARNER_GROUP_REMOVE_PROGRESS_VAR}" />').text(),
-		        <fmt:message key="button.email" var="EMAIL_BUTTON_VAR"/>
-		        EMAIL_BUTTON : '<c:out value="${EMAIL_BUTTON_VAR}" />',
-				<fmt:message key="email.notifications" var="NOTIFCATIONS_VAR"/>
-				NOTIFCATIONS : '<c:out value="${NOTIFCATIONS_VAR}" />',
-				<fmt:message key="button.save" var="SAVE_BUTTON_VAR"/>
-				SAVE_BUTTON : '<c:out value="${SAVE_BUTTON_VAR}" />',
-				<fmt:message key="button.cancel" var="CANCEL_BUTTON_VAR"/>
-				CANCEL_BUTTON : '<c:out value="${CANCEL_BUTTON_VAR}" />',
-				<fmt:message key="learner.finished.dialog.title" var="LEARNER_FINISHED_DIALOG_TITLE_VAR"/>
-				LEARNER_FINISHED_DIALOG_TITLE : '<c:out value="${LEARNER_FINISHED_DIALOG_TITLE_VAR}" />',
-				<fmt:message key="lesson.enable.presence.alert" var="LESSON_PRESENCE_ENABLE_ALERT_VAR"/>
-				LESSON_PRESENCE_ENABLE_ALERT : decoderDiv.html('<c:out value="${LESSON_PRESENCE_ENABLE_ALERT_VAR}" />').text(),
-				<fmt:message key="lesson.disable.presence.alert" var="LESSON_PRESENCE_DISABLE_ALERT_VAR"/>
-				LESSON_PRESENCE_DISABLE_ALERT : decoderDiv.html('<c:out value="${LESSON_PRESENCE_DISABLE_ALERT_VAR}" />').text(),
-				<fmt:message key="lesson.enable.im.alert" var="LESSON_IM_ENABLE_ALERT_VAR"/>
-				LESSON_IM_ENABLE_ALERT : decoderDiv.html('<c:out value="${LESSON_IM_ENABLE_ALERT_VAR}" />').text(),
-				<fmt:message key="lesson.disable.im.alert" var="LESSON_IM_DISABLE_ALERT_VAR"/>
-				LESSON_IM_DISABLE_ALERT : decoderDiv.html('<c:out value="${LESSON_IM_DISABLE_ALERT_VAR}" />').text(),
-				<fmt:message key="lesson.remove.alert" var="LESSON_REMOVE_ALERT_VAR"/>
-				LESSON_REMOVE_ALERT : decoderDiv.html('<c:out value="${LESSON_REMOVE_ALERT_VAR}" />').text(),
-				<fmt:message key="lesson.remove.doublecheck.alert" var="LESSON_REMOVE_DOUBLECHECK_ALERT_VAR"/>
-				LESSON_REMOVE_DOUBLECHECK_ALERT : decoderDiv.html('<c:out value="${LESSON_REMOVE_DOUBLECHECK_ALERT_VAR}" />').text(),
-				<fmt:message key="lesson.state.created" var="LESSON_STATE_CREATED_VAR"/>
-				LESSON_STATE_CREATED : '<c:out value="${LESSON_STATE_CREATED_VAR}" />',
-				<fmt:message key="lesson.state.scheduled" var="LESSON_STATE_SCHEDULED_VAR"/>
-				LESSON_STATE_SCHEDULED : '<c:out value="${LESSON_STATE_SCHEDULED_VAR}" />',
-				<fmt:message key="lesson.state.started" var="LESSON_STATE_STARTED_VAR"/>
-				LESSON_STATE_STARTED : '<c:out value="${LESSON_STATE_STARTED_VAR}" />',
-				<fmt:message key="lesson.state.suspended" var="LESSON_STATE_SUSPENDED_VAR"/>
-				LESSON_STATE_SUSPENDED : '<c:out value="${LESSON_STATE_SUSPENDED_VAR}" />',
-				<fmt:message key="lesson.state.finished" var="LESSON_STATE_FINISHED_VAR"/>
-				LESSON_STATE_FINISHED : '<c:out value="${LESSON_STATE_FINISHED_VAR}" />',
-				<fmt:message key="lesson.state.archived" var="LESSON_STATE_ARCHIVED_VAR"/>
-				LESSON_STATE_ARCHIVED : '<c:out value="${LESSON_STATE_ARCHIVED_VAR}" />',
-				<fmt:message key="lesson.state.removed" var="LESSON_STATE_REMOVED_VAR"/>
-				LESSON_STATE_REMOVED : '<c:out value="${LESSON_STATE_REMOVED_VAR}" />',
-				<fmt:message key="lesson.state.action.disable" var="LESSON_STATE_ACTION_DISABLE_VAR"/>
-				LESSON_STATE_ACTION_DISABLE : '<c:out value="${LESSON_STATE_ACTION_DISABLE_VAR}" />',
-				<fmt:message key="lesson.state.action.activate" var="LESSON_STATE_ACTION_ACTIVATE_VAR"/>
-				LESSON_STATE_ACTION_ACTIVATE : '<c:out value="${LESSON_STATE_ACTION_ACTIVATE_VAR}" />',
-				<fmt:message key="lesson.state.action.remove" var="LESSON_STATE_ACTION_REMOVE_VAR"/>
-				LESSON_STATE_ACTION_REMOVE : '<c:out value="${LESSON_STATE_ACTION_REMOVE_VAR}" />',
-				<fmt:message key="lesson.state.action.archive" var="LESSON_STATE_ACTION_ARCHIVE_VAR"/>
-				LESSON_STATE_ACTION_ARCHIVE : '<c:out value="${LESSON_STATE_ACTION_ARCHIVE_VAR}" />',
-				<fmt:message key="error.lesson.schedule.date" var="LESSON_ERROR_SCHEDULE_DATE_VAR"/>
-				LESSON_ERROR_SCHEDULE_DATE : decoderDiv.html('<c:out value="${LESSON_ERROR_SCHEDULE_DATE_VAR}" />').text(),
-				<fmt:message key="button.edit.class" var="LESSON_EDIT_CLASS_VAR"/>
-				LESSON_EDIT_CLASS : '<c:out value="${LESSON_EDIT_CLASS_VAR}" />',
-				<fmt:message key="class.add.all.confirm" var="CLASS_ADD_ALL_CONFIRM_VAR"/>
-				CLASS_ADD_ALL_CONFIRM : '<c:out value="${CLASS_ADD_ALL_CONFIRM_VAR}" />',
-				<fmt:message key="class.add.all.success" var="CLASS_ADD_ALL_SUCCESS_VAR"/>
-				CLASS_ADD_ALL_SUCCESS : '<c:out value="${CLASS_ADD_ALL_SUCCESS_VAR}" />',
-				<fmt:message key="lesson.group.dialog.class" var="LESSON_GROUP_DIALOG_CLASS_VAR"/>
-				LESSON_GROUP_DIALOG_CLASS : '<c:out value="${LESSON_GROUP_DIALOG_CLASS_VAR}" />',
-				<fmt:message key="label.learner.progress.activity.current.tooltip" var="CURRENT_ACTIVITY_VAR"/>
-				CURRENT_ACTIVITY : '<c:out value="${CURRENT_ACTIVITY_VAR}" />',
-				<fmt:message key="label.learner.progress.activity.completed.tooltip" var="COMPLETED_ACTIVITY_VAR"/>
-				COMPLETED_ACTIVITY : '<c:out value="${COMPLETED_ACTIVITY_VAR}" />',
-				<fmt:message key="label.learner.progress.activity.attempted.tooltip" var="ATTEMPTED_ACTIVITY_VAR"/>
-				ATTEMPTED_ACTIVITY : '<c:out value="${ATTEMPTED_ACTIVITY_VAR}" />',
-				<fmt:message key="label.learner.progress.activity.tostart.tooltip" var="TOSTART_ACTIVITY_VAR"/>
-				TOSTART_ACTIVITY : '<c:out value="${TOSTART_ACTIVITY_VAR}" />',
-				<fmt:message key="label.learner.progress.activity.support.tooltip" var="SUPPORT_ACTIVITY_VAR"/>
-				SUPPORT_ACTIVITY : '<c:out value="${SUPPORT_ACTIVITY_VAR}" />',
-				<fmt:message key="label.learner.progress.not.started" var="PROGRESS_NOT_STARTED_VAR"/>
-				PROGRESS_NOT_STARTED : '<c:out value="${PROGRESS_NOT_STARTED_VAR}" />',
-			    <fmt:message key="button.timechart" var="TIME_CHART_VAR"/>
-			    TIME_CHART : '<c:out value="${TIME_CHART_VAR}" />',
-			    <fmt:message key="button.timechart.tooltip" var="TIME_CHART_TOOLTIP_VAR"/>
-			    TIME_CHART_TOOLTIP : '<c:out value="${TIME_CHART_TOOLTIP_VAR}" />',
-				<fmt:message key="button.live.edit.confirm" var="LIVE_EDIT_CONFIRM_VAR"/>
-				LIVE_EDIT_CONFIRM : decoderDiv.html('<c:out value="${LIVE_EDIT_CONFIRM_VAR}" />').text(),
-				<fmt:message key="lesson.task.gate" var="CONTRIBUTE_GATE_VAR"/>
-				CONTRIBUTE_GATE : '<c:out value="${CONTRIBUTE_GATE_VAR}" />',
-				<fmt:message key="lesson.task.gate.password" var="CONTRIBUTE_GATE_PASSWORD_VAR"/>
-				CONTRIBUTE_GATE_PASSWORD : '<c:out value="${CONTRIBUTE_GATE_PASSWORD_VAR}" />',
-				<fmt:message key="lesson.task.grouping" var="CONTRIBUTE_GROUPING_VAR"/>
-				CONTRIBUTE_GROUPING : '<c:out value="${CONTRIBUTE_GROUPING_VAR}" />',
-				<fmt:message key="lesson.task.branching" var="CONTRIBUTE_BRANCHING_VAR"/>
-				CONTRIBUTE_BRANCHING : '<c:out value="${CONTRIBUTE_BRANCHING_VAR}" />',
-				<fmt:message key="lesson.task.content.edited" var="CONTRIBUTE_CONTENT_EDITED_VAR"/>
-				CONTRIBUTE_CONTENT_EDITED : '<c:out value="${CONTRIBUTE_CONTENT_EDITED_VAR}" />',
-				<fmt:message key="lesson.task.tool" var="CONTRIBUTE_TOOL_VAR"/>
-				CONTRIBUTE_TOOL : '<c:out value="${CONTRIBUTE_TOOL_VAR}" />',
-				<fmt:message key="button.task.go.tooltip" var="CONTRIBUTE_TOOLTIP_VAR"/>
-				CONTRIBUTE_TOOLTIP : '<c:out value="${CONTRIBUTE_TOOLTIP_VAR}" />',
-				<fmt:message key="button.task.go" var="CONTRIBUTE_BUTTON_VAR"/>
-				CONTRIBUTE_BUTTON : '<c:out value="${CONTRIBUTE_BUTTON_VAR}" />',
-				<fmt:message key="button.task.gate.open.now" var="CONTRIBUTE_OPEN_GATE_NOW_BUTTON_VAR"/>
-				CONTRIBUTE_OPEN_GATE_NOW_BUTTON : '<c:out value="${CONTRIBUTE_OPEN_GATE_NOW_BUTTON_VAR}" />',
-				<fmt:message key="button.task.gate.open.now.tooltip" var="CONTRIBUTE_OPEN_GATE_NOW_TOOLTIP_VAR"/>
-				CONTRIBUTE_OPEN_GATE_NOW_TOOLTIP : '<c:out value="${CONTRIBUTE_OPEN_GATE_NOW_TOOLTIP_VAR}" />',
-				<fmt:message key="button.task.gate.open" var="CONTRIBUTE_OPEN_GATE_BUTTON_VAR"/>
-				CONTRIBUTE_OPEN_GATE_BUTTON : '<c:out value="${CONTRIBUTE_OPEN_GATE_BUTTON_VAR}" />',
-				<fmt:message key="button.task.gate.open.tooltip" var="CONTRIBUTE_OPEN_GATE_TOOLTIP_VAR"/>
-				CONTRIBUTE_OPEN_GATE_TOOLTIP : '<c:out value="${CONTRIBUTE_OPEN_GATE_TOOLTIP_VAR}" />',
-				<fmt:message key="button.task.gate.opened" var="CONTRIBUTE_OPENED_GATE_VAR"/>
-				CONTRIBUTE_OPENED_GATE : '<c:out value="${CONTRIBUTE_OPENED_GATE_VAR}" />',
-				<fmt:message key="button.task.gate.opened.tooltip" var="CONTRIBUTE_OPENED_GATE_TOOLTIP_VAR"/>
-				CONTRIBUTE_OPENED_GATE_TOOLTIP : '<c:out value="${CONTRIBUTE_OPENED_GATE_TOOLTIP_VAR}" />',
-				<fmt:message key="lesson.task.attention" var="CONTRIBUTE_ATTENTION_VAR"/>
-				CONTRIBUTE_ATTENTION : '<c:out value="${CONTRIBUTE_ATTENTION_VAR}" />',
-				<fmt:message key="button.help" var="BUTTON_HELP_VAR"/>
-				HELP : '<c:out value="${BUTTON_HELP_VAR}" />',
-				<fmt:message key="label.lesson.introduction" var="LESSON_INTRODUCTION_VAR"/>
-				LESSON_INTRODUCTION : '<c:out value="${LESSON_INTRODUCTION_VAR}" />',
-				<fmt:message key="label.email" var="EMAIL_TITLE_VAR"/>
-				EMAIL_TITLE : '<c:out value="${EMAIL_TITLE_VAR}" />',
-				<fmt:message key="tour.this.is.disabled" var="TOUR_DISABLED_ELEMENT_VAR"/>
-				TOUR_DISABLED_ELEMENT : '<c:out value="${TOUR_DISABLED_ELEMENT_VAR}" />',
-				<fmt:message key="progress.email.sent.success" var="PROGRESS_EMAIL_SUCCESS_VAR"/>
-				PROGRESS_EMAIL_SUCCESS : '<c:out value="${PROGRESS_EMAIL_SUCCESS_VAR}" />',
-				<fmt:message key="progress.email.send.now.question" var="PROGRESS_EMAIL_SEND_NOW_QUESTION_VAR"/>
-				PROGRESS_EMAIL_SEND_NOW_QUESTION : '<c:out value="${PROGRESS_EMAIL_SEND_NOW_QUESTION_VAR}" />',
-				<fmt:message key="progress.email.send.failed" var="PROGRESS_EMAIL_SEND_FAILED_VAR"/>
-				PROGRESS_EMAIL_SEND_FAILED : '<c:out value="${PROGRESS_EMAIL_SEND_FAILED_VAR}" />',
-				<fmt:message key="progress.email.select.date.first" var="PROGRESS_EMAIL_SELECT_DATE_FIRST_VAR"/>
-				PROGRESS_SELECT_DATE_FIRST : '<c:out value="${PROGRESS_EMAIL_SELECT_DATE_FIRST_VAR}" />',
-				<fmt:message key="progress.email.enter.two.dates.first" var="PROGRESS_EMAIL_ENTER_TWO_DATES_FIRST_VAR"/>
-				PROGRESS_ENTER_TWO_DATES_FIRST : '<c:out value="${PROGRESS_EMAIL_ENTER_TWO_DATES_FIRST_VAR}" />',
-				<fmt:message key="progress.email.would.you.like.to.generate" var="PROGRESS_EMAIL_GENERATE_ONE_VAR"/>
-				PROGRESS_EMAIL_GENERATE_ONE : '<c:out value="${PROGRESS_EMAIL_GENERATE_ONE_VAR}" />',
-				<fmt:message key="progress.email.how.many.dates.to.generate" var="PROGRESS_EMAIL_GENERATE_TWO_VAR"/>
-				PROGRESS_EMAIL_GENERATE_TWO : '<c:out value="${PROGRESS_EMAIL_GENERATE_TWO_VAR}" />',
-				<fmt:message key="progress.email.title" var="PROGRESS_EMAIL_TITLE_VAR"/>
-				PROGRESS_EMAIL_TITLE : '<c:out value="${PROGRESS_EMAIL_TITLE_VAR}" />',
-				<fmt:message key="error.date.in.past" var="ERROR_DATE_IN_PAST_VAR"/>
-				ERROR_DATE_IN_PAST : '<c:out value="${ERROR_DATE_IN_PAST_VAR}" />',
-				<fmt:message key="label.lesson.starts" var="LESSON_START_VAR"><fmt:param value="%0"/></fmt:message>
-				LESSON_START : '<c:out value="${LESSON_START_VAR}"/>',
-				<fmt:message key="label.lesson.finishes" var="LESSON_FINISH_VAR"><fmt:param value="%0"/></fmt:message>
-				LESSON_FINISH : '<c:out value="${LESSON_FINISH_VAR}" />',
-				<fmt:message key="lesson.display.activity.scores.alert" var="LESSON_ACTIVITY_SCORES_ENABLE_ALERT_VAR"/>
-				LESSON_ACTIVITY_SCORES_ENABLE_ALERT : decoderDiv.html('<c:out value="${LESSON_ACTIVITY_SCORES_ENABLE_ALERT_VAR}" />').text(),
-				<fmt:message key="lesson.hide.activity.scores.alert" var="LESSON_ACTIVITY_SCORES_DISABLE_ALERT_VAR"/>
-				LESSON_ACTIVITY_SCORES_DISABLE_ALERT : decoderDiv.html('<c:out value="${LESSON_ACTIVITY_SCORES_DISABLE_ALERT_VAR}" />').text(),
-				<fmt:message key="label.reschedule" var="RESCHEDULE_VAR"/>
-				RESCHEDULE : decoderDiv.html('<c:out value="${RESCHEDULE_VAR}" />').text(),
-				<fmt:message key="error.lesson.end.date.must.be.after.start.date" var="LESSON_ERROR_START_END_DATE_VAR"/>
-				LESSON_ERROR_START_END_DATE : decoderDiv.html('<c:out value="${LESSON_ERROR_START_END_DATE_VAR}" />').text(),
-				<fmt:message key="button.live.edit" var="LIVE_EDIT_BUTTON_VAR"/>
-				LIVE_EDIT_BUTTON: '<c:out value="${LIVE_EDIT_BUTTON_VAR}" />',
-				<fmt:message key="button.live.edit.tooltip" var="LIVE_EDIT_TOOLTIP_VAR"/>
-				LIVE_EDIT_TOOLTIP: '<c:out value="${LIVE_EDIT_TOOLTIP_VAR}" />',
-				<fmt:message key="label.person.editing.lesson" var="LIVE_EDIT_WARNING_VAR"><fmt:param value="%0"/></fmt:message>
-				LIVE_EDIT_WARNING: '<c:out value="${LIVE_EDIT_WARNING_VAR}" />'
-			};
-			
-		<c:if test="${jqGridInternationalised}">
+		<link rel="icon" type="image/x-icon" href="<lams:LAMSURL/>images/svg/lamsv5_logo.svg">
+		<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme5.css">
+		<link rel="stylesheet" href="<lams:LAMSURL/>css/bootstrap5.custom.css">
+		<link rel="stylesheet" href="<lams:LAMSURL/>includes/font-awesome6/css/all.css">
+		<link rel="stylesheet" href="<lams:LAMSURL/>css/vertical-timeline.css">
+		<link rel="stylesheet" href="<lams:LAMSURL/>css/x-editable.css">
+		<link rel="stylesheet" href="<lams:LAMSURL/>css/free.ui.jqgrid.min.css">
+		<link rel="stylesheet" href="<lams:LAMSURL/>css/free.ui.jqgrid.custom.css">
+		<link rel="stylesheet" href="<lams:LAMSURL/>css/tempus-dominus.min.css">
+		<link rel="stylesheet" href="<lams:LAMSURL/>gradebook/includes/css/gradebook.css" />
+		<link rel="stylesheet" href="<lams:LAMSURL/>css/components.css">
+		<link rel="stylesheet" href="<lams:WebAppURL/>css/components-monitoring.css">
+
+		<lams:css suffix="chart"/>
+
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.plugin.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.countdown.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.cookie.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.timeago.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/timeagoi18n/jquery.timeago.${fn:toLowerCase(localeLanguage)}.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/popper.min.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/x-editable.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/d3.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/chart.bundle.min.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/chart.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/free.jquery.jqgrid.min.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/tempus-dominus.min.js"></script>
+
+		<c:choose>
+			<c:when test="${localeLanguage eq 'es'}">
+				<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jqgrid-i18n/grid.locale-es.js"></script>
+				<c:set var="jqGridInternationalised" value="true" />
+			</c:when>
+			<c:when test="${localeLanguage eq 'fr'}">
+				<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jqgrid-i18n/grid.locale-fr.js"></script>
+				<c:set var="jqGridInternationalised" value="true" />
+			</c:when>
+			<c:when test="${localeLanguage eq 'el'}">
+				<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jqgrid-i18n/grid.locale-el.js"></script>
+				<c:set var="jqGridInternationalised" value="true" />
+			</c:when>
+			<c:when test="${localeLanguage eq 'no'}">
+				<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jqgrid-i18n/grid.locale-no.js"></script>
+				<c:set var="jqGridInternationalised" value="true" />
+			</c:when>
+		</c:choose>
+
+		<lams:JSImport src="includes/javascript/common.js" />
+		<lams:JSImport src="includes/javascript/download.js" />
+		<lams:JSImport src="includes/javascript/portrait5.js" />
+		<lams:JSImport src="includes/javascript/dialog5.js" />
+		<lams:JSImport src="includes/javascript/monitorLesson.js" relative="true" />
+
+
+		<script type="text/javascript">
+			var lessonId = ${lesson.lessonID},
+					userId = '<lams:user property="userID"/>',
+					ldId = ${lesson.learningDesignID},
+					lessonStateId = ${lesson.lessonStateID},
+					createDateTimeStr = '${lesson.createDateTimeStr}',
+					lessonStartDate = '${lesson.scheduleStartDate}',
+					lessonEndDate = '${lesson.scheduleEndDate}',
+					liveEditEnabled = ${enableLiveEdit && lesson.liveEditEnabled},
+					TOTAL_LESSON_LEARNERS_NUMBER = ${lesson.numberPossibleLearners},
+
+					iraToolContentId = '${iraToolContentId}',
+					traToolContentId = '${traToolContentId}',
+					aeToolContentIds = "${aeToolContentIds}",
+					aeToolTypes = "${aeToolTypes}",
+					aeActivityTitles = "${aeActivityTitles}",
+					peerreviewToolContentId = "${peerreviewToolContentId}",
+
+					LAMS_URL = '<lams:LAMSURL/>',
+					csrfToken = '<csrf:tokenname/> : <csrf:tokenvalue/>',
+					csrfTokenName = '<csrf:tokenname/>',
+					csrfTokenValue = '<csrf:tokenvalue/>',
+
+					decoderDiv = $('<div />'),
+					LABELS = {
+						<fmt:message key="index.emailnotifications" var="EMAIL_NOTIFICATIONS_TITLE_VAR"/>
+						EMAIL_NOTIFICATIONS_TITLE : '<c:out value="${EMAIL_NOTIFICATIONS_TITLE_VAR}" />',
+						<fmt:message key="force.complete.click" var="FORCE_COMPLETE_CLICK_VAR"/>
+						FORCE_COMPLETE_CLICK : decoderDiv.html('<c:out value="${FORCE_COMPLETE_CLICK_VAR}" />').text(),
+						<fmt:message key="button.force.complete" var="FORCE_COMPLETE_BUTTON_VAR"/>
+						FORCE_COMPLETE_BUTTON : '<c:out value="${FORCE_COMPLETE_BUTTON_VAR}" />',
+						<fmt:message key="force.complete.end.lesson.confirm" var="FORCE_COMPLETE_END_LESSON_CONFIRM_VAR"/>
+						FORCE_COMPLETE_END_LESSON_CONFIRM : decoderDiv.html('<c:out value="${FORCE_COMPLETE_END_LESSON_CONFIRM_VAR}" />').text(),
+						<fmt:message key="force.complete.activity.confirm" var="FORCE_COMPLETE_ACTIVITY_CONFIRM_VAR"/>
+						FORCE_COMPLETE_ACTIVITY_CONFIRM : decoderDiv.html('<c:out value="${FORCE_COMPLETE_ACTIVITY_CONFIRM_VAR}" />').text(),
+						<fmt:message key="force.complete.remove.content" var="FORCE_COMPLETE_REMOVE_CONTENT_VAR"/>
+						FORCE_COMPLETE_REMOVE_CONTENT : decoderDiv.html('<c:out value="${FORCE_COMPLETE_REMOVE_CONTENT_VAR}" />').text(),
+						<fmt:message key="force.complete.drop.fail" var="FORCE_COMPLETE_DROP_FAIL_VAR"/>
+						FORCE_COMPLETE_DROP_FAIL : '<c:out value="${FORCE_COMPLETE_DROP_FAIL_VAR}" />',
+						<fmt:message key="learner.group.count" var="LEARNER_GROUP_COUNT_VAR"/>
+						LEARNER_GROUP_COUNT : '<c:out value="${LEARNER_GROUP_COUNT_VAR}" />',
+						<fmt:message key="learner.group.show" var="LEARNER_GROUP_SHOW_VAR"/>
+						LEARNER_GROUP_SHOW : '<c:out value="${LEARNER_GROUP_SHOW_VAR}" />',
+						<fmt:message key="learner.group.remove.progress" var="LEARNER_GROUP_REMOVE_PROGRESS_VAR"/>
+						LEARNER_GROUP_REMOVE_PROGRESS : decoderDiv.html('<c:out value="${LEARNER_GROUP_REMOVE_PROGRESS_VAR}" />').text(),
+						<fmt:message key="button.email" var="EMAIL_BUTTON_VAR"/>
+						EMAIL_BUTTON : '<c:out value="${EMAIL_BUTTON_VAR}" />',
+						<fmt:message key="email.notifications" var="NOTIFCATIONS_VAR"/>
+						NOTIFCATIONS : '<c:out value="${NOTIFCATIONS_VAR}" />',
+						<fmt:message key="button.save" var="SAVE_BUTTON_VAR"/>
+						SAVE_BUTTON : '<c:out value="${SAVE_BUTTON_VAR}" />',
+						<fmt:message key="button.cancel" var="CANCEL_BUTTON_VAR"/>
+						CANCEL_BUTTON : '<c:out value="${CANCEL_BUTTON_VAR}" />',
+						<fmt:message key="learner.finished.dialog.title" var="LEARNER_FINISHED_DIALOG_TITLE_VAR"/>
+						LEARNER_FINISHED_DIALOG_TITLE : '<c:out value="${LEARNER_FINISHED_DIALOG_TITLE_VAR}" />',
+						<fmt:message key="lesson.enable.presence.alert" var="LESSON_PRESENCE_ENABLE_ALERT_VAR"/>
+						LESSON_PRESENCE_ENABLE_ALERT : decoderDiv.html('<c:out value="${LESSON_PRESENCE_ENABLE_ALERT_VAR}" />').text(),
+						<fmt:message key="lesson.disable.presence.alert" var="LESSON_PRESENCE_DISABLE_ALERT_VAR"/>
+						LESSON_PRESENCE_DISABLE_ALERT : decoderDiv.html('<c:out value="${LESSON_PRESENCE_DISABLE_ALERT_VAR}" />').text(),
+						<fmt:message key="lesson.enable.im.alert" var="LESSON_IM_ENABLE_ALERT_VAR"/>
+						LESSON_IM_ENABLE_ALERT : decoderDiv.html('<c:out value="${LESSON_IM_ENABLE_ALERT_VAR}" />').text(),
+						<fmt:message key="lesson.disable.im.alert" var="LESSON_IM_DISABLE_ALERT_VAR"/>
+						LESSON_IM_DISABLE_ALERT : decoderDiv.html('<c:out value="${LESSON_IM_DISABLE_ALERT_VAR}" />').text(),
+						<fmt:message key="lesson.remove.alert" var="LESSON_REMOVE_ALERT_VAR"/>
+						LESSON_REMOVE_ALERT : decoderDiv.html('<c:out value="${LESSON_REMOVE_ALERT_VAR}" />').text(),
+						<fmt:message key="lesson.remove.doublecheck.alert" var="LESSON_REMOVE_DOUBLECHECK_ALERT_VAR"/>
+						LESSON_REMOVE_DOUBLECHECK_ALERT : decoderDiv.html('<c:out value="${LESSON_REMOVE_DOUBLECHECK_ALERT_VAR}" />').text(),
+						<fmt:message key="lesson.state.created" var="LESSON_STATE_CREATED_VAR"/>
+						LESSON_STATE_CREATED : '<c:out value="${LESSON_STATE_CREATED_VAR}" />',
+						<fmt:message key="lesson.state.scheduled" var="LESSON_STATE_SCHEDULED_VAR"/>
+						LESSON_STATE_SCHEDULED : '<c:out value="${LESSON_STATE_SCHEDULED_VAR}" />',
+						<fmt:message key="lesson.state.started" var="LESSON_STATE_STARTED_VAR"/>
+						LESSON_STATE_STARTED : '<c:out value="${LESSON_STATE_STARTED_VAR}" />',
+						<fmt:message key="lesson.state.suspended" var="LESSON_STATE_SUSPENDED_VAR"/>
+						LESSON_STATE_SUSPENDED : '<c:out value="${LESSON_STATE_SUSPENDED_VAR}" />',
+						<fmt:message key="lesson.state.finished" var="LESSON_STATE_FINISHED_VAR"/>
+						LESSON_STATE_FINISHED : '<c:out value="${LESSON_STATE_FINISHED_VAR}" />',
+						<fmt:message key="lesson.state.archived" var="LESSON_STATE_ARCHIVED_VAR"/>
+						LESSON_STATE_ARCHIVED : '<c:out value="${LESSON_STATE_ARCHIVED_VAR}" />',
+						<fmt:message key="lesson.state.removed" var="LESSON_STATE_REMOVED_VAR"/>
+						LESSON_STATE_REMOVED : '<c:out value="${LESSON_STATE_REMOVED_VAR}" />',
+						<fmt:message key="lesson.state.action.disable" var="LESSON_STATE_ACTION_DISABLE_VAR"/>
+						LESSON_STATE_ACTION_DISABLE : '<c:out value="${LESSON_STATE_ACTION_DISABLE_VAR}" />',
+						<fmt:message key="lesson.state.action.activate" var="LESSON_STATE_ACTION_ACTIVATE_VAR"/>
+						LESSON_STATE_ACTION_ACTIVATE : '<c:out value="${LESSON_STATE_ACTION_ACTIVATE_VAR}" />',
+						<fmt:message key="lesson.state.action.remove" var="LESSON_STATE_ACTION_REMOVE_VAR"/>
+						LESSON_STATE_ACTION_REMOVE : '<c:out value="${LESSON_STATE_ACTION_REMOVE_VAR}" />',
+						<fmt:message key="lesson.state.action.archive" var="LESSON_STATE_ACTION_ARCHIVE_VAR"/>
+						LESSON_STATE_ACTION_ARCHIVE : '<c:out value="${LESSON_STATE_ACTION_ARCHIVE_VAR}" />',
+						<fmt:message key="error.lesson.schedule.date" var="LESSON_ERROR_SCHEDULE_DATE_VAR"/>
+						LESSON_ERROR_SCHEDULE_DATE : decoderDiv.html('<c:out value="${LESSON_ERROR_SCHEDULE_DATE_VAR}" />').text(),
+						<fmt:message key="button.edit.class" var="LESSON_EDIT_CLASS_VAR"/>
+						LESSON_EDIT_CLASS : '<c:out value="${LESSON_EDIT_CLASS_VAR}" />',
+						<fmt:message key="class.add.all.confirm" var="CLASS_ADD_ALL_CONFIRM_VAR"/>
+						CLASS_ADD_ALL_CONFIRM : '<c:out value="${CLASS_ADD_ALL_CONFIRM_VAR}" />',
+						<fmt:message key="class.add.all.success" var="CLASS_ADD_ALL_SUCCESS_VAR"/>
+						CLASS_ADD_ALL_SUCCESS : '<c:out value="${CLASS_ADD_ALL_SUCCESS_VAR}" />',
+						<fmt:message key="lesson.group.dialog.class" var="LESSON_GROUP_DIALOG_CLASS_VAR"/>
+						LESSON_GROUP_DIALOG_CLASS : '<c:out value="${LESSON_GROUP_DIALOG_CLASS_VAR}" />',
+						<fmt:message key="label.learner.progress.activity.current.tooltip" var="CURRENT_ACTIVITY_VAR"/>
+						CURRENT_ACTIVITY : '<c:out value="${CURRENT_ACTIVITY_VAR}" />',
+						<fmt:message key="label.learner.progress.activity.completed.tooltip" var="COMPLETED_ACTIVITY_VAR"/>
+						COMPLETED_ACTIVITY : '<c:out value="${COMPLETED_ACTIVITY_VAR}" />',
+						<fmt:message key="label.learner.progress.activity.attempted.tooltip" var="ATTEMPTED_ACTIVITY_VAR"/>
+						ATTEMPTED_ACTIVITY : '<c:out value="${ATTEMPTED_ACTIVITY_VAR}" />',
+						<fmt:message key="label.learner.progress.activity.tostart.tooltip" var="TOSTART_ACTIVITY_VAR"/>
+						TOSTART_ACTIVITY : '<c:out value="${TOSTART_ACTIVITY_VAR}" />',
+						<fmt:message key="label.learner.progress.activity.support.tooltip" var="SUPPORT_ACTIVITY_VAR"/>
+						SUPPORT_ACTIVITY : '<c:out value="${SUPPORT_ACTIVITY_VAR}" />',
+						<fmt:message key="label.learner.progress.not.started" var="PROGRESS_NOT_STARTED_VAR"/>
+						PROGRESS_NOT_STARTED : '<c:out value="${PROGRESS_NOT_STARTED_VAR}" />',
+						<fmt:message key="button.timechart" var="TIME_CHART_VAR"/>
+						TIME_CHART : '<c:out value="${TIME_CHART_VAR}" />',
+						<fmt:message key="button.timechart.tooltip" var="TIME_CHART_TOOLTIP_VAR"/>
+						TIME_CHART_TOOLTIP : '<c:out value="${TIME_CHART_TOOLTIP_VAR}" />',
+						<fmt:message key="button.live.edit.confirm" var="LIVE_EDIT_CONFIRM_VAR"/>
+						LIVE_EDIT_CONFIRM : decoderDiv.html('<c:out value="${LIVE_EDIT_CONFIRM_VAR}" />').text(),
+						<fmt:message key="lesson.task.gate" var="CONTRIBUTE_GATE_VAR"/>
+						CONTRIBUTE_GATE : '<c:out value="${CONTRIBUTE_GATE_VAR}" />',
+						<fmt:message key="lesson.task.gate.password" var="CONTRIBUTE_GATE_PASSWORD_VAR"/>
+						CONTRIBUTE_GATE_PASSWORD : '<c:out value="${CONTRIBUTE_GATE_PASSWORD_VAR}" />',
+						<fmt:message key="lesson.task.grouping" var="CONTRIBUTE_GROUPING_VAR"/>
+						CONTRIBUTE_GROUPING : '<c:out value="${CONTRIBUTE_GROUPING_VAR}" />',
+						<fmt:message key="lesson.task.branching" var="CONTRIBUTE_BRANCHING_VAR"/>
+						CONTRIBUTE_BRANCHING : '<c:out value="${CONTRIBUTE_BRANCHING_VAR}" />',
+						<fmt:message key="lesson.task.content.edited" var="CONTRIBUTE_CONTENT_EDITED_VAR"/>
+						CONTRIBUTE_CONTENT_EDITED : '<c:out value="${CONTRIBUTE_CONTENT_EDITED_VAR}" />',
+						<fmt:message key="lesson.task.tool" var="CONTRIBUTE_TOOL_VAR"/>
+						CONTRIBUTE_TOOL : '<c:out value="${CONTRIBUTE_TOOL_VAR}" />',
+						<fmt:message key="button.task.go.tooltip" var="CONTRIBUTE_TOOLTIP_VAR"/>
+						CONTRIBUTE_TOOLTIP : '<c:out value="${CONTRIBUTE_TOOLTIP_VAR}" />',
+						<fmt:message key="button.task.go" var="CONTRIBUTE_BUTTON_VAR"/>
+						CONTRIBUTE_BUTTON : '<c:out value="${CONTRIBUTE_BUTTON_VAR}" />',
+						<fmt:message key="button.task.gate.open.now" var="CONTRIBUTE_OPEN_GATE_NOW_BUTTON_VAR"/>
+						CONTRIBUTE_OPEN_GATE_NOW_BUTTON : '<c:out value="${CONTRIBUTE_OPEN_GATE_NOW_BUTTON_VAR}" />',
+						<fmt:message key="button.task.gate.open.now.tooltip" var="CONTRIBUTE_OPEN_GATE_NOW_TOOLTIP_VAR"/>
+						CONTRIBUTE_OPEN_GATE_NOW_TOOLTIP : '<c:out value="${CONTRIBUTE_OPEN_GATE_NOW_TOOLTIP_VAR}" />',
+						<fmt:message key="button.task.gate.open" var="CONTRIBUTE_OPEN_GATE_BUTTON_VAR"/>
+						CONTRIBUTE_OPEN_GATE_BUTTON : '<c:out value="${CONTRIBUTE_OPEN_GATE_BUTTON_VAR}" />',
+						<fmt:message key="button.task.gate.open.tooltip" var="CONTRIBUTE_OPEN_GATE_TOOLTIP_VAR"/>
+						CONTRIBUTE_OPEN_GATE_TOOLTIP : '<c:out value="${CONTRIBUTE_OPEN_GATE_TOOLTIP_VAR}" />',
+						<fmt:message key="button.task.gate.opened" var="CONTRIBUTE_OPENED_GATE_VAR"/>
+						CONTRIBUTE_OPENED_GATE : '<c:out value="${CONTRIBUTE_OPENED_GATE_VAR}" />',
+						<fmt:message key="button.task.gate.opened.tooltip" var="CONTRIBUTE_OPENED_GATE_TOOLTIP_VAR"/>
+						CONTRIBUTE_OPENED_GATE_TOOLTIP : '<c:out value="${CONTRIBUTE_OPENED_GATE_TOOLTIP_VAR}" />',
+						<fmt:message key="lesson.task.attention" var="CONTRIBUTE_ATTENTION_VAR"/>
+						CONTRIBUTE_ATTENTION : '<c:out value="${CONTRIBUTE_ATTENTION_VAR}" />',
+						<fmt:message key="button.help" var="BUTTON_HELP_VAR"/>
+						HELP : '<c:out value="${BUTTON_HELP_VAR}" />',
+						<fmt:message key="label.lesson.introduction" var="LESSON_INTRODUCTION_VAR"/>
+						LESSON_INTRODUCTION : '<c:out value="${LESSON_INTRODUCTION_VAR}" />',
+						<fmt:message key="label.email" var="EMAIL_TITLE_VAR"/>
+						EMAIL_TITLE : '<c:out value="${EMAIL_TITLE_VAR}" />',
+						<fmt:message key="tour.this.is.disabled" var="TOUR_DISABLED_ELEMENT_VAR"/>
+						TOUR_DISABLED_ELEMENT : '<c:out value="${TOUR_DISABLED_ELEMENT_VAR}" />',
+						<fmt:message key="progress.email.sent.success" var="PROGRESS_EMAIL_SUCCESS_VAR"/>
+						PROGRESS_EMAIL_SUCCESS : '<c:out value="${PROGRESS_EMAIL_SUCCESS_VAR}" />',
+						<fmt:message key="progress.email.send.now.question" var="PROGRESS_EMAIL_SEND_NOW_QUESTION_VAR"/>
+						PROGRESS_EMAIL_SEND_NOW_QUESTION : '<c:out value="${PROGRESS_EMAIL_SEND_NOW_QUESTION_VAR}" />',
+						<fmt:message key="progress.email.send.failed" var="PROGRESS_EMAIL_SEND_FAILED_VAR"/>
+						PROGRESS_EMAIL_SEND_FAILED : '<c:out value="${PROGRESS_EMAIL_SEND_FAILED_VAR}" />',
+						<fmt:message key="progress.email.select.date.first" var="PROGRESS_EMAIL_SELECT_DATE_FIRST_VAR"/>
+						PROGRESS_SELECT_DATE_FIRST : '<c:out value="${PROGRESS_EMAIL_SELECT_DATE_FIRST_VAR}" />',
+						<fmt:message key="progress.email.enter.two.dates.first" var="PROGRESS_EMAIL_ENTER_TWO_DATES_FIRST_VAR"/>
+						PROGRESS_ENTER_TWO_DATES_FIRST : '<c:out value="${PROGRESS_EMAIL_ENTER_TWO_DATES_FIRST_VAR}" />',
+						<fmt:message key="progress.email.would.you.like.to.generate" var="PROGRESS_EMAIL_GENERATE_ONE_VAR"/>
+						PROGRESS_EMAIL_GENERATE_ONE : '<c:out value="${PROGRESS_EMAIL_GENERATE_ONE_VAR}" />',
+						<fmt:message key="progress.email.how.many.dates.to.generate" var="PROGRESS_EMAIL_GENERATE_TWO_VAR"/>
+						PROGRESS_EMAIL_GENERATE_TWO : '<c:out value="${PROGRESS_EMAIL_GENERATE_TWO_VAR}" />',
+						<fmt:message key="progress.email.title" var="PROGRESS_EMAIL_TITLE_VAR"/>
+						PROGRESS_EMAIL_TITLE : '<c:out value="${PROGRESS_EMAIL_TITLE_VAR}" />',
+						<fmt:message key="error.date.in.past" var="ERROR_DATE_IN_PAST_VAR"/>
+						ERROR_DATE_IN_PAST : '<c:out value="${ERROR_DATE_IN_PAST_VAR}" />',
+						<fmt:message key="label.lesson.starts" var="LESSON_START_VAR"><fmt:param value="%0"/></fmt:message>
+						LESSON_START : '<c:out value="${LESSON_START_VAR}"/>',
+						<fmt:message key="label.lesson.finishes" var="LESSON_FINISH_VAR"><fmt:param value="%0"/></fmt:message>
+						LESSON_FINISH : '<c:out value="${LESSON_FINISH_VAR}" />',
+						<fmt:message key="lesson.display.activity.scores.alert" var="LESSON_ACTIVITY_SCORES_ENABLE_ALERT_VAR"/>
+						LESSON_ACTIVITY_SCORES_ENABLE_ALERT : decoderDiv.html('<c:out value="${LESSON_ACTIVITY_SCORES_ENABLE_ALERT_VAR}" />').text(),
+						<fmt:message key="lesson.hide.activity.scores.alert" var="LESSON_ACTIVITY_SCORES_DISABLE_ALERT_VAR"/>
+						LESSON_ACTIVITY_SCORES_DISABLE_ALERT : decoderDiv.html('<c:out value="${LESSON_ACTIVITY_SCORES_DISABLE_ALERT_VAR}" />').text(),
+						<fmt:message key="label.reschedule" var="RESCHEDULE_VAR"/>
+						RESCHEDULE : decoderDiv.html('<c:out value="${RESCHEDULE_VAR}" />').text(),
+						<fmt:message key="error.lesson.end.date.must.be.after.start.date" var="LESSON_ERROR_START_END_DATE_VAR"/>
+						LESSON_ERROR_START_END_DATE : decoderDiv.html('<c:out value="${LESSON_ERROR_START_END_DATE_VAR}" />').text(),
+						<fmt:message key="button.live.edit" var="LIVE_EDIT_BUTTON_VAR"/>
+						LIVE_EDIT_BUTTON: '<c:out value="${LIVE_EDIT_BUTTON_VAR}" />',
+						<fmt:message key="button.live.edit.tooltip" var="LIVE_EDIT_TOOLTIP_VAR"/>
+						LIVE_EDIT_TOOLTIP: '<c:out value="${LIVE_EDIT_TOOLTIP_VAR}" />',
+						<fmt:message key="label.person.editing.lesson" var="LIVE_EDIT_WARNING_VAR"><fmt:param value="%0"/></fmt:message>
+						LIVE_EDIT_WARNING: '<c:out value="${LIVE_EDIT_WARNING_VAR}" />'
+					};
+
+			<c:if test="${jqGridInternationalised}">
 			$.extend(true, $.jgrid,$.jgrid.regional['${language}']);
-		</c:if>
-	</script>
-	
-</head>
-<body class="component">
-<div class="component-page-wrapper monitoring-page-wrapper ">
-	<div class="component-sidebar active">
-		<a href="/" title="<fmt:message key='label.monitoring.return.to.index' />" class="lams-logo">
-			<img src="<lams:LAMSURL/>images/svg/lamsv5_logo.svg" alt="<fmt:message key='label.monitoring.logo' />" />
-		</a>
-		
-		<div class="component-menu">
-			<div class="component-menu-btn d-flex flex-column align-items-center">
-				<div class="navigate-btn-container">
-					<a id="load-sequence-tab-btn" href="#" class="btn btn-primary active"
-					   data-tab-name="sequence"	title="<fmt:message key='tab.dashboard' />">
-						<i class="fa fa-cubes fa-lg"></i>
-					</a>
-					<label for="load-sequence-tab-btn" class="d-none d-md-block">
-						<fmt:message key='tab.dashboard' />
-					</label>
-				</div>
-				
-				<c:if test="${isTBLSequence}">
+			</c:if>
+		</script>
+
+	</head>
+	<body class="component">
+	<div class="component-page-wrapper monitoring-page-wrapper ">
+		<div class="component-sidebar active">
+			<a href="/" title="<fmt:message key='label.monitoring.return.to.index' />" class="lams-logo">
+				<img src="<lams:LAMSURL/>images/svg/lamsv5_logo.svg" alt="<fmt:message key='label.monitoring.logo' />" />
+			</a>
+
+			<div class="component-menu">
+				<div class="component-menu-btn d-flex flex-column align-items-center">
 					<div class="navigate-btn-container">
-						<a id="load-teams-tab-btn" class="btn btn-primary" href="#"
-						   data-tab-name="teams" title="<fmt:message key='label.teams' />">
-							<i class="fa fa-people-group fa-lg"></i>
+						<a id="load-sequence-tab-btn" href="#" class="btn btn-primary active"
+						   data-tab-name="sequence"	title="<fmt:message key='tab.dashboard' />">
+							<i class="fa fa-cubes fa-lg"></i>
 						</a>
-						<label for="load-teams-tab-btn" class="d-none d-md-block">
-							<fmt:message key='label.teams' />
+						<label for="load-sequence-tab-btn" class="d-none d-md-block">
+							<fmt:message key='tab.dashboard' />
 						</label>
 					</div>
-					
-					<c:if test="${not empty isIraAvailable}">
+
+					<c:if test="${isTBLSequence}">
 						<div class="navigate-btn-container">
-							<a id="load-irat-tab-btn" class="btn btn-primary" href="#"
-							   data-tab-name="iratStudentChoices"	title="<fmt:message key='label.ira' />">
-								<i class="fa fa-user fa-lg"></i>
+							<a id="load-teams-tab-btn" class="btn btn-primary" href="#"
+							   data-tab-name="teams" title="<fmt:message key='label.teams' />">
+								<i class="fa fa-people-group fa-lg"></i>
 							</a>
-							
-							<label for="load-irat-tab-btn" class="d-none d-md-block">
-								<fmt:message key='label.ira' />
+							<label for="load-teams-tab-btn" class="d-none d-md-block">
+								<fmt:message key='label.teams' />
 							</label>
 						</div>
-					</c:if>
-					
-					<c:if test="${not empty isScratchieAvailable}">
-						<div class="navigate-btn-container">
-							<a id="load-trat-tab-btn" class="btn btn-primary" href="#"
+
+						<c:if test="${not empty isIraAvailable}">
+							<div class="navigate-btn-container">
+								<a id="load-irat-tab-btn" class="btn btn-primary" href="#"
+								   data-tab-name="iratStudentChoices"	title="<fmt:message key='label.ira' />">
+									<i class="fa fa-user fa-lg"></i>
+								</a>
+
+								<label for="load-irat-tab-btn" class="d-none d-md-block">
+									<fmt:message key='label.ira' />
+								</label>
+							</div>
+						</c:if>
+
+						<c:if test="${not empty isScratchieAvailable}">
+							<div class="navigate-btn-container">
+								<a id="load-trat-tab-btn" class="btn btn-primary" href="#"
 								   data-tab-name="tratStudentChoices" title="<fmt:message key='label.tra' />">
-								<i class="fa fa-users fa-lg"></i>
-							</a>
-							
-							<label for="load-trat-tab-btn" class="d-none d-md-block">
-								<fmt:message key='label.tra' />
-							</label>
-						</div>
-						
-						<c:if test="${burningQuestionsEnabled}">
+									<i class="fa fa-users fa-lg"></i>
+								</a>
+
+								<label for="load-trat-tab-btn" class="d-none d-md-block">
+									<fmt:message key='label.tra' />
+								</label>
+							</div>
+
+							<c:if test="${burningQuestionsEnabled}">
+								<div class="navigate-btn-container">
+									<a id="load-burning-tab-btn" class="btn btn-primary" href="#"
+									   data-tab-name="burningQuestions" title="<fmt:message key='label.monitoring.burning.questions' />">
+										<i class="fa fa-question-circle fa-lg"></i>
+									</a>
+									<label for="load-burning-tab-btn" class="d-none d-md-block">
+										<fmt:message key='label.monitoring.burning.questions' />
+									</label>
+								</div>
+							</c:if>
+						</c:if>
+
+						<c:if test="${not empty isAeAvailable}">
 							<div class="navigate-btn-container">
-								<a id="load-burning-tab-btn" class="btn btn-primary" href="#"
-								   data-tab-name="burningQuestions" title="<fmt:message key='label.monitoring.burning.questions' />">
-									<i class="fa fa-question-circle fa-lg"></i>
+								<a id="load-aes-tab-btn" class="btn btn-primary" href="#"
+								   data-tab-name="aes" title="<fmt:message key='label.aes' />">
+									<i class="fa fa-dashboard fa-lg"></i>
 								</a>
-								<label for="load-burning-tab-btn" class="d-none d-md-block">
-									<fmt:message key='label.monitoring.burning.questions' />
+								<label for="load-aes-tab-btn" class="d-none d-md-block">
+									<fmt:message key='label.aes' />
 								</label>
 							</div>
 						</c:if>
+
+						<c:if test="${not empty isPeerreviewAvailable}">
+							<div class="navigate-btn-container">
+								<a id="load-peer-review-tab-btn" class="btn btn-primary" href="#"
+								   data-tab-name="peerReview" title="<fmt:message key='label.peer.review' />">
+									<i class="fa fa-person-circle-question fa-lg"></i>
+								</a>
+								<label for="load-aes-tab-btn" class="d-none d-md-block">
+									<fmt:message key='label.peer.review' />
+								</label>
+							</div>
+						</c:if>
 					</c:if>
-					
-					<c:if test="${not empty isAeAvailable}">
-						<div class="navigate-btn-container">
-							<a id="load-aes-tab-btn" class="btn btn-primary" href="#"
-							   data-tab-name="aes" title="<fmt:message key='label.aes' />">
-								<i class="fa fa-dashboard fa-lg"></i>
-							</a>
-							<label for="load-aes-tab-btn" class="d-none d-md-block">
-								<fmt:message key='label.aes' />
-							</label>
-						</div>
-					</c:if>
-					
-					<c:if test="${not empty isPeerreviewAvailable}">
-						<div class="navigate-btn-container">
-							<a id="load-peer-review-tab-btn" class="btn btn-primary" href="#"
-							   data-tab-name="peerReview" title="<fmt:message key='label.peer.review' />">
-								<i class="fa fa-person-circle-question fa-lg"></i>
-							</a>
-							<label for="load-aes-tab-btn" class="d-none d-md-block">
-								<fmt:message key='label.peer.review' />
-							</label>
-						</div>
-					</c:if>
-				</c:if>
-				
-				<div class="navigate-btn-container">
-					<a id="load-learners-tab-btn" href="#" class="btn btn-primary" 
-					   data-tab-name="learners"	title="<fmt:message key='tab.learners' />">
-						<i class="fa fa-solid fa-users fa-lg"></i>
-					</a>
-					<label for="load-learners-tab-btn" class="d-none d-md-block">
-						<fmt:message key='tab.learners' />
-					</label>
+
+					<div class="navigate-btn-container">
+						<a id="load-learners-tab-btn" href="#" class="btn btn-primary"
+						   data-tab-name="learners"	title="<fmt:message key='tab.learners' />">
+							<i class="fa fa-solid fa-users fa-lg"></i>
+						</a>
+						<label for="load-learners-tab-btn" class="d-none d-md-block">
+							<fmt:message key='tab.learners' />
+						</label>
+					</div>
+
+					<div class="navigate-btn-container">
+						<a id="load-gradebook-tab-btn" href="#" class="btn btn-primary"
+						   data-tab-name="gradebook" title="<fmt:message key='tab.gradebook' />">
+							<i class="fa fa-solid fa-list-ol fa-lg"></i>
+						</a>
+						<label for="load-gradebook-tab-btn" class="d-none d-md-block">
+							<fmt:message key='tab.gradebook' />
+						</label>
+					</div>
+
+					<div class="navigate-btn-container">
+						<a id="edit-lesson-btn" class="btn btn-primary" href="#" title="<fmt:message key='label.monitoring.edit.lesson.settings' />">
+							<i class="fa fa-pen fa-lg"></i>
+						</a>
+						<label for="edit-lesson-btn" class="d-none d-md-block">
+							<fmt:message key='label.monitoring.edit' />
+						</label>
+					</div>
+
 				</div>
-				
-				<div class="navigate-btn-container">
-					<a id="load-gradebook-tab-btn" href="#" class="btn btn-primary"
-					   data-tab-name="gradebook" title="<fmt:message key='tab.gradebook' />">
-						<i class="fa fa-solid fa-list-ol fa-lg"></i>
-					</a>
-					<label for="load-gradebook-tab-btn" class="d-none d-md-block">
-						<fmt:message key='tab.gradebook' />
-					</label>
-				</div>
-				
-				<div class="navigate-btn-container">
-					<a id="edit-lesson-btn" class="btn btn-primary" href="#" title="<fmt:message key='label.monitoring.edit.lesson.settings' />">
-						<i class="fa fa-pen fa-lg"></i>
-					</a>
-					<label for="edit-lesson-btn" class="d-none d-md-block">
-						<fmt:message key='label.monitoring.edit' />
-					</label>
-				</div>
-				
-			</div>
-			
-			<div class="lesson-properties">
-				<dl id="lessonDetails" class="dl-horizontal">
-					<c:if test="${ALLOW_DIRECT_LESSON_LAUNCH}">
-                        <dt class="text-muted mt-0"><small><fmt:message key="lesson.learner.url"/></small></dt>
-						<dd class="text-muted">
-                           <small id="lessonUrl" class="text-break">
-                           	<c:out value="${serverURL}r/${lesson.encodedLessonID}" escapeXml="true"/>
-                            <button id="lessonUrlCopyToClipboardButton" class="btn btn-primary btn-sm ms-2"
-                           		   onClick="javascript:copyLessonUrlToClipboard()"
-                           		   title='<fmt:message key="button.copy.lesson.url.tooltip"/>'>
-                           		<i class="fa-regular fa-clipboard"></i>
-                            </button>
-                            </small>
-						</dd>
-					</c:if>
-					
-					<dt><fmt:message key="lesson.state"/>
-					</dt>
-					<dd>
-						<button data-bs-toggle="collapse" data-bs-target="#changeState" id="lessonStateLabel" class="lessonManageField"></button>
-					  	<div style="display:inline-block;vertical-align: middle;"><span id="lessonStartDateSpan" class="lessonManageField loffset5"></span>
-					  	<span id="lessonFinishDateSpan" class="lessonManageField loffset5"></span></div>
-					  	 
-						<!--  Change lesson status or start/schedule start -->
-						<div class="collapse offset10" id="changeState">
-							<div id="lessonScheduler">
-								<form>
-									<div id="lessonStartApply">
-										<div class="form-group mt-2" >
-											<label for="scheduleDatetimeField" class="form-label"><fmt:message key="lesson.start"/></label>
-											<input class="lessonManageField form-control-sm" id="scheduleDatetimeField" type="text" autocomplete="nope" />
-										</div>
-										
-										<div class="mt-2">
-											<a id="scheduleLessonButton" class="btn btn-sm btn-default lessonManageField" href="#"
+
+				<div class="lesson-properties">
+					<dl id="lessonDetails" class="dl-horizontal">
+						<c:if test="${ALLOW_DIRECT_LESSON_LAUNCH}">
+							<dt class="text-muted mt-0"><small><fmt:message key="lesson.learner.url"/></small></dt>
+							<dd class="text-muted">
+								<small id="lessonUrl" class="text-break">
+									<c:out value="${serverURL}r/${lesson.encodedLessonID}" escapeXml="true"/>
+									<button id="lessonUrlCopyToClipboardButton" class="btn btn-primary btn-sm ms-2"
+											onClick="javascript:copyLessonUrlToClipboard()"
+											title='<fmt:message key="button.copy.lesson.url.tooltip"/>'>
+										<i class="fa-regular fa-clipboard"></i>
+									</button>
+								</small>
+							</dd>
+						</c:if>
+
+						<dt><fmt:message key="lesson.state"/>
+						</dt>
+						<dd>
+							<button data-bs-toggle="collapse" data-bs-target="#changeState" id="lessonStateLabel" class="lessonManageField"></button>
+							<div style="display:inline-block;vertical-align: middle;"><span id="lessonStartDateSpan" class="lessonManageField loffset5"></span>
+								<span id="lessonFinishDateSpan" class="lessonManageField loffset5"></span></div>
+
+							<!--  Change lesson status or start/schedule start -->
+							<div class="collapse offset10" id="changeState">
+								<div id="lessonScheduler">
+									<form>
+										<div id="lessonStartApply">
+											<div class="form-group mt-2" >
+												<label for="scheduleDatetimeField" class="form-label"><fmt:message key="lesson.start"/></label>
+												<input class="lessonManageField form-control-sm" id="scheduleDatetimeField" type="text" autocomplete="nope" />
+											</div>
+
+											<div class="mt-2">
+												<a id="scheduleLessonButton" class="btn btn-sm btn-default lessonManageField" href="#"
 												   onClick="javascript:scheduleLesson()"
 												   title='<fmt:message key="button.schedule.tooltip"/>'>
-											   <fmt:message key="button.schedule"/>
-											</a>
-											<a id="startLessonButton" class="btn btn-sm btn-secondary" href="#"
-													   onClick="javascript:startLesson()"
-													   title='<fmt:message key="button.start.now.tooltip"/>'>
-												   <fmt:message key="button.start.now"/>
-											</a>
+													<fmt:message key="button.schedule"/>
+												</a>
+												<a id="startLessonButton" class="btn btn-sm btn-secondary" href="#"
+												   onClick="javascript:startLesson()"
+												   title='<fmt:message key="button.start.now.tooltip"/>'>
+													<fmt:message key="button.start.now"/>
+												</a>
+											</div>
 										</div>
-									</div>
-									
-									<div id="lessonDisableApply">
-										<div class="form-group mt-2">
-											<label for="disableDatetimeField" class="form-label d-block"><fmt:message key="lesson.end"/></label>
-											<input class="lessonManageField form-control-sm" id="disableDatetimeField" type="text"/>
-										</div>
-										<div class="mt-2">
-											<a id="scheduleDisableLessonButton" class="btn btn-sm btn-secondary lessonManageField" href="#"
+
+										<div id="lessonDisableApply">
+											<div class="form-group mt-2">
+												<label for="disableDatetimeField" class="form-label d-block"><fmt:message key="lesson.end"/></label>
+												<input class="lessonManageField form-control-sm" id="disableDatetimeField" type="text"/>
+											</div>
+											<div class="mt-2">
+												<a id="scheduleDisableLessonButton" class="btn btn-sm btn-secondary lessonManageField" href="#"
 												   onClick="javascript:scheduleDisableLesson()"
 												   title='<fmt:message key="button.schedule.disable.tooltip"/>'>
-										   	<fmt:message key="button.schedule"/>
-											</a>
-											<a id="disableLessonButton" class="btn btn-sm btn-secondary" href="#"
+													<fmt:message key="button.schedule"/>
+												</a>
+												<a id="disableLessonButton" class="btn btn-sm btn-secondary" href="#"
 												   onClick="javascript:disableLesson()"
 												   title='<fmt:message key="button.disable.now.tooltip"/>'>
-											   <fmt:message key="button.disable.now"/>
-											</a>
+													<fmt:message key="button.disable.now"/>
+												</a>
+											</div>
 										</div>
-									</div>
-								</form>
-							</div>
-							
-							<div id="lessonStateChanger">
-								<select id="lessonStateField" class="form-select-sm mt-2" onchange="lessonStateFieldChanged()">
-									<option value="-1"><fmt:message key="lesson.select.state"/></option>
-								</select>
-								<span id="lessonStateApply">
+									</form>
+								</div>
+
+								<div id="lessonStateChanger">
+									<select id="lessonStateField" class="form-select-sm mt-2" onchange="lessonStateFieldChanged()">
+										<option value="-1"><fmt:message key="lesson.select.state"/></option>
+									</select>
+									<span id="lessonStateApply">
 									<button type="button" class="lessonManageField btn btn-sm btn-primary"
 											onClick="javascript:changeLessonState()"
 											title='<fmt:message key="lesson.change.state.tooltip"/>'>
 								   		<i class="fa fa-check"></i> 
 								   		<span class="hidden-xs"><fmt:message key="button.apply"/></span>
 							    	</button>
 							    </span>
-					    	</div>					
-						</div>
-					</dd>
-					
-					<!-- 
+								</div>
+							</div>
+						</dd>
+
+						<!--
 					<dt><fmt:message key="lesson.learners"/>:</dt>
 					<dd title='<fmt:message key="lesson.ratio.learners.tooltip"/>' id="learnersStartedPossibleCell"></dd>
 					 -->
-					 
-					<!--  lesson actions -->
-					<dt><fmt:message key="lesson.manage"/>:</dt>
-					<dd>
-						<div>
-							<button id="editLessonNameButton" class="btn btn-sm btn-primary"
-									type="button"
-									title='<fmt:message key="button.edit.lesson.name"/>'>
-								<i class="fa fa-pencil"></i>
-								<span class="hidden-xs"><fmt:message key="button.edit.lesson.name"/></span>
-							</button>
-							
-							<button id="liveEditButton" class="btn btn-sm btn-primary" style="display:none"
-									type="button" onClick="javascript:openLiveEdit()"
-									title='<fmt:message key='button.live.edit.tooltip'/>'>
-								<i class="fa fa-pen-to-square"></i>
-								<span class="hidden-xs"><fmt:message key='button.live.edit'/></span>
-							</button>
-							
-							<button id="viewLearnersButton" class="btn btn-sm btn-primary"
-									type="button" onClick="javascript:showLessonLearnersDialog()"
-									title='<fmt:message key="button.view.learners.tooltip"/>'>
-								<i class="fa fa-users"></i>
-								<span class="hidden-xs"><fmt:message key="button.view.learners"/></span>
-							</button>
-							
-							<button id="editClassButton" class="btn btn-sm btn-primary"
-									type="button" onClick="javascript:showClassDialog()"
-									title='<fmt:message key="button.edit.class.tooltip"/>'>
-								<i class="fa fa-user-times"></i>
-								<span class="hidden-xs"><fmt:message key="button.edit.class"/></span>
-							</button>
-							
-							<c:if test="${lesson.enabledLessonNotifications}">
-								<button id="notificationButton" class="btn btn-sm btn-primary"
-										type="button" onClick="javascript:showNotificationsDialog(null,${lesson.lessonID})">
-									<i class="fa fa-bullhorn"></i>
-									<span class="hidden-xs"><fmt:message key="email.notifications"/></span>
+
+						<!--  lesson actions -->
+						<dt><fmt:message key="lesson.manage"/>:</dt>
+						<dd>
+							<div>
+								<button id="editLessonNameButton" class="btn btn-sm btn-primary"
+										type="button"
+										title='<fmt:message key="button.edit.lesson.name"/>'>
+									<i class="fa fa-pencil"></i>
+									<span class="hidden-xs"><fmt:message key="button.edit.lesson.name"/></span>
 								</button>
-							</c:if>
 
-                            <a id="editTimerButton" class="btn btn-sm btn-primary"
-                                    type="button" href="<lams:LAMSURL/>monitoring/timer.jsp" target="_blank"
-                                    title='<fmt:message key="label.countdown.timer" />'>
-                                <i class="fa fa-hourglass-half"></i>
-                                <span class="hidden-xs"><fmt:message key="label.countdown.timer"/></span>
-                            </a>
-						</div>
-						
-						<div class="mt-2">
-							<c:if test="${lesson.enableLessonIntro}">
-								<button id="editIntroButton" class="btn btn-sm btn-primary"
-										type="button" onClick="javascript:showIntroductionDialog(${lesson.lessonID})">
-									<i class="fa fa-sm fa-info"></i>
-									<span class="hidden-xs"><fmt:message key="label.lesson.introduction"/></span>
+								<button id="liveEditButton" class="btn btn-sm btn-primary" style="display:none"
+										type="button" onClick="javascript:openLiveEdit()"
+										title='<fmt:message key='button.live.edit.tooltip'/>'>
+									<i class="fa fa-pen-to-square"></i>
+									<span class="hidden-xs"><fmt:message key='button.live.edit'/></span>
 								</button>
-							</c:if>			
-											   
-							<lams:Switch id="gradebookOnCompleteButton" checked="${lesson.gradebookOnComplete}"
-								labelKey="label.display.activity.scores" iconClass="fa fa-sm fa-list-ol" />
-						</div>
-					</dd>
 
-					<!-- IM & Presence -->
-					<dt><fmt:message key="lesson.im"/>:</dt>
-					<dd>
-						
-						<lams:Switch id="presenceButton" checked="${lesson.learnerPresenceAvailable}"
-							labelKey="lesson.presence" iconClass="fa fa-sm fa-wifi"	/>
-						
-						<!-- <span id="presenceCounter" class="badge">0</span> -->
-	
-						<div id="imButtonWrapper"
-							<c:if test="${not lesson.learnerPresenceAvailable}">
-								style="display: none"
-							</c:if>
+								<button id="viewLearnersButton" class="btn btn-sm btn-primary"
+										type="button" onClick="javascript:showLessonLearnersDialog()"
+										title='<fmt:message key="button.view.learners.tooltip"/>'>
+									<i class="fa fa-users"></i>
+									<span class="hidden-xs"><fmt:message key="button.view.learners"/></span>
+								</button>
+
+								<button id="editClassButton" class="btn btn-sm btn-primary"
+										type="button" onClick="javascript:showClassDialog()"
+										title='<fmt:message key="button.edit.class.tooltip"/>'>
+									<i class="fa fa-user-times"></i>
+									<span class="hidden-xs"><fmt:message key="button.edit.class"/></span>
+								</button>
+
+								<c:if test="${lesson.enabledLessonNotifications}">
+									<button id="notificationButton" class="btn btn-sm btn-primary"
+											type="button" onClick="javascript:showNotificationsDialog(null,${lesson.lessonID})">
+										<i class="fa fa-bullhorn"></i>
+										<span class="hidden-xs"><fmt:message key="email.notifications"/></span>
+									</button>
+								</c:if>
+
+								<a id="editTimerButton" class="btn btn-sm btn-primary"
+								   type="button" href="<lams:LAMSURL/>monitoring/timer.jsp" target="_blank"
+								   title='<fmt:message key="label.countdown.timer" />'>
+									<i class="fa fa-hourglass-half"></i>
+									<span class="hidden-xs"><fmt:message key="label.countdown.timer"/></span>
+								</a>
+							</div>
+
+							<div class="mt-2">
+								<c:if test="${lesson.enableLessonIntro}">
+									<button id="editIntroButton" class="btn btn-sm btn-primary"
+											type="button" onClick="javascript:showIntroductionDialog(${lesson.lessonID})">
+										<i class="fa fa-sm fa-info"></i>
+										<span class="hidden-xs"><fmt:message key="label.lesson.introduction"/></span>
+									</button>
+								</c:if>
+
+								<lams:Switch id="gradebookOnCompleteButton" checked="${lesson.gradebookOnComplete}"
+											 labelKey="label.display.activity.scores" iconClass="fa fa-sm fa-list-ol" />
+							</div>
+						</dd>
+
+						<!-- IM & Presence -->
+						<dt><fmt:message key="lesson.im"/>:</dt>
+						<dd>
+
+							<lams:Switch id="presenceButton" checked="${lesson.learnerPresenceAvailable}"
+										 labelKey="lesson.presence" iconClass="fa fa-sm fa-wifi"	/>
+
+							<!-- <span id="presenceCounter" class="badge">0</span> -->
+
+							<div id="imButtonWrapper"
+									<c:if test="${not lesson.learnerPresenceAvailable}">
+										style="display: none"
+									</c:if>
 							>
-							<lams:Switch id="imButton" checked="${lesson.learnerImAvailable}"
-								labelKey="lesson.im" iconClass="fa fa-sm fa-comments"	/>
-						</div>
-						
-						<button id="openImButton" class="btn btn-primary btn-sm"
-							<c:if test="${not lesson.learnerImAvailable}">
-								style="display: none"
-							</c:if>
-						><i class="fa fa-sm fa-comments"></i>
-						 <span class="hidden-xs"><fmt:message key="button.open.im"/></span> 
-						</button>
-					</dd>
-					
-					<!-- Progress Emails -->
-					<dt><fmt:message key="lesson.progress.email"/>:</dt>
-					<dd>
-						<button id="sendProgressEmail" class="btn btn-primary btn-sm"
-							onClick="javascript:sendProgressEmail()"/>
+								<lams:Switch id="imButton" checked="${lesson.learnerImAvailable}"
+											 labelKey="lesson.im" iconClass="fa fa-sm fa-comments"	/>
+							</div>
+
+							<button id="openImButton" class="btn btn-primary btn-sm"
+									<c:if test="${not lesson.learnerImAvailable}">
+										style="display: none"
+									</c:if>
+							><i class="fa fa-sm fa-comments"></i>
+								<span class="hidden-xs"><fmt:message key="button.open.im"/></span>
+							</button>
+						</dd>
+
+						<!-- Progress Emails -->
+						<dt><fmt:message key="lesson.progress.email"/>:</dt>
+						<dd>
+							<button id="sendProgressEmail" class="btn btn-primary btn-sm"
+									onClick="javascript:sendProgressEmail()"/>
 							<i class="fa fa-sm fa-envelope"></i>
-							<span class="hidden-xs"><fmt:message key="progress.email.send"/></span> 
-						</button>
-						<button id="configureProgressEmail" class="btn btn-primary btn-sm"
-							onClick="javascript:configureProgressEmail()"/>
+							<span class="hidden-xs"><fmt:message key="progress.email.send"/></span>
+							</button>
+							<button id="configureProgressEmail" class="btn btn-primary btn-sm"
+									onClick="javascript:configureProgressEmail()"/>
 							<i class="fa fa-sm fa-cog"></i>
-							<span class="hidden-xs"><fmt:message key="progress.email.configure"/></span> 
-						</button>
-					</dd>
-				</dl>	
+							<span class="hidden-xs"><fmt:message key="progress.email.configure"/></span>
+							</button>
+						</dd>
+					</dl>
+				</div>
 			</div>
 		</div>
-	</div>
-	
-	<div class="monitoring-page-content active">
-		<header class="d-flex justify-content-between">
-			<div class="hamburger-box">
-				<!-- 
-					<div class="hamburger">
-						<span></span>
-						<span></span>
-						<span></span>
-					</div>
-				 -->
+
+		<div class="component-page-content monitoring-page-content active">
+			<header class="d-flex justify-content-between">
 				<p id="lesson-name"><c:out value="${lesson.lessonName}"/></p>
-			</div>
-			<div class="top-menu">
-				<div id="sequenceSearchPhraseContainer" class="input-group">
-					<input id="sequenceSearchPhrase" type="search" class="form-control" placeholder="<fmt:message key='label.monitoring.search.learners' />...">
-				    <button id="sequenceSearchPhraseButton" class="btn bg-white opacity-100" type="button" disabled onClick="javascript:sequenceClearSearchPhrase(true)" aria-label="<fmt:message key='label.monitoring.search.learners' />">
-				    	<i id="sequenceSearchPhraseIcon" class="fa-solid fa-fw fa-magnifying-glass"></i>
-				    	<i id="sequenceSearchPhraseClearIcon" class="fa-solid fa-fw fa-lg fa-xmark"></i>
-				    </button>
-				</div>
-				<!-- 
+				<div class="top-menu">
+					<div id="sequenceSearchPhraseContainer" class="input-group">
+						<input id="sequenceSearchPhrase" type="search" class="form-control" placeholder="<fmt:message key='label.monitoring.search.learners' />...">
+						<button id="sequenceSearchPhraseButton" class="btn bg-white opacity-100" type="button" disabled onClick="javascript:sequenceClearSearchPhrase(true)" aria-label="<fmt:message key='label.monitoring.search.learners' />">
+							<i id="sequenceSearchPhraseIcon" class="fa-solid fa-fw fa-magnifying-glass"></i>
+							<i id="sequenceSearchPhraseClearIcon" class="fa-solid fa-fw fa-lg fa-xmark"></i>
+						</button>
+					</div>
+					<!--
 				<div class="top-menu-btn component-menu-btn">
 					<a href="#" onClick="javscript:refreshMonitor()"><img src="<lams:LAMSURL/>images/components/icon2.svg" alt="#" /></a>
 				</div>
 				 -->
+				</div>
+			</header>
+
+			<div class="tab-content pt-2">
+
 			</div>
-		</header>
-		
-		<div class="tab-content pt-2">
-			
 		</div>
 	</div>
-</div>
 
-<c:if test="${not empty lesson.lessonInstructions}">
-	<div class="d-none" id="lesson-instructions-source">
-		<c:out value="${lesson.lessonInstructions}" escapeXml="false" />
-	</div>
-</c:if>
+	<c:if test="${not empty lesson.lessonInstructions}">
+		<div class="d-none" id="lesson-instructions-source">
+			<c:out value="${lesson.lessonInstructions}" escapeXml="false" />
+		</div>
+	</c:if>
 
-<div id="learnerGroupDialogContents" class="dialogContainer">
-	<span id="learnerGroupMultiSelectLabel"><fmt:message key='learner.group.multi.select'/></span>
-	<table id="listLearners" class="table table-borderless">
-		<tr id="learnerGroupSearchRow">
-			<td colspan="5">
-				<div class="input-group mb-3">
-				  <input type="text" class="form-control dialogSearchPhrase" placeholder="<fmt:message key='search.learner.textbox' />"
-				  		 aria-label="<fmt:message key='search.learner.textbox' />">
-				  <span class="dialogSearchPhraseIcon input-group-text" title="<fmt:message key='search.learner.textbox' />">
+	<div id="learnerGroupDialogContents" class="dialogContainer">
+		<span id="learnerGroupMultiSelectLabel"><fmt:message key='learner.group.multi.select'/></span>
+		<table id="listLearners" class="table table-borderless">
+			<tr id="learnerGroupSearchRow">
+				<td colspan="5">
+					<div class="input-group mb-3">
+						<input type="text" class="form-control dialogSearchPhrase" placeholder="<fmt:message key='search.learner.textbox' />"
+							   aria-label="<fmt:message key='search.learner.textbox' />">
+						<span class="dialogSearchPhraseIcon input-group-text" title="<fmt:message key='search.learner.textbox' />">
 				  		<i class=" fa-solid fa-sm fa-search"></i>
 				  </span>
-				</div>
-			</td>
-			<td>
-				<button class="btn btn-xs btn-secondary dialogSearchPhraseClear" 
-						onClick="javascript:learnerGroupClearSearchPhrase()"
-						title="<fmt:message key='learners.search.phrase.clear.tooltip' />">
-					<i class="fa-solid fa-fw fa-xmark"></i>
-				</button>
-			</td>
-		</tr>
-		<tr>
-			<td class="navCell pageMinus10Cell">
-				<button class="btn btn-xs btn-secondary" 
-						onClick="javascript:shiftLearnerGroupList(-10)"
-						title="<fmt:message key='learner.group.backward.10'/>">
-					<i class="fa-solid fa-fw fa-step-backward"></i>
-				</button>
-					
-			</td>
-			<td class="navCell pageMinus1Cell">
-				<button class="btn btn-xs btn-secondary" 
-						onClick="javascript:shiftLearnerGroupList(-1)"
-						title="<fmt:message key='learner.group.backward.1'/>">
-					<i class="fa-solid fa-fw fa-backward"></i>
-				</button>
-			</td>
-			<td class="pageCell"
-				title="<fmt:message key='learners.page'/>">
-			</td>
-			<td class="navCell pagePlus1Cell">
-				<button class="btn btn-xs btn-secondary" 
-						onClick="javascript:shiftLearnerGroupList(1)"
-						title="<fmt:message key='learner.group.forward.1'/>">
-					<i class="fa-solid fa-fw fa-forward"></i>
-				</button>
-			</td>
-			<td class="navCell pagePlus10Cell">
-				<button class="btn btn-xs btn-secondary" 
-						onClick="javascript:shiftLearnerGroupList(10)"
-						title="<fmt:message key='learner.group.forward.10'/>">
-					<i class="fa-solid fa-fw fa-step-forward"></i>
-				</button>
-			</td>
-			<td class="navCell sortCell text-end" role="button">
-				<button class="btn btn-xs btn-secondary" 
-						onClick="javascript:sortLearnerGroupList()"
-						title="<fmt:message key='learner.group.sort.button'/>">
-					<i class="fa-solid fa-fw fa-caret-down"></i>
-				</button>
-			</td>
-		</tr>
-		<tr>
-			<td colspan="6">
-				<table class="dialogTable table table-condensed table-hover"></table>
-			</td>
-		</tr>
-	</table>
-	<div class="modal-footer">
-		<button id="learnerGroupDialogForceCompleteAllButton" class="btn btn-secondary me-2">
-			<span><fmt:message key="button.force.complete.all" /></span>
-		</button>
-		<button id="learnerGroupDialogForceCompleteButton" class="learnerGroupDialogSelectableButton btn btn-secondary me-2">
-			<span><fmt:message key="button.force.complete" /></span>
-		</button>
+					</div>
+				</td>
+				<td>
+					<button class="btn btn-xs btn-secondary dialogSearchPhraseClear"
+							onClick="javascript:learnerGroupClearSearchPhrase()"
+							title="<fmt:message key='learners.search.phrase.clear.tooltip' />">
+						<i class="fa-solid fa-fw fa-xmark"></i>
+					</button>
+				</td>
+			</tr>
+			<tr>
+				<td class="navCell pageMinus10Cell">
+					<button class="btn btn-xs btn-secondary"
+							onClick="javascript:shiftLearnerGroupList(-10)"
+							title="<fmt:message key='learner.group.backward.10'/>">
+						<i class="fa-solid fa-fw fa-step-backward"></i>
+					</button>
 
-		<button id="learnerGroupDialogViewButton" class="learnerGroupDialogSelectableButton btn btn-secondary me-2">
-			<span><fmt:message key="button.view.learner" /></span>
-		</button>
-		<button id="learnerGroupDialogEmailButton" class="learnerGroupDialogSelectableButton btn btn-secondary me-2">
-			<span><fmt:message key="button.email" /></span>
-		</button>
-		<button id="learnerGroupDialogCloseButton" class="btn btn-primary me-2">
-			<span><fmt:message key="button.close" /></span>
-		</button>
+				</td>
+				<td class="navCell pageMinus1Cell">
+					<button class="btn btn-xs btn-secondary"
+							onClick="javascript:shiftLearnerGroupList(-1)"
+							title="<fmt:message key='learner.group.backward.1'/>">
+						<i class="fa-solid fa-fw fa-backward"></i>
+					</button>
+				</td>
+				<td class="pageCell"
+					title="<fmt:message key='learners.page'/>">
+				</td>
+				<td class="navCell pagePlus1Cell">
+					<button class="btn btn-xs btn-secondary"
+							onClick="javascript:shiftLearnerGroupList(1)"
+							title="<fmt:message key='learner.group.forward.1'/>">
+						<i class="fa-solid fa-fw fa-forward"></i>
+					</button>
+				</td>
+				<td class="navCell pagePlus10Cell">
+					<button class="btn btn-xs btn-secondary"
+							onClick="javascript:shiftLearnerGroupList(10)"
+							title="<fmt:message key='learner.group.forward.10'/>">
+						<i class="fa-solid fa-fw fa-step-forward"></i>
+					</button>
+				</td>
+				<td class="navCell sortCell text-end" role="button">
+					<button class="btn btn-xs btn-secondary"
+							onClick="javascript:sortLearnerGroupList()"
+							title="<fmt:message key='learner.group.sort.button'/>">
+						<i class="fa-solid fa-fw fa-caret-down"></i>
+					</button>
+				</td>
+			</tr>
+			<tr>
+				<td colspan="6">
+					<table class="dialogTable table table-condensed table-hover"></table>
+				</td>
+			</tr>
+		</table>
+		<div class="modal-footer">
+			<button id="learnerGroupDialogForceCompleteAllButton" class="btn btn-secondary me-2">
+				<span><fmt:message key="button.force.complete.all" /></span>
+			</button>
+			<button id="learnerGroupDialogForceCompleteButton" class="learnerGroupDialogSelectableButton btn btn-secondary me-2">
+				<span><fmt:message key="button.force.complete" /></span>
+			</button>
+
+			<button id="learnerGroupDialogViewButton" class="learnerGroupDialogSelectableButton btn btn-secondary me-2">
+				<span><fmt:message key="button.view.learner" /></span>
+			</button>
+			<button id="learnerGroupDialogEmailButton" class="learnerGroupDialogSelectableButton btn btn-secondary me-2">
+				<span><fmt:message key="button.email" /></span>
+			</button>
+			<button id="learnerGroupDialogCloseButton" class="btn btn-primary me-2">
+				<span><fmt:message key="button.close" /></span>
+			</button>
+		</div>
 	</div>
-</div>
 
-<div id="classDialogContents" class="dialogContainer">
-	<div id="classDialogTable">
-		<div class="row">
-			<div id="leftLearnerTable" class="col-6">
-				<table id="classLearnerTable" class="table table-borderless">
-					<tr class="table-active">
-						<td class="dialogTitle" colspan="6"><fmt:message
-								key="lesson.learners" /></td>
-					</tr>
-					<tr>
-						<td colspan="5">
-							<div class="input-group mb-3">
-							  <input type="text" class="form-control dialogSearchPhrase" placeholder="<fmt:message key='search.learner.textbox' />"
-							  		 aria-label="<fmt:message key='search.learner.textbox' />">
-							  <span class="dialogSearchPhraseIcon input-group-text" title="<fmt:message key='search.learner.textbox' />">
+	<div id="classDialogContents" class="dialogContainer">
+		<div id="classDialogTable">
+			<div class="row">
+				<div id="leftLearnerTable" class="col-6">
+					<table id="classLearnerTable" class="table table-borderless">
+						<tr class="table-active">
+							<td class="dialogTitle" colspan="6"><fmt:message
+									key="lesson.learners" /></td>
+						</tr>
+						<tr>
+							<td colspan="5">
+								<div class="input-group mb-3">
+									<input type="text" class="form-control dialogSearchPhrase" placeholder="<fmt:message key='search.learner.textbox' />"
+										   aria-label="<fmt:message key='search.learner.textbox' />">
+									<span class="dialogSearchPhraseIcon input-group-text" title="<fmt:message key='search.learner.textbox' />">
 							  		<i class="fa-solid fa-sm fa-search"></i>
 							  </span>
-							</div>
-						</td>
-						<td>
-							<button class="btn btn-xs btn-secondary dialogSearchPhraseClear" 
-									onClick="javascript:classClearSearchPhrase()"
-									title="<fmt:message key='learners.search.phrase.clear.tooltip' />">
-								<i class="fa-solid fa-fw fa-xmark"></i>
-							</button>
-						</td>
-					</tr>
-					<tr>
-						<td class="navCell pageMinus10Cell">
-							<button class="btn btn-xs btn-secondary" 
-									onClick="javascript:shiftClassList('Learner', -10)"
-									title="<fmt:message key='learner.group.backward.10'/>">
-								<i class="fa-solid fa-fw fa-step-backward"></i>
-							</button>
-								
-						</td>
-						<td class="navCell pageMinus1Cell">
-							<button class="btn btn-xs btn-secondary" 
-									onClick="javascript:shiftClassList('Learner', -1)"
-									title="<fmt:message key='learner.group.backward.1'/>">
-								<i class="fa-solid fa-fw fa-backward"></i>
-							</button>
-						</td>
-						<td class="pageCell"
-							title="<fmt:message key='learners.page'/>">
-						</td>
-						<td class="navCell pagePlus1Cell">
-							<button class="btn btn-xs btn-secondary" 
-									onClick="javascript:shiftClassList('Learner', 1)"
-									title="<fmt:message key='learner.group.forward.1'/>">
-								<i class="fa-solid fa-fw fa-forward"></i>
-							</button>
-						</td>
-						<td class="navCell pagePlus10Cell">
-							<button class="btn btn-xs btn-secondary" 
-									onClick="javascript:shiftClassList('Learner', 10)"
-									title="<fmt:message key='learner.group.forward.10'/>">
-								<i class="fa-solid fa-fw fa-step-forward"></i>
-							</button>
-						</td>
-						<td class="navCell sortCell text-end" role="button">
-							<button class="btn btn-xs btn-secondary" 
-									onClick="javascript:sortClassList('Learner')"
-									title="<fmt:message key='learner.group.sort.button'/>">
-								<i class="fa-solid fa-fw fa-caret-down"></i>
-							</button>
-						</td>
-					</tr>
-					<tr>
-						<td colspan="6">
-							<table class="dialogTable table table-condensed table-hover"></table>
-						</td>
-					</tr>
-					<tr>
-						<td colspan="6">
-							<button id="addAllLearnersButton"
-								class="btn btn-sm btn-secondary float-end"
-								onClick="javascript:addAllLearners()">
-								<fmt:message key="button.edit.class.add.all" />
-							</button>
-						</td>
-					</tr>
-				</table>
+								</div>
+							</td>
+							<td>
+								<button class="btn btn-xs btn-secondary dialogSearchPhraseClear"
+										onClick="javascript:classClearSearchPhrase()"
+										title="<fmt:message key='learners.search.phrase.clear.tooltip' />">
+									<i class="fa-solid fa-fw fa-xmark"></i>
+								</button>
+							</td>
+						</tr>
+						<tr>
+							<td class="navCell pageMinus10Cell">
+								<button class="btn btn-xs btn-secondary"
+										onClick="javascript:shiftClassList('Learner', -10)"
+										title="<fmt:message key='learner.group.backward.10'/>">
+									<i class="fa-solid fa-fw fa-step-backward"></i>
+								</button>
+
+							</td>
+							<td class="navCell pageMinus1Cell">
+								<button class="btn btn-xs btn-secondary"
+										onClick="javascript:shiftClassList('Learner', -1)"
+										title="<fmt:message key='learner.group.backward.1'/>">
+									<i class="fa-solid fa-fw fa-backward"></i>
+								</button>
+							</td>
+							<td class="pageCell"
+								title="<fmt:message key='learners.page'/>">
+							</td>
+							<td class="navCell pagePlus1Cell">
+								<button class="btn btn-xs btn-secondary"
+										onClick="javascript:shiftClassList('Learner', 1)"
+										title="<fmt:message key='learner.group.forward.1'/>">
+									<i class="fa-solid fa-fw fa-forward"></i>
+								</button>
+							</td>
+							<td class="navCell pagePlus10Cell">
+								<button class="btn btn-xs btn-secondary"
+										onClick="javascript:shiftClassList('Learner', 10)"
+										title="<fmt:message key='learner.group.forward.10'/>">
+									<i class="fa-solid fa-fw fa-step-forward"></i>
+								</button>
+							</td>
+							<td class="navCell sortCell text-end" role="button">
+								<button class="btn btn-xs btn-secondary"
+										onClick="javascript:sortClassList('Learner')"
+										title="<fmt:message key='learner.group.sort.button'/>">
+									<i class="fa-solid fa-fw fa-caret-down"></i>
+								</button>
+							</td>
+						</tr>
+						<tr>
+							<td colspan="6">
+								<table class="dialogTable table table-condensed table-hover"></table>
+							</td>
+						</tr>
+						<tr>
+							<td colspan="6">
+								<button id="addAllLearnersButton"
+										class="btn btn-sm btn-secondary float-end"
+										onClick="javascript:addAllLearners()">
+									<fmt:message key="button.edit.class.add.all" />
+								</button>
+							</td>
+						</tr>
+					</table>
+				</div>
+				<div id="rightMonitorTable" class="col">
+					<table id="classMonitorTable" class="table table-borderless">
+						<tr class="table-active">
+							<td class="dialogTitle" colspan="6"><fmt:message
+									key="lesson.monitors" /></td>
+						</tr>
+						<tr>
+							<td id="classMonitorSearchRow" colspan="6">&nbsp;</td>
+						</tr>
+						<tr>
+							<td class="navCell pageMinus10Cell">
+								<button class="btn btn-xs btn-secondary"
+										onClick="javascript:shiftClassList('Monitor', -10)"
+										title="<fmt:message key='learner.group.backward.10'/>">
+									<i class="fa-solid fa-fw fa-step-backward"></i>
+								</button>
+
+							</td>
+							<td class="navCell pageMinus1Cell">
+								<button class="btn btn-xs btn-secondary"
+										onClick="javascript:shiftClassList('Monitor', -1)"
+										title="<fmt:message key='learner.group.backward.1'/>">
+									<i class="fa-solid fa-fw fa-backward"></i>
+								</button>
+							</td>
+							<td class="pageCell"
+								title="<fmt:message key='learners.page'/>">
+							</td>
+							<td class="navCell pagePlus1Cell">
+								<button class="btn btn-xs btn-secondary"
+										onClick="javascript:shiftClassList('Monitor', 1)"
+										title="<fmt:message key='learner.group.forward.1'/>">
+									<i class="fa-solid fa-fw fa-forward"></i>
+								</button>
+							</td>
+							<td class="navCell pagePlus10Cell">
+								<button class="btn btn-xs btn-secondary"
+										onClick="javascript:shiftClassList('Monitor', 10)"
+										title="<fmt:message key='learner.group.forward.10'/>">
+									<i class="fa-solid fa-fw fa-step-forward"></i>
+								</button>
+							</td>
+							<td class="navCell sortCell text-end" role="button">
+								<button class="btn btn-xs btn-secondary"
+										onClick="javascript:sortClassList('Monitor')"
+										title="<fmt:message key='learner.group.sort.button'/>">
+									<i class="fa-solid fa-fw fa-caret-down"></i>
+								</button>
+							</td>
+						</tr>
+						<tr>
+							<td colspan="6">
+								<table class="dialogTable table table-condensed table-hover"></table>
+							</td>
+						</tr>
+						<tr>
+							<td colspan="6"></td>
+						</tr>
+					</table>
+				</div>
 			</div>
-			<div id="rightMonitorTable" class="col">
-				<table id="classMonitorTable" class="table table-borderless">
+		</div>
+	</div>
+
+	<div id="forceBackwardsDialogContents" class="dialogContainer">
+		<div id="forceBackwardsMsg"></div>
+		<div class="pull-right mt-3">
+
+			<button id="forceBackwardsRemoveContentNoButton" class="btn btn-primary me-1">
+				<span><fmt:message key="force.complete.remove.content.no"/></span>
+			</button>
+
+			<button id="forceBackwardsRemoveContentYesButton" class="btn btn-primary me-1">
+				<span><fmt:message key="force.complete.remove.content.yes" /></span>
+			</button>
+
+			<button id="forceBackwardsCloseButton" class="btn btn-secondary">
+				<span><fmt:message key="button.close" /></span>
+			</button>
+		</div>
+	</div>
+
+	<div id="emailProgressDialogContents" class="dialogContainer">
+		<div id="emailProgressDialogTable">
+			<div>
+				<table id="emailProgressTable" class="table">
 					<tr class="table-active">
-						<td class="dialogTitle" colspan="6"><fmt:message
-								key="lesson.monitors" /></td>
+						<td class="dialogTitle" colspan="6"><fmt:message key="progress.email.will.be.sent.on"/></td>
 					</tr>
 					<tr>
-						<td id="classMonitorSearchRow" colspan="6">&nbsp;</td>
-					</tr>
-					<tr>
-						<td class="navCell pageMinus10Cell">
-							<button class="btn btn-xs btn-secondary" 
-									onClick="javascript:shiftClassList('Monitor', -10)"
-									title="<fmt:message key='learner.group.backward.10'/>">
-								<i class="fa-solid fa-fw fa-step-backward"></i>
-							</button>
-								
-						</td>
-						<td class="navCell pageMinus1Cell">
-							<button class="btn btn-xs btn-secondary" 
-									onClick="javascript:shiftClassList('Monitor', -1)"
-									title="<fmt:message key='learner.group.backward.1'/>">
-								<i class="fa-solid fa-fw fa-backward"></i>
-							</button>
-						</td>
-						<td class="pageCell"
-							title="<fmt:message key='learners.page'/>">
-						</td>
-						<td class="navCell pagePlus1Cell">
-							<button class="btn btn-xs btn-secondary" 
-									onClick="javascript:shiftClassList('Monitor', 1)"
-									title="<fmt:message key='learner.group.forward.1'/>">
-								<i class="fa-solid fa-fw fa-forward"></i>
-							</button>
-						</td>
-						<td class="navCell pagePlus10Cell">
-							<button class="btn btn-xs btn-secondary" 
-									onClick="javascript:shiftClassList('Monitor', 10)"
-									title="<fmt:message key='learner.group.forward.10'/>">
-								<i class="fa-solid fa-fw fa-step-forward"></i>
-							</button>
-						</td>
-						<td class="navCell sortCell text-end" role="button">
-							<button class="btn btn-xs btn-secondary" 
-									onClick="javascript:sortClassList('Monitor')"
-									title="<fmt:message key='learner.group.sort.button'/>">
-								<i class="fa-solid fa-fw fa-caret-down"></i>
-							</button>
-						</td>
-					</tr>
-					<tr>
 						<td colspan="6">
 							<table class="dialogTable table table-condensed table-hover"></table>
 						</td>
 					</tr>
-					<tr>
-						<td colspan="6"></td>
-					</tr>
 				</table>
 			</div>
-		</div>
-	</div>
-</div>
-	
-<div id="forceBackwardsDialogContents" class="dialogContainer">
-	<div id="forceBackwardsMsg"></div>
-    <div class="pull-right mt-3">
+			<div class="row mt-2">
+				<div class="col-6 form-group">
+					<label for="emaildatePicker"><fmt:message key="progress.email.select.date"/></label>
+					<input type="text" class="form-control" name="emaildatePicker" id="emaildatePicker" value="" autocomplete="off" />
+				</div>
+			</div>
 
-           <button id="forceBackwardsRemoveContentNoButton" class="btn btn-primary me-1">
-                   <span><fmt:message key="force.complete.remove.content.no"/></span>
-           </button>
-
-           <button id="forceBackwardsRemoveContentYesButton" class="btn btn-primary me-1">
-                   <span><fmt:message key="force.complete.remove.content.yes" /></span>
-           </button>
-
-           <button id="forceBackwardsCloseButton" class="btn btn-secondary">
-                   <span><fmt:message key="button.close" /></span>
-           </button>
-   </div>
-</div>
-
-<div id="emailProgressDialogContents" class="dialogContainer">
-	<div id="emailProgressDialogTable">
-		<div>
-			<table id="emailProgressTable" class="table">
-				<tr class="table-active">
-					<td class="dialogTitle" colspan="6"><fmt:message key="progress.email.will.be.sent.on"/></td>
-				</tr>
-				<tr>
-					<td colspan="6">
-						<table class="dialogTable table table-condensed table-hover"></table>
-					</td>
-				</tr>
-			</table>
-		</div>
-		<div class="row mt-2">
-			<div class="col-6 form-group">
-				<label for="emaildatePicker"><fmt:message key="progress.email.select.date"/></label>
-				<input type="text" class="form-control" name="emaildatePicker" id="emaildatePicker" value="" autocomplete="off" />
+			<div class="row mt-2">
+				<div class="col-6 text-end">
+					<button id="addEmailProgressDateButton"
+							class="btn btn-sm btn-primary"
+							onClick="javascript:addEmailProgressDate()">
+						<fmt:message key="progress.email.add.date"/>
+					</button>
+				</div>
+				<div class="col-6 text-end">
+					<button id="addEmailProgressSeriesButton"
+							class="btn btn-sm btn-secondary"
+							onClick="javascript:addEmailProgressSeries(true)">
+						<fmt:message key="progress.email.generate.date.list"/>
+					</button>
+				</div>
 			</div>
 		</div>
+	</div>
 
-		<div class="row mt-2">
-			<div class="col-6 text-end">
-				<button id="addEmailProgressDateButton"
-					class="btn btn-sm btn-primary"
-					onClick="javascript:addEmailProgressDate()">
-					<fmt:message key="progress.email.add.date"/>
-				</button>
+	<div id="confirmationDialog" class="modal dialogContainer fade" tabindex="-1" role="dialog">
+		<div class="modal-dialog  modal-dialog-centered">
+			<div class="modal-content">
+				<div class="modal-body">
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" id="confirmationDialogCancelButton">Cancel</button>
+					<button type="button" class="btn btn-primary" id="confirmationDialogConfirmButton">Confirm</button>
+				</div>
 			</div>
-			<div class="col-6 text-end">
-				<button id="addEmailProgressSeriesButton"
-					class="btn btn-sm btn-secondary"
-					onClick="javascript:addEmailProgressSeries(true)">
-					<fmt:message key="progress.email.generate.date.list"/>
-				</button>
-			</div>
 		</div>
 	</div>
-</div>
 
-<div id="confirmationDialog" class="modal dialogContainer fade" tabindex="-1" role="dialog">
-  <div class="modal-dialog  modal-dialog-centered">
-    <div class="modal-content">
-    	<div class="modal-body">
-    	</div>
-      	<div class="modal-footer">
-        	<button type="button" class="btn btn-secondary" id="confirmationDialogCancelButton">Cancel</button>
-        	<button type="button" class="btn btn-primary" id="confirmationDialogConfirmButton">Confirm</button>
-      	</div>
-    </div>
-  </div>
-</div>
+	<div class="toast-container position-fixed top-0 start-50 translate-middle-x p-3" id="toast-container">
+	</div>
 
-<div class="toast-container position-fixed top-0 start-50 translate-middle-x p-3" id="toast-container">
-</div>
-
-<div id="toast-template" class="toast align-items-center bg-white" role="alert" aria-live="assertive" aria-atomic="true">
-	<div class="d-flex">
-		<div class="toast-body"></div>
-		<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
-  	</div>
-</div>
-</body>
-</lams:html>
+	<div id="toast-template" class="toast align-items-center bg-white" role="alert" aria-live="assertive" aria-atomic="true">
+		<div class="d-flex">
+			<div class="toast-body"></div>
+			<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+		</div>
+	</div>
+	</body>
+</lams:html>
\ No newline at end of file
Index: lams_tool_nb/src/java/org/lamsfoundation/lams/tool/noticeboard/web/controller/LearningController.java
===================================================================
diff -u -rf7937adfea85b6a6976eaa98df8c68db93f9f060 -r72bf0041a18e7e902404c65e55e167bf6ff84269
--- lams_tool_nb/src/java/org/lamsfoundation/lams/tool/noticeboard/web/controller/LearningController.java	(.../LearningController.java)	(revision f7937adfea85b6a6976eaa98df8c68db93f9f060)
+++ lams_tool_nb/src/java/org/lamsfoundation/lams/tool/noticeboard/web/controller/LearningController.java	(.../LearningController.java)	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -53,23 +53,24 @@
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.beans.factory.annotation.Qualifier;
 import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
 import org.springframework.util.LinkedMultiValueMap;
 import org.springframework.util.MultiValueMap;
 import org.springframework.web.bind.annotation.ModelAttribute;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestMethod;
+import org.springframework.web.bind.annotation.RequestParam;
 
 /**
  * Creation Date: 27-06-05
  *
- * The learner url can be of three modes learner, teacher or author. Depending on
- * what mode was set, it will trigger the corresponding action. If the mode parameter
- * is missing or a key is not found in the keymap, it will call the unspecified method
- * which defaults to the learner action.
+ * The learner url can be of three modes learner, teacher or author. Depending on what mode was set, it will trigger the
+ * corresponding action. If the mode parameter is missing or a key is not found in the keymap, it will call the
+ * unspecified method which defaults to the learner action.
  *
  * <p>
- * The difference between author mode (which is basically the preview)
- * is that if the defineLater flag is set, it will not be able to see the noticeboard screen
+ * The difference between author mode (which is basically the preview) is that if the defineLater flag is set, it will
+ * not be able to see the noticeboard screen
  * </p>
  */
 @Controller
@@ -109,12 +110,22 @@
     }
 
     public String unspecified(@ModelAttribute NbLearnerForm NbLearnerForm, HttpServletRequest request,
-	    HttpServletResponse response) {
+	    HttpServletResponse response, Model model) {
 
-	return learner(NbLearnerForm, request, response);
+	return learner5(request, model);
     }
 
     @RequestMapping("/learner")
+    public String learner5(HttpServletRequest request, Model model) {
+	String url = request.getRequestURL().toString().replace("learner.do", "learnerInner.do") + "?"
+		+ request.getQueryString();
+	model.addAttribute("contentUrl", url);
+	Long toolSessionId = WebUtil.readLongParam(request, AttributeNames.PARAM_TOOL_SESSION_ID);
+	model.addAttribute(AttributeNames.PARAM_TOOL_SESSION_ID, toolSessionId);
+	return "learner5";
+    }
+
+    @RequestMapping("/learnerInner")
     public String learner(@ModelAttribute NbLearnerForm NbLearnerForm, HttpServletRequest request,
 	    HttpServletResponse response) {
 
@@ -203,7 +214,7 @@
 	    return "message";
 	}
 
-	return "learnerContent";
+	return "learnerContent5";
 
     }
 
@@ -224,8 +235,8 @@
 
     /**
      * <p>
-     * Performs a check on the flag indicated by <code>flag</code>
-     * In this noticeboard tool, there are 3 possible flags:
+     * Performs a check on the flag indicated by <code>flag</code> In this noticeboard tool, there are 3 possible
+     * flags:
      * <li>defineLater</li>
      * <li>contentInUse</li>
      * <br>
@@ -247,13 +258,10 @@
 
     /**
      * <p>
-     * This methods checks the defineLater and runOffline flag.
-     * If defineLater flag is set, then a message is added to an ActionMessages
-     * object saying that the contents have not been defined yet. If the runOffline
-     * flag is set, a message is added to ActionMessages saying that the contents
-     * are not being run online.
-     * This method will return true if any one of the defineLater or runOffline flag is set.
-     * Otherwise false will be returned.
+     * This methods checks the defineLater and runOffline flag. If defineLater flag is set, then a message is added to
+     * an ActionMessages object saying that the contents have not been defined yet. If the runOffline flag is set, a
+     * message is added to ActionMessages saying that the contents are not being run online. This method will return
+     * true if any one of the defineLater or runOffline flag is set. Otherwise false will be returned.
      * </p>
      */
     private boolean displayMessageToUser(NoticeboardContent content, MultiValueMap<String, String> errorMap) {
@@ -270,8 +278,8 @@
     }
 
     /**
-     * Indicates that the user has finished viewing the noticeboard.
-     * The session is set to complete and leaveToolSession is called.
+     * Indicates that the user has finished viewing the noticeboard. The session is set to complete and leaveToolSession
+     * is called.
      */
     @RequestMapping("/finish")
     public String finish(@ModelAttribute NbLearnerForm nbLearnerForm, HttpServletRequest request,
@@ -339,8 +347,8 @@
     }
 
     /**
-     * Indicates that the user has finished viewing the noticeboard, and will be
-     * passed onto the Notebook reflection screen.
+     * Indicates that the user has finished viewing the noticeboard, and will be passed onto the Notebook reflection
+     * screen.
      */
     @RequestMapping(path = "/reflect", method = RequestMethod.POST)
     public String reflect(@ModelAttribute NbLearnerForm nbLearnerForm, HttpServletRequest request) {
Index: lams_tool_nb/web/WEB-INF/tags/Head.tag
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r72bf0041a18e7e902404c65e55e167bf6ff84269
--- lams_tool_nb/web/WEB-INF/tags/Head.tag	(.../Head.tag)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_nb/web/WEB-INF/tags/Head.tag	(.../Head.tag)	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -38,7 +38,5 @@
     <meta http-equiv="Cache-Control" content="no-cache, no-store">
     <meta http-equiv="Expires" content="0">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="theme-color" content="#337ab7">
 	<jsp:doBody/>
-</head>
-
+</head>
\ No newline at end of file
Index: lams_tool_nb/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u
--- lams_tool_nb/web/WEB-INF/tags/PageLearner.tag	(revision 0)
+++ lams_tool_nb/web/WEB-INF/tags/PageLearner.tag	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -0,0 +1,313 @@
+<%@ tag body-content="scriptless" %>
+<%@ taglib uri="tags-core" prefix="c" %>
+<%@ taglib uri="tags-fmt" prefix="fmt" %>
+<%@ taglib uri="tags-lams" prefix="lams" %>
+
+<lams:html>
+    <lams:head>
+        <title><fmt:message key="activity.title"/></title>
+
+        <link rel="icon" type="image/x-icon" href="<lams:LAMSURL/>images/svg/lamsv5_logo.svg">
+        <link rel="stylesheet" href="<lams:LAMSURL/>css/bootstrap5.custom.css">
+        <link rel="stylesheet" href="<lams:LAMSURL/>includes/font-awesome6/css/all.css">
+        <link rel="stylesheet" href="<lams:LAMSURL/>css/components.css">
+
+        <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
+        <script src="<lams:LAMSURL/>includes/javascript/popper.min.js"></script>
+        <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
+        <script src="<lams:LAMSURL/>learning/includes/javascript/learnerPage.js"></script>
+        <script>
+            var LAMS_URL = '<lams:LAMSURL/>';
+            $(document).ready(function (){
+                initLearnerPage(${toolSessionID});
+            });
+        </script>
+
+        <%--        <link rel="stylesheet" href="<lams:LAMSURL/>learning/css/jq.css">--%>
+        <%--        <link rel="stylesheet" type="text/css" href="<lams:LAMSURL/>learning/css/style.css">--%>
+        <%--        <link rel="stylesheet" type="text/css" href="<lams:LAMSURL/>learning/css/responsive-style.css">--%>
+    </lams:head>
+
+    <body class="component">
+    <div class="component-page-wrapper">
+        <div class="component-page-content">
+            <header class="d-flex justify-content-between">
+                <div class="d-flex">
+                    <i id="sidebar-opener-button" class="fa-solid fa-bars pt-1"></i>
+                    <p id="lesson-name"></p>
+                </div>
+                <div class="top-menu">
+
+                </div>
+            </header>
+
+            <jsp:doBody/>
+        </div>
+
+
+            <%--
+                <div class="wrapper ps-0">
+                    <div class="main-content">
+                        <div class="main-content-inner">
+                            <header class="header d-flex justify-content-between">
+                                <div class="menu-hamburger-col d-flex">
+                                    <div class="hamburger">
+                                        <span></span>
+                                        <span></span>
+                                        <span style="width: 100%;"></span>
+                                    </div>
+                                    <p>Lesson Name</p>
+                                </div>
+                                <div class="top-menu d-flex align-items-center">
+                                    <div class="profile-progress">
+                                        <div class="user-info-progress-col">
+                                            <div class="top-progress">
+                                                <p>Progress</p>
+                                                <h6>20%</h6>
+                                            </div>
+                                            <div class="user-info-progress-bar">
+                                                <div class="user-info-progress" width="50%"></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="top-menu-btn top-menu-profile d-flex align-items-center">
+                                        <a href="#"><img src="<lams:WebAppURL />images/file.png" alt="#"/></a>
+                                        <a href="#"><img src="<lams:WebAppURL />images/bell.png" alt="#"/></a>
+                                        <a href="#"><img src="<lams:WebAppURL />images/img1.png" alt="#"/></a>
+                                    </div>
+                                </div>
+                            </header>
+                        </div>
+                    </div>
+                    <div class="title-head-main">
+                        <jsp:doBody/>
+
+                        <div class="tasks-col-gate activity-btn">
+                            <a href="#">
+                                <button class="d-btn mb-5" type="button">Next activity</button>
+                            </a>
+                        </div>
+
+                    </div>
+                </div>
+
+
+                <!-- Progress Bar Modal Start -->
+                <div class="progress-bar-modal active">
+                    <main class="main-inner">
+                        <div class="col-12 bar-col">
+                            <h6>Progress bar</h6>
+                            <img src="<lams:WebAppURL />images/cross.png" alt="">
+                        </div>
+
+                        <section class="listing-sec">
+                            <div class="container-fluid">
+                                <div class="bar-inner-1x">
+
+                                    <div class="bar-inner-2x">
+                                        <div class="left-listing">
+                                            <ul>
+                                                <li>
+                                                    <span>
+                                                        <img src="<lams:WebAppURL />images/tick.png" alt="">
+                                                    </span>
+                                                    Introduction
+                                                </li>
+                                                <li>
+                                                    <span>
+                                                        <img src="<lams:WebAppURL />images/tick.png" alt="">
+                                                    </span>
+                                                    Team Setup
+                                                </li>
+                                                <li class="seprate-color">
+                                                    <span>
+
+                                                    </span>
+                                                    Individual Readiness
+                                                </li>
+                                                <li class="seprate-color">
+                                                    <span>
+
+                                                    </span>
+                                                    Leader Selection
+                                                </li>
+                                                <li class="seprate-color">
+                                                    <span>
+
+                                                    </span>
+                                                    Introduction
+                                                </li>
+                                                <li class="seprate-color">
+                                                    <span>
+
+                                                    </span>
+                                                    Team Setup
+                                                </li>
+                                                <li class="seprate-color">
+                                                    <span>
+
+                                                    </span>
+                                                    Leader Selection
+                                                </li>
+                                            </ul>
+                                            <div class="top-menu-btn1x d-flex">
+                                                <a href="#"><img src="<lams:WebAppURL />images/down-arw.png" alt=""></a>
+                                                <a href="#"><img src="<lams:WebAppURL />images/up-arw.png" alt=""></a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="table-img">
+                                        <div class="container">
+                                            <div class="row align-items-center">
+                                                <div class="col-md-6 col-12">
+                                                    <div>
+                                                        <table
+                                                                class="table tablesorter tablesorter-bootstrap tablesorterff73dd4148253 hasFilters tablesorter2fb3f6e97d426 tablesorter37635a608e6c6"
+                                                                role="grid">
+                                                            <colgroup>
+                                                                <col width="50%">
+                                                                <col width="50%">
+                                                            </colgroup>
+                                                            <thead>
+                                                            <tr role="row" class="tablesorter-headerRow table-sorter-header">
+                                                                <th data-column="0"
+                                                                    class="tablesorter-header tablesorter-headerDesc" tabindex="0"
+                                                                    scope="col" role="columnheader" aria-disabled="false"
+                                                                    unselectable="on" aria-sort="descending"
+                                                                    aria-label="Name: Descending sort applied, activate to apply an ascending sort"
+                                                                    style="user-select: none;" data-sortedby="user">
+                                                                    <div class="tablesorter-header-inner">
+                                                                        <h1>Name</h1>
+                                                                    </div>
+                                                                </th>
+                                                                <th data-column="1"
+                                                                    class="tablesorter-header tablesorter-headerUnSorted"
+                                                                    tabindex="0" scope="col" role="columnheader"
+                                                                    aria-disabled="false" unselectable="on" aria-sort="none"
+                                                                    aria-label="Progress: No sort applied, activate to apply an ascending sort"
+                                                                    style="user-select: none;">
+                                                                    <div
+                                                                            class="tablesorter-header-inner d-flex align-items-center gap-3">
+                                                                        <h1 class="h2">Score</h1>
+                                                                        <img src="<lams:WebAppURL />images/polygon1x.png" alt="">
+                                                                    </div>
+                                                                </th>
+                                                            </tr>
+                                                            </thead>
+                                                            <tbody aria-live="polite" aria-relevant="all">
+                                                            <tr role="row" class="tablesorter-hasChildRow table-sorter-top">
+                                                                <td rowspan="1" class="table-user-name toggle">
+                                                                    <img src="<lams:WebAppURL />images/1.png" alt="#">
+                                                                    <p>Krystal Johnson</p>
+                                                                </td>
+                                                                <td class="table-user-progress">
+                                                                    <p>20</p>
+                                                                </td>
+                                                            </tr>
+
+                                                            <tr role="row" class="tablesorter-hasChildRow table-sorter-top">
+                                                                <td rowspan="1" class="table-user-name toggle">
+                                                                    <img src="<lams:WebAppURL />images/2.png" alt="#">
+                                                                    <p>Joel Bryant</p>
+                                                                </td>
+                                                                <td class="table-user-progress">
+                                                                    <p>18</p>
+                                                                </td>
+                                                            </tr>
+
+                                                            <tr role="row" class="tablesorter-hasChildRow table-sorter-top">
+                                                                <td rowspan="1" class="table-user-name toggle">
+                                                                    <img src="<lams:WebAppURL />images/3.png" alt="#">
+                                                                    <p>Alex Burns</p>
+                                                                </td>
+                                                                <td class="table-user-progress">
+                                                                    <p>16</p>
+                                                                </td>
+                                                            </tr>
+
+                                                            <tr role="row" class="tablesorter-hasChildRow table-sorter-top">
+                                                                <td rowspan="1" class="table-user-name toggle">
+                                                                    <img src="<lams:WebAppURL />images/4.png" alt="#">
+                                                                    <p>Caroline Scott</p>
+                                                                </td>
+                                                                <td class="table-user-progress">
+                                                                    <p>15</p>
+                                                                </td>
+                                                            </tr>
+
+                                                            <tr role="row" class="tablesorter-hasChildRow table-sorter-top">
+                                                                <td rowspan="1" class="table-user-name toggle">
+                                                                    <img src="<lams:WebAppURL />images/5.png" alt="#">
+                                                                    <p>Derek Lewis</p>
+                                                                </td>
+                                                                <td class="table-user-progress">
+                                                                    <p>14</p>
+                                                                </td>
+                                                            </tr>
+
+                                                            <tr role="row" class="tablesorter-hasChildRow table-sorter-top">
+                                                                <td rowspan="1" class="table-user-name toggle">
+                                                                    <img src="<lams:WebAppURL />images/6.png" alt="#">
+                                                                    <p>Frank Hart</p>
+                                                                </td>
+                                                                <td class="table-user-progress">
+                                                                    <p>12</p>
+                                                                </td>
+                                                            </tr>
+                                                            </tbody>
+                                                        </table>
+                                                    </div>
+                                                </div>
+                                                <div class="col-md-6 col-12">
+                                                    <div class="table-graph">
+                                                        <img src="<lams:WebAppURL />images/table-graph.png" alt="">
+                                                    </div>
+                                                </div>
+                                                <div class="col-12">
+                                                    <div class="info-icon1x">
+                                                        <div class="info-icon2x">
+                                                            <img src="<lams:WebAppURL />images/info-icon.png" alt="">
+                                                        </div>
+                                                        <div class="info-icon3x">
+                                                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+                                                                nonumy
+                                                                eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+                                                                diam
+                                                                voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+                                                                Stet
+                                                                clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+                                                                sit
+                                                                amet.</p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </section>
+                    </main>
+
+                </div>
+                <!-- Progress Bar Modal End -->
+
+                <script type="text/javascript">
+                    $(document).ready(function () {
+                        $('.hamburger, .progress-bar-modal .bar-col img').click(function () {
+                            $('.progress-bar-modal').toggleClass('active');
+                        });
+                    });
+                </script>
+                <script type="text/javascript">
+                    $('.profile-forum').hover(function () {
+                        $(this).css('z-index', 2).css('position', 'relative');
+                    }, function () {
+                        $(this).css('z-index', 0).css('position', 'relative');
+                    });
+                </script>
+            --%>
+    </div>
+    </body>
+
+</lams:html>
\ No newline at end of file
Index: lams_tool_nb/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r6a7abdf7fa2c5646e736550302dcc376397cd645 -r72bf0041a18e7e902404c65e55e167bf6ff84269
--- lams_tool_nb/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 6a7abdf7fa2c5646e736550302dcc376397cd645)
+++ lams_tool_nb/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -361,6 +361,10 @@
 		<path>/WEB-INF/tags/Page5.tag</path>
    	</tag-file>
    	<tag-file>
+	    <name>PageLearner</name>
+		<path>/WEB-INF/tags/PageLearner.tag</path>
+   	</tag-file>
+   	<tag-file>
 	    <name>TSTable5</name>
 		<path>/WEB-INF/tags/TSTable5.tag</path>
    	</tag-file>    
@@ -445,4 +449,4 @@
        <name>Switch</name>
        <path>/WEB-INF/tags/Switch.tag</path>
    	</tag-file>
-</taglib>
+</taglib>
\ No newline at end of file
Index: lams_tool_nb/web/images/1.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/2.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/3.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/4.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/5.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/6.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/arrow.svg
===================================================================
diff -u
--- lams_tool_nb/web/images/arrow.svg	(revision 0)
+++ lams_tool_nb/web/images/arrow.svg	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8.121" height="4.811" viewBox="0 0 8.121 4.811"><defs><style>.a{fill:none;stroke:#2e384d;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><path class="a" d="M1480,30l3,3,3-3" transform="translate(-1478.939 -28.939)"/></svg>
\ No newline at end of file
Index: lams_tool_nb/web/images/arrow2.svg
===================================================================
diff -u
--- lams_tool_nb/web/images/arrow2.svg	(revision 0)
+++ lams_tool_nb/web/images/arrow2.svg	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8.121" height="4.811" viewBox="0 0 8.121 4.811">
+  <path id="Path_923" data-name="Path 923" d="M1480,30l3,3,3-3" transform="translate(-1478.939 -28.939)" fill="none" stroke="#3c42e0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+</svg>
Index: lams_tool_nb/web/images/assess-icon.svg
===================================================================
diff -u
--- lams_tool_nb/web/images/assess-icon.svg	(revision 0)
+++ lams_tool_nb/web/images/assess-icon.svg	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.636" height="24" viewBox="0 0 19.636 24">
+  <g id="file" transform="translate(-4.5 -1.5)">
+    <path id="Path_910" data-name="Path 910" d="M20.864,25.5H7.773A3.214,3.214,0,0,1,4.5,22.227V4.773A3.214,3.214,0,0,1,7.773,1.5h7.636a.99.99,0,0,1,.764.327l7.636,7.636a.99.99,0,0,1,.327.764v12A3.214,3.214,0,0,1,20.864,25.5ZM7.773,3.682A1.031,1.031,0,0,0,6.682,4.773V22.227a1.031,1.031,0,0,0,1.091,1.091H20.864a1.031,1.031,0,0,0,1.091-1.091V10.664L14.973,3.682Z" fill="#05ccd6"/>
+    <path id="Path_911" data-name="Path 911" d="M26.727,11.318H19.091A1.031,1.031,0,0,1,18,10.227V2.591a1.091,1.091,0,0,1,2.182,0V9.136h6.545a1.031,1.031,0,0,1,1.091,1.091A1.031,1.031,0,0,1,26.727,11.318Z" transform="translate(-3.682)" fill="#05ccd6"/>
+  </g>
+</svg>
Index: lams_tool_nb/web/images/assess-icon1.svg
===================================================================
diff -u
--- lams_tool_nb/web/images/assess-icon1.svg	(revision 0)
+++ lams_tool_nb/web/images/assess-icon1.svg	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="22.76" viewBox="0 0 24 22.76">
+  <defs>
+    <clipPath id="clip-path">
+      <path id="Rectangle_222" data-name="Rectangle 222" d="M11.38,0H24a0,0,0,0,1,0,0V22.76a0,0,0,0,1,0,0H11.38A11.38,11.38,0,0,1,0,11.38v0A11.38,11.38,0,0,1,11.38,0Z" fill="#fa0" opacity="0.2"/>
+    </clipPath>
+  </defs>
+  <g id="Mask_Group_6" data-name="Mask Group 6" clip-path="url(#clip-path)">
+    <path id="__TEMP__SVG__" d="M13.129,1.129c-6.627,0-12,5.1-12,11.38s5.373,11.38,12,11.38,12-5.093,12-11.38S19.756,1.129,13.129,1.129Zm0,20.557a9.432,9.432,0,0,1-9.677-9.177,9.434,9.434,0,0,1,9.677-9.177,9.434,9.434,0,0,1,9.677,9.177A9.432,9.432,0,0,1,13.129,21.686Zm5.189-11.71c0,3.077-3.5,3.124-3.5,4.261v.291a.567.567,0,0,1-.581.551H12.023a.567.567,0,0,1-.581-.551v-.4c0-1.641,1.311-2.3,2.3-2.823.85-.451,1.371-.759,1.371-1.358,0-.791-1.064-1.317-1.925-1.317a2.8,2.8,0,0,0-2.368,1.375.6.6,0,0,1-.806.1L8.67,9.139a.534.534,0,0,1-.128-.751A5.52,5.52,0,0,1,13.41,5.9c2.374,0,4.908,1.758,4.908,4.074Zm-3.157,7.672a2.035,2.035,0,1,1-2.033-1.928A1.984,1.984,0,0,1,15.162,17.648Z" transform="translate(-1.129 -1.129)" fill="#fa0"/>
+  </g>
+</svg>
Index: lams_tool_nb/web/images/assess-icon2.svg
===================================================================
diff -u
--- lams_tool_nb/web/images/assess-icon2.svg	(revision 0)
+++ lams_tool_nb/web/images/assess-icon2.svg	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="24" viewBox="0 0 21 24">
+  <path id="cog" d="M21.46,15.2l-1.884-1.19a10.18,10.18,0,0,0,0-3.4l1.884-1.19a.612.612,0,0,0,.243-.678,12.363,12.363,0,0,0-2.42-4.577.5.5,0,0,0-.654-.111l-1.884,1.19a8.2,8.2,0,0,0-2.689-1.7V1.173a.57.57,0,0,0-.416-.566,10.188,10.188,0,0,0-4.83,0,.57.57,0,0,0-.416.566V3.554a8.465,8.465,0,0,0-2.689,1.7L3.827,4.062a.494.494,0,0,0-.654.111A12.3,12.3,0,0,0,.753,8.75.6.6,0,0,0,1,9.428l1.884,1.19a10.18,10.18,0,0,0,0,3.4L1,15.205a.612.612,0,0,0-.243.678,12.363,12.363,0,0,0,2.42,4.577.5.5,0,0,0,.654.111l1.884-1.19a8.2,8.2,0,0,0,2.689,1.7V23.46a.57.57,0,0,0,.416.566,10.188,10.188,0,0,0,4.83,0,.57.57,0,0,0,.416-.566V21.079a8.465,8.465,0,0,0,2.689-1.7l1.884,1.19a.494.494,0,0,0,.654-.111,12.3,12.3,0,0,0,2.42-4.577.622.622,0,0,0-.248-.683Zm-10.234.982a3.72,3.72,0,0,1-3.538-3.871,3.72,3.72,0,0,1,3.538-3.871,3.72,3.72,0,0,1,3.538,3.871A3.72,3.72,0,0,1,11.226,16.183Z" transform="translate(-0.728 -0.317)" fill="#cc7fe2"/>
+</svg>
Index: lams_tool_nb/web/images/assess-icon3.svg
===================================================================
diff -u
--- lams_tool_nb/web/images/assess-icon3.svg	(revision 0)
+++ lams_tool_nb/web/images/assess-icon3.svg	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="22.76" viewBox="0 0 24 22.76">
+  <path id="star" d="M20.184,24.362a.98.98,0,0,1-.544-.109l-6.2-3.262-6.2,3.262a1.207,1.207,0,0,1-1.2-.109,1.034,1.034,0,0,1-.435-1.087l1.2-6.958-5-4.784a1.1,1.1,0,0,1-.326-1.087,1.053,1.053,0,0,1,.87-.761l6.958-.978,3.153-6.306a1.124,1.124,0,0,1,1.957,0l3.153,6.306,6.958.978c.326,0,.652.326.87.761a.984.984,0,0,1-.326,1.087l-5,4.892,1.2,6.958a1.034,1.034,0,0,1-.435,1.087A1.379,1.379,0,0,1,20.184,24.362ZM4.855,11.316,8.66,15.121a.989.989,0,0,1,.435.87l-.87,5.327,4.784-2.5a.815.815,0,0,1,.978,0l4.784,2.5-.978-5.327a1.1,1.1,0,0,1,.326-.978l3.805-3.805L16.6,10.446c-.326,0-.652-.326-.87-.544L13.444,5.119,11.052,9.9a.818.818,0,0,1-.761.544Z" transform="translate(-1.444 -1.612)" fill="#fa0"/>
+</svg>
Index: lams_tool_nb/web/images/assess-icon4.svg
===================================================================
diff -u
--- lams_tool_nb/web/images/assess-icon4.svg	(revision 0)
+++ lams_tool_nb/web/images/assess-icon4.svg	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="24" viewBox="0 0 21 24">
+  <path id="bell" d="M20.6,16.983c-.905-.973-2.6-2.437-2.6-7.233a7.4,7.4,0,0,0-6-7.273V1.5a1.5,1.5,0,1,0-3,0v.977A7.4,7.4,0,0,0,3,9.75c0,4.8-1.695,6.259-2.6,7.233A1.463,1.463,0,0,0,0,18a1.5,1.5,0,0,0,1.5,1.5H19.5A1.5,1.5,0,0,0,21,18a1.463,1.463,0,0,0-.4-1.017ZM3.166,17.25c.995-1.311,2.082-3.484,2.087-7.473,0-.009,0-.018,0-.027a5.25,5.25,0,0,1,10.5,0c0,.009,0,.018,0,.027.005,3.989,1.093,6.162,2.087,7.473ZM10.5,24a3,3,0,0,0,3-3h-6A3,3,0,0,0,10.5,24Z" transform="translate(-0.001)" fill="#cc7fe2"/>
+</svg>
Index: lams_tool_nb/web/images/assess-icon5.svg
===================================================================
diff -u
--- lams_tool_nb/web/images/assess-icon5.svg	(revision 0)
+++ lams_tool_nb/web/images/assess-icon5.svg	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="24" viewBox="0 0 21 24">
+  <path id="bell" d="M20.6,16.983c-.905-.973-2.6-2.437-2.6-7.233a7.4,7.4,0,0,0-6-7.273V1.5a1.5,1.5,0,1,0-3,0v.977A7.4,7.4,0,0,0,3,9.75c0,4.8-1.695,6.259-2.6,7.233A1.463,1.463,0,0,0,0,18a1.5,1.5,0,0,0,1.5,1.5H19.5A1.5,1.5,0,0,0,21,18a1.463,1.463,0,0,0-.4-1.017ZM3.166,17.25c.995-1.311,2.082-3.484,2.087-7.473,0-.009,0-.018,0-.027a5.25,5.25,0,0,1,10.5,0c0,.009,0,.018,0,.027.005,3.989,1.093,6.162,2.087,7.473ZM10.5,24a3,3,0,0,0,3-3h-6A3,3,0,0,0,10.5,24Z" transform="translate(-0.001)" fill="#cc7fe2"/>
+</svg>
Index: lams_tool_nb/web/images/assess-icon6.svg
===================================================================
diff -u
--- lams_tool_nb/web/images/assess-icon6.svg	(revision 0)
+++ lams_tool_nb/web/images/assess-icon6.svg	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="23.995" viewBox="0 0 24 23.995">
+  <path id="message-circle" d="M4.2,27a1.089,1.089,0,0,1-.84-.36.955.955,0,0,1-.24-1.2l2.16-6.359A10.689,10.689,0,0,1,4.2,14.4,11.268,11.268,0,0,1,10.557,4.2,10.744,10.744,0,0,1,15.6,3h.6a11.405,11.405,0,0,1,10.8,10.678v.72a11.222,11.222,0,0,1-1.2,5.159A11.372,11.372,0,0,1,15.6,25.8a12.546,12.546,0,0,1-4.679-.96L4.558,27ZM15.6,5.4a8.768,8.768,0,0,0-3.959.96A8.878,8.878,0,0,0,6.6,14.4a8.768,8.768,0,0,0,.96,3.959,2.339,2.339,0,0,1,.12.96l-1.56,4.559,4.559-1.56a.939.939,0,0,1,.96.12,9.165,9.165,0,0,0,3.959.96,8.982,8.982,0,0,0,8.038-4.919,9.165,9.165,0,0,0,.96-3.959h0V13.8a8.864,8.864,0,0,0-8.518-8.4Z" transform="translate(-2.994 -3)" fill="#7075f9"/>
+</svg>
Index: lams_tool_nb/web/images/assess-icon7.svg
===================================================================
diff -u
--- lams_tool_nb/web/images/assess-icon7.svg	(revision 0)
+++ lams_tool_nb/web/images/assess-icon7.svg	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -0,0 +1,4 @@
+<svg id="book-open" xmlns="http://www.w3.org/2000/svg" width="24.2" height="22" viewBox="0 0 24.2 22">
+  <path id="Path_912" data-name="Path 912" d="M13.6,25a1.039,1.039,0,0,1-1.1-1.1,2.206,2.206,0,0,0-2.2-2.2H2.6a1.039,1.039,0,0,1-1.1-1.1V4.1A1.039,1.039,0,0,1,2.6,3H9.2a5.447,5.447,0,0,1,5.5,5.5V23.9A1.039,1.039,0,0,1,13.6,25ZM3.7,19.5h6.6a5.007,5.007,0,0,1,2.2.55V8.5A3.241,3.241,0,0,0,9.2,5.2H3.7Z" transform="translate(-1.5 -3)" fill="#7fdaa1"/>
+  <path id="Path_913" data-name="Path 913" d="M17.6,25a1.039,1.039,0,0,1-1.1-1.1V8.5A5.447,5.447,0,0,1,22,3h6.6a1.039,1.039,0,0,1,1.1,1.1V20.6a1.039,1.039,0,0,1-1.1,1.1H20.9a2.206,2.206,0,0,0-2.2,2.2A1.039,1.039,0,0,1,17.6,25ZM22,5.2a3.241,3.241,0,0,0-3.3,3.3V20.05a5.007,5.007,0,0,1,2.2-.55h6.6V5.2Z" transform="translate(-5.5 -3)" fill="#7fdaa1"/>
+</svg>
Index: lams_tool_nb/web/images/bell.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/chat.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/cross.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/dots.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/down-arw.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/down-arw.svg
===================================================================
diff -u
--- lams_tool_nb/web/images/down-arw.svg	(revision 0)
+++ lams_tool_nb/web/images/down-arw.svg	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="6" height="3" viewBox="106.348 227.75 6 3"><path d="m113.098 231.5-3-3-3 3" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#3c42e0" fill="transparent" data-name="Path 318"/></svg>
\ No newline at end of file
Index: lams_tool_nb/web/images/file.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/icon1.svg
===================================================================
diff -u
--- lams_tool_nb/web/images/icon1.svg	(revision 0)
+++ lams_tool_nb/web/images/icon1.svg	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;}</style></defs><path class="a" d="M4.5,17.163V20.5H7.833l9.83-9.83L14.33,7.334ZM20.24,8.089a.885.885,0,0,0,0-1.253l-2.08-2.08a.885.885,0,0,0-1.253,0L15.281,6.383l3.333,3.333L20.24,8.089Z" transform="translate(-4.5 -4.496)"/></svg>
\ No newline at end of file
Index: lams_tool_nb/web/images/icon2.svg
===================================================================
diff -u
--- lams_tool_nb/web/images/icon2.svg	(revision 0)
+++ lams_tool_nb/web/images/icon2.svg	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.99" height="16" viewBox="0 0 15.99 16"><defs><style>.a{fill:#fff;}</style></defs><path class="a" d="M19.655,8.35A8,8,0,1,0,21.735,16h-2.08a6,6,0,1,1-5.65-8,5.915,5.915,0,0,1,4.22,1.78L15.005,13h7V6Z" transform="translate(-6.015 -6)"/></svg>
\ No newline at end of file
Index: lams_tool_nb/web/images/icon3.svg
===================================================================
diff -u
--- lams_tool_nb/web/images/icon3.svg	(revision 0)
+++ lams_tool_nb/web/images/icon3.svg	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><defs><style>.a{fill:#fff;}</style></defs><g transform="translate(0 -3.762)"><g transform="translate(0 3.762)"><g transform="translate(0 0)"><path class="a" d="M17.352,11.307l-.1-.035-.372-.905.04-.093c1.126-2.606,1.048-2.684.861-2.873l-1.5-1.5a.4.4,0,0,0-.262-.106,9.471,9.471,0,0,0-2.558,1.025l-.089.041-.915-.376L12.425,6.4c-1.043-2.636-1.15-2.636-1.409-2.636H8.9c-.259,0-.376,0-1.343,2.64l-.036.1-.91.379L6.519,6.84a13.824,13.824,0,0,0-2.606-.973.4.4,0,0,0-.263.1l-1.5,1.5c-.191.192-.27.272.915,2.824l.044.095-.372.9-.091.036C0,12.372,0,12.473,0,12.745v2.121c0,.272,0,.385,2.648,1.354l.095.034.372.9-.04.092c-1.126,2.607-1.054,2.678-.863,2.872l1.5,1.5a.408.408,0,0,0,.264.106A9.506,9.506,0,0,0,6.534,20.7l.089-.042.915.378.036.093c1.043,2.635,1.151,2.635,1.41,2.635h2.121c.266,0,.377,0,1.344-2.642l.036-.1.912-.376.087.036a13.748,13.748,0,0,0,2.6.975.4.4,0,0,0,.264-.1l1.505-1.5c.189-.193.268-.272-.918-2.821l-.044-.1.372-.9.089-.035C20,15.151,20,15.048,20,14.777v-2.12C20,12.385,20,12.272,17.352,11.307ZM10,17.2a3.438,3.438,0,1,1,3.436-3.439A3.442,3.442,0,0,1,10,17.2Z" transform="translate(0 -3.762)"/></g></g></g></svg>
\ No newline at end of file
Index: lams_tool_nb/web/images/img1.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/info-icon.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/lams_logo_white.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/lines.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/men-profile.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/minus.svg
===================================================================
diff -u
--- lams_tool_nb/web/images/minus.svg	(revision 0)
+++ lams_tool_nb/web/images/minus.svg	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="2" viewBox="0 0 14 2"><defs><style>.a{fill:none;stroke:#3c42e0;stroke-linecap:round;stroke-width:2px;}</style></defs><line class="a" x2="12" transform="translate(1 1)"/></svg>
\ No newline at end of file
Index: lams_tool_nb/web/images/nata.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/pene.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/plus.svg
===================================================================
diff -u
--- lams_tool_nb/web/images/plus.svg	(revision 0)
+++ lams_tool_nb/web/images/plus.svg	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><defs><style>.a{fill:none;stroke:#3c42e0;stroke-linecap:round;stroke-width:2px;}</style></defs><g transform="translate(-1453 -593)"><line class="a" y2="12" transform="translate(1460 594)"/><line class="a" x2="12" transform="translate(1454 600)"/></g></svg>
\ No newline at end of file
Index: lams_tool_nb/web/images/polygon1x.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/profile-girl.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/ramiro.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/search.svg
===================================================================
diff -u
--- lams_tool_nb/web/images/search.svg	(revision 0)
+++ lams_tool_nb/web/images/search.svg	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18.614" height="18.619" viewBox="0 0 18.614 18.619"><defs><style>.a,.b{fill:none;stroke:#3c42e0;stroke-width:2px;}.b{stroke-linecap:round;}</style></defs><g transform="translate(1 1)"><circle class="a" cx="7.5" cy="7.5" r="7.5"/><line class="b" x1="2.98" y1="2.98" transform="translate(13.22 13.224)"/></g></svg>
\ No newline at end of file
Index: lams_tool_nb/web/images/table-graph.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/tick.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/up-arw.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/images/user-map.png
===================================================================
diff -u
Binary files differ
Index: lams_tool_nb/web/learner5.jsp
===================================================================
diff -u
--- lams_tool_nb/web/learner5.jsp	(revision 0)
+++ lams_tool_nb/web/learner5.jsp	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<%@ include file="/includes/taglibs.jsp"%>
+
+<lams:PageLearner>
+    <iframe src="${contentUrl}" style="width: 100%; height: 100vh; border: none"></iframe>
+</lams:PageLearner>
\ No newline at end of file
Index: lams_tool_nb/web/learnerContent5.jsp
===================================================================
diff -u
--- lams_tool_nb/web/learnerContent5.jsp	(revision 0)
+++ lams_tool_nb/web/learnerContent5.jsp	(revision 72bf0041a18e7e902404c65e55e167bf6ff84269)
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<%@ include file="/includes/taglibs.jsp"%>
+<%@ page import="org.lamsfoundation.lams.tool.noticeboard.NoticeboardConstants"%>
+<c:set var="lams">
+	<lams:LAMSURL />
+</c:set>
+
+<lams:html>
+	<lams:head>
+		<lams:css />
+		<title><fmt:message key="activity.title"/></title>
+		<script src="${lams}includes/javascript/jquery.js"></script>
+		<script src="${lams}includes/javascript/bootstrap.min.js" type="text/javascript"></script>
+		<lams:JSImport src="learning/includes/javascript/gate-check.js" />
+		<script type="text/javascript">
+			checkNextGateActivity('finishButton', '${nbLearnerForm.toolSessionID}', '', function(){
+				submitForm('finish');
+			});
+		</script>
+	</lams:head>
+
+	<body class="stripes">
+
+	<script type="text/javascript">
+		function disableFinishButton() {
+			var finishButton = document.getElementById("finishButton");
+			if (finishButton != null) {
+				finishButton.disabled = true;
+			}
+		}
+		function submitForm(methodName) {
+			var f = document.getElementById('nbLearnerForm');
+			f.action = methodName + ".do";
+			f.submit();
+		}
+	</script>
+	<div style="padding: 20px">
+		<div class="panel">
+			<c:out value="${nbLearnerForm.basicContent}" escapeXml="false" />
+		</div>
+
+		<form:form modelAttribute="nbLearnerForm" target="_self" onsubmit="disableFinishButton();" id="nbLearnerForm">
+		<form:hidden path="mode" />
+		<form:hidden path="toolSessionID" />
+
+		<c:if test="${userFinished and reflectOnActivity}">
+			<div class="panel">
+				<lams:out value="${reflectInstructions}" escapeHtml="true" />
+			</div>
+
+			<div class="bg-warning" id="reflectionEntry">
+				<c:choose>
+					<c:when test="${empty reflectEntry}">
+						<fmt:message key="message.no.reflection.available" />
+					</c:when>
+					<c:otherwise>
+						<lams:out escapeHtml="true" value="${reflectEntry}" />
+					</c:otherwise>
+				</c:choose>
+			</div>
+		</c:if>
+
+		<c:if test="${allowComments}">
+			<hr/>
+			<lams:Comments toolSessionId="${nbLearnerForm.toolSessionID}"
+						   toolSignature="<%=NoticeboardConstants.TOOL_SIGNATURE%>" likeAndDislike="${likeAndDislike}" anonymous="${anonymous}" />
+		</c:if>
+
+
+		<c:if test="${not nbLearnerForm.readOnly}">
+			<c:choose>
+				<c:when test="${reflectOnActivity}">
+
+					<button  name="continueButton" class="btn btn-sm btn-primary pull-right"
+							 onclick="submitForm('reflect')">
+						<fmt:message key="button.continue" />
+					</button>
+				</c:when>
+				<c:otherwise>
+
+
+					<a href="#nogo" id="finishButton" name="finishButton" class="btn btn-primary pull-right voffset10 na">
+						<c:choose>
+							<c:when test="${isLastActivity}">
+								<fmt:message key="button.submit" />
+							</c:when>
+							<c:otherwise>
+								<fmt:message key="button.finish" />
+							</c:otherwise>
+						</c:choose>
+
+					</a>
+				</c:otherwise>
+			</c:choose>
+		</c:if>
+	</div>
+	</form:form>
+
+</lams:html>
\ No newline at end of file