Quiz page

components/Navbar.tsx

@@ -1,7 +1,6 @@
 "use client";
 import Link from "next/link";
 import { FC } from "react";
-import { useCourseContext } from "../context/courseContext";
 import { Course, CourseList, User } from "@/lib/types";
 
 import { UserNav } from "./user-nav";
@@ -13,7 +12,8 @@ type NavbarProps = {
 };
 
 const Navbar: FC<NavbarProps> = ({ courseList }) => {
-  const { currentCourse, setCurrentCourse } = useCourseContext();
+  const router = useRouter();
+  const { courseName } = router.query;
 
   const pathName = useRouter();
 
@@ -34,20 +34,18 @@ const Navbar: FC<NavbarProps> = ({ courseList }) => {
           className={`p-4 block ${
             isActive("dashboard") ? "bg-sidebarColor" : "hover:bg-sidebarColor"
           }`}
-          onClick={() => setCurrentCourse("")}
         >
           Dashboard
         </Link>
         {courseList.map((course: Course) => (
           <Link
             key={course.id}
-            href={`/${course.name || currentCourse}`}
+            href={`/${course.name || courseName}`}
             className={`p-4 block ${
               isActive(`${course.name}`)
                 ? "bg-sidebarColor"
                 : "hover:bg-sidebarColor"
             }`}
-            onClick={() => setCurrentCourse(course.name)}
           >
             {course.name}
           </Link>

components/NavbarLayout.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import Sidebar from "./Sidebar";
+import Navbar from "./Navbar";
+import { CourseList } from "@/lib/types";
+
+const NavbarLayout = ({
+  children,
+  courseList,
+}: {
+  children: React.ReactNode;
+  courseList: CourseList;
+}) => {
+  return (
+    <>
+      <Navbar courseList={courseList} />
+      {children}
+    </>
+  );
+};
+
+export default NavbarLayout;

components/QuizEditor.tsx

@@ -27,8 +27,8 @@ const QuizEditor: React.FC<quizQuestionsProps> = ({
     questionType: "MCQ",
     question: "",
     options: ["", "", "", ""], // Assuming a default of 4 options
-    answer: 1, // Assuming no answer selected by default
-    points: 10, // Default points value
+    answer: 0, // Assuming no answer selected by default
+    points: 0, // Default points value
   };
 
   const defaultFRQQuestion: QuizQuestion = {
@@ -37,7 +37,7 @@ const QuizEditor: React.FC<quizQuestionsProps> = ({
     question: "",
     options: [],
     answer: "",
-    points: 80, // Default points value for FRQ
+    points: 0, // Default points value for FRQ
   };
 
   // Function to add a new MCQ question
@@ -60,10 +60,6 @@ const QuizEditor: React.FC<quizQuestionsProps> = ({
     );
   };
 
-  const deleteQuestion = (questionNum: number) => {
-    setQuestions(questions.filter((q) => q.questionNum !== questionNum));
-  };
-
   // Function to handle reordering the question numbers after deletion
   const reorderQuestions = (questions: QuizQuestion[]) => {
     return questions.map((q, index) => ({
@@ -86,6 +82,24 @@ const QuizEditor: React.FC<quizQuestionsProps> = ({
     setQuestions(updatedQuestions);
   };
 
+  const handlePointsChange = (index: number, newPoints: string) => {
+    const updatedQuestions = [...questions];
+    updatedQuestions[index].points = parseInt(newPoints, 10) || 0;
+    setQuestions(updatedQuestions);
+  };
+
+  const handleAnswerChange = (
+    index: number,
+    newAnswer: string,
+    isMCQ: boolean
+  ) => {
+    const updatedQuestions = [...questions];
+    updatedQuestions[index].answer = isMCQ
+      ? updatedQuestions[index].options.indexOf(newAnswer) + 1
+      : newAnswer;
+    setQuestions(updatedQuestions);
+  };
+
   const handleOptionChange = (
     questionIndex: number,
     optionIndex: number,
@@ -111,9 +125,10 @@ const QuizEditor: React.FC<quizQuestionsProps> = ({
   const handleSubmit = () => {
     /*
     1. Need a popup to make sure the Ta finished editing.
-    2. update the quesitons
+    2. update the quesitons using api
     3. back to the previous page
     */
+    console.log(questions);
   };
 
   return (
@@ -125,21 +140,40 @@ const QuizEditor: React.FC<quizQuestionsProps> = ({
               className="flex flex-col rounded-md border m-5 p-4 "
               key={q.questionNum}
             >
-              {q.questionNum}.
-              <Input
-                value={q.question}
-                onChange={(e) => handleQuestionChange(qIndex, e.target.value)}
-                placeholder="Type your question here."
-              />
-              {q.questionType == "MCQ" && (
-                <>
+              <div className="flex flex-row p-2 items-center gap-2">
+                {q.questionNum}.
+                <Input
+                  value={q.question}
+                  onChange={(e) => handleQuestionChange(qIndex, e.target.value)}
+                  placeholder="Type your question here."
+                />
+              </div>
+              <div className="flex flex-row p-2 items-center gap-2">
+                points:
+                <Input
+                  className="w-16 h-8 p-2"
+                  type="number"
+                  value={q.points}
+                  onChange={(e) => handlePointsChange(qIndex, e.target.value)}
+                  placeholder="0"
+                />
+              </div>
+
+              {q.questionType == "MCQ" && typeof q.answer === "number" ? (
+                <RadioGroup
+                  defaultValue={q.options[q.answer]}
+                  onValueChange={(e) => handleAnswerChange(qIndex, e, true)}
+                >
                   {q.options.map((option, oIndex) => (
                     <div
                       className="flex items-center space-x-2 p-2"
                       key={`option-${q.questionNum}-${oIndex}`}
                     >
+                      <RadioGroupItem value={option} />
+                      {/* <Label htmlFor="option">{option}</Label> */}
                       <Input
                         value={option}
+                        placeholder={`Option ${oIndex + 1}`}
                         onChange={(e) =>
                           handleOptionChange(qIndex, oIndex, e.target.value)
                         }
@@ -160,19 +194,32 @@ const QuizEditor: React.FC<quizQuestionsProps> = ({
                       +
                     </Button>
                   </div>
-                </>
+                </RadioGroup>
+              ) : (
+                <Textarea
+                  value={q.answer}
+                  onChange={(e) =>
+                    handleAnswerChange(qIndex, e.target.value, false)
+                  }
+                  placeholder="Type the FRQ answer here."
+                />
               )}
+
               <Button
-                className="w-30 h-8 p-2"
+                className="w-20 h-8 p-2 m-2"
                 onClick={() => handleDeleteQuestion(q.questionNum)}
               >
                 Delete
               </Button>
             </div>
           ))}
         </div>
-        <Button onClick={addMCQQuestion}>ADD MCQ</Button>
-        <Button onClick={addFRQQuestion}>ADD FRQ</Button>
+        <Button className="w-20 h-8 p-2 m-2" onClick={addMCQQuestion}>
+          ADD MCQ
+        </Button>
+        <Button className="w-20 h-8 p-2 m-2" onClick={addFRQQuestion}>
+          ADD FRQ
+        </Button>
       </ScrollArea>
       <Button onClick={handleSubmit}>submit</Button>
     </div>

components/Sidebar.tsx

@@ -5,7 +5,6 @@ import { useCourseContext } from "../context/courseContext";
 import { useRouter } from "next/router";
 
 const Sidebar: FC = () => {
-  const { currentCourse, setCurrentCourse } = useCourseContext();
   const [tabList, setTableList] = useState([
     "Home",
     "Assignments",
@@ -14,7 +13,7 @@ const Sidebar: FC = () => {
     "Files",
   ]);
   const router = useRouter();
-
+  const { courseName } = router.query;
   const isActive = (it: string) => {
     // If the item is 'Home', check against the base path ('/')
     const paramList = router.asPath.split("/");
@@ -24,40 +23,31 @@ const Sidebar: FC = () => {
     // Otherwise, compare against the lowercased item
     return paramList[2] === it.toLocaleLowerCase();
   };
-  useEffect(() => {
-    // If currentCourse is not set, redirect to the home page
-    if (!currentCourse) {
-      router.push("/");
-    }
-  }, [currentCourse, router]);
-
-  if (!currentCourse) {
-    return <div>Loading...</div>;
-  }
 
   return (
     <nav className="flex flex-col bg-sidebarColor text-white h-screen pl-3 pr-2">
       <div className="flex flex-col flex-grow">
         {/* Links */}
-        {tabList.map((it) => (
-          <Link
-            href={`/${currentCourse}${
-              it !== "Home" ? `/${it.toLocaleLowerCase()}` : ""
-            }`}
-            className={`p-4 block group border-l-4  ${
-              isActive(it) ? "border-l-4 border-white" : "border-sidebarColor"
-            }`}
-            key={it}
-          >
-            <span
-              className={`border-b-2 border-white group-hover:border-transparent ${
-                isActive(it) ? "border-b-transparent" : ""
+        {courseName &&
+          tabList.map((it) => (
+            <Link
+              href={`/${courseName}${
+                it !== "Home" ? `/${it.toLocaleLowerCase()}` : ""
+              }`}
+              className={`p-4 block group border-l-4  ${
+                isActive(it) ? "border-l-4 border-white" : "border-sidebarColor"
               }`}
+              key={it}
             >
-              {it}
-            </span>
-          </Link>
-        ))}
+              <span
+                className={`border-b-2 border-white group-hover:border-transparent ${
+                  isActive(it) ? "border-b-transparent" : ""
+                }`}
+              >
+                {it}
+              </span>
+            </Link>
+          ))}
       </div>
     </nav>
   );

components/SidebarLayout.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import Sidebar from "./Sidebar";
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      <Sidebar />
+      {children}
+    </>
+  );
+};
+
+export default Layout;