Click here to edit.
import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
const questions = [
{
question: "You’re brushing your teeth. What do you do with the water?",
options: [
{ text: "Let it run the whole time", points: 0 },
{ text: "Turn it off while brushing", points: 2 },
{ text: "Use a cup to rinse", points: 3 },
],
},
{
question: "You just finished your smoothie. What do you do with the plastic cup?",
options: [
{ text: "Leave it on the bench", points: 0 },
{ text: "Throw it in the trash", points: 1 },
{ text: "Recycle it", points: 2 },
{ text: "Bring your own reusable cup next time", points: 3 },
],
},
{
question: "You're shopping for clothes. What do you pick?",
options: [
{ text: "Latest fast fashion trends", points: 0 },
{ text: "Shop at a thrift store", points: 2 },
{ text: "Clothes swap with friends", points: 3 },
],
},
{
question: "What do you do with your old phone?",
options: [
{ text: "Throw it in the trash", points: 0 },
{ text: "Store it in a drawer", points: 1 },
{ text: "Donate or recycle it", points: 3 },
],
},
{
question: "Your lights are on in the room you're not using. What do you do?",
options: [
{ text: "Leave them on", points: 0 },
{ text: "Turn them off", points: 3 },
],
},
{
question: "You're printing a report. How do you reduce paper use?",
options: [
{ text: "Print single-sided", points: 1 },
{ text: "Print double-sided", points: 2 },
{ text: "Only submit digitally", points: 3 },
],
},
{
question: "You’re heading to school. How do you get there?",
options: [
{ text: "Get a ride alone", points: 0 },
{ text: "Carpool with friends", points: 2 },
{ text: "Bike or walk", points: 3 },
],
},
{
question: "You're hungry after school. What snack do you choose?",
options: [
{ text: "Heavily packaged chips", points: 0 },
{ text: "Homemade sandwich in a reusable box", points: 3 },
],
},
{
question: "You want to raise awareness about climate change. You...",
options: [
{ text: "Complain online", points: 0 },
{ text: "Post a helpful infographic", points: 2 },
{ text: "Organize a school awareness day", points: 3 },
],
},
{
question: "Your favorite brand is known for pollution. You...",
options: [
{ text: "Keep buying it", points: 0 },
{ text: "Research better alternatives", points: 2 },
{ text: "Email them and switch brands", points: 3 },
],
},
];
export default function SustainableGame() {
const [current, setCurrent] = useState(0);
const [score, setScore] = useState(0);
const [showResult, setShowResult] = useState(false);
const handleAnswer = (points) => {
const nextScore = score + points;
const next = current + 1;
if (next < questions.length) {
setCurrent(next);
setScore(nextScore);
} else {
setScore(nextScore);
setShowResult(true);
}
};
const getResultText = () => {
if (score <= 10) return "Eco Explorer □ - You're just getting started!";
if (score <= 20) return "Green Guardian ♻️ - You're making good choices!";
return "Planet Protector □ - You're leading the way!";
};
return (
{!showResult ? (
{questions[current].options.map((opt, i) => (
))}
) : (
)}
);
}{questions[current].question}
Your Score: {score}
{getResultText()}
