<style>
@import url(‘https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@700&display=swap’);
body {
font-family: ‘Balsamiq Sans’, cursive;
background-color: #f0faff; /* Light blue sky background */
color: #333;
text-align: center;
margin: 0;
padding: 20px;
}
#quiz-container {
background-color: #ffffff;
border-radius: 20px;
padding: 25px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
max-width: 800px;
margin: auto;
}
h1 {
color: #2c3e50; /* Dark slate */
}
h2 {
color: #3498db; /* Bright blue */
}
/* Introduction Section Styling */
#introduction {
text-align: left;
margin-bottom: 25px;
padding: 15px;
background-color: #ecf9ff;
border-radius: 10px;
}
.bin-guide {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 10px;
}
.bin-guide-item {
flex: 1;
min-width: 150px;
padding: 10px;
border-radius: 8px;
font-size: 0.9em;
color: white;
display: flex;
flex-direction: column;
align-items: center;
}
.bin-guide-item span { font-size: 2em; }
.green-bin-guide { background-color: #2ecc71; }
.blue-bin-guide { background-color: #3498db; }
.red-bin-guide { background-color: #e74c3c; }
.black-bin-guide { background-color: #34495e; }
/* Question Area Styling */
.question-area {
margin-bottom: 30px;
}
.waste-item-image {
width: 200px;
height: 200px;
object-fit: cover;
margin-bottom: 10px;
border: 4px solid #bdc3c7; /* Silver border */
border-radius: 15px;
}
#waste-item-name {
font-size: 1.8em;
margin: 5px 0 20px 0;
color: #2c3e50;
}
/* Bin Choices Styling */
.bin-options {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.bin {
width: 120px;
height: 160px;
border-radius: 10px;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
font-weight: bold;
color: white;
transition: transform 0.2s ease, box-shadow 0.2s ease;
padding: 15px;
box-sizing: border-box;
background-size: 60%;
background-repeat: no-repeat;
background-position: center 30px;
font-size: 1.1em;
}
.bin:hover {
transform: scale(1.1);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.bin-green { background-color: #2ecc71; background-image: url(‘data:image/svg+xml;utf8,<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 24 24″ fill=”white”><path d=”M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8zM12 6c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z” opacity=”0.6″/></svg>’); }
.bin-blue { background-color: #3498db; background-image: url(‘data:image/svg+xml;utf8,<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 24 24″ fill=”white”><path d=”M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z” opacity=”0.6″/></svg>’); }
.bin-red { background-color: #e74c3c; background-image: url(‘data:image/svg+xml;utf8,<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 24 24″ fill=”white”><path d=”M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z” opacity=”0.6″/></svg>’); }
.bin-black { background-color: #34495e; background-image: url(‘data:image/svg+xml;utf8,<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 24 24″ fill=”white”><path d=”M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z” opacity=”0.6″/></svg>’); }
/* Feedback and Buttons */
.feedback { margin-top: 20px; font-size: 1.5em; font-weight: bold; height: 30px; }
.correct { color: #27ae60; }
.incorrect { color: #c0392b; }
button {
background-color: #ff6347;
color: white;
border: none;
padding: 15px 30px;
border-radius: 25px;
font-size: 1.2em;
cursor: pointer;
margin-top: 20px;
transition: background-color 0.2s;
font-family: ‘Balsamiq Sans’, cursive;
}
button:hover { background-color: #e5533d; }
.score-area { font-size: 1.5em; margin-top: 20px; }
</style>
</head>
<body>
<div id=”quiz-container”>
<h1>Waste Sorting Challenge!</h1>
<div id=”introduction”>
<h2>Learn the Bins!</h2>
<div class=”bin-guide”>
<div class=”bin-guide-item green-bin-guide”><span>🌿</span><strong>GREEN BIN</strong><br>Wet Waste (Food, Peels, Leaves)</div>
<div class=”bin-guide-item blue-bin-guide”><span>♻️</span><strong>BLUE BIN</strong><br>Dry Waste (Paper, Plastic, Glass)</div>
<div class=”bin-guide-item red-bin-guide”><span>+</span><strong>RED BIN</strong><br>Medical Waste (Syringes, Used Bandages)</div>
<div class=”bin-guide-item black-bin-guide”><span>🗑️</span><strong>BLACK BIN</strong><br>General Waste (Chips Packets, Dirty Wrappers)</div>
</div>
</div>
<div class=”question-area” id=”question-area” style=”display: none;”>
<h2 id=”question-text”>Where does this go?</h2>
<img src=”” alt=”Waste Item” id=”waste-item-image” class=”waste-item-image”>
<p id=”waste-item-name”></p>
<div class=”bin-options” id=”bin-choices”>
<div class=”bin bin-green” data-bin-type=”green”>Green</div>
<div class=”bin bin-blue” data-bin-type=”blue”>Blue</div>
<div class=”bin bin-red” data-bin-type=”red”>Red</div>
<div class=”bin bin-black” data-bin-type=”black”>Black</div>
</div>
<div id=”feedback” class=”feedback”></div>
</div>
<div class=”score-area” id=”score-area” style=”display: none;”>
<h2>Quiz Finished!</h2>
<p>Your Score: <span id=”score”>0</span> out of <span id=”total-questions”>0</span></p>
<p id=”final-message”></p>
</div>
<button id=”start-button”>Start Quiz!</button>
<button id=”next-button” style=”display:none;”>Next Item!</button>
<button id=”restart-button” style=”display:none;”>Play Again!</button>
</div>
<script>
const wasteItems = [
// Green Bin – Wet Waste
{ name: “Vegetable Peels”, image: “veg peals.jpg”, correctBin: “green” },
{ name: “Leftover Food”, image: “leftover food.jpg”, correctBin: “green” },
{ name: “Fallen Leaves”, image: “Fallen Leaves.jpg”, correctBin: “green” },
// Blue Bin – Dry Waste
{ name: “Newspaper”, image: “newspaper.jpg”, correctBin: “blue” },
{ name: “Plastic Bottle”, image: “plasic bottle.jpg”, correctBin: “blue” },
{ name: “Cardboard Box”, image: “Cardboard Box.jpg”, correctBin: “blue” },
// Red Bin – Medical Waste
{ name: “Used Bandage”, image: “used-bandage.jpg”, correctBin: “red” },
{ name: “Expired Medicines”, image: “Expired-medicines.jpg”, correctBin: “red” },
{ name: “Used Syringe”, image: “used syringe.jpg”, correctBin: “red” },
// Black Bin – General Waste
{ name: “Chips Packet”, image: “Chips Packet.jpg”, correctBin: “black” },
{ name: “Soiled Food Wrapper”, image: “soild food wrapper.jpg”, correctBin: “black” },
{ name: “Broken Mug”, image: “broken mug.jpg”, correctBin: “black” }
];
let currentQuestionIndex = 0;
let score = 0;
let questions = [];
const startButton = document.getElementById(‘start-button’);
const nextButton = document.getElementById(‘next-button’);
const restartButton = document.getElementById(‘restart-button’);
const introductionDiv = document.getElementById(‘introduction’);
const questionArea = document.getElementById(‘question-area’);
const scoreArea = document.getElementById(‘score-area’);
const wasteItemImage = document.getElementById(‘waste-item-image’);
const wasteItemName = document.getElementById(‘waste-item-name’);
const binChoices = document.querySelectorAll(‘.bin’);
const feedbackDiv = document.getElementById(‘feedback’);
const scoreSpan = document.getElementById(‘score’);
const totalQuestionsSpan = document.getElementById(‘total-questions’);
const finalMessage = document.getElementById(‘final-message’);
startButton.addEventListener(‘click’, startQuiz);
nextButton.addEventListener(‘click’, nextQuestion);
restartButton.addEventListener(‘click’, startQuiz);
function shuffleArray(array) {
for (let i = array.length – 1; i > 0; i–) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
function startQuiz() {
introductionDiv.style.display = ‘none’;
scoreArea.style.display = ‘none’;
questionArea.style.display = ‘block’;
startButton.style.display = ‘none’;
restartButton.style.display = ‘none’;
nextButton.style.display = ‘none’;
questions = […wasteItems];
shuffleArray(questions);
currentQuestionIndex = 0;
score = 0;
totalQuestionsSpan.textContent = questions.length;
displayQuestion();
}
function displayQuestion() {
if (currentQuestionIndex < questions.length) {
const item = questions[currentQuestionIndex];
wasteItemImage.src = item.image;
wasteItemImage.alt = item.name;
wasteItemName.textContent = item.name;
feedbackDiv.textContent = “”;
nextButton.style.display = ‘none’;
binChoices.forEach(bin => bin.addEventListener(‘click’, handleBinClick));
} else {
showScore();
}
}
function handleBinClick(event) {
binChoices.forEach(bin => bin.removeEventListener(‘click’, handleBinClick));
const selectedBin = event.currentTarget.dataset.binType;
const correctBin = questions[currentQuestionIndex].correctBin;
if (selectedBin === correctBin) {
feedbackDiv.textContent = “Correct! 🎉”;
feedbackDiv.className = “feedback correct”;
score++;
} else {
feedbackDiv.textContent = `Oops! That goes in the ${correctBin} bin.`;
feedbackDiv.className = “feedback incorrect”;
}
nextButton.style.display = ‘inline-block’;
}
function nextQuestion() {
currentQuestionIndex++;
displayQuestion();
}
function showScore() {
questionArea.style.display = ‘none’;
nextButton.style.display = ‘none’;
scoreArea.style.display = ‘block’;
restartButton.style.display = ‘inline-block’;
scoreSpan.textContent = score;
let message = “”;
const percentage = score / questions.length;
if (percentage === 1) {
message = “Perfect Score! You’re a Planet Hero! 🌍✨”;
} else if (percentage >= 0.7) {
message = “Great Job! You really know your waste! 👍”;
} else if (percentage >= 0.4) {
message = “Good try! Keep practicing to be a sorting superstar! 😊”;
} else {
message = “Don’t give up! Learning this is a big help for our world! 🌱”;
}
finalMessage.textContent = message;
}
</script>
