Scribd
Upload
8 views9 pages

Kids Learning

The document presents an interactive web page designed for children's learning, featuring quizzes on various subjects like letters, numbers, colors, and shapes. Each quiz includes questions with multiple-choice answers, and feedback is provided based on the user's selections. The page is styled with vibrant colors and playful fonts to create an engaging learning environment.

Uploaded by

bestcool06
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views9 pages

Kids Learning

The document presents an interactive web page designed for children's learning, featuring quizzes on various subjects like letters, numbers, colors, and shapes. Each quiz includes questions with multiple-choice answers, and feedback is provided based on the user's selections. The page is styled with vibrant colors and playful fonts to create an engaging learning environment.

Uploaded by

bestcool06
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fun Learning for Kids! 🌟</title>
<style>
body {
font-family: 'Comic Sans MS', cursive;
background: linear-gradient(45deg, #FFB6C1, #87CEEB);
padding: 20px;
}

.container {
max-width: 800px;
margin: 0 auto;
text-align: center;
}

h1 {
color: #FF69B4;
font-size: 3em;
text-shadow: 2px 2px #FFFFFF;
margin-bottom: 30px;
}

.subject-btn {
background-color: #FFD700;
padding: 20px 40px;
margin: 10px;
border: none;
border-radius: 15px;
font-size: 1.5em;
color: #FFFFFF;
cursor: pointer;
transition: transform 0.3s;
}

.subject-btn:hover {
transform: scale(1.1);
}

.quiz-section {
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 20px;
margin-top: 20px;
display: none;
}

.question {
font-size: 2em;
color: #4B0082;
margin-bottom: 20px;
}

.option-btn {
background-color: #98FB98;
padding: 15px 30px;
margin: 10px;
border: none;
border-radius: 10px;
font-size: 1.2em;
cursor: pointer;
min-width: 200px;
}

.feedback {
font-size: 1.5em;
margin-top: 20px;
padding: 10px;
border-radius: 10px;
}

.correct {
background-color: #90EE90;
}

.incorrect {
background-color: #FFA07A;
}

.mascot {
width: 100px;
position: fixed;
bottom: 20px;
right: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>🎓 Fun Learning Time! 🎉</h1>

<button class="subject-btn" style="background-color: #FF69B4;"


onclick="showQuiz('letters')">ABC Letters </button>
<button class="subject-btn" style="background-color: #32CD32;"
onclick="showQuiz('numbers')">123 Numbers 🔢</button>
<button class="subject-btn" style="background-color: #FF4500;"
onclick="showQuiz('colors')">🌈 Colors</button>
<button class="subject-btn" style="background-color: #9370DB;"
onclick="showQuiz('shapes')">🔷 Shapes</button>

<!-- Letters Quiz -->


<div id="letters-quiz" class="quiz-section">
<div class="question">Which letter comes after A?</div>
<button class="option-btn" onclick="checkAnswer('letters', 'B')">B</button>
<button class="option-btn" onclick="checkAnswer('letters', 'C')">C</button>
<button class="option-btn" onclick="checkAnswer('letters', 'D')">D</button>
<div id="letters-feedback" class="feedback"></div>
<button class="subject-btn" style="background-color: #808080;"
onclick="hideQuiz('letters')">Back</button>
</div>

<!-- Numbers Quiz -->


<div id="numbers-quiz" class="quiz-section">
<div class="question">How many apples do you see? 🍎🍎🍎</div>
<button class="option-btn" onclick="checkAnswer('numbers', '3')">3</button>
<button class="option-btn" onclick="checkAnswer('numbers', '5')">5</button>
<button class="option-btn" onclick="checkAnswer('numbers', '2')">2</button>
<div id="numbers-feedback" class="feedback"></div>
<button class="subject-btn" style="background-color: #808080;"
onclick="hideQuiz('numbers')">Back</button>
</div>

<img src="https://cdn-icons-png.flaticon.com/512/1046/1046784.png" alt="Friendly Owl"


class="mascot">
</div>

<script>
function showQuiz(subject) {
document.querySelectorAll('.quiz-section').forEach(quiz => {
quiz.style.display = 'none';
});
document.getElementById(`${subject}-quiz`).style.display = 'block';
}

function hideQuiz(subject) {
document.getElementById(`${subject}-quiz`).style.display = 'none';
}

function checkAnswer(subject, answer) {


const correctAnswers = {
letters: 'B',
numbers: '3'
};

const feedback = document.getElementById(`${subject}-feedback`);


if (answer === correctAnswers[subject]) {
feedback.textContent = "🎉 Correct! Great job! 🌟";
feedback.className = "feedback correct";
} else {
feedback.textContent = "😃 Almost! Try again! 💪";
feedback.className = "feedback incorrect";
}
}
</script>
</body>
</html>
NEXT

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fun Learning for Kids! 🌟</title>
<style>
body {
font-family: 'Comic Sans MS', cursive;
background: linear-gradient(45deg, #FFEB3B, #64B5F6);
text-align: center;
padding: 20px;
color: #333;
}
h1 {
color: #D84315;
font-size: 3em;
text-shadow: 2px 2px #FFFFFF;
}
.category {
margin: 10px;
padding: 15px 30px;
font-size: 24px;
background-color: #42A5F5;
color: white;
border: none;
border-radius: 15px;
cursor: pointer;
transition: transform 0.3s;
}
.category:hover {
transform: scale(1.1);
}
.quiz-container {
display: none;
margin: 20px auto;
width: 80%;
max-width: 600px;
padding: 20px;
background-color: white;
border-radius: 15px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
.question {
font-size: 22px;
margin-bottom: 15px;
}
.option {
display: block;
font-size: 20px;
padding: 10px;
margin: 5px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#result {
font-size: 24px;
margin-top: 20px;
}
.back-btn {
background-color: #F57C00;
color: white;
padding: 10px 20px;
margin-top: 15px;
border: none;
border-radius: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>🎓 Fun Learning Time! 🎉</h1>
<button class="category" onclick="startQuiz('colors')">🌈 Colors</button>
<button class="category" onclick="startQuiz('shapes')">🔷 Shapes</button>
<button class="category" onclick="startQuiz('numbers')">🔢 Numbers</button>
<button class="category" onclick="startQuiz('alphabets')"> Alphabets</button>

<div class="quiz-container" id="quiz-box">


<h2 id="quiz-title"></h2>
<p class="question" id="question-text"></p>
<div id="options"></div>
<button onclick="nextQuestion()" id="next-btn" style="display:none; margin-top:15px;
padding:10px; font-size:18px;">Next</button>
<p id="result"></p>
<button class="back-btn" onclick="hideQuiz()">Back</button>
</div>

<script>
let currentCategory;
let currentIndex;

const questions = {
colors: [
{ q: "What color is the sun? ☀️", options: ["Yellow", "Green", "Blue", "Red"], answer:
"Yellow" },
{ q: "What color is grass? 🌿", options: ["Purple", "Orange", "Green", "Brown"], answer:
"Green" },
{ q: "What color is the ocean? 🌊", options: ["Blue", "Pink", "Black", "Gray"], answer:
"Blue" },
{ q: "What color is an apple? 🍎", options: ["Red", "Blue", "Yellow", "Green"], answer:
"Red" }
],
shapes: [
{ q: "Which shape has 4 sides? ⬛", options:
["Triangle", "Circle", "Rectangle", "Pentagon"], answer:
"Rectangle" },
{ q: "Which shape is round? ⚫", options: ["Square", "Triangle", "Circle", "Hexagon"],
answer: "Circle" }
],
numbers: [
{ q: "What comes after 5? 🔢", options: ["3", "7", "6", "9"], answer: "6" },
{ q: "How many fingers do you have? ✋", options: ["8", "10", "5", "12"],
answer: "10" }
],
alphabets: [
{ q: "What is the first letter of the alphabet? ", options: ["A", "B", "C", "D"], answer:
"A" },
{ q: "What letter comes after E?", options: ["D", "F", "G", "H"], answer: "F" }
]
};

function startQuiz(category) {
currentCategory = category;
currentIndex = 0;
document.getElementById("quiz-box").style.display = "block";
document.getElementById("quiz-title").innerText = category.toUpperCase();
document.getElementById("result").innerText = "";
loadQuestion();
}

function loadQuestion() {
if (currentIndex >= questions[currentCategory].length) {
document.getElementById("quiz-box").innerHTML = "<h2>🎉 Quiz Completed! Well
Done! 🎊</h2>";
return;
}
const qObj = questions[currentCategory][currentIndex];
document.getElementById("question-text").innerText = qObj.q;
let optionsHtml = "";
qObj.options.forEach(option => {
optionsHtml += `<button class='option' onclick='checkAnswer("${option}")'>$
{option}</button>`;
});
document.getElementById("options").innerHTML = optionsHtml;
document.getElementById("next-btn").style.display = "none";
}

function checkAnswer(selected) {
const correct = questions[currentCategory][currentIndex].answer;
if (selected === correct) {
document.getElementById("result").innerText = "🎉 Correct! Well done!";
document.getElementById("result").style.color = "#2e7d32";
} else {
document.getElementById("result").innerText = "❌ Oops! Try again!";
document.getElementById("result").style.color = "#d32f2f";
}
document.getElementById("next-btn").style.display = "block";
}

function nextQuestion() {
currentIndex++;
document.getElementById("result").innerText = "";
loadQuestion();
}

function hideQuiz() {
document.getElementById("quiz-box").style.display = "none";
}
</script>
</body>
</html>

You might also like