improved quiz page

This commit is contained in:
Harivansh Rathi 2024-11-29 11:35:36 -05:00
parent 108b4533e9
commit 43bd803759
4 changed files with 199 additions and 123 deletions

View file

@ -0,0 +1,36 @@
import { useState, useEffect } from 'react';
import { austenQuotes } from '../data/quotes';
const QuoteDisplay = () => {
const [currentQuote, setCurrentQuote] = useState(austenQuotes[0]);
useEffect(() => {
const randomQuote = () => {
const randomIndex = Math.floor(Math.random() * austenQuotes.length);
setCurrentQuote(austenQuotes[randomIndex]);
};
randomQuote();
const interval = setInterval(randomQuote, 10000); // Change quote every 10 seconds
return () => clearInterval(interval);
}, []);
return (
<div className="bg-sage-50 p-6 rounded-lg my-8">
<blockquote className="text-sage-800 italic text-lg mb-4">
"{currentQuote.quote}"
</blockquote>
<div className="text-sage-600 text-sm">
<p className="font-semibold">
{currentQuote.character ? `${currentQuote.character}, ` : ''}{currentQuote.source}
</p>
<p className="mt-2 text-sage-500">
{currentQuote.context}
</p>
</div>
</div>
);
};
export default QuoteDisplay;

View file

