{part.text.title}
@@ -106,12 +99,17 @@ function TextComponent({part, exerciseType}: {part: ReadingPart; exerciseType: s
);
}
-export default function Reading({exam, showSolutions = false, preview = false, onFinish}: Props) {
+export default function Reading({ exam, showSolutions = false, preview = false, onFinish }: Props) {
+ const readingBgColor = "bg-ielts-reading-light";
+
const [showTextModal, setShowTextModal] = useState(false);
const [showBlankModal, setShowBlankModal] = useState(false);
- const [multipleChoicesDone, setMultipleChoicesDone] = useState<{id: string; amount: number}[]>([]);
+ const [multipleChoicesDone, setMultipleChoicesDone] = useState<{ id: string; amount: number }[]>([]);
const [isTextMinimized, setIsTextMinimzed] = useState(false);
const [exerciseType, setExerciseType] = useState("");
+
+ const [seenParts, setSeenParts] = useState
>(new Set(showSolutions ? exam.parts.map((_, index) => index) : []));
+ const [showPartDivider, setShowPartDivider] = useState(typeof exam.parts[0].intro === "string" && exam.parts[0].intro !== "");
const examState = useExamStore((state) => state);
const persistentExamState = usePersistentExamStore((state) => state);
@@ -133,6 +131,14 @@ export default function Reading({exam, showSolutions = false, preview = false, o
const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));
+ useEffect(() => {
+ if (!showSolutions && exam.parts[partIndex]?.intro !== undefined && exam.parts[partIndex]?.intro !== "" && !seenParts.has(exerciseIndex)) {
+ setShowPartDivider(true);
+ setBgColor(readingBgColor);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [partIndex]);
+
useEffect(() => {
if (showSolutions) setExerciseIndex(-1);
}, [setExerciseIndex, showSolutions]);
@@ -148,7 +154,7 @@ export default function Reading({exam, showSolutions = false, preview = false, o
previousMultipleChoice = [...previousMultipleChoice, ...partMultipleChoice];
}
- setMultipleChoicesDone(previousMultipleChoice.map((x) => ({id: x.id, amount: x.questions.length - 1})));
+ setMultipleChoicesDone(previousMultipleChoice.map((x) => ({ id: x.id, amount: x.questions.length - 1 })));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@@ -184,12 +190,12 @@ export default function Reading({exam, showSolutions = false, preview = false, o
const nextExercise = (solution?: UserSolution) => {
scrollToTop();
if (solution) {
- setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "reading", exam: exam.id}]);
+ setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), { ...solution, module: "reading", exam: exam.id }]);
}
if (storeQuestionIndex > 0) {
const exercise = getExercise();
setExerciseType(exercise.type);
- setMultipleChoicesDone((prev) => [...prev.filter((x) => x.id !== exercise.id), {id: exercise.id, amount: storeQuestionIndex}]);
+ setMultipleChoicesDone((prev) => [...prev.filter((x) => x.id !== exercise.id), { id: exercise.id, amount: storeQuestionIndex }]);
}
setStoreQuestionIndex(0);
@@ -219,7 +225,7 @@ export default function Reading({exam, showSolutions = false, preview = false, o
setHasExamEnded(false);
if (solution) {
- onFinish([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "reading", exam: exam.id}]);
+ onFinish([...userSolutions.filter((x) => x.exercise !== solution.exercise), { ...solution, module: "reading", exam: exam.id }]);
} else {
onFinish(userSolutions);
}
@@ -228,7 +234,7 @@ export default function Reading({exam, showSolutions = false, preview = false, o
const previousExercise = (solution?: UserSolution) => {
scrollToTop();
if (solution) {
- setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "reading", exam: exam.id}]);
+ setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), { ...solution, module: "reading", exam: exam.id }]);
}
setStoreQuestionIndex(0);
@@ -298,70 +304,82 @@ export default function Reading({exam, showSolutions = false, preview = false, o
return (
<>
-
-
- {partIndex > -1 &&
setShowTextModal(false)} />}
- x.exercises))}
- disableTimer={showSolutions}
- label={exerciseIndex === -1 ? undefined : convertCamelCaseToReadable(exam.parts[partIndex].exercises[exerciseIndex].type)}
- />
- -1 && !isTextMinimized && "grid grid-cols-2 gap-4",
- exerciseIndex > -1 && isTextMinimized && "flex flex-col gap-2",
- )}>
- {partIndex > -1 && renderText()}
+ sectionLabel="Part"
+ defaultTitle="Reading exam"
+ section={exam.parts[partIndex]}
+ sectionIndex={partIndex}
+ onNext={() => { setShowPartDivider(false); setBgColor("bg-white"); setSeenParts((prev) => new Set(prev).add(exerciseIndex)) }}
+ /> : (
+ <>
+
+
+ {partIndex > -1 &&
setShowTextModal(false)} />}
+ x.exercises))}
+ disableTimer={showSolutions}
+ label={exerciseIndex === -1 ? undefined : convertCamelCaseToReadable(exam.parts[partIndex].exercises[exerciseIndex].type)}
+ />
+ -1 && !isTextMinimized && "grid grid-cols-2 gap-4",
+ exerciseIndex > -1 && isTextMinimized && "flex flex-col gap-2",
+ )}>
+ {partIndex > -1 && renderText()}
- {exerciseIndex > -1 &&
- partIndex > -1 &&
- exerciseIndex < exam.parts[partIndex].exercises.length &&
- !showSolutions &&
- renderExercise(getExercise(), exam.id, nextExercise, previousExercise, undefined, preview)}
+ {exerciseIndex > -1 &&
+ partIndex > -1 &&
+ exerciseIndex < exam.parts[partIndex].exercises.length &&
+ !showSolutions &&
+ renderExercise(getExercise(), exam.id, nextExercise, previousExercise, undefined, preview)}
- {exerciseIndex > -1 &&
- partIndex > -1 &&
- exerciseIndex < exam.parts[partIndex].exercises.length &&
- showSolutions &&
- renderSolution(exam.parts[partIndex].exercises[exerciseIndex], nextExercise, previousExercise)}
-
- {exerciseIndex > -1 && partIndex > -1 && exerciseIndex < exam.parts[partIndex].exercises.length && (
-
+ {exerciseIndex > -1 &&
+ partIndex > -1 &&
+ exerciseIndex < exam.parts[partIndex].exercises.length &&
+ showSolutions &&
+ renderSolution(exam.parts[partIndex].exercises[exerciseIndex], nextExercise, previousExercise)}
+
+ {exerciseIndex > -1 && partIndex > -1 && exerciseIndex < exam.parts[partIndex].exercises.length && (
+
+ )}
+
+
+
+
+
+ )}
+ {exerciseIndex === -1 && partIndex === 0 && (
+
+ )}
+
)}
-
-
-
-
-
- )}
- {exerciseIndex === -1 && partIndex === 0 && (
-
- )}
);
}
diff --git a/src/stores/examEditor/reducers/index.ts b/src/stores/examEditor/reducers/index.ts
index dd2f0221..9a84aef3 100644
--- a/src/stores/examEditor/reducers/index.ts
+++ b/src/stores/examEditor/reducers/index.ts
@@ -9,8 +9,10 @@ export const rootReducer = (
state: ExamEditorStore,
action: Action
): Partial => {
+ console.log(action.type);
+
if (MODULE_ACTIONS.includes(action.type as any)) {
- if (action.type === "REORDER_EXERCISES" && "payload" in action && "event" in action.payload) {
+ if (action.type === "REORDER_EXERCISES") {
const updatedState = sectionReducer(state, action as SectionActions);
if (!updatedState.modules) return state;
@@ -26,7 +28,7 @@ export const rootReducer = (
if (SECTION_ACTIONS.includes(action.type as any)) {
if (action.type === "UPDATE_SECTION_STATE") {
const updatedState = sectionReducer(state, action as SectionActions);
- if (!updatedState.modules) return state;
+ if (!updatedState.modules) return state;
return moduleReducer({
...state,
diff --git a/src/stores/examEditor/reducers/moduleReducer.ts b/src/stores/examEditor/reducers/moduleReducer.ts
index 39536f79..af81fb65 100644
--- a/src/stores/examEditor/reducers/moduleReducer.ts
+++ b/src/stores/examEditor/reducers/moduleReducer.ts
@@ -1,6 +1,6 @@
import { Module } from "@/interfaces";
import { defaultSectionSettings } from "../defaults";
-import { reorderExercises } from "../reorder/global";
+import { reorderModule } from "../reorder/global";
import ExamEditorStore, { ModuleState } from "../types";
export type ModuleActions =
@@ -97,7 +97,7 @@ export const moduleReducer = (
...state,
modules: {
...state.modules,
- [currentModule]: reorderExercises(currentModuleState)
+ [currentModule]: reorderModule(currentModuleState)
}
};
}
diff --git a/src/stores/examEditor/reducers/sectionReducer.ts b/src/stores/examEditor/reducers/sectionReducer.ts
index 13be294f..37a09a03 100644
--- a/src/stores/examEditor/reducers/sectionReducer.ts
+++ b/src/stores/examEditor/reducers/sectionReducer.ts
@@ -2,6 +2,7 @@ import { Module } from "@/interfaces";
import ExamEditorStore, { Generating, ReadingSectionSettings, Section, SectionSettings, SectionState } from "../types";
import { DragEndEvent } from "@dnd-kit/core";
import { LevelPart, ListeningPart, ReadingPart } from "@/interfaces/exam";
+import { reorderSection } from "../reorder/global";
export type SectionActions =
| { type: 'UPDATE_SECTION_SINGLE_FIELD'; payload: { module: Module; sectionId: number; field: string; value: any } }
@@ -80,7 +81,7 @@ export const sectionReducer = (
...modules[currentModule],
sections: sections.map(section =>
section.sectionId === sectionId
- ? { ...section, state: {...section.state, ...updatedState} }
+ ? { ...section, state: { ...section.state, ...updatedState } }
: section
)
}
@@ -93,10 +94,18 @@ export const sectionReducer = (
const oldIndex = active.id as number;
const newIndex = over.id as number;
- const currentSectionState = sections.find((s) => s.sectionId = sectionId)!.state as ReadingPart | ListeningPart | LevelPart;
+ const currentSectionState = sections.find((s) => s.sectionId === sectionId)!.state as ReadingPart | ListeningPart | LevelPart;
+ const exercises = [...currentSectionState.exercises];
+ const [removed] = exercises.splice(oldIndex, 1);
+ exercises.splice(newIndex, 0, removed);
+
+ const { exercises: reorderedExercises } = reorderSection(exercises, 1);
+
+ const newSectionState = {
+ ...currentSectionState,
+ exercises: reorderedExercises
+ };
- const [removed] = currentSectionState.exercises.splice(oldIndex, 1);
- currentSectionState.exercises.splice(newIndex, 0, removed);
return {
...state,
modules: {
@@ -105,7 +114,7 @@ export const sectionReducer = (
...modules[currentModule],
sections: sections.map(section =>
section.sectionId === sectionId
- ? { ...section, state: currentSectionState }
+ ? { ...section, state: newSectionState }
: section
)
}
diff --git a/src/stores/examEditor/reorder/global.ts b/src/stores/examEditor/reorder/global.ts
index 1725dfee..21efeded 100644
--- a/src/stores/examEditor/reorder/global.ts
+++ b/src/stores/examEditor/reorder/global.ts
@@ -1,59 +1,9 @@
-import { FillBlanksExercise, LevelPart, ListeningPart, MatchSentencesExercise, MultipleChoiceExercise, ReadingPart, TrueFalseExercise, WriteBlanksExercise } from "@/interfaces/exam";
+import { Exercise, FillBlanksExercise, LevelPart, ListeningPart, MatchSentencesExercise, MultipleChoiceExercise, ReadingPart, TrueFalseExercise, WriteBlanksExercise } from "@/interfaces/exam";
import { ModuleState } from "../types";
import ReorderResult from "./types";
const reorderFillBlanks = (exercise: FillBlanksExercise, startId: number): ReorderResult => {
- const newSolutions = exercise.solutions
- .sort((a, b) => parseInt(a.id) - parseInt(b.id))
- .map((solution, index) => ({
- ...solution,
- id: (startId + index).toString()
- }));
-
- const idMapping = exercise.solutions
- .sort((a, b) => parseInt(a.id) - parseInt(b.id))
- .reduce((acc, solution, index) => {
- acc[solution.id] = (startId + index).toString();
- return acc;
- }, {} as Record);
-
- let newText = exercise.text;
- Object.entries(idMapping).forEach(([oldId, newId]) => {
- const regex = new RegExp(`\\{\\{${oldId}\\}\\}`, 'g');
- newText = newText.replace(regex, `{{${newId}}}`);
- });
-
-
- const newWords = exercise.words.map(word => {
- if (typeof word === 'string') {
- return word;
- } else if ('letter' in word && 'word' in word) {
- return word;
- } else if ('options' in word) {
- return word;
- }
- return word;
- });
-
- const newUserSolutions = exercise.userSolutions?.map(solution => ({
- ...solution,
- id: idMapping[solution.id] || solution.id
- }));
-
- return {
- exercise: {
- ...exercise,
- solutions: newSolutions,
- text: newText,
- words: newWords,
- userSolutions: newUserSolutions
- },
- lastId: startId + newSolutions.length - 1
- };
-
-};
-
-const reorderWriteBlanks = (exercise: WriteBlanksExercise, startId: number): ReorderResult => {
+ console.log();
const newSolutions = exercise.solutions
.sort((a, b) => parseInt(a.id) - parseInt(b.id))
.map((solution, index) => ({
@@ -61,21 +11,78 @@ const reorderWriteBlanks = (exercise: WriteBlanksExercise, startId: number): Reo
id: (startId + index).toString()
}));
+ const idMapping = exercise.solutions
+ .sort((a, b) => parseInt(a.id) - parseInt(b.id))
+ .reduce((acc, solution, index) => {
+ acc[solution.id] = (startId + index).toString();
+ return acc;
+ }, {} as Record);
+
+ let newText = exercise.text;
+ Object.entries(idMapping).forEach(([oldId, newId]) => {
+ const regex = new RegExp(`\\{\\{${oldId}\\}\\}`, 'g');
+ newText = newText.replace(regex, `{{${newId}}}`);
+ });
+
+
+ const newWords = exercise.words.map(word => {
+ if (typeof word === 'string') {
+ return word;
+ } else if ('letter' in word && 'word' in word) {
+ return word;
+ } else if ('options' in word) {
+ return word;
+ }
+ return word;
+ });
+
+ const newUserSolutions = exercise.userSolutions?.map(solution => ({
+ ...solution,
+ id: idMapping[solution.id] || solution.id
+ }));
+
return {
exercise: {
...exercise,
solutions: newSolutions,
- text: newSolutions.reduce((text, solution, index) => {
- return text.replace(
- new RegExp(`\\{\\{${solution.id}\\}\\}`),
- `{{${startId + index}}}`
- );
- }, exercise.text)
+ text: newText,
+ words: newWords,
+ userSolutions: newUserSolutions
},
lastId: startId + newSolutions.length
};
+
};
+const reorderWriteBlanks = (exercise: WriteBlanksExercise, startId: number): ReorderResult => {
+ const oldIds = exercise.solutions.map(s => s.id);
+ const newIds = oldIds.map((_, index) => (startId + index).toString());
+
+ const newSolutions = exercise.solutions.map((solution, index) => ({
+ id: newIds[index],
+ solution: [...solution.solution]
+ }));
+
+ let newText = exercise.text;
+ oldIds.forEach((oldId, index) => {
+ newText = newText.replace(
+ `{{${oldId}}}`,
+ `{{${newIds[index]}}}`
+ );
+ });
+
+ const result = {
+ exercise: {
+ ...exercise,
+ solutions: newSolutions,
+ text: newText
+ },
+ lastId: startId + newSolutions.length
+ };
+
+ return result;
+ };
+
const reorderTrueFalse = (exercise: TrueFalseExercise, startId: number): ReorderResult => {
const newQuestions = exercise.questions
.sort((a, b) => parseInt(a.id) - parseInt(b.id))
@@ -129,60 +136,79 @@ const reorderMultipleChoice = (exercise: MultipleChoiceExercise, startId: number
};
+const reorderSection = (exercises: Exercise[], startId: number): { exercises: Exercise[], lastId: number } => {
+ let currentId = startId;
+ const reorderedExercises = exercises.map(exercise => {
+ let result;
+ switch (exercise.type) {
+ case 'fillBlanks':
+ console.log("Reordering FillBlanks");
+ result = reorderFillBlanks(exercise, currentId);
+ currentId = result.lastId;
+ return result.exercise;
-const reorderExercises = (moduleState: ModuleState) => {
- let currentId = 1;
+ case 'writeBlanks':
+ result = reorderWriteBlanks(exercise, currentId);
+ currentId = result.lastId;
+ return result.exercise;
- const reorderedSections = moduleState.sections.map(section => {
- const currentSection = section.state as ReadingPart | ListeningPart |LevelPart;
- const reorderedExercises = currentSection.exercises.map(exercise => {
- let result;
- switch (exercise.type) {
- case 'fillBlanks':
- result = reorderFillBlanks(exercise, currentId);
- currentId = result.lastId;
- return result.exercise;
- case 'writeBlanks':
- result = reorderWriteBlanks(exercise, currentId);
- currentId = result.lastId;
- return result.exercise;
- case 'trueFalse':
- result = reorderTrueFalse(exercise, currentId);
- currentId = result.lastId;
- return result.exercise;
- case 'matchSentences':
- result = reorderMatchSentences(exercise, currentId);
- currentId = result.lastId;
- return result.exercise;
- case 'multipleChoice':
- result = reorderMultipleChoice(exercise, currentId);
- currentId = result.lastId
- return result.exercise;
- default:
- return exercise;
- }
- });
- return {
- ...section,
- state: {
- ...currentSection,
- exercises: reorderedExercises
- }
- };
+ case 'trueFalse':
+ result = reorderTrueFalse(exercise, currentId);
+ currentId = result.lastId;
+ return result.exercise;
+
+ case 'matchSentences':
+ result = reorderMatchSentences(exercise, currentId);
+ currentId = result.lastId;
+ return result.exercise;
+
+ case 'multipleChoice':
+ result = reorderMultipleChoice(exercise, currentId);
+ currentId = result.lastId;
+ return result.exercise;
+
+ default:
+ return exercise;
+ }
});
return {
- ...moduleState,
- sections: reorderedSections
+ exercises: reorderedExercises,
+ lastId: currentId
};
};
+
+const reorderModule = (moduleState: ModuleState) => {
+ let currentId = 1;
+ const reorderedSections = moduleState.sections.map(section => {
+ const currentSection = section.state as ReadingPart | ListeningPart | LevelPart;
+ console.log(currentSection.exercises);
+ const result = reorderSection(currentSection.exercises, currentId);
+ currentId = result.lastId;
+ console.log(result);
+ return {
+ ...section,
+ state: {
+ ...currentSection,
+ exercises: result.exercises
+ }
+ };
+ });
+
+ return {
+ ...moduleState,
+ sections: reorderedSections
+ };
+ };
+
export {
reorderFillBlanks,
reorderWriteBlanks,
reorderTrueFalse,
reorderMatchSentences,
- reorderExercises,
+ reorderSection,
+ reorderModule,
reorderMultipleChoice,
};
\ No newline at end of file