Support the options for Parsons problems in the new Assignment builder interface

bases/rsptx/assignment_server_api/assignment_builder/package.json

@@ -41,6 +41,7 @@
     "@tiptap/suggestion": "^2.11.5",
     "better-react-mathjax": "^2.1.0",
     "classnames": "^2.5.1",
+    "driver.js": "^1.4.0",
     "handsontable": "^14.2.0",
     "highlight.js": "^11.11.1",
     "html-react-parser": "^5.1.18",

bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ParsonsExercise/ParsonsExercise.tsx

@@ -1,4 +1,7 @@
-import React, { FC, useCallback } from "react";
+import React, { FC, useCallback, useState } from "react";
+
+import { SelectButton } from "primereact/selectbutton";
+import { confirmDialog, ConfirmDialog } from "primereact/confirmdialog";
 
 import { CreateExerciseFormType } from "@/types/exercises";
 import { createExerciseId } from "@/utils/exercise";
@@ -14,7 +17,21 @@ import { validateCommonFields } from "../../utils/validation";
 
 import { ParsonsExerciseSettings } from "./ParsonsExerciseSettings";
 import { ParsonsPreview } from "./ParsonsPreview";
-import { ParsonsInstructions, ParsonsLanguageSelector, ParsonsBlocksManager } from "./components";
+import {
+  ParsonsInstructions,
+  ParsonsLanguageSelector,
+  ParsonsBlocksManager,
+  ParsonsOptions
+} from "./components";
+import { ParsonsExerciseTour } from "./components/ParsonsExerciseTour";
+import parsonsStyles from "./components/ParsonsExercise.module.css";
+
+export type ParsonsMode = "simple" | "enhanced";
+
+const MODE_OPTIONS = [
+  { label: "Simple", value: "simple" },
+  { label: "Enhanced", value: "enhanced" }
+];
 
 const PARSONS_STEPS = [
   { label: "Language" },
@@ -39,7 +56,13 @@ const getDefaultFormData = (): ParsonsData => ({
   question_type: "parsonsprob",
   language: "",
   instructions: "",
-  blocks: [{ id: `block-${Date.now()}`, content: "", indent: 0 }]
+  blocks: [{ id: `block-${Date.now()}`, content: "", indent: 0 }],
+  adaptive: true,
+  numbered: "left",
+  noindent: false,
+  grader: "line",
+  orderMode: "random",
+  customOrder: []
 });
 
 const generatePreview = (data: ParsonsData): string => {
@@ -48,10 +71,13 @@ const generatePreview = (data: ParsonsData): string => {
     blocks: data.blocks || [],
     name: data.name || "parsons_exercise",
     language: data.language || "python",
-    adaptive: true,
-    numbered: "left",
-    noindent: false,
-    questionLabel: data.name
+    adaptive: data.adaptive ?? true,
+    numbered: data.numbered ?? "left",
+    noindent: data.noindent ?? false,
+    questionLabel: data.name,
+    grader: data.grader ?? "line",
+    orderMode: data.orderMode ?? "random",
+    customOrder: data.customOrder
   });
 };
 
@@ -61,10 +87,13 @@ const generateExerciseHtmlSrc = (data: ParsonsData): string => {
     instructions: data.instructions || "",
     blocks: data.blocks || [],
     language: data.language || "python",
-    adaptive: true,
-    numbered: "left",
-    noindent: false,
-    questionLabel: data.name
+    adaptive: data.adaptive ?? true,
+    numbered: data.numbered ?? "left",
+    noindent: data.noindent ?? false,
+    questionLabel: data.name,
+    grader: data.grader ?? "line",
+    orderMode: data.orderMode ?? "random",
+    customOrder: data.customOrder
   });
 };
 
