Percentage Puzzle | Fun Percentage Practice for Middle School | TrendsGlide Tools 🔢 Percentage Puzzle: Master Percentages with Fun! 🎯 Welcome to Percentage Puzzle , your ultimate tool for mastering percentage calculations! Designed specifically for middle school students (grades 6-8), this interactive platform makes learning percentages engaging and effective. Whether you’re just starting with percentages or looking to sharpen your skills, Percentage Puzzle has everything you need.
🔹 Interactive Practice : Work through problems with instant feedbackVisual Learning : See percentage concepts come to life with pie charts and bar graphsGamified Challenges : Learn through fun games and activitiesReal-world Applications : Discounts, tips, taxes, and more
Ready to become a percentage expert? Dive in and start exploring!
© 2023 TrendsGlide Tools | Created by Amal Kumar Paul
Percentage Puzzle – Making percentage learning fun and interactive for middle school students.
'; return; } const result = (percent / 100) * number; document.getElementById('percent-of-result').innerHTML = ` Calculation Result ${percent}% of ${number} = ${result}
How it's calculated:
Convert percentage to decimal: ${percent}% = ${percent / 100} Multiply by the number: ${percent / 100} × ${number} = ${result} `; } function calculatePercentChange() { const original = parseFloat(document.getElementById('change-original').value); const newAmount = parseFloat(document.getElementById('change-new').value); if (isNaN(original) || isNaN(newAmount)) { document.getElementById('percent-change-result').innerHTML = 'Please enter valid numbers!
'; return; } if (original === 0) { document.getElementById('percent-change-result').innerHTML = 'Original amount cannot be zero!
'; return; } const change = newAmount - original; const percentChange = (change / original) * 100; const changeType = change >= 0 ? 'increase' : 'decrease'; document.getElementById('percent-change-result').innerHTML = ` Percentage Change Result The change from ${original} to ${newAmount} is a ${Math.abs(percentChange).toFixed(2)}% ${changeType} .
How it's calculated:
Find the difference: ${newAmount} - ${original} = ${change} Divide by original: ${change} ÷ ${original} = ${(change / original).toFixed(4)} Multiply by 100: ${(change / original).toFixed(4)} × 100 = ${percentChange.toFixed(2)}% `; } function calculateFindPercent() { const part = parseFloat(document.getElementById('find-part').value); const whole = parseFloat(document.getElementById('find-whole').value); if (isNaN(part) || isNaN(whole)) { document.getElementById('find-percent-result').innerHTML = 'Please enter valid numbers!
'; return; } if (whole === 0) { document.getElementById('find-percent-result').innerHTML = 'Whole amount cannot be zero!
'; return; } const percentage = (part / whole) * 100; document.getElementById('find-percent-result').innerHTML = ` Percentage Found ${part} is ${percentage.toFixed(2)}% of ${whole}.
How it's calculated:
Divide part by whole: ${part} ÷ ${whole} = ${(part / whole).toFixed(4)} Multiply by 100: ${(part / whole).toFixed(4)} × 100 = ${percentage.toFixed(2)}% `; } function updateRealWorldInputs() { const problemType = document.getElementById('real-world-type').value; const input1Label = document.getElementById('real-world-input1-container').querySelector('label'); const input2Label = document.getElementById('real-world-input2-container').querySelector('label'); switch(problemType) { case 'discount': input1Label.textContent = 'Original Price ($):'; input2Label.textContent = 'Discount Percentage (%):'; break; case 'tip': input1Label.textContent = 'Bill Amount ($):'; input2Label.textContent = 'Tip Percentage (%):'; break; case 'tax': input1Label.textContent = 'Price Before Tax ($):'; input2Label.textContent = 'Tax Percentage (%):'; break; case 'interest': input1Label.textContent = 'Principal Amount ($):'; input2Label.textContent = 'Interest Rate (% per year):'; break; } } function calculateRealWorld() { const problemType = document.getElementById('real-world-type').value; const input1 = parseFloat(document.getElementById('real-world-input1').value); const input2 = parseFloat(document.getElementById('real-world-input2').value); if (isNaN(input1) || isNaN(input2)) { document.getElementById('real-world-result').innerHTML = 'Please enter valid numbers!
'; return; } let resultHTML = ''; switch(problemType) { case 'discount': const discountAmount = (input2 / 100) * input1; const salePrice = input1 - discountAmount; resultHTML = ` Discount Calculation Original Price: $${input1.toFixed(2)}
Discount: ${input2}% ($${discountAmount.toFixed(2)})
Sale Price: $${salePrice.toFixed(2)}
`; break; case 'tip': const tipAmount = (input2 / 100) * input1; const totalWithTip = input1 + tipAmount; resultHTML = ` Tip Calculation Bill Amount: $${input1.toFixed(2)}
Tip: ${input2}% ($${tipAmount.toFixed(2)})
Total to Pay: $${totalWithTip.toFixed(2)}
`; break; case 'tax': const taxAmount = (input2 / 100) * input1; const totalWithTax = input1 + taxAmount; resultHTML = ` Tax Calculation Price Before Tax: $${input1.toFixed(2)}
Tax: ${input2}% ($${taxAmount.toFixed(2)})
Total Price: $${totalWithTax.toFixed(2)}
`; break; case 'interest': const interestAmount = (input2 / 100) * input1; resultHTML = ` Simple Interest Calculation (1 Year) Principal Amount: $${input1.toFixed(2)}
Interest Rate: ${input2}% per year
Interest Earned in 1 Year: $${interestAmount.toFixed(2)}
Total After 1 Year: $${(input1 + interestAmount).toFixed(2)}
`; break; } document.getElementById('real-world-result').innerHTML = resultHTML; } // Match Game let firstSelectedCard = null; let matchedPairs = 0; let matchGameCards = []; function startMatchGame() { matchedPairs = 0; document.getElementById('match-progress').style.width = '0%'; document.getElementById('match-feedback').textContent = ''; // Create card pairs (percentage, fraction, decimal) const cardValues = [ { type: 'percentage', value: '25%' }, { type: 'fraction', value: '1/4' }, { type: 'decimal', value: '0.25' }, { type: 'percentage', value: '50%' }, { type: 'fraction', value: '1/2' }, { type: 'decimal', value: '0.5' }, { type: 'percentage', value: '75%' }, { type: 'fraction', value: '3/4' }, { type: 'decimal', value: '0.75' }, { type: 'percentage', value: '20%' }, { type: 'fraction', value: '1/5' }, { type: 'decimal', value: '0.2' } ]; // Shuffle cards matchGameCards = shuffleArray(cardValues); // Create game board const gameBoard = document.getElementById('match-board'); gameBoard.innerHTML = ''; matchGameCards.forEach((card, index) => { const cardElement = document.createElement('div'); cardElement.className = 'game-cell'; cardElement.dataset.index = index; cardElement.dataset.type = card.type; cardElement.dataset.value = card.value; cardElement.textContent = '?'; cardElement.addEventListener('click', () => selectMatchCard(cardElement)); gameBoard.appendChild(cardElement); }); } function selectMatchCard(cardElement) { // Don't allow selecting already matched or revealed cards if (cardElement.classList.contains('selected') || cardElement.textContent !== '?') { return; } // Show the card's value cardElement.textContent = cardElement.dataset.value; if (!firstSelectedCard) { // First card selected firstSelectedCard = cardElement; } else { // Second card selected - check for match const card1 = firstSelectedCard; const card2 = cardElement; // Disable all cards temporarily document.querySelectorAll('#match-board .game-cell').forEach(cell => { cell.style.pointerEvents = 'none'; }); // Check if they match (same percentage value) const value1 = getCardPercentageValue(card1); const value2 = getCardPercentageValue(card2); if (value1 === value2) { // Match found card1.classList.add('selected'); card2.classList.add('selected'); matchedPairs++; // Update progress document.getElementById('match-progress').style.width = `${(matchedPairs / 4) * 100}%`; // Check if game is won if (matchedPairs === 4) { document.getElementById('match-feedback').innerHTML = ` 🎉 Congratulations! You matched all pairs!
`; } else { document.getElementById('match-feedback').innerHTML = ` ✅ Match found! ${4 - matchedPairs} pairs remaining.
`; } // Re-enable remaining cards document.querySelectorAll('#match-board .game-cell:not(.selected)').forEach(cell => { cell.style.pointerEvents = 'auto'; }); } else { // No match - flip cards back after delay document.getElementById('match-feedback').innerHTML = ` ❌ No match. Try again!
`; setTimeout(() => { card1.textContent = '?'; card2.textContent = '?'; // Re-enable all cards document.querySelectorAll('#match-board .game-cell').forEach(cell => { cell.style.pointerEvents = 'auto'; }); }, 1000); } firstSelectedCard = null; } } function getCardPercentageValue(card) { const value = card.dataset.value; if (card.dataset.type === 'percentage') { return parseFloat(value); } else if (card.dataset.type === 'fraction') { const [numerator, denominator] = value.split('/').map(Number); return (numerator / denominator) * 100; } else if (card.dataset.type === 'decimal') { return parseFloat(value) * 100; } return 0; } // Quiz Game let quizScore = 0; let quizQuestions = []; let currentQuizQuestion = 0; function startQuizGame() { quizScore = 0; currentQuizQuestion = 0; document.getElementById('quiz-progress').style.width = '0%'; document.getElementById('quiz-next').style.display = 'none'; // Generate quiz questions quizQuestions = [ { question: "What is 25% of 80?", options: ["20", "25", "30", "35"], answer: "20" }, { question: "If a shirt costs $40 and is on sale for 20% off, what is the sale price?", options: ["$32", "$30", "$28", "$20"], answer: "$32" }, { question: "Convert 0.6 to a percentage.", options: ["6%", "60%", "600%", "0.6%"], answer: "60%" }, { question: "What percentage is 3/4?", options: ["25%", "50%", "75%", "100%"], answer: "75%" }, { question: "If a population grows from 200 to 250, what is the percentage increase?", options: ["20%", "25%", "30%", "50%"], answer: "25%" } ]; // Shuffle questions quizQuestions = shuffleArray(quizQuestions); showQuizQuestion(); } function showQuizQuestion() { if (currentQuizQuestion >= quizQuestions.length) { document.getElementById('quiz-question').innerHTML = 'Quiz Complete! '; document.getElementById('quiz-options').innerHTML = ''; document.getElementById('quiz-feedback').innerHTML = ` Your score: ${quizScore}/5 ${quizScore >= 3 ? '🎉 Well done! You passed the quiz!' : '😢 Try again to improve your score!'}
`; return; } const question = quizQuestions[currentQuizQuestion]; document.getElementById('quiz-question').textContent = question.question; const optionsContainer = document.getElementById('quiz-options'); optionsContainer.innerHTML = ''; // Shuffle options const shuffledOptions = shuffleArray([...question.options]); shuffledOptions.forEach((option, index) => { const optionButton = document.createElement('button'); optionButton.className = 'btn btn-small'; optionButton.textContent = option; optionButton.style.display = 'block'; optionButton.style.width = '100%'; optionButton.style.margin = '5px 0'; optionButton.addEventListener('click', () => checkQuizAnswer(option, question.answer)); optionsContainer.appendChild(optionButton); }); document.getElementById('quiz-feedback').textContent = ''; } function checkQuizAnswer(selectedOption, correctAnswer) { const isCorrect = selectedOption === correctAnswer; if (isCorrect) { quizScore++; document.getElementById('quiz-feedback').innerHTML = ` ✅ Correct! Well done!
`; } else { document.getElementById('quiz-feedback').innerHTML = ` ❌ Incorrect. The correct answer is ${correctAnswer}.
`; } // Update progress document.getElementById('quiz-progress').style.width = `${(quizScore / 5) * 100}%`; // Disable all options document.querySelectorAll('#quiz-options button').forEach(button => { button.disabled = true; if (button.textContent === correctAnswer) { button.style.backgroundColor = 'var(--success)'; } }); document.getElementById('quiz-next').style.display = 'inline-block'; } function nextQuizQuestion() { currentQuizQuestion++; showQuizQuestion(); } // Concept Examples function showPercentageExample() { const exampleDiv = document.getElementById('percentage-example'); exampleDiv.style.display = 'block'; exampleDiv.innerHTML = ` More Percentage Examples Percentage Fraction Decimal 10% 1/10 0.1 20% 1/5 0.2 33% 1/3 0.33 100% 1/1 1.0
`; } function convertValue() { const input = document.getElementById('convert-value').value.trim(); let result = ''; if (input.includes('%')) { // Percentage to fraction and decimal const percent = parseFloat(input.replace('%', '')); if (!isNaN(percent)) { const decimal = percent / 100; const fraction = simplifyFraction(percent, 100); result = ` Decimal: ${decimal.toFixed(2)}
Fraction: ${fraction}
`; } } else if (input.includes('/')) { // Fraction to percentage and decimal const [numerator, denominator] = input.split('/').map(Number); if (!isNaN(numerator) && !isNaN(denominator) && denominator !== 0) { const decimal = numerator / denominator; const percent = decimal * 100; result = ` Percentage: ${percent.toFixed(2)}%
Decimal: ${decimal.toFixed(2)}
`; } } else { // Decimal to percentage and fraction const decimal = parseFloat(input); if (!isNaN(decimal)) { const percent = decimal * 100; const fraction = simplifyFraction(decimal * 100, 100); result = ` Percentage: ${percent.toFixed(2)}%
Fraction: ${fraction}
`; } } if (!result) { result = 'Please enter a valid percentage (e.g., 25%), fraction (e.g., 1/4), or decimal (e.g., 0.25)
'; } document.getElementById('conversion-result').innerHTML = result; } function simplifyFraction(numerator, denominator) { const gcd = findGCD(numerator, denominator); const simpleNum = numerator / gcd; const simpleDen = denominator / gcd; if (simpleDen === 1) return simpleNum.toString(); return `${simpleNum}/${simpleDen}`; } function showRealWorldExamples() { const exampleDiv = document.getElementById('real-world-examples'); exampleDiv.style.display = 'block'; exampleDiv.innerHTML = ` Real-world Percentage Examples Discount Example A $50 item is on sale for 20% off:
Discount: 20% of $50 = $10
Sale Price: $50 - $10 = $40
Tip Example A $60 restaurant bill with 15% tip:
Tip: 15% of $60 = $9
Total: $60 + $9 = $69
Tax Example A $30 purchase with 8% sales tax:
Tax: 8% of $30 = $2.40
Total: $30 + $2.40 = $32.40
`; } // Helper function to shuffle array function shuffleArray(array) { const newArray = [...array]; for (let i = newArray.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [newArray[i], newArray[j]] = [newArray[j], newArray[i]]; } return newArray; } // Initialize the page document.addEventListener('DOMContentLoaded', function() { visualizePercentage(); calculatePercentOf(); updateRealWorldInputs(); // Add event listener for real-world problem type change document.getElementById('real-world-type').addEventListener('change', updateRealWorldInputs); }); 