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>