Index: lams_tool_laqa/web/learning/SequentialAnswersContent.jsp
===================================================================
diff -u -rf27fea8eb6533208beffced8d55e3544857577e8 -r2f6e8f9ecfee5b8078479721374d0cbeee3d699d
--- lams_tool_laqa/web/learning/SequentialAnswersContent.jsp	(.../SequentialAnswersContent.jsp)	(revision f27fea8eb6533208beffced8d55e3544857577e8)
+++ lams_tool_laqa/web/learning/SequentialAnswersContent.jsp	(.../SequentialAnswersContent.jsp)	(revision 2f6e8f9ecfee5b8078479721374d0cbeee3d699d)
@@ -7,59 +7,59 @@
 <c:forEach var="questionEntry" items="${generalLearnerFlowDTO.mapQuestionContentLearner}">
 
 	<c:if test="${questionEntry.key == generalLearnerFlowDTO.currentQuestionIndex}">
+		
+		<div class="card lcard lcard-no-borders shadow my-4" id="question<c:out value='${questionEntry.key}' />" aria-label="question">
+			<div class="card-header lcard-header lcard-header-button-border">
+				<div class="card-title">
+					<c:if test="${generalLearnerFlowDTO.mapQuestionContentLearner.size() != 1}"><c:out value="${questionEntry.key}" />.&nbsp;</c:if> <c:out value="${questionEntry.value.name}" escapeXml="false" />
+				</div>
+			</div>
 
-		<div class="row no-gutter">
-			<div class="col-xs-12">
-				<div class="panel panel-default">
-					<div class="panel-heading">
-						<div class="panel-title">
-							<c:if test="${generalLearnerFlowDTO.mapQuestionContentLearner.size() != 1}"><c:out value="${questionEntry.key}" />.&nbsp;</c:if> <c:out value="${questionEntry.value.name}" escapeXml="false" />
-						</div>
+			<div class="card-body">
+				<c:if test="${not empty questionEntry.value.description}">
+					<div class="" id="questionDescription">
+						<c:out value="${questionEntry.value.description}" escapeXml="false" />
 					</div>
+				</c:if>
+				
+				<div class="answer-req text-end">
+					<c:if test="${questionEntry.value.required}">
+						<span class="badge text-bg-danger"><fmt:message key="label.required" /></span>
+					</c:if>
+					<c:if test="${questionEntry.value.minWordsLimit != 0}">
+						<span class="badge text-bg-primary">
+							<fmt:message key="label.words.required" />&nbsp;<span id="words-required-"></span>
+						</span>				
+					</c:if>
+				</div>
 
-					<div class="panel-body">
-						<c:if test="${not empty questionEntry.value.description}">
-							<div class="panel">
-								<c:out value="${questionEntry.value.description}" escapeXml="false" />
-							</div>
-						</c:if>
-						
-						<div class="answer-req">
-							<c:if test="${questionEntry.value.required}">
-									<span class="label label-danger pull-right"><fmt:message key="label.required" /></span>
-							</c:if>
-							<c:if test="${questionEntry.value.minWordsLimit != 0}">
-								<button class="btn btn-xs btn-primary" type="button">
-									<strong><fmt:message key="label.words.required" />&nbsp;</strong><span id="words-required-" class="badge"></span>
-								</button>
-								<div class="voffset5">&nbsp;</div>
-							</c:if>
-						</div>
+				<div class="my-2" id="answerResponse">
+					<label id="yourAnswer" class="d-none"><fmt:message key="label.learning.yourAnswer" /></label>
+					<div data-sequence-id="${questionEntry.key}" data-is-ckeditor="${generalLearnerFlowDTO.allowRichEditor}"
+						data-min-words-limit="${questionEntry.value.minWordsLimit}"
+						<c:if test="${questionEntry.value.minWordsLimit != 0}">class="min-words-limit-enabled"</c:if>>
+						<c:set var="placeholder"><fmt:message key="label.learning.yourAnswer" />...</c:set>
+						<c:choose>
+							<c:when test="${generalLearnerFlowDTO.allowRichEditor}">
+								<lams:CKEditor id="answer" value="${generalLearnerFlowDTO.currentAnswer}"
+								 contentFolderID="${sessionMap.learnerContentFolder}" toolbarSet="DefaultLearner">
+								</lams:CKEditor>
+							</c:when>
 
