Index: lams_monitoring/web/includes/javascript/monitorLesson5.js
===================================================================
diff -u -rac1bc5dc42645586cf573699676b6f73fcf59d09 -r7fe497ec7a7438f220dfd18d071c02431cc24abc
--- lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision ac1bc5dc42645586cf573699676b6f73fcf59d09)
+++ lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision 7fe497ec7a7438f220dfd18d071c02431cc24abc)
@@ -64,11 +64,6 @@
 	
 
 $(document).ready(function(){
-	$.ajaxSetup ({
-	    // Disable caching of AJAX responses
-	    cache: false
-	});
-
 	initCommonElements();
 	initSequenceTab();
 	initGradebookTab();
@@ -155,7 +150,7 @@
 		break;
 		
 		case 'irat': {
-			tabContent.load(LAMS_URL + 'tool/laasse10/tblmonitoring/iraAssessment.do?toolContentID=' + iraToolContentId + '&_=' + (new Date()).getTime());
+			tabContent.load(LAMS_URL + 'tool/laasse10/tblmonitoring/iraAssessment.do?toolContentID=' + iraToolContentId);
 		}
 		break;
 		
@@ -164,6 +159,16 @@
 		}
 		break;
 		
+		case 'trat': {
+			tabContent.load(LAMS_URL + 'tool/lascrt11/tblmonitoring/tra.do?toolContentID=' + traToolContentId);
+		}
+		break;
+		
+		case 'tratStudentChoices': {
+			tabContent.load(LAMS_URL + 'tool/lascrt11/tblmonitoring/traStudentChoices.do?toolContentID=' + traToolContentId);
+		}
+		break;
+		
 		case 'aes': {
 			tabContent.load(LAMS_URL + 'monitoring/tblmonitor/aes.do?'
 			                + '&aeToolContentIds='+ aeToolContentIds 
@@ -213,7 +218,15 @@
 	$('#load-irat-student-choices-tab-btn').click(function(){
 		loadTab('iratStudentChoices', this);
 	});
+		
+	$('#load-trat-tab-btn').click(function(){
+		loadTab('trat', this);
+	});
 	
+	$('#load-trat-student-choices-tab-btn').click(function(){
+		loadTab('tratStudentChoices', this);
+	});
+	
 	$('#load-aes-tab-btn').click(function(){
 		loadTab('aes', this);
 	});
@@ -2802,6 +2815,8 @@
 		loadTab('irat');
 	} else if (tabName == 'iratStudentChoices'){
 		loadTab('iratStudentChoices');
+	} else if (tabName == 'trat'){
+		loadTab('trat');
 	} else if (tabName == 'aes'){
 		loadTab('aes');
 	} 
Index: lams_monitoring/web/monitor5.jsp
===================================================================
diff -u -r2a5fb646572b9790ef4b88e795e15811d94ed19d -r7fe497ec7a7438f220dfd18d071c02431cc24abc
--- lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision 2a5fb646572b9790ef4b88e795e15811d94ed19d)
+++ lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision 7fe497ec7a7438f220dfd18d071c02431cc24abc)
@@ -42,6 +42,7 @@
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/portrait5.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/free.jquery.jqgrid.min.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/tempus-dominus.min.js"></script>
+	<lams:JSImport src="includes/javascript/common.js" />
 	<lams:JSImport src="includes/javascript/dialog5.js" />
 	<lams:JSImport src="includes/javascript/monitorLesson5.js" relative="true" />
 	
@@ -59,6 +60,7 @@
 			TOTAL_LESSON_LEARNERS_NUMBER = ${lesson.numberPossibleLearners},
 			
 			iraToolContentId = '${iraToolContentId}',
+			traToolContentId = '${traToolContentId}',
 			aeToolContentIds = "${aeToolContentIds}",
 			aeToolTypes = "${aeToolTypes}",
 			aeActivityTitles = "${aeActivityTitles}",
@@ -334,7 +336,7 @@
 										<i class="fa fa-user fa-lg"></i>
 									</a>
 									<a id="load-irat-student-choices-tab-btn" class="btn btn-primary" href="#" title="iRAT student choices">
-										<i class="fa fa-user-check fa-lg"></i>
+										<i class="fa fa-list-check fa-lg"></i>
 									</a>
 								</div>
 								
