- {__('Use the brush to draw on the image, then click Save to store the answer zone.', __TUTOR_TEXT_DOMAIN__)}
-
{__('Answer zone saved. Students will be graded against this area.', __TUTOR_TEXT_DOMAIN__)}
@@ -443,6 +581,16 @@ const styles = {
imageInput: css`
border-radius: ${borderRadius.card};
`,
+ uploadedImageWrapper: css`
+ max-width: 100%;
+ `,
+ uploadedImage: css`
+ display: block;
+ width: 100%;
+ height: auto;
+ cursor: pointer;
+ border-radius: ${borderRadius.card};
+ `,
answerHeader: css`
${styleUtils.display.flex('row')};
align-items: center;
@@ -484,6 +632,7 @@ const styles = {
position: absolute;
top: 0;
left: 0;
+ z-index: 1;
`,
canvasIdleMode: css`
pointer-events: none;
@@ -493,15 +642,40 @@ const styles = {
pointer-events: auto;
cursor: crosshair;
`,
- actionsRow: css`
+ drawBadge: css`
+ position: absolute;
+ top: ${spacing[12]};
+ right: ${spacing[12]};
+ z-index: 2;
+ width: 32px;
+ height: 32px;
+ border-radius: 999px;
+ background: ${colorTokens.surface.tutor};
+ border: 1px solid ${colorTokens.stroke.border};
${styleUtils.display.flex('row')};
- gap: ${spacing[12]};
- flex-wrap: wrap;
- `,
- brushHint: css`
- ${typography.caption()};
+ align-items: center;
+ justify-content: center;
color: ${colorTokens.text.subdued};
- margin: 0;
+ box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
+ `,
+ clearButton: css`
+ width: 94px;
+ border: none;
+ border-radius: ${borderRadius.input};
+ background: ${colorTokens.action.secondary.default};
+ ${typography.caption('medium')};
+ color: ${colorTokens.text.brand};
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: ${spacing[8]};
+ padding: ${spacing[4]} 0;
+ `,
+ clearButtonIcon: css`
+ color: ${colorTokens.text.brand};
+ `,
+ clearIcon: css`
+ color: ${colorTokens.text.brand};
`,
savedHint: css`
${typography.caption()};
diff --git a/assets/src/js/v3/shared/components/fields/quiz/questions/FormPinImage.tsx b/assets/src/js/v3/shared/components/fields/quiz/questions/FormPinImage.tsx
new file mode 100644
index 0000000000..7dbea0fa44
--- /dev/null
+++ b/assets/src/js/v3/shared/components/fields/quiz/questions/FormPinImage.tsx
@@ -0,0 +1,667 @@
+import { css } from '@emotion/react';
+import { __ } from '@wordpress/i18n';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import ImageInput from '@TutorShared/atoms/ImageInput';
+import SVGIcon from '@TutorShared/atoms/SVGIcon';
+
+import { borderRadius, Breakpoint, colorTokens, spacing } from '@TutorShared/config/styles';
+import { typography } from '@TutorShared/config/typography';
+import Show from '@TutorShared/controls/Show';
+import useWPMedia from '@TutorShared/hooks/useWpMedia';
+import type { FormControllerProps } from '@TutorShared/utils/form';
+import { calculateQuizDataStatus } from '@TutorShared/utils/quiz';
+import { styleUtils } from '@TutorShared/utils/style-utils';
+import {
+ type ID,
+ QuizDataStatus,
+ type QuizQuestionOption,
+ type QuizValidationErrorType,
+} from '@TutorShared/utils/types';
+
+const LASSO_FILL_STYLE = 'rgba(220, 53, 69, 0.45)';
+const LASSO_STROKE_STYLE = 'rgba(220, 53, 69, 0.95)';
+const LASSO_DASH_PATTERN = [8, 6];
+const LASSO_MIN_POINT_DISTANCE = 4;
+
+interface FormPinImageProps extends FormControllerProps {
+ questionId: ID;
+ validationError?: {
+ message: string;
+ type: QuizValidationErrorType;
+ } | null;
+ setValidationError?: React.Dispatch<
+ React.SetStateAction<{
+ message: string;
+ type: QuizValidationErrorType;
+ } | null>
+ >;
+}
+
+const FormPinImage = ({ field }: FormPinImageProps) => {
+ const option = field.value;
+
+ const [isDrawModeActive, setIsDrawModeActive] = useState(false);
+
+ const imageRef = useRef(null);
+ const canvasRef = useRef(null);
+ const drawInstanceRef = useRef<{ destroy: () => void } | null>(null);
+ const isLassoDrawingRef = useRef(false);
+ const lassoPointsRef = useRef>([]);
+ const baseImageDataRef = useRef(null);
+
+ const updateOption = useCallback(
+ (updated: QuizQuestionOption) => {
+ field.onChange(updated);
+ },
+ [field],
+ );
+
+ /** Display-only: sync canvas size and draw saved mask when not in draw mode. */
+ const syncCanvasDisplay = useCallback((maskUrl?: string) => {
+ const img = imageRef.current;
+ const canvas = canvasRef.current;
+
+ if (!img || !canvas) {
+ return;
+ }
+
+ if (!img.complete) {
+ return;
+ }
+
+ const container = img.parentElement;
+ if (!container) {
+ return;
+ }
+
+ const rect = container.getBoundingClientRect();
+ const width = Math.round(rect.width);
+ const height = Math.round(rect.height);
+
+ if (!width || !height) {
+ return;
+ }
+
+ canvas.width = width;
+ canvas.height = height;
+ canvas.style.position = 'absolute';
+ canvas.style.top = '0';
+ canvas.style.left = '0';
+ canvas.style.width = '100%';
+ canvas.style.height = '100%';
+
+ const ctx = canvas.getContext('2d');
+ if (!ctx) {
+ return;
+ }
+
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ if (maskUrl) {
+ const maskImg = new Image();
+ maskImg.onload = () => {
+ ctx.drawImage(maskImg, 0, 0, canvas.width, canvas.height);
+ };
+ maskImg.src = maskUrl;
+ }
+ }, []);
+
+ const { openMediaLibrary, resetFiles } = useWPMedia({
+ options: {
+ type: 'image',
+ },
+ onChange: (file) => {
+ if (file && !Array.isArray(file) && option) {
+ const { id, url } = file;
+ // Clear previous draw when image is replaced — the saved mask was for the old image.
+ const updated: QuizQuestionOption = {
+ ...option,
+ ...(calculateQuizDataStatus(option._data_status, QuizDataStatus.UPDATE) && {
+ _data_status: calculateQuizDataStatus(option._data_status, QuizDataStatus.UPDATE) as QuizDataStatus,
+ }),
+ image_id: id,
+ image_url: url,
+ answer_two_gap_match: '',
+ };
+ updateOption(updated);
+ // Clean up draw instance and canvas so the new image shows without the old mask.
+ if (drawInstanceRef.current) {
+ drawInstanceRef.current.destroy();
+ drawInstanceRef.current = null;
+ }
+ setIsDrawModeActive(false);
+ }
+ },
+ initialFiles: option?.image_id
+ ? {
+ id: Number(option.image_id),
+ url: option.image_url || '',
+ title: option.image_url || '',
+ }
+ : null,
+ });
+
+ // Display-only sync when not in draw mode (saved mask + canvas size).
+ useEffect(() => {
+ if (isDrawModeActive) {
+ return;
+ }
+ syncCanvasDisplay(option?.answer_two_gap_match || undefined);
+ }, [isDrawModeActive, option?.image_url, option?.answer_two_gap_match, syncCanvasDisplay]);
+
+ useEffect(() => {
+ if (isDrawModeActive) {
+ return;
+ }
+ const img = imageRef.current;
+ if (!img) {
+ return;
+ }
+ const handleLoad = () => {
+ syncCanvasDisplay(option?.answer_two_gap_match || undefined);
+ };
+ img.addEventListener('load', handleLoad);
+ return () => {
+ img.removeEventListener('load', handleLoad);
+ };
+ }, [isDrawModeActive, option?.answer_two_gap_match, syncCanvasDisplay]);
+
+ useEffect(() => {
+ if (isDrawModeActive) {
+ return;
+ }
+ const img = imageRef.current;
+ const canvas = canvasRef.current;
+ if (!img || !canvas) {
+ return;
+ }
+ const container = img.parentElement;
+ if (!container) {
+ return;
+ }
+ const resizeObserver = new ResizeObserver(() => {
+ syncCanvasDisplay(option?.answer_two_gap_match || undefined);
+ });
+ resizeObserver.observe(container);
+ return () => {
+ resizeObserver.disconnect();
+ };
+ }, [isDrawModeActive, option?.image_url, option?.answer_two_gap_match, syncCanvasDisplay]);
+
+ // Pin image uses lasso-style polygon drawing for marking the valid pin zone.
+ useEffect(() => {
+ if (!isDrawModeActive || !option?.image_url) {
+ return;
+ }
+ const canvas = canvasRef.current;
+ if (!canvas) {
+ return;
+ }
+
+ if (drawInstanceRef.current) {
+ drawInstanceRef.current.destroy();
+ drawInstanceRef.current = null;
+ }
+
+ const getPointFromEvent = (event: PointerEvent) => {
+ const rect = canvas.getBoundingClientRect();
+ const scaleX = canvas.width / rect.width;
+ const scaleY = canvas.height / rect.height;
+ const x = (event.clientX - rect.left) * scaleX;
+ const y = (event.clientY - rect.top) * scaleY;
+ return {
+ x: Math.max(0, Math.min(canvas.width, x)),
+ y: Math.max(0, Math.min(canvas.height, y)),
+ };
+ };
+
+ const renderPathPreview = () => {
+ const ctx = canvas.getContext('2d');
+ if (!ctx) {
+ return;
+ }
+
+ const points = lassoPointsRef.current;
+ if (!baseImageDataRef.current || points.length < 2) {
+ return;
+ }
+
+ ctx.putImageData(baseImageDataRef.current, 0, 0);
+ ctx.beginPath();
+ ctx.moveTo(points[0]?.x || 0, points[0]?.y || 0);
+ points.forEach((point, index) => {
+ if (index > 0) {
+ ctx.lineTo(point.x, point.y);
+ }
+ });
+ ctx.lineTo(points[0]?.x || 0, points[0]?.y || 0);
+ ctx.closePath();
+
+ ctx.fillStyle = LASSO_FILL_STYLE;
+ ctx.fill();
+
+ ctx.setLineDash(LASSO_DASH_PATTERN);
+ ctx.lineWidth = 2;
+ ctx.strokeStyle = LASSO_STROKE_STYLE;
+ ctx.stroke();
+ ctx.setLineDash([]);
+ };
+
+ const onPointerDown = (event: PointerEvent) => {
+ if (event.button !== 0) {
+ return;
+ }
+ const ctx = canvas.getContext('2d');
+ if (!ctx) {
+ return;
+ }
+ canvas.setPointerCapture(event.pointerId);
+ isLassoDrawingRef.current = true;
+ lassoPointsRef.current = [getPointFromEvent(event)];
+ baseImageDataRef.current = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ };
+
+ const onPointerMove = (event: PointerEvent) => {
+ if (!isLassoDrawingRef.current) {
+ return;
+ }
+ const nextPoint = getPointFromEvent(event);
+ const points = lassoPointsRef.current;
+ const lastPoint = points[points.length - 1];
+ if (!lastPoint) {
+ points.push(nextPoint);
+ renderPathPreview();
+ return;
+ }
+ const dx = nextPoint.x - lastPoint.x;
+ const dy = nextPoint.y - lastPoint.y;
+ if (Math.hypot(dx, dy) < LASSO_MIN_POINT_DISTANCE) {
+ return;
+ }
+ points.push(nextPoint);
+ renderPathPreview();
+ };
+
+ const finishLasso = () => {
+ if (!isLassoDrawingRef.current) {
+ return;
+ }
+ isLassoDrawingRef.current = false;
+ const points = lassoPointsRef.current;
+ if (points.length >= 3) {
+ renderPathPreview();
+ } else if (baseImageDataRef.current) {
+ const ctx = canvas.getContext('2d');
+ ctx?.putImageData(baseImageDataRef.current, 0, 0);
+ }
+ lassoPointsRef.current = [];
+ baseImageDataRef.current = null;
+ };
+
+ const onPointerUp = (event: PointerEvent) => {
+ if (canvas.hasPointerCapture(event.pointerId)) {
+ canvas.releasePointerCapture(event.pointerId);
+ }
+ finishLasso();
+ };
+
+ const onPointerCancel = (event: PointerEvent) => {
+ if (canvas.hasPointerCapture(event.pointerId)) {
+ canvas.releasePointerCapture(event.pointerId);
+ }
+ finishLasso();
+ };
+
+ canvas.addEventListener('pointerdown', onPointerDown);
+ canvas.addEventListener('pointermove', onPointerMove);
+ canvas.addEventListener('pointerup', onPointerUp);
+ canvas.addEventListener('pointercancel', onPointerCancel);
+
+ const instance = {
+ destroy: () => {
+ canvas.removeEventListener('pointerdown', onPointerDown);
+ canvas.removeEventListener('pointermove', onPointerMove);
+ canvas.removeEventListener('pointerup', onPointerUp);
+ canvas.removeEventListener('pointercancel', onPointerCancel);
+ isLassoDrawingRef.current = false;
+ lassoPointsRef.current = [];
+ baseImageDataRef.current = null;
+ },
+ };
+ drawInstanceRef.current = instance;
+
+ return () => {
+ instance.destroy();
+ drawInstanceRef.current = null;
+ };
+ }, [isDrawModeActive, option?.image_url, option?.answer_two_gap_match]);
+
+ // Cleanup shared instance on unmount.
+ useEffect(() => {
+ return () => {
+ if (drawInstanceRef.current) {
+ drawInstanceRef.current.destroy();
+ drawInstanceRef.current = null;
+ }
+ };
+ }, []);
+
+ const persistCanvasMask = useCallback(() => {
+ const canvas = canvasRef.current;
+ if (!canvas || !option) {
+ return;
+ }
+
+ const dataUrl = canvas.toDataURL('image/png');
+ const blank = document.createElement('canvas');
+ blank.width = canvas.width;
+ blank.height = canvas.height;
+ const isEmpty = dataUrl === blank.toDataURL();
+
+ const updated: QuizQuestionOption = {
+ ...option,
+ ...(calculateQuizDataStatus(option._data_status, QuizDataStatus.UPDATE) && {
+ _data_status: calculateQuizDataStatus(option._data_status, QuizDataStatus.UPDATE) as QuizDataStatus,
+ }),
+ answer_two_gap_match: isEmpty ? '' : dataUrl,
+ is_saved: true,
+ };
+ updateOption(updated);
+ }, [option, updateOption]);
+
+ const handleClear = () => {
+ if (!option) {
+ return;
+ }
+
+ if (drawInstanceRef.current) {
+ drawInstanceRef.current.destroy();
+ drawInstanceRef.current = null;
+ }
+
+ const canvas = canvasRef.current;
+ if (canvas) {
+ const ctx = canvas.getContext('2d');
+ ctx?.clearRect(0, 0, canvas.width, canvas.height);
+ }
+
+ const updated: QuizQuestionOption = {
+ ...option,
+ ...(calculateQuizDataStatus(option._data_status, QuizDataStatus.UPDATE) && {
+ _data_status: calculateQuizDataStatus(option._data_status, QuizDataStatus.UPDATE) as QuizDataStatus,
+ }),
+ answer_two_gap_match: '',
+ is_saved: true,
+ };
+ updateOption(updated);
+ };
+
+ const handleCanvasMouseEnter = () => {
+ setIsDrawModeActive(true);
+ };
+
+ const handleCanvasMouseLeave = () => {
+ if (!isLassoDrawingRef.current) {
+ setIsDrawModeActive(false);
+ }
+ };
+
+ const clearImage = () => {
+ if (!option) {
+ return;
+ }
+
+ if (drawInstanceRef.current) {
+ drawInstanceRef.current.destroy();
+ drawInstanceRef.current = null;
+ }
+ setIsDrawModeActive(false);
+
+ const updated: QuizQuestionOption = {
+ ...option,
+ ...(calculateQuizDataStatus(option._data_status, QuizDataStatus.UPDATE) && {
+ _data_status: calculateQuizDataStatus(option._data_status, QuizDataStatus.UPDATE) as QuizDataStatus,
+ }),
+ image_id: undefined,
+ image_url: '',
+ };
+
+ updateOption(updated);
+ resetFiles();
+
+ const canvas = canvasRef.current;
+ if (canvas) {
+ const ctx = canvas.getContext('2d');
+ ctx?.clearRect(0, 0, canvas.width, canvas.height);
+ }
+ };
+
+ useEffect(() => {
+ if (!isDrawModeActive || !option?.image_url) {
+ return;
+ }
+ const canvas = canvasRef.current;
+ if (!canvas) {
+ return;
+ }
+
+ const onPointerUp = () => {
+ persistCanvasMask();
+ };
+
+ canvas.addEventListener('pointerup', onPointerUp);
+ canvas.addEventListener('pointercancel', onPointerUp);
+
+ return () => {
+ canvas.removeEventListener('pointerup', onPointerUp);
+ canvas.removeEventListener('pointercancel', onPointerUp);
+ };
+ }, [isDrawModeActive, option?.image_url, persistCanvasMask]);
+
+ if (!option) {
+ return null;
+ }
+
+ return (
+
+ {/* Section 1: Image upload only — one reference shown for pin-area quizzes */}
+
+
+ {/* Section 2: Mark the valid pin area — drawing auto-enables on image hover */}
+
+
+
+
+
+
+
+ {__('Mark the correct area', __TUTOR_TEXT_DOMAIN__)}
+
+
+
+
+
+
+
+
+
+
+
+ {__('Pin area saved. Students will be graded against this region.', __TUTOR_TEXT_DOMAIN__)}
+
+
+
+
+
+
+ {__(
+ 'Upload an image to define where students must drop a pin. Then mark the valid area in the next section.',
+ __TUTOR_TEXT_DOMAIN__,
+ )}
+
+
+
+
+
+
; ?>)
+
+
+
+
+
+
+
+
+
+
"
+ role="presentation"
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
"
+ role="presentation"
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
; ?>)
+
+
+
+
+
+
+
+
+
+
+
+
+
 ? esc_attr( $given_src_for_img ) : esc_url( $given_src_for_img ); ?>)
