Add MCQAnswer message handling

Author: shirsho-12

src/utils/messageHandler.tsx

@@ -86,6 +86,25 @@ export class MessageHandler {
           break;
         }
 
+        case MessageTypeNames.MCQAnswer: {
+          const workspaceLocation = message.workspaceLocation;
+          const assessmentName = message.assessmentName;
+          const questionId = message.questionId;
+          const choiceIndex = message.choice;
+
+          console.log(
+            `MCQ Answer: ${assessmentName}, Question ID: ${questionId}, Choice Index: ${choiceIndex}`,
+          );
+          const msg = Messages.MCQAnswer(
+            workspaceLocation,
+            assessmentName,
+            questionId,
+            choiceIndex,
+          );
+          sendToFrontend(this.panel, msg);
+          break;
+        }
+
         case MessageTypeNames.NewEditor:
           this.activeEditor = await Editor.create(
             message.workspaceLocation,

src/webview/components/McqPanel.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import Messages, { sendToWebview } from "../../utils/messages";
+import Messages from "../../utils/messages";
 import { sendToFrontendWrapped } from "../../commands/showPanel";
 
 export interface McqData {
@@ -20,7 +20,6 @@ const McqPanel: React.FC<McqPanelProps> = ({ data, onAnswer }) => {
 
   return (
     <div style={{ padding: "1rem" }}>
-      <h3>{data.question}</h3>
       <ul style={{ listStyle: "none", paddingLeft: 0 }}>
         {data.choices.map((c, idx) => (
           <li key={idx} style={{ marginBottom: "0.5rem" }}>
@@ -29,10 +28,14 @@ const McqPanel: React.FC<McqPanelProps> = ({ data, onAnswer }) => {
                 type="radio"
                 name="mcq-choice"
                 value={idx}
+                data-choice={idx}
+                data-ws={data.workspaceLocation ?? "assessment"}
+                data-assessment={data.assessmentName}
+                data-qid={data.questionId}
                 checked={selected === idx}
                 onChange={() => {
                   setSelected(idx);
-                  const wsLoc = data.workspaceLocation ?? "assessment";
+                  onAnswer(idx);
                 }}
                 style={{ marginRight: "0.5rem" }}
               />
@@ -51,7 +54,18 @@ export const McqPanelWithLogging: React.FC<{ data: McqData }> = ({ data }) => (
   <McqPanel
     data={data}
     onAnswer={(choiceIndex) => {
-      console.log("Selected choice index:", choiceIndex);
+      const wsLoc = data.workspaceLocation ?? "assessment";
+      console.log(
+        `MCQ Answer: ${data.assessmentName}, Question ID: ${data.questionId}, Choice Index: ${choiceIndex}`,
+      );
+      sendToFrontendWrapped(
+        Messages.MCQAnswer(
+          wsLoc,
+          data.assessmentName,
+          data.questionId,
+          choiceIndex,
+        ),
+      );
     }}
   />
 );

src/webview/components/SourceAcademy.tsx

@@ -4,7 +4,7 @@
  */
 //
 import React, { useEffect } from "react";
-import { MessageType, MessageTypeNames } from "../../utils/messages";
+import Messages, { MessageType, MessageTypeNames } from "../../utils/messages";
 import { FRONTEND_ELEMENT_ID } from "../../constants";
 
 // This function is provided by vscode extension.
@@ -64,6 +64,43 @@ const SourceAcademy: React.FC = () => {
     };
   }, []);
 
+  useEffect(() => {
+    const handleChoiceChange = (e: Event) => {
+      const target = e.target as HTMLInputElement;
+      if (!target || target.name !== "mcq-choice") {
+        return;
+      }
+      const choice = parseInt(target.dataset.choice ?? "-1", 10);
+      const workspaceLocation = target.dataset.ws as any;
+      const assessmentName = target.dataset.assessment ?? "";
+      const questionId = parseInt(target.dataset.qid ?? "-1", 10);
+      if (
+        isNaN(choice) ||
+        isNaN(questionId) ||
+        !workspaceLocation ||
+        assessmentName === ""
+      ) {
+        return;
+      }
+      console.log("[Webview] MCQ choice selected", {
+        workspaceLocation,
+        assessmentName,
+        questionId,
+        choice,
+      });
+      const message = Messages.MCQAnswer(
+        workspaceLocation as any,
+        assessmentName,
+        questionId,
+        choice,
+      );
+      relayToExtension(message);
+    };
+
+    document.addEventListener("change", handleChoiceChange);
+    return () => document.removeEventListener("change", handleChoiceChange);
+  }, []);
+
   return <></>;
 };
 export default SourceAcademy;