-added new header (readingHeader)

packages/frontend/src/components/CountdownTimer.tsx

@@ -2,18 +2,18 @@ import React, { useState, useEffect } from 'react';
 
 interface Props {
   minutes: number; // Number of minutes for countdown
-  onTimeUp: () => void;
+
 }
 
-const CountdownTimer: React.FC<Props> = ({ minutes, onTimeUp }) => {
+const CountdownTimer: React.FC<Props> = ({ minutes }) => {
   const [remainingTime, setRemainingTime] = useState<number>(minutes * 60); // Convert minutes to seconds
 
   useEffect(() => {
     const timer = setInterval(() => {
       setRemainingTime(prevTime => {
         if (prevTime <= 0) {
           clearInterval(timer);
-          onTimeUp();
+
           return 0;
         } else {
           return prevTime - 1;
@@ -22,7 +22,7 @@ const CountdownTimer: React.FC<Props> = ({ minutes, onTimeUp }) => {
     }, 1000);
 
     return () => clearInterval(timer);
-  }, [minutes, onTimeUp]);
+  }, [minutes]);
 
   const formatTime = (time: number): string => {
     const minutes = Math.floor(time / 60);
@@ -36,7 +36,7 @@ const CountdownTimer: React.FC<Props> = ({ minutes, onTimeUp }) => {
 
   return (
     <div className="remaining-time">
-      Remaining Time: {formatTime(remainingTime)}
+      {formatTime(remainingTime)} min
     </div>
   );
 };

packages/frontend/src/components/Reading/DiagramCompletionQuestionComponent.tsx

@@ -39,6 +39,7 @@ export const DiagramCompletionQuestionComponent = ({
               handleInputChange(subQuestionIndex, partIndex, e.target.value)
             }
             placeholder="answer"
+            className="lr-input"
           />
         )}
       </React.Fragment>

packages/frontend/src/components/Reading/ListSelectionQuestionComponent.tsx

@@ -28,8 +28,9 @@ export const ListSelectionQuestionComponent = ({
         <select
           value={answer[index]}
           onChange={e => handleSelectionChange(index, e.target.value)}
+          className="lr-select"
         >
-          <option value="">Select an answer</option>
+          <option value="" >{index+1}</option>
           {question.SubQuestions[index].Choices.map((choice, choiceIndex) => (
             <option key={choiceIndex} value={choice}>
               {choice}
@@ -45,10 +46,11 @@ export const ListSelectionQuestionComponent = ({
     <div>
       <p>{question.Question}</p>
       <h4>{question.ListTitle}</h4>
-      <p className="whitespace-pre-line">{question.List}</p>
+      <p className="whitespace-pre-line mb-2" >{question.List}</p>
       <ul>
         {question.SubQuestions.map((subQuestion, index) => (
-          <li key={index}>
+          <li key={index} className="mb-4">
+             <span className="font-semibold"> {index + 1}. </span> 
             {renderQuestionTextWithSelects(subQuestion.QuestionText, index)}
           </li>
         ))}

packages/frontend/src/components/Reading/McqQuestionsComponent.tsx

@@ -22,13 +22,14 @@ export const McqQuestionsComponent = ({
     <div>
       {choices.map((choice, choiceIndex) => (
         <div key={choiceIndex} style={{ marginBottom: '5px' }}>
-          <label>
+          <label className="cursor-pointer">
             <input
               type="radio"
               name={`question-${index}`}
               value={choice}
               checked={answer[index] === choice}
               onChange={e => handleSelectionChange(index, e.target.value)}
+              className="mr-2"
             />
             {choice}
           </label>
@@ -47,8 +48,9 @@ export const McqQuestionsComponent = ({
         <select
           value={answer[index]}
           onChange={e => handleSelectionChange(index, e.target.value)}
+          className="lr-select"
         >
-          <option value="">Select an answer</option>
+          <option value="">{index+1}</option>
           {question.SubQuestions[index].Choices.map((choice, choiceIndex) => (
             <option key={choiceIndex} value={choice}>
               {choice}
@@ -63,11 +65,15 @@ export const McqQuestionsComponent = ({
     <div>
       <p>{question.Question}</p>
       <ul>
+
         {question.SubQuestions.map((subQuestion, index) => (
-          <li key={index}>
+          <li key={index} className='mt-5'>
+
             {question.QuestionType === 'Multiple Choice' ? (
               <p>{subQuestion.QuestionText}</p> // Text for Multiple Choice
             ) : null}
+
+
             {question.QuestionType === 'Multiple Choice'
               ? renderRadioButtons(subQuestion.Choices, index)
               : renderQuestionTextWithSelects(subQuestion.QuestionText, index)}

packages/frontend/src/components/Reading/MultipleAnswersQuestionComponent.tsx

@@ -49,11 +49,12 @@ export const MultipleAnswersQuestionComponent = ({
             <p>{subQuestion.QuestionText}</p>
             {subQuestion.Choices.map((choice, choiceIndex) => (
               <div key={choiceIndex}>
-                <label>
+                <label className="cursor-pointer">
                   <input
                     type="checkbox"
                     checked={answer[subIndex].includes(choice)}
                     onChange={() => handleCheckboxChange(subIndex, choice)}
+                    className="mr-2"
                   />
                   {choice}
                 </label>

packages/frontend/src/components/Reading/PassageComponent.tsx

@@ -9,9 +9,9 @@ export const PassageComponent = ({
 }) => {
   return (
     <div>
-      <h1>Part {PartIndex}</h1>
-      <h1>{readingPart.PassageTitle}</h1>
-      <p style={{ whiteSpace: 'pre-line' }}>{readingPart.Passage}</p>
+      <h1 className="text-2xl text-blue-4  mb-7">Part {PartIndex}</h1>
+      <h1 className='text-2xl text-blue-4 font-bold mb-7'>{readingPart.PassageTitle}</h1>
+      <p style={{ whiteSpace: 'pre-line' }} className='text-justify'>{readingPart.Passage}</p>
     </div>
   );
 };

packages/frontend/src/components/Reading/QuestionsComponent.tsx

@@ -32,7 +32,7 @@ export const QuestionsComponent = ({
     <>
       {questions.map((question, index) => (
         <div key={index} className="mb-10">
-          <p>
+          <p className='mb-3'>
             Question {index + 1}, {question.QuestionType}:
           </p>
           {renderQuestionComponent(

packages/frontend/src/components/Reading/ReadingHeader.tsx

@@ -0,0 +1,23 @@
+
+import CountdownTimer from '../CountdownTimer'; // Assuming CountdownTimer is the name of your countdown timer component
+
+interface ExamsHeaderProps {
+  duration: number; // Duration of the exam in minutes
+  section: string;
+}
+
+export default function Exams({ duration, section }: ExamsHeaderProps) {
+
+
+  return (
+    <div className='bg-blue-4 flex justify-between items-center'>
+      <div>
+        <h2 className='text-1xl text-white  font-bold ml-5'>{section}</h2>
+      </div>  
+      <div >
+        <CountdownTimer minutes={duration}  />
+      </div>
+
+    </div>
+  );
+}

packages/frontend/src/components/Reading/SummaryCompletionQuestionComponent.tsx

@@ -31,15 +31,17 @@ export const SummaryCompletionQuestionComponent = ({
     const parts = text.split('-answer-');
     return parts.map((part, partIndex) => (
       <React.Fragment key={partIndex}>
-        {part}
+        <span className="leading-relaxed">{part}</span>
         {partIndex < parts.length - 1 && (
           <input
             type="text"
             value={answer[subQuestionIndex][partIndex]}
             onChange={e =>
               handleInputChange(subQuestionIndex, partIndex, e.target.value)
             }
-            placeholder="Type your answer here"
+            className="lr-input"
+            // className="border border-blue-4 px-2 rounded-md w-52 leading-tight"
+            // className="border border-blue-4 rounded-md leading-tight"
           />
         )}
       </React.Fragment>
@@ -52,7 +54,7 @@ export const SummaryCompletionQuestionComponent = ({
       <ul>
         {question.SubQuestions.map((subQuestion, index) => (
           <li key={index}>
-            <p>
+            <p className="text-justify mt-5">
               {renderQuestionTextWithInputs(subQuestion.QuestionText, index)}
             </p>
           </li>

packages/frontend/src/components/Reading/TableCompletionQuestionComponent.tsx

@@ -34,6 +34,7 @@ export const TableCompletionQuestionComponent = ({
             type="text"
             value={answer[rowIndex][index] || ''} // Bind input value to state
             onChange={event => handleInputChange(event, rowIndex, index)} // Handle input change
+            className="lr-input"
           />
         </React.Fragment>
       );

packages/frontend/src/index.css

@@ -17,6 +17,14 @@
     max-width: 1440px;
     margin: 0 auto;
   }
+
+  .lr-input {
+    @apply border bg-gray-200 px-2 rounded-md w-48 leading-tight outline-blue-3 outline-1 outline-offset-2;
+  }
+
+  .lr-select {
+    @apply bg-gray-200 rounded-md text-center py-1 px-4 h-7  outline-blue-3 outline-1 outline-offset-1;
+  }
 }
 
 @layer utilities {
@@ -56,7 +64,8 @@
 .progress-ring__circle {
   transition: stroke-dashoffset 0.35s;
   transform: rotate(-90deg);
-  transform-origin: 50% 50%;}
+  transform-origin: 50% 50%;
+}
 /* Customize scrollbar */
 ::-webkit-scrollbar {
   width: 12px; /* Width of the scrollbar */