Merge branch 'issue-1118'

Author: bnmnetp

bases/rsptx/assignment_server_api/assignment_builder/src/componentFuncs.js

@@ -74,7 +74,7 @@ export async function renderRunestoneComponent(
       previewRef.current.innerHTML = `<p>Preview not available for ${componentKind}</p>`;
     } else {
       try {
-        // Grab the preamble if it exists.  
+        // Grab the preamble if it exists.
         // add it to opt so that it can be used by the component factory
         // This is used for mathjax processing of the preview.
         let preamble = document.querySelector("div.hidden-content.process-math");
@@ -85,6 +85,12 @@ export async function renderRunestoneComponent(
         let res = window.component_factory[componentKind](opt);
         console.log("res", res);
 
+        // For components with async initialization (like selectquestion),
+        // call initialize() method if it exists
+        if (!!moreOpts.isCalledFromBuilder && res && typeof res.initialize === "function") {
+          await res.initialize();
+        }
+
         res.multiGrader = moreOpts.multiGrader;
         if (componentKind === "activecode") {
           if (moreOpts.multiGrader) {
@@ -95,7 +101,7 @@ export async function renderRunestoneComponent(
         }
         // add a button to the preview to allow the user to flag this compenent for review
         let flagButton = document.createElement("button");
-        console.log("res",res);
+        console.log("res", res);
         flagButton.classList.add("flag-for-review");
         flagButton.textContent = "Flag for Review";
         flagButton.addEventListener("click", async function () {

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

@@ -1,4 +1,4 @@
-import { FC, useMemo, useRef } from "react";
+import { FC, useMemo } from "react";
 
 import { CreateExerciseFormType } from "@/types/exercises";
 import { QuestionWithLabel } from "@/types/exercises";
@@ -35,6 +35,7 @@ const getDefaultFormData = (): Partial<CreateExerciseFormType> => ({
   htmlsrc: "",
   question_type: "selectquestion",
   questionList: [],
+  questionLabels: {},
   abExperimentName: "",
   toggleOptions: [],
   dataLimitBasecourse: false
@@ -52,13 +53,12 @@ export const SelectQuestionExercise: FC<ExerciseComponentProps> = ({
   onFormReset,
   isEdit = false
 }) => {
-  const questionLabelsRef = useRef<Map<string, string>>(new Map());
-
   const generatePreviewWithLabels = (data: Partial<CreateExerciseFormType>): string => {
     const stringList = data.questionList || [];
+    const labels = data.questionLabels || {};
     const questionListWithLabels = stringList.map((questionId) => ({
       questionId,
-      label: questionLabelsRef.current.get(questionId)
+      label: labels[questionId]
     }));
 
     return generateSelectQuestionPreview({
@@ -116,24 +116,26 @@ export const SelectQuestionExercise: FC<ExerciseComponentProps> = ({
 
   const safeQuestionList = useMemo(() => {
     const stringList = formData.questionList || [];
+    const labels = formData.questionLabels || {};
 
     return stringList.map((questionId) => ({
       questionId,
-      label: questionLabelsRef.current.get(questionId)
+      label: labels[questionId]
     }));
-  }, [formData.questionList]);
+  }, [formData.questionList, formData.questionLabels]);
 
   const handleQuestionListChange = (questionList: QuestionWithLabel[]) => {
-    questionLabelsRef.current.clear();
+    const labelsRecord: Record<string, string> = {};
     questionList.forEach((q) => {
       if (q.label) {
-        questionLabelsRef.current.set(q.questionId, q.label);
+        labelsRecord[q.questionId] = q.label;
       }
     });
 
     const stringList = convertToStringArray(questionList);
 
     updateFormData("questionList", stringList);
+    updateFormData("questionLabels", labelsRecord);
   };
 
   const handleABExperimentChange = (experimentName: string) => {

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

@@ -30,38 +30,37 @@ export const QuestionListEditor: FC<QuestionListEditorProps> = ({
 
   const { exercises, onGlobalFilterChange, toggleBaseCourse } = useSmartExerciseSearch({
     use_base_course: dataLimitBasecourse,
-    limit: 20
+    limit: 20,
+    assignment_id: undefined
   });
 
   const existingQuestionIds = useMemo(() => questionList.map((q) => q.questionId), [questionList]);
 
-  const getAvailableExercises = useCallback(() => {
-    return exercises.filter((ex) => ex.name && !existingQuestionIds.includes(ex.name));
-  }, [exercises, existingQuestionIds]);
-
-  const createSuggestions = (filteredExercises: any[]) => {
+  const createSuggestions = useCallback((filteredExercises: any[]) => {
     return filteredExercises.map((ex) => ({
       id: ex.name,
       name: ex.name,
       type: ex.question_type,
       topic: ex.topic,
       author: ex.author
     }));
-  };
+  }, []);
 
   const updateSuggestions = useCallback(() => {
-    const availableExercises = getAvailableExercises();
-
+    const availableExercises = exercises.filter(
+      (ex) => ex.name && !existingQuestionIds.includes(ex.name)
+    );
     setSuggestions(createSuggestions(availableExercises));
-  }, [getAvailableExercises]);
+  }, [exercises, existingQuestionIds, createSuggestions]);
 
   useEffect(() => {
     toggleBaseCourse(dataLimitBasecourse);
-  }, [dataLimitBasecourse, toggleBaseCourse]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataLimitBasecourse]);
 
   useEffect(() => {
     updateSuggestions();
-  }, [exercises, questionList, updateSuggestions]);
+  }, [updateSuggestions]);
 
   const handleAddQuestion = () => {
     const trimmed = newQuestion.trim();
@@ -92,14 +91,9 @@ export const QuestionListEditor: FC<QuestionListEditorProps> = ({
   };
 
   const handleAutocompleteSearch = (event: { query: string }) => {
-    const query = event.query.toLowerCase();
-
-    if (query.length === 0) {
-      updateSuggestions();
-      return;
-    }
-
+    const query = event.query.toLowerCase().trim();
     onGlobalFilterChange(query);
+    updateSuggestions();
   };
 
   const handleAutocompleteSelect = (event: { value: any }) => {
@@ -186,13 +180,6 @@ export const QuestionListEditor: FC<QuestionListEditorProps> = ({
             forceSelection={false}
             itemTemplate={suggestionTemplate}
           />
-          <Button
-            label="Add"
-            icon="pi pi-plus"
-            onClick={handleAddQuestion}
-            disabled={!newQuestion.trim() || existingQuestionIds.includes(newQuestion.trim())}
-            className={styles.addButton}
-          />
         </div>
 
         <div className="field-checkbox flex align-items-center gap-1 mt-1">

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

@@ -15,7 +15,7 @@ export const ExercisePreview = ({
     if (ref.current) {
       console.log("ref here");
       ref.current.innerHTML = htmlsrc;
-      renderRunestoneComponent(ref, {}).then(forceUpdate);
+      renderRunestoneComponent(ref, { isCalledFromBuilder: true }).then(forceUpdate);
     }
   }, [htmlsrc]);
 

bases/rsptx/assignment_server_api/assignment_builder/src/types/exercises.ts

@@ -13,7 +13,8 @@ export const supportedExerciseTypesToEdit = [
   "parsonsprob",
   "matching",
   "fillintheblank",
-  "clickablearea"
+  "clickablearea",
+  "selectquestion"
 ];
 
 export const supportedExerciseTypes = [
@@ -96,6 +97,7 @@ export type QuestionJSON = Partial<{
   scale_max: number;
   forceCheckboxes: boolean;
   questionList: string[];
+  questionLabels: Record<string, string>;
   abExperimentName: string;
   toggleOptions: string[];
   dataLimitBasecourse: boolean;

bases/rsptx/assignment_server_api/assignment_builder/src/utils/preview/selectQuestionPreview.ts

@@ -34,9 +34,9 @@ export const generateSelectQuestionPreview = ({
     ? questionList.map((item) => (typeof item === "string" ? { questionId: item } : item))
     : [];
 
-  let html = '<div class="runestone sqcontainer %(optclass)s"><div data-component="selectquestion"';
+  let html = '<div class="runestone sqcontainer"><div data-component="selectquestion"';
 
-  html += ` id=${safeId}`;
+  html += ` id="${safeId}"`;
 
   const questionListStr = questions.map((q) => q.questionId).join(", ");
 
@@ -50,11 +50,7 @@ export const generateSelectQuestionPreview = ({
     const toggleStr = toggleOptions.join(", ");
 
     html += ` data-toggleoptions="${toggleStr}"`;
-  }
-
-  const hasAnyLabels = questions.some((q) => q.label);
 
-  if (hasAnyLabels) {
     const questionLabels = questions.map((q) => q.label || q.questionId).join(", ");
 
     html += ` data-togglelabels="togglelabels: ${questionLabels}"`;

bases/rsptx/assignment_server_api/assignment_builder/src/utils/questionJson.ts

@@ -54,6 +54,7 @@ export const buildQuestionJson = (data: CreateExerciseFormType) => {
     }),
     ...(data.question_type === "selectquestion" && {
       questionList: data.questionList,
+      questionLabels: data.questionLabels,
       abExperimentName: data.abExperimentName,
       toggleOptions: data.toggleOptions,
       dataLimitBasecourse: data.dataLimitBasecourse
@@ -117,6 +118,7 @@ export const mergeQuestionJsonWithDefaults = (
     parsonspersonalize:
       questionJson?.parsonspersonalize ??
       (defaultQuestionJson.parsonspersonalize as "" | "solution-level" | "block-and-solution"),
-    parsonsexample: questionJson?.parsonsexample ?? defaultQuestionJson.parsonsexample
+    parsonsexample: questionJson?.parsonsexample ?? defaultQuestionJson.parsonsexample,
+    questionLabels: questionJson?.questionLabels ?? {}
   };
 };