Fractions
import React, { useState, useEffect } from 'react';
const FractionComparisonGame = () => {
const [score, setScore] = useState(0);
const [questionNumber, setQuestionNumber] = useState(1);
const [totalQuestions] = useState(10);
const [currentQuestion, setCurrentQuestion] = useState(null);
const [selectedAnswer, setSelectedAnswer] = useState(null);
const [showExplanation, setShowExplanation] = useState(false);
const [gameOver, setGameOver] = useState(false);
const [message, setMessage] = useState('');
// Generate a random fraction with denominator between 2 and 12
const generateRandomFraction = () => {
const denominator = Math.floor(Math.random() * 11) + 2; // 2 to 12
const numerator = Math.floor(Math.random() * (denominator - 1)) + 1; // 1 to denominator-1
return { numerator, denominator };
};
// Create a new question
const generateQuestion = () => {
const fraction1 = generateRandomFraction();
let fraction2 = generateRandomFraction();
// Ensure fractions are different
while (fraction1.numerator / fraction1.denominator === fraction2.numerator / fraction2.denominator) {
fraction2 = generateRandomFraction();
}
const value1 = fraction1.numerator / fraction1.denominator;
const value2 = fraction2.numerator / fraction2.denominator;
let correctAnswer;
if (value1 > value2) {
correctAnswer = '>';
} else if (value1 < value2) {
correctAnswer = '<';
} else {
correctAnswer = '=';
}
return {
fraction1,
fraction2,
correctAnswer,
};
};
// Initialize the game
useEffect(() => {
setCurrentQuestion(generateQuestion());
}, []);
// Check the answer
const checkAnswer = (answer) => {
setSelectedAnswer(answer);
setShowExplanation(true);
if (answer === currentQuestion.correctAnswer) {
setScore(score + 1);
setMessage('Correct! 🎉');
} else {
setMessage('Not quite right. Let\'s see why!');
}
};
// Go to the next question
const nextQuestion = () => {
if (questionNumber < totalQuestions) {
setQuestionNumber(questionNumber + 1);
setCurrentQuestion(generateQuestion());
setSelectedAnswer(null);
setShowExplanation(false);
setMessage('');
} else {
setGameOver(true);
}
};
// Restart the game
const restartGame = () => {
setScore(0);
setQuestionNumber(1);
setCurrentQuestion(generateQuestion());
setSelectedAnswer(null);
setShowExplanation(false);
setGameOver(false);
setMessage('');
};
// Render fraction bars
const FractionBar = ({ numerator, denominator }) => {
const sections = [];
for (let i = 0; i < denominator; i++) {
sections.push(
);
}
return (
{sections}
);
};
if (!currentQuestion) {
return Loading...
;
}
return (
Fraction Comparison Game
{!gameOver ? (Question: {questionNumber}/{totalQuestions}
Score: {score}
{currentQuestion.fraction1.numerator}/{currentQuestion.fraction1.denominator}
?
{currentQuestion.fraction2.numerator}/{currentQuestion.fraction2.denominator}
Which symbol correctly compares these fractions?
{message}
Explanation:
To compare fractions, we can convert them to have the same denominator or calculate their decimal values.
{currentQuestion.fraction1.numerator}/{currentQuestion.fraction1.denominator} =
{(currentQuestion.fraction1.numerator / currentQuestion.fraction1.denominator).toFixed(2)}
{currentQuestion.fraction2.numerator}/{currentQuestion.fraction2.denominator} =
{(currentQuestion.fraction2.numerator / currentQuestion.fraction2.denominator).toFixed(2)}
{currentQuestion.fraction1.numerator}/{currentQuestion.fraction1.denominator} {' '}{currentQuestion.correctAnswer}{' '} {currentQuestion.fraction2.numerator}/{currentQuestion.fraction2.denominator}
Game Over!
Your final score: {score}/{totalQuestions}
{score === totalQuestions ? (Perfect score! You're a fraction master! 🏆
) : score >= totalQuestions * 0.7 ? (Great job! You're getting really good at comparing fractions! 🌟
) : (Keep practicing! You'll get better with more practice. 💪
)}
Comments
Post a Comment