update exercise student views

src/roles/user/exercise/views/components/MatchingPairsQuestion.jsx

@@ -122,8 +122,13 @@ const MatchingPairsQuestion = ({ question, onAnswer, studentAnswer, index }) =>
 
       {mediaUrls.length > 0 && <MediaViewer mediaUrls={mediaUrls} />}
 
+      <p>{question.QUESTION.split('\n').map((line, index) => (
+          <React.Fragment key={index}>
+              {line}
+              <br />
+          </React.Fragment>
+      ))}</p>
       
-      <p>{question.QUESTION}</p>
       <div className="w-100 options-mp d-flex justify-content-between">
         {/* Bagian kiri */}
         <div>

src/roles/user/exercise/views/components/MultipleChoiceQuestion.jsx

@@ -26,7 +26,13 @@ const MultipleChoiceQuestion = ({ question, onAnswer, studentAnswer, index }) =>
     <div>
       {mediaUrls.length > 0 && <MediaViewer mediaUrls={mediaUrls} />}
 
-      <p>{question.QUESTION}</p>
+      <p>{question.QUESTION.split('\n').map((line, index) => (
+          <React.Fragment key={index}>
+              {line}
+              <br />
+          </React.Fragment>
+      ))}</p>
+      
       <div className="options">
         {['OPTION_A', 'OPTION_B', 'OPTION_C', 'OPTION_D', 'OPTION_E'].map(
           (optionKey) => {

src/roles/user/exercise/views/components/TrueFalseQuestion.jsx

@@ -19,7 +19,13 @@ const TrueFalseQuestion = ({ question, onAnswer, studentAnswer, index }) => {
     <div>
       {mediaUrls.length > 0 && <MediaViewer mediaUrls={mediaUrls} />}
 
-      <p>{question.QUESTION}</p>
+      <p>{question.QUESTION.split('\n').map((line, index) => (
+          <React.Fragment key={index}>
+              {line}
+              <br />
+          </React.Fragment>
+      ))}</p>
+      
       <div className="options-tf">
 
         <div