+
{prompt}
+
+
+ {sentences.map(({sentence, id, color}) => (
+
setSelectedQuestion((prev) => (prev === id ? undefined : id))}>
+
+ {id}. {sentence}{" "}
+
+
+
+ ))}
+
+
+ {options.map(({sentence, id}) => (
+
selectOption(id)}>
+
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)}
+ />
+
+ {id}. {sentence}{" "}
+
+
+ ))}
+
+ {userSolutions.map((solution, index) => (
+
+ x.id === solution.question)!.color}
+ borderWidth={5}
+ />
+
+ ))}
+
+
+ );
+}
diff --git a/src/demo/reading.json b/src/demo/reading.json
index c135c49f..4f3e6bb6 100644
--- a/src/demo/reading.json
+++ b/src/demo/reading.json
@@ -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"
+ }
+ ]
}
]
}
\ No newline at end of file
diff --git a/src/interfaces/exam.ts b/src/interfaces/exam.ts
index 023b4993..de0c645d 100644
--- a/src/interfaces/exam.ts
+++ b/src/interfaces/exam.ts
@@ -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;
+ }[];
+}
diff --git a/src/pages/exam/reading/[id].tsx b/src/pages/exam/reading/[id].tsx
index 56ff3647..c61fd1a7 100644
--- a/src/pages/exam/reading/[id].tsx
+++ b/src/pages/exam/reading/[id].tsx
@@ -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 (