Issue 44 create quiz frontend #80
Conversation
…ssue-44-Create_Quiz_Frontend
…ssue-44-Create_Quiz_Frontend
…ssue-44-Create_Quiz_Frontend
…ssue-44-Create_Quiz_Frontend
… Modify GenericQuiz, QuizStartPage, PracticePage, and CompetitionPage.
|
hi, could you please add some screenshots about what you have done for the frontend? thank you |
|
…ssue-44-Create_Quiz_Frontend
…ide the pop-up will close it.
…ssue-44-Create_Quiz_Frontend
…dersforcauses/wajo into issue-44-Create_Quiz_Frontend
| const { | ||
| data: quizData, | ||
| isLoading: isQuizDataLoading, | ||
| isError: isQuizDataError, | ||
| error: QuizDataError, | ||
| } = useFetchData<Quiz[]>({ | ||
| queryKey: ["quiz.list"], | ||
| endpoint: "/quiz/list", | ||
| }); | ||
|
|
||
| // console.log("Quiz Data: ", quizData); | ||
| // console.log("2024 Quiz Data: ", quizData ? quizData[0] : "No data available"); | ||
|
|
||
| /** | ||
| * Handles page change logic. | ||
| * @param {number} page - The new page number. | ||
| */ | ||
|
|
||
| const [displayQuiz, setDisplayQuiz] = useState(false); | ||
| const [isSubmitted, setIsSubmitted] = useState(false); | ||
| const [currentPage, setCurrentPage] = useState(1); | ||
|
|
||
| let quizTitle = "Math Competition"; | ||
| let quizStartTime = "2021-09-01T00:00:00.000Z"; | ||
| let quizDuration = 100; | ||
| let numberOfQuestions = 16; | ||
|
|
||
| const id = 0; | ||
|
|
||
| if (quizData) { | ||
| quizTitle = quizData[id]?.name; | ||
| quizStartTime = quizData[id]?.startTime.toString(); | ||
| quizDuration = quizData[id]?.duration; | ||
| numberOfQuestions = quizData[id]?.questions?.length; | ||
| } |
There was a problem hiding this comment.
I believe this part should retrieve the quiz data by ID rather than fetching the entire list. Please correct me if I’m mistaken.
| const handleSubmit = () => { | ||
| setIsSubmitted(true); // Show the popup | ||
| }; | ||
|
|
||
| const closePopup = () => { | ||
| setIsSubmitted(false); // Hide the popup | ||
| }; | ||
|
|
||
| const tryAgain = () => { | ||
| console.log("Try again"); | ||
| }; |
There was a problem hiding this comment.
These functions are defined but not currently used. Consider removing them if they’re unnecessary or implementing them if needed.
| const [answer, setAnswer] = useState( | ||
| () => localStorage.getItem("answer") || "", | ||
| ); |
There was a problem hiding this comment.
Currently, only one answer is saved for all questions, causing all answers to change when one is updated. Consider adding an unique identifier to update the answer for only the specific question.
| let generalInstructions = | ||
| '<span class="font-bold">General instructions:</span> There are 16 questions. Each question has an answer that is a positive integer less than 1000. Calculators are <span class="font-bold">not</span> permitted. Diagrams are provided to clarify wording only, and should <span class="font-bold">not</span> be expected to be to scale.'; |
There was a problem hiding this comment.
Consider removing the unused variable.
Change Summary
[Briefly summarise the changes that you made. Just high-level stuff]
Change Form
Fill this up (NA if not available). If a certain criteria is not met, can you please give a reason.
Other Information
[Is there anything in particular in the review that I should be aware of?]
Related issue