[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"], display: "swap", variable: "--font-inter", }) export const metadata: Metadata = { title: "Speed Thinking Test", description: "Test how fast your brain can think", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --font-sans: var(--font-inter); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Custom dotted background pattern */ .dotted-background { background-image: radial-gradient(circle, #e5e7eb 1px, transparent 1px); background-size: 20px 20px; } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useCallback } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" // Question database const questionDatabase = [ // Math questions { type: "math", question: "15 + 27 = ?", options: ["42", "41", "43", "40"], correct: 0, emoji: "🧮" }, { type: "math", question: "8 × 9 = ?", options: ["71", "72", "73", "74"], correct: 1, emoji: "🧮" }, { type: "math", question: "144 ÷ 12 = ?", options: ["11", "13", "12", "14"], correct: 2, emoji: "🧮" }, { type: "math", question: "25% of 80 = ?", options: ["15", "25", "20", "30"], correct: 2, emoji: "🧮" }, { type: "math", question: "7² = ?", options: ["49", "48", "50", "47"], correct: 0, emoji: "🧮" }, // Word Association questions { type: "word", question: "Ocean : Water :: Desert : ?", options: ["Hot", "Sand", "Dry", "Cactus"], correct: 1, emoji: "📝", }, { type: "word", question: "Book : Read :: Music : ?", options: ["Sound", "Listen", "Play", "Hear"], correct: 1, emoji: "📝", }, { type: "word", question: "Cat : Meow :: Dog : ?", options: ["Woof", "Bark", "Howl", "Growl"], correct: 1, emoji: "📝", }, { type: "word", question: "Fire : Hot :: Ice : ?", options: ["Water", "Frozen", "Cold", "White"], correct: 2, emoji: "📝", }, { type: "word", question: "Day : Night :: Sun : ?", options: ["Star", "Moon", "Dark", "Sky"], correct: 1, emoji: "📝", }, // Logic questions { type: "logic", question: "If all roses are flowers, and some flowers are red, then:", options: ["All roses are red", "Some roses might be red", "No roses are red", "All flowers are roses"], correct: 1, emoji: "🧠", }, { type: "logic", question: "What comes next? 2, 4, 8, 16, ?", options: ["24", "32", "30", "28"], correct: 1, emoji: "🧠", }, { type: "logic", question: "If today is Wednesday, what day was it 3 days ago?", options: ["Sunday", "Monday", "Saturday", "Tuesday"], correct: 0, emoji: "🧠", }, { type: "logic", question: "A bat and ball cost $1.10. The bat costs $1 more than the ball. How much does the ball cost?", options: ["10¢", "5¢", "15¢", "20¢"], correct: 1, emoji: "🧠", }, { type: "logic", question: "Which doesn't belong? Apple, Banana, Carrot, Orange", options: ["Apple", "Banana", "Carrot", "Orange"], correct: 2, emoji: "🧠", }, ] type GameState = "welcome" | "playing" | "results" | "share" type QuestionType = "math" | "word" | "logic" interface Question { type: QuestionType question: string options: string[] correct: number emoji: string } interface GameStats { correctAnswers: number totalQuestions: number tpm: number percentile: number tier: string tierEmoji: string } const performanceTiers = [ { min: 80, tier: "Genius", emoji: "🧠", tagline: "Your brain is absolutely incredible!" }, { min: 60, tier: "Lightning Fast", emoji: "⚡", tagline: "Your brain is on fire!" }, { min: 40, tier: "Quick Thinker", emoji: "🚀", tagline: "You think at warp speed!" }, { min: 25, tier: "Average", emoji: "💭", tagline: "Solid thinking skills!" }, { min: 0, tier: "Deep Thinker", emoji: "🤔", tagline: "You take time to think things through!" }, ] const getPerformanceTier = (tpm: number) => { return performanceTiers.find((tier) => tpm >= tier.min) || performanceTiers[performanceTiers.length - 1] } const DottedBackground = () =>

export default function SpeedThinkingTest() { const [gameState, setGameState] = useState("welcome") const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0) const [questions, setQuestions] = useState([]) const [timeLeft, setTimeLeft] = useState(5) const [correctAnswers, setCorrectAnswers] = useState(0) const [selectedAnswer, setSelectedAnswer] = useState(null) const [showFeedback, setShowFeedback] = useState(false) const [gameStats, setGameStats] = useState(null) const [playerName, setPlayerName] = useState("") const [startTime, setStartTime] = useState(0) // Shuffle and select 15 questions const initializeGame = useCallback(() => { const shuffled = [...questionDatabase].sort(() => Math.random() - 0.5) setQuestions(shuffled.slice(0, 15)) setCurrentQuestionIndex(0) setCorrectAnswers(0) setTimeLeft(5) setSelectedAnswer(null) setShowFeedback(false) setStartTime(Date.now()) }, []) // Timer logic useEffect(() => { if (gameState === "playing" && timeLeft > 0 && !showFeedback) { const timer = setTimeout(() => setTimeLeft(timeLeft - 1), 1000) return () => clearTimeout(timer) } else if (timeLeft === 0 && !showFeedback) { handleAnswer(-1) // Auto-advance with wrong answer } }, [gameState, timeLeft, showFeedback]) const handleAnswer = (answerIndex: number) => { if (showFeedback) return setSelectedAnswer(answerIndex) setShowFeedback(true) const isCorrect = answerIndex === questions[currentQuestionIndex].correct if (isCorrect) { setCorrectAnswers((prev) => prev + 1) } // Auto-advance after 1 second setTimeout(() => { if (currentQuestionIndex < questions.length - 1) { setCurrentQuestionIndex((prev) => prev + 1) setTimeLeft(5) setSelectedAnswer(null) setShowFeedback(false) } else { // Game finished finishGame() } }, 1000) } const finishGame = () => { const endTime = Date.now() const totalTimeMinutes = (endTime - startTime) / 60000 const tpm = Math.round(correctAnswers / totalTimeMinutes) const percentile = Math.min(95, Math.max(5, Math.round((correctAnswers / 15) * 100))) const tier = getPerformanceTier(tpm) setGameStats({ correctAnswers, totalQuestions: 15, tpm, percentile, tier: tier.tier, tierEmoji: tier.emoji, }) setGameState("results") } const startGame = () => { initializeGame() setGameState("playing") } const restartGame = () => { setGameState("welcome") setGameStats(null) setPlayerName("") } const shareScore = () => { if (!gameStats) return const tier = getPerformanceTier(gameStats.tpm) const text = `${playerName || "My"} brain is ${tier.tier.toLowerCase()}! 🔥\n\nSpeed Thinking Test: ${gameStats.tpm} TPM\n${tier.tagline}\n\nCan you beat my score?` if (navigator.share) { navigator.share({ title: "Speed Thinking Test Results", text, url: window.location.href, }) } else { navigator.clipboard.writeText(text) alert("Score copied to clipboard!") } } if (gameState === "welcome") { return (

{/* Left side - Hero content */}

It pays
to be here

Test your brain speed, challenge your thinking, and discover how fast you can process information.

Learn how we measure your thinking speed by taking our test.

{/* Right side - App preview */}

🧠

Speed Test

How fast is your brain?

15 Questions

Math, Logic, Words

⚡

5 Seconds

Per question

⏱️

Get TPM Score

Thoughts per minute

📊

) } if (gameState === "playing") { const currentQuestion = questions[currentQuestionIndex] const progress = ((currentQuestionIndex + 1) / questions.length) * 100 return (

Question {currentQuestionIndex + 1} of {questions.length}

{timeLeft}

{currentQuestion.type}

{currentQuestion.question}

{currentQuestion.options.map((option, index) => { let buttonClass = "w-full p-4 text-left font-medium rounded-2xl transition-all duration-200 border-2 " if (showFeedback) { if (index === currentQuestion.correct) { buttonClass += "bg-green-50 text-green-800 border-green-200" } else if (index === selectedAnswer && index !== currentQuestion.correct) { buttonClass += "bg-red-50 text-red-800 border-red-200" } else { buttonClass += "bg-gray-50 text-gray-400 border-gray-200" } } else { buttonClass += "bg-white hover:bg-gray-50 text-black border-gray-200 hover:border-black" } return ( ) })}

) } if (gameState === "results") { if (!gameStats) return null const tier = getPerformanceTier(gameStats.tpm) return (

⭐

✨

🎉

💫

{tier.emoji}

YOUR BRAIN IS

{tier.tier}!

{tier.tagline}

{gameStats.tpm}

THOUGHTS PER MINUTE

{gameStats.correctAnswers}/15 correct • {gameStats.percentile}% percentile

) } if (gameState === "share") { if (!gameStats) return null const tier = getPerformanceTier(gameStats.tpm) return (

Share your results

setPlayerName(e.target.value)} className="text-center text-lg font-medium rounded-xl border-2 border-gray-200 focus:border-black py-4 mb-8" />

About

Tags

Share

About

Tags

Share

More from rajoninternet

More Templates Like This