From 53626d38da7e049661bb6b87edba740d7c4d57e9 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sun, 22 Jun 2025 07:43:34 +0200
Subject: [PATCH 1/6] Add question box

---
 .../organisation/courses/ModuleForm.tsx       | 162 ++++++++++++++++--
 1 file changed, 143 insertions(+), 19 deletions(-)

diff --git a/components/organisation/courses/ModuleForm.tsx b/components/organisation/courses/ModuleForm.tsx
index ef7b55c..271920a 100644
--- a/components/organisation/courses/ModuleForm.tsx
+++ b/components/organisation/courses/ModuleForm.tsx
@@ -10,6 +10,12 @@ interface Props {
   moduleId?: string;
 }
 
+interface Question {
+  question_text: string;
+  question_type: "multiple_choice" | "true_false";
+  options: { option_text: string; is_correct: boolean }[];
+}
+
 export default function ModuleForm({ mode, courseId, moduleId }: Props) {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
@@ -19,6 +25,14 @@ export default function ModuleForm({ mode, courseId, moduleId }: Props) {
   const [moduleType, setModuleType] =
     useState<ModuleDetailData["module_type"]>("pdf");
 
+  const [questions, setQuestions] = useState<Question[]>([
+    {
+      question_text: "",
+      question_type: "multiple_choice",
+      options: [{ option_text: "", is_correct: false }],
+    },
+  ]);
+
   useEffect(() => {
     async function fetchModuleDetails() {
       try {
@@ -162,23 +176,132 @@ export default function ModuleForm({ mode, courseId, moduleId }: Props) {
           <option value="quiz">Quiz</option>
         </select>
       </div>
-      <div>
-        <label className="block text-gray-700">Upload Material</label>{" "}
-        <input
-          key={moduleType}
-          type="file"
-          accept={
-            moduleType === "video"
-              ? "video/*"
-              : moduleType === "pdf"
-              ? "application/pdf"
-              : moduleType === "slide"
-              ? ".ppt,.pptx,application/pdf"
-              : undefined
-          }
-          onChange={(e) => setUploadFile(e.target.files?.[0] || null)}
-          required={mode === "create"}
-          className="
+      {moduleType === "quiz" ? (
+        <div>
+          <h3 className="text-gray-700">Quiz Questions</h3>
+          {questions.map((q, qi) => (
+            <div key={qi} className="mb-4 p-4 border rounded">
+              <input
+                type="text"
+                placeholder={`Question ${qi + 1}`}
+                value={q.question_text}
+                onChange={(e) => {
+                  const qs = [...questions];
+                  qs[qi].question_text = e.target.value;
+                  setQuestions(qs);
+                }}
+                className="w-full mb-2 p-2 border rounded"
+              />
+              <select
+                value={q.question_type}
+                onChange={(e) => {
+                  const qs = [...questions];
+                  qs[qi].question_type = e.target.value as any;
+                  setQuestions(qs);
+                }}
+                className="mb-2 p-2 border rounded"
+              >
+                <option value="multiple_choice">Multiple Choice</option>
+                <option value="true_false">True / False</option>
+              </select>
+              {q.options.map((opt, oi) => (
+                <div key={oi} className="flex items-center space-x-2 mb-1">
+                  <input
+                    type="text"
+                    placeholder={`Option ${oi + 1}`}
+                    value={opt.option_text}
+                    onChange={(e) => {
+                      const qs = [...questions];
+                      qs[qi].options[oi].option_text = e.target.value;
+                      setQuestions(qs);
+                    }}
+                    className="flex-1 p-2 border rounded"
+                  />
+                  <label className="flex items-center space-x-1">
+                    <input
+                      type="checkbox"
+                      checked={opt.is_correct}
+                      onChange={(e) => {
+                        const qs = [...questions];
+                        qs[qi].options[oi].is_correct = e.target.checked;
+                        setQuestions(qs);
+                      }}
+                    />
+                    <span>Correct</span>
+                  </label>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      const qs = [...questions];
+                      qs[qi].options.splice(oi, 1);
+                      setQuestions(qs);
+                    }}
+                    className="text-red-500"
+                  >
+                    ×
+                  </button>
+                </div>
+              ))}
+              <button
+                type="button"
+                onClick={() => {
+                  const qs = [...questions];
+                  qs[qi].options.push({ option_text: "", is_correct: false });
+                  setQuestions(qs);
+                }}
+                className="text-purple-600"
+              >
+                + Add Option
+              </button>
+              <hr className="my-2" />
+              <button
+                type="button"
+                onClick={() => {
+                  const qs = [...questions];
+                  qs.splice(qi, 1);
+                  setQuestions(qs);
+                }}
+                className="text-red-600"
+              >
+                Remove Question
+              </button>
+            </div>
+          ))}
+          <button
+            type="button"
+            onClick={() =>
+              setQuestions([
+                ...questions,
+                {
+                  question_text: "",
+                  question_type: "multiple_choice",
+                  options: [{ option_text: "", is_correct: false }],
+                },
+              ])
+            }
+            className="px-4 py-2 bg-green-500 text-white rounded"
+          >
+            + Add Question
+          </button>
+        </div>
+      ) : (
+        <div>
+          <label className="block text-gray-700">Upload Material</label>{" "}
+          <input
+            key={moduleType}
+            type="file"
+            accept={
+              moduleType === "video"
+                ? "video/*"
+                : moduleType === "pdf"
+                ? "application/pdf"
+                : moduleType === "slide"
+                ? ".ppt,.pptx,application/pdf"
+                : undefined
+            }
+            onChange={(e) => setUploadFile(e.target.files?.[0] || null)}
+            required={mode === "create"}
+            className="
       block w-full 
       mt-1 p-3 
       text-gray-600 bg-white 
@@ -197,8 +320,9 @@ export default function ModuleForm({ mode, courseId, moduleId }: Props) {
       file:font-semibold 
       hover:file:bg-purple-700
     "
-        />
-      </div>
+          />
+        </div>
+      )}
       <div className="space-x-4">
         {mode === "edit" && (
           <p className="mb-4 text-sm text-red-500">

From 6091bb77360ab396df1f5ab11731572013f16ef4 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sun, 22 Jun 2025 07:48:05 +0200
Subject: [PATCH 2/6] Add true or false questions

---
 .../organisation/courses/ModuleForm.tsx       | 121 ++++++++++++------
 1 file changed, 80 insertions(+), 41 deletions(-)

diff --git a/components/organisation/courses/ModuleForm.tsx b/components/organisation/courses/ModuleForm.tsx
index 271920a..3f8da46 100644
--- a/components/organisation/courses/ModuleForm.tsx
+++ b/components/organisation/courses/ModuleForm.tsx
@@ -204,55 +204,94 @@ export default function ModuleForm({ mode, courseId, moduleId }: Props) {
                 <option value="multiple_choice">Multiple Choice</option>
                 <option value="true_false">True / False</option>
               </select>
-              {q.options.map((opt, oi) => (
-                <div key={oi} className="flex items-center space-x-2 mb-1">
-                  <input
-                    type="text"
-                    placeholder={`Option ${oi + 1}`}
-                    value={opt.option_text}
-                    onChange={(e) => {
-                      const qs = [...questions];
-                      qs[qi].options[oi].option_text = e.target.value;
-                      setQuestions(qs);
-                    }}
-                    className="flex-1 p-2 border rounded"
-                  />
-                  <label className="flex items-center space-x-1">
-                    <input
-                      type="checkbox"
-                      checked={opt.is_correct}
-                      onChange={(e) => {
-                        const qs = [...questions];
-                        qs[qi].options[oi].is_correct = e.target.checked;
-                        setQuestions(qs);
-                      }}
-                    />
-                    <span>Correct</span>
-                  </label>
+              {q.question_type === "true_false" ? (
+                <div className="flex space-x-6 mb-2">
+                  {["True", "False"].map((label) => (
+                    <label key={label} className="flex items-center space-x-1">
+                      <input
+                        type="radio"
+                        name={`q-${qi}`} // groups the two radios per question
+                        checked={
+                          !!q.options.find(
+                            (opt) => opt.option_text === label && opt.is_correct
+                          )
+                        }
+                        onChange={() => {
+                          const qs = [...questions];
+                          // reset to exactly these two options, marking the chosen one correct
+                          qs[qi].options = [
+                            {
+                              option_text: "True",
+                              is_correct: label === "True",
+                            },
+                            {
+                              option_text: "False",
+                              is_correct: label === "False",
+                            },
+                          ];
+                          setQuestions(qs);
+                        }}
+                      />
+                      <span>{label}</span>
+                    </label>
+                  ))}
+                </div>
+              ) : (
+                <>
+                  {q.options.map((opt, oi) => (
+                    <div key={oi} className="flex items-center space-x-2 mb-1">
+                      <input
+                        type="text"
+                        placeholder={`Option ${oi + 1}`}
+                        value={opt.option_text}
+                        onChange={(e) => {
+                          const qs = [...questions];
+                          qs[qi].options[oi].option_text = e.target.value;
+                          setQuestions(qs);
+                        }}
+                        className="flex-1 p-2 border rounded"
+                      />
+                      <label className="flex items-center space-x-1">
+                        <input
+                          type="checkbox"
+                          checked={opt.is_correct}
+                          onChange={(e) => {
+                            const qs = [...questions];
+                            qs[qi].options[oi].is_correct = e.target.checked;
+                            setQuestions(qs);
+                          }}
+                        />
+                        <span>Correct</span>
+                      </label>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          const qs = [...questions];
+                          qs[qi].options.splice(oi, 1);
+                          setQuestions(qs);
+                        }}
+                        className="text-red-500"
+                      >
+                        ×
+                      </button>
+                    </div>
+                  ))}
                   <button
                     type="button"
                     onClick={() => {
                       const qs = [...questions];
-                      qs[qi].options.splice(oi, 1);
+                      qs[qi].options.push({
+                        option_text: "",
+                        is_correct: false,
+                      });
                       setQuestions(qs);
                     }}
-                    className="text-red-500"
+                    className="text-purple-600"
                   >
-                    ×
+                    + Add Option
                   </button>
-                </div>
-              ))}
-              <button
-                type="button"
-                onClick={() => {
-                  const qs = [...questions];
-                  qs[qi].options.push({ option_text: "", is_correct: false });
-                  setQuestions(qs);
-                }}
-                className="text-purple-600"
-              >
-                + Add Option
-              </button>
+                </>
+              )}
               <hr className="my-2" />
               <button
                 type="button"

From 263cf0a79d8d1492294011f3366c67becf87216f Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sun, 22 Jun 2025 07:48:27 +0200
Subject: [PATCH 3/6] Clean up code

---
 components/organisation/courses/ModuleForm.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/organisation/courses/ModuleForm.tsx b/components/organisation/courses/ModuleForm.tsx
index 3f8da46..aed12ce 100644
--- a/components/organisation/courses/ModuleForm.tsx
+++ b/components/organisation/courses/ModuleForm.tsx
@@ -210,7 +210,7 @@ export default function ModuleForm({ mode, courseId, moduleId }: Props) {
                     <label key={label} className="flex items-center space-x-1">
                       <input
                         type="radio"
-                        name={`q-${qi}`} // groups the two radios per question
+                        name={`q-${qi}`}
                         checked={
                           !!q.options.find(
                             (opt) => opt.option_text === label && opt.is_correct
@@ -218,7 +218,6 @@ export default function ModuleForm({ mode, courseId, moduleId }: Props) {
                         }
                         onChange={() => {
                           const qs = [...questions];
-                          // reset to exactly these two options, marking the chosen one correct
                           qs[qi].options = [
                             {
                               option_text: "True",

From 3c11061e9e19016b63094fedc065854edecb35d0 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sun, 22 Jun 2025 08:20:22 +0200
Subject: [PATCH 4/6] add quiz

---
 .../organisation/courses/ModuleForm.tsx       | 56 ++++++++++++++++---
 1 file changed, 47 insertions(+), 9 deletions(-)

diff --git a/components/organisation/courses/ModuleForm.tsx b/components/organisation/courses/ModuleForm.tsx
index aed12ce..ded3ed5 100644
--- a/components/organisation/courses/ModuleForm.tsx
+++ b/components/organisation/courses/ModuleForm.tsx
@@ -25,13 +25,7 @@ export default function ModuleForm({ mode, courseId, moduleId }: Props) {
   const [moduleType, setModuleType] =
     useState<ModuleDetailData["module_type"]>("pdf");
 
-  const [questions, setQuestions] = useState<Question[]>([
-    {
-      question_text: "",
-      question_type: "multiple_choice",
-      options: [{ option_text: "", is_correct: false }],
-    },
-  ]);
+  const [questions, setQuestions] = useState<Question[]>([]);
 
   useEffect(() => {
     async function fetchModuleDetails() {
@@ -72,7 +66,48 @@ export default function ModuleForm({ mode, courseId, moduleId }: Props) {
       fd.append("name", name);
       fd.append("description", description);
       fd.append("type", moduleType);
-      if (uploadFile) {
+      if (moduleType === "quiz") {
+        if (questions.length === 0) {
+          alert("Please add at least one question.");
+          return;
+        }
+        for (let i = 0; i < questions.length; i++) {
+          const q = questions[i];
+          if (!q.question_text.trim()) {
+            alert(`Question ${i + 1} is empty. Please enter question text.`);
+            return;
+          }
+          if (q.question_type === "multiple_choice") {
+            if (q.options.length === 0) {
+              alert(`Question ${i + 1} must have at least one option.`);
+              return;
+            }
+            if (q.options.some((opt) => !opt.option_text.trim())) {
+              alert(`All options for question ${i + 1} must have text.`);
+              return;
+            }
+            if (!q.options.some((opt) => opt.is_correct)) {
+              alert(
+                `Please mark at least one correct answer for question ${i + 1}.`
+              );
+              return;
+            }
+          } else if (q.question_type === "true_false") {
+            const correctCount = q.options.filter(
+              (opt) => opt.is_correct
+            ).length;
+            if (correctCount !== 1) {
+              alert(
+                `Please mark the correct answer for question ${
+                  i + 1
+                } as either True or False.`
+              );
+              return;
+            }
+          }
+        }
+        fd.append("questions", JSON.stringify(questions));
+      } else if (uploadFile) {
         fd.append("file", uploadFile);
       }
       try {
@@ -118,7 +153,10 @@ export default function ModuleForm({ mode, courseId, moduleId }: Props) {
       fd.append("moduleId", moduleId || "");
       fd.append("name", name);
       fd.append("description", description);
-      if (uploadFile) {
+      if (moduleType === "quiz") {
+        fd.append("type", moduleType);
+        fd.append("questions", JSON.stringify(questions));
+      } else if (uploadFile) {
         fd.append("type", moduleType);
         fd.append("file", uploadFile);
       }

From 9e9bc19299d1c628074a9e69bd1cbc12f74b5f18 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sun, 22 Jun 2025 08:56:06 +0200
Subject: [PATCH 5/6] add check editing quiz

---
 .../organisation/courses/ModuleForm.tsx       | 37 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/components/organisation/courses/ModuleForm.tsx b/components/organisation/courses/ModuleForm.tsx
index ded3ed5..713c827 100644
--- a/components/organisation/courses/ModuleForm.tsx
+++ b/components/organisation/courses/ModuleForm.tsx
@@ -153,7 +153,42 @@ export default function ModuleForm({ mode, courseId, moduleId }: Props) {
       fd.append("moduleId", moduleId || "");
       fd.append("name", name);
       fd.append("description", description);
-      if (moduleType === "quiz") {
+      if (moduleType === "quiz" && questions.length > 0) {
+        for (let i = 0; i < questions.length; i++) {
+          const q = questions[i];
+          if (!q.question_text.trim()) {
+            alert(`Question ${i + 1} is empty. Please enter question text.`);
+            return;
+          }
+          if (q.question_type === "multiple_choice") {
+            if (q.options.length === 0) {
+              alert(`Question ${i + 1} must have at least one option.`);
+              return;
+            }
+            if (q.options.some((opt) => !opt.option_text.trim())) {
+              alert(`All options for question ${i + 1} must have text.`);
+              return;
+            }
+            if (!q.options.some((opt) => opt.is_correct)) {
+              alert(
+                `Please mark at least one correct answer for question ${i + 1}.`
+              );
+              return;
+            }
+          } else if (q.question_type === "true_false") {
+            const correctCount = q.options.filter(
+              (opt) => opt.is_correct
+            ).length;
+            if (correctCount !== 1) {
+              alert(
+                `Please mark the correct answer for question ${
+                  i + 1
+                } as either True or False.`
+              );
+              return;
+            }
+          }
+        }
         fd.append("type", moduleType);
         fd.append("questions", JSON.stringify(questions));
       } else if (uploadFile) {

From 572728f6faa7b5a31f15f03e56f2a8bcfd99e16f Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sun, 22 Jun 2025 08:56:12 +0200
Subject: [PATCH 6/6] Display quiz

---
 .../organisation/courses/ModuleDetail.tsx     | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/components/organisation/courses/ModuleDetail.tsx b/components/organisation/courses/ModuleDetail.tsx
index 7b16fb6..8a05588 100644
--- a/components/organisation/courses/ModuleDetail.tsx
+++ b/components/organisation/courses/ModuleDetail.tsx
@@ -78,12 +78,22 @@ export default function ModuleDetail({ moduleId }: Props) {
               <p className="font-medium">{q.question_text}</p>
               {q.options?.map((opt) => (
                 <div key={opt.id} className="flex items-center space-x-2">
-                  <input
-                    type="radio"
-                    name={`q-${q.id}`}
-                    disabled
-                    className="border-gray-300"
-                  />
+                  {q.question_type === "multiple_choice" && (
+                    <input
+                      type="checkbox"
+                      name={`q-${q.id}`}
+                      disabled
+                      className="border-gray-300"
+                    />
+                  )}
+                  {q.question_type === "true_false" && (
+                    <input
+                      type="radio"
+                      name={`q-${q.id}`}
+                      disabled
+                      className="border-gray-300"
+                    />
+                  )}
                   <label>{opt.option_text}</label>
                 </div>
               ))}