Skip to content
Snippets Groups Projects
Commit 9aa14548 authored by BURCKEL MAXIME's avatar BURCKEL MAXIME
Browse files

correct index question

parent 169861fc
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
QuizzWeb/app/routes/quizQuestionPageLobby.$mode.$quizId.$lobbyId.$diffiuclty.tsx deleted 100644 → 0
+ 0
− 254
View file @ 169861fc
import {
isRouteErrorResponse,
useParams,
useRouteError,
} from "@remix-run/react";
import { useEffect, useState } from "react";
import { OrbitProgress } from "react-loading-indicators";
import ErrorComponent from "~/components/ErrorComponent";
import type { PlayAnswer, PlayQuiz } from "~/lib/type";
import { getQuiz, isCorrectAnswer } from "~/model/api";
import AnswerOption from "../components/AnswerOption";
import NextButton from "../components/NextButton";
import QuestionHeader from "../components/QuestionHeader";
import QuizResultPage from "./quizResultPage";
import { io } from "socket.io-client";
import { useAuth } from "~/context/authContext";
interface AnswerResult {
isCorrect: boolean; // Indique si la réponse de l'utilisateur est correcte
correctAnswer: string;
}
export function ErrorBoundary() {
const error = useRouteError();
if (isRouteErrorResponse(error)) {
return <ErrorComponent error={error.data} />;
}
}
export default function QuizQuestionPage() {
const params = useParams();
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
const [selectedAnswer, setSelectedAnswer] = useState<PlayAnswer | null>(null);
const [score, setScore] = useState(0);
const [isSubmitted, setIsSubmitted] = useState(false);
const [isQuizFinished, setIsQuizFinished] = useState(false);
const [answeredQuestions, setAnsweredQuestions] = useState(0);
const [isLoading, setLoading] = useState(false);
const [correctAnswer, setCorrectAnswer] = useState<AnswerResult | null>(null);
const [quizz, setLocalQuiz] = useState<PlayQuiz | null>(null);
const { token, login, logout } = useAuth();
const [currentQuestionId, setCurrentQuestionId] = useState<string | null>("");
const [socket, setSocket] = useState<any>(null);
const [teamScores, setTeamScores] = useState<Record<string, number>>({});
const [scrumScores, setScrumScores] = useState<Record<string, number>>({});
useEffect(() => {
const fetchQuiz = async () => {
setLoading(true);
if (token) {
try {
const fetchedQuiz = await getQuiz(
String(params.quizId),
String(token)
);
if (!fetchedQuiz?.idCurrentQuestion) {
setIsQuizFinished(true);
} else {
setLocalQuiz(fetchedQuiz);
setScore(fetchedQuiz?.score || 0);
setCurrentQuestionId(fetchedQuiz?.idCurrentQuestion || null);
}
} catch (error) {
console.error("Error fetching quiz:", error);
} finally {
setLoading(false);
}
}
};
fetchQuiz();
}, [params.quizId, token]);
useEffect(() => {
if (!quizz) return; // Wait for the quiz to be loaded
let socketConnection = socket;
if (!socketConnection) {
console.log("[Socket] Initialisation...");
socketConnection = io("http://localhost:8081");
setSocket(socketConnection);
}
socketConnection.emit("createScrumLobby", {
lobbyId: params.lobbyId,
quizId: params.quizId,
});
socketConnection.emit("joinScrumLobby", {
lobbyId: params.lobbyId,
username: "1736721621021-plorkj7",
});
socketConnection.on("scrumLobbyUpdated", ({ scores }) => {
setScrumScores(scores);
});
socketConnection.on("updateScrumScores", ({ answer, scores }) => {
setSelectedAnswer(answer);
setScrumScores(scores);
});
socketConnection.on("nextquestion", () => {
const currentIndex = quizz.questions.findIndex(
(question) => question.id === currentQuestionId
);
if (currentIndex !== -1 && currentIndex < quizz.questions.length - 1) {
const nextQuestionId = quizz.questions[currentIndex + 1].id;
setCurrentQuestionIndex(currentIndex + 1);
setCurrentQuestionId(nextQuestionId);
setSelectedAnswer(null); // Reset the selected answer
setIsSubmitted(false); // Reset submission state
} else {
setIsQuizFinished(true);
}
});
return () => {
socketConnection.disconnect();
console.log("[Socket] Déconnecté du serveur WebSocket.");
};
}, [quizz]);
const currentQuestion = quizz?.questions.find(
(question) => question.id === currentQuestionId
);
const handleAnswerSelect = async (option: PlayAnswer) => {
if (!isSubmitted && socket && params.lobbyId && params.quizId) {
const userId = localStorage.getItem("userId") || "Anonymous";
setSelectedAnswer(option);
setIsSubmitted(true);
if (currentQuestionId) {
try {
const isAnswerCorrect = await isCorrectAnswer(
currentQuestionId,
option.id,
String(token)
);
setCorrectAnswer({
isCorrect: isAnswerCorrect?.isCorrect ?? false,
correctAnswer: isAnswerCorrect?.correctAnswerId ?? "",
});
socket.emit("submitScrumAnswer", {
lobbyId: params.lobbyId,
quizId: params.quizId,
username: userId,
answer: option,
correct: isAnswerCorrect?.isCorrect,
});
} catch (error) {
console.error(
"Erreur lors de la vérification de la réponse :",
error
);
}
}
}
};
const handleNext = async () => {
if (quizz) {
const currentIndex = quizz.questions.findIndex(
(question) => question.id === currentQuestionId
);
setCurrentQuestionIndex(currentIndex);
if (currentIndex !== -1 && currentIndex < quizz.questions.length - 1) {
const nextQuestionId = quizz.questions[currentIndex + 1].id;
setCurrentQuestionId(nextQuestionId);
setSelectedAnswer(null);
setIsSubmitted(false);
} else {
setIsQuizFinished(true);
}
}
};
if (quizz) {
if (isQuizFinished) {
return (
<QuizResultPage
score={score}
totalQuestions={quizz.questions.length}
correct={score}
wrong={quizz.questions.length - score}
quizId={quizz.id}
token={String(token)}
/>
);
}
if (currentQuestion && !isQuizFinished) {
return (
<div className={`flex flex-col items-center min-h-screen bg-gray-50`}>
<QuestionHeader
progress={`${currentQuestionIndex + 1}/${quizz.questions.length}`}
points={score}
question={currentQuestion.text}
quizId={quizz.id}
isSubmitted={isSubmitted}
mode={String(params.mode)}
scores={params.mode === "scrum" ? scrumScores : teamScores}
/>
<div className="w-full max-w-md space-y-4 mt-4">
{currentQuestion.answers.map((option, index) => {
const correct = correctAnswer?.correctAnswer;
const isCorrectOption =
correctAnswer?.isCorrect && option.id === selectedAnswer?.text;
const correctAnswerReveal = currentQuestion.answers.find(
(reponse) => reponse.id == correctAnswer?.correctAnswer
);
console.log(
"verif : ",
correctAnswerReveal.id,
"avec : ",
option.id
);
return (
<AnswerOption
key={index}
label={String.fromCharCode(65 + index)}
type={
currentQuestion.answerType as "text" | "sound" | "image"
}
text={option.text}
ressource={option?.ressource}
isCorrect={option.id === correct || false}
isSelected={option.id === selectedAnswer?.id || false}
onClick={() => handleAnswerSelect(option)}
showResult={!isLoading && isSubmitted}
correctAnswer={correctAnswerReveal?.id} // Transmettre la bonne réponse
answerId={option.id}
/>
);
})}
</div>
<NextButton onClick={handleNext} isSubmitted={isSubmitted} />
</div>
);
}
}
return (
<div className="flex justify-center items-center h-screen">Loading...</div>
);
}
QuizzWeb/app/routes/quizzLobbyPage.$mode.$quizId.$lobbyId.$difficulty.tsx
+ 8
− 0
View file @ 9aa14548
......@@ -79,6 +79,14 @@ export default function QuizQuestionPage() {
fetchQuiz();
}, [params.quizId, token]);
useEffect(() => {
console.log("test", currentQuestionId);
const currentInd = quizz?.questions.findIndex(
(question) => question.id === currentQuestionId
);
setCurrentQuestionIndex(Number(currentInd));
}, [currentQuestionId]);
useEffect(() => {
if (!quizz) return; // Wait for the quiz to be loaded
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment