From 3a7c29de5699b34225131d59cd5dd082baccea44 Mon Sep 17 00:00:00 2001 From: Tiago Ribeiro Date: Tue, 20 Jun 2023 17:07:54 +0100 Subject: [PATCH] Made it so the code remembers the user's previous answers to current exercises --- src/components/Exercises/FillBlanks.tsx | 35 ++++++++---- src/components/Exercises/MatchSentences.tsx | 20 +++---- src/components/Exercises/MultipleChoice.tsx | 14 ++--- src/components/Exercises/Speaking.tsx | 6 ++- src/components/Exercises/WriteBlanks.tsx | 60 ++++++++++++--------- src/components/Exercises/Writing.tsx | 10 ++-- src/components/Exercises/index.tsx | 4 +- src/exams/Listening.tsx | 16 +++++- src/exams/Reading.tsx | 16 +++++- src/exams/Speaking.tsx | 16 +++++- src/exams/Writing.tsx | 16 +++++- 11 files changed, 147 insertions(+), 66 deletions(-) diff --git a/src/components/Exercises/FillBlanks.tsx b/src/components/Exercises/FillBlanks.tsx index b4194cd8..2aae1609 100644 --- a/src/components/Exercises/FillBlanks.tsx +++ b/src/components/Exercises/FillBlanks.tsx @@ -65,18 +65,29 @@ function WordsDrawer({words, isOpen, blankId, previouslySelectedWord, onCancel, ); } -export default function FillBlanks({id, allowRepetition, type, prompt, solutions, text, words, onNext, onBack}: FillBlanksExercise & CommonProps) { - const [userSolutions, setUserSolutions] = useState<{id: string; solution: string}[]>([]); +export default function FillBlanks({ + id, + allowRepetition, + type, + prompt, + solutions, + text, + words, + userSolutions, + onNext, + onBack, +}: FillBlanksExercise & CommonProps) { + const [answers, setAnswers] = useState<{id: string; solution: string}[]>(userSolutions); const [currentBlankId, setCurrentBlankId] = useState(); const [blankSelectedWord, setBlankSelectedWord] = useState(); useEffect(() => { - setBlankSelectedWord(currentBlankId ? userSolutions.find((x) => x.id === currentBlankId)?.solution : undefined); - }, [userSolutions, currentBlankId]); + setBlankSelectedWord(currentBlankId ? answers.find((x) => x.id === currentBlankId)?.solution : undefined); + }, [answers, currentBlankId]); const calculateScore = () => { const total = text.match(/({{\d+}})/g)?.length || 0; - const correct = userSolutions.filter((x) => solutions.find((y) => x.id === y.id)?.solution === x.solution.toLowerCase() || false).length; + const correct = answers.filter((x) => solutions.find((y) => x.id === y.id)?.solution === x.solution.toLowerCase() || false).length; return {total, correct}; }; @@ -86,7 +97,7 @@ export default function FillBlanks({id, allowRepetition, type, prompt, solutions {reactStringReplace(line, /({{\d+}})/g, (match) => { const id = match.replaceAll(/[\{\}]/g, ""); - const userSolution = userSolutions.find((x) => x.id === id); + const userSolution = answers.find((x) => x.id === id); return ( diff --git a/src/components/Exercises/MatchSentences.tsx b/src/components/Exercises/MatchSentences.tsx index 064cafb4..1f2e9709 100644 --- a/src/components/Exercises/MatchSentences.tsx +++ b/src/components/Exercises/MatchSentences.tsx @@ -7,20 +7,20 @@ import {Fragment, useState} from "react"; import LineTo from "react-lineto"; import {CommonProps} from "."; -export default function MatchSentences({id, options, type, prompt, sentences, onNext, onBack}: MatchSentencesExercise & CommonProps) { +export default function MatchSentences({id, options, type, prompt, sentences, userSolutions, onNext, onBack}: MatchSentencesExercise & CommonProps) { const [selectedQuestion, setSelectedQuestion] = useState(); - const [userSolutions, setUserSolutions] = useState<{question: string; option: string}[]>([]); + const [answers, setAnswers] = useState<{question: string; option: string}[]>(userSolutions); const calculateScore = () => { const total = sentences.length; - const correct = userSolutions.filter((x) => sentences.find((y) => y.id === x.question)?.solution === x.option || false).length; + const correct = answers.filter((x) => sentences.find((y) => y.id === x.question)?.solution === x.option || false).length; return {total, correct}; }; const selectOption = (option: string) => { if (!selectedQuestion) return; - setUserSolutions((prev) => [...prev.filter((x) => x.question !== selectedQuestion), {question: selectedQuestion, option}]); + setAnswers((prev) => [...prev.filter((x) => x.question !== selectedQuestion), {question: selectedQuestion, option}]); setSelectedQuestion(undefined); }; @@ -64,9 +64,9 @@ export default function MatchSentences({id, options, type, prompt, sentences, on onClick={() => selectOption(id)}>
x.option === id) + answers.find((x) => x.option === id) ? { - border: `2px solid ${getSentenceColor(userSolutions.find((x) => x.option === id)!.question)}`, + border: `2px solid ${getSentenceColor(answers.find((x) => x.option === id)!.question)}`, } : {} } @@ -78,7 +78,7 @@ export default function MatchSentences({id, options, type, prompt, sentences, on
))} - {userSolutions.map((solution, index) => ( + {answers.map((solution, index) => (
- - + + +
); diff --git a/src/components/Exercises/Writing.tsx b/src/components/Exercises/Writing.tsx index f61c3a99..69dbf864 100644 --- a/src/components/Exercises/Writing.tsx +++ b/src/components/Exercises/Writing.tsx @@ -9,8 +9,8 @@ import {Fragment, useEffect, useState} from "react"; import {toast} from "react-toastify"; import Button from "../Low/Button"; -export default function Writing({id, prompt, info, type, wordCounter, attachment, onNext, onBack}: WritingExercise & CommonProps) { - const [inputText, setInputText] = useState(""); +export default function Writing({id, prompt, info, type, wordCounter, attachment, userSolutions, onNext, onBack}: WritingExercise & CommonProps) { + const [inputText, setInputText] = useState(userSolutions.length === 1 ? userSolutions[0].solution : ""); const [isSubmitEnabled, setIsSubmitEnabled] = useState(false); useEffect(() => { @@ -55,7 +55,11 @@ export default function Writing({id, prompt, info, type, wordCounter, attachment
-