yesmoney.com

give a 25 minutes excise based on the video content , to make sure the viewer learnt the concepts, with answers on a separate page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complete Guide to Percentages</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(to bottom right, #eff6ff, #faf5ff);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
.header {
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
padding: 30px;
margin-bottom: 30px;
}
.header h1 {
color: #1f2937;
font-size: 2em;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 15px;
}
.header p {
color: #6b7280;
font-size: 1.1em;
}
.main-content {
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
padding: 30px;
}
.nav-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #e5e7eb;
}
.nav-btn {
padding: 12px 20px;
border: none;
border-radius: 8px;
font-size: 0.95em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
background: #f3f4f6;
color: #374151;
}
.nav-btn:hover {
background: #e5e7eb;
}
.nav-btn.active {
background: #3b82f6;
color: white;
}
.section {
display: none;
}
.section.active {
display: block;
animation: fadeIn 0.3s;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.section h2 {
color: #1f2937;
font-size: 1.8em;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.section h3 {
color: #374151;
font-size: 1.3em;
margin-top: 25px;
margin-bottom: 12px;
}
.section p {
color: #4b5563;
line-height: 1.7;
margin-bottom: 15px;
}
.highlight-box {
padding: 20px;
border-radius: 8px;
margin: 20px 0;
}
.blue-box {
background: #eff6ff;
border-left: 4px solid #3b82f6;
}
.purple-box {
background: #faf5ff;
padding: 15px;
border-radius: 8px;
font-family: 'Courier New', monospace;
margin: 10px 0;
}
.green-box {
background: #f0fdf4;
padding: 20px;
border-radius: 8px;
margin: 15px 0;
}
.orange-box {
background: #fff7ed;
padding: 25px;
border-radius: 8px;
border: 2px solid #fb923c;
text-align: center;
margin: 20px 0;
}
.red-box {
background: #fef2f2;
padding: 20px;
border-radius: 8px;
margin: 15px 0;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 25px 0;
}
.card {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card h4 {
color: #16a34a;
font-size: 1.2em;
margin-bottom: 8px;
}
ul {
margin-left: 25px;
margin-top: 10px;
}
ul li {
color: #374151;
margin: 8px 0;
line-height: 1.6;
}
.quiz-question {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin: 20px 0;
}
.quiz-question p {
font-weight: 600;
margin-bottom: 15px;
}
.quiz-options {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.quiz-option {
padding: 12px;
border: 2px solid #d1d5db;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
text-align: center;
background: white;
}
.quiz-option:hover {
border-color: #9ca3af;
}
.quiz-option.selected {
background: #dbeafe;
border-color: #3b82f6;
}
.quiz-option.correct {
background: #dcfce7;
border-color: #16a34a;
}
.quiz-option.incorrect {
background: #fee2e2;
border-color: #dc2626;
}
.quiz-feedback {
margin-top: 10px;
font-size: 0.9em;
font-weight: 600;
}
.quiz-feedback.correct {
color: #16a34a;
}
.quiz-feedback.incorrect {
color: #dc2626;
}
.check-btn {
width: 100%;
padding: 15px;
background: #3b82f6;
color: white;
border: none;
border-radius: 8px;
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
margin-top: 20px;
transition: background 0.3s;
}
.check-btn:hover {
background: #2563eb;
}
.navigation {
display: flex;
justify-content: space-between;
margin-top: 40px;
padding-top: 30px;
border-top: 2px solid #e5e7eb;
}
.nav-arrow {
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 1em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.nav-arrow.prev {
background: #e5e7eb;
color: #374151;
}
.nav-arrow.prev:hover:not(:disabled) {
background: #d1d5db;
}
.nav-arrow.next {
background: #3b82f6;
color: white;
}
.nav-arrow.next:hover:not(:disabled) {
background: #2563eb;
}
.nav-arrow:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.icon {
display: inline-block;
width: 32px;
height: 32px;
background: #3b82f6;
border-radius: 8px;
position: relative;
}
@media (max-width: 768px) {
.nav-buttons {
flex-direction: column;
}
.nav-btn {
width: 100%;
}
.quiz-options {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>
<span class="icon">��</span>
Complete Guide to Percentages
</h1>
<p>Everything you need to master percentages for Year 8/9</p>
</div>
<div class="main-content">
<div class="nav-buttons">
<button class="nav-btn active" onclick="showSection('basics')">What Are Percentages?</button>
<button class="nav-btn" onclick="showSection('converting')">Converting Between Forms</button>
<button class="nav-btn" onclick="showSection('calculating')">Finding Percentages</button>
<button class="nav-btn" onclick="showSection('increase')">Increase & Decrease</button>
<button class="nav-btn" onclick="showSection('change')">Percentage Change</button>
<button class="nav-btn" onclick="showSection('practice')">Quick Practice</button>
</div>
<!-- Basics Section -->
<div id="basics" class="section active">
<h2>✓ What Are Percentages?</h2>
<p style="font-size: 1.1em;">A percentage is just a way of expressing a number as a fraction of 100. The word "percent" literally means "per hundred".</p>
<div class="highlight-box blue-box">
<p style="font-weight: 600; color: #1e40af; margin-bottom: 5px;">Key Concept:</p>
<p style="color: #1e3a8a; margin: 0;">50% means 50 out of 100, or half of something</p>
</div>
<div class="card-grid">
<div class="card">
<h4>25%</h4>
<p style="margin: 8px 0;">= 25/100 = 1/4 = 0.25</p>
<p style="font-size: 0.9em; color: #6b7280; margin: 0;">One quarter</p>
</div>
<div class="card">
<h4>50%</h4>
<p style="margin: 8px 0;">= 50/100 = 1/2 = 0.5</p>
<p style="font-size: 0.9em; color: #6b7280; margin: 0;">One half</p>
</div>
<div class="card">
<h4>75%</h4>
<p style="margin: 8px 0;">= 75/100 = 3/4 = 0.75</p>
<p style="font-size: 0.9em; color: #6b7280; margin: 0;">Three quarters</p>
</div>
</div>
</div>
<!-- Converting Section -->
<div id="converting" class="section">
<h2>✓ Converting Between Forms</h2>
<h3>Fraction → Percentage</h3>
<p>Divide the top by the bottom, then multiply by 100</p>
<div class="purple-box">3/5 → 3 ÷ 5 = 0.6 → 0.6 × 100 = 60%</div>
<h3>Decimal → Percentage</h3>
<p>Multiply by 100</p>
<div class="purple-box">0.85 × 100 = 85%</div>
<h3>Percentage → Decimal</h3>
<p>Divide by 100</p>
<div class="purple-box">32% ÷ 100 = 0.32</div>
<h3>Percentage → Fraction</h3>
<p>Write over 100 and simplify</p>
<div class="purple-box">40% = 40/100 = 2/5</div>
</div>
<!-- Calculating Section -->
<div id="calculating" class="section">
<h2>✓ Finding Percentages of Amounts</h2>
<h3>Method 1: Using Decimals</h3>
<p>Convert the percentage to a decimal, then multiply</p>
<div class="green-box">
<p style="font-weight: 600; margin-bottom: 10px;">Example: Find 20% of £60</p>
<p style="font-family: 'Courier New', monospace; margin: 5px 0;">20% = 0.2</p>
<p style="font-family: 'Courier New', monospace; margin: 5px 0;">0.2 × 60 = £12</p>
</div>
<h3>Method 2: Finding 10% and 1%</h3>
<p>Find 10% by dividing by 10, then build up to what you need</p>
<div class="green-box">
<p style="font-weight: 600; margin-bottom: 10px;">Example: Find 15% of 80</p>
<p style="font-family: 'Courier New', monospace; margin: 5px 0;">10% of 80 = 8</p>
<p style="font-family: 'Courier New', monospace; margin: 5px 0;">5% of 80 = 4 (half of 10%)</p>
<p style="font-family: 'Courier New', monospace; margin: 5px 0;">15% = 8 + 4 = 12</p>
</div>
<h3>Quick Tips:</h3>
<ul>
<li>50% = divide by 2</li>
<li>25% = divide by 4</li>
<li>10% = divide by 10</li>
<li>1% = divide by 100</li>
</ul>
</div>
<!-- Increase/Decrease Section -->
<div id="increase" class="section">
<h2>✓ Percentage Increase & Decrease</h2>
<h3 style="color: #16a34a;">Percentage Increase</h3>
<div class="green-box">
<p style="font-weight: 600; margin-bottom: 10px;">Example: Increase £50 by 20%</p>
<p style="margin: 8px 0;">Method 1: Find 20%, then add it on</p>
<p style="font-family: 'Courier New', monospace; margin: 3px 0;">20% of 50 = 10</p>
<p style="font-family: 'Courier New', monospace; margin: 3px 0;">50 + 10 = £60</p>
<p style="margin: 15px 0 8px 0;">Method 2: Multiply by 1.2 (100% + 20% = 120% = 1.2)</p>
<p style="font-family: 'Courier New', monospace; margin: 3px 0;">50 × 1.2 = £60</p>
</div>
<h3 style="color: #dc2626;">Percentage Decrease</h3>
<div class="red-box">
<p style="font-weight: 600; margin-bottom: 10px;">Example: Decrease £80 by 15%</p>
<p style="margin: 8px 0;">Method 1: Find 15%, then subtract it</p>
<p style="font-family: 'Courier New', monospace; margin: 3px 0;">15% of 80 = 12</p>
<p style="font-family: 'Courier New', monospace; margin: 3px 0;">80 - 12 = £68</p>
<p style="margin: 15px 0 8px 0;">Method 2: Multiply by 0.85 (100% - 15% = 85% = 0.85)</p>
<p style="font-family: 'Courier New', monospace; margin: 3px 0;">80 × 0.85 = £68</p>
</div>
<div class="highlight-box blue-box">
<p style="font-weight: 600; color: #1e40af; margin-bottom: 5px;">Pro Tip for Multipliers:</p>
<p style="color: #1e3a8a; font-size: 0.95em; margin: 3px 0;">Increase by X% → multiply by (1 + X/100)</p>
<p style="color: #1e3a8a; font-size: 0.95em; margin: 3px 0;">Decrease by X% → multiply by (1 - X/100)</p>
</div>
</div>
<!-- Change Section -->
<div id="change" class="section">
<h2>✓ Percentage Change</h2>
<p style="font-size: 1.1em;">To find the percentage change between two values:</p>
<div class="orange-box">
<p style="font-weight: 700; font-size: 1.3em; color: #7c2d12;">
Percentage Change = (Change ÷ Original) × 100
</p>
</div>
<div class="card" style="margin: 20px 0;">
<p style="font-weight: 600; font-size: 1.1em; margin-bottom: 10px;">Example: Price increase</p>
<p style="margin: 10px 0;">A phone increases from £400 to £460. What's the percentage increase?</p>
<div style="margin-top: 15px;">
<p style="font-family: 'Courier New', monospace; margin: 5px 0;">Change = 460 - 400 = £60</p>
<p style="font-family: 'Courier New', monospace; margin: 5px 0;">Percentage = (60 ÷ 400) × 100</p>
<p style="font-family: 'Courier New', monospace; margin: 5px 0;">= 0.15 × 100 = 15%</p>
</div>
</div>
<div class="card" style="margin: 20px 0;">
<p style="font-weight: 600; font-size: 1.1em; margin-bottom: 10px;">Example: Price decrease</p>
<p style="margin: 10px 0;">A game decreases from £50 to £35. What's the percentage decrease?</p>
<div style="margin-top: 15px;">
<p style="font-family: 'Courier New', monospace; margin: 5px 0;">Change = 50 - 35 = £15</p>
<p style="font-family: 'Courier New', monospace; margin: 5px 0;">Percentage = (15 ÷ 50) × 100</p>
<p style="font-family: 'Courier New', monospace; margin: 5px 0;">= 0.3 × 100 = 30%</p>
</div>
</div>
</div>
<!-- Practice Section -->
<div id="practice" class="section">
<h2>✓ Quick Practice</h2>
<p style="font-size: 1.1em;">Test your knowledge with these questions:</p>
<div class="quiz-question">
<p>1. What is 25% of 80?</p>
<div class="quiz-options">
<div class="quiz-option" onclick="selectAnswer(this, '1', '15', '20')">15</div>
<div class="quiz-option" onclick="selectAnswer(this, '1', '20', '20')">20</div>
<div class="quiz-option" onclick="selectAnswer(this, '1', '25', '20')">25</div>
<div class="quiz-option" onclick="selectAnswer(this, '1', '30', '20')">30</div>
</div>
<div id="feedback-1" class="quiz-feedback"></div>
</div>
<div class="quiz-question">
<p>2. Convert 0.6 to a percentage</p>
<div class="quiz-options">
<div class="quiz-option" onclick="selectAnswer(this, '2', '6%', '60%')">6%</div>
<div class="quiz-option" onclick="selectAnswer(this, '2', '60%', '60%')">60%</div>
<div class="quiz-option" onclick="selectAnswer(this, '2', '0.6%', '60%')">0.6%</div>
<div class="quiz-option" onclick="selectAnswer(this, '2', '600%', '60%')">600%</div>
</div>
<div id="feedback-2" class="quiz-feedback"></div>
</div>
<div class="quiz-question">
<p>3. Increase £40 by 50%</p>
<div class="quiz-options">
<div class="quiz-option" onclick="selectAnswer(this, '3', '£45', '£60')">£45</div>
<div class="quiz-option" onclick="selectAnswer(this, '3', '£50', '£60')">£50</div>
<div class="quiz-option" onclick="selectAnswer(this, '3', '£60', '£60')">£60</div>
<div class="quiz-option" onclick="selectAnswer(this, '3', '£90', '£60')">£90</div>
</div>
<div id="feedback-3" class="quiz-feedback"></div>
</div>
<div class="quiz-question">
<p>4. What percentage is 15 out of 60?</p>
<div class="quiz-options">
<div class="quiz-option" onclick="selectAnswer(this, '4', '20%', '25%')">20%</div>
<div class="quiz-option" onclick="selectAnswer(this, '4', '25%', '25%')">25%</div>
<div class="quiz-option" onclick="selectAnswer(this, '4', '30%', '25%')">30%</div>
<div class="quiz-option" onclick="selectAnswer(this, '4', '4%', '25%')">4%</div>
</div>
<div id="feedback-4" class="quiz-feedback"></div>
</div>
<button class="check-btn" onclick="checkAllAnswers()">Check Answers</button>
</div>
<div class="navigation">
<button class="nav-arrow prev" id="prevBtn" onclick="navigate('prev')">← Previous</button>
<button class="nav-arrow next" id="nextBtn" onclick="navigate('next')">Next →</button>
</div>
</div>
</div>
<script>
const sections = ['basics', 'converting', 'calculating', 'increase', 'change', 'practice'];
let currentSection = 0;
let showingResults = false;
function showSection(sectionId) {
// Hide all sections
document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
// Show selected section
document.getElementById(sectionId).classList.add('active');
event.target.classList.add('active');
// Update current section index
currentSection = sections.indexOf(sectionId);
updateNavigationButtons();
}
function navigate(direction) {
if (direction === 'prev' && currentSection > 0) {
currentSection--;
} else if (direction === 'next' && currentSection < sections.length - 1) {
currentSection++;
}
const sectionId = sections[currentSection];
document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
document.getElementById(sectionId).classList.add('active');
document.querySelectorAll('.nav-btn')[currentSection].classList.add('active');
updateNavigationButtons();
window.scrollTo({ top: 0, behavior: 'smooth' });
}
function updateNavigationButtons() {
document.getElementById('prevBtn').disabled = currentSection === 0;
document.getElementById('nextBtn').disabled = currentSection === sections.length - 1;
}
function selectAnswer(element, questionId, answer, correctAnswer) {
// Remove selected class from siblings
element.parentElement.querySelectorAll('.quiz-option').forEach(opt => {
opt.classList.remove('selected', 'correct', 'incorrect');
});
// Add selected class to clicked option
element.classList.add('selected');
// Clear feedback
const feedback = document.getElementById('feedback-' + questionId);
feedback.textContent = '';
feedback.className = 'quiz-feedback';
showingResults = false;
}
function checkAllAnswers() {
showingResults = true;
// Question 1
checkQuestion('1', '20');
// Question 2
checkQuestion('2', '60%');
// Question 3
checkQuestion('3', '£60');
// Question 4
checkQuestion('4', '25%');
}
function checkQuestion(questionId, correctAnswer) {
const selectedOption = document.querySelector(`#feedback-${questionId}`).parentElement.querySelector('.quiz-option.selected');
const feedback = document.getElementById('feedback-' + questionId);
if (!selectedOption) {
feedback.textContent = '⚠ Please select an answer';
feedback.className = 'quiz-feedback';
return;
}
const selectedAnswer = selectedOption.textContent;
if (selectedAnswer === correctAnswer) {
selectedOption.classList.add('correct');
selectedOption.classList.remove('selected');
feedback.textContent = '✓ Correct!';
feedback.classList.add('correct');
} else {
selectedOption.classList.add('incorrect');
selectedOption.classList.remove('selected');
feedback.textContent = '✗ The answer is ' + correctAnswer;
feedback.classList.add('incorrect');
}
}
// Initialize
updateNavigationButtons();
</script>
</body>
</html>