@@ -346,10 +348,16 @@
 						
 						<c:if test="${not empty isScratchieAvailable}">
 							<div class="navigate-btn-container">
-								<a id="load-tra-tab-btn" class="btn btn-primary" href="#" title="<fmt:message key='label.tra' />">
-									<i class="fa fa-users fa-lg"></i>
-								</a>
-								<label for="load-tra-tab-btn">
+								<div class="btn-group-vertical" id="load-irat-btn-group">
+									<a id="load-trat-tab-btn" class="btn btn-primary" href="#" title="<fmt:message key='label.tra' />">
+										<i class="fa fa-users fa-lg"></i>
+									</a>
+									<a id="load-trat-student-choices-tab-btn" class="btn btn-primary" href="#" title="tRAT student choices">
+										<i class="fa fa-list-check fa-lg"></i>
+									</a>
+								</div>
+								
+								<label for="load-trat-btn-group">
 									<fmt:message key='label.tra' />
 								</label>
 							</div>
Index: lams_tool_assessment/web/pages/learning/results/allquestions5.jsp
===================================================================
diff -u -rac1bc5dc42645586cf573699676b6f73fcf59d09 -r7fe497ec7a7438f220dfd18d071c02431cc24abc
--- lams_tool_assessment/web/pages/learning/results/allquestions5.jsp	(.../allquestions5.jsp)	(revision ac1bc5dc42645586cf573699676b6f73fcf59d09)
+++ lams_tool_assessment/web/pages/learning/results/allquestions5.jsp	(.../allquestions5.jsp)	(revision 7fe497ec7a7438f220dfd18d071c02431cc24abc)
@@ -193,13 +193,13 @@
 					</c:if>
 					
 					<c:if test="${question.answerRequired}">
-						<span class="asterisk pull-right">
+						<span class="asterisk float-end">
 							<i class="fa fa-xs fa-asterisk text-danger" title="<fmt:message key="label.answer.required"/>" 
 									alt="<fmt:message key="label.answer.required"/>"></i>
 						</span>
 					</c:if>
 					
-					<h3 class="panel-title" style="margin-bottom: 10px;font-size: initial;">
+					<h3 class="card-title mb-3" style="font-size: initial;">
 						<c:if test="${assessment.numbered}">
 								${status.index + sessionMap.questionNumberingOffset}.
 						</c:if>
@@ -209,12 +209,6 @@
 						</c:if>
 					</h3>
 					
-			
-									
-					<c:if test="${empty question.question}">
-						<!--  must have something here otherwise the question-numbers span does not float properly -->
-						&nbsp;
-					</c:if>
 					${question.question}
 				</div>
 							
Index: lams_tool_assessment/web/pages/tblmonitoring/assessment5.jsp
===================================================================
diff -u -rac1bc5dc42645586cf573699676b6f73fcf59d09 -r7fe497ec7a7438f220dfd18d071c02431cc24abc
--- lams_tool_assessment/web/pages/tblmonitoring/assessment5.jsp	(.../assessment5.jsp)	(revision ac1bc5dc42645586cf573699676b6f73fcf59d09)
+++ lams_tool_assessment/web/pages/tblmonitoring/assessment5.jsp	(.../assessment5.jsp)	(revision 7fe497ec7a7438f220dfd18d071c02431cc24abc)
@@ -49,7 +49,7 @@
 		<div class="col-4 text-end">
 			<button class="btn btn-secondary" type="button"
 				 onclick="javascript:showStudentChoices()">
-				<i class="fa fa-file"></i>
+				<i class="fa fa-list-check"></i>
 				<fmt:message key="label.show.students.choices"/>
 			</button>   
 		</div>                 
Index: lams_tool_scratchie/src/java/org/lamsfoundation/lams/tool/scratchie/web/controller/TblMonitorController.java
===================================================================
diff -u -rfd09b5f6803a74b4660114e2bacc234bf9ba7c38 -r7fe497ec7a7438f220dfd18d071c02431cc24abc
--- lams_tool_scratchie/src/java/org/lamsfoundation/lams/tool/scratchie/web/controller/TblMonitorController.java	(.../TblMonitorController.java)	(revision fd09b5f6803a74b4660114e2bacc234bf9ba7c38)
+++ lams_tool_scratchie/src/java/org/lamsfoundation/lams/tool/scratchie/web/controller/TblMonitorController.java	(.../TblMonitorController.java)	(revision 7fe497ec7a7438f220dfd18d071c02431cc24abc)
@@ -107,7 +107,7 @@
 	    request.setAttribute("groupSummaries", groupSummaries);
 	}
 
