diff --git a/src/components/BuilderCore/shared/quizUtils.ts b/src/components/BuilderCore/shared/quizUtils.ts
index 6e660f9..6c04183 100644
--- a/src/components/BuilderCore/shared/quizUtils.ts
+++ b/src/components/BuilderCore/shared/quizUtils.ts
@@ -1,3 +1,5 @@
+import type { FieldOption } from "./types";
+
const QUIZ_SUPPORTED_TYPES = ["radio", "select"] as const;
type QuizSupportedType = (typeof QUIZ_SUPPORTED_TYPES)[number];
@@ -9,17 +11,51 @@ export function arraysEqual(a: string[], b: string[]): boolean {
if (a.length !== b.length) return false;
const sortedA = [...a].sort();
const sortedB = [...b].sort();
- return sortedA.every((v, i) => v === sortedB[i]);
+ return sortedA.every(
+ (v, i) => v.trim().toLowerCase() === sortedB[i].trim().toLowerCase(),
+ );
+}
+
+function normalizeOptionValue(val: unknown, options?: FieldOption[]): string {
+ const str = String(val ?? "").trim();
+ if (!options || options.length === 0) return str;
+ const found = options.find(
+ (o) =>
+ o.label.trim().toLowerCase() === str.toLowerCase() ||
+ o.value.trim().toLowerCase() === str.toLowerCase(),
+ );
+ return found ? found.value : str;
}
export function isAnswerCorrect(
userAnswer: unknown,
correctAnswer: string | string[] | undefined,
+ options?: FieldOption[],
): boolean {
- if (correctAnswer === undefined) return false;
+ if (
+ correctAnswer === undefined ||
+ correctAnswer === null ||
+ correctAnswer === ""
+ ) {
+ return false;
+ }
+
if (Array.isArray(correctAnswer)) {
- const user = Array.isArray(userAnswer) ? userAnswer : [];
- return arraysEqual(user, correctAnswer);
+ const rawUserList = Array.isArray(userAnswer)
+ ? userAnswer
+ : userAnswer !== undefined && userAnswer !== null && userAnswer !== ""
+ ? [userAnswer]
+ : [];
+ const normalizedUser = rawUserList.map((v) =>
+ normalizeOptionValue(v, options),
+ );
+ const normalizedCorrect = correctAnswer.map((v) =>
+ normalizeOptionValue(v, options),
+ );
+ return arraysEqual(normalizedUser, normalizedCorrect);
}
- return userAnswer === correctAnswer;
+
+ const normUser = normalizeOptionValue(userAnswer, options);
+ const normCorrect = normalizeOptionValue(correctAnswer, options);
+ return normUser.toLowerCase() === normCorrect.toLowerCase();
}
diff --git a/src/components/common/FileUpload.tsx b/src/components/common/FileUpload.tsx
index 86137a5..adadddd 100644
--- a/src/components/common/FileUpload.tsx
+++ b/src/components/common/FileUpload.tsx
@@ -1,6 +1,7 @@
-import { useRef } from "react";
+import { useRef, useState, useId } from "react";
interface FileUploadProps {
+ id?: string;
label: string;
name?: string;
accept?: string;
@@ -10,9 +11,11 @@ interface FileUploadProps {
isUploading?: boolean;
subtitle?: string;
value?: string;
+ maxSize?: number;
}
function FileUpload({
+ id,
label,
name,
accept,
@@ -22,8 +25,13 @@ function FileUpload({
isUploading = false,
subtitle,
value = "",
+ maxSize = 10 * 1024 * 1024,
}: FileUploadProps) {
const inputRef = useRef
(null);
+ const [validationError, setValidationError] = useState(null);
+ const generatedId = useId();
+ const inputId = id || (name ? `field-${name}` : generatedId);
+ const errorId = `${inputId}-error`;
const handleClick = () => {
if (!disabled && inputRef.current) {
@@ -31,10 +39,28 @@ function FileUpload({
}
};
+ const handleChange = (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (file) {
+ if (file.size > maxSize) {
+ setValidationError(
+ `File size exceeds ${(maxSize / (1024 * 1024)).toFixed(0)}MB limit.`,
+ );
+ if (inputRef.current) inputRef.current.value = "";
+ return;
+ }
+ setValidationError(null);
+ }
+ onChange?.(e);
+ };
+
return (
{label && (
-
-
-
-
-
-
{title}
+ const dialogRef = useRef
(null);
+ const titleId = useId();
+
+ useEffect(() => {
+ const dialog = dialogRef.current;
+ if (!dialog) return;
+
+ if (isOpen) {
+ if (!dialog.open) {
+ dialog.showModal();
+ }
+ } else {
+ if (dialog.open) {
+ dialog.close();
+ }
+ }
+ }, [isOpen]);
+
+ const handleBackdropClick = (e: React.MouseEvent) => {
+ const dialog = dialogRef.current;
+ if (!dialog || e.target !== dialog) return;
+
+ const rect = dialog.getBoundingClientRect();
+ const isInside =
+ rect.top <= e.clientY &&
+ e.clientY <= rect.top + rect.height &&
+ rect.left <= e.clientX &&
+ e.clientX <= rect.left + rect.width;
+
+ if (!isInside) {
+ onClose();
+ }
+ };
+
+ const handleCancel = (e: React.SyntheticEvent) => {
+ e.preventDefault();
+ onClose();
+ };
+
+ return (
+
);
};
diff --git a/src/components/common/Select.tsx b/src/components/common/Select.tsx
index be00f17..10d0cef 100644
--- a/src/components/common/Select.tsx
+++ b/src/components/common/Select.tsx
@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import { forwardRef, useId } from "react";
interface Option {
label: string;
@@ -9,11 +9,14 @@ interface SelectProps {
title: string;
options: Option[];
name?: string;
+ id?: string;
value?: string;
onChange?: (e: React.ChangeEvent) => void;
placeholder?: string;
subtitle?: string;
disabled?: boolean;
+ required?: boolean;
+ error?: string;
}
const Select = forwardRef(
@@ -22,28 +25,60 @@ const Select = forwardRef(
title,
options,
name,
+ id,
value,
onChange,
placeholder = "Select an option",
subtitle,
disabled,
+ required,
+ error,
},
ref,
) => {
+ const generatedId = useId();
+ const selectId = id || name || generatedId;
+ const descId = subtitle ? `${selectId}-desc` : undefined;
+ const errorId = error ? `${selectId}-error` : undefined;
+
return (
-
+
+ {error}
+
+ )}
);
},
diff --git a/src/components/common/ShareModal.tsx b/src/components/common/ShareModal.tsx
index 1886660..46c32f2 100644
--- a/src/components/common/ShareModal.tsx
+++ b/src/components/common/ShareModal.tsx
@@ -1,6 +1,7 @@
import Modal from "./Modal";
import Button from "./Button";
import { useState } from "react";
+import { useToast } from "./toastContext";
interface ShareModalProps {
isOpen: boolean;
@@ -14,11 +15,13 @@ export default function ShareModal({
shareUrl,
}: ShareModalProps) {
const [copied, setCopied] = useState(false);
+ const { showToast } = useToast();
const fullShareUrl = `${window.location.origin}/forms/${shareUrl}`;
const handleCopy = () => {
navigator.clipboard.writeText(fullShareUrl);
setCopied(true);
+ showToast("Share link copied to clipboard!", "success");
setTimeout(() => setCopied(false), 2000);
};
@@ -48,7 +51,9 @@ export default function ShareModal({