feat: add scale question type to quiz functionality

- Introduced a new question type 'scale' that allows instructors to set a target value on a scale for quiz questions.
- Updated relevant components to support the scale question type, including the addition of FormScale for handling scale configurations and answers.
- Enhanced the QuestionList and QuestionConditions components to include the scale option with appropriate labels and icons.
- Ensured proper integration with existing quiz handling logic and validation processes.

Author: saadman30

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: 'quizImageAnswer',
   pin_image: 'quizImageAnswer',
   coordinates: 'quizImageAnswer',
+  scale: 'quizImageAnswer',
   h5p: 'quizH5p',
 };
 

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

@@ -62,6 +62,10 @@ const questionTypes = {
     label: __('Coordinates', 'tutor'),
     icon: 'quizImageAnswer',
   },
+  scale: {
+    label: __('Scale', 'tutor'),
+    icon: 'quizImageAnswer',
+  },
   h5p: {
     label: __('H5P', 'tutor'),
     icon: 'quizTrueFalse',

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

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

@@ -122,6 +122,12 @@ const questionTypeOptions: {
     icon: 'quizImageAnswer',
     isPro: true,
   },
+  {
+    label: __('Scale', 'tutor'),
+    value: 'scale',
+    icon: 'quizImageAnswer',
+    isPro: true,
+  },
 ];
 
 const isTutorPro = !!tutorConfig.tutor_pro_url;

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

@@ -0,0 +1,90 @@
+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 FormScale from '@TutorShared/components/fields/quiz/questions/FormScale';
+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 Scale = () => {
+  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: false,
+      answer_id: nanoid(),
+      belongs_question_id: activeQuestionId,
+      belongs_question_type: 'scale' as QuizQuestionOption['belongs_question_type'],
+      answer_title: '',
+      is_correct: '1',
+      image_id: undefined,
+      image_url: '',
+      answer_two_gap_match: JSON.stringify({
+        value: 50,
+        config: {
+          min: 0,
+          max: 100,
+          step: 1,
+          defaultValue: 50,
+          pxPerUnit: 10,
+          labelEvery: 10,
+          minorTickEvery: 5,
+          precision: 0,
+        },
+      }),
+      answer_view_format: 'scale',
+      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) => (
+          <FormScale
+            {...controllerProps}
+            questionId={activeQuestionId}
+            validationError={validationError}
+            setValidationError={setValidationError}
+          />
+        )}
+      />
+    </div>
+  );
+};
+
+export default Scale;
+
+const styles = {
+  optionWrapper: css`
+    ${styleUtils.display.flex('column')};
+    padding-left: ${spacing[40]};
+  `,
+};