Index: lams_central/web/WEB-INF/tags/PageMonitor.tag
===================================================================
diff -u -rb59a58136ac5d8b2c6fbf0752dc4fd3a6b5f0389 -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_central/web/WEB-INF/tags/PageMonitor.tag	(.../PageMonitor.tag)	(revision b59a58136ac5d8b2c6fbf0752dc4fd3a6b5f0389)
+++ lams_central/web/WEB-INF/tags/PageMonitor.tag	(.../PageMonitor.tag)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -127,20 +127,43 @@
 		  			</nav>
 	  			</c:if>
 
-	            <main class="p-3" id="component-main-content" tabindex="-1">
-	            	<c:if test="${showHeader}">
-						<div class="tab-content m-3" id="tabs-content">
-							<div class="tab-pane fade show active"  id="tab-1-content" role="tabpanel" aria-labelledby="tab-1" tabindex="0"><jsp:include page="${tab1Jsp}"/></div>
-							<div class="tab-pane fade" 				id="tab-2-content" role="tabpanel" aria-labelledby="tab-2" tabindex="0"><jsp:include page="${tab2Jsp}"/></div>
-							<div class="tab-pane fade" 				id="tab-3-content" role="tabpanel" aria-labelledby="tab-3" tabindex="0"><jsp:include page="${tab3Jsp}"/></div>
-						</div>
-						
-						<input type="hidden" name="currentTab" id="currentTab" />
-					</c:if>
-					
-	                <jsp:doBody/>
+	            <main id="component-main-content" class="px-1 py-3" tabindex="-1">
+	            	<c:choose>
+	            		<c:when test="${showHeader}">
+							<div class="container-main tab-content m-3" id="tabs-content">
+								<div class="tab-pane fade show active"  id="tab-1-content" role="tabpanel" aria-labelledby="tab-1" tabindex="0"><jsp:include page="${tab1Jsp}"/></div>
+								<div class="tab-pane fade" 				id="tab-2-content" role="tabpanel" aria-labelledby="tab-2" tabindex="0"><jsp:include page="${tab2Jsp}"/></div>
+								<div class="tab-pane fade" 				id="tab-3-content" role="tabpanel" aria-labelledby="tab-3" tabindex="0"><jsp:include page="${tab3Jsp}"/></div>
+							</div>
+							
+							<input type="hidden" name="currentTab" id="currentTab" />
+	            		</c:when>
+	            		
+	            		<c:otherwise>
+			                <jsp:doBody/>
+	            		</c:otherwise>
+	            	</c:choose>
 	            </main>
 	        </div>
 	    </div>
+	    
+		<c:if test="${showHeader}">
+		    <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">
+		                    	<fmt:message key='label.cancel'/>
+		                    </button>
+		                    <button type="button" class="btn btn-primary" id="confirmationDialogConfirmButton">
+		                    	<fmt:message key='label.confirm'/>
+		                    </button>
+		                </div>
+		            </div>
+		        </div>
+		    </div>
+		</c:if>
     </body>
 </lams:html>
Index: lams_central/web/css/free.ui.jqgrid.custom.scss
===================================================================
diff -u -re977dc3c8ca28d9a515f34d0c390142ed24ae8d2 -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_central/web/css/free.ui.jqgrid.custom.scss	(.../free.ui.jqgrid.custom.scss)	(revision e977dc3c8ca28d9a515f34d0c390142ed24ae8d2)
+++ lams_central/web/css/free.ui.jqgrid.custom.scss	(.../free.ui.jqgrid.custom.scss)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -24,7 +24,7 @@
 }
 
 .ui-jqgrid .ui-jqgrid-bdiv {
-	overflow: inherit;
+	/*overflow: inherit;*/ /*removed as it prevents a scroll bar to appear*/
 }
 
 .ui-jqgrid-htable th {
@@ -178,4 +178,30 @@
 
 .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-btable .table-success {
 	background-color: rgba(0, 145, 74, 0.1);
+}
+
+/*   Copied from bootstrap 3 .css file to support hightlighting of selected rows */
+.ui-jqgrid.ui-jqgrid-bootstrap {
+	.table>tbody>tr.success>td,
+	.table>tbody>tr.success>th,
+	.table>tbody>tr>td.success,
+	.table>tbody>tr>th.success,
+	.table>tfoot>tr.success>td,
+	.table>tfoot>tr.success>th,
+	.table>tfoot>tr>td.success,
+	.table>tfoot>tr>th.success,
+	.table>thead>tr.success>td,
+	.table>thead>tr.success>th,
+	.table>thead>tr>td.success,
+	.table>thead>tr>th.success {
+		background-color: #dff0d8
+	}
+
+	.table-hover>tbody>tr.success:hover>td,
+	.table-hover>tbody>tr.success:hover>th,
+	.table-hover>tbody>tr:hover>.success,
+	.table-hover>tbody>tr>td.success:hover,
+	.table-hover>tbody>tr>th.success:hover {
+		background-color: #d0e9c6
+	}
 }
\ No newline at end of file
Index: lams_tool_assessment/conf/language/lams/ApplicationResources_en_AU.properties
===================================================================
diff -u -r244a9406a29ee43ba74f184246381dfb152ee2c0 -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_assessment/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision 244a9406a29ee43ba74f184246381dfb152ee2c0)
+++ lams_tool_assessment/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -321,6 +321,8 @@
 label.learning.summary.selected.by = Selected by:
 label.disclose.correct.answers = Disclose correct answers
 label.disclose.groups.answers = Disclose groups' answers
+label.disclosed.correct.answers = Correct answers have been disclosed
+label.disclosed.groups.answers = Groups' answers have been disclosed
 label.disclose.all.correct.answers = Disclose all correct answers
 label.disclose.all.groups.answers = Disclose all groups' answers
 label.prefix.sequential.letters.for.each.answer = Prefix sequential letters for each answer
Index: lams_tool_assessment/web/WEB-INF/tags/PageMonitor.tag
===================================================================
diff -u -rb59a58136ac5d8b2c6fbf0752dc4fd3a6b5f0389 -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_assessment/web/WEB-INF/tags/PageMonitor.tag	(.../PageMonitor.tag)	(revision b59a58136ac5d8b2c6fbf0752dc4fd3a6b5f0389)
+++ lams_tool_assessment/web/WEB-INF/tags/PageMonitor.tag	(.../PageMonitor.tag)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -127,20 +127,43 @@
 		  			</nav>
 	  			</c:if>
 
-	            <main class="p-3" id="component-main-content" tabindex="-1">
-	            	<c:if test="${showHeader}">
-						<div class="tab-content m-3" id="tabs-content">
-							<div class="tab-pane fade show active"  id="tab-1-content" role="tabpanel" aria-labelledby="tab-1" tabindex="0"><jsp:include page="${tab1Jsp}"/></div>
-							<div class="tab-pane fade" 				id="tab-2-content" role="tabpanel" aria-labelledby="tab-2" tabindex="0"><jsp:include page="${tab2Jsp}"/></div>
-							<div class="tab-pane fade" 				id="tab-3-content" role="tabpanel" aria-labelledby="tab-3" tabindex="0"><jsp:include page="${tab3Jsp}"/></div>
-						</div>
-						
-						<input type="hidden" name="currentTab" id="currentTab" />
-					</c:if>
-					
-	                <jsp:doBody/>
+	            <main id="component-main-content" class="px-1 py-3" tabindex="-1">
+	            	<c:choose>
+	            		<c:when test="${showHeader}">
+							<div class="container-main tab-content m-3" id="tabs-content">
+								<div class="tab-pane fade show active"  id="tab-1-content" role="tabpanel" aria-labelledby="tab-1" tabindex="0"><jsp:include page="${tab1Jsp}"/></div>
+								<div class="tab-pane fade" 				id="tab-2-content" role="tabpanel" aria-labelledby="tab-2" tabindex="0"><jsp:include page="${tab2Jsp}"/></div>
+								<div class="tab-pane fade" 				id="tab-3-content" role="tabpanel" aria-labelledby="tab-3" tabindex="0"><jsp:include page="${tab3Jsp}"/></div>
+							</div>
+							
+							<input type="hidden" name="currentTab" id="currentTab" />
+	            		</c:when>
+	            		
+	            		<c:otherwise>
+			                <jsp:doBody/>
+	            		</c:otherwise>
+	            	</c:choose>
 	            </main>
 	        </div>
 	    </div>
+	    
+		<c:if test="${showHeader}">
+		    <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">
+		                    	<fmt:message key='label.cancel'/>
+		                    </button>
+		                    <button type="button" class="btn btn-primary" id="confirmationDialogConfirmButton">
+		                    	<fmt:message key='label.confirm'/>
+		                    </button>
+		                </div>
+		            </div>
+		        </div>
+		    </div>
+		</c:if>
     </body>
 </lams:html>
Index: lams_tool_assessment/web/includes/javascript/chart.js
===================================================================
diff -u -rd6448910114beeaf0bf28ace95db98870dfdb80b -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_assessment/web/includes/javascript/chart.js	(.../chart.js)	(revision d6448910114beeaf0bf28ace95db98870dfdb80b)
+++ lams_tool_assessment/web/includes/javascript/chart.js	(.../chart.js)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -5,6 +5,20 @@
 	gray: '#6c757d'
 };
 
