Feat: quiz type coordinates

assets/src/js/frontend/dashboard/pages/discussions.ts

@@ -252,8 +252,8 @@ const discussionsPage = () => {
             }
 
             // Re-trigger syntax highlighting if Prism is available.
-            const Prism = (window as any).Prism;
-            if (Prism && typeof Prism.highlightAllUnder === 'function') {
+            const Prism = (window as Window & { Prism?: { highlightAllUnder?: (root: Element) => void } }).Prism;
+            if (Prism?.highlightAllUnder) {
               Prism.highlightAllUnder(element);
             }
           }
@@ -292,8 +292,8 @@ const discussionsPage = () => {
           container.innerHTML = response.data.html;
 
           // Re-trigger syntax highlighting if Prism is available.
-          const Prism = (window as any).Prism;
-          if (Prism && typeof Prism.highlightAllUnder === 'function') {
+          const Prism = (window as Window & { Prism?: { highlightAllUnder?: (root: Element) => void } }).Prism;
+          if (Prism?.highlightAllUnder) {
             Prism.highlightAllUnder(container);
           }
 

assets/src/js/frontend/learning-area/pages/qna.ts

@@ -96,8 +96,8 @@ const qnaPage = () => {
             element.innerHTML = payload.answer;
 
             // Re-trigger syntax highlighting if Prism is available.
-            const Prism = (window as any).Prism;
-            if (Prism && typeof Prism.highlightAllUnder === 'function') {
+            const Prism = (window as Window & { Prism?: { highlightAllUnder?: (root: Element) => void } }).Prism;
+            if (Prism?.highlightAllUnder) {
               Prism.highlightAllUnder(element);
             }
           }
@@ -196,8 +196,8 @@ const qnaPage = () => {
           container.innerHTML = response.data.html;
 
           // Re-trigger syntax highlighting if Prism is available.
-          const Prism = (window as any).Prism;
-          if (Prism && typeof Prism.highlightAllUnder === 'function') {
+          const Prism = (window as Window & { Prism?: { highlightAllUnder?: (root: Element) => void } }).Prism;
+          if (Prism?.highlightAllUnder) {
             Prism.highlightAllUnder(container);
           }
 

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

@@ -42,6 +42,7 @@ const questionTypeIconMap: Record<Exclude<QuizQuestionType, 'single_choice' | 'i
   draw_image: 'quizMarkInTheImage',
   scale: 'quizRange',
   pin_image: 'quizPin',
+  coordinates: 'quizGraph',
   h5p: 'quizH5p',
 };
 

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

@@ -58,6 +58,10 @@ const questionTypes = {
     label: __('Range', 'tutor'),
     icon: 'quizRange',
   },
+  coordinates: {
+    label: __('Graph', 'tutor'),
+    icon: 'quizGraph',
+  },
   pin_image: {
     label: __('Pin', 'tutor'),
     icon: 'quizPin',

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

@@ -18,6 +18,7 @@ import TrueFalse from '@CourseBuilderComponents/curriculum/question-types/TrueFa
 import DrawImage from '@CourseBuilderComponents/curriculum/question-types/DrawImage';
 import Scale from '@CourseBuilderComponents/curriculum/question-types/Scale';
 import PinImage from '@CourseBuilderComponents/curriculum/question-types/PinImage';
+import Coordinates from '@CourseBuilderComponents/curriculum/question-types/Coordinates';
 import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext';
 
 import { tutorConfig } from '@TutorShared/config/config';
@@ -60,6 +61,7 @@ const QuestionForm = () => {
     draw_image: <DrawImage key={activeQuestionId} />,
     scale: <Scale key={activeQuestionId} />,
     pin_image: <PinImage key={activeQuestionId} />,
+    coordinates: <Coordinates key={activeQuestionId} />,
   } as const;
 
   useEffect(() => {

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

@@ -121,6 +121,12 @@ const questionTypeOptions: {
     icon: 'quizPin',
     isPro: true,
   },
+  {
+    label: __('Graph', 'tutor'),
+    value: 'coordinates',
+    icon: 'quizGraph',
+    isPro: true,
+  },
 ];
 
 const isTutorPro = !!tutorConfig.tutor_pro_url;
@@ -129,7 +135,11 @@ const QuestionList = ({ isEditing }: { isEditing: boolean }) => {
   const questionTypeOptionsForUi = useMemo(() => {
     if (tutorConfig.is_legacy_learning_mode) {
       return questionTypeOptions.filter(
-        (option) => option.value !== 'draw_image' && option.value !== 'pin_image' && option.value !== 'scale',
+        (option) =>
+          option.value !== 'draw_image' &&
+          option.value !== 'pin_image' &&
+          option.value !== 'scale' &&
+          option.value !== 'coordinates',
       );
     }
     return questionTypeOptions;
@@ -249,22 +259,37 @@ const QuestionList = ({ isEditing }: { isEditing: boolean }) => {
                     is_correct: '1',
                   },
                 ]
-              : questionType === 'pin_image'
+              : questionType === 'coordinates'
                 ? [
                     {
                       _data_status: QuizDataStatus.NEW,
-                      is_saved: true,
+                      is_saved: false,
                       answer_id: nanoid(),
                       answer_title: '',
                       belongs_question_id: questionId,
-                      belongs_question_type: 'pin_image',
+                      belongs_question_type: 'coordinates',
                       answer_two_gap_match: '',
-                      answer_view_format: 'pin_image',
+                      answer_view_format: 'coordinates',
                       answer_order: 0,
                       is_correct: '1',
                     },
                   ]
-                : [],
+                : questionType === 'pin_image'
+                  ? [
+                      {
+                        _data_status: QuizDataStatus.NEW,
+                        is_saved: true,
+                        answer_id: nanoid(),
+                        answer_title: '',
+                        belongs_question_id: questionId,
+                        belongs_question_type: 'pin_image',
+                        answer_two_gap_match: '',
+                        answer_view_format: 'pin_image',
+                        answer_order: 0,
+                        is_correct: '1',
+                      },
+                    ]
+                  : [],
       answer_explanation: '',
       question_mark: 1,
       question_order: questionFields.length + 1,

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

@@ -0,0 +1,78 @@
+import { css } from '@emotion/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 FormCoordinates from '@TutorShared/components/fields/quiz/questions/FormCoordinates';
+import { spacing } from '@TutorShared/config/styles';
+import { styleUtils } from '@TutorShared/utils/style-utils';
+import { QuizDataStatus, type QuizQuestionOption } from '@TutorShared/utils/types';
+import { nanoid } from '@TutorShared/utils/util';
+
+const Coordinates = () => {
+  const form = useFormContext<QuizForm>();
+  const { activeQuestionId, activeQuestionIndex, validationError, setValidationError } = useQuizModalContext();
+
+  const answersPath = `questions.${activeQuestionIndex}.question_answers` as 'questions.0.question_answers';
+
+  const { fields: optionsFields } = useFieldArray({
+    control: form.control,
+    name: answersPath,
+  });
+
+  useEffect(() => {
+    if (!activeQuestionId) {
+      return;
+    }
+    if (optionsFields.length > 0) {
+      return;
+    }
+    const baseAnswer: QuizQuestionOption = {
+      _data_status: QuizDataStatus.NEW,
+      is_saved: true,
+      answer_id: nanoid(),
+      belongs_question_id: activeQuestionId,
+      belongs_question_type: 'coordinates' as QuizQuestionOption['belongs_question_type'],
+      answer_title: '',
+      is_correct: '1',
+      image_id: undefined,
+      image_url: '',
+      answer_two_gap_match: JSON.stringify([{ x: 0, y: 0 }]),
+      answer_view_format: 'coordinates',
+      answer_order: 0,
+    };
+    form.setValue(answersPath, [baseAnswer]);
+  }, [activeQuestionId, optionsFields.length, answersPath, form]);
+
+  if (optionsFields.length === 0) {
+    return null;
+  }
+
+  return (
+    <div css={styles.optionWrapper}>
+      <Controller
+        key={JSON.stringify(optionsFields[0])}
+        control={form.control}
+        name={`questions.${activeQuestionIndex}.question_answers.0` as 'questions.0.question_answers.0'}
+        render={(controllerProps) => (
+          <FormCoordinates
+            {...controllerProps}
+            questionId={activeQuestionId}
+            validationError={validationError}
+            setValidationError={setValidationError}
+          />
+        )}
+      />
+    </div>
+  );
+};
+
+export default Coordinates;
+
+const styles = {
+  optionWrapper: css`
+    ${styleUtils.display.flex('column')};
+    padding-left: ${spacing[40]};
+  `,
+};