Index: lams_central/web/WEB-INF/tags/StyledRating5.tag
===================================================================
diff -u
--- lams_central/web/WEB-INF/tags/StyledRating5.tag	(revision 0)
+++ lams_central/web/WEB-INF/tags/StyledRating5.tag	(revision d43d1e67bb589b4f565a222a3f33ea17debc68a7)
@@ -0,0 +1,553 @@
+<%
+	/**
+	 * StyledRating.tag
+	 *	Author: Andrey Balan
+	 *	Description: Shows the results of a styled rating. Does not allow for update.
+	 */
+%>
+<%@ tag body-content="scriptless" %>
+<%@ taglib uri="tags-core" prefix="c" %>
+<%@ taglib uri="tags-fmt" prefix="fmt" %>
+<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+<c:set var="lams"><lams:LAMSURL/></c:set>
+
+<%@ attribute name="criteriaRatings" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.StyledCriteriaRatingDTO" %>
+<%@ attribute name="showJustification" required="true" %>
+<%@ attribute name="alwaysShowAverage" required="true" %>
+<%@ attribute name="rubricsPivotView" required="false" %>
+<%@ attribute name="rubricsInBetweenColumns" required="false" %>
+
+<c:if test="${empty rubricsPivotView}">
+	<c:set var="rubricsPivotView" value="false" />
+</c:if>
+<c:if test="${empty rubricsInBetweenColumns}">
+	<c:set var="rubricsInBetweenColumns" value="false" />
+</c:if>
+
+<!-- On the results page, set to true for current users summary at the bottom, set to false "other users results".
+When true, hides the names and groups the comments.  -->
+<%@ attribute name="currentUserDisplay" required="true" %>
+
+<c:choose>
+	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 0}">
+
+		<table class="tablesorter">
+			<thead>
+			<tr>
+				<c:if test="${not currentUserDisplay}">
+					<th class="username" title="<fmt:message key='label.sort.by.user.name'/>" >
+						<fmt:message key="label.user.name" />
+					</th>
+				</c:if>
+				<th class="comment">
+					<fmt:message key="label.comment" />
+				</th>
+			</tr>
+			</thead>
+			<tbody>
+
+			<c:forEach var="rating" items="${criteriaRatings.ratingDtos}">
+				<c:if test="${ not empty rating.comment }">
+					<tr>
+						<c:if test="${not currentUserDisplay}">
+							<td>
+								<lams:Portrait userId="${rating.itemId}"/><span class="portrait-sm-lineheight">&nbsp;<c:out value="${rating.itemDescription}" escapeXml="false"/></span>
+							</td>
+						</c:if>
+						<td>
+							<c:out value="${rating.comment}" escapeXml="false"/>
+						</td>
+					</tr>
+				</c:if>
+			</c:forEach>
+			</tbody>
+		</table>
+	</c:when>
+
+	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 1}">
+
+		<c:choose>
+			<c:when test="${not currentUserDisplay}">
+				<table class="tablesorter jRating">
+					<thead>
+					<tr>
+						<th class="username" title="<fmt:message key='label.sort.by.user.name'/>" width="${criteriaRatings.ratingCriteria.commentsEnabled ? '25%' : '40%'}" >
+							<fmt:message key="label.user.name" />
+						</th>
+						<th class="rating text-center ">
+							<fmt:message key="label.rating" />
+						</th>
+						<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled}">
+							<th class="comment">
+								<fmt:message key="label.comment" />
+							</th>
+						</c:if>
+					</tr>
+					</thead>
+					<tbody>
+					<c:forEach var="rating" items="${criteriaRatings.ratingDtos}">
+						<c:if test="${not empty rating.averageRating}">
+							<tr>
+								<td>
+									<lams:Portrait userId="${rating.itemId}"/>
+									<span class="portrait-sm-lineheight">&nbsp;<c:out value="${rating.itemDescription}" escapeXml="false"/></span>
+								</td>
+								
+								<td class="rating">
+									<div class="rating-stars-holder text-center center-block">
+										<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+										<div class="rating-stars-disabled rating-stars-new" data-average="${rating.averageRating}" data-id="${objectId}">
+										</div>
+										<c:set var="userRating">${rating.userRating}</c:set>
+										<div class="rating-stars-caption" id="rating-stars-caption-${objectId}">
+											<c:choose>
+												<c:when test="${empty userRating}">
+													<fmt:message key="label.not.rated"></fmt:message>
+												</c:when>
+												<c:otherwise>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${userRating}</span></fmt:param></fmt:message>
+												</c:otherwise>
+											</c:choose>
+											<br/>
+											<fmt:message key="label.avg.rating">
+												<fmt:param><span id="average-rating-${objectId}">${rating.averageRating}</span></fmt:param>
+												<fmt:param><span id="number-of-votes-${objectId}">${rating.numberOfVotes}</span></fmt:param>
+											</fmt:message>
+										</div>
+									</div>
+								</td>
+								
+								<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled}">
+									<td>
+										<c:out value="${rating.comment}" escapeXml="false"/>
+									</td>
+								</c:if>
+							</tr>
+						</c:if>
+					</c:forEach>
+					</tbody>
+				</table>
+			</c:when>
+
+			<c:otherwise>
+				<c:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="rating-stars-holder text-center center-block">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<div class="rating-stars-disabled rating-stars-new" data-average="${rating.averageRating}" data-id="${objectId}"></div>
+								<div class="rating-stars-caption" id="rating-stars-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
+			</c:otherwise>
+		</c:choose>
+
+	</c:when>
+
+	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 2}">
+		<div class="card-body">
+			<div class="fst-italic mb-2">
+				<fmt:message key="label.learning.average.rankings"/>&nbsp;
+				<c:if test="${not currentUserDisplay}">
+					<fmt:message key="label.learning.your.rankings.shown.in.brackets"/>
+				</c:if>
+			</div>
+			
+			<ul class="list-group">
+				<c:forEach var="rating" items="${criteriaRatings.ratingDtos}">
+					<c:if test="${alwaysShowAverage || not empty rating.averageRating }">
+						<li class="list-group-item"><strong>
+							<c:choose>
+								<c:when test="${empty rating.averageRating}">-</c:when>
+								<c:otherwise><fmt:formatNumber value="${rating.averageRating}" type="number" maxFractionDigits="0" /></c:otherwise>
+							</c:choose>
+							:</strong>
+							&nbsp;<c:if test="${not currentUserDisplay}"><lams:Portrait userId="${rating.itemId}"/></c:if>
+							<span class="portrait-sm-lineheight">&nbsp;<c:out value="${rating.itemDescription}" escapeXml="false"/>&nbsp;</span>
+							<c:if test="${not currentUserDisplay && not empty rating.userRating}">
+								(${rating.userRating})
+							</c:if>
+						</li>
+					</c:if>
+				</c:forEach>
+			</ul>
+		</div>
+	</c:when>
+
+	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 3}">
+		<div class="card-body">
+			<div class="fst-italic mb-2">
+				<fmt:message key="label.learning.average.marks"/>
+				&nbsp;
+				<c:if test="${not currentUserDisplay}">
+					<fmt:message key="label.learning.your.marks.shown.in.brackets"/>
+				</c:if>
+			</div>
+			
+			<ul class="list-group">
+				<c:forEach var="rating" items="${criteriaRatings.ratingDtos}">
+					<c:if test="${alwaysShowAverage || not empty rating.averageRating }">
+						<li class="list-group-item">
+							<strong>
+							<c:choose>
+								<c:when test="${empty rating.averageRating}">-</c:when>
+								<c:otherwise>${rating.averageRating}</c:otherwise>
+							</c:choose>
+							:
+							</strong>
+							
+							&nbsp;
+							<c:if test="${not currentUserDisplay}">
+								<lams:Portrait userId="${rating.itemId}"/>
+							</c:if>
+							<span class="portrait-sm-lineheight">
+								&nbsp;<c:out value="${rating.itemDescription}" escapeXml="false"/>&nbsp;
+							</span>
+							<c:if test="${not currentUserDisplay && not empty rating.userRating}">
+								(${rating.userRating})
+							</c:if>
+						</li>
+					</c:if>
+				</c:forEach>
+			</ul>
+			
+			<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
+				<div class="fst-italic mt-2">
+					<fmt:message key="label.learning.your.justification"/>
+				</div>
+				<lams:out value="${criteriaRatings.justificationComment}" />
+			</c:if>
+		</div>
+	</c:when>
+
+	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
+		<style>
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
+				text-decoration: none;
+			}
+
+			.rubrics-user-card .collapsable-icon-left button:after {
+				margin-top: 6px;
+			}
+
+			.rubrics-table.standard-view .row:first-child {
+				background-color: initial !important;
+			}
+
+			.rubrics-table.standard-view .rubrics-table-header {
+				font-style: normal;
+				font-weight: bold;
+			}
+
+			.rubrics-table.standard-view .col:first-child {
+				font-weight: bold;
+			}
+
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
+				text-align: center;
+			}
+
+			.rubrics-table.pivot-view .rubrics-table-header {
+				font-style: normal;
+				text-align: center;
+			}
+			.rubrics-table.pivot-view .row .col:first-child {
+				font-weight: bold;
+			}
+
+			.column-header-span {
+				font-style: italic;
+			}
+			
+			.rubrics-user-card .collapsable-icon-left button, .collapsable-icon-left button:after,
+			.rubrics-row-card .collapsable-icon-left button, .collapsable-icon-left button:after {
+				color: inherit !important;
+			}
+			
+			.rubrics-table .col.text-bg-success {
+				font-weight: bold;
+				line-height: 40px;
+				margin: -0.5em 0;
+			}
+
+			.rubrics-table .rubrics-rating-cell {
+				border-top: none;
+
+			}
+			.rubrics-rating-count {
+				text-align: right;
+			}
+
+			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+				margin-top: 10px;
+			}
+
+			.rubrics-table .rubrics-description-cell {
+				border-bottom: none;
+			}
+		</style>
+
+		<c:choose>
+			<c:when test="${currentUserDisplay}">
+				<div class="ltable table-sm rubrics-table standard-view">
+					<div class="row rubrics-table-header">
+						<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+						<div class="col"></div>
+						<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}" varStatus="columnStatus">
+							<div class="col">
+								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
+							</div>
+							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
+								<div class="col">
+									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
+								</div>
+							</c:if>
+						</c:forEach>
+						<div class="col text-center"><fmt:message key="label.average" /></div>
+					</div>
+					
+					<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+						<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+
+						<div class="row align-items-center g-0">
+							<div class="col">
+								<c:out value="${criteria.title}" escapeXml="false" />
+							</div>
+
+							<%-- These variables are for counting average rating for the given row --%>
+							<c:set var="rowRateCount" value="0" />
+							<c:set var="rowRateValue" value="0" />
+							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+
+								<%-- Check if any other learner rated this learner for this column --%>
+								<c:set var="rateCount" value="0" />
+								<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+									<c:set var="rateCount" value="${rateCount + (ratingDto.userRating == columnOrderId.count ? 1 : 0)}" />
+								</c:forEach>
+								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
+								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
+
+								<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>">
+									<c:out value="${column.name}" escapeXml="false" />
+									
+									<c:if test="${rateCount > 0}">
+										<%-- learners see just how many rates they got from other learners --%>
+										<div class="rubrics-rating-count">
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
+										</div>
+
+										<%-- teachers see also who gave the rating --%>
+										<c:if test="${showJustification}">
+											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+												<c:if test="${ratingDto.userRating == columnOrderId.count}">
+													<div class="rubrics-rating-learner">
+														<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+														&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="false"/>
+													</div>
+												</c:if>
+											</c:forEach>
+										</c:if>
+									</c:if>
+								</div>
+
+								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
+									<%-- Check if any other learner rated this learner for this 0.5 column --%>
+									<c:set var="rateCount" value="0" />
+									<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+										<c:set var="rateCount" value="${rateCount + (ratingDto.userRating == (columnOrderId.count + 0.5) ? 1 : 0)}" />
+									</c:forEach>
+									<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
+									<c:set var="rowRateValue" value="${rowRateValue + rateCount * (columnOrderId.count + 0.5)}" />
+
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>">
+										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
+										
+										<c:if test="${rateCount > 0}">
+											<%-- learners see just how many rates they got from other learners --%>
+											<div class="rubrics-rating-count">
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
+											</div>
+
+											<%-- teachers see also who gave the rating --%>
+											<c:if test="${showJustification}">
+												<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+													<c:if test="${ratingDto.userRating == (columnOrderId.count + 0.5)}">
+														<div class="rubrics-rating-learner">
+															<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+															&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="false"/>
+														</div>
+													</c:if>
+												</c:forEach>
+											</c:if>
+										</c:if>
+									</div>
+								</c:if>
+							</c:forEach>
+
+							<%-- Cell with average rating --%>
+							<div class="col text-center">
+								<c:choose>
+									<c:when test="${rowRateCount == 0}">
+										-
+									</c:when>
+									<c:otherwise>
+										<fmt:formatNumber value="${rowRateValue / rowRateCount}" type="number" maxFractionDigits="2" />
+									</c:otherwise>
+								</c:choose>
+							</div>
+						</div>
+					</c:forEach>
+				</div>
+			</c:when>
+			
+			<c:when test="${rubricsPivotView}">
+				<div id="rubrics-row-cards">
+						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+					<c:set var="columnHeaders" value="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}" />
+					<c:set var="columnHeaderCount" value="${fn:length(columnHeaders)}" />
+
+					<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+						<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn collapsed" data-bs-toggle="collapse" data-bs-target="#collapse${criteria.ratingCriteriaId}"
+								   aria-expanded="false" aria-controls="collapse${criteria.ratingCriteriaId}" data-parent="#rubrics-rows-panels">
+									<%-- Criterion "row" --%>
+									<c:out value="${criteria.title}" escapeXml="false" />
+								</button>
+							</div>
+
+							<div id="collapse${criteria.ratingCriteriaId}" class="collapse"
+								 	role="tabpanel" aria-labelledby="heading${criteria.ratingCriteriaId}">
+								<div class="ltable rubrics-table pivot-view">
+									<div class="row rubrics-table-header m-0">
+										<%-- Learner profile pictures and names --%>
+										<div class="col"></div>
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
+											<div class="col">
+												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
+												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
+											</div>
+										</c:forEach>
+									</div>
+
+									<c:forEach items="${columnHeaders}" varStatus="columnStatus">
+										<c:set var="columnHeader" value="${columnHeaders[columnHeaderCount - columnStatus.count]}" />
+										<div class="row align-items-center m-0">
+											<div class="col">
+													<%-- Criterion "column" --%>
+												<span class="column-header-span"><c:out value="${columnHeader}" escapeXml="false"/></span><br>
+													<%-- Criterion "cell" --%>
+												<c:out value="${criteria.rubricsColumns[columnHeaderCount - columnStatus.count].name}" escapeXml="false" />
+											</div>
+											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<div class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index)}">text-bg-success</c:if>'>
+													${columnHeaderCount - columnStatus.index}
+												</div>
+											</c:forEach>
+										</div>
+										
+										<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
+											<div class="row align-items-center m-0">
+												<div class="col">
+													<i><fmt:message key="label.rating.rubrics.in.between" /></i>
+												</div>
+												<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
+													<div class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">text-bg-success</c:if>'>
+														${columnHeaderCount - columnStatus.index - 0.5}
+													</div>
+												</c:forEach>
+											</div>
+										</c:if>
+									</c:forEach>
+								</div>
+							</div>
+						</div>
+
+					</c:forEach>
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+
+				<div id="rubrics-user-cards-${criteriaGroupId}" role="tablist" aria-multiselectable="true">
+					<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+					<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+
+					<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn collapsed" data-bs-toggle="collapse" data-bs-target="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									   aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									   data-parent="#rubrics-users-panels-${criteriaGroupId}">
+									<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+									&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="false"/>
+								</button>
+							</div>
+
+							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="collapse"
+									 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+								<div class="ltable rubrics-table mb-0 standard-view">
+									<div class="row rubrics-table-header m-0">
+											<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+										<div class="col"></div>
+										<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}" varStatus="columnStatus">
+											<div class="col">
+												(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
+											</div>
+											<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
+												<div class="col">
+													<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
+												</div>
+											</c:if>
+										</c:forEach>
+									</div>
+									
+									<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+										<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+										<div class="row m-0">
+											<div class="col">
+												<c:out value="${criteria.title}" escapeXml="false" />
+											</div>
+											<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<div class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == columnOrderId.count}">text-bg-success</c:if>'>
+													<c:out value="${column.name}" escapeXml="false" />
+												</div>
+												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
+													<div class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">text-bg-success</c:if>'>
+														<i><fmt:message key="label.rating.rubrics.in.between" /></i>
+													</div>
+												</c:if>
+											</c:forEach>
+										</div>
+									</c:forEach>
+								</div>
+							</div>
+						</div>
+					</c:forEach>
+				</div>
+			</c:otherwise>
+		</c:choose>
+	</c:when>
+</c:choose>
Index: lams_central/web/css/components.scss
===================================================================
diff -u -ra08fb689e1bb174869cb981d301b204d2f573590 -rd43d1e67bb589b4f565a222a3f33ea17debc68a7
--- lams_central/web/css/components.scss	(.../components.scss)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
+++ lams_central/web/css/components.scss	(.../components.scss)	(revision d43d1e67bb589b4f565a222a3f33ea17debc68a7)
@@ -590,7 +590,19 @@
     vertical-align: middle;
 }
 