-						<div data-sequence-id="${questionEntry.key}" data-is-ckeditor="${generalLearnerFlowDTO.allowRichEditor}"
-							data-min-words-limit="${questionEntry.value.minWordsLimit}"
-							<c:if test="${questionEntry.value.minWordsLimit != 0}">class="min-words-limit-enabled"</c:if>>
-							<c:set var="placeholder"><fmt:message key="label.learning.yourAnswer" />...</c:set>
-							<c:choose>
-								<c:when test="${generalLearnerFlowDTO.allowRichEditor}">
-									<lams:CKEditor id="answer" value="${generalLearnerFlowDTO.currentAnswer}"
-										contentFolderID="${sessionMap.learnerContentFolder}" toolbarSet="DefaultLearner">
-									</lams:CKEditor>
-								</c:when>
-
-								<c:otherwise>
-									<lams:textarea name="answer" id="answer" rows="5" placeholder="${placeholder}" class="form-control">
-										<c:out value='${generalLearnerFlowDTO.currentAnswer}' escapeXml='false' />
-									</lams:textarea>
-								</c:otherwise>
-							</c:choose>
-						</div>
-
-						<input type="hidden" name="currentQuestionIndex" value="${questionEntry.key}" />
+							<c:otherwise>
+								<lams:textarea name="answer" id="answer" rows="5" placeholder="${placeholder}" aria-labelledby="yourAnswer" class="form-control">
+									<c:out value='${generalLearnerFlowDTO.currentAnswer}' escapeXml='false' />
+								</lams:textarea>
+							</c:otherwise>
+						</c:choose>
 					</div>
+
+					<input type="hidden" name="currentQuestionIndex" value="${questionEntry.key}" />
 				</div>
 			</div>
 		</div>
+
+		
 	</c:if>
 </c:forEach>
 
@@ -69,24 +69,24 @@
 		<c:when test="${(generalLearnerFlowDTO.currentQuestionIndex == generalLearnerFlowDTO.totalQuestionCount) && 
 				  				  (generalLearnerFlowDTO.totalQuestionCount != 1) }">
 			<button id="btnGetPrevious" type="button" onclick="javascript:submitMethod('getPreviousQuestion');"
-				class="btn btn-sm btn-default voffset10">
+				class="btn btn-sm btn-primary mt-2">
 				<i class="fa fa-arrow-left"></i>
 				<fmt:message key="button.getPreviousQuestion" />
 			</button>
 
-			<div align="right-buttons">
+			<div class="activity-bottom-buttons">
 				<button id="btnDone" type="button" onclick="javascript:submitMethod('submitAnswersContent');"
-					class="btn btn-primary voffset10 pull-right">
+					class="btn btn-primary float-end mt-3">
 					<fmt:message key="button.done" />
 				</button>
 			</div>
 		</c:when>
 
 		<c:when test="${(generalLearnerFlowDTO.currentQuestionIndex == generalLearnerFlowDTO.totalQuestionCount) && 
 				  				  (generalLearnerFlowDTO.totalQuestionCount == 1) }">
-			<div align="right-buttons">
+			<div class="activity-bottom-buttons">
 				<button id="btnDone" type="button" onclick="javascript:submitMethod('submitAnswersContent');"
-					class="btn btn-primary pull-right voffset10">
+					class="btn btn-primary float-end mt-3">
 					<fmt:message key="button.done" />
 				</button>
 			</div>
@@ -95,20 +95,20 @@
 		<c:when test="${generalLearnerFlowDTO.currentQuestionIndex != generalLearnerFlowDTO.totalQuestionCount && 
 				 				  generalLearnerFlowDTO.currentQuestionIndex > 1}">
 			<button id="btnGetPrevious" type="button" onclick="javascript:submitMethod('getPreviousQuestion');"
-				class="btn btn-sm btn-default voffset10">
+				class="btn btn-sm btn-primary mt-2">
 				<i class="fa fa-arrow-left"></i>&nbsp;
 				<fmt:message key="button.getPreviousQuestion" />
 			</button>
 			<button id="btnGetNext" type="button" onclick="javascript:submitMethod('getNextQuestion');"
-				class="btn btn-sm btn-default voffset10 pull-right">
+				class="btn btn-sm btn-primary mt-2 float-end">
 				<fmt:message key="button.getNextQuestion" />
 				&nbsp; <i class="fa fa-arrow-right"></i>
 			</button>
 		</c:when>
 
 		<c:otherwise>
 			<button id="btnGetNext" type="button" onclick="javascript:submitMethod('getNextQuestion');"
-				class="btn btn-sm btn-default voffset10 pull-right">
+				class="btn btn-sm btn-primary mt-2 float-end">
 				<fmt:message key="button.getNextQuestion" />
 				&nbsp; <i class="fa fa-arrow-right"></i>
 			</button>