- Drills
-- Train your speed and accuracy with our drill-based testing system. -
-
-
+
+
+
+ {/* Blobs */}
+
+
+
+
+
+ {/* Dots */}
+ {DOTS.map((d, i) => (
+
+ ))}
+
+
+ {/* Header */}
+ (null);
-
const { setMode, storeDuration, setSection } = useExamConfigStore();
function handleStartModule() {
- if (!user) return;
-
- (setMode("MODULE"), storeDuration(7), setSection(selected));
-
+ if (!user || !selected) return;
+ setMode("MODULE");
+ storeDuration(7);
+ setSection(selected);
navigate(`/student/practice/${selected}/test`, { replace: true });
}
+
+ const toggle = (mod: "EBRW" | "MATH") =>
+ setSelected((prev) => (prev === mod ? null : mod));
+
return (
-
-
-
-
-
- setSelected((prev) => (prev === "EBRW" ? null : "EBRW"))
+
+
+
+
+ {/* Progress */}
+
+
+
+
+ {step === "topic" ? "Pick your topics" : "Review & launch"} +
++ {step === "topic" + ? "Choose what you want to drill. Speed and accuracy await." + : "Everything look good? Time to drill."} +
+
+
+
+ {/* Step content */}
+
+
+
+
+ {STEPS.map((s, i) => (
+
+ {s === "topic" ? "Topics" : "Review"}
+
+ ))}
+
+
+
+ {/* Step 1 — Topic */}
{step === "topic" && (
-
);
};
diff --git a/src/pages/student/hard-test-modules/page.tsx b/src/pages/student/hard-test-modules/page.tsx
index 3199623..76f779b 100644
--- a/src/pages/student/hard-test-modules/page.tsx
+++ b/src/pages/student/hard-test-modules/page.tsx
@@ -5,8 +5,8 @@ import {
Pilcrow,
Superscript,
WholeWord,
+ Trophy,
} from "lucide-react";
-import { Card, CardContent } from "../../../components/ui/card";
import { useState } from "react";
import { useAuthStore } from "../../../stores/authStore";
import { useNavigate } from "react-router-dom";
@@ -14,106 +14,425 @@ import { useExamConfigStore } from "../../../stores/useExamConfigStore";
type Module = "EBRW" | "MATH" | null;
+const DOTS = [
+ { size: 10, color: "#f97316", top: "6%", left: "4%", delay: "0s" },
+ { size: 7, color: "#a855f7", top: "28%", left: "2%", delay: "1.2s" },
+ { size: 9, color: "#22c55e", top: "62%", left: "3%", delay: "0.6s" },
+ { size: 12, color: "#3b82f6", top: "10%", right: "4%", delay: "1.8s" },
+ { size: 7, color: "#f43f5e", top: "48%", right: "2%", delay: "0.9s" },
+ { size: 9, color: "#eab308", top: "76%", right: "5%", delay: "0.4s" },
+];
+
+const STYLES = `
+ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
+
+ .htm-screen {
+ min-height: 100vh;
+ background: #fffbf4;
+ font-family: 'Nunito', sans-serif;
+ position: relative;
+ overflow-x: hidden;
+ }
+
+ .htm-blob { position:fixed;pointer-events:none;z-index:0;filter:blur(48px);opacity:0.35; }
+ .htm-blob-1 { width:240px;height:240px;background:#fde68a;top:-80px;left:-80px;border-radius:60% 40% 70% 30%/50% 60% 40% 50%;animation:htmWobble1 14s ease-in-out infinite; }
+ .htm-blob-2 { width:190px;height:190px;background:#a5f3c0;bottom:-50px;left:6%;border-radius:40% 60% 30% 70%/60% 40% 60% 40%;animation:htmWobble2 16s ease-in-out infinite; }
+ .htm-blob-3 { width:210px;height:210px;background:#fbcfe8;top:15%;right:-60px;border-radius:70% 30% 50% 50%/40% 60% 40% 60%;animation:htmWobble1 18s ease-in-out infinite reverse; }
+ .htm-blob-4 { width:150px;height:150px;background:#bfdbfe;bottom:12%;right:2%;border-radius:50% 50% 30% 70%/60% 40% 60% 40%;animation:htmWobble2 12s ease-in-out infinite; }
+
+ @keyframes htmWobble1 {
+ 0%,100%{border-radius:60% 40% 70% 30%/50% 60% 40% 50%;transform:translate(0,0) rotate(0deg);}
+ 50%{border-radius:40% 60% 30% 70%/60% 40% 60% 40%;transform:translate(12px,16px) rotate(8deg);}
+ }
+ @keyframes htmWobble2 {
+ 0%,100%{border-radius:40% 60% 30% 70%/60% 40% 60% 40%;transform:translate(0,0) rotate(0deg);}
+ 50%{border-radius:60% 40% 70% 30%/40% 60% 40% 60%;transform:translate(-10px,12px) rotate(-6deg);}
+ }
+
+ .htm-dot { position:fixed;border-radius:50%;pointer-events:none;z-index:0;opacity:0.3;animation:htmFloat 7s ease-in-out infinite; }
+ @keyframes htmFloat {
+ 0%,100%{transform:translateY(0) rotate(0deg);}
+ 50%{transform:translateY(-12px) rotate(180deg);}
+ }
+
+ .htm-inner {
+ position: relative; z-index: 1;
+ max-width: 560px; margin: 0 auto;
+ padding: 2rem 1.25rem 8rem;
+ display: flex; flex-direction: column; gap: 1.5rem;
+ }
+
+ @keyframes htmPopIn {
+ from { opacity:0; transform:scale(0.92) translateY(12px); }
+ to { opacity:1; transform:scale(1) translateY(0); }
+ }
+ .htm-anim { animation: htmPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
+ .htm-anim-1 { animation-delay: 0.05s; }
+ .htm-anim-2 { animation-delay: 0.12s; }
+ .htm-anim-3 { animation-delay: 0.19s; }
+
+ /* Header */
+ .htm-eyebrow {
+ font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em;
+ text-transform: uppercase; color: #84cc16;
+ display: flex; align-items: center; gap: 0.35rem;
+ }
+ .htm-title {
+ font-size: 1.75rem; font-weight: 900; color: #1e1b4b;
+ letter-spacing: -0.02em; line-height: 1.15;
+ }
+ .htm-sub {
+ font-family: 'Nunito Sans', sans-serif;
+ font-size: 0.82rem; font-weight: 600; color: #9ca3af; line-height: 1.5;
+ margin-top: 0.2rem;
+ }
+
+ /* Module cards */
+ .htm-card {
+ border-radius: 28px;
+ position: relative; overflow: hidden;
+ cursor: pointer;
+ border: 3px solid transparent;
+ transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1),
+ box-shadow 0.2s ease,
+ border-color 0.2s ease;
+ min-height: 200px;
+ display: flex; flex-direction: column; justify-content: flex-end;
+ }
+ .htm-card:hover { transform: translateY(-4px); }
+ .htm-card:active { transform: translateY(2px) scale(0.98); }
+
+ .htm-card.ebrw {
+ background: linear-gradient(145deg, #3b82f6 0%, #1d4ed8 60%, #1e40af 100%);
+ box-shadow: 0 10px 0 #1e3a8a66, 0 14px 32px rgba(29,78,216,0.3);
+ }
+ .htm-card.ebrw.selected {
+ border-color: #93c5fd;
+ box-shadow: 0 10px 0 #1e3a8a88, 0 16px 40px rgba(29,78,216,0.45);
+ transform: translateY(-4px) scale(1.01);
+ }
+
+ .htm-card.math {
+ background: linear-gradient(145deg, #f43f5e 0%, #e11d48 60%, #be123c 100%);
+ box-shadow: 0 10px 0 #9f123666, 0 14px 32px rgba(225,29,72,0.3);
+ }
+ .htm-card.math.selected {
+ border-color: #fda4af;
+ box-shadow: 0 10px 0 #9f123688, 0 16px 40px rgba(225,29,72,0.45);
+ transform: translateY(-4px) scale(1.01);
+ }
+
+ /* Decorative icons */
+ .htm-card-icons {
+ position: absolute; inset: 0; pointer-events: none;
+ }
+
+ /* Card body (text + chips) */
+ .htm-card-body {
+ position: relative; z-index: 2;
+ padding: 1.5rem 1.5rem 1.75rem;
+ display: flex; flex-direction: column; gap: 0.5rem;
+ }
+
+ .htm-card-tag {
+ font-size: 0.6rem; font-weight: 800; letter-spacing: 0.18em;
+ text-transform: uppercase; color: rgba(255,255,255,0.6);
+ }
+ .htm-card-name {
+ font-size: 1.6rem; font-weight: 900; color: white;
+ letter-spacing: -0.02em; line-height: 1.1;
+ }
+ .htm-card-desc {
+ font-family: 'Nunito Sans', sans-serif;
+ font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.7);
+ line-height: 1.4; margin-top: 0.1rem;
+ }
+
+ /* Stat pills row */
+ .htm-stat-row {
+ display: flex; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap;
+ }
+ .htm-stat-pill {
+ background: rgba(255,255,255,0.15);
+ border: 1.5px solid rgba(255,255,255,0.25);
+ border-radius: 100px; padding: 0.25rem 0.65rem;
+ font-size: 0.65rem; font-weight: 800; color: white;
+ display: flex; align-items: center; gap: 0.3rem;
+ backdrop-filter: blur(4px);
+ }
+
+ /* Selected check badge */
+ .htm-check-badge {
+ position: absolute; top: 1rem; right: 1rem; z-index: 3;
+ width: 32px; height: 32px; border-radius: 50%;
+ background: rgba(255,255,255,0.2);
+ border: 2px solid rgba(255,255,255,0.4);
+ display: flex; align-items: center; justify-content: center;
+ transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
+ opacity: 0; transform: scale(0.7);
+ }
+ .htm-card.selected .htm-check-badge {
+ opacity: 1; transform: scale(1);
+ background: rgba(255,255,255,0.3);
+ border-color: rgba(255,255,255,0.7);
+ }
+
+ /* CTA bar */
+ .htm-cta-bar {
+ position: fixed; bottom: 96px; left: 0; right: 0; z-index: 10;
+ padding: 0.85rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom));
+
+ transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
+ }
+ .htm-cta-bar.hidden {
+ transform: translateY(100%); opacity: 0; pointer-events: none;
+ }
+ .htm-cta-inner {
+ max-width: 560px; margin: 0 auto;
+ }
+
+ .htm-start-btn {
+ width: 100%; padding: 0.95rem;
+ background: linear-gradient(135deg, #84cc16, #65a30d);
+ color: white; border: none; border-radius: 100px; cursor: pointer;
+ font-family: 'Nunito', sans-serif; font-size: 0.95rem; font-weight: 900;
+ display: flex; align-items: center; justify-content: center; gap: 0.5rem;
+ box-shadow: 0 6px 0 #3f6212, 0 8px 20px rgba(101,163,13,0.3);
+ transition: transform 0.1s ease, box-shadow 0.1s ease;
+ }
+ .htm-start-btn:hover { transform:translateY(-2px); box-shadow:0 8px 0 #3f6212,0 12px 24px rgba(101,163,13,0.35); }
+ .htm-start-btn:active { transform:translateY(3px); box-shadow:0 3px 0 #3f6212; }
+
+ .htm-start-label {
+ font-size: 0.7rem; font-weight: 700; color: #9ca3af;
+ text-align: center; margin-top: 0.5rem;
+ font-family: 'Nunito Sans', sans-serif;
+ }
+ .htm-start-label span { font-weight: 800; color: #6b7280; }
+`;
+
export const HardTestModules = () => {
const user = useAuthStore((state) => state.user);
const navigate = useNavigate();
const [selected, setSelected] = useStateChoose a topic
+
+
-
-
-
-
+ {/* CTA bar */}
+
+ Choose topics
+ {selectedTopics.length > 0 && (
+
+ {selectedTopics.length} selected
+
+ )}
+
- setSearch(e.target.value)}
- className="w-full rounded-xl border px-4 py-2"
- />
+
+
-
{loading ? (
- <>
-
-
)}
+ {/* Step 2 — Review */}
{step === "review" && (
-
-
+
+
+ ) : filteredTopics.length === 0 ? (
+ No topics match "{search}"
) : ( - topics - .filter((t) => - t.name.toLowerCase().includes(search.toLowerCase()), - ) - .map((t) => ( +
+ {filteredTopics.map((t) => (
{
selected={selectedTopics.some((st) => st.id === t.id)}
onClick={() => toggleTopic(t)}
/>
- ))
+ ))}
+
)}
- Review your choices -
+
+
-
+ Your drill setup
-
-
)}
- Topics:{" "} - {selectedTopics.map((t) => t.name).join(", ")} -
+ {/* Topics */} +
+
+
+ {/* Stats */}
+
+ 📚
+
+
+
+ Topics
+
+ {selectedTopics.map((t) => (
+
+ {t.name}
+
+ ))}
+
+
+
+ ⚡
+
+
+
+ Session
+
+
+
+ 7
+ Questions
+
+
+ ~5
+ Minutes
+
+
+ ⏱️
+ Timed
+
+
+
+
+ {step === "topic" && (
+
+ )}
+ {step === "review" && (
+
+ )}
+
+ Hard Test Modules
-- Tackle hard practice test modules by selecting a section. -
-
+
+
+ {/* Blobs */}
+
+
+
+
+
+ {/* Dots */}
+ {DOTS.map((d, i) => (
+
+ ))}
+
+ (snapPoints[0]);
const startExam = async () => {
- if (!user || !sheetId) return;
+ console.log("startExam called", { user, sheetId });
+ if (!user) {
+ console.warn("Missing user or sheetId");
+ return;
+ }
const payload = useExamConfigStore.getState().payload;
+ console.log("payload", payload);
try {
const response = await api.startSession(token as string, payload);
+ console.log("session started", response);
setSessionId(response.id);
await loadSessionQuestions(response.id);
useSatExam.getState().startExam();
@@ -479,27 +882,12 @@ export const Test = () => {
const isFirstQuestion = retryMode ? true : questionIndex === 0;
- const getOptionStyle = (optionId: string, questionId: string) => {
- const base =
- "w-full text-start font-satoshi-medium text-lg space-x-2 px-4 py-4 border rounded-4xl transition duration-200";
- const eliminatedSet = eliminated[questionId] ?? new Set();
- const isSelected = currentAnswer === optionId;
- const isEliminated = eliminatedSet.has(optionId);
- if (!isTargeted || !feedback?.show) {
- if (isSelected)
- return `${base} bg-linear-to-br from-indigo-400 to-indigo-500 text-white`;
- if (isEliminated) return `${base} line-through opacity-70`;
- return base;
- }
- if (feedback.correct) {
- if (isSelected)
- return `${base} bg-gradient-to-br from-green-400 to-green-500 text-white ring-2 ring-green-300`;
- return `${base} opacity-40`;
- } else {
- if (isSelected)
- return `${base} bg-gradient-to-br from-red-400 to-red-500 text-white ring-2 ring-red-300`;
- return `${base} opacity-40`;
- }
+ const toggleEliminate = (questionId: string, optionId: string) => {
+ setEliminated((prev) => {
+ const current = new Set(prev[questionId] ?? []);
+ current.has(optionId) ? current.delete(optionId) : current.add(optionId);
+ return { ...prev, [questionId]: current };
+ });
};
// ─── Render MCQ options for the drawer ────────────────────────────────────
@@ -512,27 +900,29 @@ export const Test = () => {
const isSelected = currentAnswer === option.id;
const isEliminated = eliminatedSet.has(option.id);
const feedbackLocked = isTargeted && !!feedback?.show;
+
+ let optionClass = "t-option";
+ if (isSelected) optionClass += " selected";
+ if (isEliminated && !feedbackLocked) optionClass += " eliminated";
+ if (feedbackLocked && isSelected) {
+ optionClass += feedback.correct ? " correct" : " incorrect";
+ }
+
return (
-
+ {/* Header */}
+
+
+
+ {/* EBRW Card */}
+
);
};
diff --git a/src/pages/student/practice/Test.tsx b/src/pages/student/practice/Test.tsx
index 9e58923..4155194 100644
--- a/src/pages/student/practice/Test.tsx
+++ b/src/pages/student/practice/Test.tsx
@@ -1,11 +1,5 @@
import { useEffect, useState, useRef } from "react";
import { Navigate, useNavigate } from "react-router-dom";
-import {
- Card,
- CardContent,
- CardHeader,
- CardTitle,
-} from "../../../components/ui/card";
import {
Binary,
Calculator,
@@ -13,12 +7,15 @@ import {
Loader2,
LogOut,
Unplug,
+ Play,
+ ChevronLeft,
+ Menu,
+ X,
} from "lucide-react";
import { api } from "../../../utils/api";
import { useAuthStore } from "../../../stores/authStore";
import type { Question } from "../../../types/sheet";
-import { Button } from "../../../components/ui/button";
import { useSatExam } from "../../../stores/useSatExam";
import { useSatTimer } from "../../../hooks/useSatTimer";
import type {
@@ -50,6 +47,405 @@ import { useExamConfigStore } from "../../../stores/useExamConfigStore";
import { useResults } from "../../../stores/useResults";
import { GraphCalculatorModal } from "../../../components/Calculator";
+// ─── Shared Style Constants ───────────────────────────────────────────────────
+const COLORS = {
+ bg: "#fffbf4",
+ primary: "#a855f7",
+ primaryDark: "#7c3aed",
+ accent: "#f97316",
+ accentDark: "#c2560e",
+ text: "#1e1b4b",
+ textMuted: "#6b7280",
+ textLight: "#9ca3af",
+ border: "#f3f4f6",
+ borderPurple: "#c4b5fd",
+ success: "#22c55e",
+ error: "#ef4444",
+ blob1: "#fde68a",
+ blob2: "#a5f3c0",
+ blob3: "#fbcfe8",
+ blob4: "#bfdbfe",
+};
+
+const DOTS = [
+ { size: 12, color: "#f97316", top: "8%", left: "6%", delay: "0s" },
+ { size: 8, color: "#a855f7", top: "22%", left: "2%", delay: "1s" },
+ { size: 10, color: "#22c55e", top: "55%", left: "4%", delay: "0.5s" },
+ { size: 14, color: "#3b82f6", top: "10%", right: "5%", delay: "1.5s" },
+ { size: 8, color: "#f43f5e", top: "40%", right: "3%", delay: "0.8s" },
+ { size: 10, color: "#eab308", top: "70%", right: "7%", delay: "0.3s" },
+];
+
+// ─── Global Styles ────────────────────────────────────────────────────────────
+const GLOBAL_STYLES = `
+ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
+
+ .test-screen {
+ min-height: 100vh;
+ background: ${COLORS.bg};
+ font-family: 'Nunito', sans-serif;
+ position: relative;
+ overflow-x: hidden;
+ }
+
+ /* ── Blobs ── */
+ .t-blob {
+ position: fixed;
+ pointer-events: none;
+ z-index: 0;
+ filter: blur(48px);
+ opacity: 0.35;
+ }
+ .t-blob-1 {
+ width: 240px; height: 240px;
+ background: ${COLORS.blob1};
+ top: -80px; left: -80px;
+ border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
+ animation: tWobble1 14s ease-in-out infinite;
+ }
+ .t-blob-2 {
+ width: 190px; height: 190px;
+ background: ${COLORS.blob2};
+ bottom: -50px; left: 6%;
+ border-radius: 40% 60% 30% 70% / 60% 40% 60% 40%;
+ animation: tWobble2 16s ease-in-out infinite;
+ }
+ .t-blob-3 {
+ width: 210px; height: 210px;
+ background: ${COLORS.blob3};
+ top: 15%; right: -60px;
+ border-radius: 70% 30% 50% 50% / 40% 60% 40% 60%;
+ animation: tWobble1 18s ease-in-out infinite reverse;
+ }
+ .t-blob-4 {
+ width: 150px; height: 150px;
+ background: ${COLORS.blob4};
+ bottom: 12%; right: 2%;
+ border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%;
+ animation: tWobble2 12s ease-in-out infinite;
+ }
+
+ @keyframes tWobble1 {
+ 0%, 100% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; transform: translate(0,0) rotate(0deg); }
+ 50% { border-radius: 40% 60% 30% 70% / 60% 40% 60% 40%; transform: translate(12px, 16px) rotate(8deg); }
+ }
+ @keyframes tWobble2 {
+ 0%, 100% { border-radius: 40% 60% 30% 70% / 60% 40% 60% 40%; transform: translate(0,0) rotate(0deg); }
+ 50% { border-radius: 60% 40% 70% 30% / 40% 60% 40% 60%; transform: translate(-10px, 12px) rotate(-6deg); }
+ }
+
+ /* ── Floating dots ── */
+ .t-dot {
+ position: fixed;
+ border-radius: 50%;
+ pointer-events: none;
+ z-index: 0;
+ opacity: 0.3;
+ animation: tFloat 6s ease-in-out infinite;
+ }
+ @keyframes tFloat {
+ 0%, 100% { transform: translateY(0) rotate(0deg); }
+ 50% { transform: translateY(-14px) rotate(180deg); }
+ }
+
+ /* ── Animations ── */
+ @keyframes tPopIn {
+ from { opacity: 0; transform: scale(0.92) translateY(10px); }
+ to { opacity: 1; transform: scale(1) translateY(0); }
+ }
+ .t-anim { animation: tPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
+ .t-anim-1 { animation-delay: 0.05s; }
+ .t-anim-2 { animation-delay: 0.1s; }
+ .t-anim-3 { animation-delay: 0.15s; }
+ .t-anim-4 { animation-delay: 0.2s; }
+ .t-anim-5 { animation-delay: 0.25s; }
+
+ /* ── 3D Button Styles ── */
+ .t-btn-3d {
+ font-family: 'Nunito', sans-serif;
+ font-weight: 800;
+ border: none;
+ border-radius: 100px;
+ cursor: pointer;
+ transition: transform 0.1s ease, box-shadow 0.1s ease;
+ }
+ .t-btn-3d:hover { transform: translateY(-2px); }
+ .t-btn-3d:active { transform: translateY(2px); }
+
+ .t-btn-primary {
+ background: ${COLORS.primary};
+ color: white;
+ box-shadow: 0 4px 0 ${COLORS.primaryDark}, 0 6px 16px rgba(168, 85, 247, 0.3);
+ }
+ .t-btn-primary:hover {
+ box-shadow: 0 6px 0 ${COLORS.primaryDark}, 0 10px 20px rgba(168, 85, 247, 0.35);
+ }
+ .t-btn-primary:active {
+ box-shadow: 0 2px 0 ${COLORS.primaryDark}, 0 3px 8px rgba(168, 85, 247, 0.2);
+ }
+
+ .t-btn-accent {
+ background: ${COLORS.accent};
+ color: white;
+ box-shadow: 0 4px 0 ${COLORS.accentDark}, 0 6px 16px rgba(249, 115, 22, 0.3);
+ }
+ .t-btn-accent:hover {
+ box-shadow: 0 6px 0 ${COLORS.accentDark}, 0 10px 20px rgba(249, 115, 22, 0.35);
+ }
+ .t-btn-accent:active {
+ box-shadow: 0 2px 0 ${COLORS.accentDark}, 0 3px 8px rgba(249, 115, 22, 0.2);
+ }
+
+ .t-btn-outline {
+ background: white;
+ color: ${COLORS.text};
+ border: 2.5px solid ${COLORS.border};
+ box-shadow: 0 3px 10px rgba(0,0,0,0.06);
+ }
+ .t-btn-outline:hover {
+ border-color: ${COLORS.borderPurple};
+ box-shadow: 0 6px 14px rgba(0,0,0,0.08);
+ }
+
+ /* ── Cards ── */
+ .t-card {
+ background: white;
+ border: 2.5px solid ${COLORS.border};
+ border-radius: 22px;
+ box-shadow: 0 4px 14px rgba(0,0,0,0.05);
+ }
+
+ .t-card-purple {
+ border-color: ${COLORS.borderPurple};
+ box-shadow: 0 4px 16px rgba(167, 139, 250, 0.12);
+ }
+
+ /* ── Section Title ── */
+ .t-section-title {
+ font-size: 1.2rem;
+ font-weight: 900;
+ color: ${COLORS.text};
+ letter-spacing: -0.01em;
+ }
+
+ /* ── Timer Display ── */
+ .t-timer {
+ font-size: 2.5rem;
+ font-weight: 900;
+ color: ${COLORS.text};
+ letter-spacing: -0.03em;
+ line-height: 1;
+ }
+
+ /* ── Question Number Badge ── */
+ .t-q-badge {
+ background: linear-gradient(135deg, ${COLORS.primary}, ${COLORS.primaryDark});
+ color: white;
+ font-weight: 800;
+ font-size: 0.75rem;
+ padding: 0.4rem 0.9rem;
+ border-radius: 100px;
+ }
+
+ /* ── Option Buttons ── */
+ .t-option {
+ width: 100%;
+ text-align: start;
+ font-family: 'Nunito', sans-serif;
+ font-weight: 700;
+ font-size: 1rem;
+ padding: 1rem 1.25rem;
+ background: white;
+ border: 2.5px solid ${COLORS.border};
+ border-radius: 18px;
+ cursor: pointer;
+ transition: all 0.15s ease;
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ }
+ .t-option:hover:not(:disabled) {
+ border-color: ${COLORS.borderPurple};
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(0,0,0,0.06);
+ }
+ .t-option.selected {
+ background: linear-gradient(135deg, ${COLORS.primary}, ${COLORS.primaryDark});
+ border-color: ${COLORS.primaryDark};
+ color: white;
+ }
+ .t-option.correct {
+ background: linear-gradient(135deg, #22c55e, #16a34a);
+ border-color: #16a34a;
+ color: white;
+ }
+ .t-option.incorrect {
+ background: linear-gradient(135deg, #ef4444, #dc2626);
+ border-color: #dc2626;
+ color: white;
+ }
+ .t-option.eliminated {
+ opacity: 0.5;
+ text-decoration: line-through;
+ }
+
+ .t-option-letter {
+ width: 28px;
+ height: 28px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ font-weight: 800;
+ font-size: 0.85rem;
+ flex-shrink: 0;
+ }
+ .t-option:not(.selected) .t-option-letter {
+ background: ${COLORS.primary};
+ color: white;
+ }
+ .t-option.selected .t-option-letter {
+ background: white;
+ color: ${COLORS.primary};
+ }
+
+ /* ── Eliminate Button ── */
+ .t-eliminate-btn {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ border: 2.5px solid ${COLORS.border};
+ background: white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: all 0.15s ease;
+ flex-shrink: 0;
+ }
+ .t-eliminate-btn:hover {
+ border-color: #ef4444;
+ background: #fef2f2;
+ }
+ .t-eliminate-btn.active {
+ background: #ef4444;
+ border-color: #ef4444;
+ color: white;
+ }
+
+ /* ── Textarea ── */
+ .t-textarea {
+ width: 100%;
+ min-height: 120px;
+ padding: 1rem 1.25rem;
+ background: white;
+ border: 2.5px solid ${COLORS.border};
+ border-radius: 18px;
+ font-family: 'Nunito', sans-serif;
+ font-size: 1rem;
+ font-weight: 600;
+ color: ${COLORS.text};
+ resize: vertical;
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
+ }
+ .t-textarea:focus {
+ outline: none;
+ border-color: ${COLORS.borderPurple};
+ box-shadow: 0 4px 16px rgba(167, 139, 250, 0.15);
+ }
+ .t-textarea::placeholder {
+ color: ${COLORS.textLight};
+ }
+
+ /* ── Retry Banner ── */
+ .t-retry-banner {
+ background: linear-gradient(90deg, ${COLORS.accent}, #ea580c);
+ color: white;
+ padding: 0.75rem 1rem;
+ font-weight: 700;
+ font-size: 0.9rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ }
+
+ /* ── XP Badge ── */
+ .t-xp-badge {
+ position: absolute;
+ top: -8px;
+ right: -8px;
+ background: linear-gradient(135deg, #fbbf24, #f59e0b);
+ color: white;
+ font-size: 0.7rem;
+ font-weight: 800;
+ padding: 0.25rem 0.6rem;
+ border-radius: 100px;
+ box-shadow: 0 2px 8px rgba(251, 191, 36, 0.4);
+ animation: tBounce 0.5s ease;
+ }
+ @keyframes tBounce {
+ 0%, 100% { transform: scale(1); }
+ 50% { transform: scale(1.2); }
+ }
+
+ /* ── Drawer Custom Styles ── */
+ [data-vaul-drawer] {
+ background: white !important;
+ border-top: 2.5px solid ${COLORS.border} !important;
+ border-radius: 24px 24px 0 0 !important;
+ }
+ [data-vaul-drawer-handle] {
+ background: ${COLORS.border} !important;
+ width: 48px !important;
+ height: 5px !important;
+ border-radius: 3px !important;
+ }
+
+ /* ── Navigator Grid ── */
+ .t-nav-grid {
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ gap: 0.5rem;
+ }
+ .t-nav-item {
+ aspect-ratio: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 12px;
+ font-weight: 800;
+ font-size: 0.9rem;
+ border: 2.5px solid ${COLORS.border};
+ background: white;
+ cursor: pointer;
+ transition: all 0.15s ease;
+ }
+ .t-nav-item:hover {
+ border-color: ${COLORS.borderPurple};
+ transform: scale(1.05);
+ }
+ .t-nav-item.current {
+ background: linear-gradient(135deg, ${COLORS.primary}, ${COLORS.primaryDark});
+ border-color: ${COLORS.primaryDark};
+ color: white;
+ }
+ .t-nav-item.answered {
+ background: #dcfce7;
+ border-color: #22c55e;
+ color: #16a34a;
+ }
+
+ /* ── Incorrect Flash ── */
+ @keyframes tFlashRed {
+ 0%, 100% { background: transparent; }
+ 50% { background: rgba(239, 68, 68, 0.15); }
+ }
+ .t-flash-red {
+ animation: tFlashRed 0.6s ease;
+ }
+`;
+
// ─── Confetti particle type ───────────────────────────────────────────────────
interface ConfettiParticle {
id: number;
@@ -151,6 +547,7 @@ const snapPoints = [
"600px",
"700px",
];
+
// ─── XP Popup Component ───────────────────────────────────────────────────────
const XPPopup = ({ xp, show }: { xp: number; show: boolean }) => {
if (!show) return null;
@@ -240,10 +637,16 @@ export const Test = () => {
const [snap, setSnap] = useState
+
Pick your challenge
++ Tackle the hardest SAT questions. Select a section to begin. +
+ toggle("EBRW")}
>
-
-
-
- setSelected((prev) => (prev === "MATH" ? null : "MATH"))
- }
- className={`relative cursor-pointer overflow-hidden transition
- ${
- selected === "MATH"
- ? "ring-2 ring-rose-500 scale-[1.02]"
- : "hover:scale-[1.01]"
- }
- bg-linear-to-br from-rose-400 to-rose-600
- `}
- >
-
-
-
-
- {selected && (
-
+
+ {/* CTA bar */}
+ - Reading & Writing -
-- Mathematics -
-
-
+ {/* Background icons */}
+
- )}
-
+
+ {/* MATH Card */}
+
+
+
+ {/* Check */}
+
+
+
+
+ {/* Body */}
+
+ Section 1
+
+ Reading &
+
+
+ Reading &
+
+ Writing
+
+ + Grammar, vocabulary, comprehension & evidence-based analysis +
+
+ 📖 27 Questions
+ ⏱️ 32 min
+ 🔥 Hard tier
+
+ toggle("MATH")}
+ >
+ {/* Background icons */}
+
+
+
+
+ {/* Check */}
+
+
+
+
+ {/* Body */}
+
+ Section 2
+
+ Mathematics
++ Algebra, advanced math, geometry & data analysis under + pressure +
+
+ 🔢 22 Questions
+ ⏱️ 35 min
+ 🔥 Hard tier
+
+
+
+
+
+
+ + Tap again to deselect +
+
- {!feedbackLocked && (
+
+
+
- )}
-
@@ -570,7 +956,7 @@ export const Test = () => {
const renderShortAnswer = (question?: Question) => {
if (!question || question.options?.length) return null;
return (
-
-
{isTargeted &&
feedback?.show &&
feedback.correct &&
feedback.xpGained &&
isSelected && (
-
- +{feedback.xpGained} XP ⭐
-
+ +{feedback.xpGained} XP ⭐
)}
+