-// Ratings
+/* fontawesome icon x-small */
+.fa-xs {
+	font-size: smaller;
+}
+
+.card-subheader {
+	padding-bottom: 7px; 
+	/*font-style: italic;*/
+	font-weight: 500;
+	color: rgba(5, 112, 213,1) !important;
+}
+
+/*----------Ratings----------------*/ 
 .rating-comment{
 	background-image: none;
 	border: $border-thin-default-light;
@@ -602,9 +614,10 @@
 	font-size: x-small;
 }
 
-/* fontawesome icon x-small */
-.fa-xs {
-	font-size: smaller;
+/*----------collapsable-icon-left----------------*/ 
+
+.component-page-wrapper .collapsable-icon-left button.collapsed:after {
+	content: "\f054";
 }
 
 .component-page-wrapper .collapsable-icon-left button[data-bs-toggle="collapse"]:after {
@@ -615,10 +628,25 @@
 	margin-right: .5rem;
 }
 
-.component-page-wrapper .collapsable-icon-left button.collapsed:after {
-	content: "\f054";
+/*----------slider----------------*/
+
+.bootstrap-slider input[type="range"] {
+  width: 210px;
+  margin: 0;
 }
 
+.bootstrap-slider datalist {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  writing-mode: vertical-lr;
+  width: 210px;
+}
+
+.bootstrap-slider option {
+  padding: 0;
+}
+
 /* Unused or used in assessment rewritten authoring */
 /*
 
Index: lams_tool_assessment/web/includes/css/assessment.scss
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rd43d1e67bb589b4f565a222a3f33ea17debc68a7
--- lams_tool_assessment/web/includes/css/assessment.scss	(.../assessment.scss)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_assessment/web/includes/css/assessment.scss	(.../assessment.scss)	(revision d43d1e67bb589b4f565a222a3f33ea17debc68a7)
@@ -32,12 +32,6 @@
 	padding-right: 5px;
 }
 
-.card-subheader {
-	padding-bottom: 7px; 
-	//font-style: italic;
-	font-weight: 500;
-	color: rgba(5, 112, 213,1) !important;
-}
 .question-table {
 	width: 98%;
 }
@@ -139,25 +133,6 @@
     padding: 12px 0 !important;
 }
 
-/*----------slider----------------*/
-
-.bootstrap-slider input[type="range"] {
-  width: 210px;
-  margin: 0;
-}
-
-.bootstrap-slider datalist {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  writing-mode: vertical-lr;
-  width: 210px;
-}
-
-.bootstrap-slider option {
-  padding: 0;
-}
-
 /*----------countdown growl----------------*/
 .jGrowl {
   	font-size: 22px;
Index: lams_tool_lamc/web/WEB-INF/tags/StyledRating5.tag
===================================================================
diff -u
--- lams_tool_lamc/web/WEB-INF/tags/StyledRating5.tag	(revision 0)
+++ lams_tool_lamc/web/WEB-INF/tags/StyledRating5.tag	(revision d43d1e67bb589b4f565a222a3f33ea17debc68a7)
@@ -0,0 +1,553 @@
+<%
+	/**
+	 * StyledRating.tag
+	 *	Author: Andrey Balan
+	 *	Description: Shows the results of a styled rating. Does not allow for update.
+	 */
+%>
+<%@ tag body-content="scriptless" %>
+<%@ taglib uri="tags-core" prefix="c" %>
+<%@ taglib uri="tags-fmt" prefix="fmt" %>
+<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+<c:set var="lams"><lams:LAMSURL/></c:set>
+
+<%@ attribute name="criteriaRatings" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.StyledCriteriaRatingDTO" %>
+<%@ attribute name="showJustification" required="true" %>
+<%@ attribute name="alwaysShowAverage" required="true" %>
+<%@ attribute name="rubricsPivotView" required="false" %>
+<%@ attribute name="rubricsInBetweenColumns" required="false" %>
+
+<c:if test="${empty rubricsPivotView}">
+	<c:set var="rubricsPivotView" value="false" />
+</c:if>
+<c:if test="${empty rubricsInBetweenColumns}">
+	<c:set var="rubricsInBetweenColumns" value="false" />
+</c:if>
+
+<!-- On the results page, set to true for current users summary at the bottom, set to false "other users results".
+When true, hides the names and groups the comments.  -->
+<%@ attribute name="currentUserDisplay" required="true" %>
+
+<c:choose>
+	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 0}">
+
+		<table class="tablesorter">
+			<thead>
+			<tr>
+				<c:if test="${not currentUserDisplay}">
+					<th class="username" title="<fmt:message key='label.sort.by.user.name'/>" >
+						<fmt:message key="label.user.name" />
+					</th>
+				</c:if>
+				<th class="comment">
+					<fmt:message key="label.comment" />
+				</th>
+			</tr>
+			</thead>
+			<tbody>
+
+			<c:forEach var="rating" items="${criteriaRatings.ratingDtos}">
+				<c:if test="${ not empty rating.comment }">
+					<tr>
+						<c:if test="${not currentUserDisplay}">
+							<td>
+								<lams:Portrait userId="${rating.itemId}"/><span class="portrait-sm-lineheight">&nbsp;<c:out value="${rating.itemDescription}" escapeXml="false"/></span>
+							</td>
+						</c:if>
+						<td>
+							<c:out value="${rating.comment}" escapeXml="false"/>
+						</td>
+					</tr>
+				</c:if>
+			</c:forEach>
+			</tbody>
+		</table>
+	</c:when>
+
+	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 1}">
+
+		<c:choose>
+			<c:when test="${not currentUserDisplay}">
+				<table class="tablesorter jRating">
+					<thead>
+					<tr>
+						<th class="username" title="<fmt:message key='label.sort.by.user.name'/>" width="${criteriaRatings.ratingCriteria.commentsEnabled ? '25%' : '40%'}" >
+							<fmt:message key="label.user.name" />
+						</th>
+						<th class="rating text-center ">
+							<fmt:message key="label.rating" />
+						</th>
+						<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled}">
+							<th class="comment">
+								<fmt:message key="label.comment" />
+							</th>
+						</c:if>
+					</tr>
+					</thead>
+					<tbody>
+					<c:forEach var="rating" items="${criteriaRatings.ratingDtos}">
+						<c:if test="${not empty rating.averageRating}">
+							<tr>
+								<td>
+									<lams:Portrait userId="${rating.itemId}"/>
+									<span class="portrait-sm-lineheight">&nbsp;<c:out value="${rating.itemDescription}" escapeXml="false"/></span>
+								</td>
+								
+								<td class="rating">
+									<div class="rating-stars-holder text-center center-block">
+										<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+										<div class="rating-stars-disabled rating-stars-new" data-average="${rating.averageRating}" data-id="${objectId}">
+										</div>
+										<c:set var="userRating">${rating.userRating}</c:set>
+										<div class="rating-stars-caption" id="rating-stars-caption-${objectId}">
+											<c:choose>
+												<c:when test="${empty userRating}">
+													<fmt:message key="label.not.rated"></fmt:message>
+												</c:when>
+												<c:otherwise>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${userRating}</span></fmt:param></fmt:message>
+												</c:otherwise>
+											</c:choose>
+											<br/>
+											<fmt:message key="label.avg.rating">
+												<fmt:param><span id="average-rating-${objectId}">${rating.averageRating}</span></fmt:param>
+												<fmt:param><span id="number-of-votes-${objectId}">${rating.numberOfVotes}</span></fmt:param>
+											</fmt:message>
+										</div>
+									</div>
+								</td>
+								
+								<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled}">
+									<td>
+										<c:out value="${rating.comment}" escapeXml="false"/>
+									</td>
+								</c:if>
+							</tr>
+						</c:if>
+					</c:forEach>
+					</tbody>
+				</table>
+			</c:when>
+
+			<c:otherwise>
+				<c:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="rating-stars-holder text-center center-block">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<div class="rating-stars-disabled rating-stars-new" data-average="${rating.averageRating}" data-id="${objectId}"></div>
+								<div class="rating-stars-caption" id="rating-stars-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
+			</c:otherwise>
+		</c:choose>
+
+	</c:when>
+
+	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 2}">
+		<div class="card-body">
+			<div class="fst-italic mb-2">
+				<fmt:message key="label.learning.average.rankings"/>&nbsp;
+				<c:if test="${not currentUserDisplay}">
+					<fmt:message key="label.learning.your.rankings.shown.in.brackets"/>
+				</c:if>
+			</div>
+			
+			<ul class="list-group">
+				<c:forEach var="rating" items="${criteriaRatings.ratingDtos}">
+					<c:if test="${alwaysShowAverage || not empty rating.averageRating }">
+						<li class="list-group-item"><strong>
+							<c:choose>
+								<c:when test="${empty rating.averageRating}">-</c:when>
+								<c:otherwise><fmt:formatNumber value="${rating.averageRating}" type="number" maxFractionDigits="0" /></c:otherwise>
+							</c:choose>
+							:</strong>
+							&nbsp;<c:if test="${not currentUserDisplay}"><lams:Portrait userId="${rating.itemId}"/></c:if>
+							<span class="portrait-sm-lineheight">&nbsp;<c:out value="${rating.itemDescription}" escapeXml="false"/>&nbsp;</span>
+							<c:if test="${not currentUserDisplay && not empty rating.userRating}">
+								(${rating.userRating})
+							</c:if>
+						</li>
+					</c:if>
+				</c:forEach>
+			</ul>
+		</div>
+	</c:when>
+
+	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 3}">
+		<div class="card-body">
+			<div class="fst-italic mb-2">
+				<fmt:message key="label.learning.average.marks"/>
+				&nbsp;
+				<c:if test="${not currentUserDisplay}">
+					<fmt:message key="label.learning.your.marks.shown.in.brackets"/>
+				</c:if>
+			</div>
+			
+			<ul class="list-group">
+				<c:forEach var="rating" items="${criteriaRatings.ratingDtos}">
+					<c:if test="${alwaysShowAverage || not empty rating.averageRating }">
+						<li class="list-group-item">
+							<strong>
+							<c:choose>
+								<c:when test="${empty rating.averageRating}">-</c:when>
+								<c:otherwise>${rating.averageRating}</c:otherwise>
+							</c:choose>
+							:
+							</strong>
+							
+							&nbsp;
+							<c:if test="${not currentUserDisplay}">
+								<lams:Portrait userId="${rating.itemId}"/>
+							</c:if>
+							<span class="portrait-sm-lineheight">
+								&nbsp;<c:out value="${rating.itemDescription}" escapeXml="false"/>&nbsp;
+							</span>
+							<c:if test="${not currentUserDisplay && not empty rating.userRating}">
+								(${rating.userRating})
+							</c:if>
+						</li>
+					</c:if>
+				</c:forEach>
+			</ul>
+			
+			<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
+				<div class="fst-italic mt-2">
+					<fmt:message key="label.learning.your.justification"/>
+				</div>
+				<lams:out value="${criteriaRatings.justificationComment}" />
+			</c:if>
+		</div>
+	</c:when>
+
+	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
+		<style>
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
+				text-decoration: none;
+			}
+
+			.rubrics-user-card .collapsable-icon-left button:after {
+				margin-top: 6px;
+			}
+
+			.rubrics-table.standard-view .row:first-child {
+				background-color: initial !important;
+			}
+
+			.rubrics-table.standard-view .rubrics-table-header {
+				font-style: normal;
+				font-weight: bold;
+			}
+
+			.rubrics-table.standard-view .col:first-child {
+				font-weight: bold;
+			}
+
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
+				text-align: center;
+			}
+
+			.rubrics-table.pivot-view .rubrics-table-header {
+				font-style: normal;
+				text-align: center;
+			}
+			.rubrics-table.pivot-view .row .col:first-child {
+				font-weight: bold;
+			}
+
+			.column-header-span {
+				font-style: italic;
+			}
+			
+			.rubrics-user-card .collapsable-icon-left button, .collapsable-icon-left button:after,
+			.rubrics-row-card .collapsable-icon-left button, .collapsable-icon-left button:after {
+				color: inherit !important;
+			}
+			
+			.rubrics-table .col.text-bg-success {
+				font-weight: bold;
+				line-height: 40px;
+				margin: -0.5em 0;
+			}
+
+			.rubrics-table .rubrics-rating-cell {
+				border-top: none;
+
+			}
+			.rubrics-rating-count {
+				text-align: right;
+			}
+
+			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+				margin-top: 10px;
+			}
+
+			.rubrics-table .rubrics-description-cell {
+				border-bottom: none;
+			}
+		</style>
+
+		<c:choose>
+			<c:when test="${currentUserDisplay}">
+				<div class="ltable table-sm rubrics-table standard-view">
+					<div class="row rubrics-table-header">
+						<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+						<div class="col"></div>
+						<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}" varStatus="columnStatus">
+							<div class="col">
+								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
+							</div>
+							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
+								<div class="col">
+									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
+								</div>
+							</c:if>
+						</c:forEach>
+						<div class="col text-center"><fmt:message key="label.average" /></div>
+					</div>
+					
+					<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+						<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+
+						<div class="row align-items-center g-0">
+							<div class="col">
+								<c:out value="${criteria.title}" escapeXml="false" />
+							</div>
+
+							<%-- These variables are for counting average rating for the given row --%>
+							<c:set var="rowRateCount" value="0" />
+							<c:set var="rowRateValue" value="0" />
+							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+
+								<%-- Check if any other learner rated this learner for this column --%>
+								<c:set var="rateCount" value="0" />
+								<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+									<c:set var="rateCount" value="${rateCount + (ratingDto.userRating == columnOrderId.count ? 1 : 0)}" />
+								</c:forEach>
+								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
+								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
+
+								<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>">
+									<c:out value="${column.name}" escapeXml="false" />
+									
+									<c:if test="${rateCount > 0}">
+										<%-- learners see just how many rates they got from other learners --%>
+										<div class="rubrics-rating-count">
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
+										</div>
+
+										<%-- teachers see also who gave the rating --%>
+										<c:if test="${showJustification}">
+											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+												<c:if test="${ratingDto.userRating == columnOrderId.count}">
+													<div class="rubrics-rating-learner">
+														<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+														&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="false"/>
+													</div>
+												</c:if>
+											</c:forEach>
+										</c:if>
+									</c:if>
+								</div>
+
+								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
+									<%-- Check if any other learner rated this learner for this 0.5 column --%>
+									<c:set var="rateCount" value="0" />
+									<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+										<c:set var="rateCount" value="${rateCount + (ratingDto.userRating == (columnOrderId.count + 0.5) ? 1 : 0)}" />
+									</c:forEach>
+									<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
+									<c:set var="rowRateValue" value="${rowRateValue + rateCount * (columnOrderId.count + 0.5)}" />
+
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>">
+										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
+										
+										<c:if test="${rateCount > 0}">
+											<%-- learners see just how many rates they got from other learners --%>
+											<div class="rubrics-rating-count">
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
+											</div>
+
+											<%-- teachers see also who gave the rating --%>
+											<c:if test="${showJustification}">
+												<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+													<c:if test="${ratingDto.userRating == (columnOrderId.count + 0.5)}">
+														<div class="rubrics-rating-learner">
+															<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+															&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="false"/>
+														</div>
+													</c:if>
+												</c:forEach>
+											</c:if>
+										</c:if>
+									</div>
+								</c:if>
+							</c:forEach>
+
+							<%-- Cell with average rating --%>
+							<div class="col text-center">
+								<c:choose>
+									<c:when test="${rowRateCount == 0}">
+										-
+									</c:when>
+									<c:otherwise>
+										<fmt:formatNumber value="${rowRateValue / rowRateCount}" type="number" maxFractionDigits="2" />
+									</c:otherwise>
+								</c:choose>
+							</div>
+						</div>
+					</c:forEach>
+				</div>
+			</c:when>
+			
+			<c:when test="${rubricsPivotView}">
+				<div id="rubrics-row-cards">
+						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+					<c:set var="columnHeaders" value="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}" />
+					<c:set var="columnHeaderCount" value="${fn:length(columnHeaders)}" />
+
+					<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+						<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn collapsed" data-bs-toggle="collapse" data-bs-target="#collapse${criteria.ratingCriteriaId}"
+								   aria-expanded="false" aria-controls="collapse${criteria.ratingCriteriaId}" data-parent="#rubrics-rows-panels">
+									<%-- Criterion "row" --%>
+									<c:out value="${criteria.title}" escapeXml="false" />
+								</button>
+							</div>
+
+							<div id="collapse${criteria.ratingCriteriaId}" class="collapse"
+								 	role="tabpanel" aria-labelledby="heading${criteria.ratingCriteriaId}">
+								<div class="ltable rubrics-table pivot-view">
+									<div class="row rubrics-table-header m-0">
+										<%-- Learner profile pictures and names --%>
+										<div class="col"></div>
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
+											<div class="col">
+												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
+												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
+											</div>
+										</c:forEach>
+									</div>
+
+									<c:forEach items="${columnHeaders}" varStatus="columnStatus">
+										<c:set var="columnHeader" value="${columnHeaders[columnHeaderCount - columnStatus.count]}" />
+										<div class="row align-items-center m-0">
+											<div class="col">
+													<%-- Criterion "column" --%>
+												<span class="column-header-span"><c:out value="${columnHeader}" escapeXml="false"/></span><br>
+													<%-- Criterion "cell" --%>
+												<c:out value="${criteria.rubricsColumns[columnHeaderCount - columnStatus.count].name}" escapeXml="false" />
+											</div>
+											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<div class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index)}">text-bg-success</c:if>'>
+													${columnHeaderCount - columnStatus.index}
+												</div>
+											</c:forEach>
+										</div>
+										
+										<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
+											<div class="row align-items-center m-0">
+												<div class="col">
+													<i><fmt:message key="label.rating.rubrics.in.between" /></i>
+												</div>
+												<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
+													<div class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">text-bg-success</c:if>'>
+														${columnHeaderCount - columnStatus.index - 0.5}
+													</div>
+												</c:forEach>
+											</div>
+										</c:if>
+									</c:forEach>
+								</div>
+							</div>
+						</div>
+
+					</c:forEach>
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+
+				<div id="rubrics-user-cards-${criteriaGroupId}" role="tablist" aria-multiselectable="true">
+					<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+					<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+
+					<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn collapsed" data-bs-toggle="collapse" data-bs-target="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									   aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									   data-parent="#rubrics-users-panels-${criteriaGroupId}">
+									<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+									&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="false"/>
+								</button>
+							</div>
+
+							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="collapse"
+									 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+								<div class="ltable rubrics-table mb-0 standard-view">
+									<div class="row rubrics-table-header m-0">
+											<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+										<div class="col"></div>
+										<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}" varStatus="columnStatus">
+											<div class="col">
+												(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
+											</div>
+											<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
+												<div class="col">
+													<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
+												</div>
+											</c:if>
+										</c:forEach>
+									</div>
+									
+									<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+										<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+										<div class="row m-0">
+											<div class="col">
+												<c:out value="${criteria.title}" escapeXml="false" />
+											</div>
+											<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<div class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == columnOrderId.count}">text-bg-success</c:if>'>
+													<c:out value="${column.name}" escapeXml="false" />
+												</div>
+												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
+													<div class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">text-bg-success</c:if>'>
+														<i><fmt:message key="label.rating.rubrics.in.between" /></i>
+													</div>
+												</c:if>
+											</c:forEach>
+										</div>
+									</c:forEach>
+								</div>
+							</div>
+						</div>
+					</c:forEach>
+				</div>
+			</c:otherwise>
+		</c:choose>
+	</c:when>
+</c:choose>
Index: lams_tool_lamc/web/learning/AnswersContent.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rd43d1e67bb589b4f565a222a3f33ea17debc68a7
--- lams_tool_lamc/web/learning/AnswersContent.jsp	(.../AnswersContent.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_lamc/web/learning/AnswersContent.jsp	(.../AnswersContent.jsp)	(revision d43d1e67bb589b4f565a222a3f33ea17debc68a7)
@@ -8,32 +8,22 @@
 <c:set var="isPrefixAnswersWithLetters" value="${sessionMap.content.prefixAnswersWithLetters}" scope="request" />
 <c:set var="hasEditRight" value="${!isLeadershipEnabled || isLeadershipEnabled && isUserLeader}" scope="request" />
 
-<lams:html>
-<lams:head>
-	<title><fmt:message key="activity.title" /></title>
-	<lams:css />
-	<link rel="stylesheet" type="text/css" href="${lams}css/bootstrap-slider.css" />
+<lams:PageLearner title="${mcGeneralLearnerFlowDTO.activityTitle}" toolSessionID="${mcLearningForm.toolSessionID}">
 	<style media="screen,projection" type="text/css">
 		div.growlUI h1, div.growlUI h2 {
 			color: white;
 			margin: 5px 5px 5px 0px;
 			text-align: center;
 			font-size: 18px;
 		}
+		.card-subheader { 
+			font-style: italic;
+		}
 	</style>
 
-	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.form.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.blockUI.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/bootstrap-slider.js"></script>
 	<script type="text/javaScript">
-
-		$(document).ready(function() {
-			//initialize bootstrap-sliders if "Enable confidence level" option is ON
-			$('.bootstrap-slider').bootstrapSlider();
-		});
-
         //autoSaveAnswers if hasEditRight
         if (${hasEditRight}) {
           var interval = "30000"; // = 30 seconds
@@ -108,7 +98,6 @@
         }
 
         function checkLeaderProgress() {
-
           $.ajax({
             async: false,
             url: '<c:url value="/learning/checkLeaderProgress.do"/>',
@@ -122,37 +111,37 @@
 			}
 		  });
         }
