This commit is contained in:
mphstar 2025-03-05 20:53:17 +07:00
parent 6aa0ba590b
commit 957a63ca7c
3 changed files with 18 additions and 2 deletions

View File

@ -33,6 +33,7 @@ const Home = () => {
try { try {
const stream = await navigator.mediaDevices.getUserMedia({ const stream = await navigator.mediaDevices.getUserMedia({
video: true, video: true,
}); });
if (videoRef.current) { if (videoRef.current) {

View File

@ -180,6 +180,8 @@ const Quiz = () => {
answerTime = answerTime += elapsedTime; answerTime = answerTime += elapsedTime;
noSoal++; noSoal++;
tempAnswer = "";
setAnswer("");
if (noSoal === quizStore.listSoal.length) { if (noSoal === quizStore.listSoal.length) {
quizStore.setTime(answerTime); quizStore.setTime(answerTime);

View File

@ -17,6 +17,15 @@ import Swal from "sweetalert2";
// acc: String; // acc: String;
// }; // };
const imagesToPreload = ["/assets/gif/betul.gif", "/assets/gif/salah.gif"];
const preloadImages = () => {
imagesToPreload.forEach((src) => {
const img = new Image();
img.src = src;
});
};
const Quiz = () => { const Quiz = () => {
const videoRef = useRef<HTMLVideoElement>(null); const videoRef = useRef<HTMLVideoElement>(null);
const [loadCamera, setLoadCamera] = useState(false); const [loadCamera, setLoadCamera] = useState(false);
@ -150,8 +159,9 @@ const Quiz = () => {
setShowAnswer(true); setShowAnswer(true);
setTimeout(() => { setTimeout(() => {
isLoading = false;
setShowAnswer(false); setShowAnswer(false);
isLoading = false;
setProgress(0); setProgress(0);
noSoal++; noSoal++;
previousResult = []; previousResult = [];
@ -231,6 +241,7 @@ const Quiz = () => {
useEffect(() => { useEffect(() => {
store.setNavSelected("kuis"); store.setNavSelected("kuis");
preloadImages();
loadModel(); loadModel();
startWebcam(); startWebcam();
@ -249,7 +260,7 @@ const Quiz = () => {
<div <div
className={`fixed inset-0 w-screen h-screen bg-black/60 ${ className={`fixed inset-0 w-screen h-screen bg-black/60 ${
showAnswer ? "opacity-100" : "opacity-0" showAnswer ? "opacity-100" : "opacity-0"
} z-[999] flex items-center justify-center pointer-events-none duration-300 ease-in-out`} } z-[999] flex items-center justify-center pointer-events-none ease-in-out`}
> >
<div className="rounded-md px-3 py-2 text-white flex flex-col justify-center items-center gap-3"> <div className="rounded-md px-3 py-2 text-white flex flex-col justify-center items-center gap-3">
<img <img
@ -259,6 +270,8 @@ const Quiz = () => {
? "betul" ? "betul"
: "salah" : "salah"
}.gif`} }.gif`}
loading="eager"
fetchPriority="high"
alt={`Jawaban ${ alt={`Jawaban ${
quizStore.jawaban[quizStore.soalIndex]?.isCorrect quizStore.jawaban[quizStore.soalIndex]?.isCorrect
? "Benar" ? "Benar"