Feat: quiz type jigsaw

assets/src/js/front/course/_spotlight-quiz.js

@@ -2,7 +2,7 @@ window.jQuery(document).ready($ => {
     const { __ } = window.wp.i18n;
 
     // Currently only these types of question supports answer reveal mode.
-    const revealModeSupportedQuestions = ['true_false', 'single_choice', 'multiple_choice', 'draw_image'];
+    const revealModeSupportedQuestions = ['true_false', 'single_choice', 'multiple_choice', 'draw_image', 'jigsaw'];
 
     let quiz_options = _tutorobject.quiz_options
     let interactions = new Map();
@@ -108,6 +108,11 @@ window.jQuery(document).ready($ => {
             $question_wrap.find('.tutor-draw-image-reference-wrapper').removeClass('tutor-d-none');
             goNext = true;
         }
+        // Reveal mode for jigsaw: show explanation.
+        if (is_reveal_mode() && $question_wrap.data('question-type') === 'jigsaw') {
+            $question_wrap.find('.tutor-quiz-explanation-wrapper').removeClass('tutor-d-none');
+            goNext = true;
+        }
 
         if (validatedTrue) {
             goNext = true;
@@ -172,9 +177,20 @@ window.jQuery(document).ready($ => {
                     var $maskInput = $required_answer_wrap.find('input[name*="[answers][mask]"]');
                     if ($maskInput.length && !$maskInput.val().trim().length) {
                         $question_wrap.find('.answer-help-block').html(`<p style="color: #dc3545">${__('Please draw on the image to answer this question.', 'tutor')}</p>`);
-                        validated = false;
+                        $question_wrap.find('.tutor-quiz-next-btn-all').prop('disabled', true);
+                        return;
+                    }
+                }
+                // Jigsaw: require [answers][solved] to have value "solved".
+                if ($question_wrap.data('question-type') === 'jigsaw') {
+                    var $solvedInput = $required_answer_wrap.find('input[name*="[answers][solved]"]');
+                    if ($solvedInput.length && $solvedInput.val() !== 'solved') {
+                        $question_wrap.find('.answer-help-block').html(`<p style="color: #dc3545">${__('Please solve the puzzle to answer this question.', 'tutor')}</p>`);
+                        $question_wrap.find('.tutor-quiz-next-btn-all').prop('disabled', true);
+                        return;
                     }
-                } else if ($type === 'radio') {
+                }
+                else if ($type === 'radio') {
                     if ($required_answer_wrap.find('input[type="radio"]:checked').length == 0) {
                         $question_wrap.find('.answer-help-block').html(`<p style="color: #dc3545">${__('Please select an option to answer', 'tutor')}</p>`);
                         validated = false;
@@ -239,6 +255,12 @@ window.jQuery(document).ready($ => {
         }
     });
 
+    $(document).on('change', '.quiz-attempt-single-question input[name*="[answers][solved]"]', function () {
+        if ($('.tutor-quiz-time-expired').length === 0 && $(this).val() === 'solved') {
+            $('.tutor-quiz-next-btn-all').prop('disabled', false);
+        }
+    });
+
     $(document).on('click', '.tutor-quiz-answer-next-btn, .tutor-quiz-answer-previous-btn', function (e) {
         e.preventDefault();
 

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

@@ -40,6 +40,7 @@ const questionTypeIconMap: Record<Exclude<QuizQuestionType, 'single_choice' | 'i
   image_answering: 'quizImageAnswer',
   ordering: 'quizOrdering',
   draw_image: 'quizImageAnswer',
+  jigsaw: 'quizImageAnswer',
   h5p: 'quizH5p',
 };
 

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

@@ -54,6 +54,10 @@ const questionTypes = {
     label: __('Draw on Image', 'tutor'),
     icon: 'quizImageAnswer',
   },
+  jigsaw: {
+    label: __('Jigsaw', 'tutor'),
+    icon: 'quizImageAnswer',
+  },
   h5p: {
     label: __('H5P', 'tutor'),
     icon: 'quizTrueFalse',

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

@@ -16,6 +16,7 @@ import MultipleChoiceAndOrdering from '@CourseBuilderComponents/curriculum/quest
 import OpenEndedAndShortAnswer from '@CourseBuilderComponents/curriculum/question-types/OpenEndedAndShortAnswer';
 import TrueFalse from '@CourseBuilderComponents/curriculum/question-types/TrueFalse';
 import DrawImage from '@CourseBuilderComponents/curriculum/question-types/DrawImage';
+import Jigsaw from '@CourseBuilderComponents/curriculum/question-types/Jigsaw';
 import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext';
 
 import { tutorConfig } from '@TutorShared/config/config';
@@ -56,6 +57,7 @@ const QuestionForm = () => {
     image_answering: <ImageAnswering key={activeQuestionId} />,
     ordering: <MultipleChoiceAndOrdering key={activeQuestionId} />,
     draw_image: <DrawImage key={activeQuestionId} />,
+    jigsaw: <Jigsaw key={activeQuestionId} />,
   } as const;
 
   useEffect(() => {

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

@@ -110,6 +110,12 @@ const questionTypeOptions: {
     icon: 'quizImageAnswer',
     isPro: true,
   },
+  {
+    label: __('Jigsaw', 'tutor'),
+    value: 'jigsaw',
+    icon: 'quizImageAnswer',
+    isPro: true,
+  },
 ];
 
 const isTutorPro = !!tutorConfig.tutor_pro_url;
@@ -230,7 +236,26 @@ const QuestionList = ({ isEditing }: { isEditing: boolean }) => {
                     is_correct: '1',
                   },
                 ]
-              : [],
+              : questionType === 'jigsaw'
+                ? [
+                    {
+                      _data_status: QuizDataStatus.NEW,
+                      is_saved: false,
+                      answer_id: nanoid(),
+                      answer_title: '',
+                      belongs_question_id: questionId,
+                      belongs_question_type: 'jigsaw',
+                      answer_two_gap_match: JSON.stringify({
+                        nbPieces: 12,
+                        shape: 0,
+                        rotationAllowed: false,
+                      }),
+                      answer_view_format: 'jigsaw',
+                      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/Jigsaw.tsx

@@ -0,0 +1,82 @@
+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 FormJigsaw from '@TutorShared/components/fields/quiz/questions/FormJigsaw';
+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 Jigsaw = () => {
+  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: 'jigsaw' as QuizQuestionOption['belongs_question_type'],
+      answer_title: '',
+      is_correct: '1',
+      image_id: undefined,
+      image_url: '',
+      answer_two_gap_match: JSON.stringify({
+        nbPieces: 12,
+        shape: 0,
+        rotationAllowed: false,
+      }),
+      answer_view_format: 'jigsaw',
+      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) => (
+          <FormJigsaw
+            {...controllerProps}
+            questionId={activeQuestionId}
+            validationError={validationError}
+            setValidationError={setValidationError}
+          />
+        )}
+      />
+    </div>
+  );
+};
+
+export default Jigsaw;
+
+const styles = {
+  optionWrapper: css`
+    ${styleUtils.display.flex('column')};
+    padding-left: ${spacing[40]};
+  `,
+};