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

Implemented a simple "match the sentence" exercise

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-03-23 16:22:48 +00:00
parent 740346f696
commit 3d74bf9bf1
7 changed files with 327 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -27,6 +27,7 @@
"react": "18.2.0",
"react-chartjs-2": "^5.2.0",
"react-dom": "18.2.0",
"react-lineto": "^3.3.0",
"react-string-replace": "^1.1.0",
"typescript": "4.9.5",
"zustand": "^4.3.6"

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

@@ -6,7 +6,7 @@ import {Fragment, useState} from "react";
import reactStringReplace from "react-string-replace";
interface WordsPopoutProps {
words: string[];
words: {word: string; isDisabled: boolean}[];
isOpen: boolean;
onCancel: () => void;
onAnswer: (answer: string) => void;
@@ -44,10 +44,11 @@ function WordsPopout({words, isOpen, onCancel, onAnswer}: WordsPopoutProps) {
<div className="mt-4 grid grid-cols-3 gap-4">
{words.map((word) => (
<button
key={word}
onClick={() => onAnswer(word)}
key={word.word}
onClick={() => onAnswer(word.word)}
disabled={word.isDisabled}
className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}>
{word}
{word.word}
</button>
))}
</div>
@@ -90,7 +91,7 @@ export default function FillBlanks({allowRepetition, prompt, solutions, text, wo
return (
<div className="flex flex-col">
<WordsPopout
words={words}
words={words.map((word) => ({word, isDisabled: allowRepetition ? false : userSolutions.map((x) => x.solution).includes(word)}))}
isOpen={!!currentBlankId}
onCancel={() => setCurrentBlankId(undefined)}
onAnswer={(solution: string) => {

150
src/components/Exercises/MatchSentences.tsx Normal file
View File

@@ -0,0 +1,150 @@
import {MatchSentencesExercise} from "@/interfaces/exam";
import clsx from "clsx";
import {useState} from "react";
import LineTo from "react-lineto";
const AVAILABLE_COLORS = ["#63526a", "#f7651d", "#278f04", "#ef4487", "#ca68c0", "#f5fe9b", "#b3ab01", "#af963a", "#9a85f1", "#1b1750"];
export default function MatchSentences({allowRepetition, options, prompt, sentences}: MatchSentencesExercise) {
const [selectedQuestion, setSelectedQuestion] = useState<string>();
const [userSolutions, setUserSolutions] = useState<{question: string; option: string}[]>([]);
const selectOption = (option: string) => {
if (!selectedQuestion) return;
setUserSolutions((prev) => [...prev.filter((x) => x.question !== selectedQuestion), {question: selectedQuestion, option}]);
setSelectedQuestion(undefined);
};
const getSentenceColor = (id: string) => {
return sentences.find((x) => x.id === id)?.color || "";
};
return (
<div className="flex flex-col items-center gap-8">
<span className="text-lg font-medium text-center px-48">{prompt}</span>
<div className="grid grid-cols-2 gap-16 place-items-center">
<div className="flex flex-col gap-1">
{sentences.map(({sentence, id, color}) => (
<div
key={`question_${id}`}
className="flex items-center justify-end gap-2 cursor-pointer"
onClick={() => setSelectedQuestion((prev) => (prev === id ? undefined : id))}>
<span>
<span className="font-semibold">{id}.</span> {sentence}{" "}
</span>
<div
style={{borderColor: color, backgroundColor: selectedQuestion === id ? color : "transparent"}}
className={clsx("border-2 border-blue-500 w-4 h-4 rounded-full", id)}
/>
</div>
))}
</div>
<div className="flex flex-col gap-1">
{options.map(({sentence, id}) => (
<div
key={`answer_${id}`}
className={clsx("flex items-center justify-start gap-2 cursor-pointer")}
onClick={() => selectOption(id)}>
<div
style={
userSolutions.find((x) => x.option === id)
? {
border: `2px solid ${getSentenceColor(userSolutions.find((x) => x.option === id)!.question)}`,
}
: {}
}
className={clsx("border-2 border-green-500 bg-transparent w-4 h-4 rounded-full", id)}
/>
<span>
<span className="font-semibold">{id}.</span> {sentence}{" "}
</span>
</div>
))}
</div>
{userSolutions.map((solution, index) => (
<div key={`solution_${index}`} className="absolute">
<LineTo
className="rounded-full"
from={solution.question}
to={solution.option}
borderColor={sentences.find((x) => x.id === solution.question)!.color}
borderWidth={5}
/>
</div>
))}
</div>
</div>
);
}
export function MatchSentencesSolutions({allowRepetition, options, prompt, sentences}: MatchSentencesExercise) {
const [selectedQuestion, setSelectedQuestion] = useState<string>();
const [userSolutions, setUserSolutions] = useState<{question: string; option: string}[]>([]);
const selectOption = (option: string) => {
if (!selectedQuestion) return;
setUserSolutions((prev) => [...prev.filter((x) => x.question !== selectedQuestion), {question: selectedQuestion, option}]);
setSelectedQuestion(undefined);
};
const getSentenceColor = (id: string) => {
return sentences.find((x) => x.id === id)?.color || "";
};
return (
<div className="flex flex-col items-center gap-8">
<span className="text-lg font-medium text-center px-48">{prompt}</span>
<div className="grid grid-cols-2 gap-16 place-items-center">
<div className="flex flex-col gap-1">
{sentences.map(({sentence, id, color}) => (
<div
key={`question_${id}`}
className="flex items-center justify-end gap-2 cursor-pointer"
onClick={() => setSelectedQuestion((prev) => (prev === id ? undefined : id))}>
<span>
<span className="font-semibold">{id}.</span> {sentence}{" "}
</span>
<div
style={{borderColor: color, backgroundColor: selectedQuestion === id ? color : "transparent"}}
className={clsx("border-2 border-blue-500 w-4 h-4 rounded-full", id)}
/>
</div>
))}
</div>
<div className="flex flex-col gap-1">
{options.map(({sentence, id}) => (
<div
key={`answer_${id}`}
className={clsx("flex items-center justify-start gap-2 cursor-pointer")}
onClick={() => selectOption(id)}>
<div
style={
userSolutions.find((x) => x.option === id)
? {
border: `2px solid ${getSentenceColor(userSolutions.find((x) => x.option === id)!.question)}`,
}
: {}
}
className={clsx("border-2 border-green-500 bg-transparent w-4 h-4 rounded-full", id)}
/>
<span>
<span className="font-semibold">{id}.</span> {sentence}{" "}
</span>
</div>
))}
</div>
{userSolutions.map((solution, index) => (
<div key={`solution_${index}`} className="absolute">
<LineTo
className="rounded-full"
from={solution.question}
to={solution.option}
borderColor={sentences.find((x) => x.id === solution.question)!.color}
borderWidth={5}
/>
</div>
))}
</div>
</div>
);
}

83
src/demo/reading.json
View File

@@ -65,6 +65,89 @@
"surprise"
],
"text": "They tried to {{1}} burning logs or charcoal {{2}} that they could create fire themselves. It is suspected that the first man-made flame were produced by {{3}}.\n\nThe very first fire-lighting methods involved the creating of {{4}} by, for example, rapidly {{5}} a wooden stick in a round hole. The use of {{6}} or persistent chipping was also widespread in Europe and among other peoples such as the Chinese and {{7}}. European practice of this method continued until the 1850s {{8}} the discovery of phosphorus some years earlier."
},
{
"type": "matchSentences",
"prompt": "Look at the following notes that have been made about the matches described in Reading Passage 1. Decide which type of match (A-H) corresponds with each description and write your answers in boxes 9 15 on your answer sheet.",
"sentences": [
{
"id": "9",
"sentence": "made using a less poisonous type of phosphorus",
"solution": "F",
"color": "#76af37"
},
{
"id": "10",
"sentence": "identical to a previous type of match",
"solution": "D",
"color": "#9b3029"
},
{
"id": "11",
"sentence": "caused a deadly illness",
"solution": "E",
"color": "#453539"
},
{
"id": "12",
"sentence": "first to look like modern matches",
"solution": "C",
"color": "#1888e7"
},
{
"id": "13",
"sentence": "first matches used for advertising",
"solution": "G",
"color": "#ec049f"
},
{
"id": "14",
"sentence": "relied on an airtight glass container",
"solution": "A",
"color": "#a4578a"
},
{
"id": "15",
"sentence": "made with the help of an army design",
"solution": "C",
"color": "#dba996"
}
],
"allowRepetition": true,
"options": [
{
"id": "A",
"sentence": "the Ethereal Match"
},
{
"id": "B",
"sentence": "the Instantaneous Lightbox"
},
{
"id": "C",
"sentence": "Congreves"
},
{
"id": "D",
"sentence": "Lucifers"
},
{
"id": "E",
"sentence": "the first strike-anywhere match"
},
{
"id": "F",
"sentence": "Lundstrom’s safety match"
},
{
"id": "G",
"sentence": "book matches"
},
{
"id": "H",
"sentence": "waterproof matches"
}
]
}
]
}

18
src/interfaces/exam.ts
View File

@@ -8,7 +8,7 @@ export interface ReadingExam {
exercises: Exercise[];
}
type Exercise = FillBlanksExercise;
type Exercise = FillBlanksExercise | MatchSentencesExercise;
export interface FillBlanksExercise {
prompt: string; // *EXAMPLE: "Complete the summary below. Click a blank to select the corresponding word for it."
@@ -21,3 +21,19 @@ export interface FillBlanksExercise {
solution: string; // *EXAMPLE: "preserve"
}[];
}
export interface MatchSentencesExercise {
type: string;
prompt: string;
sentences: {
id: string;
sentence: string;
solution: string;
color: string;
}[];
allowRepetition: boolean;
options: {
id: string;
sentence: string;
}[];
}

64
src/pages/exam/reading/[id].tsx
View File

@@ -1,5 +1,5 @@
import Navbar from "@/components/Navbar";
import {ReadingExam} from "@/interfaces/exam";
import {FillBlanksExercise, MatchSentencesExercise, ReadingExam} from "@/interfaces/exam";
import Head from "next/head";
// TODO: Remove this import
@@ -7,11 +7,14 @@ import JSON_READING from "@/demo/reading.json";
import JSON_USER from "@/demo/user.json";
import {Fragment, useState} from "react";
import Icon from "@mdi/react";
import {mdiArrowRight, mdiNotebook} from "@mdi/js";
import {mdiArrowLeft, mdiArrowRight, mdiNotebook} from "@mdi/js";
import clsx from "clsx";
import {infoButtonStyle} from "@/constants/buttonStyles";
import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
import FillBlanks from "@/components/Exercises/FillBlanks";
import {Dialog, Transition} from "@headlessui/react";
import dynamic from "next/dynamic";
const MatchSentences = dynamic(() => import("@/components/Exercises/MatchSentences"), {ssr: false});
interface Props {
exam: ReadingExam;
@@ -25,7 +28,7 @@ export const getServerSideProps = () => {
};
};
function TextModal({isOpen, onClose}: {isOpen: boolean; onClose: () => void}) {
function TextModal({isOpen, title, content, onClose}: {isOpen: boolean; title: string; content: string; onClose: () => void}) {
return (
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={onClose}>
@@ -50,13 +53,18 @@ function TextModal({isOpen, onClose}: {isOpen: boolean; onClose: () => void}) {
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95">
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
<Dialog.Panel className="w-full max-w-4xl transform rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
Payment successful
{title}
</Dialog.Title>
<div className="mt-2">
<div className="mt-2 overflow-auto">
<p className="text-sm text-gray-500">
Your payment has been successfully submitted. We’ve sent you an email with all of the details of your order.
{content.split("\n").map((line, index) => (
<Fragment key={index}>
{line}
<br />
</Fragment>
))}
</p>
</div>
@@ -85,6 +93,10 @@ export default function Reading({exam}: Props) {
setExerciseIndex((prev) => prev + 1);
};
const previousExercise = () => {
setExerciseIndex((prev) => prev - 1);
};
const renderText = () => (
<>
<div className="flex flex-col">
@@ -96,11 +108,11 @@ export default function Reading({exam}: Props) {
<div className="bg-gray-300 rounded-xl p-4 flex flex-col gap-4 items-center w-full overflow-auto">
<span className="text-xl font-semibold">{exam.text.title}</span>
<span>
{exam.text.content.split("\n").map((line) => (
<>
{exam.text.content.split("\n").map((line, index) => (
<Fragment key={index}>
<span>{line}</span>
<br />
</>
</Fragment>
))}
</span>
</div>
@@ -111,7 +123,9 @@ export default function Reading({exam}: Props) {
const exercise = exam.exercises[exerciseIndex];
switch (exercise.type) {
case "fillBlanks":
return <FillBlanks {...exercise} />;
return <FillBlanks {...(exercise as FillBlanksExercise)} />;
case "matchSentences":
return <MatchSentences {...(exercise as MatchSentencesExercise)} />;
}
};
@@ -125,11 +139,11 @@ export default function Reading({exam}: Props) {
</Head>
<main className="w-full h-screen flex flex-col items-center bg-neutral-100 text-black">
<Navbar profilePicture={JSON_USER.profilePicture} />
<TextModal isOpen={showTextModal} onClose={() => setShowTextModal(false)} />
<TextModal {...exam.text} isOpen={showTextModal} onClose={() => setShowTextModal(false)} />
<div className="w-full h-full relative flex flex-col gap-8 items-center justify-center p-8 px-16 overflow-hidden">
{exerciseIndex === -1 && renderText()}
{exerciseIndex > -1 && exerciseIndex < exam.exercises.length && renderQuestion()}
<div className="flex gap-8 self-end">
<div className={clsx("flex gap-8", exerciseIndex > -1 ? "w-full justify-between" : "self-end")}>
{exerciseIndex > -1 && (
<button
className={clsx(
@@ -143,12 +157,22 @@ export default function Reading({exam}: Props) {
</div>
</button>
)}
<button className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)} onClick={nextExercise}>
Next
<div className="absolute right-4">
<Icon path={mdiArrowRight} color="white" size={1} />
</div>
</button>
<div className="self-end flex gap-8">
{exerciseIndex > -1 && (
<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={previousExercise}>
<div className="absolute left-4">
<Icon path={mdiArrowLeft} color="white" size={1} />
</div>
Back
</button>
)}
<button className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)} onClick={nextExercise}>
Next
<div className="absolute right-4">
<Icon path={mdiArrowRight} color="white" size={1} />
</div>
</button>
</div>
</div>
</div>
</main>

27
yarn.lock
View File

@@ -2034,6 +2034,15 @@ prelude-ls@^1.2.1:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
prop-types@15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
dependencies:
loose-envify "^1.4.0"
object-assign "^4.1.1"
react-is "^16.8.1"
prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
@@ -2071,16 +2080,32 @@ react-dom@18.2.0:
loose-envify "^1.1.0"
scheduler "^0.23.0"
react-is@^16.13.1:
react-is@^16.13.1, react-is@^16.8.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
react-lineto@^3.3.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/react-lineto/-/react-lineto-3.3.0.tgz#0ca2e59ecd6b8615aa1edfa515b6feac57449d02"
integrity sha512-mDs9aX2ryM7lQ9G+XYZKmDmogzpR/2j1YYVQNDrcDbdgKloWOWcKaMkRX/9Ya4PHang4N1qxBbH3GUAIByDa6w==
dependencies:
prop-types "15.7.2"
react "17.0.2"
react-string-replace@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/react-string-replace/-/react-string-replace-1.1.0.tgz#a3f7b458e697e77d70b0ea663caf38ab38f7cc17"
integrity sha512-N6RalSDFGbOHs0IJi1H611WbZsvk3ZT47Jl2JEXFbiS3kTwsdCYij70Keo/tWtLy7sfhDsYm7CwNM/WmjXIaMw==
react@17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
react@18.2.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"