+
+
+
+
+
+
+
+
+
+
+
+
+
 ? esc_attr( $ref_src_for_img ) : esc_url( $ref_src_for_img ); ?>)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
; ?>)
+
+
"
+ role="presentation"
+ >
+
+
+
+
+
+
+
+ "
+ role="presentation"
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
$question ) : ?>
question_type ?? '';
- $question_id = (int) ( $question->question_id ?? 0 );
- $is_dnd_review = in_array( $question_type, array( 'image_answering', 'ordering', 'matching', 'image_matching' ), true );
- $is_tf_review = 'true_false' === $question_type;
- $is_mc_review = in_array( $question_type, array( 'single_choice', 'multiple_choice' ), true );
- $is_oe_review = in_array( $question_type, array( 'open_ended', 'short_answer' ), true );
- $is_fib_review = 'fill_in_the_blank' === $question_type;
- $attempt_answer = $attempt_answers_map[ $question_id ] ?? null;
+ $question_type = $question->question_type ?? '';
+
+ $question_id = (int) ( $question->question_id ?? 0 );
+
+ $is_dnd_review = in_array( $question_type, array( 'image_answering', 'ordering', 'matching', 'image_matching' ), true );
+
+ $is_tf_review = 'true_false' === $question_type;
+
+ $is_mc_review = in_array( $question_type, array( 'single_choice', 'multiple_choice' ), true );
+
+ $is_oe_review = in_array( $question_type, array( 'open_ended', 'short_answer' ), true );
+
+ $is_fib_review = 'fill_in_the_blank' === $question_type;
+
+ $is_draw_image_review = 'draw_image' === $question_type;
+
+ $is_pin_review = 'pin_image' === $question_type;
+
+ $attempt_answer = $attempt_answers_map[ $question_id ] ?? null;
+
$question_template = '';
if ( $is_dnd_review ) {
@@ -54,6 +66,10 @@
$question_template = 'open-ended';
} elseif ( $is_fib_review ) {
$question_template = 'fill-in-the-blank';
+ } elseif ( $is_pin_review ) {
+ $question_template = 'pin-image';
+ } elseif ( $is_draw_image_review ) {
+ $question_template = 'draw-image';
}
?>
diff --git a/views/quiz/attempt-details.php b/views/quiz/attempt-details.php
index 0cc4205300..776d7f24eb 100644
--- a/views/quiz/attempt-details.php
+++ b/views/quiz/attempt-details.php
@@ -544,7 +544,7 @@ function tutor_render_fill_in_the_blank_answer( $get_db_answers_by_question, $an
} else {
/**
* Allow Pro and add-ons to render given answer for custom question types.
- * Pro handles draw_image via this action.
+ * Pro handles draw_image and pin_image via this action.
*
* @param object $answer Answer object.
*/
@@ -722,7 +722,7 @@ function( $ans ) {
else {
/**
* Allow Pro and add-ons to render correct answer for custom question types.
- * Pro handles draw_image via this action.
+ * Pro handles draw_image and pin_image via this action.
*
* @param object $answer Answer object.
*/