-
       </script>
-</lams:head>
 
-<body class="stripes">
+	<div class="container-lg">
 
-	<lams:Page type="learner" title="${mcGeneralLearnerFlowDTO.activityTitle}" formID="mcLearningForm">
-
-		<div class="panel">
+		<div id="instructions" class="instructions">
 			<c:out value="${mcGeneralLearnerFlowDTO.activityInstructions}" escapeXml="false" />
 		</div>
 
 		<!-- Announcements and advanced settings -->
 		<c:if test="${not empty submissionDeadline}">
-			<lams:Alert close="false" id="submissionDeadline" type="danger">
+			<lams:Alert5 close="false" id="submissionDeadline" type="danger">
 				<fmt:message key="authoring.info.teacher.set.restriction">
 					<fmt:param>
 						<lams:Date value="${submissionDeadline}" />
 					</fmt:param>
 				</fmt:message>
-			</lams:Alert>
+			</lams:Alert5>
 		</c:if>
 
 		<c:if test="${mcGeneralLearnerFlowDTO.retries == 'true' && mcGeneralLearnerFlowDTO.passMark != '0'}">
-			<lams:Alert close="true" id="passingMark" type="info">
+			<lams:Alert5 close="true" id="passingMark" type="info">
 				<fmt:message key="label.learner.message" /> ( <c:out value="${mcGeneralLearnerFlowDTO.passMark}" /> )
