Fix/new quiz types content bank

assets/src/js/v3/entries/course-builder/components/curriculum/Question.tsx

@@ -43,7 +43,7 @@ const questionTypeIconMap: Record<Exclude<QuizQuestionType, 'single_choice' | 'i
   scale: 'quizRange',
   pin_image: 'quizPin',
   coordinates: 'quizGraph',
-  puzzle: 'quizImageMatching',
+  puzzle: 'quizPuzzle',
   h5p: 'quizH5p',
 };
 

assets/src/js/v3/entries/course-builder/components/curriculum/QuestionConditions.tsx

@@ -71,7 +71,7 @@ const questionTypes = {
   },
   puzzle: {
     label: __('Puzzle', 'tutor'),
-    icon: 'quizImageMatching',
+    icon: 'quizPuzzle',
   },
   h5p: {
     label: __('H5P', 'tutor'),

assets/src/js/v3/entries/course-builder/components/curriculum/QuestionList.tsx

@@ -130,7 +130,7 @@ const questionTypeOptions: {
   {
     label: __('Puzzle', 'tutor'),
     value: 'puzzle',
-    icon: 'quizImageMatching',
+    icon: 'quizPuzzle',
     isPro: true,
   },
 ];

assets/src/js/v3/entries/course-builder/components/curriculum/question-types/DrawImage.tsx

@@ -1,23 +1,18 @@
 import { css } from '@emotion/react';
-import { __ } from '@wordpress/i18n';
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
 
 import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext';
 import type { QuizForm } from '@CourseBuilderServices/quiz';
 import FormDrawImage from '@TutorShared/components/fields/quiz/questions/FormDrawImage';
-import FormSelectInput from '@TutorShared/components/fields/FormSelectInput';
 import { spacing } from '@TutorShared/config/styles';
-import { calculateQuizDataStatus } from '@TutorShared/utils/quiz';
 import { styleUtils } from '@TutorShared/utils/style-utils';
 import { QuizDataStatus, type QuizQuestionOption } from '@TutorShared/utils/types';
 import { nanoid } from '@TutorShared/utils/util';
 
 const DrawImage = () => {
   const form = useFormContext<QuizForm>();
   const { activeQuestionId, activeQuestionIndex, validationError, setValidationError } = useQuizModalContext();
-  const activeQuestionDataStatus =
-    form.watch(`questions.${activeQuestionIndex}._data_status`) ?? QuizDataStatus.NO_CHANGE;
 
   const answersPath = `questions.${activeQuestionIndex}.question_answers` as 'questions.0.question_answers';
   const thresholdPath =
@@ -28,15 +23,6 @@ const DrawImage = () => {
     name: answersPath,
   });
 
-  const thresholdOptions = useMemo(
-    () =>
-      [40, 50, 60, 70, 80, 90, 100].map((value) => ({
-        label: `${value}%`,
-        value,
-      })),
-    [],
-  );
-
   // Ensure there is always a single option for this question type.
   useEffect(() => {
     if (!activeQuestionId) {
@@ -91,26 +77,8 @@ const DrawImage = () => {
                 questionId={activeQuestionId}
                 validationError={validationError}
                 setValidationError={setValidationError}
-                precisionControl={
-                  <FormSelectInput
-                    {...thresholdControllerProps}
-                    label={__('Precision Level', 'tutor')}
-                    options={thresholdOptions}
-                    helpText={__(
-                      'Minimum overlap score between student and instructor markings. Larger or smaller marked areas lower the score.',
-                      'tutor',
-                    )}
-                    onChange={(option) => {
-                      thresholdControllerProps.field.onChange(option.value);
-                      if (calculateQuizDataStatus(activeQuestionDataStatus, QuizDataStatus.UPDATE)) {
-                        form.setValue(
-                          `questions.${activeQuestionIndex}._data_status`,
-                          calculateQuizDataStatus(activeQuestionDataStatus, QuizDataStatus.UPDATE) as QuizDataStatus,
-                        );
-                      }
-                    }}
-                  />
-                }
+                precisionControllerProps={thresholdControllerProps}
+                questionDataStatusPath={`questions.${activeQuestionIndex}._data_status`}
               />
             )}
           />

assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/ContentListTable.tsx

@@ -100,14 +100,20 @@ const ContentListTable = () => {
   const columns: Column<ContentBankContent>[] = [
     {
       Header: totalItems ? (
-        <Checkbox
-          onChange={toggleSelection}
-          checked={getContentsQuery.isLoading || getContentsQuery.isRefetching ? false : handleAllIsChecked()}
-          label={__('Title', 'tutor')}
-          labelCss={styles.tableTitle}
-          isIndeterminate={fetchedContents.length > 0 && !handleAllIsChecked() && selectedContents.length > 0}
-          aria-label={__('Select all contents', 'tutor')}
-        />
+        <div
+          onClick={(event) => event.stopPropagation()}
+          onMouseDown={(event) => event.stopPropagation()}
+          css={styles.headerCheckboxWrapper}
+        >
+          <Checkbox
+            onChange={toggleSelection}
+            checked={getContentsQuery.isLoading || getContentsQuery.isRefetching ? false : handleAllIsChecked()}
+            label={__('Title', 'tutor')}
+            labelCss={styles.tableTitle}
+            isIndeterminate={fetchedContents.length > 0 && !handleAllIsChecked() && selectedContents.length > 0}
+            aria-label={__('Select all contents', 'tutor')}
+          />
+        </div>
       ) : (
         __('# Title', 'tutor')
       ),
@@ -316,6 +322,10 @@ const styles = {
     ${typography.small('medium')};
     color: ${colorTokens.text.hints};
   `,
+  headerCheckboxWrapper: css`
+    display: flex;
+    align-items: center;
+  `,
   checkboxLabel: css`
     ${typography.caption('medium')};
     color: ${colorTokens.text.primary};

assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/FilterFields.tsx

@@ -90,6 +90,11 @@ const FilterFields = ({ onFilterChange, initialValues, type }: FilterFieldsProps
       value: 'ordering',
       icon: 'quizOrdering',
     },
+    {
+      label: __('Puzzle', 'tutor'),
+      value: 'puzzle',
+      icon: 'quizPuzzle',
+    },
   ];
 
   return (

assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/QuestionListTable.tsx

@@ -3,6 +3,8 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import { useMemo, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 
+import { tutorConfig } from '@TutorShared/config/config';
+
 import { type ContentSelectionForm } from '@CourseBuilderComponents/modals/ContentBankContentSelectModal';
 import Checkbox from '@TutorShared/atoms/CheckBox';
 import { LoadingSection } from '@TutorShared/atoms/LoadingSpinner';
@@ -23,6 +25,105 @@ import SearchField from './SearchField';
 
 type SortDirection = 'asc' | 'desc';
 
+type QuestionTypeOption = {
+  label: string;
+  value: QuizQuestionType;
+  icon: IconCollection;
+  isPro: boolean;
+};
+
+const ALL_QUESTION_TYPE_OPTIONS: QuestionTypeOption[] = [
+  {
+    label: __('True/False', 'tutor'),
+    value: 'true_false',
+    icon: 'quizTrueFalse',
+    isPro: false,
+  },
+  {
+    label: __('Multiple Choice', 'tutor'),
+    value: 'multiple_choice',
+    icon: 'quizMultiChoice',
+    isPro: false,
+  },
+  {
+    label: __('Open Ended/Essay', 'tutor'),
+    value: 'open_ended',
+    icon: 'quizEssay',
+    isPro: false,
+  },
+  {
+    label: __('Fill in the Blanks', 'tutor'),
+    value: 'fill_in_the_blank',
+    icon: 'quizFillInTheBlanks',
+    isPro: false,
+  },
+  {
+    label: __('Short Answer', 'tutor'),
+    value: 'short_answer',
+    icon: 'quizShortAnswer',
+    isPro: true,
+  },
+  {
+    label: __('Matching', 'tutor'),
+    value: 'matching',
+    icon: 'quizImageMatching',
+    isPro: true,
+  },
+  {
+    label: __('Image Answering', 'tutor'),
+    value: 'image_answering',
+    icon: 'quizImageAnswer',
+    isPro: true,
+  },
+  {
+    label: __('Ordering', 'tutor'),
+    value: 'ordering',
+    icon: 'quizOrdering',
+    isPro: true,
+  },
+  {
+    label: __('Mark in the Image', 'tutor'),
+    value: 'draw_image',
+    icon: 'quizMarkInTheImage',
+    isPro: true,
+  },
+  {
+    label: __('Range', 'tutor'),
+    value: 'scale',
+    icon: 'quizRange',
+    isPro: true,
+  },
+  {
+    label: __('Pin', 'tutor'),
+    value: 'pin_image',
+    icon: 'quizPin',
+    isPro: true,
+  },
+  {
+    label: __('Graph', 'tutor'),
+    value: 'coordinates',
+    icon: 'quizGraph',
+    isPro: true,
+  },
+  {
+    label: __('Puzzle', 'tutor'),
+    value: 'puzzle',
+    icon: 'quizPuzzle',
+    isPro: true,
+  },
+];
+
+const questionTypeOptions = tutorConfig.is_legacy_learning_mode
+  ? ALL_QUESTION_TYPE_OPTIONS.filter(
+      (option) =>
+        option.value !== 'draw_image' &&
+        option.value !== 'pin_image' &&
+        option.value !== 'scale' &&
+        option.value !== 'coordinates' &&
+        option.value !== 'puzzle',
+    )
+  : ALL_QUESTION_TYPE_OPTIONS;
+
 const QuestionListTable = () => {
   const { pageInfo, onPageChange, itemsPerPage, onFilterItems } = usePaginatedTable();
   const form = useFormContext<ContentSelectionForm>();
@@ -82,73 +183,23 @@ const QuestionListTable = () => {
     });
   };
 
-  const questionTypeOptions: {
-    label: string;
-    value: QuizQuestionType;
-    icon: IconCollection;
-    isPro: boolean;
-  }[] = [
-    {
-      label: __('True/False', 'tutor'),
-      value: 'true_false',
-      icon: 'quizTrueFalse',
-      isPro: false,
-    },
-    {
-      label: __('Multiple Choice', 'tutor'),
-      value: 'multiple_choice',
-      icon: 'quizMultiChoice',
-      isPro: false,
-    },
-    {
-      label: __('Open Ended/Essay', 'tutor'),
-      value: 'open_ended',
-      icon: 'quizEssay',
-      isPro: false,
-    },
-    {
-      label: __('Fill in the Blanks', 'tutor'),
-      value: 'fill_in_the_blank',
-      icon: 'quizFillInTheBlanks',
-      isPro: false,
-    },
-    {
-      label: __('Short Answer', 'tutor'),
-      value: 'short_answer',
-      icon: 'quizShortAnswer',
-      isPro: true,
-    },
-    {
-      label: __('Matching', 'tutor'),
-      value: 'matching',
-      icon: 'quizImageMatching',
-      isPro: true,
-    },
-    {
-      label: __('Image Answering', 'tutor'),
-      value: 'image_answering',
-      icon: 'quizImageAnswer',
-      isPro: true,
-    },
-    {
-      label: __('Ordering', 'tutor'),
-      value: 'ordering',
-      icon: 'quizOrdering',
-      isPro: true,
-    },
-  ];
-
   const columns: Column<ContentBankContent>[] = [
     {
       Header: totalItems ? (
-        <Checkbox
-          onChange={handleToggleSelection}
-          checked={getContentsQuery.isLoading || getContentsQuery.isRefetching ? false : handleAllIsChecked()}
-          label={__('Title', 'tutor')}
-          labelCss={styles.tableTitle}
-          isIndeterminate={fetchedContents.length > 0 && !handleAllIsChecked() && selectedContents.length > 0}
-          aria-label={__('Select all questions', 'tutor')}
-        />
+        <div
+          onClick={(event) => event.stopPropagation()}
+          onMouseDown={(event) => event.stopPropagation()}
+          css={styles.headerCheckboxWrapper}
+        >
+          <Checkbox
+            onChange={handleToggleSelection}
+            checked={getContentsQuery.isLoading || getContentsQuery.isRefetching ? false : handleAllIsChecked()}
+            label={__('Title', 'tutor')}
+            labelCss={styles.tableTitle}
+            isIndeterminate={fetchedContents.length > 0 && !handleAllIsChecked() && selectedContents.length > 0}
+            aria-label={__('Select all questions', 'tutor')}
+          />
+        </div>
       ) : (
         __('# Title', 'tutor')
       ),
@@ -341,6 +392,10 @@ const styles = {
     ${typography.small('regular')};
     color: ${colorTokens.text.hints};
   `,
+  headerCheckboxWrapper: css`
+    display: flex;
+    align-items: center;
+  `,
   checkboxLabel: css`
     ${styleUtils.display.flex()};
     align-items: center;