-	return "pages/tblmonitoring/tra";
+	return "pages/tblmonitoring/tra5";
     }
 
     /**
@@ -125,7 +125,7 @@
 	model.addAttribute("scratchie", scratchie);
 	model.addAttribute("isTbl", true);
 
-	return "pages/monitoring/studentChoices";
+	return "pages/monitoring/studentChoices5";
     }
 
     /**
Index: lams_tool_scratchie/web/pages/monitoring/studentChoices5.jsp
===================================================================
diff -u
--- lams_tool_scratchie/web/pages/monitoring/studentChoices5.jsp	(revision 0)
+++ lams_tool_scratchie/web/pages/monitoring/studentChoices5.jsp	(revision 7fe497ec7a7438f220dfd18d071c02431cc24abc)
@@ -0,0 +1,386 @@
+<%@ include file="/common/taglibs.jsp"%>
+<% pageContext.setAttribute("newLineChar", "\r\n"); %>
+
+<c:set var="timeLimitPanelUrl"><lams:LAMSURL/>monitoring/timeLimit5.jsp</c:set>
+<c:url var="timeLimitPanelUrl" value="${timeLimitPanelUrl}">
+	<c:param name="toolContentId" value="${scratchie.contentId}"/>
+	<c:param name="absoluteTimeLimit" value="${scratchie.absoluteTimeLimitSeconds}"/>
+	<c:param name="relativeTimeLimit" value="${scratchie.relativeTimeLimit}"/>
+	<c:param name="isTbl" value="true" />
+	<c:param name="controllerContext" value="tool/lascrt11/monitoring" />
+</c:url>
+
+<style>
+	/* show horizontal scroller for iPads */
+	body {
+	    -webkit-overflow-scrolling: touch;
+	}
+
+	/*----  fixed first column ----*/
+	#questions-data {
+	  position: relative;
+	}
+	
+	#questions-data thead th {
+	  position: -webkit-sticky; /* for Safari */
+	  position: sticky;
+	  top: 0;
+	  background: #FFF;
+	}
+	
+	#questions-data thead th:first-child {
+	  left: 0;
+	  z-index: 1;
+	}
+	
+	#questions-data tbody th {
+	  position: -webkit-sticky; /* for Safari */
+	  position: sticky;
+	  left: 0;
+	  background: #FFF;
+	}
+	
+	span.user-response {
+	  padding: 1px 3px;
+	  color: white;
+	  border-radius: 3px; }
+	
+	span.user-response .fa, .question-detail-modal .fa {
+	  cursor: default;
+	}
+	
+	span.successful-response {
+	  background-color: #5cb85c; }
+	
+	span.wrong-response {
+	  background-color: #d9534f; }
+</style>
+
+
+<div class="container-fluid">
+
+<c:if test="${not showStudentChoicesTableOnly}">
+	<script>
+		// tell TBL monitor that this element is scrollable horizontally
+		tlbMonitorHorizontalScrollElement = '#questions-data-container';
+		
+		function exportExcel(){
+			//dynamically create a form and submit it
+			var exportExcelUrl = "<lams:LAMSURL/>tool/lascrt11/tblmonitoring/exportExcel.do?toolContentID=${toolContentID}&reqID=" + (new Date()).getTime();
+			var form = $('<form method="post" action="' + exportExcelUrl + '"></form>');
+		    var hiddenInput = $('<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"></input>');
+		    form.append(hiddenInput);
+		    $(document.body).append(form);
+		    form.submit();
+		};
+
+		$(document).ready(function(){
+			$('#time-limit-panel-placeholder').load('${timeLimitPanelUrl}');
+		});
+	</script>
+
+	 <div class="row">
+		<div class="col-8 offset-2 text-center">
+			<h3>
+				<fmt:message key="label.tra.questions.marks"/>
+			</h3>
+		</div>
+	</div>
+	
+	<!-- Notifications -->  
+	<div class="row mb-4">
+		<div class="col-10 offset-1 text-end">
+			<a href="#nogo" type="button" class="btn btn-secondary buttons_column"
+					onclick="javascript:loadTab('trat', $('#load-trat-tab-btn'))">
+				<i class="fa fa-undo"></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"></i>
+				<fmt:message key="label.export.excel"/>
+			</a>
+			<c:if test="${vsaPresent}">
+				<a class="btn btn-secondary buttons_column" target="_blank"
+				   href='<lams:LAMSURL />qb/vsa/displayVsaAllocate.do?toolContentID=${scratchie.contentId}'>
+					<fmt:message key="label.vsa.allocate.button" />
+				</a>
+			</c:if>
+		</div>
+	</div>
+	<!-- End notifications -->
+</c:if>
+
+	<div class="row">
+		<div class="col-10 offset-1">
+			<div class="card">
+				<div id="questions-data-container" class="table-responsive card-body">
+					<table id="questions-data" class="table table-bordered table-hover table-condensed">
+						<thead>
+							<tr role="row" class="border-top-0">
+								<th></th>
+								<c:forEach var="item" items="${items}" varStatus="i">
+									<th class="text-center">
+										<a data-toggle="modal" href="#question${i.index}Modal">
+											<fmt:message key="label.authoring.basic.question.text"/> ${i.index + 1}
+										</a>
+									</th>
+								</c:forEach>
+								
+								<c:if test="${not empty sessionDtos}">
+									<th class="text-center">
+										<fmt:message key="label.total"/>&nbsp;
+										<i class="fa fa-question-circle text-primary" data-toggle="tooltip" data-placement="top" data-container="body" 
+										   title="<fmt:message key="label.total.1st.attempt.by.team"/>"></i>
+									</th>
+									<th class="text-center">
+										<fmt:message key="label.total"/> %
+									</th>
+								</c:if>
+							</tr>
+						</thead>
+						<tbody>
+						
+							<tr>
+								<th>
+									<b>
+										<fmt:message key="label.correct.answer"/>
+									</b>
+								</th>
+								<c:forEach var="item" items="${items}">
+									<td class="text-center">
+										<c:if test="${item.qbQuestion.type == 1 or item.qbQuestion.type == 8}">
+											${item.correctAnswerLetter}
+										</c:if>
+									</td>
+								</c:forEach>
+								
+								<c:if test="${not empty sessionDtos}">
+									<td class="text-center"></td>
+									<td class="text-center"></td>
+								</c:if>
+							</tr>
+							
+							<c:if test="${not empty sessionDtos and (not showStudentChoicesTableOnly or sessionMap.isGroupedActivity)}">
+								<tr>
+									<th style="font-weight: bold;">
+										<fmt:message key="label.teams.notuppercase"/>
+									</th> 
+								</tr>
+							</c:if>
+							
+							<c:forEach var="sessionDto" items="${sessionDtos}" varStatus="i">
+								<tr>
+									<th class="text-center">
+										<c:if test="${not showStudentChoicesTableOnly or sessionMap.isGroupedActivity}">
+											<c:choose>
+												<c:when test="${empty sessionDto.leaderUid}">
+													${sessionDto.sessionName}
+												</c:when>
+												<c:otherwise>
+													<c:url var="userSummaryUrl" value='/learning/start.do'>
+														<c:param name="userID" value="${sessionDto.leaderUid}" />
+														<c:param name="toolSessionID" value="${sessionDto.sessionId}" />
+														<c:param name="mode" value="teacher" />
+													</c:url>
+													<a href="#" onClick="javascript:launchPopup('${userSummaryUrl}', 'MonitoringReview')">${sessionDto.sessionName}</a>
+												</c:otherwise>
+											</c:choose>
+											
+										</c:if>
+									</th>
+									
+									<c:choose>
+										<c:when test="${empty sessionDto.itemDtos}">
+											<c:forEach begin="1" end="${fn:length(items) + 2}">
+												<td></td>
+											</c:forEach>
+										</c:when>
+										
+										<c:otherwise>
+											<c:forEach var="itemDto" items="${sessionDto.itemDtos}">
+												<td class="text-center">
+													<c:forEach var="optionDto" items="${itemDto.optionDtos}">
+														<c:if test="${optionDto.answer != ''}">
+															<span class="user-response <c:if test="${optionDto.correct}">successful-response</c:if> <c:if test="${!optionDto.correct}">wrong-response</c:if>">
+																<c:choose>
+																	<c:when test="${itemDto.type == 1 or itemDto.type == 8}">
+																		<c:out value="${optionDto.answer}" escapeXml="false"/>
+																	</c:when>
+																	<c:when test="${optionDto.correct}"><i class="fa fa-check"></i></c:when>
+																	<c:otherwise><i class="fa fa-close"></i></c:otherwise>
+																</c:choose>
+																
+															</span>
+														</c:if>
+													</c:forEach>
+												</td>
+											</c:forEach>
+											
+											<c:set var="highlightClass">
+												<c:choose>
+													<c:when test="${sessionDto.totalPercentage > 95}">bg-success</c:when>
+													<c:when test="${sessionDto.totalPercentage < 40}">bg-danger text-white</c:when>
+													<c:when test="${sessionDto.totalPercentage < 75}">bg-warning</c:when>
+												</c:choose>
+											</c:set>
+											
+											<td class="text-center ${highlightClass}">
+												${sessionDto.mark}
+											</td>
+											
+											<td class="text-center ${highlightClass}">
+												<fmt:formatNumber type="number" minFractionDigits="0" maxFractionDigits="2" value="${sessionDto.totalPercentage}" /> %
+											</td>
+										</c:otherwise>
+									</c:choose>
+								</tr>
+							</c:forEach>      
+							
+							<c:if test="${not empty sessionDtos}">
+								<c:set var="totalSum" value="0" />
+								<c:set var="totalPercentSum" value="0" />
+								<tr>
+									<th><fmt:message key="label.total"/>&nbsp;
+									<i class="fa fa-question-circle text-primary" data-toggle="tooltip" data-placement="top" data-container="body" 
+									   title="<fmt:message key="label.total.1st.attempt.by.question"/>"></i></th>
+									   
+									<c:forEach var="item" items="${items}">
+										<c:set var="highlightClass">
+											<c:choose>
+												<c:when test="${item.correctOnFirstAttemptPercent > 95}">bg-success</c:when>
+												<c:when test="${item.correctOnFirstAttemptPercent < 40}">bg-danger text-white</c:when>
+												<c:when test="${item.correctOnFirstAttemptPercent < 75}">bg-warning</c:when>
+											</c:choose>
+										</c:set>
+										
+										<td class="text-center ${highlightClass}">
+											${item.correctOnFirstAttemptCount}
+										</td>
+										<c:set var="totalSum" value="${totalSum + item.correctOnFirstAttemptCount}" />
+										<c:set var="totalPercentSum" value="${totalPercentSum + item.correctOnFirstAttemptPercent}" />
+									</c:forEach>
+									
+									<c:set var="totalPercentAverage" value="${totalPercentSum / fn:length(items)}" />
+									<c:set var="totalAverageHighlightClass">
+										<c:choose>
+											<c:when test="${totalPercentAverage > 95}">bg-success</c:when>
+											<c:when test="${totalPercentAverage < 40}">bg-danger text-white</c:when>
+											<c:when test="${totalPercentAverage < 75}">bg-warning</c:when>
+										</c:choose>
+									</c:set>
+									<td class="text-center ${totalAverageHighlightClass}">
+										<fmt:formatNumber type="number" minFractionDigits="0" maxFractionDigits="2" value="${totalSum / fn:length(items)}" />&nbsp;
+										<i class="fa fa-question-circle text-primary" data-toggle="tooltip" data-placement="top" data-container="body" 
+										    title="<fmt:message key="label.total.1st.attempt.average"/>"></i>
+									</td>
+									<td class="text-center">-</td>
+								</tr>
+								<tr>
+									<th><fmt:message key="label.total"/> %</th>
+									<c:forEach var="item" items="${items}">
+										<c:set var="highlightClass">
+											<c:choose>
+												<c:when test="${item.correctOnFirstAttemptPercent > 95}">bg-success</c:when>
+												<c:when test="${item.correctOnFirstAttemptPercent < 40}">bg-danger text-white</c:when>
+												<c:when test="${item.correctOnFirstAttemptPercent < 75}">bg-warning</c:when>
+											</c:choose>
+										</c:set>
+										
+										<td class="text-center ${highlightClass}">
+											<fmt:formatNumber type="number" minFractionDigits="0" maxFractionDigits="2" value="${item.correctOnFirstAttemptPercent}" /> %
+										</td>
+									</c:forEach>
+									<td class="text-center">-</td>
+									<td class="text-center ${totalAverageHighlightClass}">					
+										<fmt:formatNumber type="number" minFractionDigits="0" maxFractionDigits="2" value="${totalPercentAverage}" />&nbsp;%&nbsp;
+										<i class="fa fa-question-circle text-primary" data-toggle="tooltip" data-placement="top" data-container="body" 
+										    title="<fmt:message key="label.total.1st.attempt.average"/>"></i>
+									</td>
+								</tr>                         
+							</c:if>                     
+						</tbody>
+					</table>
+				</div>
+			</div>
+		</div>          
+	</div>
+	
+	<!-- Question detail modal -->
+	<c:forEach var="item" items="${items}" varStatus="i">
+		<div class="modal fade question-detail-modal" id="question${i.index}Modal">
+		<div class="modal-dialog">
+		<div class="modal-content">
+		<div class="modal-body">
+		
+			<div class="panel panel-default">
+				<div class="panel-heading">
+					<h4 class="panel-title"><span class="float-left space-right">Q${i.index+1})</span> ${item.qbQuestion.name}</h4>
+				</div>
+				<div class="panel-body">
+				
+					<div>
+						${item.qbQuestion.description}
+					</div>
+				
+					<div class="table-responsive voffset10">
+						<table class="table table-striped table-hover">
+							<tbody>
+							
+								<c:forEach var="qbOption" items="${item.qbQuestion.qbOptions}" varStatus="j">
+									<c:set var="cssClass"><c:if test='${qbOption.correct}'>bg-success</c:if></c:set>
+										<tr>
+											<c:choose>
+												<c:when test="${item.qbQuestion.type == 1 or item.qbQuestion.type == 8}">
+													<td width="5px" class="${cssClass}">
+														${ALPHABET[j.index]}.
+													</td>
+													<td class="${cssClass}">
+														<c:out value="${qbOption.name}" escapeXml="false"/>
+													</td>
+												</c:when>
+												<c:otherwise>
+													<td width="5px" class="${cssClass}">
+														<c:choose>
+															<c:when test="${qbOption.correct}">
+																<i class="fa fa-check"></i>
+															</c:when>
+															<c:otherwise>
+																<i class="fa fa-close"></i>
+															</c:otherwise>
+														</c:choose>
+													</td>
+													<td class="${cssClass}">
+														${fn:replace(qbOption.name, newLineChar, ', ')}
+													</td>
+												</c:otherwise>
+											</c:choose>
+										</tr>
+								</c:forEach>
+							</tbody>
+						</table>
+					</div>
+				</div> 
+			</div>
+		            
+			<div class="modal-footer">	
+				<a href="#" data-dismiss="modal" class="btn btn-default">
+					<fmt:message key="button.close"/>
+				</a>
+			</div>
+		
+		</div>
+		</div>
+		</div>
+		</div>
+	</c:forEach>
+	<!-- End question detail modal -->
+	
+	<div class="row">
+		<div class="col-10 offset-1" id="time-limit-panel-placeholder">
+		</div>
+	</div>
+</div>
\ No newline at end of file
Index: lams_tool_scratchie/web/pages/tblmonitoring/tra5.jsp
===================================================================
diff -u
--- lams_tool_scratchie/web/pages/tblmonitoring/tra5.jsp	(revision 0)
+++ lams_tool_scratchie/web/pages/tblmonitoring/tra5.jsp	(revision 7fe497ec7a7438f220dfd18d071c02431cc24abc)
@@ -0,0 +1,155 @@
+<%@ include file="/common/taglibs.jsp"%>
+<% pageContext.setAttribute("newLineChar", "\r\n"); %>
+<style>
+	#barChart {
+		width: 515px !important; 
+		height: 240px !important;
+	}
+</style>
+
+<!-- ChartJS. Colour used is brand-primary for purple skin. -->
+<script>
+	$(document).ready(function(){
+		var ctx = document.getElementById("barChart").getContext("2d"),
+			chartColor = 'rgba(1, 117, 226, 0.85)',
+			myNewChart = new Chart(ctx, {
+				type : 'bar',
+				data : {
+					datasets : [ {
+						data : [<c:forEach var="groupSummary" items="${groupSummaries}">${groupSummary.totalPercentage},</c:forEach>],
+						backgroundColor : chartColor,
+						borderColor     :  chartColor,
+						hoverBackgroundColor : chartColor,
+						hoverBorderColor: chartColor
+					} ],
+					labels :  [<c:forEach var="groupSummary" items="${groupSummaries}">"${groupSummary.sessionName}",</c:forEach>],
+				},
+				options : {
+					legend : {
+						display : false
+					},
+					scales : {
+						xAxes : [
+							{
+								 ticks : {
+									fontSize : 30
+								}
+							}
+						],
+						yAxes : [
+							{
+							    ticks : {
+									beginAtZero   : true,
+									maxTicksLimit : 6,
+									suggestedMax  : 100,
+									fontSize : 25
+								}
+							}
+						]
+					}
+				}
+			});
+
+		//insert total learners number taken from the parent tblmonitor.jsp
+		$(".total-learners-number").html(TOTAL_LESSON_LEARNERS_NUMBER);
+	});
+</script>
+
+<div class="container-fluid">
+	 <div class="row">
+		<div class="col-8 offset-2 text-center">
+			<h3>
+				<fmt:message key="label.tra.questions.marks"/>
+			</h3>
+		</div>
+	</div>
+	
+	<div class="row mb-3">
+		<div class="col-4 offset-2 pt-1">
+			<h4>
+				<i class="fa fa-users text-secondary"></i> 
+				<fmt:message key="label.attendance"/>: <span>${attemptedLearnersNumber}</span>/<span class="total-learners-number"></span> 
+			</h4> 
+		</div>
+		<div class="col-4 text-end">
+			<button class="btn btn-secondary" type="button"
+				 onclick="javascript:loadTab('tratStudentChoices', $('#load-trat-student-choices-tab-btn'))">
+				<i class="fa fa-list-check"></i>
+				<fmt:message key="label.show.students.choices"/>
+			</button>   
+		</div>                 
+	</div>
+	<!-- End notifications -->              
+	
+	<!-- Tables -->
+	<c:forEach var="item" items="${items}" varStatus="i">
+		<div class="row mb-3">
+			<div class="col-8 offset-2">			
+				<div class="card">
+					<div class="card-header">			
+						<h3 class="card-title mb-3" style="font-size: initial">
+							${i.index+1}. <c:out value="${item.qbQuestion.name}" escapeXml="false"/>
+						</h3> 
+						<c:out value="${item.qbQuestion.description}" escapeXml="false"/>
+					</div>
+			
+					<div class="card-body">
+						<div class="table-responsive">
+							<table class="table">
+								<tbody>
+									<c:forEach var="qbOption" items="${item.qbQuestion.qbOptions}" varStatus="j">
+										<c:set var="cssClass"><c:if test='${qbOption.correct}'>bg-success</c:if></c:set>
+										<tr>
+											<c:choose>
+												<c:when test="${item.qbQuestion.type == 1 or item.qbQuestion.type == 8}">
+													<td width="5px" class="${cssClass}">
+														<c:if test="${item.qbQuestion.prefixAnswersWithLetters}">
+															${ALPHABET[j.index]}.
+														</c:if>
+													</td>
+													<td class="${cssClass}">
+														<c:out value="${qbOption.name}" escapeXml="false"/>
+													</td>
+												</c:when>
+												<c:otherwise>
+													<td width="5px" class="${cssClass}">
+														<c:choose>
+															<c:when test="${qbOption.correct}">
+																<i class="fa fa-check"></i>
+															</c:when>
+															<c:otherwise>
+																<i class="fa fa-close"></i>
+															</c:otherwise>
+														</c:choose>
+													</td>
+													<td class="${cssClass}">
+														${fn:replace(qbOption.name, newLineChar, ', ')}
+													</td>
+												</c:otherwise>
+											</c:choose>
+										</tr>					
+									</c:forEach>
+								</tbody>
+							</table>
+						</div>
+					</div>
+				</div>  
+			</div>
+		</div>
+	</c:forEach>
+	<!-- End tables -->
+	
+	<div class="row">
+		<div class="col-8 offset-2 text-center">
+			<div class="card">
+				<div class="card-header">
+					<fmt:message key="label.tra.results.by.team"/>&nbsp;<small>(<fmt:message key="label.average"/>)</small>
+				</div>
+				
+				<div class="card-body">
+					<canvas id="barChart" height="240" width="515"></canvas>
+				</div>
+			</div>  
+		</div>
+	</div>
+</div>
\ No newline at end of file