-			</lams:Alert>
+			</lams:Alert5>
 		</c:if>
+
+		<c:if test="${isLeadershipEnabled}">
+			<lams:LeaderDisplay idName="leader-info" username="${sessionMap.groupLeader.fullname}" userId="${sessionMap.groupLeader.userId}" />
+		</c:if>
 		<!-- End announcements and advanced settings -->
 
-		<div class="mb-3">
+		<div id="questions">
 			<form:form id="mcLearningForm" modelAttribute="mcLearningForm" action="displayMc.do" enctype="multipart/form-data"
 				method="POST" target="_self">
 				<form:hidden path="toolContentID" />
@@ -164,14 +153,6 @@
 
 				<lams:errors/>
 
-				<c:if test="${isLeadershipEnabled}">
-					<h4>
-						<fmt:message key="label.group.leader">
-							<fmt:param><c:out value="${sessionMap.groupLeader.fullname}" escapeXml="true"/></fmt:param>
-						</fmt:message>
-					</h4>
-				</c:if>
-
 				<c:choose>
 					<c:when test="${sessionMap.content.questionsSequenced && hasEditRight}">
 						<jsp:include page="/learning/SingleQuestionAnswersContent.jsp" />
@@ -182,7 +163,5 @@
 				</c:choose>
 			</form:form>
 		</div>
