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-->