@@ -144,6 +173,91 @@ export const ParsonsExercise: FC<ExerciseComponentProps> = ({
     [updateFormData, formData.language, formData.tags]
   );
 
+  const handleAddBlock = useCallback(() => {
+    const newBlock: ParsonsBlock = {
+      id: `block-${Date.now()}`,
+      content: "",
+      indent: 0
+    };
+    updateFormData("blocks", [...(formData.blocks || []), newBlock]);
+  }, [updateFormData, formData.blocks]);
+
+  // --- Mode switcher ---
+  const isEnhancedExercise =
+    isEdit &&
+    (initialData?.grader === "dag" ||
+      initialData?.orderMode === "custom" ||
+      initialData?.numbered === "right" ||
+      initialData?.numbered === "none" ||
+      initialData?.noindent === true);
+
+  const [mode, setMode] = useState<ParsonsMode>(isEnhancedExercise ? "enhanced" : "simple");
+
+  const directSetMode = useCallback((newMode: ParsonsMode) => {
+    setMode(newMode);
+  }, []);
+
+  const tourButton = (
+    <ParsonsExerciseTour
+      mode={mode}
+      formData={formData}
+      onModeChange={directSetMode}
+      updateFormData={updateFormData as (key: string, value: any) => void}
+    />
+  );
+
+  const handleModeChange = useCallback(
+    (newMode: ParsonsMode) => {
+      if (newMode === mode || !newMode) return;
+
+      if (newMode === "simple") {
+        // Enhanced → Simple: confirm and reset
+        confirmDialog({
+          message:
+            "Switching to Simple Mode will reset Grader, Order, Line Numbers, and No Indent to their default values. Block dropdown settings (DAG tags, dependencies, custom order) will be cleared. Continue?",
+          header: "Switch to Simple Mode",
+          icon: "pi pi-exclamation-triangle",
+          acceptClassName: "p-button-warning",
+          accept: () => {
+            // Reset locked fields
+            updateFormData("grader", "line");
+            updateFormData("orderMode", "random");
+            updateFormData("numbered", "left");
+            updateFormData("noindent", false);
+            updateFormData("adaptive", true);
+            updateFormData("customOrder", []);
+            // Clear DAG / order block fields
+            const clearedBlocks = (formData.blocks || []).map((block) => ({
+              ...block,
+              tag: undefined,
+              depends: undefined,
+              displayOrder: undefined
+            }));
+            updateFormData("blocks", clearedBlocks);
+            setMode("simple");
+          }
+        });
+      } else {
+        // Simple → Enhanced: no data loss, just switch
+        setMode("enhanced");
+      }
+    },
+    [mode, updateFormData, formData.blocks]
+  );
+
+  const modeSwitcher = (
+    <div className={parsonsStyles.modeSwitcher} data-tour="mode-switcher">
+      <span className={parsonsStyles.modeSwitcherLabel}>Mode</span>
+      <SelectButton
+        value={mode}
+        options={MODE_OPTIONS}
+        onChange={(e) => handleModeChange(e.value)}
+        className={parsonsStyles.modeSwitcherButton}
+        allowEmpty={false}
+      />
+    </div>
+  );
+
   const renderStepContent = () => {
     switch (activeStep) {
       case 0:
@@ -164,11 +278,46 @@ export const ParsonsExercise: FC<ExerciseComponentProps> = ({
 
       case 2:
         return (
-          <ParsonsBlocksManager
-            blocks={formData.blocks || []}
-            onChange={(blocks: ParsonsBlock[]) => updateFormData("blocks", blocks)}
-            language={formData.language || "python"}
-          />
+          <div className="flex flex-column gap-4">
+            <ParsonsOptions
+              adaptive={formData.adaptive ?? true}
+              numbered={formData.numbered ?? "left"}
+              noindent={formData.noindent ?? false}
+              grader={formData.grader ?? "line"}
+              orderMode={formData.orderMode ?? "random"}
+              mode={mode}
+              onAdaptiveChange={(value: boolean) => updateFormData("adaptive", value)}
+              onNumberedChange={(value: "left" | "right" | "none") =>
+                updateFormData("numbered", value)
+              }
+              onNoindentChange={(value: boolean) => updateFormData("noindent", value)}
+              onGraderChange={(value: "line" | "dag") => {
+                updateFormData("grader", value);
+                if (value === "dag") {
+                  updateFormData("adaptive", false);
+                  // Auto-assign tags to blocks that don't have them
+                  const updatedBlocks = (formData.blocks || []).map((block, idx) => {
+                    if (!block.tag && !block.isDistractor && !block.groupId) {
+                      return { ...block, tag: String(idx) };
+                    }
+                    return block;
+                  });
+                  updateFormData("blocks", updatedBlocks);
+                }
+              }}
+              onOrderModeChange={(value: "random" | "custom") => updateFormData("orderMode", value)}
+              onAddBlock={handleAddBlock}
+              tourButton={tourButton}
+            />
+            <ParsonsBlocksManager
+              blocks={formData.blocks || []}
+              onChange={(blocks: ParsonsBlock[]) => updateFormData("blocks", blocks)}
+              language={formData.language || "python"}
+              grader={formData.grader ?? "line"}
+              orderMode={formData.orderMode ?? "random"}
+              mode={mode}
+            />
+          </div>
         );
 
       case 3:
@@ -181,10 +330,13 @@ export const ParsonsExercise: FC<ExerciseComponentProps> = ({
             blocks={formData.blocks || []}
             language={formData.language || "python"}
             name={formData.name || ""}
-            adaptive={true}
-            numbered="left"
-            noindent={false}
+            adaptive={formData.adaptive ?? true}
+            numbered={formData.numbered ?? "left"}
+            noindent={formData.noindent ?? false}
             questionLabel={formData.name}
+            grader={formData.grader ?? "line"}
+            orderMode={formData.orderMode ?? "random"}
+            customOrder={formData.customOrder}
           />
         );
 
@@ -194,23 +346,27 @@ export const ParsonsExercise: FC<ExerciseComponentProps> = ({
   };
 
   return (
-    <ExerciseLayout
-      title="Parsons Exercise"
-      exerciseType="parsonsprob"
-      isEdit={isEdit}
-      steps={PARSONS_STEPS}
-      activeStep={activeStep}
-      isCurrentStepValid={isCurrentStepValid}
-      isSaving={isSaving}
-      stepsValidity={stepsValidity}
-      onCancel={onCancel}
-      onBack={goToPrevStep}
-      onNext={handleNext}
-      onSave={handleSave}
-      onStepSelect={handleStepSelect}
-      validation={validation}
-    >
-      {renderStepContent()}
-    </ExerciseLayout>
+    <>
+      <ConfirmDialog />
+      <ExerciseLayout
+        title="Parsons Exercise"
+        exerciseType="parsonsprob"
+        isEdit={isEdit}
+        steps={PARSONS_STEPS}
+        activeStep={activeStep}
+        isCurrentStepValid={isCurrentStepValid}
+        isSaving={isSaving}
+        stepsValidity={stepsValidity}
+        onCancel={onCancel}
+        onBack={goToPrevStep}
+        onNext={handleNext}
+        onSave={handleSave}
+        onStepSelect={handleStepSelect}
+        validation={validation}
+        headerExtra={modeSwitcher}
+      >
+        {renderStepContent()}
+      </ExerciseLayout>
+    </>
   );
 };

bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ParsonsExercise/ParsonsPreview.tsx

@@ -12,6 +12,9 @@ interface ParsonsPreviewProps {
   numbered?: "left" | "right" | "none";
   noindent?: boolean;
   questionLabel?: string;
+  grader?: "line" | "dag";
+  orderMode?: "random" | "custom";
+  customOrder?: number[];
 }
 
 export const ParsonsPreview: FC<ParsonsPreviewProps> = ({
@@ -22,7 +25,10 @@ export const ParsonsPreview: FC<ParsonsPreviewProps> = ({
   adaptive = true,
   numbered = "left",
   noindent = false,
-  questionLabel
+  questionLabel,
+  grader = "line",
+  orderMode = "random",
+  customOrder
 }) => {
   return (
     <div style={{ display: "flex", alignItems: "start", justifyContent: "center" }}>
@@ -35,7 +41,10 @@ export const ParsonsPreview: FC<ParsonsPreviewProps> = ({
           adaptive,
           numbered,
           noindent,
-          questionLabel: questionLabel || name
+          questionLabel: questionLabel || name,
+          grader,
+          orderMode,
+          customOrder
         })}
       />
     </div>