-	</lams:Page>
-</body>
-</lams:html>
-
+	</div>
+</lams:PageLearner>
Index: lams_tool_lamc/web/learning/CombinedAnswersContent.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rd43d1e67bb589b4f565a222a3f33ea17debc68a7
--- lams_tool_lamc/web/learning/CombinedAnswersContent.jsp	(.../CombinedAnswersContent.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_lamc/web/learning/CombinedAnswersContent.jsp	(.../CombinedAnswersContent.jsp)	(revision d43d1e67bb589b4f565a222a3f33ea17debc68a7)
@@ -1,100 +1,99 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-  <!--options content goes here-->
+<!--options content goes here-->
+<c:forEach var="answerDto" items="${requestScope.learnerAnswerDtos}">
+  	<c:set var="questionUid" value="${answerDto.questionUid}"/>
 
-  <c:forEach var="answerDto" items="${requestScope.learnerAnswerDtos}">
+	<div class="card lcard">
+		<div class="card-header text-bg-secondary">
+			<div class="row align-items-center">
+				<div style="width:50px;">
+					${answerDto.displayOrder})
+				</div>
+	                
+	            <div class="col">
+		            <c:if test="${not sessionMap.hideTitles}">
+			           	<c:out value="${answerDto.questionName}" escapeXml="false" />
+		            </c:if>
+		                	
+		            <div class="font-size-init">
+		               	<c:out value="${answerDto.questionDescription}" escapeXml="false" />
+		            </div>
+	            </div>
+            </div>
 
-    <div class="row g-0">
-      <div class="col-12">
-        <div class="panel panel-default">
-          <div class="panel-heading">
-            <table>
-              <tr>
-                <td style="vertical-align: top;">
-                	${answerDto.displayOrder})
-                </td>
-                <td width="100%" style="padding-left: 5px">
-                	<c:if test="${not sessionMap.hideTitles}">
-	                	<c:out value="${answerDto.questionName}" escapeXml="false" />
-	                	<br>
-                	</c:if>
-                	<c:out value="${answerDto.questionDescription}" escapeXml="false" />
-                </td>
-              </tr>
-              <c:if test="${mcGeneralLearnerFlowDTO.showMarks == 'true'}">			
-                <tr>
-                  <td width="100%" colspan="2">
-                    [
-                    <strong><fmt:message key="label.mark" /></strong>
-                    <c:out value="${answerDto.mark}" />
-                    ]                    
-                  </td>
-                </tr>
-              </c:if>
-            </table>
-          </div>
-          <div class="panel-body">
-            <!-- Answer options begin -->
-            <div class="table-responsive">
-              <table class="table table-hover table-sm">
-                <tbody>
-                
-                  <c:forEach var="option" items="${answerDto.options}" varStatus="status">
-                    <tr>
-                    
-                      <td class="text-nowrap" width="100%">
-                      	<div class="form-check">
-	                      	<input type="radio" id="${answerDto.questionUid}-${option.qbOption.uid}" name="checkedCa${answerDto.questionUid}" class="form-check-input" 
-	                         		value="${answerDto.questionUid}-${option.qbOption.uid}" 
-	                           		<c:if test="${option.selected}">checked="checked"</c:if>
-	                            	<c:if test="${!hasEditRight}">disabled="disabled"</c:if> 
-	                      	>
+			<c:if test="${mcGeneralLearnerFlowDTO.showMarks == 'true'}">
+				<div class="badge text-bg-light float-end">
+					<fmt:message key="label.mark" /> 
+					<c:out value="${answerDto.mark}" /> 
+				</div>
+			</c:if>
+		</div>
 
-	                       	<label for="${answerDto.questionUid}-${option.qbOption.uid}" class="form-check-label">
-		                     	<c:if test="${isPrefixAnswersWithLetters}">
-		                     		<c:set var="seqLetter" value="${status.index}"/>
-		                     		<%=Character.toChars(97 + (Integer)pageContext.getAttribute("seqLetter"))%>)
-		                     	</c:if>
-	                     	
-	                           	<c:out value="${option.qbOption.name}" escapeXml="false" />
-	                       	</label>
-	                   </div>
-	                 </td>
-                    </tr>
-                  </c:forEach>
-              </tbody>
-            </table>            
-          </div>
-          <!-- End answer options --> 
+		<div class="card-body table-responsive">
+			<div class="div-hover mx-2">
+				<fieldset>
+					<legend class="visually-hidden">
+						<c:out value="${answerDto.questionDescription}" escapeXml="false" />
+					</legend>
+					
+	            	<c:forEach var="option" items="${answerDto.options}" varStatus="status">
+						<div class="row text-nowrap">
+	                      	<div class="form-check">
+		                      	<input type="radio" id="${questionUid}-${option.qbOption.uid}" name="checkedCa${questionUid}" class="form-check-input" 
+		                         		value="${questionUid}-${option.qbOption.uid}" 
+		                           		<c:if test="${option.selected}">checked="checked"</c:if>
+		                            	<c:if test="${!hasEditRight}">disabled="disabled"</c:if> 
+		                      	>
+	
+		                       	<label for="${questionUid}-${option.qbOption.uid}" class="form-check-label">
+			                     	<c:if test="${isPrefixAnswersWithLetters}">
+			                     		<c:set var="seqLetter" value="${status.index}"/>
+			                     		<%=Character.toChars(97 + (Integer)pageContext.getAttribute("seqLetter"))%>)
+			                     	</c:if>
+		                     	
+		                           	<c:out value="${option.qbOption.name}" escapeXml="false" />
+		                       	</label>
+		                	</div>
+		            	</div>
+	            	</c:forEach>
+            	</fieldset>
+            </div>
                 
 			<c:if test="${sessionMap.content.enableConfidenceLevels}">
-				<div class="question-type">
-					<fmt:message key="label.confidence" />
+				<div class="bootstrap-slider mt-3">
+					<div class="card-subheader">
+						<label for="confidenceLevel${questionUid}">
+							<fmt:message key="label.confidence" />
+						</label>
+					</div>
+					
+					<div>
+						<input type="range" name="confidenceLevel${questionUid}" id="confidenceLevel${questionUid}" 
+							list="slider-step-list-${questionUid}" 
+							min="0" max="10" step="5" 
+							<c:if test="${answerDto.confidenceLevel != -1}">value="${answerDto.confidenceLevel}"</c:if>
+							<c:if test="${!hasEditRight}">disabled</c:if>
+						>
+						<datalist id="slider-step-list-${questionUid}">
+							<option value="0" label="0%"/>
+							<option value="5" label="50%"/>
+							<option value="10" label="100%"/>
+						</datalist>
+					</div>
 				</div>
-	
-				<div>
-					<input name="confidenceLevel${answerDto.questionUid}" class="bootstrap-slider" type="text" 
-						data-slider-ticks="[0, 5, 10]" data-slider-ticks-labels='["0", "50", "100%"]' 
-						data-slider-enabled="${hasEditRight}" data-slider-tooltip="hide"
-						<c:if test="${answerDto.confidenceLevel != -1}">data-slider-value="${answerDto.confidenceLevel}"</c:if>
-					/>
-				</div>
-            </c:if>           
-
-        </div>
-      </div>
-    </div>
-  </div>
+			</c:if>
+		</div>
+	</div>
 </c:forEach>
 
 <form:hidden path="continueOptionsCombined" value="Continue" />
-
 <c:if test="${hasEditRight}">
 	<div class="activity-bottom-buttons">
-	  <button name="continueButton" class="btn btn-primary" onclick="doSubmit();" type="button" id="continueButton">
-	    <fmt:message key="button.continue" />
-	  </button>
-  </div>
+		<button name="continueButton" class="btn btn-primary na" onclick="doSubmit();" type="button" id="continueButton">
+	    	<fmt:message key="button.continue" />
+		</button>
+	</div>
 </c:if>
 
 <!--options content ends here-->