@ -1,43 +1,76 @@
export interface QuizQuestion {
question: string;
options: {
value: string;
label: string;
}[];
interface QuizOption {
value: string;
label: string;
}
export interface QuizResult {
interface QuizQuestion {
id: string;
question: string;
options: QuizOption[];
}
interface QuizResult {
character: string;
quote: string;
description: string;
book: string;
matchAdvice: string;
}
export const quizQuestions: QuizQuestion[] = [
{
id: "1",
question: "How do you view marriage?",
options: [
{ value: "elizabeth", label: "A union of equals based on mutual respect and affection" },
{ value: "charlotte", label: "A practical arrangement for security and social position" },
{ value: "marianne", label: "A passionate connection between kindred spirits" },
{ value: "emma", label: "An opportunity to guide and improve one another" }
{ value: "emma", label: "An opportunity to guide and improve one another" },
{ value: "anne", label: "A deep, enduring bond that can withstand time and circumstance" }
]
},
{
question: "What quality do you value most in a potential partner?",
id: "2",
question: "When faced with a difficult social situation, you tend to:",
options: [
{ value: "elizabeth", label: "Intelligence and wit" },
{ value: "elizabeth", label: "Use wit and humor to diffuse tension" },
{ value: "charlotte", label: "Observe quietly and act with pragmatism" },
{ value: "marianne", label: "Express your feelings openly and honestly" },
{ value: "emma", label: "Take charge and try to improve the situation" },
{ value: "anne", label: "Listen carefully and offer gentle guidance" }
]
},
{
id: "3",
question: "What would be your ideal afternoon activity?",
options: [
{ value: "elizabeth", label: "Taking a long walk to clear your mind" },
{ value: "charlotte", label: "Managing household affairs efficiently" },
{ value: "marianne", label: "Reading poetry in a beautiful garden" },
{ value: "emma", label: "Visiting friends and sharing local news" },
{ value: "anne", label: "Playing the pianoforte and reflecting" }
]
},
{
id: "4",
question: "How do you handle disappointment in love?",
options: [
{ value: "elizabeth", label: "Examine your own prejudices and learn from the experience" },
{ value: "charlotte", label: "Accept it practically and look for other opportunities" },
{ value: "marianne", label: "Feel it deeply but eventually grow from the experience" },
{ value: "emma", label: "Realize your mistakes and strive to be better" },
{ value: "anne", label: "Remain constant while hoping for a second chance" }
]
},
{
id: "5",
question: "What trait do you value most in a potential partner?",
options: [
{ value: "elizabeth", label: "Intelligence and the ability to grow" },
{ value: "charlotte", label: "Stability and good prospects" },
{ value: "marianne", label: "Passion and romantic sensibility" },
{ value: "emma", label: "Social standing and influence" }
]
},
{
question: "How do you handle social expectations?",
options: [
{ value: "elizabeth", label: "Challenge them with wit and independence" },
{ value: "charlotte", label: "Accept them as necessary realities" },
{ value: "marianne", label: "Follow your heart regardless" },
{ value: "emma", label: "Set them for others" }
{ value: "emma", label: "Social standing and moral character" },
{ value: "anne", label: "Constancy and quiet strength" }
]
}
];
@ -46,21 +79,36 @@ export const quizResults: Record<string, QuizResult> = {
elizabeth: {
character: "Elizabeth Bennet",
quote: "Till this moment I never knew myself.",
description: "Like Elizabeth Bennet, you value intelligence, wit, and the courage to challenge societal norms. You seek a partnership based on mutual respect and understanding, and aren't afraid to grow from your experiences."
description: "Like Elizabeth Bennet, you are witty, intelligent, and not afraid to challenge societal norms. You seek a partnership based on mutual respect and understanding, and you're willing to acknowledge and learn from your mistakes. Your ideal match will be someone who can match your wit and grow alongside you.",
book: "Pride and Prejudice",
matchAdvice: "Look for someone who challenges your preconceptions and helps you grow, while maintaining mutual respect and affection."
},
charlotte: {
character: "Charlotte Lucas",
quote: "I am not romantic, you know; I never was.",
description: "Practical and clear-eyed like Charlotte Lucas, you understand that marriage is as much about security and companionship as it is about love. You make decisions with your head while maintaining realistic expectations."
description: "Practical and clear-eyed like Charlotte Lucas, you understand that marriage is as much about security and companionship as it is about love. You make decisions with your head while maintaining realistic expectations about relationships.",
book: "Pride and Prejudice",
matchAdvice: "Consider partners who can provide stability and companionship, while being honest with yourself about your expectations."
},
marianne: {
character: "Marianne Dashwood",
quote: "To love is to burn - to be on fire!",
description: "You share Marianne Dashwood's passionate nature and romantic sensibility. You believe in the transformative power of love and seek a deep emotional connection with your partner."
description: "You share Marianne Dashwood's passionate nature and romantic sensibility. While you believe in the transformative power of love, you've learned that true love can come in unexpected forms and that second attachments can be just as meaningful as first ones.",
book: "Sense and Sensibility",
matchAdvice: "Keep your heart open to love, but remember that lasting happiness often comes from balancing passion with wisdom."
},
emma: {
character: "Emma Woodhouse",
quote: "I seem to have been doomed to blindness.",
description: "Like Emma Woodhouse, you're confident and socially adept, though sometimes too quick to make judgments. You value personal growth and learning from your mistakes in relationships."
description: "Like Emma Woodhouse, you're confident, socially adept, and have a strong desire to help others. While sometimes too quick to make judgments, you have the wisdom to learn from your mistakes and the humility to admit when you're wrong.",
book: "Emma",
matchAdvice: "Look for someone who can be your moral equal and who will lovingly point out your mistakes while supporting your growth."
},
anne: {
character: "Anne Elliot",
quote: "All the privilege I claim for my own sex is that of loving longest, when existence or when hope is gone.",
description: "Like Anne Elliot, you possess depth of feeling, constancy in love, and quiet strength of character. You understand that true love can withstand the test of time and that second chances are sometimes worth waiting for.",
book: "Persuasion",
matchAdvice: "Trust in your own judgment and don't let others persuade you against your heart's wisdom."
}
};

49
src/data/quotes.ts Normal file
View file

@ -0,0 +1,49 @@
export const austenQuotes = [
{
quote: "It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.",
source: "Pride and Prejudice",
context: "Opening line, setting the satirical tone for marriage in Regency society"
},
{
quote: "Happiness in marriage is entirely a matter of chance.",
source: "Pride and Prejudice",
character: "Charlotte Lucas",
context: "Discussing her practical view of marriage with Elizabeth"
},
{
quote: "If I loved you less, I might be able to talk about it more.",
source: "Emma",
character: "Mr. Knightley",
context: "Confessing his love to Emma"
},
{
quote: "A lady's imagination is very rapid; it jumps from admiration to love, from love to matrimony in a moment.",
source: "Pride and Prejudice",
character: "Mr. Darcy",
context: "Observing how quickly ladies form attachments"
},
{
quote: "The more I know of the world, the more I am convinced that I shall never see a man whom I can really love. I require so much!",
source: "Sense and Sensibility",
character: "Marianne Dashwood",
context: "Expressing her romantic ideals before meeting Colonel Brandon"
},
{
quote: "You pierce my soul. I am half agony, half hope.",
source: "Persuasion",
character: "Captain Wentworth",
context: "His letter to Anne expressing his enduring love"
},
{
quote: "There is nothing I would not do for those who are really my friends. I have no notion of loving people by halves, it is not my nature.",
source: "Northanger Abbey",
character: "Isabella Thorpe",
context: "Demonstrating the difference between words and actions in matters of the heart"
},
{
quote: "A woman is not to marry a man merely because she is asked, or because he is attached to her, and can write a tolerable letter.",
source: "Emma",
character: "Emma Woodhouse",
context: "Advising Harriet Smith about marriage proposals"
}
];

View file

@ -1,108 +1,35 @@
import { useState } from 'react';
import type { QuizQuestion, AustenCharacter } from '../types';
const QUIZ_QUESTIONS: QuizQuestion[] = [
{
id: '1',
question: 'How do you approach matters of the heart?',
options: [
{
text: 'With passion and spontaneity',
character: 'Marianne Dashwood',
points: 2
},
{
text: 'With wit and intelligence',
character: 'Elizabeth Bennet',
points: 2
},
{
text: 'With careful consideration and practicality',
character: 'Elinor Dashwood',
points: 2
}
]
},
{
id: '2',
question: 'What quality do you value most in a potential partner?',
options: [
{
text: 'Their social standing and connections',
character: 'Emma Woodhouse',
points: 2
},
{
text: 'Their character and principles',
character: 'Elizabeth Bennet',
points: 2
},
{
text: 'Their stability and reliability',
character: 'Anne Elliot',
points: 2
}
]
},
{
id: '3',
question: 'How do you feel about social gatherings?',
options: [
{
text: 'I love being the center of attention',
character: 'Emma Woodhouse',
points: 2
},
{
text: 'I enjoy observing and making witty observations',
character: 'Elizabeth Bennet',
points: 2
},
{
text: 'I prefer intimate gatherings with close friends',
character: 'Anne Elliot',
points: 2
}
]
}
];
const CHARACTER_DESCRIPTIONS: Record<AustenCharacter, string> = {
'Elizabeth Bennet': 'Like Elizabeth, you are witty, intelligent, and not afraid to speak your mind. You value genuine connections over social status and aren\'t afraid to turn down an unsuitable match.',
'Emma Woodhouse': 'Like Emma, you are confident, socially adept, and perhaps a bit meddlesome (in the best way). You have a natural talent for bringing people together.',
'Marianne Dashwood': 'Like Marianne, you wear your heart on your sleeve and believe in passionate, romantic love. You\'re not afraid to express your emotions openly.',
'Anne Elliot': 'Like Anne, you are thoughtful, patient, and deeply loyal. You understand that true love sometimes requires waiting for the right moment.',
'Catherine Morland': 'Like Catherine, you approach life with wonder and imagination. Your romantic nature sometimes leads you to see mysteries where there are none.',
'Elinor Dashwood': 'Like Elinor, you are sensible and responsible, often putting others\' needs before your own. You handle matters of the heart with grace and discretion.'
};
import { quizQuestions, quizResults } from '../data/quiz';
import QuoteDisplay from '../components/QuoteDisplay';
const Quiz = () => {
const [currentQuestion, setCurrentQuestion] = useState(0);
const [answers, setAnswers] = useState<Record<string, AustenCharacter>>({});
const [result, setResult] = useState<AustenCharacter | null>(null);
const [answers, setAnswers] = useState<Record<string, string>>({});
const [result, setResult] = useState<string | null>(null);
const handleAnswer = (character: AustenCharacter) => {
const handleAnswer = (value: string) => {
const currentQuestionId = quizQuestions[currentQuestion].id;
setAnswers(prev => ({
...prev,
[QUIZ_QUESTIONS[currentQuestion].id]: character
[currentQuestionId]: value
}));
if (currentQuestion < QUIZ_QUESTIONS.length - 1) {
if (currentQuestion < quizQuestions.length - 1) {
setCurrentQuestion(prev => prev + 1);
} else {
// Calculate result
const characterCounts: Record<AustenCharacter, number> = Object.values(answers).reduce(
(acc, character) => ({
const characterCounts: Record<string, number> = Object.values(answers).reduce(
(acc, value) => ({
...acc,
[character]: (acc[character] || 0) + 1
[value]: (acc[value] || 0) + 1
}),
{} as Record<AustenCharacter, number>
{} as Record<string, number>
);
const result = Object.entries(characterCounts).reduce(
(max, [character, count]) => (count > (characterCounts[max] || 0) ? character : max),
(max, [value, count]) => (count > (characterCounts[max] || 0) ? value : max),
Object.keys(characterCounts)[0]
) as AustenCharacter;
);
setResult(result);
}
@ -114,20 +41,32 @@ const Quiz = () => {
setResult(null);
};
if (result) {
if (result && result in quizResults) {
const resultData = quizResults[result];
return (
<div className="max-w-2xl mx-auto text-center space-y-8">
<h1 className="font-cormorant text-4xl text-sage-900">Your Result</h1>
<div className="bg-cream-50 p-8 rounded-lg">
<div className="bg-cream-50 p-8 rounded-lg space-y-6">
<h2 className="font-cormorant text-3xl text-sage-900 mb-4">
You are {result}!
You are {resultData.character}!
</h2>
<blockquote className="text-sage-700 italic text-lg border-l-4 border-sage-300 pl-4 my-6">
"{resultData.quote}"
</blockquote>
<p className="text-sage-700 mb-6">
{CHARACTER_DESCRIPTIONS[result]}
{resultData.description}
</p>
<div className="bg-sage-50 p-4 rounded-lg">
<h3 className="font-cormorant text-xl text-sage-900 mb-2">
From {resultData.book}
</h3>
<p className="text-sage-700 italic">
Match Advice: {resultData.matchAdvice}
</p>
</div>
<button
onClick={resetQuiz}
className="bg-sage-500 text-white px-6 py-2 rounded hover:bg-sage-600 transition"
className="bg-sage-500 text-white px-6 py-2 rounded hover:bg-sage-600 transition mt-6"
>
Take Quiz Again
</button>
@ -136,6 +75,8 @@ const Quiz = () => {
);
}
const currentQuestionData = quizQuestions[currentQuestion];
return (
<div className="max-w-2xl mx-auto space-y-8">
<header className="text-center space-y-4">
@ -147,24 +88,26 @@ const Quiz = () => {
</p>
</header>
<QuoteDisplay />
<div className="bg-cream-50 p-8 rounded-lg">
<div className="mb-6">
<h2 className="font-cormorant text-2xl text-sage-900 mb-2">
Question {currentQuestion + 1} of {QUIZ_QUESTIONS.length}
Question {currentQuestion + 1} of {quizQuestions.length}
</h2>
<p className="text-sage-700">
{QUIZ_QUESTIONS[currentQuestion].question}
{currentQuestionData.question}
</p>
</div>
<div className="space-y-4">
{QUIZ_QUESTIONS[currentQuestion].options.map((option) => (
{currentQuestionData.options.map((option) => (
<button
key={option.text}
onClick={() => handleAnswer(option.character)}
key={`${currentQuestionData.id}-${option.value}`}
onClick={() => handleAnswer(option.value)}
className="w-full text-left p-4 rounded bg-white hover:bg-sage-50 transition"
>
{option.text}
{option.label}
</button>
))}
</div>