<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiplying Fractions by Fractions Quiz</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts - Inter -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(to bottom right, #3b82f6, #9333ea); /* bg-gradient-to-br from-blue-500 to-purple-600 */
}
/* Custom styles for better visual appeal */
.container {
background-color: #ffffff;
padding: 2rem;
border-radius: 1rem; /* rounded-xl */
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-2xl */
width: 100%;
max-width: 36rem; /* max-w-lg */
}
.button-option {
padding: 1rem;
border-radius: 0.5rem; /* rounded-lg */
text-align: left;
font-size: 1.125rem; /* text-lg */
font-weight: 500; /* font-medium */
transition: all 0.3s ease-in-out; /* transition duration-300 ease-in-out */
transform: scale(1);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow-sm */
}
.button-option:hover:not(:disabled) {
transform: scale(1.02); /* hover:scale-105 */
}
.button-nav {
font-weight: 700; /* font-bold */
padding: 0.5rem 1rem; /* py-2 px-4 */
border-radius: 0.5rem; /* rounded-lg */
transition: all 0.3s ease-in-out; /* transition duration-300 ease-in-out */
transform: scale(1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-md */
}
.button-nav:hover:not(:disabled) {
transform: scale(1.05); /* hover:scale-105 */
}
</style>
</head>
<body>
<div id="quiz-app" class="container">
<!-- Quiz content will be rendered here by JavaScript -->
</div>
<script>
// Quiz Questions Data (30 items)
const quizQuestions = [
{
question: 'What is 1/2 multiplied by 1/3?',
options: ['1/6', '2/6', '1/3', '1/5'],
correctAnswer: '1/6',
rationale: 'To multiply fractions, multiply the numerators and multiply the denominators: (1 * 1) / (2 * 3) = 1/6.'
},
{
question: 'Multiply: 2/3 * 1/4',
options: ['2/12', '1/6', '3/7', '2/7'],
correctAnswer: '1/6',
rationale: 'Multiply numerators (2*1=2) and denominators (3*4=12): 2/12, which simplifies to 1/6.'
},
{
question: 'Find the product of 3/4 and 2/5.',
options: ['6/20', '3/10', '5/9', '1/2'],
correctAnswer: '3/10',
rationale: 'Multiply numerators (3*2=6) and denominators (4*5=20): 6/20, which simplifies to 3/10.'
},
{
question: 'What is the result of 1/5 * 3/4?',
options: ['3/20', '4/9', '1/20', '1/5'],
correctAnswer: '3/20',
rationale: 'Multiply numerators (1*3=3) and denominators (5*4=20): 3/20.'
},
{
question: 'Multiply: 1/2 * 1/2',
options: ['1/4', '2/4', '1', '1/8'],
correctAnswer: '1/4',
rationale: 'Multiply numerators (1*1=1) and denominators (2*2=4): 1/4.'
},
{
question: 'What is 2/5 multiplied by 1/3?',
options: ['2/15', '3/8', '1/5', '2/8'],
correctAnswer: '2/15',
rationale: 'Multiply numerators (2*1=2) and denominators (5*3=15): 2/15.'
},
{
question: 'Multiply: 3/4 * 1/2',
options: ['3/8', '4/6', '1/2', '3/6'],
correctAnswer: '3/8',
rationale: 'Multiply numerators (3*1=3) and denominators (4*2=8): 3/8.'
},
{
question: 'Find the product of 1/6 and 3/4.',
options: ['3/24', '1/8', '4/10', '1/6'],
correctAnswer: '1/8',
rationale: 'Multiply numerators (1*3=3) and denominators (6*4=24): 3/24, which simplifies to 1/8.'
},
{
question: 'What is the result of 2/7 * 3/5?',
options: ['6/35', '5/12', '1/7', '2/5'],
correctAnswer: '6/35',
rationale: 'Multiply numerators (2*3=6) and denominators (7*5=35): 6/35.'
},
{
question: 'Multiply: 4/9 * 1/2',
options: ['4/18', '2/9', '5/11', '1/2'],
correctAnswer: '2/9',
rationale: 'Multiply numerators (4*1=4) and denominators (9*2=18): 4/18, which simplifies to 2/9.'
},
{
question: 'What is 1/3 multiplied by 1/3?',
options: ['1/9', '2/6', '1/3', '1/6'],
correctAnswer: '1/9',
rationale: 'Multiply numerators (1*1=1) and denominators (3*3=9): 1/9.'
},
{
question: 'Multiply: 3/5 * 2/3',
options: ['6/15', '2/5', '5/8', '1/2'],
correctAnswer: '2/5',
rationale: 'Multiply numerators (3*2=6) and denominators (5*3=15): 6/15, which simplifies to 2/5.'
},
{
question: 'Find the product of 1/4 and 1/5.',
options: ['1/20', '2/9', '1/4', '1/5'],
correctAnswer: '1/20',
rationale: 'Multiply numerators (1*1=1) and denominators (4*5=20): 1/20.'
},
{
question: 'What is the result of 2/3 * 2/5?',
options: ['4/15', '4/8', '1/3', '2/5'],
correctAnswer: '4/15',
rationale: 'Multiply numerators (2*2=4) and denominators (3*5=15): 4/15.'
},
{
question: 'Multiply: 1/6 * 5/6',
options: ['5/36', '6/12', '1/6', '5/12'],
correctAnswer: '5/36',
rationale: 'Multiply numerators (1*5=5) and denominators (6*6=36): 5/36.'
},
{
question: 'What is 3/8 multiplied by 1/2?',
options: ['3/16', '4/10', '1/2', '3/8'],
correctAnswer: '3/16',
rationale: 'Multiply numerators (3*1=3) and denominators (8*2=16): 3/16.'
},
{
question: 'Multiply: 1/7 * 2/5',
options: ['2/35', '3/12', '1/7', '2/5'],
correctAnswer: '2/35',
rationale: 'Multiply numerators (1*2=2) and denominators (7*5=35): 2/35.'
},
{
question: 'Find the product of 2/9 and 1/3.',
options: ['2/27', '3/12', '1/9', '2/9'],
correctAnswer: '2/27',
rationale: 'Multiply numerators (2*1=2) and denominators (9*3=27): 2/27.'
},
{
question: 'What is the result of 1/4 * 1/4?',
options: ['1/16', '2/8', '1/4', '1/2'],
correctAnswer: '1/16',
rationale: 'Multiply numerators (1*1=1) and denominators (4*4=16): 1/16.'
},
{
question: 'Multiply: 3/10 * 1/2',
options: ['3/20', '4/12', '1/5', '3/10'],
correctAnswer: '3/20',
rationale: 'Multiply numerators (3*1=3) and denominators (10*2=20): 3/20.'
},
{
question: 'What is 1/2 multiplied by 1/4?',
options: ['1/8', '2/8', '1/2', '1/4'],
correctAnswer: '1/8',
rationale: 'Multiply numerators (1*1=1) and denominators (2*4=8): 1/8.'
},
{
question: 'Multiply: 2/3 * 1/5',
options: ['2/15', '3/10', '1/5', '2/8'],
correctAnswer: '2/15',
rationale: 'Multiply numerators (2*1=2) and denominators (3*5=15): 2/15.'
},
{
question: 'Find the product of 3/4 and 2/5.',
options: ['6/20', '3/10', '5/9', '1/2'],
correctAnswer: '3/10',
rationale: 'Multiply numerators (3*2=6) and denominators (4*5=20): 6/20, which simplifies to 3/10.'
},
{
question: 'What is the result of 1/5 * 3/4?',
options: ['3/20', '4/9', '1/20', '1/5'],
correctAnswer: '3/20',
rationale: 'Multiply numerators (1*3=3) and denominators (5*4=20): 3/20.'
},
{
question: 'Multiply: 1/2 * 1/2',
options: ['1/4', '2/4', '1', '1/8'],
correctAnswer: '1/4',
rationale: 'Multiply numerators (1*1=1) and denominators (2*2=4): 1/4.'
},
{
question: 'What is 2/5 multiplied by 1/3?',
options: ['2/15', '3/8', '1/5', '2/8'],
correctAnswer: '2/15',
rationale: 'Multiply numerators (2*1=2) and denominators (5*3=15): 2/15.'
},
{
question: 'Multiply: 3/4 * 1/2',
options: ['3/8', '4/6', '1/2', '3/6'],
correctAnswer: '3/8',
rationale: 'Multiply numerators (3*1=3) and denominators (4*2=8): 3/8.'
},
{
question: 'Find the product of 1/6 and 3/4.',
options: ['3/24', '1/8', '4/10', '1/6'],
correctAnswer: '1/8',
rationale: 'Multiply numerators (1*3=3) and denominators (6*4=24): 3/24, which simplifies to 1/8.'
},
{
question: 'What is the result of 2/7 * 3/5?',
options: ['6/35', '5/12', '1/7', '2/5'],
correctAnswer: '6/35',
rationale: 'Multiply numerators (2*3=6) and denominators (7*5=35): 6/35.'
},
{
question: 'Multiply: 4/9 * 1/2',
options: ['4/18', '2/9', '5/11', '1/2'],
correctAnswer: '2/9',
rationale: 'Multiply numerators (4*1=4) and denominators (9*2=18): 4/18, which simplifies to 2/9.'
}
];
let currentQuestionIndex = 0;
let userAnswers = Array(quizQuestions.length).fill(null);
let score = 0;
let showResults = false;
let selectedOption = null;
const quizApp = document.getElementById('quiz-app');
function renderQuiz() {
if (showResults) {
renderResults();
return;
}
const currentQuestion = quizQuestions[currentQuestionIndex];
const isAnswered = userAnswers[currentQuestionIndex] !== null;
const isCorrect = isAnswered && userAnswers[currentQuestionIndex] === currentQuestion.correctAnswer;
let optionsHtml = currentQuestion.options.map((option, index) => {
let buttonClass = 'button-option ';
if (!isAnswered) {
buttonClass += 'bg-blue-100 text-blue-800 hover:bg-blue-200 hover:shadow-md';
} else {
if (option === currentQuestion.correctAnswer) {
buttonClass += 'bg-green-200 text-green-800 border-2 border-green-500 shadow-md';
} else if (option === userAnswers[currentQuestionIndex]) {
buttonClass += 'bg-red-200 text-red-800 border-2 border-red-500 shadow-md';
} else {
buttonClass += 'bg-gray-100 text-gray-500 cursor-not-allowed';
}
}
if (selectedOption === option && isAnswered) {
buttonClass += ` ${isCorrect ? 'ring-4 ring-green-400' : 'ring-4 ring-red-400'}`;
}
return `
<button
class="${buttonClass}"
${isAnswered ? 'disabled' : ''}
onclick="handleOptionClick('${option.replace(/'/g, "\\'")}')"
>
${option}
</button>
`;
}).join('');
let rationaleHtml = '';
if (isAnswered) {
const rationaleClass = isCorrect ? 'bg-green-100 border-l-4 border-green-500 text-green-800' : 'bg-red-100 border-l-4 border-red-500 text-red-800';
rationaleHtml = `
<div class="p-4 rounded-lg mb-6 ${rationaleClass}">
<p class="font-semibold">${isCorrect ? 'Correct!' : 'Incorrect!'}</p>
<p class="text-sm mt-2">${currentQuestion.rationale}</p>
</div>
`;
}
const nextButtonText = currentQuestionIndex === quizQuestions.length - 1 ? 'Finish Quiz' : 'Next';
const nextButtonDisabled = !isAnswered && currentQuestionIndex < quizQuestions.length - 1;
const nextButtonClass = `button-nav ${currentQuestionIndex === quizQuestions.length - 1 ? 'bg-green-600 hover:bg-green-700 text-white' : 'bg-indigo-600 hover:bg-indigo-700 text-white'} ${nextButtonDisabled ? 'opacity-50 cursor-not-allowed' : ''}`;
quizApp.innerHTML = `
<div class="text-center mb-6">
<h1 class="text-3xl font-bold text-indigo-700 mb-2">Multiplying Fractions by Fractions Quiz</h1>
<p class="text-lg text-gray-600">Question ${currentQuestionIndex + 1} of ${quizQuestions.length}</p>
</div>
<div class="bg-indigo-50 p-6 rounded-lg mb-6 shadow-inner">
<p class="text-gray-800 text-xl font-semibold leading-relaxed">${currentQuestion.question}</p>
</div>
<div class="grid grid-cols-1 gap-4 mb-6">
${optionsHtml}
</div>
${rationaleHtml}
<div class="flex justify-between mt-6">
<button
onclick="goToPreviousQuestion()"
${currentQuestionIndex === 0 ? 'disabled' : ''}
class="button-nav bg-gray-300 hover:bg-gray-400 text-gray-800 disabled:opacity-50 disabled:cursor-not-allowed"
>
Previous
</button>
<button
onclick="goToNextQuestion()"
${nextButtonDisabled ? 'disabled' : ''}
class="${nextButtonClass}"
>
${nextButtonText}
</button>
</div>
`;
}
function handleOptionClick(selectedAnswer) {
if (userAnswers[currentQuestionIndex] === null) {
userAnswers[currentQuestionIndex] = selectedAnswer;
selectedOption = selectedAnswer;
if (selectedAnswer === quizQuestions[currentQuestionIndex].correctAnswer) {
score++;
}
renderQuiz(); // Re-render to show rationale and correct/incorrect styling
}
}
function goToNextQuestion() {
if (currentQuestionIndex < quizQuestions.length - 1) {
currentQuestionIndex++;
selectedOption = null; // Reset selected option for next question
renderQuiz();
} else {
showResults = true;
renderQuiz();
}
}
function goToPreviousQuestion() {
if (currentQuestionIndex > 0) {
currentQuestionIndex--;
selectedOption = userAnswers[currentQuestionIndex]; // Restore selected option for previous question
renderQuiz();
}
}
function renderResults() {
const percentageScore = (score / quizQuestions.length) * 100;
quizApp.innerHTML = `
<div class="text-center">
<h2 class="text-3xl font-bold mb-6 text-indigo-700">Quiz Completed!</h2>
<p class="text-xl mb-4">Your score: <span class="font-extrabold text-green-600">${score}</span> out of <span class="font-extrabold">${quizQuestions.length}</span></p>
<p class="text-2xl font-bold font-bold mb-8">(${percentageScore.toFixed(2)}%)</p>
<button
onclick="restartQuiz()"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 shadow-md"
>
Try Again
</button>
</div>
`;
}
function restartQuiz() {
currentQuestionIndex = 0;
userAnswers = Array(quizQuestions.length).fill(null);
score = 0;
showResults = false;
selectedOption = null;
renderQuiz();
}
// Initial render
window.onload = renderQuiz;
</script>
</body>
</html>
.png)
.png)
No comments:
Post a Comment
Thank you for your feedback.