Fisheye: Tag d43d1e67bb589b4f565a222a3f33ea17debc68a7 refers to a dead (removed) revision in file `lams_tool_lamc/web/learning/SimpleLearnerError.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_lamc/web/learning/SingleQuestionAnswersContent.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rd43d1e67bb589b4f565a222a3f33ea17debc68a7
--- lams_tool_lamc/web/learning/SingleQuestionAnswersContent.jsp	(.../SingleQuestionAnswersContent.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_lamc/web/learning/SingleQuestionAnswersContent.jsp	(.../SingleQuestionAnswersContent.jsp)	(revision d43d1e67bb589b4f565a222a3f33ea17debc68a7)
@@ -7,86 +7,87 @@
 <form:hidden path="questionIndex" value="${mcGeneralLearnerFlowDTO.questionIndex}" />
 
 <c:forEach var="answerDto" varStatus="status" items="${requestScope.learnerAnswerDtos}">
+	<c:set var="questionUid" value="${answerDto.questionUid}"/>
+	
 	<c:if test="${answerDto.displayOrder == mcGeneralLearnerFlowDTO.questionIndex}">
-
-		<div class="row g-0">
-			<div class="col-12">
-				<div class="panel panel-default">
-					<div class="panel-heading">
-						<table>
-							<tr>
-								<td style="vertical-align: top;">
-									${answerDto.displayOrder})
-								</td>
-								<td width="100%" style="padding-left: 5px">
-									<c:if test="${not sessionMap.hideTitles}">
-										<c:out value="${answerDto.questionName}" escapeXml="false" />
-	                					<br>
-                					</c:if>
-                					<c:out value="${answerDto.questionDescription}" escapeXml="false" />
-								</td>
-							</tr>
-							<c:if test="${mcGeneralLearnerFlowDTO.showMarks == 'true'}">
-								<tr>
-									<td width="100%" colspan="2">
-										[ <strong><fmt:message key="label.mark" /></strong> <c:out value="${answerDto.mark}" /> ]
-									</td>
-								</tr>
-							</c:if>
-						</table>
+		<div class="card lcard">
+			<div class="card-header text-bg-secondary">
+				<div class="row align-items-center">
+					<div style="width:50px;">
+						${answerDto.displayOrder})
 					</div>
 					
-					<!-- Display answers -->
-					<div class="panel-body">
-						<div class="table-responsive">
-							<table class="table table-hover table-sm">
-								<tbody>
-									<c:forEach var="option" varStatus="status" items="${answerDto.options}">
-										<tr>
-											<td class="text-nowrap" width="100%">
-												<div class="form-check">
-													<input type="radio"	id="${answerDto.questionUid}-${option.qbOption.uid}" name="checkedCa" class="form-check-input"
-															value="${answerDto.questionUid}-${option.qbOption.uid}" 
-															<c:if test="${option.selected}">checked="checked"</c:if> 
-													/> 
-	
-													<label for="${answerDto.questionUid}-${option.qbOption.uid}" class="form-check-label">
-														<c:if test="${isPrefixAnswersWithLetters}">
-															<c:set var="seqLetter" value="${status.index}" />
-															<%=Character.toChars(97 + (Integer) pageContext.getAttribute("seqLetter"))%>)
-		                              					</c:if>
-	                              					 
-														<c:out value="${option.qbOption.name}" escapeXml="false" />
-													</label>
-												</div>
-											</td>
-										</tr>
-									</c:forEach>
+					<div class="col">
+						<c:if test="${not sessionMap.hideTitles}">
+							<c:out value="${answerDto.questionName}" escapeXml="false" />
+		                </c:if>
+		                					
+						<div class="font-size-init">
+		                	<c:out value="${answerDto.questionDescription}" escapeXml="false" />
+						</div>
+					</div>
+				</div>
+				
+				<c:if test="${mcGeneralLearnerFlowDTO.showMarks == 'true'}">
+					<div class="badge text-bg-light float-end">
+						<fmt:message key="label.mark" /> 
+						<c:out value="${answerDto.mark}" /> 
+					</div>
+				</c:if>
+			</div>
+
+			<div class="card-body table-responsive">
+				<div class="div-hover mx-2">
+					<fieldset>
+						<legend class="visually-hidden">
+							<c:out value="${answerDto.questionDescription}" escapeXml="false" />
+						</legend>
+					
+						<c:forEach var="option" varStatus="status" items="${answerDto.options}">
+							<div class="row text-nowrap">
+								<div class="form-check">
+									<input type="radio"	id="${questionUid}-${option.qbOption.uid}" name="checkedCa" class="form-check-input"
+											value="${questionUid}-${option.qbOption.uid}" 
+											<c:if test="${option.selected}">checked="checked"</c:if> 
+									/> 
+		
+									<label for="${questionUid}-${option.qbOption.uid}" class="form-check-label">
+										<c:if test="${isPrefixAnswersWithLetters}">
+											<c:set var="seqLetter" value="${status.index}" />
+											<%=Character.toChars(97 + (Integer) pageContext.getAttribute("seqLetter"))%>)
+			           					</c:if>
+		                              					 
+										<c:out value="${option.qbOption.name}" escapeXml="false" />
+									</label>
+								</div>
+							</div>
+						</c:forEach>
+					</fieldset>
+				</div>
 									
-									<c:if test="${sessionMap.content.enableConfidenceLevels}">
-						                <tr>
-						                  <td colspan="2">
-						                  	<div class="question-type">
-												<fmt:message key="label.confidence" />
-											</div>
+				<c:if test="${sessionMap.content.enableConfidenceLevels}">
+					<div class="bootstrap-slider mt-3">
+						<div class="card-subheader">
+							<label for="confidenceLevel${questionUid}">
+								<fmt:message key="label.confidence" />
+							</label>
+						</div>
 						
-											<div>
-												<input name="confidenceLevel${answerDto.questionUid}" class="bootstrap-slider" type="text" 
-													data-slider-ticks="[0, 5, 10]" data-slider-ticks-labels='["0", "50", "100%"]' 
-													data-slider-enabled="true" data-slider-tooltip="hide"
-													<c:if test="${answerDto.confidenceLevel != -1}">data-slider-value="${answerDto.confidenceLevel}"</c:if>
-												/>
-											</div>
-						                  </td>
-						                </tr>
-					                </c:if>
-
-								</tbody>
-							</table>
+						<div>
+							<input type="range" name="confidenceLevel${questionUid}" id="confidenceLevel${questionUid}" 
+								list="slider-step-list-${questionUid}" 
+								min="0" max="10" step="5" 
+								<c:if test="${answerDto.confidenceLevel != -1}">value="${answerDto.confidenceLevel}"</c:if>
+								<c:if test="${!hasEditRight}">disabled</c:if>
+							>
+							<datalist id="slider-step-list-${questionUid}">
+								<option value="0" label="0%"/>
+								<option value="5" label="50%"/>
+								<option value="10" label="100%"/>
+							</datalist>
 						</div>
 					</div>
-					<!-- end display answers -->
-				</div>
+            	</c:if>
 			</div>
 		</div>
 	</c:if>
@@ -95,20 +96,20 @@
 <div class="activity-bottom-buttons">
 	<c:if test="${mcGeneralLearnerFlowDTO.totalCountReached != 'true'  &&  mcGeneralLearnerFlowDTO.totalQuestionCount != '1'}">
 		<button name="continueOptionsCombined" type="button" onclick="submitNextQuestionSelected();"
-				class="btn btn-primary">
+				class="btn btn-primary na">
 			<fmt:message key="button.continue" />
 		</button>
 	</c:if>
 	
 	<c:if test="${mcGeneralLearnerFlowDTO.totalQuestionCount == '1'}">
-		<button name="continueOptionsCombined" type="button" onclick="doSubmit();" class="btn btn-primary">
+		<button name="continueOptionsCombined" type="button" onclick="doSubmit();" class="btn btn-primary na">
 			<fmt:message key="button.continue" />
 		</button>
 	</c:if>
 	
 	<c:if test="${mcGeneralLearnerFlowDTO.totalCountReached == 'true'}">
 		<button name="continueOptionsCombined" type="button" onclick="submitAllAnswers();"
-				class="btn btn-primary">
+				class="btn btn-primary na">
 			<fmt:message key="button.submit" />
 		</button>
 	</c:if>
Index: lams_tool_lamc/web/learning/ViewAnswers.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rd43d1e67bb589b4f565a222a3f33ea17debc68a7
--- lams_tool_lamc/web/learning/ViewAnswers.jsp	(.../ViewAnswers.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_lamc/web/learning/ViewAnswers.jsp	(.../ViewAnswers.jsp)	(revision d43d1e67bb589b4f565a222a3f33ea17debc68a7)
@@ -8,13 +8,7 @@
 <c:set var="hasEditRight" value="${!isLeadershipEnabled || isLeadershipEnabled && isUserLeader}" />
 <c:set var="isPrefixAnswersWithLetters" value="${sessionMap.content.prefixAnswersWithLetters}" scope="request" />
 
-
-<lams:html>
-<lams:head>
-	<title><fmt:message key="activity.title" /></title>
-	
-	<lams:css />
-	<link rel="stylesheet" type="text/css" href="${lams}css/bootstrap-slider.css" />
+<lams:PageLearner title="${mcGeneralLearnerFlowDTO.activityTitle}" toolSessionID="${mcLearningForm.toolSessionID}">
 	<style media="screen,projection" type="text/css">
 		div.growlUI h1, div.growlUI h2 {
 			color: white;
@@ -30,17 +24,8 @@
 		}
 	</style>	
 
-	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/bootstrap-slider.js"></script>
-	<lams:JSImport src="learning/includes/javascript/gate-check.js" />
 	<script type="text/javascript">
 		checkNextGateActivity('finishButton', '${mcLearningForm.toolSessionID}', '', submitForm);
-		
-		$(document).ready(function() {
-			//initialize bootstrap-sliders if "Enable confidence level" option is ON
-			$('.bootstrap-slider').bootstrapSlider();
-		});
 	
 		function disableFinishButton() {
 			var elem = document.getElementById("finishButton");
@@ -54,24 +39,18 @@
 			f.submit();
 		}
 	</script>
-</lams:head>
 
-<body class="stripes">
+	<div class="container-lg">
 	<form:form action="displayMc.do" method="POST" target="_self" onsubmit="disableFinishButton();" modelAttribute="mcLearningForm" id="mcLearningForm">
 
-	<lams:Page type="learner" title="${mcGeneralLearnerFlowDTO.activityTitle}" formID="mcLearningForm">
 		<c:if test="${isLeadershipEnabled}">
-			<h4>
-				<fmt:message key="label.group.leader">
-					<fmt:param><c:out value="${sessionMap.groupLeader.fullname}" escapeXml="true"/></fmt:param>
-				</fmt:message>
-			</h4>
+			<lams:LeaderDisplay idName="leader-info" username="${sessionMap.groupLeader.fullname}" userId="${sessionMap.groupLeader.userId}" />
 		</c:if>
 		
 		<c:if test="${hasEditRight && mcGeneralLearnerFlowDTO.retries == 'true'
 				&& mcGeneralLearnerFlowDTO.userOverPassMark != 'true'
 				&& mcGeneralLearnerFlowDTO.passMarkApplicable == 'true'}">
-			<p>
+			<lams:Alert5 id="learning-notEnoughMarks-info" type="danger" close="false">
 				<fmt:message key="label.notEnoughMarks">
 					<fmt:param>
 						<c:if test="${mcGeneralLearnerFlowDTO.passMark != mcGeneralLearnerFlowDTO.totalMarksPossible}">
@@ -83,14 +62,17 @@
 						<c:out value="${mcGeneralLearnerFlowDTO.totalMarksPossible}" />
 					</fmt:param>
 				</fmt:message>
-			</p>
-			<p>
+			</lams:Alert5>
+		</c:if> 
+		
+		<c:if test="${(mcGeneralLearnerFlowDTO.retries == 'true') && hasEditRight || (mcGeneralLearnerFlowDTO.displayAnswers == 'true')}">
+			<lams:Alert5 id="learning-mark-info" type="info" close="false">
 				<strong><fmt:message key="label.mark" /> </strong>
 				<c:out value="${mcGeneralLearnerFlowDTO.learnerMark}" />
 				&nbsp;<fmt:message key="label.outof" />&nbsp;
 				<c:out value="${mcGeneralLearnerFlowDTO.totalMarksPossible}" />
-			</p>
-		</c:if> 
+			</lams:Alert5>
+		</c:if>
 
 		<h4>
 			<fmt:message key="label.viewAnswers" />
@@ -101,250 +83,200 @@
 		<c:forEach var="question" varStatus="status" items="${mcGeneralLearnerFlowDTO.questions}">
 			<c:set var="mainQueIndex" scope="request" value="${mainQueIndex +1}" />
 
-			<div class="row g-0">
-				<div class="col-12">
-					<div class="panel panel-default">
-						<div class="panel-heading">
-							<table>
-								<tr>
-									<td>
-										${status.count})
-									</td>
-									<td width="100%" style="padding: 5px">
-										<c:if test="${not sessionMap.hideTitles}">
-											<c:out value="${question.name}" escapeXml="false" />
-											<br>
-										</c:if>
-										<c:out value="${question.description}" escapeXml="false" />
-									</td>
-								</tr>
-							</table>
+			<div class="card lcard">
+				<div class="card-header text-bg-secondary">
+					<div class="row align-items-center">
+						<div style="width:50px;">
+							${status.count})
 						</div>
+	
+						<div class="col">
+							<c:if test="${not sessionMap.hideTitles}">
+								<c:out value="${question.name}" escapeXml="false" />
+							</c:if>
+												
+							<div class="font-size-init">
+								<c:out value="${question.description}" escapeXml="false" />
+							</div>
+						</div>
+					</div>
+				</div>
 						
-						<div class="panel-body">
+				<div class="card-body">
 
-							<!--  CANDIDATE ANSWERS  -->
-							<c:set var="queIndex" scope="request" value="0" />
-							<c:forEach var="mainEntry" items="${mcGeneralLearnerFlowDTO.mapGeneralOptionsContent}">
-								<c:set var="queIndex" scope="request" value="${queIndex +1}" />
+					<!--  CANDIDATE ANSWERS  -->
+					<c:set var="queIndex" scope="request" value="0" />
+					<c:forEach var="mainEntry" items="${mcGeneralLearnerFlowDTO.mapGeneralOptionsContent}">
+						<c:set var="queIndex" scope="request" value="${queIndex +1}" />
 
-								<c:if test="${requestScope.mainQueIndex == requestScope.queIndex}">
-									<!-- list of candidate answers -->
-				                     <c:choose>
-				                     <c:when test="${isPrefixAnswersWithLetters}">
-										<table class="table table-hover table-sm table-no-border table-top">
-										<c:forEach var="subEntry" items="${mainEntry.value}">
-										<tr><td>${subEntry.key}
-										</td>
-										<td width="100%"><c:out value="${subEntry.value}" escapeXml="false" /></td>
-										</tr>
-										</c:forEach>
-										</tbody></table>
-									</c:when>
-									<c:otherwise>
-									<ul>
-										<c:forEach var="subEntry" items="${mainEntry.value}">
-											<li><c:out value="${subEntry.value}" escapeXml="false" /></li>
-										</c:forEach>
-									</ul>
-									</c:otherwise>
-									</c:choose>
-									<!-- end list of candidate answers -->
-
-									<!-- display students answers -->
-									<div class="table-responsive">
-										<table class="table table-sm">
-											<thead>
-												<tr>
-													<th colspan="2"><fmt:message key="label.yourAnswers" /></th>
-												</tr>
-											</thead>
-											<tr>
-												<c:if test="${mcGeneralLearnerFlowDTO.displayAnswers == 'true'}">
-													<!-- show right/wrong -->
-													<c:forEach var="attemptEntry" items="${mcGeneralLearnerFlowDTO.attemptMap}">
-														<c:if test="${requestScope.mainQueIndex == attemptEntry.key}">
-															<c:choose>
-																<c:when test="${attemptEntry.value.qbOption.correct}">
-																	<td class="bg-success" style="vertical-align: top;"><i class="fa fa-check"
-																		style="color: green; font-size: 22px"></i>
-																	</td>
-																</c:when>
-																<c:otherwise>
-																	<td class="bg-danger" style="vertical-align: top;"><i class="fa fa-times"
-																		style="color: red; font-size: 22px"></i>
-																	</td>
-																</c:otherwise>
-															</c:choose>
-														</c:if>
-													</c:forEach>
-													<!-- end show right/wrong -->
-												</c:if>
+						<c:if test="${requestScope.mainQueIndex == requestScope.queIndex}">
+							<!-- list of candidate answers -->
+							<ul>
+								<c:forEach var="subEntry" items="${mainEntry.value}">
+									<li>
+										<c:if test="${isPrefixAnswersWithLetters}">
+											${subEntry.key}
+											&nbsp;
+										</c:if>
 												
-												<td>
-													<!-- display student selection --> 
-													<c:forEach var="attemptEntry" items="${mcGeneralLearnerFlowDTO.attemptMap}">
-														<c:if test="${requestScope.mainQueIndex == attemptEntry.key}">
-															<c:out value="${attemptEntry.value.qbOption.name}" escapeXml="false" />
-														</c:if>
-													</c:forEach> 
-													<!-- end student selection -->
-												</td>
-											</tr>
+										<c:out value="${subEntry.value}" escapeXml="false" />
+									</li>
+								</c:forEach>
+							</ul>
+
+							<!-- display students answers -->
+							<div class="table-responsive">
+								<div class="card-subheader">
+									<fmt:message key="label.yourAnswers" />			
+								</div>
+
+								<div class="row">
+									<!-- show right/wrong -->
+									<c:if test="${mcGeneralLearnerFlowDTO.displayAnswers == 'true'}">
+										<c:forEach var="attemptEntry" items="${mcGeneralLearnerFlowDTO.attemptMap}">
+											<c:if test="${requestScope.mainQueIndex == attemptEntry.key}">
+												<c:choose>
+													<c:when test="${attemptEntry.value.qbOption.correct}">
+														<span class="text-bg-success badge ms-3" style="width: 40px;">
+															<i class="fa fa-check" style="font-size: 22px"></i>
+														</span>
+													</c:when>
+													<c:otherwise>
+														<span class="text-bg-danger badge ms-3" style="width: 40px;">
+															<i class="fa fa-times" style="font-size: 22px"></i>
+														</span>
+													</c:otherwise>
+												</c:choose>
+											</c:if>
+										</c:forEach>
+									</c:if>
+			
+									<!-- display student selection --> 
+									<c:forEach var="attemptEntry" items="${mcGeneralLearnerFlowDTO.attemptMap}">
+										<c:if test="${requestScope.mainQueIndex == attemptEntry.key}">
+											<div class="col">
+												<c:out value="${attemptEntry.value.qbOption.name}" escapeXml="false" />
+											</div>
+										</c:if>
+									</c:forEach>
+								</div>
 											
-											<c:if test="${sessionMap.content.enableConfidenceLevels}">
-												<tr>
-													<td
-														<c:if test="${mcGeneralLearnerFlowDTO.displayAnswers == 'true'}">colspan="2"</c:if>
+								<c:if test="${sessionMap.content.enableConfidenceLevels}">
+													
+									<div class="bootstrap-slider mt-3">
+										<div class="card-subheader">
+											<label for="confidenceLevel${queIndex}">
+												<fmt:message key="label.what.is.your.confidence.level" />
+											</label>
+										</div>
+										
+										<div>
+											<c:forEach var="attemptEntry" items="${mcGeneralLearnerFlowDTO.attemptMap}">
+												<c:if test="${requestScope.mainQueIndex == attemptEntry.key}">
+													<input type="range" name="confidenceLevel${queIndex}" id="confidenceLevel${queIndex}" 
+														list="slider-step-list-${queIndex}" 
+														min="0" max="10" step="5" disabled
+														<c:if test="${attemptEntry.value.confidenceLevel != -1}">value="${attemptEntry.value.confidenceLevel}"</c:if>
 													>
-														<div class="question-type">
-															<fmt:message key="label.what.is.your.confidence.level" />
-														</div>
-														
-														<div class="ms-2">
-															<c:forEach var="attemptEntry" items="${mcGeneralLearnerFlowDTO.attemptMap}">
-																<c:if test="${requestScope.mainQueIndex == attemptEntry.key}">
-																	<input class="bootstrap-slider" type="text" 
-																		data-slider-ticks="[0, 5, 10]" data-slider-ticks-labels='["0", "50", "100%"]' 
-																		data-slider-enabled="false" data-slider-tooltip="hide"
-																		<c:if test="${attemptEntry.value.confidenceLevel != -1}">data-slider-value="${attemptEntry.value.confidenceLevel}"</c:if>
-																	/>
-																</c:if>
-															</c:forEach>
-														</div>
-													</td>
-												</tr>
-											</c:if>
-										</table>
+													<datalist id="slider-step-list-${queIndex}">
+														<option value="0" label="0%"/>
+														<option value="5" label="50%"/>
+														<option value="10" label="100%"/>
+													</datalist>
+												</c:if>
+											</c:forEach>
+										</div>
 									</div>
 								</c:if>
-							</c:forEach>
+							</div>
+						</c:if>
+					</c:forEach>
 
-							<!-- answer feedback -->
-							<c:if test="${mcGeneralLearnerFlowDTO.displayAnswers == 'true' || mcGeneralLearnerFlowDTO.displayFeedbackOnly == 'true'}">
-								<c:forEach var="feedbackEntry" items="${mcGeneralLearnerFlowDTO.mapFeedbackContent}">
-									<c:if test="${(requestScope.mainQueIndex == feedbackEntry.key)
-                                          && (feedbackEntry.value != null) && (feedbackEntry.value != '')}">
-
-										<div class="panel panel-default">
-											<div class="panel-heading">
-												<h4 class="panel-title">
-													<fmt:message key="label.feedback.simple" />
-												</h4>
-											</div>
-											<div class="panel-body">
-												<c:out value="${feedbackEntry.value}" escapeXml="false" />
-											</div>
-										</div>
-
-									</c:if>
-								</c:forEach>
+					<!-- answer feedback -->
+					<c:if test="${mcGeneralLearnerFlowDTO.displayAnswers == 'true' || mcGeneralLearnerFlowDTO.displayFeedbackOnly == 'true'}">
+						<c:forEach var="feedbackEntry" items="${mcGeneralLearnerFlowDTO.mapFeedbackContent}">
+							<c:if test="${(requestScope.mainQueIndex == feedbackEntry.key)
+                    		        && (feedbackEntry.value != null) && (feedbackEntry.value != '')}">
+								<div class="card-subheader">
+									<fmt:message key="label.feedback.simple" />
+								</div>
+								
+								<div>
+									<c:out value="${feedbackEntry.value}" escapeXml="false" />
+								</div>
 							</c:if>
-							<!-- end answer feedback -->
-						</div>
-					</div>
+						</c:forEach>
+					</c:if>
 				</div>
 			</div>
 		</c:forEach>
-		<!-- end page panel -->
 
-		<!-- END QUESTION  -->
-		
-		<c:if test="${(mcGeneralLearnerFlowDTO.retries == 'true') && hasEditRight || (mcGeneralLearnerFlowDTO.displayAnswers == 'true')}">
-			<p>
-				<strong><fmt:message key="label.mark" /> </strong>
-				<c:out value="${mcGeneralLearnerFlowDTO.learnerMark}" />
-				&nbsp;<fmt:message key="label.outof" />&nbsp;
-				<c:out value="${mcGeneralLearnerFlowDTO.totalMarksPossible}" />
-			</p>
-		</c:if>
-
 		<c:if test="${mcGeneralLearnerFlowDTO.showMarks == 'true'}">
 			<h4>
 				<fmt:message key="label.group.results" />
 			</h4>
 
-			<table class="table table-sm">
-				<tr>
-					<td class="table-active" width="30%"><fmt:message key="label.topMark" /></td>
-					<td><c:out value="${mcGeneralLearnerFlowDTO.topMark}" /></td>
-				</tr>
+			<div class="ltable table-sm">
+				<div class="row">
+					<div class="col table-active"><fmt:message key="label.topMark" /></div>
+					<div class="col-10"><c:out value="${mcGeneralLearnerFlowDTO.topMark}" /></div>
+				</div>
 
-				<tr>
-					<td class="table-active"><fmt:message key="label.avMark" /></td>
-					<td><c:out value="${mcGeneralLearnerFlowDTO.averageMark}" /></td>
-				</tr>
-			</table>
+				<div class="row">
+					<div class="table-active col"><fmt:message key="label.avMark" /></div>
+					<div class="col-10"><c:out value="${mcGeneralLearnerFlowDTO.averageMark}" /></div>
+				</div>
+			</div>
 		</c:if>
 
 		<c:if test="${mcGeneralLearnerFlowDTO.reflection && (notebookEntry != null) && hasEditRight}">
-			<div class="row g-0">
-				<div class="col-12">
-					<h4>
-						<fmt:message key="label.reflection" />
-					</h4>
-
-					<div class="panel panel-default">
-						<div class="panel-heading">
-							<h2 class="panel-title">
-								<lams:out value="${mcGeneralLearnerFlowDTO.reflectionSubject}" escapeHtml="true" />
-							</h2>
-						</div>
-						<div class="panel-body">
-
-							<c:choose>
-								<c:when test="${not empty mcGeneralLearnerFlowDTO.notebookEntry}">
-									<lams:out value="${mcGeneralLearnerFlowDTO.notebookEntry}" escapeHtml="true" />
-								</c:when>
-								<c:otherwise>
-									<em><fmt:message key="message.no.reflection.available" /></em>
-								</c:otherwise>
-							</c:choose>
-						</div>
-					</div>
-				</div>
-			</div>
+			<lams:NotebookReedit
+				reflectInstructions="${mcGeneralLearnerFlowDTO.reflectionSubject}"
+				reflectEntry="${mcGeneralLearnerFlowDTO.notebookEntry}"
+				isEditButtonEnabled="false"
+				notebookHeaderLabelKey="label.reflection"/>				
 		</c:if>
 
 		<!--  now really start the form -->
-		<div class="mb-3">
-				<form:hidden path="toolContentID" />
-				<form:hidden path="toolSessionID" />
-				<form:hidden path="httpSessionID" />
-				<form:hidden path="userID" />
-				<form:hidden path="userOverPassMark" />
-				<form:hidden path="passMarkApplicable" />
+		<div class="activity-bottom-buttons">
+			<form:hidden path="toolContentID" />
+			<form:hidden path="toolSessionID" />
+			<form:hidden path="httpSessionID" />
+			<form:hidden path="userID" />
+			<form:hidden path="userOverPassMark" />
+			<form:hidden path="passMarkApplicable" />
+				
+			<c:if test="${(mcGeneralLearnerFlowDTO.retries != 'true') 
+					|| (mcGeneralLearnerFlowDTO.retries == 'true') && (mcGeneralLearnerFlowDTO.passMarkApplicable == 'true') && (mcGeneralLearnerFlowDTO.userOverPassMark == 'true')}">
+				<c:if test="${(mcGeneralLearnerFlowDTO.reflection != 'true') || !hasEditRight}">
+					<form:hidden path="learnerFinished" value="Finished" />
 
-				<c:if test="${(mcGeneralLearnerFlowDTO.retries == 'true') && hasEditRight}">
-					<input type="submit" name="redoQuestions" class="btn btn-primary float-start" value="<fmt:message key="label.redo.questions" />"/>
+					<button type="button" class="btn btn-primary na" id="finishButton">
+						<c:choose>
+							<c:when test="${isLastActivity}">
+								<fmt:message key="label.submit" />
+							</c:when>
+							<c:otherwise>
+								<fmt:message key="label.finished" />
+							</c:otherwise>
+						</c:choose>
+					</button>
 				</c:if>
-				
-				<c:if test="${(mcGeneralLearnerFlowDTO.retries != 'true') 
-						|| (mcGeneralLearnerFlowDTO.retries == 'true') && (mcGeneralLearnerFlowDTO.passMarkApplicable == 'true') && (mcGeneralLearnerFlowDTO.userOverPassMark == 'true')}">
-					<div class="mt-2">
-						<c:if test="${(mcGeneralLearnerFlowDTO.reflection != 'true') || !hasEditRight}">
-							<form:hidden path="learnerFinished" value="Finished" />
 
-							<a href="#nogo" class="btn btn-primary float-end na" id="finishButton">
-								<c:choose>
-									<c:when test="${isLastActivity}">
-										<fmt:message key="label.submit" />
-									</c:when>
-									<c:otherwise>
-										<fmt:message key="label.finished" />
-									</c:otherwise>
-								</c:choose>
-							</a>
-						</c:if>
-
-						<c:if test="${(mcGeneralLearnerFlowDTO.reflection == 'true') && hasEditRight}">
-							<input type="submit" name="forwardtoReflection" class="btn btn-primary float-end" value="<fmt:message key="label.continue" />"/>
-						</c:if>
-					</div>
+				<c:if test="${(mcGeneralLearnerFlowDTO.reflection == 'true') && hasEditRight}">
+					<button type="submit" name="forwardtoReflection" class="btn btn-primary na">
+						<fmt:message key="label.continue" />
+					</button>
 				</c:if>
+			</c:if>
 
+			<c:if test="${(mcGeneralLearnerFlowDTO.retries == 'true') && hasEditRight}">
+				<button type="submit" name="redoQuestions" class="btn btn-secondary btn-icon-return me-2">
+					<fmt:message key="label.redo.questions" />
+				</button>
+			</c:if>
 		</div>
-		</lams:Page>
+		
 	</form:form>
-</body>
-</lams:html>
+	</div>
+</lams:PageLearner>