import { useState, useEffect, useRef } 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 [isFinished, setIsFinished] = useState(false);
const recognitionRef = useRef(null);
useEffect(() => {
if (!('webkitSpeechRecognition' in window)) return;
const SpeechRecognition = window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.lang = 'id-ID';
recognition.interimResults = false;
recognition.maxAlternatives = 1;
recognition.onresult = (event) => {
const result = event.results[0][0].transcript;
setUserAnswer(result);
};
recognitionRef.current = recognition;
}, []);
const startVoiceInput = () => {
if (recognitionRef.current) {
recognitionRef.current.start();
}
};
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 = () => {
if (current + 1 < quizData.length) {
setUserAnswer("");
setFeedback("");
setCurrent(current + 1);
} else {
setIsFinished(true);
}
};
const restartQuiz = () => {
setCurrent(0);
setUserAnswer("");
setFeedback("");
setScore(0);
setIsFinished(false);
};
return (
{!isFinished ? (
<>
setUserAnswer(e.target.value)}
className="w-full p-2 border rounded"
/>
)}
);
}
🐾 Tebak Gambar Hewan
{feedback}
) : (🎉 Kuis selesai!
Skor akhir: {score} dari {quizData.length}