import React, { useState } from 'react';
import { Brain, Eye, Ear, Hand, Trophy, ArrowRight, RefreshCw, Download } from 'lucide-react';
const LearningStyleQuiz = () => {
const [currentQuestion, setCurrentQuestion] = useState(0);
const [answers, setAnswers] = useState({});
const [showResults, setShowResults] = useState(false);
const [userName, setUserName] = useState('');
const [childName, setChildName] = useState('');
const [showStart, setShowStart] = useState(true);
const questions = [
{
id: 1,
question: "When your child needs to remember something important, they usually...",
options: [
{ text: "Write it down or draw a picture", value: "visual", emoji: "📝" },
{ text: "Repeat it out loud or talk about it", value: "auditory", emoji: "🗣️" },
{ text: "Act it out or use hand gestures", value: "kinesthetic", emoji: "🤸" }
]
},
{
id: 2,
question: "During homework time, your child focuses best when...",
options: [
{ text: "Everything is organized and color-coded", value: "visual", emoji: "🎨" },
{ text: "They can talk through problems or listen to music", value: "auditory", emoji: "🎵" },
{ text: "They can move around or use fidget toys", value: "kinesthetic", emoji: "🏃" }
]
},
{
id: 3,
question: "When learning something new, your child prefers...",
options: [
{ text: "Watching videos or looking at diagrams", value: "visual", emoji: "📺" },
{ text: "Listening to explanations or discussions", value: "auditory", emoji: "👂" },
{ text: "Trying it themselves hands-on", value: "kinesthetic", emoji: "🛠️" }
]
},
{
id: 4,
question: "Your child's favorite activities usually involve...",
options: [
{ text: "Reading, drawing, or watching things", value: "visual", emoji: "📚" },
{ text: "Talking, singing, or listening to stories", value: "auditory", emoji: "🎤" },
{ text: "Building, sports, or physical activities", value: "kinesthetic", emoji: "⚽" }
]
},
{
id: 5,
question: "When giving your child directions, they follow best when you...",
options: [
{ text: "Show them or write it down", value: "visual", emoji: "👁️" },
{ text: "Tell them step-by-step verbally", value: "auditory", emoji: "💬" },
{ text: "Walk them through it physically", value: "kinesthetic", emoji: "👣" }
]
},
{
id: 6,
question: "During free time, your child gravitates toward...",
options: [
{ text: "Puzzles, art projects, or screen time", value: "visual", emoji: "🧩" },
{ text: "Music, podcasts, or chatting with friends", value: "auditory", emoji: "🎧" },
{ text: "Sports, dance, or making things", value: "kinesthetic", emoji: "🏀" }
]
}
];
const learningStyles = {
visual: {
title: "Visual Learner",
icon: <Eye className="w-16 h-16" />,
color: "bg-blue-500",
gradient: "from-blue-400 to-blue-600",
description: "Your child learns best by SEEING things!",
traits: [
"Remembers faces better than names",
"Loves charts, diagrams, and color-coding",
"Says 'show me' more than 'tell me'",
"Strong spatial awareness",
"Prefers written instructions"
],
studyTips: [
"📊 Use colorful highlighters and sticky notes",
"🎨 Create mind maps and visual organizers",
"📹 Watch educational videos and tutorials",
"🖼️ Use flashcards with pictures",
"📝 Let them draw concepts to understand them"
],
atMathETC: "We use visual aids, color-coded materials, and interactive whiteboards to make concepts crystal clear for visual learners!"
},
auditory: {
title: "Auditory Learner",
icon: <Ear className="w-16 h-16" />,
color: "bg-purple-500",
gradient: "from-purple-400 to-purple-600",
description: "Your child learns best by HEARING things!",
traits: [
"Remembers what they hear easily",
"Talks through problems out loud",
"Loves discussions and explanations",
"Can follow verbal directions well",
"Often hums or talks to themselves while working"
],
studyTips: [
"🎧 Use audiobooks and educational podcasts",
"🗣️ Encourage them to explain concepts out loud",
"🎵 Create songs or rhymes for memorization",
"👥 Study with discussion groups",
"📱 Record notes and play them back"
],
atMathETC: "Our tutors engage auditory learners through verbal explanations, discussions, and talking through concepts step-by-step!"
},
kinesthetic: {
title: "Kinesthetic Learner",
icon: <Hand className="w-16 h-16" />,
color: "bg-green-500",
gradient: "from-green-400 to-green-600",
description: "Your child learns best by DOING things!",
traits: [
"Needs to move while learning",
"Learns by touching and experimenting",
"Has great hand-eye coordination",
"Fidgets when sitting still too long",
"Remembers what they physically did"
],
studyTips: [
"🏃 Allow movement breaks every 15-20 minutes",
"🧱 Use manipulatives (blocks, counters, objects)",
"✋ Let them write/draw while studying",
"🎯 Turn learning into games or activities",
"🔄 Act out concepts or use role-play"
],
atMathETC: "We incorporate hands-on activities, manipulatives, and movement-friendly learning to keep kinesthetic learners engaged!"
}
};
const handleAnswer = (value) => {
const newAnswers = { ...answers, [currentQuestion]: value };
setAnswers(newAnswers);
if (currentQuestion < questions.length - 1) {
setCurrentQuestion(currentQuestion + 1);
} else {
calculateResults(newAnswers);
}
};
const calculateResults = (finalAnswers) => {
const counts = { visual: 0, auditory: 0, kinesthetic: 0 };
Object.values(finalAnswers).forEach(answer => {
counts[answer]++;
});
const dominant = Object.keys(counts).reduce((a, b) =>
counts[a] > counts[b] ? a : b
);
setShowResults(dominant);
};
const restart = () => {
setCurrentQuestion(0);
setAnswers({});
setShowResults(false);
setShowStart(true);
setUserName('');
setChildName('');
};
const startQuiz = () => {
if (userName.trim() && childName.trim()) {
setShowStart(false);
}
};
if (showStart) {
return (
<div className="min-h-screen bg-gradient-to-br from-indigo-100 via-purple-50 to-pink-100 p-6 flex items-center justify-center">
<div className="max-w-2xl w-full bg-white rounded-3xl shadow-2xl p-8 md:p-12">
<div className="text-center mb-8">
<div className="inline-block bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full p-4 mb-6 animate-bounce">
<Brain className="w-16 h-16 text-white" />
</div>
<h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
🎮 Learning Style Discovery Quest!
</h1>
<p className="text-xl text-gray-600 mb-2">
Unlock your child's learning superpower in 60 seconds
</p>
<div className="inline-block bg-yellow-100 border-2 border-yellow-400 rounded-full px-6 py-2 mt-4">
<p className="text-yellow-800 font-bold">⚡ Earn 25 Brain Points!</p>
</div>
</div>
<div className="bg-gradient-to-r from-purple-50 to-blue-50 rounded-2xl p-6 mb-8">
<h3 className="font-bold text-lg text-gray-800 mb-3">📋 What You'll Discover:</h3>
<ul className="space-y-2 text-gray-700">
<li className="flex items-start">
<span className="mr-2">✓</span>
<span>Is your child a Visual, Auditory, or Kinesthetic learner?</span>
</li>
<li className="flex items-start">
<span className="mr-2">✓</span>
<span>Personalized study strategies that actually work</span>
</li>
<li className="flex items-start">
<span className="mr-2">✓</span>
<span>How to end homework battles forever</span>
</li>
<li className="flex items-start">
<span className="mr-2">✓</span>
<span>Why your current approach might not be working</span>
</li>
</ul>
</div>
<div className="space-y-4 mb-8">
<div>
<label className="block text-gray-700 font-semibold mb-2">
Your Name (Parent/Guardian):
</label>
<input
type="text"
value={userName}
onChange={(e) => setUserName(e.target.value)}
placeholder="e.g., Sarah"
className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-purple-500 focus:outline-none text-lg"
/>
</div>
<div>
<label className="block text-gray-700 font-semibold mb-2">
Your Child's Name:
</label>
<input
type="text"
value={childName}
onChange={(e) => setChildName(e.target.value)}
placeholder="e.g., Alex"
className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-purple-500 focus:outline-none text-lg"
/>
</div>
</div>
<button
onClick={startQuiz}
disabled={!userName.trim() || !childName.trim()}
className="w-full bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-4 rounded-xl font-bold text-lg hover:from-purple-700 hover:to-indigo-700 transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none flex items-center justify-center gap-2"
>
Start Quest <ArrowRight className="w-5 h-5" />
</button>
<p className="text-center text-gray-500 text-sm mt-6">
⏱️ Takes just 60 seconds • 6 quick questions
</p>
</div>
</div>
);
}
if (showResults) {
const result = learningStyles[showResults];
const counts = { visual: 0, auditory: 0, kinesthetic: 0 };
Object.values(answers).forEach(answer => {
counts[answer]++;
});
return (
<div className="min-h-screen bg-gradient-to-br from-indigo-100 via-purple-50 to-pink-100 p-6">
<div className="max-w-4xl mx-auto">
{/* Results Header */}
<div className="bg-white rounded-3xl shadow-2xl p-8 mb-6 text-center">
<div className="mb-6">
<Trophy className="w-16 h-16 text-yellow-500 mx-auto mb-4 animate-bounce" />
<h2 className="text-3xl font-bold text-gray-800 mb-2">
Quest Complete! 🎉
</h2>
<div className="inline-block bg-yellow-100 border-2 border-yellow-400 rounded-full px-6 py-2">
<p className="text-yellow-800 font-bold">⚡ You Earned 25 Brain Points!</p>
</div>
</div>
<div className={`bg-gradient-to-r ${result.gradient} text-white rounded-2xl p-8 mb-6`}>
<div className="flex justify-center mb-4">
{result.icon}
</div>
<h3 className="text-3xl font-bold mb-2">{childName} is a</h3>
<h2 className="text-4xl font-extrabold mb-4">{result.title}!</h2>
<p className="text-xl opacity-90">{result.description}</p>
</div>
{/* Score Breakdown */}
<div className="bg-gray-50 rounded-xl p-6 mb-6">
<h4 className="font-bold text-gray-800 mb-4">📊 Learning Style Breakdown:</h4>
<div className="space-y-3">
<div className="flex items-center gap-4">
<Eye className="w-6 h-6 text-blue-500" />
<div className="flex-1 bg-gray-200 rounded-full h-8 overflow-hidden">
<div
className="bg-blue-500 h-full flex items-center justify-end px-3 text-white font-bold text-sm"
style={{width: `${(counts.visual / 6) * 100}%`}}
>
{counts.visual > 0 && `${counts.visual}/6`}
</div>
</div>
<span className="text-sm font-semibold text-gray-700 w-20">Visual</span>
</div>
<div className="flex items-center gap-4">
<Ear className="w-6 h-6 text-purple-500" />
<div className="flex-1 bg-gray-200 rounded-full h-8 overflow-hidden">
<div
className="bg-purple-500 h-full flex items-center justify-end px-3 text-white font-bold text-sm"
style={{width: `${(counts.auditory / 6) * 100}%`}}
>
{counts.auditory > 0 && `${counts.auditory}/6`}
</div>
</div>
<span className="text-sm font-semibold text-gray-700 w-20">Auditory</span>
</div>
<div className="flex items-center gap-4">
<Hand className="w-6 h-6 text-green-500" />
<div className="flex-1 bg-gray-200 rounded-full h-8 overflow-hidden">
<div
className="bg-green-500 h-full flex items-center justify-end px-3 text-white font-bold text-sm"
style={{width: `${(counts.kinesthetic / 6) * 100}%`}}
>
{counts.kinesthetic > 0 && `${counts.kinesthetic}/6`}
</div>
</div>
<span className="text-sm font-semibold text-gray-700 w-20">Kinesthetic</span>
</div>
</div>
</div>
</div>
{/* Detailed Results */}
<div className="grid md:grid-cols-2 gap-6 mb-6">
{/* Traits */}
<div className="bg-white rounded-2xl shadow-xl p-6">
<h3 className="text-2xl font-bold text-gray-800 mb-4">
🎯 {childName}'s Learning Traits
</h3>
<ul className="space-y-3">
{result.traits.map((trait, index) => (
<li key={index} className="flex items-start gap-3">
<span className="text-green-500 text-xl">✓</span>
<span className="text-gray-700">{trait}</span>
</li>
))}
</ul>
</div>
{/* Study Tips */}
<div className="bg-white rounded-2xl shadow-xl p-6">
<h3 className="text-2xl font-bold text-gray-800 mb-4">
💡 Personalized Study Tips
</h3>
<ul className="space-y-3">
{result.studyTips.map((tip, index) => (
<li key={index} className="flex items-start gap-3">
<span className="text-purple-500 text-xl">→</span>
<span className="text-gray-700">{tip}</span>
</li>
))}
</ul>
</div>
</div>
{/* How MathETC Helps */}
<div className="bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-2xl shadow-xl p-8 mb-6">
<h3 className="text-2xl font-bold mb-4 flex items-center gap-2">
<Brain className="w-8 h-8" />
How MathETC Helps {result.title}s
</h3>
<p className="text-lg opacity-90 mb-6">{result.atMathETC}</p>
<div className="bg-white/20 rounded-xl p-4 backdrop-blur">
<p className="text-sm">
<strong>Why This Matters:</strong> Most classrooms use a "one-size-fits-all" approach.
At MathETC, we customize our teaching to match YOUR child's unique learning style.
That's why our students see results so quickly!
</p>
</div>
</div>
{/* Next Steps */}
<div className="bg-white rounded-2xl shadow-xl p-8 mb-6">
<h3 className="text-2xl font-bold text-gray-800 mb-6 text-center">
🚀 Your Next Steps
</h3>
<div className="grid md:grid-cols-3 gap-4">
<div className="bg-blue-50 rounded-xl p-6 text-center">
<div className="text-4xl mb-3">📥</div>
<h4 className="font-bold text-gray-800 mb-2">Download Results</h4>
<p className="text-sm text-gray-600">Save this personalized report</p>
</div>
<div className="bg-purple-50 rounded-xl p-6 text-center">
<div className="text-4xl mb-3">📞</div>
<h4 className="font-bold text-gray-800 mb-2">Free Consultation</h4>
<p className="text-sm text-gray-600">Discuss {childName}'s learning plan</p>
</div>
<div className="bg-green-50 rounded-xl p-6 text-center">
<div className="text-4xl mb-3">📧</div>
<h4 className="font-bold text-gray-800 mb-2">Get More Tips</h4>
<p className="text-sm text-gray-600">Weekly strategies for {result.title}s</p>
</div>
</div>
</div>
{/* CTAs */}
<div className="grid md:grid-cols-2 gap-4 mb-6">
<button className="bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-4 px-6 rounded-xl font-bold text-lg hover:from-purple-700 hover:to-indigo-700 transition-all transform hover:scale-105 flex items-center justify-center gap-2">
📞 Book Free Consultation
</button>
<button className="bg-white border-2 border-purple-600 text-purple-600 py-4 px-6 rounded-xl font-bold text-lg hover:bg-purple-50 transition-all flex items-center justify-center gap-2">
<Download className="w-5 h-5" />
Download Results PDF
</button>
</div>
<button
onClick={restart}
className="w-full bg-gray-200 text-gray-700 py-3 px-6 rounded-xl font-semibold hover:bg-gray-300 transition-all flex items-center justify-center gap-2"
>
<RefreshCw className="w-5 h-5" />
Take Quiz Again
</button>
<p className="text-center text-gray-600 mt-6 text-sm">
Share this quiz with other parents! Every parent should know their child's learning style.
</p>
</div>
</div>
);
}
const progress = ((currentQuestion + 1) / questions.length) * 100;
return (
<div className="min-h-screen bg-gradient-to-br from-indigo-100 via-purple-50 to-pink-100 p-6 flex items-center justify-center">
<div className="max-w-3xl w-full">
{/* Progress Bar */}
<div className="mb-8">
<div className="flex justify-between items-center mb-2">
<span className="text-sm font-semibold text-gray-600">
Question {currentQuestion + 1} of {questions.length}
</span>
<span className="text-sm font-semibold text-purple-600">
{Math.round(progress)}% Complete
</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
<div
className="bg-gradient-to-r from-purple-500 to-indigo-500 h-full transition-all duration-500 ease-out"
style={{ width: `${progress}%` }}
/>
</div>
</div>
{/* Question Card */}
<div className="bg-white rounded-3xl shadow-2xl p-8 md:p-12">
<div className="mb-8">
<div className="inline-block bg-purple-100 rounded-full px-4 py-2 mb-4">
<span className="text-purple-600 font-bold text-sm">
For {childName}
</span>
</div>
<h2 className="text-2xl md:text-3xl font-bold text-gray-800 leading-tight">
{questions[currentQuestion].question}
</h2>
</div>
<div className="space-y-4">
{questions[currentQuestion].options.map((option, index) => (
<button
key={index}
onClick={() => handleAnswer(option.value)}
className="w-full bg-gradient-to-r from-gray-50 to-gray-100 hover:from-purple-50 hover:to-indigo-50 border-2 border-gray-200 hover:border-purple-400 rounded-2xl p-6 text-left transition-all transform hover:scale-102 hover:shadow-lg group"
>
<div className="flex items-center gap-4">
<div className="text-4xl group-hover:scale-110 transition-transform">
{option.emoji}
</div>
<div className="flex-1">
<p className="text-lg font-semibold text-gray-800 group-hover:text-purple-600 transition-colors">
{option.text}
</p>
</div>
<ArrowRight className="w-6 h-6 text-gray-400 group-hover:text-purple-600 opacity-0 group-hover:opacity-100 transition-all" />
</div>
</button>
))}
</div>
<div className="mt-8 pt-6 border-t border-gray-200">
<p className="text-center text-gray-500 text-sm">
⏱️ Almost there! {questions.length - currentQuestion - 1} questions left
</p>
</div>
</div>
</div>
</div>
);
};
export default LearningStyleQuiz;
