From 4750dfb5defc33754fcd7b3502429682b2ec633c Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Wed, 25 Dec 2024 07:29:26 +0700
Subject: [PATCH] fix(client): multiple choice question feedback display
 (#57740)

---
 .../components/multiple-choice-questions.tsx        | 13 +++++++------
 client/src/templates/Challenges/video.css           |  1 +
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/client/src/templates/Challenges/components/multiple-choice-questions.tsx b/client/src/templates/Challenges/components/multiple-choice-questions.tsx
index 34050ffd78b..688dc1bb977 100644
--- a/client/src/templates/Challenges/components/multiple-choice-questions.tsx
+++ b/client/src/templates/Challenges/components/multiple-choice-questions.tsx
@@ -83,12 +83,13 @@ function MultipleChoiceQuestions({
                     <div
                       className={`video-quiz-option-label mcq-feedback ${isCorrect ? 'mcq-correct' : 'mcq-incorrect'}`}
                     >
-                      {isCorrect
-                        ? t('learn.quiz.correct-answer')
-                        : t('learn.quiz.incorrect-answer')}
+                      <p>
+                        {isCorrect
+                          ? t('learn.quiz.correct-answer')
+                          : t('learn.quiz.incorrect-answer')}
+                      </p>
                       {feedback && (
-                        <>
-                          <span>&nbsp;</span>
+                        <p>
                           <PrismFormatted
                             className={
                               isCorrect
@@ -99,7 +100,7 @@ function MultipleChoiceQuestions({
                             useSpan
                             noAria
                           />
-                        </>
+                        </p>
                       )}
                     </div>
                   )}
diff --git a/client/src/templates/Challenges/video.css b/client/src/templates/Challenges/video.css
index ede2677cc31..c1b8e598957 100644
--- a/client/src/templates/Challenges/video.css
+++ b/client/src/templates/Challenges/video.css
@@ -139,6 +139,7 @@ input:focus-visible + .video-quiz-input-visible {
 
 .mcq-feedback {
   border-top: none;
+  display: block;
 }
 
 .mcq-prism-correct code {