+function drawCompletionCharts(toolContentId, animate) {
+
+	const source = new EventSource( WEB_APP_URL + 'monitoring/getCompletionChartsData.do?toolContentId=' + toolContentId);
+
+	source.onmessage = function (event) {
+		if (!event.data) {
+			return;
+		}
+		var data = JSON.parse(decodeURIComponent(event.data));
+		drawActivityCompletionChart(data, animate);
+		drawAnsweredQuestionsChart(data, animate);
+	}
+}
+
 function drawActivityCompletionChart(data, animate){
 	// prepare data for the chart
 	let notStartedLearners = data.possibleLearners.filter(function (learner) {
@@ -63,7 +77,7 @@
 					GRAPH_COLORS.green
 				],
 				borderWidth : 1,
-				borderColor : COLORS.gray
+				borderColor : GRAPH_COLORS.gray
 			} ],
 			labels : [ LABELS.ACTIVITY_COMPLETION_CHART_POSSIBLE_LEARNERS,
 				LABELS.ACTIVITY_COMPLETION_CHART_STARTED_LEARNERS,
Index: lams_tool_assessment/web/pages/learning/parts/allquestions.jsp
===================================================================
diff -u -rddd6d9e928bdcfbd5dbb76e89351a9a7ec16ee8b -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_assessment/web/pages/learning/parts/allquestions.jsp	(.../allquestions.jsp)	(revision ddd6d9e928bdcfbd5dbb76e89351a9a7ec16ee8b)
+++ lams_tool_assessment/web/pages/learning/parts/allquestions.jsp	(.../allquestions.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -102,7 +102,7 @@
                     <%@ include file="confidencelevel.jsp"%>
                 </c:if>
 
-                    <%--Display jsutification for each question --%>
+                <%--Display jsutification for each question --%>
                 <c:if test="${(assessment.allowAnswerJustification || (question.type == 8 && question.hedgingJustificationEnabled))
 							&& justificationEligible && (!isLeadershipEnabled or isUserLeader)}">
                     <div class="answer-justification-container mt-4 mb-2">
@@ -145,7 +145,7 @@
                 </button>
 
                 <div id="question-etherpad-${question.uid}" class="question-etherpad-collapse collapse">
-                    <div class="panel panel-default question-etherpad">
+                    <div class="card question-etherpad">
                         <lams:Etherpad groupId="etherpad-assessment-${toolSessionID}-question-${question.uid}"
                                        showControls="${mode eq 'teacher'}" showChat="false" heightAutoGrow="true" showOnDemand="true"
                         >${questionEtherpadContent}</lams:Etherpad>
Index: lams_tool_assessment/web/pages/learning/results/allquestions.jsp
===================================================================
diff -u -r62268e7ff195cf0f4cd2f3cdbb79b603ade5449d -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_assessment/web/pages/learning/results/allquestions.jsp	(.../allquestions.jsp)	(revision 62268e7ff195cf0f4cd2f3cdbb79b603ade5449d)
+++ lams_tool_assessment/web/pages/learning/results/allquestions.jsp	(.../allquestions.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -110,67 +110,88 @@
 
     <div class="card lcard">
         <div class="card-header">
-
-            <c:if test="${param.embedded and empty toolSessionID}">
-                <div class="monitor-question-buttons">
+			<div class="d-flex flex-column float-end text-right align-items-end">
+				<c:if test="${assessment.displayMaxMark || question.answerRequired}">
+					<div class="mb-2">
+			            <c:if test="${assessment.displayMaxMark}">
+							<span class="float-end badge alert alert-info fw-normal m-1 p-1">
+								<fmt:message key="label.learning.max.mark">
+			                        <fmt:param value="${question.maxMark}" />
+			                    </fmt:message>
+							</span>
+			            </c:if>
+			
+			            <c:if test="${question.answerRequired}">
+							<span class="asterisk float-end">
+								<i class="fa fa-asterisk text-danger"
+			                       title="<fmt:message key="label.answer.required"/>"
+			                       alt="<fmt:message key="label.answer.required"/>"></i>
+							</span>
+			            </c:if>
+					</div>
+				</c:if>
+            
+           		<c:if test="${param.embedded and empty toolSessionID}">
                     <c:if test="${assessment.allowDiscloseAnswers and showQuestionMonitoringActionButtons}">
-                        <div class="btn-group-sm disclose-button-group ms-2" questionUid="${question.uid}">
+                        <div class="btn-group disclose-button-group ms-2 mb-3" questionUid="${question.uid}">
                                 <%-- Allow disclosing correct answers only for multiple choice questions --%>
                             <c:if test="${question.type == 1}">
-                                <div class="btn btn-secondary disclose-correct-button"
-                                <c:if test="${question.correctAnswersDisclosed}">
-                                     disabled="disabled"><i class="fa fa-check">&nbsp;</i
-                                </c:if>>
-                                    <fmt:message key="label.disclose.correct.answers" />
-                                </div>
+                                <button type="button" class="btn btn-sm btn-light disclose-correct-button"
+                                		${question.correctAnswersDisclosed ? "disabled='disabled'" : ""}>
+                                	<c:choose>
+                                		<c:when test="${question.correctAnswersDisclosed}">
+                                			<i class="fa fa-check text-success me-1"></i>
+                                			<fmt:message key="label.disclosed.correct.answers" />
+                                		</c:when>
+                                		
+                                		<c:otherwise>
+                                			<i class="fa-solid fa-eye me-1"></i>
+                                			<fmt:message key="label.disclose.correct.answers" />
+                                		</c:otherwise>
+                                	</c:choose>
+                                </button>
                             </c:if>
-                            <div class="btn btn-secondary disclose-groups-button"
-                                 <c:if test="${question.groupsAnswersDisclosed}">disabled="disabled">
-                                <i class="fa fa-check">&nbsp;</i</c:if>>
-                                <fmt:message key="label.disclose.groups.answers" />
-                            </div>
+                            
+                            <button type="button" class="btn btn-sm btn-light disclose-groups-button"
+		                            ${question.groupsAnswersDisclosed ? "disabled='disabled'" : ""}>
+		                        <c:choose>
+                                	<c:when test="${question.groupsAnswersDisclosed}">
+                                		<i class="fa fa-check text-success me-1"></i>
+                                		<fmt:message key="label.disclosed.groups.answers" />
+                                	</c:when>
+                                		
+                                	<c:otherwise>
+                                		<i class="fa-solid fa-eye me-1"></i>
+                                		<fmt:message key="label.disclose.groups.answers" />
+                                	</c:otherwise>
+                                </c:choose>
+                            </button>
                         </div>
                     </c:if>
 
                     <c:if test="${param.showQuestionDetailsButton or assessment.allowDiscussionSentiment}">
-                        <div class="btn-group-sm mt-3">
+                        <div class="btn-group">
                             <c:if test="${param.showQuestionDetailsButton}">
-                                <a class="thickbox btn btn-secondary"
-                                   href='<c:url value="/monitoring/questionSummary.do?sessionMapID=${sessionMapID}"/>&questionUid=${question.uid}&KeepThis=true&TB_iframe=true&modal=true'>
-                                    <i class="fa fa-info-circle"></i>&nbsp; <fmt:message
-                                        key="label.monitoring.summary.results.question" />
+                                <a class="thickbox btn btn-sm btn-light"
+                                		href='<c:url value="/monitoring/questionSummary.do?sessionMapID=${sessionMapID}"/>&questionUid=${question.uid}&KeepThis=true&TB_iframe=true&modal=true'>
+                                    <i class="fa fa-info-circle"></i>&nbsp; 
+                                    <fmt:message key="label.monitoring.summary.results.question" />
                                 </a>
                             </c:if>
 
                             <c:if test="${assessment.allowDiscussionSentiment and showQuestionMonitoringActionButtons}">
-                                <div id="discussion-sentiment-start-button-${question.uid}"
-                                     class="btn btn-secondary discussion-sentiment-start-button"
-                                     onClick="javascript:startDiscussionSentiment(${question.uid}, null, true)">
-                                    <i class="fa fa-comments"></i>&nbsp;
+                                <button type="button" id="discussion-sentiment-start-button-${question.uid}"
+                                		class="btn btn-sm btn-light discussion-sentiment-start-button"
+                                		onClick="javascript:startDiscussionSentiment(${question.uid}, null, true)">
+                            		<i class="fa fa-comments"></i>&nbsp;
                                     <fmt:message key="label.monitoring.discussion.start" />
-                                </div>
+                                </button>
                             </c:if>
                         </div>
                     </c:if>
-                </div>
-            </c:if>
+            	</c:if>
+            </div>
 
-            <c:if test="${assessment.displayMaxMark}">
-				<span class="float-end badge alert alert-info fw-normal m-1 p-1">
-					<fmt:message key="label.learning.max.mark">
-                        <fmt:param value="${question.maxMark}" />
-                    </fmt:message>
-				</span>
-            </c:if>
-
-            <c:if test="${question.answerRequired}">
-				<span class="asterisk float-end">
-					<i class="fa fa-asterisk text-danger"
-                       title="<fmt:message key="label.answer.required"/>"
-                       alt="<fmt:message key="label.answer.required"/>"></i>
-				</span>
-            </c:if>
-
             <div class="card-title">
                 <c:if test="${assessment.numbered}">
                     ${questionIndex + sessionMap.questionNumberingOffset}.
@@ -300,7 +321,7 @@
             </c:if>
 
             <c:if test="${param.embedded and empty toolSessionID and assessment.allowDiscussionSentiment}">
-                <div id="discussion-sentiment-chart-card-container-${question.uid}"></div>
+                <div id="discussion-sentiment-chart-card-container-${question.uid}" class="mt-3"></div>
             </c:if>
         </div>
     </div>
Index: lams_tool_assessment/web/pages/learning/results/attemptsummary.jsp
===================================================================
diff -u -r169520b6cf03e63865f09db66f593677b1c5580b -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_assessment/web/pages/learning/results/attemptsummary.jsp	(.../attemptsummary.jsp)	(revision 169520b6cf03e63865f09db66f593677b1c5580b)
+++ lams_tool_assessment/web/pages/learning/results/attemptsummary.jsp	(.../attemptsummary.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -1,4 +1,4 @@
-<div id="attempt-summary" class="alert alert-secondary shadow mx-auto col-sm-8 ltable no-header table-hover">
+<div id="attempt-summary" class="ltable table-hover no-header alert alert-secondary shadow col-sm-8 mx-auto">
 	<div class="row">
 		<div class="col-sm-5">
 			<fmt:message key="label.learning.summary.started.on" />
Index: lams_tool_assessment/web/pages/learning/results/multiplechoice.jsp
===================================================================
diff -u -r69b324e75f8749ee47d9e2f55da2183102bc434c -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_assessment/web/pages/learning/results/multiplechoice.jsp	(.../multiplechoice.jsp)	(revision 69b324e75f8749ee47d9e2f55da2183102bc434c)
+++ lams_tool_assessment/web/pages/learning/results/multiplechoice.jsp	(.../multiplechoice.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -46,30 +46,31 @@
 							<c:choose>
 								<c:when test="${question.multipleAnswersAllowed}">
 									<input type="checkbox" name="question${questionIndex}_${option.displayOrder}" id="option-${questionIndex}-${option.uid}" 
-										class="form-check-input" 
-										value="${true}"
-										<c:if test="${option.answerBoolean}">checked="checked"</c:if>
-										disabled="disabled"
-									/>
+											class="form-check-input" 
+											value="${true}"
+											<c:if test="${option.answerBoolean}">checked="checked"</c:if>
+											disabled="disabled"/>
 								</c:when>
 								<c:otherwise>
 									<input type="radio" name="question${questionIndex}" id="option-${questionIndex}-${option.uid}"
-										class="form-check-input" 
-										value="${option.displayOrder}"
-				 						<c:if test="${option.answerBoolean}">checked="checked"</c:if>
-				 						disabled="disabled"
-									/>
+											class="form-check-input" 
+											value="${option.displayOrder}"
+				 							<c:if test="${option.answerBoolean}">checked="checked"</c:if>
+				 							disabled="disabled"/>
 								</c:otherwise>
 							</c:choose>
-						</c:if>
 							
-						<label class="form-check-label" for="option-${questionIndex}-${option.uid}">
-							<c:if test="${question.prefixAnswersWithLetters}">
-					 			&nbsp;${option.formatPrefixLetter(answerStatus.index)}
-			 	            </c:if>	
-			 	                
-			 	            <c:out value="${option.name}" escapeXml="false" />
-		 	            </label>
+							<label class="form-check-label" for="option-${questionIndex}-${option.uid}">
+						</c:if>
+
+						<c:if test="${question.prefixAnswersWithLetters}">
+					 		&nbsp;${option.formatPrefixLetter(answerStatus.index)}
+			 	        </c:if>
+			 	        <c:out value="${option.name}" escapeXml="false" />
+			 	        
+			 	        <c:if test="${not empty toolSessionID}">
+		 	            	</label>
+		 	            </c:if>
 	 	            </div>
 				</div>
 					
Index: lams_tool_assessment/web/pages/monitoring/editactivity.jsp
===================================================================
diff -u -rf04cfe28c0e223b4feca038d911fcb6ce2f40032 -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_assessment/web/pages/monitoring/editactivity.jsp	(.../editactivity.jsp)	(revision f04cfe28c0e223b4feca038d911fcb6ce2f40032)
+++ lams_tool_assessment/web/pages/monitoring/editactivity.jsp	(.../editactivity.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -2,40 +2,38 @@
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 <c:set var="assessment" value="${sessionMap.assessment}"/>
 
-<lams:Alert id="editWarning" type="warning" close="false">
+<lams:Alert5 id="editWarning" type="warning">
     <fmt:message key="message.monitoring.edit.activity.warning" />
-</lams:Alert>
+</lams:Alert5>
 
-<table class="table table-condensed">
-	<tr>
-		<td width="10%">
+<div class="ltable no-header">
+	<div class="row">
+		<div class="col-2">
 			<fmt:message key="label.authoring.basic.title" />:
-		</td>
-		<td>
+		</div>
+		<div class="col">
 			<c:out value="${assessment.title}" escapeXml="true" />
-		</td>
-	</tr>
+		</div>
+	</div>
 
-	<tr>
-		<td width="10%" valign="top">
+	<div class="row">
+		<div class="col-2">
 			<fmt:message key="label.authoring.basic.instruction" />:
-		</td>
-		<td>
+		</div>
+		<div class="col">
 			<c:out value="${assessment.instructions}" escapeXml="false" />
-		</td>
-	</tr>
+		</div>
+	</div>
+</div>
 
-	<tr>
-		<td colspan="2">
-			<form id='define-later-form' method='post' action='../authoring/definelater.do' target='definelater'>
-				<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
-				<input type="hidden" name="toolContentID" value="${sessionMap.toolContentID}" />
-				<input type="hidden" name="contentFolderID" value="${sessionMap.contentFolderID}" />
-			</form>
+<div class="float-end">
+	<form id='define-later-form' method='post' action='../authoring/definelater.do' target='definelater'>
+		<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
+		<input type="hidden" name="toolContentID" value="${sessionMap.toolContentID}" />
+		<input type="hidden" name="contentFolderID" value="${sessionMap.contentFolderID}" />
+	</form>
 
-			<a href="#nogo" onclick="javascript:launchDefineLaterPopup()" class="btn btn-default pull-right">
-				<fmt:message key="label.monitoring.edit.activity.edit" />
-			</a>
-		</td>
-	</tr>
-</table>
+	<button type="button" onclick="launchDefineLaterPopup()" class="btn btn-secondary btn-icon-pen">
+		<fmt:message key="label.monitoring.edit.activity.edit" />
+	</button>
+</div>
Index: lams_tool_assessment/web/pages/monitoring/monitoring.jsp
===================================================================
diff -u -r5523969e2d7fc452301bf0a8403e5afbbae6c92a -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_assessment/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 5523969e2d7fc452301bf0a8403e5afbbae6c92a)
+++ lams_tool_assessment/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -5,154 +5,7 @@
 <c:set var="sessionDtos" value="${sessionMap.sessionDtos}"/>
 <c:set var="assessment" value="${sessionMap.assessment}"/>
 
-<lams:html>
-	<lams:head>
-		<title><c:out value="${assessment.title}" /></title>
-		
-		<%@ include file="/common/tabbedheader.jsp" %>
-		<link href="${lams}css/jquery-ui-bootstrap-theme.css" rel="stylesheet" type="text/css">
-		<link href="${lams}css/jquery-ui.timepicker.css" rel="stylesheet" type="text/css">
-		<link href="${lams}css/thickbox.css" rel="stylesheet" rel="stylesheet" type="text/css">
-		<link href="${lams}css/free.ui.jqgrid.min.css" rel="stylesheet" type="text/css" >
- 		<lams:css suffix="chart"/>
- 		<link href="${lams}css/jquery.jqGrid.confidence-level-formattter.css" rel="stylesheet" type="text/css">
- 		<c:if test="${not empty codeStyles}">
-			<link rel="stylesheet" type="text/css" href="${lams}css/codemirror.css" />
-		</c:if>
-	
- 		<style>
-	 		.ui-jqdialog.ui-jqgrid-bootstrap .ui-jqdialog-titlebar, .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-caption {
-				background-color: #f5f5f5;
-	 		}
-	  		
-	  		#completion-charts-container > div {
-	  			padding: 5rem 2rem;
-	  		}
-	  		
-	  		pre {
-				background-color: initial;
-				border: none;
-			}
-			
-			.requires-grading {
-				background-color: rgba(255, 195, 55, .6);
-			}
- 		</style>
- 		
-		<lams:JSImport src="includes/javascript/portrait.js" />
-		<script>
-	        // avoid name clash between bootstrap and jQuery UI
-	        $.fn.bootstrapTooltip = $.fn.tooltip.noConflict();
-        
-			var LAMS_URL    = '<lams:LAMSURL />',
-				WEB_APP_URL = '<lams:WebAppURL />',
-				LABELS = {
-					ACTIVITY_COMPLETION_CHART_TITLE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.completion"/></spring:escapeBody>',
-					ACTIVITY_COMPLETION_CHART_POSSIBLE_LEARNERS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.completion.possible"/></spring:escapeBody>',
-					ACTIVITY_COMPLETION_CHART_STARTED_LEARNERS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.completion.started"/></spring:escapeBody>',
-					ACTIVITY_COMPLETION_CHART_COMPLETED_LEARNERS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.completion.completed"/></spring:escapeBody>',
-					ANSWERED_QUESTIONS_CHART_TITLE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.answered.questions"/></spring:escapeBody>',
-					ANSWERED_QUESTIONS_CHART_TITLE_GROUPS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.answered.questions.groups"/></spring:escapeBody>',
-					ANSWERED_QUESTIONS_CHART_X_AXIS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.answered.questions.x.axis"/></spring:escapeBody>',
-					ANSWERED_QUESTIONS_CHART_Y_AXIS_STUDENTS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.answered.questions.y.axis.students"/></spring:escapeBody>',
-					ANSWERED_QUESTIONS_CHART_Y_AXIS_GROUPS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.answered.questions.y.axis.groups"/></spring:escapeBody>'
-				},
-				// pass settings to monitorToolSummaryAdvanced.js
-			    submissionDeadlineSettings = {
-					lams: '<lams:LAMSURL />',
-					submissionDeadline: '${submissionDeadline}',
-					submissionDateString: '${submissionDateString}',
-					setSubmissionDeadlineUrl: '<c:url value="/monitoring/setSubmissionDeadline.do"/>?<csrf:token/>',
-					toolContentID: '<c:out value="${param.toolContentID}" />',
-					messageNotification: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="monitor.summary.notification" /></spring:escapeBody>',
-					messageRestrictionSet: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="monitor.summary.date.restriction.set" /></spring:escapeBody>',
-					messageRestrictionRemoved: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="monitor.summary.date.restriction.removed" /></spring:escapeBody>'
-				},
-				confidenceLevelsSettings = {
-					type: "${assessment.confidenceLevelsType}",
-					LABEL_NOT_CONFIDENT: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.not.confident" /></spring:escapeBody>',
-					LABEL_CONFIDENT: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.confident" /></spring:escapeBody>',
-					LABEL_VERY_CONFIDENT: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.very.confident" /></spring:escapeBody>',
-					LABEL_NOT_SURE: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.not.sure" /></spring:escapeBody>',
-					LABEL_SURE: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.sure" /></spring:escapeBody>',
-					LABEL_VERY_SURE: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.very.sure" /></spring:escapeBody>'
-				};
-		</script>
-		<lams:JSImport src="includes/javascript/common.js" />
- 		<script type="text/javascript" src="${lams}includes/javascript/thickbox.js"></script>
- 		<lams:JSImport src="includes/javascript/monitorToolSummaryAdvanced.js" />
-		<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.plugin.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.timepicker.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.blockUI.js"></script> 
- 		<script type="text/javascript" src="${lams}includes/javascript/free.jquery.jqgrid.min.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/chartjs/chart.umd.js"></script>
- 		<lams:JSImport src="includes/javascript/chart.js" relative="true" />
- 		<script type="text/javascript" src="${lams}includes/javascript/jquery.cookie.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.countdown.js"></script>
- 		<script type="text/javascript" src="${lams}includes/javascript/download.js"></script>
- 		<lams:JSImport src="includes/javascript/portrait.js" />
- 		<script type="text/javascript" src="${lams}includes/javascript/jquery.jqGrid.confidence-level-formattter.js"></script>
- 		
-		<c:if test="${not empty codeStyles}">
-			<script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/runmode-standalone.js"></script>
-			<script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/colorize.js"></script>
-		</c:if>
-		<%-- codeStyles is a set, so each code style will be listed only once --%>
-		<c:forEach items="${codeStyles}" var="codeStyle">
-			<c:choose>
-				<c:when test="${codeStyle == 1}">
-					<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/python.js"></script>
-				</c:when>
-				<c:when test="${codeStyle == 2}">
-					<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/javascript.js"></script>
-				</c:when>
-				<c:when test="${codeStyle >= 3}">
-					<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/clike.js"></script>
-				</c:when>
-			</c:choose>
-		</c:forEach>
-		
-		<script>        
-		    function doSelectTab(tabId) {
-		    	if ( tabId == 3 )
-		    		doStatistic();
-			   	selectTab(tabId);
-		    }
-		    
-			function doStatistic(){
-				var url = '<c:url value="/monitoring/statistic.do?sessionMapID=${sessionMapID}"/>';
-				$.ajaxSetup({ cache: true });
-				$("#statisticArea").load(
-					url,
-					{
-						toolContentID: <c:out value="${param.toolContentID}" />, 
-						reqID: (new Date()).getTime()
-					}
-				);
-			}       
-		</script>	  
-	</lams:head>
-	
-	<body class="stripes">		
-		<c:set var="title"><fmt:message key="label.author.title" /></c:set>
-	 	<lams:Page type="navbar" title="${title}"> 
-	
-			<lams:Tabs control="true" title="${title}" helpToolSignature="<%= AssessmentConstants.TOOL_SIGNATURE %>" helpModule="monitoring" refreshOnClickAction="javascript:location.reload();">
-				<lams:Tab id="1" key="monitoring.tab.summary"/>
-				<lams:Tab id="2" key="monitoring.tab.edit.activity"/>
-				<lams:Tab id="3" key="monitoring.tab.statistics"/>
-			</lams:Tabs>
-	
-	  		<lams:TabBodyArea>
-				<lams:TabBodys>
-					<lams:TabBody id="1" page="summary.jsp" />
-					<lams:TabBody id="2" page="editactivity.jsp" />			
-					<lams:TabBody id="3" page="statistic.jsp" />
-				</lams:TabBodys> 
-			</lams:TabBodyArea> 
-	
-			<div id="footer"></div>
-		</lams:Page>
-	</body>
-</lams:html>
\ No newline at end of file
+<c:set var="title"><fmt:message key="label.author.title" /></c:set>
+<lams:PageMonitor title="${title}" 
+		helpToolSignature="<%= AssessmentConstants.TOOL_SIGNATURE %>"
+		initialTabId="${initialTabId}"/>
\ No newline at end of file
Index: lams_tool_assessment/web/pages/monitoring/parts/advanceoptions.jsp
===================================================================
diff -u -r0356b71a54403d2a4f45a3b90e5fab4fc3c11dd7 -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_assessment/web/pages/monitoring/parts/advanceoptions.jsp	(.../advanceoptions.jsp)	(revision 0356b71a54403d2a4f45a3b90e5fab4fc3c11dd7)
+++ lams_tool_assessment/web/pages/monitoring/parts/advanceoptions.jsp	(.../advanceoptions.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -2,14 +2,13 @@
 
 <c:set var="adTitle"><fmt:message key="monitor.summary.th.advancedSettings" /></c:set>
 <lams:AdvancedAccordian title="${adTitle}">     
-	<table class="table table-striped table-condensed">
-
-		<tr>
-			<td>
+	<div class="ltable table-striped table-sm no-header mb-0">
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.use.select.leader.tool.output" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col">
 				<c:choose>
 					<c:when test="${assessment.useSelectLeaderToolOuput}">
 						<fmt:message key="label.on" />
@@ -18,15 +17,15 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
+			</div>
+		</div>
 		
-		<tr>
-			<td>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.questions.per.page" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col">
 				<c:choose>
 					<c:when test="${assessment.questionsPerPage == -1}">
 						<fmt:message key="label.authoring.advance.sections" />
@@ -38,15 +37,15 @@
 						<c:out value="${assessment.questionsPerPage}" escapeXml="true"/>
 					</c:otherwise>
 				</c:choose>
-			</td>
-		</tr>
+			</div>
+		</div>
 		
-		<tr>
-			<td>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.shuffle.questions" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col">
 				<c:choose>
 					<c:when test="${assessment.shuffled}">
 						<fmt:message key="label.on" />
@@ -55,15 +54,15 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
+			</div>
+		</div>
 
-		<tr>
-			<td>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.shuffle.answers" />
-			</td>
+			</div>
 
-			<td>
+			<div class="col">
 				<c:choose>
 					<c:when test="${assessment.shuffledAnswers}">
 						<fmt:message key="label.on" />
@@ -72,15 +71,15 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>
-			</td>
-		</tr>
+			</div>
+		</div>
 
-		<tr>
-			<td>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.numbered.questions" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col">
 				<c:choose>
 					<c:when test="${assessment.numbered}">
 						<fmt:message key="label.on" />
@@ -89,15 +88,15 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
+			</div>
+		</div>
 		
-		<tr>
-			<td>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.attempts.allowed" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col">
 				<c:choose>
 					<c:when test="${assessment.attemptsAllowed == 0}">
 						<fmt:message key="label.authoring.advance.unlimited" />
@@ -106,15 +105,15 @@
 						<c:out value="${assessment.attemptsAllowed}" escapeXml="true"/>
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
+			</div>
+		</div>
 		
-		<tr>
-			<td>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.passing.mark" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col">
 				<c:choose>
 					<c:when test="${assessment.passingMark == 0}">
 						-
@@ -123,15 +122,15 @@
 						<c:out value="${assessment.passingMark}" escapeXml="true"/>
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
+			</div>
+		</div>
 		
-		<tr>
-			<td>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.allow.students.overall.feedback" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col">
 				<c:choose>
 					<c:when test="${assessment.allowOverallFeedbackAfterQuestion}">
 						<fmt:message key="label.on" />
@@ -140,15 +139,15 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
+			</div>
+		</div>
 		
-		<tr>
-			<td>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.allow.students.question.feedback" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col">
 				<c:choose>
 					<c:when test="${assessment.allowQuestionFeedback}">
 						<fmt:message key="label.on" />
@@ -157,15 +156,15 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
+			</div>
+		</div>
 		
-		<tr>
-			<td>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.disclose.answers" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col">
 				<c:choose>
 					<c:when test="${assessment.allowDiscloseAnswers}">
 						<fmt:message key="label.on" />
@@ -174,15 +173,15 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
+			</div>
+		</div>
 		
-		<tr>
-			<td>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.allow.students.right.answers" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col">
 				<c:choose>
 					<c:when test="${assessment.allowRightAnswersAfterQuestion}">
 						<fmt:message key="label.on" />
@@ -191,14 +190,14 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
-		<tr>
-			<td>
+			</div>
+		</div>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.allow.students.wrong.answers" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col">
 				<c:choose>
 					<c:when test="${assessment.allowWrongAnswersAfterQuestion}">
 						<fmt:message key="label.on" />
@@ -207,14 +206,14 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>	
-		<tr>
-			<td>
+			</div>
+		</div>	
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.allow.students.grades" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col">
 				<c:choose>
 					<c:when test="${assessment.allowGradesAfterAttempt}">
 						<fmt:message key="label.on" />
@@ -223,14 +222,14 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
-		<tr>
-			<td>
+			</div>
+		</div>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.allow.students.history.responses" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col">
 				<c:choose>
 					<c:when test="${assessment.allowHistoryResponses}">
 						<fmt:message key="label.on" />
@@ -239,14 +238,14 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
-		<tr>
-			<td>
+			</div>
+		</div>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.answer.justification" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col">
 				<c:choose>
 					<c:when test="${assessment.allowAnswerJustification}">
 						<fmt:message key="label.on" />
@@ -255,14 +254,14 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
-		<tr>
-			<td>
+			</div>
+		</div>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.discussion" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col">
 				<c:choose>
 					<c:when test="${assessment.allowDiscussionSentiment}">
 						<fmt:message key="label.on" />
@@ -271,14 +270,14 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
-		<tr>
-			<td>
+			</div>
+		</div>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.enable.confidence.levels" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col">
 				<c:choose>
 					<c:when test="${assessment.enableConfidenceLevels}">
 						<fmt:message key="label.on" />
@@ -287,14 +286,14 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
-		<tr>
-			<td>
+			</div>
+		</div>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advanced.notify.on.attempt.completion" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col">
 				<c:choose>
 					<c:when test="${assessment.notifyTeachersOnAttemptCompletion}">
 						<fmt:message key="label.on" />
@@ -303,7 +302,7 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
-	</table>
+			</div>
+		</div>
+	</div>
 </lams:AdvancedAccordian>
\ No newline at end of file
Fisheye: Tag 3d1c6963589452c441b1670c2eecf3eb85a128a5 refers to a dead (removed) revision in file `lams_tool_assessment/web/pages/monitoring/parts/dateRestriction.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_assessment/web/pages/monitoring/parts/discloseAnswers.jsp
===================================================================
diff -u -rd6448910114beeaf0bf28ace95db98870dfdb80b -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_assessment/web/pages/monitoring/parts/discloseAnswers.jsp	(.../discloseAnswers.jsp)	(revision d6448910114beeaf0bf28ace95db98870dfdb80b)
+++ lams_tool_assessment/web/pages/monitoring/parts/discloseAnswers.jsp	(.../discloseAnswers.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -115,6 +115,7 @@
 	}
 
 	function disabledAndCheckButton(button){
-		button.attr('disabled', true).html('<i class="fa fa-check">&nbsp;</i>' + button.text());
+		button.find('i').remove();
+		button.attr('disabled', true).html('<i class="fa fa-check text-success">&nbsp;</i>' + button.text());
 	}
 </script>
\ No newline at end of file
Index: lams_tool_assessment/web/pages/monitoring/parts/masterDetailLoadUp.jsp
===================================================================
diff -u -r7e76bc278889d21a9d70b4b72562ef2f3062aec8 -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_assessment/web/pages/monitoring/parts/masterDetailLoadUp.jsp	(.../masterDetailLoadUp.jsp)	(revision 7e76bc278889d21a9d70b4b72562ef2f3062aec8)
+++ lams_tool_assessment/web/pages/monitoring/parts/masterDetailLoadUp.jsp	(.../masterDetailLoadUp.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -3,48 +3,49 @@
 
 <script type="text/javascript">
     function masterDetailLoadUp() {
+        //hide user summary container to prevent sudden movements of the page; use "visibilty" instead of "display" to keep previous height 
+    	$("#user-summary-container${param.tableName}").css('visibility', 'hidden');
         jQuery("#userSummary${param.tableName}").clearGridData().setGridParam({scrollOffset: 18});
 
         <c:forEach var="questionResult" items="${assessmentResult.questionResults}" varStatus="i">
         <c:set var="question" value="${questionResult.questionDto}"/>
         <c:set var="title">
-        <c:out value="${questionResult.questionDto.titleEscaped}" escapeXml="true"/>
+        	<c:out value="${questionResult.questionDto.titleEscaped}" escapeXml="true"/>
         </c:set>
         var responseStr = "";
         <%@ include file="userresponse.jsp"%>
 
         var table = jQuery("#userSummary${param.tableName}");
-        <c:set var="requiresMarking"
-               value="${empty questionResult.markedBy and question.type eq 6 and questionResult.mark eq 0}" />
+        <c:set var="requiresMarking" value="${empty questionResult.markedBy and question.type eq 6 and questionResult.mark eq 0}" />
         table.addRowData(${i.index + 1}, {
             id: "${i.index + 1}",
             questionResultUid: "${questionResult.uid}",
             title: "${fn:escapeXml(title)}",
             response: responseStr,
             <c:if test="${sessionMap.assessment.enableConfidenceLevels}">
-            confidence: "${question.type == 8 ? -1 : questionResult.confidenceLevel}",
+            	confidence: "${question.type == 8 ? -1 : questionResult.confidenceLevel}",
             </c:if>
             grade:
                 <c:choose>
-                <c:when test="${requiresMarking}">
-                "-"
-            </c:when>
-            <c:otherwise>
-            "<fmt:formatNumber value='${questionResult.mark}' maxFractionDigits='3'/>"
-            </c:otherwise>
-            </c:choose>,
+	                <c:when test="${requiresMarking}">
+		                "-"
+		            </c:when>
+		            <c:otherwise>
+		           		"<fmt:formatNumber value='${questionResult.mark}' maxFractionDigits='3'/>"
+		            </c:otherwise>
+	            </c:choose>,
             marker:
                 <c:choose>
-                <c:when test="${requiresMarking}">
-                "<b>(<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.monitoring.user.summary.grade.required' /></spring:escapeBody>)</b>"
-            </c:when>
-            <c:when test="${not empty questionResult.markedBy}">
-            "<c:out value='${questionResult.markedBy.fullName}' />"
-            </c:when>
-            <c:otherwise>
-            "(<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.monitoring.user.summary.grade.auto' /></spring:escapeBody>)"
-            </c:otherwise>
-            </c:choose>,
+	                <c:when test="${requiresMarking}">
+	                	"<b class='text-bg-warning'>(<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.monitoring.user.summary.grade.required' /></spring:escapeBody>)</b>"
+		            </c:when>
+		            <c:when test="${not empty questionResult.markedBy}">
+		            	"<c:out value='${questionResult.markedBy.fullName}' />"
+		            </c:when>
+		            <c:otherwise>
+		            	"(<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.monitoring.user.summary.grade.auto' /></spring:escapeBody>)"
+		            </c:otherwise>
+	            </c:choose>,
             markerComment: "${questionResult.markerCommentEscaped}"
         });
 
@@ -54,10 +55,10 @@
             "title":
                 <c:choose>
                     <c:when test="${empty questionResult.maxMark}">
-                      ""
+                    	""
                     </c:when>
                     <c:otherwise>
-                    "<spring:escapeBody javaScriptEscape='true'>
+                    	"<spring:escapeBody javaScriptEscape='true'>
                              <fmt:message key='label.learning.max.mark'>
                                 <fmt:param value='${questionResult.maxMark}'/>
                              </fmt:message>
@@ -70,6 +71,8 @@
         if (typeof CodeMirror != 'undefined') {
             CodeMirror.colorize($('.code-style'));
         }
+
+        $("#user-summary-container${param.tableName}").css('visibility', 'visible').show(300);
     };
     masterDetailLoadUp();
 </script>
\ No newline at end of file
Index: lams_tool_assessment/web/pages/monitoring/parts/mcqStudentChoices.jsp
===================================================================
diff -u -rd6448910114beeaf0bf28ace95db98870dfdb80b -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_assessment/web/pages/monitoring/parts/mcqStudentChoices.jsp	(.../mcqStudentChoices.jsp)	(revision d6448910114beeaf0bf28ace95db98870dfdb80b)
+++ lams_tool_assessment/web/pages/monitoring/parts/mcqStudentChoices.jsp	(.../mcqStudentChoices.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -1,20 +1,18 @@
 <%@ include file="/common/taglibs.jsp"%>
-
 <link href="<lams:WebAppURL/>includes/css/assessment.css" rel="stylesheet" type="text/css">
 
 <script>
 	$('#allocate-vsas-button').toggle(${vsaPresent});
 	$(function () {
-		$('[data-toggle="tooltip"]').tooltip();
+		$('[data-bs-toggle="tooltip"]').tooltip();
 	})	
 </script>
 
 <!-- Table -->
 <c:if test="${not empty questions}">
-<div class="card">
-<div class="table-responsive table-hover card-body pb-0" style="margin:0">
-	<table id="questions-data" class="table table-bordered table-condensed">
-		<thead>
+	<div class="table-responsive shadow rounded-4">
+	<table id="questions-data" class="table table-hover">
+		<thead class="text-bg-secondary">
 			<tr role="row" class="border-top-0">
 				<th class="text-center">
 					<fmt:message key="label.monitoring.question.summary.question"/>
@@ -66,7 +64,7 @@
 							<c:if test="${option.correct}">
 								fw-bolder text-success fs-5" title="<fmt:message key="label.authoring.true.false.correct.answer"/>
 							</c:if>
-							"  data-toggle="tooltip" data-placement="top"
+							"  data-bs-toggle="tooltip" data-bs-placement="top"
 							>
 							<c:choose>
 								<c:when test="${option.percentage == -1}">-</c:when>
@@ -82,25 +80,27 @@
 			</c:forEach>
 		</tbody>
 	</table>
-</div>
-</div>
+	</div>
 
 <!-- Question detail modal -->
 <c:forEach var="question" items="${questions}" varStatus="i">
 	<div class="modal fade iraQuestionModal" id="question${i.index}Modal">
 	<div class="modal-dialog modal-dialog-centered">
 	<div class="modal-content">
-		<div class="modal-header align-items-start">
-			<div class="modal-title">
+		<div class="modal-header align-items-start text-bg-warning">
+			<div class="modal-title d-flex">
 				<span>Q${i.index+1})</span>
 				<c:if test="${not empty question.title}">
-					<p><c:out value="${question.title}"  escapeXml="false" /></p>
+					<div>
+						<c:out value="${question.title}"  escapeXml="false" />
+					</div>
 				</c:if>
-				${question.question}
 			</div>
 			<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 		</div>
 		<div class="modal-body">
+			${question.question}
+		
 			<div class="table-responsive">
 				<table class="table table-hover">
 					<tbody>
Index: lams_tool_assessment/web/pages/monitoring/parts/questionsummary.jsp
===================================================================
diff -u -r40e2845974f2b14c82a3ab0807149020f5936c3d -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_assessment/web/pages/monitoring/parts/questionsummary.jsp	(.../questionsummary.jsp)	(revision 40e2845974f2b14c82a3ab0807149020f5936c3d)
+++ lams_tool_assessment/web/pages/monitoring/parts/questionsummary.jsp	(.../questionsummary.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -1,81 +1,80 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
+<c:set var="lams"><lams:LAMSURL/></c:set>
 <c:set var="questionDto" value="${questionSummary.questionDto}"/>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 <c:set var="assessment" value="${sessionMap.assessment}"/>
 <c:set var="sessionDtos" value="${sessionMap.sessionDtos}"/>
 
-<lams:html>
-	<lams:head>
-		<%@ include file="/common/header.jsp"%>
-		<link href="${lams}css/rating.css" rel="stylesheet" type="text/css">
-		<link type="text/css" href="${lams}css/jquery-ui-bootstrap-theme.css" rel="stylesheet">
-		<link type="text/css" href="${lams}css/free.ui.jqgrid.min.css" rel="stylesheet">
-		<link type="text/css" href="${lams}css/jquery.jqGrid.confidence-level-formattter.css" rel="stylesheet">
-		<c:if test="${not empty questionDto.codeStyle}">
-			<link rel="stylesheet" type="text/css" href="${lams}css/codemirror.css" />
-		</c:if>
-		<style>
-			pre {
-				background-color: initial;
-				border: none;
-			}
+<c:set var="title">
+	<fmt:message key="label.monitoring.question.summary.question" />: <c:out value="${questionDto.title}" escapeXml="true"/>
+</c:set>
+<lams:PageMonitor title="${title}" hideHeader="true">
+	<!-- ********************  CSS ********************** -->
+	<link href="<lams:WebAppURL/>includes/css/assessment.css" rel="stylesheet" type="text/css">
+	<link href="${lams}css/rating.css" rel="stylesheet" type="text/css">
+	<link type="text/css" href="${lams}css/jquery-ui-bootstrap-theme5.css" rel="stylesheet">
+	<link type="text/css" href="${lams}css/free.ui.jqgrid.custom.css" rel="stylesheet">
+	<link type="text/css" href="${lams}css/jquery.jqGrid.confidence-level-formattter.css" rel="stylesheet">
+	<c:if test="${not empty questionDto.codeStyle}">
+		<link rel="stylesheet" type="text/css" href="${lams}css/codemirror.css" />
+	</c:if>
+	<style>
+		pre {
+			background-color: initial;
+			border: none;
+		}
 
-			#bottom-buttons {
-				text-align: right;
-				margin: 10px 10px 10px 0;
-			}
+		.requires-grading {
+			background-color: rgba(255, 195, 55, .6);
+		}
+	</style>
 
-			.requires-grading {
-				background-color: rgba(255, 195, 55, .6);
-			}
-		</style>
+	<!-- ********************  javascript ********************** -->
+	<lams:JSImport src="includes/javascript/common.js" />
+	<script>
+		// pass settings to jquery.jqGrid.confidence-level-formattter.js
+		var confidenceLevelsSettings = {
+			type: "${assessment.confidenceLevelsType}",
+			LABEL_NOT_CONFIDENT : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.not.confident" /></spring:escapeBody>',
+			LABEL_CONFIDENT : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.confident" /></spring:escapeBody>',
+			LABEL_VERY_CONFIDENT : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.very.confident" /></spring:escapeBody>',
+			LABEL_NOT_SURE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.not.sure" /></spring:escapeBody>',
+			LABEL_SURE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.sure" /></spring:escapeBody>',
+			LABEL_VERY_SURE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.very.sure" /></spring:escapeBody>'
+		};
 
-		<script>
-			// pass settings to jquery.jqGrid.confidence-level-formattter.js
-			var confidenceLevelsSettings = {
-				type: "${assessment.confidenceLevelsType}",
-				LABEL_NOT_CONFIDENT : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.not.confident" /></spring:escapeBody>',
-				LABEL_CONFIDENT : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.confident" /></spring:escapeBody>',
-				LABEL_VERY_CONFIDENT : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.very.confident" /></spring:escapeBody>',
-				LABEL_NOT_SURE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.not.sure" /></spring:escapeBody>',
-				LABEL_SURE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.sure" /></spring:escapeBody>',
-				LABEL_VERY_SURE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.very.sure" /></spring:escapeBody>'
-			};
-
-			//vars for rating.js
-			var MAX_RATES = 0,
-					MIN_RATES = 0,
-					COMMENTS_MIN_WORDS_LIMIT = 0,
-					LAMS_URL = '',
-					COUNT_RATED_ITEMS = 0,
-					COMMENT_TEXTAREA_TIP_LABEL = '',
-					WARN_COMMENTS_IS_BLANK_LABEL = '',
-					WARN_MIN_NUMBER_WORDS_LABEL = '';
-		</script>
-		<script type="text/javascript" src="${lams}includes/javascript/free.jquery.jqgrid.min.js"></script>
-	 	<script type="text/javascript" src="${lams}includes/javascript/jquery.jqGrid.confidence-level-formattter.js"></script>
-	 	<lams:JSImport src="includes/javascript/portrait.js" />
-	 	<script type="text/javascript" src="${lams}includes/javascript/Sortable.js"></script>
-		<lams:JSImport src="includes/javascript/rating.js" />
-
-		<c:if test="${not empty questionDto.codeStyle}">
-			<script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/runmode-standalone.js"></script>
-			<script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/colorize.js"></script>
-			<c:choose>
-				<c:when test="${questionDto.codeStyle == 1}">
-					<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/python.js"></script>
-				</c:when>
-				<c:when test="${questionDto.codeStyle == 2}">
-					<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/javascript.js"></script>
-				</c:when>
-				<c:when test="${questionDto.codeStyle >= 3}">
-					<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/clike.js"></script>
-				</c:when>
-			</c:choose>
-		</c:if>
-
-		<script>
+		//vars for rating.js
+		var MAX_RATES = 0,
+			MIN_RATES = 0,
+			COMMENTS_MIN_WORDS_LIMIT = 0,
+			LAMS_URL = '',
+			COUNT_RATED_ITEMS = 0,
+			COMMENT_TEXTAREA_TIP_LABEL = '',
+			WARN_COMMENTS_IS_BLANK_LABEL = '',
+			WARN_MIN_NUMBER_WORDS_LABEL = '';
+	</script>
+	<script type="text/javascript" src="${lams}includes/javascript/free.jquery.jqgrid.min.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.jqGrid.confidence-level-formattter.js"></script>
+	<lams:JSImport src="includes/javascript/portrait5.js" />
+	<script type="text/javascript" src="${lams}includes/javascript/Sortable.js"></script>
+	<lams:JSImport src="includes/javascript/rating.js" />
+	<c:if test="${not empty questionDto.codeStyle}">
+		<script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/runmode-standalone.js"></script>
+		<script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/colorize.js"></script>
+		<c:choose>
+			<c:when test="${questionDto.codeStyle == 1}">
+				<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/python.js"></script>
+			</c:when>
+			<c:when test="${questionDto.codeStyle == 2}">
+				<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/javascript.js"></script>
+			</c:when>
+			<c:when test="${questionDto.codeStyle >= 3}">
+				<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/clike.js"></script>
+			</c:when>
+		</c:choose>
+	</c:if>
+	<script>
 			var isEdited = false;
 			var previousCellValue = "";
 			$(document).ready(function(){
@@ -100,10 +99,10 @@
 						"<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.monitoring.summary.user.name" /></spring:escapeBody>",
 						"<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.monitoring.user.summary.response" /></spring:escapeBody>",
 						<c:if test="${assessment.enableConfidenceLevels and questionDto.type != 8}">
-						"<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.confidence" /></spring:escapeBody>",
+							"<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.confidence" /></spring:escapeBody>",
 						</c:if>
 						<c:if test="${questionDto.groupsAnswersDisclosed}">
-						"<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.answer.rating.title" /></spring:escapeBody>",
+							"<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.answer.rating.title" /></spring:escapeBody>",
 						</c:if>
 						"<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.monitoring.user.summary.grade" /></spring:escapeBody>",
 						"<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.monitoring.user.summary.marker" /></spring:escapeBody>",
@@ -115,24 +114,24 @@
 					colModel:[
 						{name:'questionResultUid', index:'questionResultUid', width:0, hidden: true},
 						{name:'maxMark', index:'maxMark', width:0, hidden: true},
-						{name:'userName',index:'userName', width:83, searchoptions: { clearSearch: false }, formatter : function(cellvalue, options, rowObject) {
-								return definePortraitPopover(rowObject[rowObject.length - 1], rowObject[rowObject.length - 2], rowObject[2]);
-							}},
-			  			   	{name:'response', index:'response', width:400, sortable:false, search:false, formatter: responseFormatter},
-	  		  			   	<c:if test="${sessionMap.assessment.enableConfidenceLevels and questionDto.type != 8}">
-			  			   		{name:'confidence', index:'confidence', width: 80, search:false, classes: 'vertical-align', formatter: gradientNumberFormatter},
-			  			  	</c:if>
-				  			<c:if test="${questionDto.groupsAnswersDisclosed}">
-				  				{name:'rating', index:'rating', width:120, align:"center", sortable:false, search:false},
-		  			  		</c:if>
-							{name:'grade', index:'grade', width:30, sorttype:"float", search:false, editable:true,
-								editoptions: {size:4, maxlength: 4}, align:"right", classes: 'vertical-align', title : false},
-			  			  	{name:'marker', index:'marker', width: 80, search:false, title: false},
-				  			{name:'markerComment', index:'markerComment', width:120, search:false, editable:true, sortable: false,
-				  			    editoptions: {maxlength: 100}, align:"left", classes: 'vertical-align', title : false },
-			  				{name:'userId', index:'userId', width:0, hidden: true},
-		  				   	{name:'portraitId', index:'portraitId', width:0, hidden: true}
-	  				   	],
+						{name:'userName',index:'userName', width:83, labelAlign:'left', searchoptions: { clearSearch: false }, formatter : function(cellvalue, options, rowObject) {
+							return definePortraitPopover(rowObject[rowObject.length - 1], rowObject[rowObject.length - 2], rowObject[2]);
+						}},
+			  			{name:'response', index:'response', width:400, labelAlign:'left', classes: 'vertical-align', sortable:false, search:false, formatter: responseFormatter},
+	  		  			<c:if test="${sessionMap.assessment.enableConfidenceLevels and questionDto.type != 8}">
+			  				{name:'confidence', index:'confidence', width: 80, search:false, classes: 'vertical-align', formatter: gradientNumberFormatter},
+			  			</c:if>
+				  		<c:if test="${questionDto.groupsAnswersDisclosed}">
+				  			{name:'rating', index:'rating', width:120, align:"center", sortable:false, search:false},
+		  			  	</c:if>
+						{name:'grade', index:'grade', width:80, labelAlign:'center', sorttype:"float", search:false, editable:true,
+								editoptions: {size:4, maxlength: 4}, align:"center", classes: 'vertical-align', title : false},
+			  			{name:'marker', index:'marker', width: 80, labelAlign:'left', search:false, title: false},
+				  		{name:'markerComment', index:'markerComment', width:120, labelAlign:'left', search:false, editable:true, sortable: false,
+				  		    	editoptions: {maxlength: 100}, align:"left", classes: 'vertical-align', title : false },
+			  			{name:'userId', index:'userId', width:0, hidden: true},
+		  				{name:'portraitId', index:'portraitId', width:0, hidden: true}
+	  				],
 	  				   	multiselect: false,
 	  				   	caption: "${sessionDto.sessionName}",
 	  				  	cellurl: '<c:url value="/monitoring/saveUserGrade.do?sessionMapID=${sessionMapID}"/>&<csrf:token/>',
@@ -249,7 +248,7 @@
 						reloadOnExpand : false,
 						hasSubgrid: function (options) {
 							// if there are no ratings for the given answer, there will be no subgrid
-							return options.data.rating != '-';
+							return options.data.rating && options.data.rating != '-';
 						}
 					},
 					subGridRowExpanded: function(subgrid_id, row_id) {
@@ -280,7 +279,8 @@
 							],
 							colModel:[
 								{name:'ratingId', index:'ratingId', width:0, hidden:true},
-								{name:'userName',index:'userName', width: 35, formatter : function(cellvalue, options, rowObject) {
+								{name:'userName',index:'userName', width: 35, labelAlign:'left', 
+									formatter : function(cellvalue, options, rowObject) {
 										var columnParts = rowObject[1].split('<BR>'),
 												userName = columnParts[0];
 										// get portrait UUID, user ID and user name
@@ -289,8 +289,8 @@
 										columnParts[1] = '<b>' + columnParts[1] + '</b>';
 										return columnParts.join('<BR>');
 									}},
-								{name:'rating', index:'rating', width: 10,  align:"center"},
-								{name:'comment', index:'comment'},
+								{name:'rating', index:'rating', width: 10, align:"center"},
+								{name:'comment', index:'comment', labelAlign:'left'},
 								{name:'userId', index:'userId', width:0, hidden: true},
 								{name:'portraitId', index:'portraitId', width:0, hidden: true}
 							],
@@ -303,13 +303,12 @@
 						});
 					}
 				})
-				<c:if test="${!sessionMap.assessment.useSelectLeaderToolOuput}">
+					<c:if test="${!sessionMap.assessment.useSelectLeaderToolOuput}">
 						.jqGrid('filterToolbar', {
 							searchOnEnter: false
 						})
-						</c:if>
+					</c:if>
 						.navGrid("#pager${sessionDto.sessionId}", {edit:false,add:false,del:false,search:false, refresh:true});
-
 				</c:forEach>
 
 				//jqgrid autowidth (http://stackoverflow.com/a/1610197)
@@ -342,83 +341,74 @@
 				var codeStyle = ${empty questionDto.codeStyle ? 'null' : questionDto.codeStyle};
 				return codeStyle ? "<pre class='code-style' data-lang='${questionDto.codeStyleMime}'>" + cellvalue + "</pre>" : cellvalue;
 			}
-		</script>
-	</lams:head>
+	</script>
 
-	<body class="stripes">
+	<h1 class="fs-3">
+		${title}
+	</h1>
 
-	<div class="panel panel-default">
-		<div class="panel-heading">
-			<div class="panel-title">
-				<fmt:message key="label.monitoring.question.summary.question" />: <c:out value="${questionDto.title}" escapeXml="true"/>
-			</div>
-		</div>
+	<lams:errors5/>
 
-		<div class="panel-body">
-			<lams:errors/>
+	<div class="instructions">
+		<c:out value="${questionDto.question}" escapeXml="false"/>
+	</div>
 
-			<c:out value="${questionDto.question}" escapeXml="false"/>
-
-			<div class="row"><div class="col-xs-12 col-sm-6">
-				<h5><fmt:message key="label.question.options"/></h5>
-				<table class="table table-condensed table-striped">
-					<c:if test="${questionDto.type == 1}">
-						<tr>
-							<td>
-								<fmt:message key="label.incorrect.answer.nullifies.mark" />:
-							</td>
-							<td style="text-align: right;">
-								<c:out value="${questionDto.incorrectAnswerNullifiesMark}" escapeXml="false"/>
-							</td>
-						</tr>
-					</c:if>
-					<tr>
-						<td>
-							<fmt:message key="label.monitoring.question.summary.default.mark" />:
-						</td>
-						<td style="text-align: right;">
-							<c:out value="${questionDto.maxMark}" escapeXml="true"/>
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<fmt:message key="label.monitoring.question.summary.penalty" />:
-						</td>
-						<td style="text-align: right;">
-							<c:out value="${questionDto.penaltyFactor}" escapeXml="true"/>
-						</td>
-					</tr>
-				</table>
-			</div></div>
-
-			<!--history responses-->
-			<c:if test="${not empty sessionDtos}">
-				<h5><fmt:message key="label.monitoring.question.summary.history.responses" /></h5>
-				<c:forEach var="sessionDto" items="${sessionDtos}">
-					<div class="voffset20">
-						<table id="session${sessionDto.sessionId}"></table>
-						<div id="pager${sessionDto.sessionId}"></div>
-					</div>
-				</c:forEach>
-			</c:if>
-
-			<div id="bottom-buttons">
-				<a href="#nogo" onclick="javascript:refreshQuestionSummaryPage()" class="btn btn-default btn-sm">
-					<i class="fa fa-refresh"></i>
-					<fmt:message key="label.refresh" />
-				</a>
-
-				<a href="#nogo" onclick="javascript:refreshSummaryPage()" class="btn btn-default btn-sm loffset10">
-					<i class="fa fa-close"></i>
-					<fmt:message key="label.close" />
-				</a>
+	<div class="fs-5 card-subheader">
+		<fmt:message key="label.question.options"/>
+	</div>
+					
+	<div class="ltable table-hover no-header alert alert-secondary shadow col-md-8">
+		<c:if test="${questionDto.type == 1}">
+			<div class="row">
+				<div class="col-10">
+					<fmt:message key="label.incorrect.answer.nullifies.mark" />:
+				</div>
+				<div class="col-2 text-end">
+					<c:out value="${questionDto.incorrectAnswerNullifiesMark}" escapeXml="false"/>
+				</div>
 			</div>
+		</c:if>
+		<div class="row">
+			<div class="col-10">
+				<fmt:message key="label.monitoring.question.summary.default.mark" />:
+			</div>
+			<div class="col-2 text-end">
+				<c:out value="${questionDto.maxMark}" escapeXml="true"/>
+			</div>
 		</div>
-		<!--closes content-->
+		<div class="row">
+			<div class="col-10">
+				<fmt:message key="label.monitoring.question.summary.penalty" />:
+			</div>
+			<div class="col-2 text-end">
+				<c:out value="${questionDto.penaltyFactor}" escapeXml="true"/>
+			</div>
+		</div>
+	</div>
 
-		<div id="footer">
+	<!--history responses-->
+	<c:if test="${not empty sessionDtos}">
+		<div class="fs-5 card-subheader mt-4">
+			<fmt:message key="label.monitoring.question.summary.history.responses" />
 		</div>
-		<!--closes footer-->
+				
+		<c:forEach var="sessionDto" items="${sessionDtos}">
+			<div class="mb-4">
+				<table id="session${sessionDto.sessionId}"></table>
+				<div id="pager${sessionDto.sessionId}"></div>
+			</div>
+		</c:forEach>
+	</c:if>
+
+	<div class="activity-bottom-buttons">
+		<button type="button" onclick="refreshSummaryPage()" class="btn btn-primary ms-2">
+			<i class="fa fa-close"></i>
+			<fmt:message key="label.close" />
+		</button>
+		
+		<button type="button" onclick="refreshQuestionSummaryPage()" class="btn btn-secondary">
+			<i class="fa fa-refresh"></i>
+			<fmt:message key="label.refresh" />
+		</button>
 	</div>
-	</body>
-</lams:html>
\ No newline at end of file
+</lams:PageMonitor>
Index: lams_tool_assessment/web/pages/monitoring/parts/toolOutput.jsp
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_assessment/web/pages/monitoring/parts/toolOutput.jsp	(.../toolOutput.jsp)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_assessment/web/pages/monitoring/parts/toolOutput.jsp	(.../toolOutput.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -1,30 +1,24 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<div id="accordion-tool-output" class="panel-group voffset20" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="heading-tool-output">
-        	<span class="panel-title">
-		    	<a class="collapsed" role="button" data-toggle="collapse" href="#tool-output" aria-expanded="true" aria-controls="tool-output">
-	          		<fmt:message key="label.tool.output" />
-	          	</a>
-      		</span>
-        </div>
+<div class="lcard">
+    <div class="card-header" id="heading-tool-output">
+      	<span class="panel-title collapsable-icon-left">
+	    	<button type="button" class="btn btn-secondary-darker no-shadow collapsed" data-bs-toggle="collapse" data-bs-target="#tool-output" aria-expanded="false" aria-controls="tool-output">
+          		<fmt:message key="label.tool.output" />
+          	</button>
+   		</span>
+    </div>
 
-		<div aria-expanded="false" id="tool-output" class="panel-body panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tool-output">
-		
-			<select name="activityEvaluation" id="activity-evaluation" autocomplete="off">
-				<option value=""><fmt:message key="output.desc.none" /></option>
+	<div aria-expanded="false" id="tool-output" class="card-body collapse p-2">
+		<select name="activityEvaluation" id="activity-evaluation" autocomplete="off">
+			<option value=""><fmt:message key="output.desc.none" /></option>
 				
-				<c:forEach var="toolOutputDefinition" items="${sessionMap.toolOutputDefinitions}" varStatus="firstGroup">
-				
-					<option value="${toolOutputDefinition}"
-							<c:if test="${toolOutputDefinition == sessionMap.activityEvaluation}">selected="selected"</c:if>>
-						<fmt:message key="output.desc.${toolOutputDefinition}" />
-					</option>
-					
-				</c:forEach>
-			</select>
-
-		</div>
+			<c:forEach var="toolOutputDefinition" items="${sessionMap.toolOutputDefinitions}" varStatus="firstGroup">
+				<option value="${toolOutputDefinition}"
+						<c:if test="${toolOutputDefinition == sessionMap.activityEvaluation}">selected="selected"</c:if>>
+					<fmt:message key="output.desc.${toolOutputDefinition}" />
+				</option>
+			</c:forEach>
+		</select>
 	</div>
 </div>
Index: lams_tool_assessment/web/pages/monitoring/parts/usersummary.jsp
===================================================================
diff -u -r7e76bc278889d21a9d70b4b72562ef2f3062aec8 -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_assessment/web/pages/monitoring/parts/usersummary.jsp	(.../usersummary.jsp)	(revision 7e76bc278889d21a9d70b4b72562ef2f3062aec8)
+++ lams_tool_assessment/web/pages/monitoring/parts/usersummary.jsp	(.../usersummary.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -1,76 +1,76 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
+<c:set var="lams"><lams:LAMSURL/></c:set>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 <c:set var="assessment" value="${sessionMap.assessment}"/>
 
-<lams:html>
-    <lams:head>
-        <%@ include file="/common/header.jsp"%>
+<c:set var="title"><fmt:message key="label.monitoring.user.summary.history.responses" /></c:set>
+<lams:PageMonitor title="${title}" hideHeader="true">
+ 	<!-- ********************  CSS ********************** -->
+	<link href="<lams:WebAppURL/>includes/css/assessment.css" rel="stylesheet" type="text/css">
+    <link type="text/css" href="${lams}css/jquery-ui-bootstrap-theme5.css" rel="stylesheet">
+    <link type="text/css" href="${lams}css/free.ui.jqgrid.custom.css" rel="stylesheet">
+    <link type="text/css" href="${lams}css/jquery.jqGrid.confidence-level-formattter.css" rel="stylesheet">
+    <c:if test="${not empty codeStyles}">
+    	<link rel="stylesheet" type="text/css" href="${lams}css/codemirror.css" />
+    </c:if>
+    <style>
+        [data-toggle="collapse"].collapsed .if-not-collapsed, [data-toggle="collapse"]:not(.collapsed) .if-collapsed {
+            display: none;
+        }
 
-        <link type="text/css" href="${lams}css/jquery-ui-bootstrap-theme.css" rel="stylesheet">
-        <link type="text/css" href="${lams}css/free.ui.jqgrid.min.css" rel="stylesheet">
-        <link type="text/css" href="${lams}css/jquery.jqGrid.confidence-level-formattter.css" rel="stylesheet">
-        <c:if test="${not empty codeStyles}">
-            <link rel="stylesheet" type="text/css" href="${lams}css/codemirror.css" />
-        </c:if>
+        pre {
+            background-color: initial;
+            border: none;
+        }
 
-        <style>
-            [data-toggle="collapse"].collapsed .if-not-collapsed, [data-toggle="collapse"]:not(.collapsed) .if-collapsed {
-                display: none;
-            }
+        .requires-grading {
+            background-color: rgba(255, 195, 55, .6);
+        }
+    </style>
 
-            pre {
-                background-color: initial;
-                border: none;
-            }
+ 	<!-- ********************  javascript ********************** -->
+	<lams:JSImport src="includes/javascript/common.js" />
+	<script>
+		// pass settings to jquery.jqGrid.confidence-level-formattter.js
+        var confidenceLevelsSettings = {
+            type: "${assessment.confidenceLevelsType}",
+            LABEL_NOT_CONFIDENT : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.not.confident" /></spring:escapeBody>',
+            LABEL_CONFIDENT : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.confident" /></spring:escapeBody>',
+            LABEL_VERY_CONFIDENT : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.very.confident" /></spring:escapeBody>',
+            LABEL_NOT_SURE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.not.sure" /></spring:escapeBody>',
+            LABEL_SURE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.sure" /></spring:escapeBody>',
+            LABEL_VERY_SURE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.very.sure" /></spring:escapeBody>'
+        };
+    </script>
+    <script type="text/javascript" src="${lams}includes/javascript/free.jquery.jqgrid.min.js"></script>
+    <script type="text/javascript" src="${lams}includes/javascript/jquery.jqGrid.confidence-level-formattter.js"></script>
+    <c:if test="${not empty codeStyles}">
+        <script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/runmode-standalone.js"></script>
+        <script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/colorize.js"></script>
+    </c:if>
+    <%-- codeStyles is a set, so each code style will be listed only once --%>
+    <c:forEach items="${codeStyles}" var="codeStyle">
+        <c:choose>
+            <c:when test="${codeStyle == 1}">
+                <script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/python.js"></script>
+            </c:when>
+            <c:when test="${codeStyle == 2}">
+                <script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/javascript.js"></script>
+            </c:when>
+            <c:when test="${codeStyle >= 3}">
+                <script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/clike.js"></script>
+            </c:when>
+        </c:choose>
+    </c:forEach>
+	<script>
+		var isEdited = false;
+		var previousCellValue = "";
+		$(document).ready(function(){
+			<c:forEach var="userSummaryItem" items="${userSummary.userSummaryItems}" varStatus="status">
+				<c:set var="question" value="${userSummaryItem.questionDto}"/>
 
-            .requires-grading {
-                background-color: rgba(255, 195, 55, .6);
-            }
-        </style>
-
-        <script>
-            // pass settings to jquery.jqGrid.confidence-level-formattter.js
-            var confidenceLevelsSettings = {
-                type: "${assessment.confidenceLevelsType}",
-                LABEL_NOT_CONFIDENT : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.not.confident" /></spring:escapeBody>',
-                LABEL_CONFIDENT : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.confident" /></spring:escapeBody>',
-                LABEL_VERY_CONFIDENT : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.very.confident" /></spring:escapeBody>',
-                LABEL_NOT_SURE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.not.sure" /></spring:escapeBody>',
-                LABEL_SURE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.sure" /></spring:escapeBody>',
-                LABEL_VERY_SURE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.very.sure" /></spring:escapeBody>'
-            };
-        </script>
-        <script type="text/javascript" src="${lams}includes/javascript/free.jquery.jqgrid.min.js"></script>
-        <script type="text/javascript" src="${lams}includes/javascript/jquery.jqGrid.confidence-level-formattter.js"></script>
-
-        <c:if test="${not empty codeStyles}">
-            <script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/runmode-standalone.js"></script>
-            <script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/colorize.js"></script>
-        </c:if>
-        <%-- codeStyles is a set, so each code style will be listed only once --%>
-        <c:forEach items="${codeStyles}" var="codeStyle">
-            <c:choose>
-                <c:when test="${codeStyle == 1}">
-                    <script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/python.js"></script>
-                </c:when>
-                <c:when test="${codeStyle == 2}">
-                    <script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/javascript.js"></script>
-                </c:when>
-                <c:when test="${codeStyle >= 3}">
-                    <script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/clike.js"></script>
-                </c:when>
-            </c:choose>
-        </c:forEach>
-
-        <script>
-            var isEdited = false;
-            var previousCellValue = "";
-            $(document).ready(function(){
-                <c:forEach var="userSummaryItem" items="${userSummary.userSummaryItems}" varStatus="status">
-                <c:set var="question" value="${userSummaryItem.questionDto}"/>
-
-                jQuery("#user${question.uid}").jqGrid({
+				jQuery("#user${question.uid}").jqGrid({
                     datatype: "local",
                     autoencode:false,
                     rowNum: 10000,
@@ -85,34 +85,34 @@
                         "<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.monitoring.user.summary.time" /></spring:escapeBody>",
                         "<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.monitoring.user.summary.response" /></spring:escapeBody>",
                         <c:if test="${assessment.enableConfidenceLevels and question.type != 8}">
-                        "<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.confidence' /></spring:escapeBody>",
+                        	"<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.confidence' /></spring:escapeBody>",
                         </c:if>
                         "<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.monitoring.user.summary.grade" /></spring:escapeBody>",
                         "<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.monitoring.user.summary.marker" /></spring:escapeBody>",
                         "<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.monitoring.user.summary.marker.comment" /></spring:escapeBody>"
                     ],
                     colModel:[
-                        {name:'id', index:'id', width:52, sorttype:"int"},
-                        {name:'questionResultUid', index:'questionResultUid', width:0, hidden: true},
-                        {name:'time', index:'time', width:150, sorttype:'date', datefmt:'Y-m-d'},
-                        {name:'response', index:'response', width:341, sortable:false},
+                        {name:'id', index:'id', width:52, labelAlign: 'left', sorttype:"int"},
+                        {name:'questionResultUid', index:'questionResultUid', width:0, labelAlign: 'left', hidden: true},
+                        {name:'time', index:'time', width:150, labelAlign: 'left', sorttype:'date', datefmt:'Y-m-d'},
+                        {name:'response', index:'response', width:341, labelAlign: 'left', sortable:false},
                         <c:if test="${sessionMap.assessment.enableConfidenceLevels and question.type != 8}">
-                        {name:'confidence', index:'confidence', width: 80, classes: 'vertical-align', formatter: gradientNumberFormatter},
+                        	{name:'confidence', index:'confidence', width: 80, labelAlign: 'left', classes: 'vertical-align', formatter: gradientNumberFormatter},
                         </c:if>
-                        {name:'grade', index:'grade', width:80, sorttype:"float", editable:true,
-                            editoptions: {size:4, maxlength: 4}, align:"right", classes: 'vertical-align', title : false },
-						{name:'marker', index:'marker', width: 110, title: false},
-						{name:'markerComment', index:'markerComment', width:300, editable:true, edittype: 'textarea',
-							sortable: false, editoptions: {maxlength: 3000, rows: 6}, title : false,
-							formatter:function(cellvalue, options, rowObject, event) {
-								if (event == "edit") {
-									cellvalue = cellvalue.replace(/\n/g, '\n<br>');
+                        {name:'grade', index:'grade', width:80, labelAlign: 'center', align:"center", sorttype:"float", editable:true,
+                            	editoptions: {size:4, maxlength: 4}, classes: 'vertical-align', title : false },
+						{name:'marker', index:'marker', width: 110, labelAlign: 'left', title: false},
+						{name:'markerComment', index:'markerComment', width:300, labelAlign: 'left', editable:true, edittype: 'textarea',
+								sortable: false, editoptions: {maxlength: 3000, rows: 6}, title : false,
+								formatter:function(cellvalue, options, rowObject, event) {
+									if (event == "edit") {
+										cellvalue = cellvalue.replace(/\n/g, '\n<br>');
+									}
+									return cellvalue;
+								},
+								unformat:function(cellvalue, options, rowObject) {
+									return rowObject.innerText;
 								}
-								return cellvalue;
-							},
-							unformat:function(cellvalue, options, rowObject) {
-								return rowObject.innerText;
-							}
 						}
                     ],
                     multiselect: false,
@@ -182,8 +182,7 @@
 
                 <c:forEach var="questionResult" items="${userSummaryItem.questionResults}" varStatus="i">
                 <c:set var="learnerInteraction" value="${learnerInteractions[questionResult.qbToolQuestion.uid]}" />
-                <c:set var="requiresMarking"
-                       value="${empty questionResult.markedBy and questionResult.questionDto.type eq 6 and questionResult.mark eq 0}" />
+                <c:set var="requiresMarking" value="${empty questionResult.markedBy and questionResult.questionDto.type eq 6 and questionResult.mark eq 0}" />
 
                 var responseStr = "";
                 <%@ include file="userresponse.jsp"%>
@@ -194,29 +193,29 @@
                     time:"${empty learnerInteraction ? questionResult.finishDate : learnerInteraction.formattedDate}",
                     response:responseStr,
                     <c:if test="${assessment.enableConfidenceLevels}">
-                    confidence:"${questionResult.confidenceLevel}",
+                    	confidence:"${questionResult.confidenceLevel}",
                     </c:if>
                     grade:
                         <c:choose>
-                        <c:when test="${requiresMarking}">
-                        "-"
-                    </c:when>
-                    <c:otherwise>
-                    "<fmt:formatNumber value='${questionResult.mark}' maxFractionDigits='3'/>"
-                    </c:otherwise>
-                    </c:choose>,
+	                        <c:when test="${requiresMarking}">
+	                       		"-"
+		                    </c:when>
+		                    <c:otherwise>
+		                    	"<fmt:formatNumber value='${questionResult.mark}' maxFractionDigits='3'/>"
+		                    </c:otherwise>
+	                    </c:choose>,
                     marker :
                         <c:choose>
-                        <c:when test="${requiresMarking}">
-							"<b>(<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.monitoring.user.summary.grade.required' /></spring:escapeBody>)</b>"
-                    </c:when>
-                    <c:when test="${not empty questionResult.markedBy}">
-                    "<c:out value='${questionResult.markedBy.fullName}' />"
-                    </c:when>
-                    <c:otherwise>
-					"(<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.monitoring.user.summary.grade.auto' /></spring:escapeBody>)"
-                    </c:otherwise>
-                    </c:choose>,
+                       		<c:when test="${requiresMarking}">
+								"<b class='text-bg-warning'>(<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.monitoring.user.summary.grade.required' /></spring:escapeBody>)</b>"
+                   			</c:when>
+                   			<c:when test="${not empty questionResult.markedBy}">
+								"<c:out value='${questionResult.markedBy.fullName}' />"
+                    		</c:when>
+                   			<c:otherwise>
+								"(<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.monitoring.user.summary.grade.auto' /></spring:escapeBody>)"
+                    		</c:otherwise>
+                    	</c:choose>,
 					markerComment: "${questionResult.markerCommentEscaped}"
                 });
                 // set maxGrade attribute to cell DOM element
@@ -226,171 +225,147 @@
                             <c:when test="${empty questionResult.maxMark}">
                              ""
                             </c:when>
-                        <c:otherwise>
-                             "<spring:escapeBody javaScriptEscape='true'>
-                                <fmt:message key='label.learning.max.mark'>
-                                    <fmt:param value='${questionResult.maxMark}'/>
-                                </fmt:message>
-                            </spring:escapeBody>"
-                        </c:otherwise>
+	                        <c:otherwise>
+	                             "<spring:escapeBody javaScriptEscape='true'>
+	                                <fmt:message key='label.learning.max.mark'>
+	                                    <fmt:param value='${questionResult.maxMark}'/>
+	                                </fmt:message>
+	                            </spring:escapeBody>"
+	                        </c:otherwise>
                         </c:choose>
-                    });
+                });
                 </c:forEach>
+			</c:forEach>
 
-                </c:forEach>
-
-                //jqgrid autowidth (http://stackoverflow.com/a/1610197)
-                $(window).bind('resize', function() {
-                    var grid;
-                    if (grid = jQuery(".ui-jqgrid-btable:visible")) {
-                        grid.each(function(index) {
-                            var gridId = $(this).attr('id');
-                            var gridParentWidth = jQuery('#gbox_' + gridId).parent().width();
-                            jQuery('#' + gridId).setGridWidth(gridParentWidth, true);
-                        });
-                    }
-                });
-                setTimeout(function(){ window.dispatchEvent(new Event('resize')); }, 300);
-
-                // show etherpads only on Discussion expand
-                $('.question-etherpad-collapse').on('show.bs.collapse', function(){
-                    var etherpad = $('.etherpad-container', this);
-                    if (!etherpad.hasClass('initialised')) {
-                        var id = etherpad.attr('id'),
-                            groupId = id.substring('etherpad-container-'.length);
-                        etherpadInitMethods[groupId]();
-                    }
-                });
-
-                if (typeof CodeMirror != 'undefined') {
-                    CodeMirror.colorize($('.code-style'));
+            //jqgrid autowidth (http://stackoverflow.com/a/1610197)
+            $(window).bind('resize', function() {
+                var grid;
+                if (grid = jQuery(".ui-jqgrid-btable:visible")) {
+                    grid.each(function(index) {
+            	        var gridId = $(this).attr('id');
+                        var gridParentWidth = jQuery('#gbox_' + gridId).parent().width();
+                        jQuery('#' + gridId).setGridWidth(gridParentWidth, true);
+                    });
                 }
             });
+            setTimeout(function(){ window.dispatchEvent(new Event('resize')); }, 300);
 
-            function refreshSummaryPage()  {
-                if (isEdited) {
-                    self.parent.window.parent.location.href = "<c:url value="/monitoring/summary.do"/>?toolContentID=${sessionMap.toolContentID}&contentFolderID=${sessionMap.contentFolderID}";
-                } else {
-                    self.parent.tb_remove();
+            // show etherpads only on Discussion expand
+            $('.question-etherpad-collapse').on('show.bs.collapse', function(){
+                var etherpad = $('.etherpad-container', this);
+                if (!etherpad.hasClass('initialised')) {
+                    var id = etherpad.attr('id'),
+                        groupId = id.substring('etherpad-container-'.length);
+                    etherpadInitMethods[groupId]();
                 }
+            });
+
+            if (typeof CodeMirror != 'undefined') {
+                CodeMirror.colorize($('.code-style'));
             }
-        </script>
-    </lams:head>
+        });
 
-    <body class="stripes">
+        function refreshSummaryPage()  {
+            if (isEdited) {
+                self.parent.window.parent.location.href = "<c:url value="/monitoring/summary.do"/>?toolContentID=${sessionMap.toolContentID}&contentFolderID=${sessionMap.contentFolderID}";
+            } else {
+                self.parent.tb_remove();
+            }
+        }
+	</script>
 
-    <div class="panel panel-default">
-        <div class="panel-heading">
-            <div class="panel-title">
-                <fmt:message key="label.monitoring.user.summary.history.responses" />
-            </div>
-        </div>
+	<h1 class="fs-3">
+		${title}
+	</h1>
 
-        <div class="panel-body">
-            <lams:errors/>
+	<lams:errors5/>
 
-            <table class="table table-condensed">
-                <tr>
-                    <th style="width: 180px;" >
-                        <fmt:message key="label.monitoring.user.summary.user.name" />
-                    </th>
-                    <td >
-                        <c:out value="${userSummary.user.lastName}, ${userSummary.user.firstName}" />
-                    </td>
-                </tr>
+	<div class="ltable table-hover no-header alert alert-secondary shadow col-sm-8 mx-auto my-4 p-1">
+		<div class="row">
+			<div class="col-5">
+				<fmt:message key="label.monitoring.user.summary.user.name" />
+			</div>
+			<div class="col-7">
+				<c:out value="${userSummary.user.lastName}, ${userSummary.user.firstName}" />
+			</div>
+		</div>
 
-                <tr>
-                    <th>
-                        <fmt:message key="label.monitoring.user.summary.number.attempts" />
-                    </th>
-                    <td>
-                            ${userSummary.numberOfAttempts}
-                    </td>
-                </tr>
+		<div class="row">
+			<div class="col-5">
+				<fmt:message key="label.monitoring.user.summary.number.attempts" />
+			</div>
+			<div class="col-7">
+				${userSummary.numberOfAttempts}
+			</div>
+		</div>
 
-                <tr>
-                    <th>
-                        <fmt:message key="label.monitoring.user.summary.time.last.attempt" />
-                    </th>
-                    <td>
-                        <fmt:formatDate value="${userSummary.timeOfLastAttempt}" pattern="H" timeZone="GMT" /> <fmt:message key="label.learning.summary.hours" />
-                        <fmt:formatDate value="${userSummary.timeOfLastAttempt}" pattern="m" timeZone="GMT" /> <fmt:message key="label.learning.summary.minutes" />
-                    </td>
-                </tr>
+		<div class="row">
+			<div class="col-5">
+				<fmt:message key="label.monitoring.user.summary.time.last.attempt" />
+			</div>
+			<div class="col-7">
+				<fmt:formatDate value="${userSummary.timeOfLastAttempt}" pattern="H" timeZone="GMT" />
+				<fmt:message key="label.learning.summary.hours" />
+				<fmt:formatDate value="${userSummary.timeOfLastAttempt}" pattern="m" timeZone="GMT" />
+				<fmt:message key="label.learning.summary.minutes" />
+			</div>
+		</div>
 
-                <tr>
-                    <th>
-                        <fmt:message key="label.monitoring.user.summary.last.attempt.grade" />
-                    </th>
-                    <td>
-                        <div id="lastAttemptGrade">${userSummary.lastAttemptGrade}</div>
-                    </td>
-                </tr>
-            </table>
+		<div class="row">
+			<div class="col-5">
+				<fmt:message key="label.monitoring.user.summary.last.attempt.grade" />
+			</div>
+			<div class="col-7">
+				<div id="lastAttemptGrade">${userSummary.lastAttemptGrade}</div>
+			</div>
+		</div>
+	</div>
 
-            <c:forEach var="userSummaryItem" items="${userSummary.userSummaryItems}" varStatus="status">
-                <div class="voffset20">
-                    <div class="panel panel-default">
-                        <div class="panel-heading">
-                            <div class="panel-title">
-                                <table style="font-size: small;">
-                                    <tr>
-                                        <td width="70px;">
-                                            <fmt:message key="label.monitoring.user.summary.title" />
-                                        </td>
-                                        <td>
-                                            <c:out value="${userSummaryItem.questionDto.title}" escapeXml="true"/>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <fmt:message key="label.monitoring.user.summary.question" />
-                                        </td>
-                                        <td>
-                                            <c:out value="${userSummaryItem.questionDto.question}" escapeXml="false"/>
-                                        </td>
-                                    </tr>
-                                </table>
-                            </div>
-                        </div>
+	<c:forEach var="userSummaryItem" items="${userSummary.userSummaryItems}" varStatus="status">
+		<div class="lcard">
+			<div class="card-header">
+				<c:out value="${userSummaryItem.questionDto.title}" escapeXml="true"/>
+			</div>
+			
+            <div class="card-body p-2">
+               	<div class="mb-3">
+                    <c:out value="${userSummaryItem.questionDto.question}" escapeXml="false"/>
+				</div>
+				
+                <table id="user${userSummaryItem.questionDto.uid}"></table>
+            </div>
+		</div>
 
+        <%--Display Etherpad for each question --%>
+        <c:if test="${isQuestionEtherpadEnabled}">
+        	<div class="question-etherpad-container mt-4 mb-2">
+            	<button type="button" data-bs-toggle="collapse" 
+            			data-bs-target="#question-etherpad-${userSummaryItem.questionDto.uid}"
+                		class="btn btn-light btn-sm collapsed card-subheader">
+                	<span class="if-collapsed">
+                		<i class="fa fa-xs fa-plus-square-o roffset5" aria-hidden="true"></i>
+                	</span>
+                    <span class="if-not-collapsed">
+                    	<i class="fa fa-xs fa-minus-square-o roffset5" aria-hidden="true"></i>
+                    </span>
+                    <fmt:message key="label.etherpad.discussion" />
+                </button>
 
-
-                        <table id="user${userSummaryItem.questionDto.uid}"></table>
+                <div id="question-etherpad-${userSummaryItem.questionDto.uid}" class="question-etherpad-collapse collapse">
+                	<div class="card question-etherpad">
+                    	<lams:Etherpad groupId="etherpad-assessment-${toolSessionID}-question-${userSummaryItem.questionDto.uid}"
+                        		showControls="true" showChat="false" heightAutoGrow="true" showOnDemand="true" />
                     </div>
                 </div>
+       		</div>
+        </c:if>
+	</c:forEach>
 
-                <%--Display Etherpad for each question --%>
-                <c:if test="${isQuestionEtherpadEnabled}">
-                    <div class="form-group question-etherpad-container">
-                        <a data-toggle="collapse" data-target="#question-etherpad-${userSummaryItem.questionDto.uid}"
-                           href="#qe${userSummaryItem.questionDto.uid}" class="collapsed">
-                            <span class="if-collapsed"><i class="fa fa-xs fa-plus-square-o roffset5" aria-hidden="true"></i></span>
-                            <span class="if-not-collapsed"><i class="fa fa-xs fa-minus-square-o roffset5" aria-hidden="true"></i></span>
-                            <fmt:message key="label.etherpad.discussion" />
-                        </a>
-
-                        <div id="question-etherpad-${userSummaryItem.questionDto.uid}" class="question-etherpad-collapse collapse">
-                            <div class="panel panel-default question-etherpad">
-                                <lams:Etherpad groupId="etherpad-assessment-${toolSessionID}-question-${userSummaryItem.questionDto.uid}"
-                                               showControls="true" showChat="false" heightAutoGrow="true" showOnDemand="true" />
-                            </div>
-                        </div>
-                    </div>
-                </c:if>
-            </c:forEach>
-
-            <a href="#nogo" onclick="refreshSummaryPage();" class="btn btn-default btn-sm voffset20 pull-right">
-                <fmt:message key="label.close" />
-            </a>
-
-        </div>
-        <!--closes content-->
-
-        <div id="footer">
-        </div>
-        <!--closes footer-->
-
-    </div>
-    </body>
-</lams:html>
\ No newline at end of file
+	<div class="activity-bottom-buttons">
+		<button type="button" onclick="refreshSummaryPage();" class="btn btn-primary">
+			<i class="fa-regular fa-circle-xmark me-1"></i>
+			<fmt:message key="label.close" />
+		</button>
+	</div>
+	
+</lams:PageMonitor>
Index: lams_tool_assessment/web/pages/monitoring/statisticpart.jsp
===================================================================
diff -u -rcfd463431d2171b40403dcff2508408e72685c0e -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_assessment/web/pages/monitoring/statisticpart.jsp	(.../statisticpart.jsp)	(revision cfd463431d2171b40403dcff2508408e72685c0e)
+++ lams_tool_assessment/web/pages/monitoring/statisticpart.jsp	(.../statisticpart.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -1,12 +1,17 @@
 <%@ include file="/common/taglibs.jsp"%>
+<c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 <c:set var="sessionDtos" value="${sessionMap.sessionDtos}"/>
 <c:set var="leaderDto" value="${sessionMap.leaderDto}"/>
 <c:set var="activityDto" value="${sessionMap.activityDto}"/>
 
+<lams:css suffix="chart"/>
+
+<script type="text/javascript" src="${lams}includes/javascript/chartjs/chart.umd.js"></script>
+<lams:JSImport src="includes/javascript/chart.js" relative="true" />
 <script type="text/javascript">
 	$(document).ready(function(){
-		$('[data-toggle="tooltip"]').bootstrapTooltip();
+		$('[data-bs-toggle="tooltip"]').tooltip();
 		
 		$('#activity-evaluation').on('focus', function(){
 			$(this).data('previousValue', this.value);
@@ -35,7 +40,6 @@
 			});
 			
 		});
-		
 
 	   	// must display charts after screen is visible or cannot calculate widths.
  		<c:choose>
@@ -56,30 +60,28 @@
 			</c:forEach>	
 		</c:otherwise>
 		</c:choose>
-
- 
 	});		
 </script>
 
 <c:choose>
-
 <c:when test="${empty sessionDtos}">
-	<lams:Alert type="warn" id="no-edit" close="false">
+	<lams:Alert5 type="warn" id="no-edit">
 		<fmt:message key="message.monitoring.summary.no.session" />
-	</lams:Alert>
+	</lams:Alert5>
 </c:when>
 	
 <c:otherwise>
+	<em>
+		<fmt:message key="label.graph.help"/>
+	</em>
 	
-	<p><fmt:message key="label.graph.help"/></p>
-	
 	<c:choose>
 	<c:when test="${sessionMap.assessment.useSelectLeaderToolOuput}">	
-		<div class="panel panel-default" >
-       	<div class="panel-body">
+		<div class="lcard" >
+       	<div class="card-body">
  		<div class="row">
-			 <div class="col-xs-12"></div>
-				 <div id="chartDivLeader${sessionMap.toolContentID}" class="markChartDiv"></div>
+			<div class="col-12"></div>
+			<div id="chartDivLeader${sessionMap.toolContentID}" class="markChartDiv"></div>
 		</div>
             
         <div class="row"> 
@@ -147,16 +149,18 @@
 		
 	<c:otherwise>
 		<c:if test="${sessionMap.isGroupedActivity}">
-			<h4 class="voffset20"><fmt:message key="label.activity.stats"/></h4>
+			<div class="card-subheader fs-4 mt-4 mb-2">
+				<fmt:message key="label.activity.stats"/>
+			</div>
 		</c:if>
-		<div class="panel panel-default" >
-       		<div class="panel-body">
+		
+		<div class="lcard" >
+       		<div class="card-body">
             <div class="row">
-                 <div class="col-xs-12" ></div>
+                 <div class="col-12" ></div>
                  <div id="chartDivActivity${sessionMap.toolContentID}" class="markChartDiv"></div>
             </div>
 
-
 			<div class="row"> 
 				<div class="col-md-6" style="padding: 0px 20px 0px 20px;">
 					<table class="table table-striped table-hover table-condensed">
@@ -215,23 +219,23 @@
                     </table>
 				</div>
 			</div>	
-					
 			</div>
 		</div>
 		
 		<c:if test="${sessionMap.isGroupedActivity}">
-			<h4 class="voffset20"><fmt:message key="label.group.stats"/></h4>
+			<div class="card-subheader fs-4 mt-4 mb-2">
+				<fmt:message key="label.group.stats"/>
+			</div>
+			
 			<c:forEach var="sessionDto" items="${sessionDtos}">
-			    <div class="panel panel-default" >
-			        <div class="panel-heading" id="heading${sessionDto.sessionId}">
-						<span class="panel-title">
-							<fmt:message key="monitoring.label.group" />: <c:out value="${sessionDto.sessionName}" />
-						</span>
+			    <div class="lcard" >
+			        <div class="card-header" id="heading${sessionDto.sessionId}">
+						<fmt:message key="monitoring.label.group" />: <c:out value="${sessionDto.sessionName}" />
 			        </div>
-		       		<div class="panel-body">
-                        
+			        
+		       		<div class="card-body">    
 					<div class="row">
-						 <div class="col-xs-12"></div>
+						 <div class="col-12"></div>
 		 				 <div id="chartDivSession${sessionDto.sessionId}" class="markChartDiv"></div>
 				    </div>
                         
@@ -302,20 +306,20 @@
 	</c:choose>		
 	
 	<div id="accordion-qb-stats" class="panel-group voffset20" role="tablist" aria-multiselectable="true"> 
-	    <div class="panel panel-default">
-	        <div class="panel-heading collapsable-icon-left" id="heading-qb-stats">
-	        	<span class="panel-title">
-			    	<a class="collapsed" role="button" data-toggle="collapse" href="#qb-stats" aria-expanded="true" aria-controls="qb-stats">
+	    <div class="lcard">
+	        <div class="card-header" id="heading-qb-stats">
+	        	<span class="card-title collapsable-icon-left">
+					<button type="button" class="btn btn-secondary-darker no-shadow" data-bs-toggle="collapse" data-bs-target="#qb-stats" 
+							aria-expanded="true" aria-controls="qb-stats">
 		          		<fmt:message key="label.qb.stats" />
-		          	</a>
+		          	</button>
 		          	<lams:Popover>
 		          		<fmt:message key="label.qb.stats.tooltip" />
 		          	</lams:Popover>
-
 	      		</span>
 	        </div>
 	
-			<div aria-expanded="false" id="qb-stats" class="panel-body panel-collapse collapse" role="tabpanel" aria-labelledby="heading-qb-stats">
+			<div id="qb-stats" class="card-body collapse show">
 				<table class="table table-striped table-hover table-condensed">
 					<tr>		
 						<th scope="col"  class="text-left">
Index: lams_tool_assessment/web/pages/monitoring/summary.jsp
===================================================================
diff -u -r0b1d534ce1915b907afff0171909f90226b31921 -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_assessment/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 0b1d534ce1915b907afff0171909f90226b31921)
+++ lams_tool_assessment/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -1,10 +1,9 @@
 <%@ include file="/common/taglibs.jsp"%>
-
+<c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 <c:set var="sessionDtos" value="${sessionMap.sessionDtos}"/>
 <c:set var="assessment" value="${sessionMap.assessment}"/>
 <c:set var="showQuestionMonitoringActionButtons" value="${not empty sessionDtos}" />
-
 <c:set var="timeLimitPanelUrl"><lams:LAMSURL/>monitoring/timeLimit.jsp</c:set>
 <c:url var="timeLimitPanelUrl" value="${timeLimitPanelUrl}">
 	<c:param name="toolContentId" value="${assessment.contentId}"/>
@@ -15,7 +14,33 @@
 	<c:param name="controllerContext" value="tool/laasse10/monitoring" />
 </c:url>
 
+<link href="${lams}css/jquery-ui-bootstrap-theme5.css" rel="stylesheet" type="text/css">
+<link href="${lams}css/jquery-ui.timepicker.css" rel="stylesheet" type="text/css">
+<link href="${lams}css/thickbox.css" rel="stylesheet" rel="stylesheet" type="text/css">
+<link href="${lams}css/free.ui.jqgrid.custom.css" rel="stylesheet" type="text/css" >
+<lams:css suffix="chart"/>
+<link href="${lams}css/jquery.jqGrid.confidence-level-formattter.css" rel="stylesheet" type="text/css">
+<c:if test="${not empty codeStyles}">
+	<link rel="stylesheet" type="text/css" href="${lams}css/codemirror.css" />
+</c:if>
 <style>
+	.ui-jqdialog.ui-jqgrid-bootstrap .ui-jqdialog-titlebar, .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-caption {
+		background-color: #f5f5f5;
+	}
+	
+	#completion-charts-container>div {
+		padding: 5rem 2rem;
+	}
+	
+	pre {
+		background-color: initial;
+		border: none;
+	}
+	
+	.requires-grading {
+		background-color: rgba(255, 195, 55, .6);
+	}
+
 	.question-title {
 		overflow: auto;
 		min-width: 150px;
@@ -31,23 +56,90 @@
 		margin: auto;
 	}
 
-	#questions-data {
-		border-collapse: separate;
-	}
-
 	#questions-data .sticky-left-header {
 		position: sticky;
 		left: 0;
 		background-color: inherit;
 	}
 
-	#questions-data tbody tr:nth-of-type(even){
-		background-color: white;
+	.complete-item-gif {
+	    display: none;
 	}
 </style>
 
-<%@ include file="parts/discloseAnswers.jsp"%>
+<script>
+	var LAMS_URL    = '<lams:LAMSURL />',
+		WEB_APP_URL = '<lams:WebAppURL />',
+		LABELS = {
+			ACTIVITY_COMPLETION_CHART_TITLE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.completion"/></spring:escapeBody>',
+			ACTIVITY_COMPLETION_CHART_POSSIBLE_LEARNERS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.completion.possible"/></spring:escapeBody>',
+			ACTIVITY_COMPLETION_CHART_STARTED_LEARNERS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.completion.started"/></spring:escapeBody>',
+			ACTIVITY_COMPLETION_CHART_COMPLETED_LEARNERS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.completion.completed"/></spring:escapeBody>',
+			ANSWERED_QUESTIONS_CHART_TITLE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.answered.questions"/></spring:escapeBody>',
+			ANSWERED_QUESTIONS_CHART_TITLE_GROUPS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.answered.questions.groups"/></spring:escapeBody>',
+			ANSWERED_QUESTIONS_CHART_X_AXIS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.answered.questions.x.axis"/></spring:escapeBody>',
+			ANSWERED_QUESTIONS_CHART_Y_AXIS_STUDENTS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.answered.questions.y.axis.students"/></spring:escapeBody>',
+			ANSWERED_QUESTIONS_CHART_Y_AXIS_GROUPS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.answered.questions.y.axis.groups"/></spring:escapeBody>'
+		},
+		// pass settings to monitorToolSummaryAdvanced.js
+	    submissionDeadlineSettings = {
+			lams: '<lams:LAMSURL />',
+			submissionDeadline: '${submissionDeadline}',
+			submissionDateString: '${submissionDateString}',
+			setSubmissionDeadlineUrl: '<c:url value="/monitoring/setSubmissionDeadline.do"/>?<csrf:token/>',
+			toolContentID: '<c:out value="${param.toolContentID}" />',
+			messageNotification: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="monitor.summary.notification" /></spring:escapeBody>',
+			messageRestrictionSet: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="monitor.summary.date.restriction.set" /></spring:escapeBody>',
+			messageRestrictionRemoved: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="monitor.summary.date.restriction.removed" /></spring:escapeBody>'
+		},
+		confidenceLevelsSettings = {
+			type: "${assessment.confidenceLevelsType}",
+			LABEL_NOT_CONFIDENT: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.not.confident" /></spring:escapeBody>',
+			LABEL_CONFIDENT: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.confident" /></spring:escapeBody>',
+			LABEL_VERY_CONFIDENT: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.very.confident" /></spring:escapeBody>',
+			LABEL_NOT_SURE: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.not.sure" /></spring:escapeBody>',
+			LABEL_SURE: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.sure" /></spring:escapeBody>',
+			LABEL_VERY_SURE: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.very.sure" /></spring:escapeBody>'
+		};
+</script>
+<lams:JSImport src="includes/javascript/common.js" />
+<script type="text/javascript" src="${lams}includes/javascript/thickbox.js"></script>
+<lams:JSImport src="includes/javascript/monitorToolSummaryAdvanced.js" />
+<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.plugin.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.timepicker.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.blockUI.js"></script> 
+<script type="text/javascript" src="${lams}includes/javascript/free.jquery.jqgrid.min.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/chart.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/d3.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/chartjs/chart.umd.js"></script>
+<lams:JSImport src="includes/javascript/chart.js" relative="true" />
+<script type="text/javascript" src="${lams}includes/javascript/jquery.cookie.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.countdown.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/download.js"></script>
+<lams:JSImport src="includes/javascript/dialog5.js" />
+<lams:JSImport src="includes/javascript/portrait5.js" />
+<script type="text/javascript" src="${lams}includes/javascript/jquery.jqGrid.confidence-level-formattter.js"></script> 		
+<c:if test="${not empty codeStyles}">
+	<script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/runmode-standalone.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/colorize.js"></script>
+</c:if>
+<%-- codeStyles is a set, so each code style will be listed only once --%>
+<c:forEach items="${codeStyles}" var="codeStyle">
+	<c:choose>
+		<c:when test="${codeStyle == 1}">
+			<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/python.js"></script>
+		</c:when>
+		<c:when test="${codeStyle == 2}">
+			<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/javascript.js"></script>
+		</c:when>
+		<c:when test="${codeStyle >= 3}">
+			<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/clike.js"></script>
+		</c:when>
+	</c:choose>
+</c:forEach>
 
+<%@ include file="parts/discloseAnswers.jsp"%>
 <script type="text/javascript">
 	var activityCompletionChart = null,
 			answeredQuestionsChart = null;
@@ -58,25 +150,23 @@
 
 	$(document).ready(function(){
 		loadResultsPane($('#results'), false);
-
 		initializePortraitPopover("<lams:LAMSURL />");
 
 		<c:forEach var="sessionDto" items="${sessionDtos}">
-		buildJqgridLearnerTable(${sessionDto.sessionId});
+			buildJqgridLearnerTable(${sessionDto.sessionId});
 		</c:forEach>
 		<c:if test="${sessionMap.isGroupedActivity}">
-		buildJqgridLearnerTable('-all-learners');
+			buildJqgridLearnerTable('-all-learners');
 		</c:if>
 
-
 		//jqgrid autowidth (http://stackoverflow.com/a/1610197)
 		$(window).bind('resize', function() {
-			resizeJqgrid(jQuery(".ui-jqgrid-btable:visible"));
+			resizeJqgrid(jQuery(".ui-jqgrid-btable"));
 		});
 
 		//resize jqGrid on openning of bootstrap collapsible
 		$('div[id^="collapse"]').on('shown.bs.collapse', function () {
-			resizeJqgrid(jQuery(".ui-jqgrid-btable:visible", this));
+			resizeJqgrid(jQuery(".ui-jqgrid-btable", this));
 		})
 
 		// trigger the resize when the window first opens so that the grid uses all the space available.
@@ -112,8 +202,9 @@
 			colModel:[
 				{name:'userId', index:'userId', width:0, hidden: true},
 				{name:'sessionId', index:'sessionId', width:0, hidden: true},
-				{name:'userName', index:'userName', width:570, searchoptions: { clearSearch: false }, formatter:userNameFormatter},
-				{name:'total', index:'total', width:174, align:"right", formatter:'number', search:false},
+				{name:'userName', index:'userName', width:570, labelAlign: 'left', 
+						searchoptions: { clearSearch: false, attr: {style: "text-align:left;"} }, formatter:userNameFormatter},
+				{name:'total', index:'total', width:174, labelAlign:"right", align:"right", formatter:'number', search:false},
 				{name:'portraitId', index:'portraitId', width:0, hidden: true},
 			],
 			ondblClickRow: function(rowid) {
@@ -129,20 +220,23 @@
 				if(rowid == null) {
 					rowid=0;
 				}
-				var tableName = $(this).data('sessionId');
-				var sessionId = jQuery("#list" + tableName).getCell(rowid, 'sessionId');
-				var userId = jQuery("#list" + tableName).getCell(rowid, 'userId');
-				var userMasterDetailUrl = '<c:url value="/monitoring/userMasterDetail.do"/>';
-				jQuery("#userSummary" + tableName).clearGridData().setGridParam({gridstate: "visible"}).trigger("reloadGrid");
+				let tableName = $(this).data('sessionId'),
+					table = $("#userSummary" + tableName),
+					sessionId = $("#list" + tableName).getCell(rowid, 'sessionId'),
+					userId = $("#list" + tableName).getCell(rowid, 'userId'),
+					userMasterDetailUrl = '<c:url value="/monitoring/userMasterDetail.do"/>';
+				
+				//table.clearGridData().setGridParam({gridstate: "visible"}).trigger("reloadGrid");
 				$("#masterDetailArea").load(
-						userMasterDetailUrl,
-						{
-							userID: userId,
-							sessionId: sessionId,
-							tableName: tableName,
-							sessionMapID: '${sessionMapID}'
-						}
+					userMasterDetailUrl,
+					{
+						userID: userId,
+						sessionId: sessionId,
+						tableName: tableName,
+						sessionMapID: '${sessionMapID}'
+					}
 				);
+				table.setGridWidth($("#user-summary-container" + tableName).parent().width(), true);
 			},
 			loadError: function(xhr,st,err) {
 				var sessionId = $(this).data('sessionId');
@@ -157,7 +251,7 @@
 				.jqGrid('filterToolbar', {
 					searchOnEnter: false
 				})
-				</c:if>
+		</c:if>
 				.navGrid("#listPager" + sessionId, {edit:false,add:false,del:false,search:false});
 
 		var oldValue = 0;
@@ -166,7 +260,6 @@
 			autoencode:false,
 			rowNum: 10000,
 			gridstate:"hidden",
-			height: 180,
 			autowidth: true,
 			shrinkToFit: false,
 			guiStyle: "bootstrap",
@@ -177,34 +270,34 @@
 				'<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.question.summary.question" /></spring:escapeBody>',
 				'<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.user.summary.response" /></spring:escapeBody>',
 				<c:if test="${sessionMap.assessment.enableConfidenceLevels}">
-				'<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.confidence" /></spring:escapeBody>',
+					'<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.confidence" /></spring:escapeBody>',
 				</c:if>
 				'<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.authoring.basic.list.header.mark" /></spring:escapeBody>',
 				'<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.user.summary.marker" /></spring:escapeBody>',
 				'<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.user.summary.marker.comment" /></spring:escapeBody>'
 			],
 			colModel:[
-				{name:'id', index:'id', width:20, sorttype:"int"},
+				{name:'id', index:'id', width:20, labelAlign: 'left', sorttype:"int"},
 				{name:'questionResultUid', index:'questionResultUid', width:0, hidden: true},
-				{name:'title', index:'title', width: 200},
-				{name:'response', index:'response', datatype:'html', width:400, sortable:false},
+				{name:'title', index:'title', width: 200, labelAlign: 'left'},
+				{name:'response', index:'response', datatype:'html', width:400, labelAlign: 'left', sortable:false},
 				<c:if test="${sessionMap.assessment.enableConfidenceLevels}">
-				{name:'confidence', index:'confidence', width: 80, classes: 'vertical-align', formatter: gradientNumberFormatter},
+					{name:'confidence', index:'confidence', width: 80, classes: 'vertical-align', formatter: gradientNumberFormatter},
 				</c:if>
-				{name:'grade', index:'grade', width:80, sorttype:"float", editable:true,
-					editoptions: {size:4, maxlength: 4}, align:"right", classes: 'vertical-align', title : false },
-				{name:'marker', index:'marker', width: 110, title: false},
-				{name:'markerComment', index:'markerComment', width:300, editable:true, edittype: 'textarea',
-					sortable: false, editoptions: {maxlength: 3000, rows: 6}, title : false,
-					formatter:function(cellvalue, options, rowObject, event) {
-						if (event == "edit") {
-							cellvalue = cellvalue.replace(/\n/g, '\n<br>');
+				{name:'grade', index:'grade', width:80, labelAlign: 'center', sorttype:"float", editable:true,
+						editoptions: {size:4, maxlength: 4}, align:"center", classes: 'vertical-align', title : false },
+				{name:'marker', index:'marker', width: 110, labelAlign: 'left', title: false},
+				{name:'markerComment', index:'markerComment', width:300, labelAlign: 'left', editable:true, edittype: 'textarea',
+						sortable: false, editoptions: {maxlength: 3000, rows: 6}, title : false,
+						formatter:function(cellvalue, options, rowObject, event) {
+							if (event == "edit") {
+								cellvalue = cellvalue.replace(/\n/g, '\n<br>');
+							}
+							return cellvalue;
+						},
+						unformat:function(cellvalue, options, rowObject) {
+							return rowObject.innerText;
 						}
-						return cellvalue;
-					},
-					unformat:function(cellvalue, options, rowObject) {
-						return rowObject.innerText;
-					}
 				}
 			],
 			multiselect: false,
@@ -292,10 +385,16 @@
 	};
 
 	function showChangeLeaderModal(toolSessionId) {
-		$('#change-leader-modals').empty()
-				.load('<c:url value="/monitoring/displayChangeLeaderForGroupDialogFromActivity.do" />',{
-					toolSessionID : toolSessionId
-				});
+		let modalContainer = $('#change-leader-modals');
+		modalContainer.empty().load(
+			'<c:url value="/monitoring/displayChangeLeaderForGroupDialogFromActivity.do" />',
+			{
+				toolSessionID : toolSessionId
+			}, 
+			function(){
+				modalContainer.children('.modal').modal('show');
+			}
+		);
 	}
 
 	function onChangeLeaderCallback(response, leaderUserId, toolSessionId){
@@ -322,247 +421,251 @@
 			alert("<spring:escapeBody javaScriptEscape="true"><fmt:message key='label.monitoring.leader.not.changed'/></spring:escapeBody>");
 		}
 	}
-
-
 </script>
 
-<div class="panel">
-	<h4>
+<div class="instructions">
+	<div class="fs-4">
 		<c:out value="${assessment.title}" escapeXml="true"/>
-	</h4>
+	</div>
 
-	<div class="instructions voffset5">
+	<div class="mt-2">
 		<c:out value="${assessment.instructions}" escapeXml="false"/>
 	</div>
+</div>
 
-	<c:choose>
-		<c:when test="${empty sessionDtos}">
-			<lams:Alert type="info" id="no-session-summary" close="false">
-				<fmt:message key="message.monitoring.summary.no.session" />
-			</lams:Alert>
-		</c:when>
-		<c:otherwise>
-			<div id="completion-charts-container">
-				<div class="col-sm-12 col-md-6">
-					<canvas id="activity-completion-chart"></canvas>
-				</div>
-
-				<div class="col-sm-12 col-md-6">
-					<canvas id="answered-questions-chart"></canvas>
-				</div>
+<c:choose>
+	<c:when test="${empty sessionDtos}">
+		<lams:Alert5 type="info" id="no-session-summary" close="false">
+			<fmt:message key="message.monitoring.summary.no.session" />
+		</lams:Alert5>
+	</c:when>
+	
+	<c:otherwise>
+		<div id="completion-charts-container" class="row">
+			<div class="col-sm-12 col-md-6">
+				<canvas id="activity-completion-chart"></canvas>
 			</div>
-		</c:otherwise>
-	</c:choose>
 
-
-	<lams:WaitingSpinner id="messageArea_Busy"></lams:WaitingSpinner>
-	<div class="voffset5 help-block" id="messageArea"></div>
-</div>
-
+			<div class="col-sm-12 col-md-6">
+				<canvas id="answered-questions-chart"></canvas>
+			</div>
+		</div>
+	</c:otherwise>
+</c:choose>
 <div style="clear: both"></div>
 
 <c:if test="${not empty sessionDtos}">
 	<c:if test="${displayStudentChoices and not empty questions}">
-		<h5><fmt:message key="label.student.choices" /></h5>
+		<div class="card-subheader fs-4">
+			<fmt:message key="label.student.choices" />
+		</div>
 		<%@ include file="/pages/monitoring/parts/mcqStudentChoices.jsp" %>
 	</c:if>
+	
 	<c:if test="${sessionMap.isGroupedActivity and sessionMap.assessment.useSelectLeaderToolOuput and not empty questionDtos}">
-		<h5><fmt:message key="label.groups.choices" /></h5>
-		<div class="row no-gutter">
-			<div class="col-xs-12 col-md-12 col-lg-12">
-				<div class="panel">
-					<div class="panel-body">
-						<div class="table-responsive" style="margin:0">
-							<table id="questions-data" class="table table-responsive table-striped table-bordered table-hover table-condensed">
-								<thead>
-								<tr role="row">
-									<th></th>
-									<c:forEach var="tblQuestionDto" items="${questionDtos}" varStatus="i">
-										<th class="text-center">
-											<div class="question-title">
-												<c:if test="${assessment.numbered}">
-													${i.count}.
-												</c:if>
-													${tblQuestionDto.title}
-											</div>
-										</th>
-									</c:forEach>
-								</tr>
-								</thead>
-								<tbody>
+		<div class="card-subheader fs-4">
+			<fmt:message key="label.groups.choices" />
+		</div>
 
-								<tr role="row">
-									<th class="sticky-left-header"><b>Question type</b></th>
-									<c:forEach var="tblQuestionDto" items="${questionDtos}" varStatus="i">
-										<td class="text-center">
-												${tblQuestionDto.questionTypeLabel}
-										</td>
-									</c:forEach>
-								</tr>
+		<div class="table-responsive shadow rounded-4">
+		<table id="questions-data" class="table table-hover table-sm">
+			<thead class="text-bg-secondary">
+				<tr role="row">
+					<th></th>
+					
+					<c:forEach var="tblQuestionDto" items="${questionDtos}" varStatus="i">
+						<th class="text-center py-3">
+							<div class="question-title">
+								<c:if test="${assessment.numbered}">
+									${i.count}.
+								</c:if>
+								${tblQuestionDto.title}
+							</div>
+						</th>
+					</c:forEach>
+				</tr>
+			</thead>
+							
+			<tbody>
+				<tr role="row">
+					<th class="sticky-left-header">
+						Question type
+					</th>
+					
+					<c:forEach var="tblQuestionDto" items="${questionDtos}" varStatus="i">
+						<td class="text-center">
+							${tblQuestionDto.questionTypeLabel}
+						</td>
+					</c:forEach>
+				</tr>
 
-								<tr>
-									<td class="sticky-left-header"><b>Correct answer</b></td>
-									<c:forEach var="tblQuestionDto" items="${questionDtos}" varStatus="i">
-										<td class="text-center">
-											<c:out value="${tblQuestionDto.correctAnswer}" escapeXml="false" />
-										</td>
-									</c:forEach>
-								</tr>
+				<tr>
+					<th class="sticky-left-header">
+						Correct answer
+					</th>
+					<c:forEach var="tblQuestionDto" items="${questionDtos}" varStatus="i">
+						<td class="text-center">
+							<c:out value="${tblQuestionDto.correctAnswer}" escapeXml="false" />
+						</td>
+					</c:forEach>
+				</tr>
 
-								<tr>
-									<td colspan="${fn:length(questionDtos) + 1}" style="font-weight: bold;"><fmt:message key="label.teams"/></td>
-								</tr>
+				<tr>
+					<th colspan="${fn:length(questionDtos) + 1}" class="text-bg-secondary">
+						<fmt:message key="label.teams"/>
+					</th>
+				</tr>
 
-								<c:forEach var="session" items="${sessions}" varStatus="i">
-									<tr>
-										<td class="text-center sticky-left-header">
-												${session.sessionName}
-										</td>
+				<c:forEach var="session" items="${sessions}" varStatus="i">
+					<tr>
+						<th class="sticky-left-header">
+							${session.sessionName}
+						</th>
 
-										<c:forEach var="tblQuestionDto" items="${questionDtos}" varStatus="j">
-											<c:set var="questionResultDto" value="${tblQuestionDto.sessionQuestionResults[i.index]}"/>
-											<td class="text-center <c:if test="${questionResultDto.correct}">success</c:if>" >
-													${questionResultDto.answer}
-											</td>
-										</c:forEach>
-
-									</tr>
-								</c:forEach>
-								</tbody>
-							</table>
-						</div>
-					</div>
-				</div>
-			</div>
+						<c:forEach var="tblQuestionDto" items="${questionDtos}" varStatus="j">
+							<c:set var="questionResultDto" value="${tblQuestionDto.sessionQuestionResults[i.index]}"/>
+							<td class="text-center <c:if test="${questionResultDto.correct}">success</c:if>" >
+								${questionResultDto.answer}
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</tbody>
+		</table>
 		</div>
 	</c:if>
 
-	<button onclick="return exportSummary();" class="btn btn-default btn-sm btn-disable-on-submit pull-right">
-		<i class="fa fa-download" aria-hidden="true"></i>
-		<fmt:message key="label.monitoring.summary.export.summary" />
-	</button>
-
-	<h5><fmt:message key="label.monitoring.summary.summary" /></h5>
-
-	<div class="comments">
-		<fmt:message key="label.monitoring.summary.double.click" />
+	<div class="mt-4">
+		<lams:WaitingSpinner id="messageArea_Busy"></lams:WaitingSpinner>
+		<div class="clearfix">
+			<div class="badge text-bg-info float-end px-5 py-3 mt-2" id="messageArea"></div>
+		</div>
+	
+		<button type="button" onclick="exportSummary();" class="btn btn-secondary btn-sm btn-disable-on-submit float-end mt-2">
+			<i class="fa fa-download" aria-hidden="true"></i>
+			<fmt:message key="label.monitoring.summary.export.summary" />
+		</button>
+	
+		<div class="card-subheader fs-4">
+			<fmt:message key="label.monitoring.summary.summary" />
+		</div>
+	
+		<div class="comments">
+			<fmt:message key="label.monitoring.summary.double.click" />
+		</div>
 	</div>
 
-	<div id="masterDetailArea" class="voffset10"></div>
-
+	<div id="masterDetailArea" class="mt-3"></div>
 	<a onclick="" href="return false;" class="thickbox initially-hidden" id="userSummaryHref"></a>
 
-	<c:if test="${sessionMap.isGroupedActivity}">
-		<div class="panel-group" id="accordionSessions" role="tablist" aria-multiselectable="true">
-	</c:if>
-
 	<c:forEach var="sessionDto" items="${sessionDtos}" varStatus="status">
-
 		<c:choose>
 			<c:when test="${sessionMap.isGroupedActivity}">
-				<div class="panel panel-default" >
-				<div class="panel-heading" id="heading${sessionDto.sessionId}">
-			        	<span class="panel-title collapsable-icon-left">
-			        		<a class="${status.first ? '' : 'collapsed'}" role="button" data-toggle="collapse" href="#collapse${sessionDto.sessionId}"
-							   aria-expanded="${status.first ? 'false' : 'true'}" aria-controls="collapse${sessionDto.sessionId}" >
+				<div class="lcard" >
+					<div class="card-header" id="heading${sessionDto.sessionId}">
+			        	<span class="card-title collapsable-icon-left">
+			        		<button class="btn btn-secondary-darker no-shadow ${status.first ? '' : 'collapsed'}" data-bs-toggle="collapse" data-bs-target="#collapse${sessionDto.sessionId}"
+									aria-expanded="${status.first ? 'false' : 'true'}" aria-controls="collapse${sessionDto.sessionId}" >
 								<fmt:message key="monitoring.label.group" />:	<c:out value="${sessionDto.sessionName}" />
-							</a>
+							</button>
 						</span>
-					<c:if test="${assessment.useSelectLeaderToolOuput and sessionDto.numberOfLearners > 0 and not sessionDto.leaderFinished}">
-						<button type="button" class="btn btn-default btn-xs pull-right"
-								onClick="javascript:showChangeLeaderModal(${sessionDto.sessionId})">
-							<fmt:message key='label.monitoring.change.leader'/>
-						</button>
-					</c:if>
-				</div>
+						
+						<c:if test="${assessment.useSelectLeaderToolOuput and sessionDto.numberOfLearners > 0 and not sessionDto.leaderFinished}">
+							<button type="button" class="btn btn-light btn-sm float-end"
+									onClick="javascript:showChangeLeaderModal(${sessionDto.sessionId})">
+								<i class="fa-solid fa-user-pen me-1"></i>
+								<fmt:message key='label.monitoring.change.leader'/>
+							</button>
+						</c:if>
+					</div>
 
-				<div id="collapse${sessionDto.sessionId}" class="panel-collapse collapse ${status.first ? 'in' : ''}"
-				role="tabpanel" aria-labelledby="heading${sessionSummary.sessionId}">
+					<div id="collapse${sessionDto.sessionId}" class="card-body collapse ${status.first ? 'show' : ''}">
 			</c:when>
+			
 			<c:when test="${assessment.useSelectLeaderToolOuput and sessionDto.numberOfLearners > 0 and not sessionDto.leaderFinished}">
-				<div style="text-align: right">
-					<button type="button" class="btn btn-default btn-sm voffset10" style="margin-bottom: 10px;"
+				<div class="clearfix">
+					<button type="button" class="btn btn-secondary btn-sm float-end mb-3 mt-n3"
 							onClick="javascript:showChangeLeaderModal(${sessionDto.sessionId})">
+						<i class="fa-solid fa-user-pen me-1"></i>
 						<fmt:message key='label.monitoring.change.leader'/>
 					</button>
 				</div>
 			</c:when>
 		</c:choose>
 
 		<table id="list${sessionDto.sessionId}"></table>
-		<div class="voffset10"></div>
-		<table id="userSummary${sessionDto.sessionId}"></table>
+		
+		<div id="user-summary-container${sessionDto.sessionId}" class="mt-4" style="display: none;">
+			<table id="userSummary${sessionDto.sessionId}" class="w-100" ></table>
+		</div>
+		
 		<div id="listPager${sessionDto.sessionId}"></div>
 
 		<c:if test="${sessionMap.isGroupedActivity}">
-			</div> <!-- end collapse area  -->
-			</div> <!-- end collapse panel  -->
-			<div class="voffset5">&nbsp;</div>
+					</div> <!-- end collapse area  -->
+				</div> <!-- end collapse card  -->
 		</c:if>
-
 	</c:forEach>
 
 	<c:if test="${sessionMap.isGroupedActivity}">
-		<div class="panel panel-default" >
-			<div class="panel-heading" id="heading-all-learners">
-		        	<span class="panel-title collapsable-icon-left">
-		        		<a class="collapsed" role="button" data-toggle="collapse" href="#collapse-all-learners"
-						   aria-expanded="false" aria-controls="collapse-all-learners" >
-							<fmt:message key="monitoring.label.all.learners" />
-						</a>
-					</span>
+		<div class="lcard" >
+			<div class="card-header" id="heading-all-learners">
+		        <span class="card-title collapsable-icon-left">
+		        	<button type="button" class="btn btn-secondary-darker no-shadow collapsed" data-bs-toggle="collapse" data-bs-target="#collapse-all-learners" 
+							aria-expanded="false" aria-controls="collapse-all-learners">
+						<fmt:message key="monitoring.label.all.learners" />
+					</button>
+				</span>
 			</div>
-			<div id="collapse-all-learners" class="panel-collapse collapse"
-				 role="tabpanel" aria-labelledby="heading-all-learners">
 
+			<div id="collapse-all-learners" class="card-body collapse">
 				<table id="list-all-learners"></table>
-				<div class="voffset10"></div>
-				<table id="userSummary-all-learners"></table>
+				<div id="user-summary-container-all-learners" class="mt-4" style="display: none;">
+					<table id="userSummary-all-learners"></table>
+				</div>
 				<div id="listPager-all-learners"></div>
-
 			</div>
 		</div>
-		</div> <!--  end panel group -->
 	</c:if>
 </c:if>
 
-<h5><fmt:message key="label.monitoring.summary.report.by.question" /></h5>
+<div class="assessment-questions-pane mb-5">
+	<div class="card-subheader fs-4 mt-4 pb-0">
+		<fmt:message key="label.monitoring.summary.report.by.question" />
+	</div>
 
-<div class="assessment-questions-pane">
 	<c:if test="${showQuestionMonitoringActionButtons and (assessment.allowDiscloseAnswers or vsaPresent)}">
 		<%-- Release correct/groups answers for all questions in this assessment --%>
-		<div class="row">
-			<div class="col-xs-12 col-md-12 col-lg-12">
-				<div class="btn-group-sm pull-right disclose-all-button-group">
-					<div class="btn btn-default disclose-all-correct-button">
-						<fmt:message key="label.disclose.all.correct.answers"/>
-					</div>
-					<div class="btn btn-default disclose-all-groups-button">
-						<fmt:message key="label.disclose.all.groups.answers"/>
-					</div>
-				</div>
+		<div class="disclose-all-button-group clearfix">
+			<div class="btn-group float-end" role="group">
+				<button type="button" class="btn btn-light disclose-all-correct-button">
+					<i class="fa-solid fa-eye me-1"></i>
+					<fmt:message key="label.disclose.all.correct.answers"/>
+				</button>
+				<button type="button" class="btn btn-light disclose-all-groups-button">
+					<i class="fa-solid fa-eye me-1"></i>
+					<fmt:message key="label.disclose.all.groups.answers"/>
+				</button>
 
 				<c:if test="${vsaPresent}">
-					<a class="btn btn-sm pull-right btn-default roffset5" target="_blank"
-					   href='<lams:LAMSURL />qb/vsa/displayVsaAllocate.do?toolContentID=${assessment.contentId}'>
+					<a class="btn btn-light" target="_blank"
+							href='<lams:LAMSURL />qb/vsa/displayVsaAllocate.do?toolContentID=${assessment.contentId}'>
+						<i class="fa-solid fa-arrow-down-1-9 me-1"></i>
 						<fmt:message key="label.vsa.allocate.button" />
 					</a>
 				</c:if>
 			</div>
 		</div>
 	</c:if>
 
-
-	<div id="results" class="voffset10" data-tool-content-id="${assessment.contentId}"></div>
+	<div id="results" class="mt-3" data-tool-content-id="${assessment.contentId}"></div>
 </div>
 
-
-<br/>
-
 <%@ include file="parts/advanceoptions.jsp"%>
 
 <div id="time-limit-panel-placeholder"></div>
 
-<%@ include file="parts/dateRestriction.jsp"%>
+<c:set var="restrictedTitle"><fmt:message key="monitor.summary.date.restriction" /></c:set>
+<lams:RestrictedUsageAccordian title="${restrictedTitle}" submissionDeadline="${submissionDeadline}" cssClass="my-2"/>
 
-<div id="change-leader-modals"></div>
\ No newline at end of file
+<div id="change-leader-modals"></div>
Index: lams_tool_assessment/web/pages/tblmonitoring/assessment.jsp
===================================================================
diff -u -rd6448910114beeaf0bf28ace95db98870dfdb80b -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_assessment/web/pages/tblmonitoring/assessment.jsp	(.../assessment.jsp)	(revision d6448910114beeaf0bf28ace95db98870dfdb80b)
+++ lams_tool_assessment/web/pages/tblmonitoring/assessment.jsp	(.../assessment.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -1,9 +1,8 @@
 <%@ include file="/common/taglibs.jsp"%>
-<% pageContext.setAttribute("newLineChar", "\r\n"); %>
+<c:set var="newLineChar" value="<%= \"\r\n\" %>" />
 <c:set var="showQuestionMonitoringActionButtons" value="${attemptedLearnersNumber > 0}" />
 
 <%@ include file="/pages/monitoring/parts/discloseAnswers.jsp"%>
-
 <script>
 	//for allquestions.jsp to know whether to display an additional button
 	var showQuestionDetailsButton = false;
@@ -28,48 +27,40 @@
 
 <%-- For AEs tab the panes are defined in TBL monitor, for IRA we need to define it here --%>
 <div ${isIraAssessment ? 'id="assessment-pane-' += toolContentID += '"' : '' }
-		class="container-fluid ${isIraAssessment ? 'assessment-questions-pane-ira' : ''}">
+		class="container-main ms-4 ${isIraAssessment ? 'assessment-questions-pane-ira' : ''}">
 
 	<c:if test="${isIraAssessment}">
-		<div class="row">
-			<div class="col-10 offset-1">
-				<button class="btn btn-secondary float-end" type="button"
-					 onclick="javascript:showStudentChoices()">
-					<i class="fa fa-gauge"></i>
-					<fmt:message key="label.show.students.choices"/>
-				</button>   
-				<h3>
-					<fmt:message key="label.ira.questions.marks"/>
-				</h3>
-			</div>
-		</div>
+		<button class="btn btn-primary btn-icon-return float-end" type="button" onclick="showStudentChoices()">
+			<fmt:message key="label.show.students.choices"/>
+		</button>   
+		<h3>
+			<fmt:message key="label.ira.questions.marks"/>
+		</h3>
 	</c:if>
 	
 	<!-- Notifications -->  
-	<div class="row mb-3">
-		<div class="col-10 offset-1 pt-1">
-			<c:if test="${not isIraAssessment}">
-				<button class="btn btn-secondary float-end" type="button"
-					 onclick="javascript:showStudentChoices()">
-					<i class="fa fa-gauge"></i>
-					<fmt:message key="label.show.students.choices"/>
-				</button>   
-			</c:if>
-			<h4>
-				<i class="fa fa-users" style="color:gray" ></i> 
-				<fmt:message key="label.attendance"/>: <span>${attemptedLearnersNumber}</span>/<span class="total-learners-number"></span> 
-			</h4> 
-		</div>
+	<div class="mb-3 pt-1">
+		<c:if test="${not isIraAssessment}">
+			<button class="btn btn-primary btn-icon-return float-end" type="button" onclick="showStudentChoices()">
+				<fmt:message key="label.show.students.choices"/>
+			</button>   
+		</c:if>
+		<div>
+			<i class="fa fa-users" style="color:gray" ></i> 
+			<fmt:message key="label.attendance"/>: <span>${attemptedLearnersNumber}</span>/<span class="total-learners-number"></span> 
+		</div> 
 	</div>
 		
 	<c:if test="${allowDiscloseAnswers and showQuestionMonitoringActionButtons}">
 		<%-- Release correct/groups answers for all questions in this assessment --%>
-		<div class="row mb-3 disclose-all-button-group">
-			<div class="col-4 offset-7 text-end">
-				<button class="btn btn-secondary disclose-all-correct-button" type="button">
+		<div class="disclose-all-button-group clearfix mb-3">
+			<div class=" float-end btn-group">
+				<button class="btn btn-light disclose-all-correct-button" type="button">
+					<i class="fa-solid fa-eye me-1"></i>
 					<fmt:message key="label.disclose.all.correct.answers"/>
 				</button>
-				<button class="btn btn-secondary disclose-all-groups-button" type="button">
+				<button class="btn btn-light disclose-all-groups-button" type="button">
+					<i class="fa-solid fa-eye me-1"></i>
 					<fmt:message key="label.disclose.all.groups.answers"/>
 				</button>
 			</div>
Index: lams_tool_assessment/web/pages/tblmonitoring/assessmentStudentChoices.jsp
===================================================================
diff -u -rd6448910114beeaf0bf28ace95db98870dfdb80b -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_assessment/web/pages/tblmonitoring/assessmentStudentChoices.jsp	(.../assessmentStudentChoices.jsp)	(revision d6448910114beeaf0bf28ace95db98870dfdb80b)
+++ lams_tool_assessment/web/pages/tblmonitoring/assessmentStudentChoices.jsp	(.../assessmentStudentChoices.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -1,5 +1,5 @@
 <%@ include file="/common/taglibs.jsp"%>
-<% pageContext.setAttribute("newLineChar", "\r\n"); %>
+<c:set var="newLineChar" value="<%= \"\r\n\" %>" />
 
 <style>
 	.question-title {
@@ -15,10 +15,8 @@
 </style>
 
 <lams:JSImport src="includes/javascript/chart.js" relative="true" />
-
 <script>
 	var WEB_APP_URL = '<lams:WebAppURL />',
-
 			LABELS = $.extend(LABELS, {
 				ACTIVITY_COMPLETION_CHART_TITLE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.completion" /></spring:escapeBody>',
 				ACTIVITY_COMPLETION_CHART_POSSIBLE_LEARNERS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.completion.possible" /></spring:escapeBody>',
@@ -30,7 +28,6 @@
 				ANSWERED_QUESTIONS_CHART_Y_AXIS_STUDENTS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.answered.questions.y.axis.students" /></spring:escapeBody>',
 				ANSWERED_QUESTIONS_CHART_Y_AXIS_GROUPS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.answered.questions.y.axis.groups" /></spring:escapeBody>'
 			}),
-
 			activityCompletionChart = null,
 			answeredQuestionsChart = null,
 			COMPLETION_CHART_UPDATE_INTERVAL = 10 * 1000;
@@ -44,7 +41,7 @@
 			// destroy existing absolute time limit counters before refresh
 			$('.absolute-time-limit-counter, .time-limit-widget-individual-counter').countdown('destroy');
 			let data = JSON.parse(event.data);
-			$('#time-limit-panel-placeholder').load('<lams:LAMSURL/>monitoring/timeLimit5.jsp?toolContentId=${toolContentID}&absoluteTimeLimitFinish=' + data.absoluteTimeLimitFinish
+			$('#time-limit-panel-placeholder').load('<lams:LAMSURL/>monitoring/timeLimit.jsp?toolContentId=${toolContentID}&absoluteTimeLimitFinish=' + data.absoluteTimeLimitFinish
 					+ '&relativeTimeLimit=' + data.relativeTimeLimit + '&absoluteTimeLimit=' + data.absoluteTimeLimit
 					+ '&isTbl=true&controllerContext=tool/laasse10/monitoring');
 		});
@@ -71,35 +68,33 @@
 		form.submit();
 	};
 
-
 	function openActivityMonitoring(){
-		openPopUp('<lams:WebAppURL />monitoring/summary.do?toolContentID=${toolContentID}&contentFolderID='
-				+ contentFolderId, "MonitorActivity", popupHeight, popupWidth, true, true);
+		window.open("<lams:WebAppURL />monitoring/summary.do?toolContentID=${toolContentID}&lessonID=" + lessonId + "&contentFolderID=" + contentFolderId, "_self");
 	}
 </script>
 
-<div class="container-fluid">
+<div class="container-main ms-4">
 
 	<!-- Notifications -->
 	<div class="row">
 		<div class="col-10 offset-1 text-end">
-			<a href="#nogo" onclick="javascript:openActivityMonitoring(); return false;" type="button" class="btn btn-secondary buttons_column">
-				<i class="fa-solid fa-circle-info"></i>
+			<button type="button" onclick="openActivityMonitoring()" class="btn btn-secondary buttons_column">
+				<i class="fa-solid fa-circle-info me-1"></i>
 				<fmt:message key="label.activity.monitoring"/>
-			</a>
-			<a href="#nogo" type="button" class="btn btn-secondary buttons_column"
-			   onclick="javascript:loadAePane(${toolContentID}, 'default'); return false;">
-				<i class="fa fa-clipboard-question"></i>
+			</button>
+			<button type="button" class="btn btn-secondary buttons_column"
+					onclick="loadAePane(${toolContentID}, 'default')">
+				<i class="fa fa-clipboard-question me-1"></i>
 				<fmt:message key="label.hide.students.choices"/>
-			</a>
-			<a href="#nogo" onclick="javascript:printTable(); return false;" type="button" class="btn btn-secondary buttons_column">
-				<i class="fa fa-print"></i>
+			</button>
+			<button type="button" onclick="printTable()" class="btn btn-secondary buttons_column">
+				<i class="fa fa-print me-1"></i>
 				<fmt:message key="label.print"/>
-			</a>
-			<a href="#nogo" onclick="javascript:exportExcel(); return false;" type="button" class="btn btn-secondary buttons_column">
-				<i class="fa fa-file-excel"></i>
+			</button>
+			<button type="button" onclick="exportExcel()" class="btn btn-secondary buttons_column">
+				<i class="fa fa-file-excel me-1"></i>
 				<fmt:message key="label.excel.export"/>
-			</a>
+			</button>
 		</div>
 	</div>
 	<!-- End notifications -->
@@ -124,11 +119,8 @@
 	</div>
 
 	<!-- Table -->
-	<div class="row">
-		<div class="col-10 offset-1">
-			<div class="card">
-				<div class="card-body table-responsive p-0">
-
+	<div class="card">
+		<div class="card-body table-responsive p-0">
 					<table id="questions-data" class="table table-responsive table-bordered table-condensed p-2">
 						<thead>
 						<tr role="row" class="border-top-0">
@@ -172,13 +164,8 @@
 						<tbody id="student-choices-table">
 						</tbody>
 					</table>
-				</div>
-			</div>
 		</div>
 	</div>
 
-	<div class="row">
-		<div class="col-10 offset-1" id="time-limit-panel-placeholder">
-		</div>
-	</div>
-</div>
\ No newline at end of file
+	<div id="time-limit-panel-placeholder"></div>
+</div>
Index: lams_tool_assessment/web/pages/tblmonitoring/assessmentStudentChoicesTable.jsp
===================================================================
diff -u -r81f5d3a6311314287b3640033d1f2593f65ebe70 -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_assessment/web/pages/tblmonitoring/assessmentStudentChoicesTable.jsp	(.../assessmentStudentChoicesTable.jsp)	(revision 81f5d3a6311314287b3640033d1f2593f65ebe70)
+++ lams_tool_assessment/web/pages/tblmonitoring/assessmentStudentChoicesTable.jsp	(.../assessmentStudentChoicesTable.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -1,4 +1,5 @@
 <%@ include file="/common/taglibs.jsp"%>
+
 <c:forEach var="session" items="${sessions}" varStatus="i">
 	<tr>
 		<td class="text-center sticky-left-header">
@@ -11,6 +12,5 @@
 					${questionResultDto.answer}
 			</td>
 		</c:forEach>
-
 	</tr>
-</c:forEach>
\ No newline at end of file
+</c:forEach>
Index: lams_tool_assessment/web/pages/tblmonitoring/iraAssessmentStudentChoices.jsp
===================================================================
diff -u -rd6448910114beeaf0bf28ace95db98870dfdb80b -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_assessment/web/pages/tblmonitoring/iraAssessmentStudentChoices.jsp	(.../iraAssessmentStudentChoices.jsp)	(revision d6448910114beeaf0bf28ace95db98870dfdb80b)
+++ lams_tool_assessment/web/pages/tblmonitoring/iraAssessmentStudentChoices.jsp	(.../iraAssessmentStudentChoices.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -1,11 +1,10 @@
 <%@ include file="/common/taglibs.jsp"%>
-<% pageContext.setAttribute("newLineChar", "\r\n"); %>
+<c:set var="newLineChar" value="<%= \"\r\n\" %>" />
 
 <lams:JSImport src="includes/javascript/chart.js" relative="true" />
 
 <script>
 	var WEB_APP_URL = '<lams:WebAppURL />',
-
 			LABELS = $.extend(LABELS, {
 				ACTIVITY_COMPLETION_CHART_TITLE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.completion" /></spring:escapeBody>',
 				ACTIVITY_COMPLETION_CHART_POSSIBLE_LEARNERS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.completion.possible" /></spring:escapeBody>',
@@ -17,7 +16,6 @@
 				ANSWERED_QUESTIONS_CHART_Y_AXIS_STUDENTS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.answered.questions.y.axis.students" /></spring:escapeBody>',
 				ANSWERED_QUESTIONS_CHART_Y_AXIS_GROUPS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.answered.questions.y.axis.groups" /></spring:escapeBody>'
 			}),
-
 			activityCompletionChart = null,
 			answeredQuestionsChart = null,
 			pageInitialised = false;
@@ -31,7 +29,7 @@
 			// destroy existing absolute time limit counter before refresh
 			$('.absolute-time-limit-counter, .time-limit-widget-individual-counter').countdown('destroy');
 			let data = JSON.parse(event.data);
-			$('#time-limit-panel-placeholder').load('<lams:LAMSURL/>monitoring/timeLimit5.jsp?toolContentId=${toolContentID}&absoluteTimeLimitFinish=' + data.absoluteTimeLimitFinish
+			$('#time-limit-panel-placeholder').load('<lams:LAMSURL/>monitoring/timeLimit.jsp?toolContentId=${toolContentID}&absoluteTimeLimitFinish=' + data.absoluteTimeLimitFinish
 					+ '&relativeTimeLimit=' + data.relativeTimeLimit + '&absoluteTimeLimit=' + data.absoluteTimeLimit
 					+ '&isTbl=true&controllerContext=tool/laasse10/monitoring');
 		});
@@ -70,56 +68,49 @@
 	};
 
 	function openActivityMonitoring(){
-		openPopUp('<lams:WebAppURL />monitoring/summary.do?toolContentID=${toolContentID}&contentFolderID='
-				+ contentFolderId, "MonitorActivity", popupHeight, popupWidth, true, true);
+		window.open("<lams:WebAppURL />monitoring/summary.do?toolContentID=${toolContentID}&lessonID=" + lessonId + "&contentFolderID=" + contentFolderId, "_self");
 	}
 </script>
-<div class="container-fluid">
-	<div class="row">
-		<div class="col-10 offset-1 text-right">
-			<!-- Notifications -->
-			<div class="float-end">
-				<a href="#nogo" onclick="javascript:openActivityMonitoring(); return false;" type="button" class="btn btn-secondary buttons_column">
-					<i class="fa-solid fa-circle-info"></i>
-					<fmt:message key="label.activity.monitoring"/>
-				</a>
-				<a href="#nogo" type="button" class="btn btn-secondary buttons_column"
-				   onclick="javascript:loadTab('irat', $('#load-irat-tab-btn'))">
-					<i class="fa fa-clipboard-question"></i>
-					<fmt:message key="label.hide.students.choices"/>
-				</a>
-				<a href="#nogo" onclick="javascript:printTable(); return false;" type="button" class="btn btn-secondary buttons_column">
-					<i class="fa fa-print"></i>
-					<fmt:message key="label.print"/>
-				</a>
-				<a href="#nogo" onclick="javascript:exportExcel(); return false;" type="button" class="btn btn-secondary buttons_column">
-					<i class="fa fa-file-excel"></i>
-					<fmt:message key="label.excel.export"/>
-				</a>
-				<c:if test="${vsaPresent}">
-					<a class="btn btn-secondary buttons_column" target="_blank" id="allocate-vsas-button"
-					   href='<lams:LAMSURL />qb/vsa/displayVsaAllocate.do?toolContentID=${toolContentID}'>
-						<fmt:message key="label.vsa.allocate.button" />
-					</a>
-				</c:if>
-			</div>
-			<!-- End notifications -->
-			<h3>
-				<fmt:message key="label.ira.questions.marks"/>
-			</h3>
-		</div>
+<div class="container-main ms-4">
+	<div class="float-end">
+		<button type="button" onclick="openActivityMonitoring()" class="btn btn-secondary buttons_column">
+			<i class="fa-solid fa-circle-info me-1"></i>
+			<fmt:message key="label.activity.monitoring"/>
+		</button>
+		<button type="button" type="button" class="btn btn-secondary buttons_column"
+				onclick="loadTab('irat', $('#load-irat-tab-btn'))">
+			<i class="fa fa-clipboard-question me-1"></i>
+			<fmt:message key="label.hide.students.choices"/>
+		</button>
+		<button type="button" onclick="printTable()" class="btn btn-secondary buttons_column">
+			<i class="fa fa-print me-1"></i>
+			<fmt:message key="label.print"/>
+		</button>
+		<button type="button" onclick="exportExcel()" class="btn btn-secondary buttons_column">
+			<i class="fa fa-file-excel me-1"></i>
+			<fmt:message key="label.excel.export"/>
+		</button>
+		<c:if test="${vsaPresent}">
+			<a class="btn btn-secondary buttons_column" target="_blank" id="allocate-vsas-button"
+					href='<lams:LAMSURL />qb/vsa/displayVsaAllocate.do?toolContentID=${toolContentID}'>
+				<fmt:message key="label.vsa.allocate.button" />
+			</a>
+		</c:if>
 	</div>
+	<h3>
+		<fmt:message key="label.ira.questions.marks"/>
+	</h3>
 
 	<div class="row" id="completion-charts-container">
-		<div class="col-md-5 col-sm-12 offset-md-1 me-2 my-4">
+		<div class="col-md-6 col-sm-12 my-4">
 			<div class="monitoring-panel">
 				<div style="max-width: 400px; margin: auto">
 					<canvas id="activity-completion-chart"></canvas>
 				</div>
 			</div>
 		</div>
 
-		<div class="col-md-5 col-sm-12 ms-2 my-4">
+		<div class="col-md-6 col-sm-12 my-4">
 			<div class="monitoring-panel">
 				<h4 id="answered-questions-chart-none" class="text-center position-relative top-50">
 					<fmt:message key="label.monitoring.student.choices.none" />
@@ -130,13 +121,7 @@
 	</div>
 
 	<%-- Include student's choices part --%>
-	<div class="row">
-		<div class="col-10 offset-1" id="student-choices-table">
-		</div>
-	</div>
+	<div id="student-choices-table"></div>
 
-	<div class="row">
-		<div class="col-10 offset-1" id="time-limit-panel-placeholder">
-		</div>
-	</div>
-</div>
\ No newline at end of file
+	<div id="time-limit-panel-placeholder"></div>
+</div>
Index: lams_tool_assessment/web/pages/tblmonitoring/teams.jsp
===================================================================
diff -u -r35dd47046a83ab2f9e80f76dc22d1521412219b5 -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_assessment/web/pages/tblmonitoring/teams.jsp	(.../teams.jsp)	(revision 35dd47046a83ab2f9e80f76dc22d1521412219b5)
+++ lams_tool_assessment/web/pages/tblmonitoring/teams.jsp	(.../teams.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -6,7 +6,7 @@
 	<div class="card mb-3">
 		<div class="card-header">
 			<span class="card-title fw-bold">
-				<span class="float-start space-right">Q${i.index+1})</span> 
+				<span class="float-start me-1">Q${i.index+1})</span> 
 				<c:out value="${question.title}" escapeXml="false"/>
 			</span> 
 		</div>
@@ -21,15 +21,15 @@
 									<c:forEach var="option" items="${question.optionDtos}">
 										<c:forEach var="optionAnswer" items="${questionResult.optionAnswers}">
 											<c:if test="${optionAnswer.answerBoolean && (optionAnswer.optionUid == option.uid)}">
-												<div class="clearfix">
+												<div class="d-flex align-items-center">
 													${option.name}
 												
 													<c:choose>
 														<c:when test="${option.maxMark == 1}">
-															<i class="fa fa-check-square text-success"></i>
+															<i class="fa fa-lg fa-check-square text-success ms-1"></i>
 														</c:when>
 														<c:when test="${option.maxMark <= 0}">
-															<i class="fa fa-minus-square text-danger"></i>
+															<i class="fa fa-lg fa-minus-square text-danger ms-1"></i>
 														</c:when>
 													</c:choose>
 												</div>
@@ -44,7 +44,7 @@
 											<div style="float: left;">
 												${option.matchingPair}
 											</div>
-											<div style=" float: right; width: 50%;">
+											<div style=" float: right; width: 50%;" class="d-flex align-items-center">
 															 - 
 												<c:forEach var="optionAnswer" items="${questionResult.optionAnswers}">
 													<c:if test="${option.uid == optionAnswer.optionUid}">
@@ -54,10 +54,10 @@
 																
 																<c:choose>
 																	<c:when test="${optionAnswer.optionUid == optionAnswer.answerInt}">
-																		<i class="fa fa-check-square text-success"></i>
+																		<i class="fa fa-lg fa-check-square text-success ms-1"></i>
 																	</c:when>
 																	<c:otherwise>
-																		<i class="fa fa-minus-square text-danger"></i>
+																		<i class="fa fa-lg fa-minus-square text-danger ms-1"></i>
 																	</c:otherwise>
 																</c:choose>
 															</c:if>
@@ -75,10 +75,10 @@
 
 									<c:choose>
 										<c:when test="${not empty questionResult.qbOption && questionResult.qbOption.maxMark == 1}">
-											<i class="fa fa-check-square text-success"></i>
+											<i class="fa fa-lg fa-check-square text-success ms-1"></i>
 										</c:when>
 										<c:when test="${empty questionResult.qbOption || not empty questionResult.qbOption && questionResult.qbOption.maxMark <= 0}">
-											<i class="fa fa-minus-square text-danger"></i>
+											<i class="fa fa-lg fa-minus-square text-danger ms-1"></i>
 										</c:when>
 									</c:choose>
 								</c:when>
@@ -89,10 +89,10 @@
 										
 										<c:choose>
 											<c:when test="${questionResult.answerBoolean == question.correctAnswer}">
-												<i class="fa fa-check-square"></i>
+												<i class="fa fa-lg fa-check-square ms-1"></i>
 											</c:when>
 											<c:otherwise>
-												<i class="fa fa-minus-square"></i>
+												<i class="fa fa-lg fa-minus-square ms-1"></i>
 											</c:otherwise>
 										</c:choose>
 									</c:if>
@@ -129,7 +129,7 @@
 														${optionAnswer.answerInt}
 														
 														<c:if test="${optionAnswer.answerInt > 0 && option.correct}">
-															<i class="fa fa-check-square text-success"></i>
+															<i class="fa fa-lg fa-check-square text-success ms-1"></i>
 														</c:if>
 													</c:if>
 												</c:forEach>										
Index: lams_tool_forum/web/jsps/monitoring/monitoring.jsp
===================================================================
diff -u -rb3dd7f3d65e4eec044f69c253259b5ff743b6700 -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_forum/web/jsps/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision b3dd7f3d65e4eec044f69c253259b5ff743b6700)
+++ lams_tool_forum/web/jsps/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -5,6 +5,4 @@
 <c:set var="title"><fmt:message key="activity.title" /></c:set>
 <lams:PageMonitor title="${title}" 
 		helpToolSignature="<%= ForumConstants.TOOL_SIGNATURE %>"
-		initialTabId="${initialTabId}">
-</lams:PageMonitor>
-
+		initialTabId="${initialTabId}"/>
Index: lams_tool_nb/web/monitoring/monitoring.jsp
===================================================================
diff -u -rd2e5991474ab481bbdb37b36fc26546d21d7c52d -r3d1c6963589452c441b1670c2eecf3eb85a128a5
--- lams_tool_nb/web/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision d2e5991474ab481bbdb37b36fc26546d21d7c52d)
+++ lams_tool_nb/web/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
@@ -11,5 +11,4 @@
 	tab3Label="titleHeading.statistics"
 	tab1Jsp="m_Summary.jsp"
 	tab2Jsp="m_EditActivity.jsp"
-	tab3Jsp="m_Statistics.jsp">
-</lams:PageMonitor>
\ No newline at end of file
+	tab3Jsp="m_Statistics.jsp"/>
\ No newline at end of file