From f2d3db309db014c1c68f4b54021a4c3ff7a7e9f7 Mon Sep 17 00:00:00 2001
From: andreimarozau <mauk.lekph@gmail.com>
Date: Tue, 13 Jan 2026 13:31:16 +0300
Subject: [PATCH] feature-1035 Add iFrame exercise type and related components

---
 .../components/ExerciseFactory.tsx            |   5 +-
 .../IframeExercise/IframeExercise.tsx         | 135 ++++++++++++++++++
 .../IframeExercise/IframeExerciseSettings.tsx |  22 +++
 .../IframeExercise/IframePreview.tsx          |  17 +++
 .../components/IframeUrlInput.tsx             |  78 ++++++++++
 .../IframeExercise/components/index.ts        |   1 +
 .../components/IframeExercise/index.ts        |   3 +
 .../CreateExercise/components/index.ts        |   1 +
 .../CreateExercise/config/stepConfigs.ts      |  65 +++++++++
 .../assignment_builder/src/types/exercises.ts |   7 +-
 .../src/utils/htmlRegeneration.ts             |   4 +
 .../src/utils/preview/iframePreview.ts        |  13 ++
 .../src/utils/questionJson.ts                 |   3 +
 components/rsptx/data_types/question_type.py  |   5 +
 14 files changed, 356 insertions(+), 3 deletions(-)
 create mode 100644 bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/IframeExercise.tsx
 create mode 100644 bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/IframeExerciseSettings.tsx
 create mode 100644 bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/IframePreview.tsx
 create mode 100644 bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/components/IframeUrlInput.tsx
 create mode 100644 bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/components/index.ts
 create mode 100644 bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/index.ts
 create mode 100644 bases/rsptx/assignment_server_api/assignment_builder/src/utils/preview/iframePreview.ts

diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ExerciseFactory.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ExerciseFactory.tsx
index bc21b7f91..73ac11110 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ExerciseFactory.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ExerciseFactory.tsx
@@ -12,7 +12,8 @@ import {
   ShortAnswerExercise,
   MultiChoiceExercise,
   MatchingExercise,
-  SelectQuestionExercise
+  SelectQuestionExercise,
+  IframeExercise
 } from ".";
 
 export const ExerciseFactory: FC<ExerciseComponentProps> = (props) => {
@@ -37,6 +38,8 @@ export const ExerciseFactory: FC<ExerciseComponentProps> = (props) => {
       return <MatchingExercise {...props} />;
     case "selectquestion":
       return <SelectQuestionExercise {...props} />;
+    case "iframe":
+      return <IframeExercise {...props} />;
     default:
       throw new Error(`Unknown exercise type: ${props.type}`);
   }
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/IframeExercise.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/IframeExercise.tsx
new file mode 100644
index 000000000..e1394f416
--- /dev/null
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/IframeExercise.tsx
@@ -0,0 +1,135 @@
+import { ExerciseComponentProps } from "@components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/types/ExerciseTypes";
+import { FC } from "react";
+
+import { CreateExerciseFormType } from "@/types/exercises";
+import { createExerciseId } from "@/utils/exercise";
+import { generateIframePreview } from "@/utils/preview/iframePreview";
+
+import { IFRAME_STEP_VALIDATORS } from "../../config/stepConfigs";
+import { useBaseExercise } from "../../hooks/useBaseExercise";
+import { useExerciseStepNavigation } from "../../hooks/useExerciseStepNavigation";
+import { ExerciseLayout } from "../../shared/ExerciseLayout";
+import { validateCommonFields } from "../../utils/validation";
+
+import { IframeExerciseSettings } from "./IframeExerciseSettings";
+import { IframePreview } from "./IframePreview";
+import { IframeUrlInput } from "./components/IframeUrlInput";
+
+const IFRAME_STEPS = [{ label: "iFrame URL" }, { label: "Settings" }, { label: "Preview" }];
+
+// Define the default form data
+const getDefaultFormData = (): Partial<CreateExerciseFormType> => ({
+  name: createExerciseId(),
+  author: "",
+  topic: "",
+  chapter: "",
+  subchapter: "",
+  tags: "",
+  points: 1,
+  difficulty: 3,
+  htmlsrc: "",
+  question_type: "iframe",
+  iframeSrc: ""
+});
+
+// Create a wrapper for generateIframePreview to match the expected type
+const generatePreview = (data: Partial<CreateExerciseFormType>): string => {
+  return generateIframePreview(data.iframeSrc || "", data.name || "");
+};
+
+export const IframeExercise: FC<ExerciseComponentProps> = ({
+  initialData,
+  onSave,
+  onCancel,
+  resetForm,
+  onFormReset,
+  isEdit = false
+}) => {
+  const {
+    formData,
+    activeStep,
+    isSaving,
+    updateFormData,
+    handleSettingsChange,
+    isCurrentStepValid,
+    goToNextStep,
+    goToPrevStep,
+    handleSave: baseHandleSave,
+    setActiveStep
+  } = useBaseExercise({
+    initialData,
+    steps: IFRAME_STEPS,
+    exerciseType: "iframe",
+    generatePreview,
+    validateStep: (step, data) => {
+      const errors = IFRAME_STEP_VALIDATORS[step](data);
+
+      return errors.length === 0;
+    },
+    validateForm: validateCommonFields,
+    getDefaultFormData,
+    onSave: onSave as (data: Partial<CreateExerciseFormType>) => Promise<void>,
+    onCancel,
+    resetForm,
+    onFormReset,
+    isEdit
+  });
+
+  // Use our centralized navigation and validation hook
+  const { validation, handleNext, handleStepSelect, handleSave, stepsValidity } =
+    useExerciseStepNavigation({
+      data: formData,
+      activeStep,
+      setActiveStep,
+      stepValidators: IFRAME_STEP_VALIDATORS,
+      goToNextStep,
+      goToPrevStep,
+      steps: IFRAME_STEPS,
+      handleBaseSave: baseHandleSave,
+      generateHtmlSrc: generatePreview,
+      updateFormData
+    });
+
+  // Render step content
+  const renderStepContent = () => {
+    switch (activeStep) {
+      case 0: // iFrame URL
+        return (
+          <IframeUrlInput
+            iframeSrc={formData.iframeSrc || ""}
+            onChange={(url: string) => updateFormData("iframeSrc", url)}
+          />
+        );
+
+      case 1: // Settings
+        return <IframeExerciseSettings formData={formData} onChange={handleSettingsChange} />;
+
+      case 2: // Preview
+        return <IframePreview iframeSrc={formData.iframeSrc || ""} name={formData.name || ""} />;
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <ExerciseLayout
+      title="iFrame Exercise"
+      exerciseType="iframe"
+      isEdit={isEdit}
+      steps={IFRAME_STEPS}
+      activeStep={activeStep}
+      isCurrentStepValid={isCurrentStepValid}
+      isSaving={isSaving}
+      stepsValidity={stepsValidity}
+      onCancel={onCancel}
+      onBack={goToPrevStep}
+      onNext={handleNext}
+      onSave={handleSave}
+      onStepSelect={handleStepSelect}
+      validation={validation}
+    >
+      {renderStepContent()}
+    </ExerciseLayout>
+  );
+};
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/IframeExerciseSettings.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/IframeExerciseSettings.tsx
new file mode 100644
index 000000000..b37901260
--- /dev/null
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/IframeExerciseSettings.tsx
@@ -0,0 +1,22 @@
+import { FC } from "react";
+
+import { CreateExerciseFormType } from "@/types/exercises";
+
+import {
+  BaseExerciseSettings,
+  BaseExerciseSettingsContent
+} from "../../shared/BaseExerciseSettingsContent";
+
+interface IframeExerciseSettingsProps {
+  formData: Partial<CreateExerciseFormType>;
+  onChange: (settings: Partial<CreateExerciseFormType>) => void;
+}
+
+export const IframeExerciseSettings: FC<IframeExerciseSettingsProps> = ({ formData, onChange }) => {
+  return (
+    <BaseExerciseSettingsContent<BaseExerciseSettings>
+      initialData={formData}
+      onSettingsChange={onChange}
+    />
+  );
+};
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/IframePreview.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/IframePreview.tsx
new file mode 100644
index 000000000..def3288d1
--- /dev/null
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/IframePreview.tsx
@@ -0,0 +1,17 @@
+import { ExercisePreview } from "@components/routes/AssignmentBuilder/components/exercises/components/ExercisePreview/ExercisePreview";
+import { FC } from "react";
+
+import { generateIframePreview } from "@/utils/preview/iframePreview";
+
+interface IframePreviewProps {
+  iframeSrc: string;
+  name: string;
+}
+
+export const IframePreview: FC<IframePreviewProps> = ({ iframeSrc, name }) => {
+  return (
+    <div style={{ display: "flex", alignItems: "start", justifyContent: "center" }}>
+      <ExercisePreview htmlsrc={generateIframePreview(iframeSrc || "", name || "")} />
+    </div>
+  );
+};
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/components/IframeUrlInput.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/components/IframeUrlInput.tsx
new file mode 100644
index 000000000..c48566b5a
--- /dev/null
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/components/IframeUrlInput.tsx
@@ -0,0 +1,78 @@
+import { InputText } from "primereact/inputtext";
+import { FC } from "react";
+
+import { useValidation } from "../../../shared/ExerciseLayout";
+import styles from "../../../shared/styles/CreateExercise.module.css";
+
+interface IframeUrlInputProps {
+  iframeSrc: string;
+  onChange: (url: string) => void;
+}
+
+const isValidUrl = (url: string): boolean => {
+  if (!url.trim()) return false;
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+export const IframeUrlInput: FC<IframeUrlInputProps> = ({ iframeSrc, onChange }) => {
+  const { shouldShowValidation } = useValidation();
+  const isEmpty = !iframeSrc?.trim();
+  const isInvalidUrl = iframeSrc?.trim() && !isValidUrl(iframeSrc);
+  const shouldShowError = (isEmpty || isInvalidUrl) && shouldShowValidation;
+
+  return (
+    <>
+      <div className={styles.formField}>
+        <label htmlFor="iframeSrc" className="font-medium block mb-2">
+          iFrame Source URL *
+        </label>
+        <InputText
+          id="iframeSrc"
+          value={iframeSrc}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder="https://example.com/exercise"
+          className={`w-full ${shouldShowError ? "p-invalid" : ""}`}
+        />
+        {shouldShowError && isEmpty && (
+          <small className="p-error mt-1 block">iFrame URL is required</small>
+        )}
+        {shouldShowError && isInvalidUrl && (
+          <small className="p-error mt-1 block">Please enter a valid URL</small>
+        )}
+      </div>
+
+      <div className={styles.questionTips}>
+        <i className="pi pi-lightbulb" style={{ marginRight: "4px" }}></i>
+        <span>
+          Tip: Enter a valid URL that can be embedded in an iframe (e.g., videos, interactive
+          content, external tools).
+        </span>
+      </div>
+
+      {iframeSrc && isValidUrl(iframeSrc) && (
+        <div className="mt-4">
+          <label className="font-medium block mb-2">Preview</label>
+          <div
+            style={{
+              border: "1px solid var(--surface-border)",
+              borderRadius: "6px",
+              overflow: "hidden"
+            }}
+          >
+            <iframe
+              src={iframeSrc}
+              title="iFrame Preview"
+              style={{ width: "100%", height: "400px", border: "none" }}
+              allowFullScreen
+            />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/components/index.ts b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/components/index.ts
new file mode 100644
index 000000000..20362c86d
--- /dev/null
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/components/index.ts
@@ -0,0 +1 @@
+export { IframeUrlInput } from "./IframeUrlInput";
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/index.ts b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/index.ts
new file mode 100644
index 000000000..526fef17d
--- /dev/null
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/index.ts
@@ -0,0 +1,3 @@
+export { IframeExercise } from "./IframeExercise";
+export { IframeExerciseSettings } from "./IframeExerciseSettings";
+export { IframePreview } from "./IframePreview";
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/index.ts b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/index.ts
index 9f37af17c..b315eebd4 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/index.ts
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/index.ts
@@ -10,3 +10,4 @@ export { ShortAnswerExercise } from "./ShortAnswerExercise/ShortAnswerExercise";
 export * from "./MultiChoiceExercise";
 export { MatchingExercise } from "./MatchingExercise/MatchingExercise";
 export { SelectQuestionExercise } from "./SelectQuestionExercise/SelectQuestionExercise";
+export { IframeExercise } from "./IframeExercise/IframeExercise";
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/config/stepConfigs.ts b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/config/stepConfigs.ts
index c5324a2f9..ae610a02c 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/config/stepConfigs.ts
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/config/stepConfigs.ts
@@ -229,6 +229,20 @@ const stepConfigs: Record<string, ExerciseStepConfig> = {
       title: "Preview",
       description: "Preview the exercise as students will see it"
     }
+  },
+  iframe: {
+    0: {
+      title: "iFrame URL",
+      description: "Enter the URL of the content to embed"
+    },
+    1: {
+      title: "Exercise Settings",
+      description: "Configure exercise settings such as name, points, etc."
+    },
+    2: {
+      title: "Preview",
+      description: "Preview the exercise as students will see it"
+    }
   }
 };
 
@@ -736,3 +750,54 @@ export const CLICKABLE_AREA_STEP_VALIDATORS: StepValidator<Partial<CreateExercis
   // Step 2: Preview
   () => []
 ];
+
+// Helper function to validate URL
+const isValidUrl = (url: string): boolean => {
+  if (!url?.trim()) return false;
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+// iFrame/SPLICE Exercise Step Validators
+export const IFRAME_STEP_VALIDATORS: StepValidator<Partial<CreateExerciseFormType>>[] = [
+  // Step 0: iFrame URL
+  (data) => {
+    const errors: string[] = [];
+
+    if (!data.iframeSrc?.trim()) {
+      errors.push("iFrame URL is required");
+    } else if (!isValidUrl(data.iframeSrc)) {
+      errors.push("Please enter a valid URL");
+    }
+
+    return errors;
+  },
+  // Step 1: Settings
+  (data) => {
+    const errors: string[] = [];
+
+    if (!data.name?.trim()) {
+      errors.push("Exercise name is required");
+    }
+    if (!data.chapter) {
+      errors.push("Chapter is required");
+    }
+    if (!data.subchapter) {
+      errors.push("Section is required");
+    }
+    if (data.points === undefined || data.points <= 0) {
+      errors.push("Points must be greater than 0");
+    }
+    if (data.difficulty === undefined) {
+      errors.push("Difficulty is required");
+    }
+
+    return errors;
+  },
+  // Step 2: Preview
+  () => []
+];
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/types/exercises.ts b/bases/rsptx/assignment_server_api/assignment_builder/src/types/exercises.ts
index d7f025331..3e08cedcf 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/types/exercises.ts
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/types/exercises.ts
@@ -13,7 +13,8 @@ export const supportedExerciseTypesToEdit = [
   "parsonsprob",
   "matching",
   "fillintheblank",
-  "clickablearea"
+  "clickablearea",
+  "iframe"
 ];
 
 export const supportedExerciseTypes = [
@@ -26,7 +27,8 @@ export const supportedExerciseTypes = [
   "poll",
   "shortanswer",
   "matching",
-  "selectquestion"
+  "selectquestion",
+  "iframe"
 ] as const;
 
 export type ExerciseType = (typeof supportedExerciseTypes)[number];
@@ -105,6 +107,7 @@ export type QuestionJSON = Partial<{
   enableCodeTailor: boolean;
   parsonspersonalize: "solution-level" | "block-and-solution" | "";
   parsonsexample: string;
+  iframeSrc: string;
 }>;
 
 export type CreateExerciseFormType = Omit<Exercise, "question_json"> & QuestionJSON;
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/utils/htmlRegeneration.ts b/bases/rsptx/assignment_server_api/assignment_builder/src/utils/htmlRegeneration.ts
index ade010148..c5a1410a5 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/utils/htmlRegeneration.ts
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/utils/htmlRegeneration.ts
@@ -7,6 +7,7 @@ import { generateShortAnswerPreview } from "@/utils/preview/shortAnswer";
 import { generateMatchingPreview } from "@/utils/preview/matchingPreview";
 import { generateDragAndDropPreview } from "@/utils/preview/dndPreview";
 import { generatePollPreview } from "@/utils/preview/poll";
+import { generateIframePreview } from "@/utils/preview/iframePreview";
 import { safeJsonParse } from "@/utils/json";
 
 /**
@@ -90,6 +91,9 @@ export const regenerateHtmlSrc = (exercise: Exercise, newName: string): string =
           questionJson.poll_type
         );
 
+      case "iframe":
+        return generateIframePreview(questionJson.iframeSrc || "", newName);
+
       default:
         // For unsupported types, try to update the name in the existing HTML
         return updateNameInHtml(exercise.htmlsrc, exercise.name, newName);
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/utils/preview/iframePreview.ts b/bases/rsptx/assignment_server_api/assignment_builder/src/utils/preview/iframePreview.ts
new file mode 100644
index 000000000..442ac6bb9
--- /dev/null
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/utils/preview/iframePreview.ts
@@ -0,0 +1,13 @@
+import { sanitizeId } from "../sanitize";
+
+export const generateIframePreview = (iframeSrc: string, questionName: string): string => {
+  const safeId = sanitizeId(questionName);
+
+  return `
+<div class="runestone">
+<div data-component="splice" id="${safeId}">
+<iframe src="${iframeSrc}" style="width: 100%; height: 400px; border: none;" allowfullscreen></iframe>
+</div>
+</div>
+  `;
+};
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/utils/questionJson.ts b/bases/rsptx/assignment_server_api/assignment_builder/src/utils/questionJson.ts
index 0b26663bb..5e4a74949 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/utils/questionJson.ts
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/utils/questionJson.ts
@@ -62,6 +62,9 @@ export const buildQuestionJson = (data: CreateExerciseFormType) => {
       questionText: data.questionText,
       statement: data.statement,
       feedback: data.feedback
+    }),
+    ...(data.question_type === "iframe" && {
+      iframeSrc: data.iframeSrc
     })
   };
 
diff --git a/components/rsptx/data_types/question_type.py b/components/rsptx/data_types/question_type.py
index b43aa0d68..90bbcb5af 100644
--- a/components/rsptx/data_types/question_type.py
+++ b/components/rsptx/data_types/question_type.py
@@ -55,6 +55,11 @@ class QuestionType(Enum):
     )
     PAGE = ("page", "Page", "")
     WEBWORK = ("webwork", "WeBWorK", "Create a WeBWorK problem for students to solve")
+    IFRAME = (
+        "iframe",
+        "iFrame",
+        "Embed external content using an iFrame",
+    )
 
     def to_dict(self):
         return {