import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
const quizData = [
{
image: "/animals/lion.jpg",
sound: "/sounds/lion.mp3",
answer: "singa",
},
{
image: "/animals/elephant.jpg",
sound: "/sounds/elephant.mp3",
answer: "gajah",
},
{
image: "/animals/cat.jpg",
sound: "/sounds/cat.mp3",
answer: "kucing",
},
];
export default function TebakGambarHewan() {
const [current, setCurrent] = useState(0);
const [userAnswer, setUserAnswer] = useState("");
const [feedback, setFeedback] = useState("");
const [score, setScore] = useState(0);
const playSound = () => {
const audio = new Audio(quizData[current].sound);
audio.play();
};
const checkAnswer = () => {
const correct = quizData[current].answer.toLowerCase();
const user = userAnswer.trim().toLowerCase();
if (user === correct) {
setFeedback("✅ Benar!");
setScore(score + 1);
} else {
setFeedback(`❌ Salah! Jawaban: ${correct}`);
}
};
const nextQuestion = () => {
setUserAnswer("");
setFeedback("");
setCurrent((prev) => (prev + 1 < quizData.length ? prev + 1 : 0));
};
return (
