devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesigned the Record page along with solving some bugs on the FillBlanks

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-06-23 14:14:12 +01:00
parent 447cecbf3f
commit d3a37eed3e
11 changed files with 311 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/Exercises/FillBlanks.tsx
View File

@@ -17,7 +17,9 @@ interface WordsDrawerProps {
function WordsDrawer({words, isOpen, blankId, previouslySelectedWord, onCancel, onAnswer}: WordsDrawerProps) {
const [selectedWord, setSelectedWord] = useState<string | undefined>(previouslySelectedWord);
useEffect(() => setSelectedWord(previouslySelectedWord), [previouslySelectedWord]);
useEffect(() => {
console.log({previouslySelectedWord}), setSelectedWord(previouslySelectedWord);
}, [previouslySelectedWord]);
return (
<>
@@ -79,11 +81,11 @@ export default function FillBlanks({
}: FillBlanksExercise & CommonProps) {
const [answers, setAnswers] = useState<{id: string; solution: string}[]>(userSolutions);
const [currentBlankId, setCurrentBlankId] = useState<string>();
const [blankSelectedWord, setBlankSelectedWord] = useState<string>();
const [isDrawerShowing, setIsDrawerShowing] = useState(false);
useEffect(() => {
setBlankSelectedWord(currentBlankId ? answers.find((x) => x.id === currentBlankId)?.solution : undefined);
}, [answers, currentBlankId]);
setTimeout(() => setIsDrawerShowing(!!currentBlankId), 100);
}, [currentBlankId]);
const calculateScore = () => {
const total = text.match(/({{\d+}})/g)?.length || 0;
@@ -120,17 +122,19 @@ export default function FillBlanks({
return (
<>
<div className="flex flex-col gap-4 mt-4 h-full mb-20">
<WordsDrawer
blankId={currentBlankId}
words={words.map((word) => ({word, isDisabled: allowRepetition ? false : answers.map((x) => x.solution).includes(word)}))}
previouslySelectedWord={blankSelectedWord}
isOpen={!!currentBlankId}
onCancel={() => setCurrentBlankId(undefined)}
onAnswer={(solution: string) => {
setAnswers((prev) => [...prev.filter((x) => x.id !== currentBlankId), {id: currentBlankId!, solution}]);
setCurrentBlankId(undefined);
}}
/>
{(!!currentBlankId || isDrawerShowing) && (
<WordsDrawer
blankId={currentBlankId}
words={words.map((word) => ({word, isDisabled: allowRepetition ? false : answers.map((x) => x.solution).includes(word)}))}
previouslySelectedWord={currentBlankId ? answers.find((x) => x.id === currentBlankId)?.solution : undefined}
isOpen={isDrawerShowing}
onCancel={() => setCurrentBlankId(undefined)}
onAnswer={(solution: string) => {
setAnswers((prev) => [...prev.filter((x) => x.id !== currentBlankId), {id: currentBlankId!, solution}]);
setCurrentBlankId(undefined);
}}
/>
)}
<span className="text-sm w-full leading-6">
{prompt.split("\\n").map((line, index) => (
<Fragment key={index}>

2
src/components/Exercises/MatchSentences.tsx
View File

@@ -53,7 +53,7 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
className={clsx(
"bg-mti-green-ultralight text-mti-green hover:text-white hover:bg-mti-green w-8 h-8 rounded-full z-10",
"transition duration-300 ease-in-out",
selectedQuestion === id && "!text-white bg-mti-green",
selectedQuestion === id && "!text-white !bg-mti-green",
id,
)}>
{id}