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

correct answer lobby

parent a7d8f74a
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
QuizzWeb/app/routes/quizzLobbyPage.$mode.$quizId.$lobbyId.$difficulty.tsx
+ 236
− 224
View file @ b7e6a3e8
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";
interface AnswerResult {
isCorrect: boolean; // Indique si la réponse de l'utilisateur est correcte
correctAnswer: string;
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";
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 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, setToken] = useState<string | null>(null);
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(() => {
setLoading(true);
const storedToken =
sessionStorage.getItem("token") || sessionStorage.getItem("guest");
if (storedToken) {
setToken(storedToken);
}
}
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, setToken] = useState<string | null>(null);
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(() => {
setLoading(false);
}, []);
useEffect(() => {
const fetchQuiz = async () => {
setLoading(true);
const storedToken =
sessionStorage.getItem("token") || sessionStorage.getItem("guest");
if (storedToken) {
setToken(storedToken);
}
setLoading(false);
}, []);
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);
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: localStorage.getItem("userId"),
});
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 ?? "",
});
console.log(isAnswerCorrect?.isCorrect)
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);
}
}
};
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: localStorage.getItem("userId"),
});
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.");
};
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);
}, [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 ?? "",
});
console.log(isAnswerCorrect?.isCorrect);
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) {
if (isQuizFinished) {
return (
<QuizResultPage
score={scrumScores[localStorage.getItem("userId") || "Anonymous"]}
totalQuestions={quizz.questions.length}
correct={score}
wrong={quizz.questions.length - score}
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={scrumScores[localStorage.getItem("userId") || "Anonymous"]}
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}
token={String(token)}
isSubmitted={isSubmitted}
mode={String(params.mode)}
scores={params.mode === "scrum" ? scrumScores : teamScores}
/>
);
}
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) => (
<div className="w-full max-w-md space-y-4 mt-4">
{currentQuestion.answers.map((option, index) => {
const isCorrectOption =
correctAnswer?.isCorrect &&
option.text === selectedAnswer?.text;
const correctAnswerReveal = currentQuestion.answers.find(
(reponse) => reponse.id == correctAnswer?.correctAnswer
);
return (
<AnswerOption
key={index}
label={String.fromCharCode(65 + index)}
text={option.text}
isCorrect={
correctAnswer?.isCorrect || false
type={
currentQuestion.answerType as "text" | "sound" | "image"
}
isSelected={option.id === selectedAnswer?.id}
text={option.text}
ressource={option?.ressource}
isCorrect={isCorrectOption || false}
isSelected={option.id === selectedAnswer?.id || false}
onClick={() => handleAnswerSelect(option)}
showResult={!isLoading && isSubmitted}
correctAnswer={correctAnswerReveal?.text} // Transmettre la bonne réponse
/>
))}
</div>
);
})}
</div>
);
}
</div>
);
}
return (
<div className="flex justify-center items-center h-screen">Loading...</div>
);
}
\ No newline at end of file
return (
<div className="flex justify-center items-center h-screen">Loading...</div>
);
}
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