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

Blanks Exercises were removing the blanks on the editor and text but not on solutions, added submit and preview to writing and reading

Browse Source
This commit is contained in:
Carlos-Mesquita
2024-11-05 17:53:55 +00:00
parent 15c9c4d4bd
commit ffa2045a2d
28 changed files with 519 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/components/ExamEditor/Exercises/Blanks/FillBlanksReducer.tsx → src/components/ExamEditor/Exercises/Blanks/BlanksReducer.tsx
View File

24
src/components/ExamEditor/Exercises/Blanks/Letters/index.tsx
View File

@@ -6,7 +6,7 @@ import { MdEdit, MdEditOff } from "react-icons/md";
import FillBlanksWord from "./FillBlanksWord";
import { FaPlus } from "react-icons/fa";
import useExamEditorStore from "@/stores/examEditor";
import { blanksReducer, BlankState, getTextSegments } from "../FillBlanksReducer";
import { blanksReducer, BlankState, getTextSegments } from "../BlanksReducer";
import useSectionEdit from "@/components/ExamEditor/Hooks/useSectionEdit";
import { AlertItem } from "../../Shared/Alert";
import validateBlanks from "../validateBlanks";
@@ -75,7 +75,6 @@ const FillBlanksLetters: React.FC<{ exercise: FillBlanksExercise; sectionId: num
);
dispatch({ type: 'UPDATE_SECTION_STATE', payload: { sectionId, update: newState } });
dispatch({ type: "REORDER_EXERCISES" });
},
onDiscard: () => {
setSelectedBlankId(null);
@@ -103,7 +102,6 @@ const FillBlanksLetters: React.FC<{ exercise: FillBlanksExercise; sectionId: num
exercises: section.exercises.filter((ex) => ex.id !== local.id)
};
dispatch({ type: "UPDATE_SECTION_STATE", payload: { sectionId, update: newSection } });
dispatch({ type: "REORDER_EXERCISES" });
}
});
@@ -211,11 +209,30 @@ const FillBlanksLetters: React.FC<{ exercise: FillBlanksExercise; sectionId: num
});
};
const handleBlankRemove = (blankId: number) => {
if (!editing) setEditing(true);
const newAnswers = new Map(answers);
newAnswers.delete(blankId.toString());
setAnswers(newAnswers);
setLocal(prev => ({
...prev,
solutions: Array.from(newAnswers.entries()).map(([id, solution]) => ({
id,
solution
}))
}));
blanksDispatcher({ type: "REMOVE_BLANK", payload: blankId });
};
useEffect(() => {
validateBlanks(blanksState.blanks, answers, alerts, setAlerts);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [answers, blanksState.blanks, blanksState.textMode])
useEffect(()=> {
setEditingAlert(editing, setAlerts);
}, [editing])
@@ -232,6 +249,7 @@ const FillBlanksLetters: React.FC<{ exercise: FillBlanksExercise; sectionId: num
module={currentModule}
showBlankBank={true}
onBlankSelect={(blankId) => setSelectedBlankId(blankId?.toString() || null)}
onBlankRemove={handleBlankRemove}
onSave={handleSave}
onDiscard={handleDiscard}
onDelete={modeHandle}

26
src/components/ExamEditor/Exercises/Blanks/MultipleChoice/index.tsx
View File

@@ -3,7 +3,7 @@ import { useEffect, useReducer, useState } from "react";
import BlanksEditor from "..";
import { Card, CardContent } from "@/components/ui/card";
import useExamEditorStore from "@/stores/examEditor";
import { blanksReducer, BlankState, getTextSegments } from "../FillBlanksReducer";
import { blanksReducer, BlankState, getTextSegments } from "../BlanksReducer";
import useSectionEdit from "@/components/ExamEditor/Hooks/useSectionEdit";
import { AlertItem } from "../../Shared/Alert";
import validateBlanks from "../validateBlanks";
@@ -73,7 +73,6 @@ const FillBlanksMC: React.FC<{ exercise: FillBlanksExercise; sectionId: number }
);
dispatch({ type: 'UPDATE_SECTION_STATE', payload: { sectionId, update: newState } });
dispatch({ type: "REORDER_EXERCISES" });
},
onDiscard: () => {
setSelectedBlankId(null);
@@ -99,7 +98,6 @@ const FillBlanksMC: React.FC<{ exercise: FillBlanksExercise; sectionId: number }
exercises: section.exercises.filter((ex) => ex.id !== local.id)
};
dispatch({ type: "UPDATE_SECTION_STATE", payload: { sectionId, update: newSection } });
dispatch({ type: "REORDER_EXERCISES" });
}
});
@@ -191,6 +189,7 @@ const FillBlanksMC: React.FC<{ exercise: FillBlanksExercise; sectionId: number }
useEffect(() => {
validateBlanks(blanksState.blanks, answers, alerts, setAlerts);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [answers, blanksState.blanks, blanksState.textMode]);
useEffect(() => {
@@ -216,8 +215,28 @@ const FillBlanksMC: React.FC<{ exercise: FillBlanksExercise; sectionId: number }
solution
])
));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const handleBlankRemove = (blankId: number) => {
if (!editing) setEditing(true);
const newAnswers = new Map(answers);
newAnswers.delete(blankId.toString());
setAnswers(newAnswers);
setLocal(prev => ({
...prev,
words: (prev.words as FillBlanksMCOption[]).filter(w => w.id !== blankId.toString()),
solutions: Array.from(newAnswers.entries()).map(([id, solution]) => ({
id,
solution
}))
}));
blanksDispatcher({ type: "REMOVE_BLANK", payload: blankId });
};
return (
<div className="space-y-4">
<BlanksEditor
@@ -234,6 +253,7 @@ const FillBlanksMC: React.FC<{ exercise: FillBlanksExercise; sectionId: number }
onDiscard={handleDiscard}
onDelete={modeHandle}
setEditing={setEditing}
onBlankRemove={handleBlankRemove}
>
{!blanksState.textMode && selectedBlankId && (
<Card className="p-4">

13
src/components/ExamEditor/Exercises/Blanks/WriteBlankFill/index.tsx
View File

@@ -7,7 +7,7 @@ import { toast } from "react-toastify";
import BlanksEditor from "..";
import { AlertItem } from "../../Shared/Alert";
import setEditingAlert from "../../Shared/setEditingAlert";
import { blanksReducer } from "../FillBlanksReducer";
import { blanksReducer } from "../BlanksReducer";
import { validateWriteBlanks } from "./validation";
import AlternativeSolutions from "./AlternativeSolutions";
import clsx from "clsx";
@@ -126,6 +126,16 @@ const WriteBlanksFill: React.FC<{ exercise: WriteBlanksExercise; sectionId: numb
}));
};
const handleBlankRemove = (blankId: number) => {
if (!editing) setEditing(true);
setLocal(prev => ({
...prev,
solutions: prev.solutions.filter(s => s.id !== blankId.toString())
}));
blanksDispatcher({ type: "REMOVE_BLANK", payload: blankId });
};
useEffect(() => {
validateWriteBlanks(local.solutions, local.maxWords, setAlerts);
}, [local.solutions, local.maxWords]);
@@ -147,6 +157,7 @@ const WriteBlanksFill: React.FC<{ exercise: WriteBlanksExercise; sectionId: numb
module={currentModule}
showBlankBank={true}
onBlankSelect={(blankId) => setSelectedBlankId(blankId?.toString() || null)}
onBlankRemove={handleBlankRemove}
onSave={handleSave}
onDiscard={handleDiscard}
onDelete={modeHandle}

2
src/components/ExamEditor/Exercises/Blanks/WriteBlankFill/validation.ts
View File

@@ -1,5 +1,5 @@
import { AlertItem } from "../../Shared/Alert";
import { BlankState } from "../FillBlanksReducer";
import { BlankState } from "../BlanksReducer";
export const validateWriteBlanks = (

24
src/components/ExamEditor/Exercises/Blanks/index.tsx
View File

@@ -18,7 +18,7 @@ import Alert, { AlertItem } from "../Shared/Alert";
import clsx from "clsx";
import { Card, CardContent } from "@/components/ui/card";
import { Blank, DropZone } from "./DragNDrop";
import { getTextSegments, BlankState, BlanksState, BlanksAction } from "./FillBlanksReducer";
import { getTextSegments, BlankState, BlanksState, BlanksAction } from "./BlanksReducer";
interface Props {
@@ -33,6 +33,7 @@ interface Props {
setEditing: React.Dispatch<React.SetStateAction<boolean>>;
blanksDispatcher: React.Dispatch<BlanksAction>
onBlankSelect?: (blankId: number | null) => void;
onBlankRemove: (blankId: number) => void;
onSave: () => void;
onDiscard: () => void;
onDelete: () => void;
@@ -51,6 +52,7 @@ const BlanksEditor: React.FC<Props> = ({
alerts,
blanksDispatcher,
onBlankSelect,
onBlankRemove,
onSave,
onDiscard,
onDelete,
@@ -99,9 +101,24 @@ const BlanksEditor: React.FC<Props> = ({
const handleTextChange = useCallback(
(newText: string) => {
const processedText = newText.replace(/\[(\d+)\]/g, "{{$1}}");
const existingBlankIds = getTextSegments(state.text)
.filter(token => token.type === 'blank')
.map(token => token.id);
const newBlankIds = getTextSegments(processedText)
.filter(token => token.type === 'blank')
.map(token => token.id);
const removedBlankIds = existingBlankIds.filter(id => !newBlankIds.includes(id));
removedBlankIds.forEach(id => {
onBlankRemove(id);
});
blanksDispatcher({ type: "SET_TEXT", payload: processedText });
},
[blanksDispatcher]
[blanksDispatcher, state.text, onBlankRemove]
);
useEffect(() => {
@@ -116,8 +133,9 @@ const BlanksEditor: React.FC<Props> = ({
};
const handleBlankRemove = useCallback((blankId: number) => {
onBlankRemove(blankId);
blanksDispatcher({ type: "REMOVE_BLANK", payload: blankId });
}, [blanksDispatcher]);
}, [blanksDispatcher, onBlankRemove]);
const sensors = useSensors(
useSensor(PointerSensor, {

2
src/components/ExamEditor/Exercises/Blanks/validateBlanks.ts
View File

@@ -1,5 +1,5 @@
import { AlertItem } from "../Shared/Alert";
import { BlankState } from "./FillBlanksReducer";
import { BlankState } from "./BlanksReducer";
const validateBlanks = (

20
src/components/ExamEditor/Exercises/MatchSentences/index.tsx
View File

@@ -48,7 +48,6 @@ const MatchSentences: React.FC<{ exercise: MatchSentencesExercise, sectionId: nu
const newState = { ...section };
newState.exercises = newState.exercises.map((ex) => ex.id === exercise.id ? local : ex);
dispatch({ type: 'UPDATE_SECTION_STATE', payload: { sectionId, update: newState } });
dispatch({ type: "REORDER_EXERCISES" });
},
onDiscard: () => {
setLocal(exercise);
@@ -61,7 +60,6 @@ const MatchSentences: React.FC<{ exercise: MatchSentencesExercise, sectionId: nu
exercises: section.exercises.filter((ex) => ex.id !== local.id)
};
dispatch({ type: "UPDATE_SECTION_STATE", payload: { sectionId, update: newSection } });
dispatch({ type: "REORDER_EXERCISES" });
}
});
@@ -206,16 +204,16 @@ const MatchSentences: React.FC<{ exercise: MatchSentencesExercise, sectionId: nu
</SortableQuestion>
))}
</QuestionsList>
<button
onClick={addHeading}
className="w-full p-4 border-2 border-dashed border-gray-300 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition-colors flex items-center justify-center gap-2 text-gray-600 hover:text-blue-600"
>
<MdAdd size={18} />
Add New Match
</button>
{(section.text.content.split("\n\n").length - 1) === local.sentences.length && (
<button
onClick={addHeading}
className="w-full p-4 border-2 border-dashed border-gray-300 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition-colors flex items-center justify-center gap-2 text-gray-600 hover:text-blue-600"
>
<MdAdd size={18} />
Add New Match
</button>
)}
</div>
<ReferenceViewer
headings={exercise.variant !== "ideaMatch"}
showReference={showReference}

2
src/components/ExamEditor/Exercises/MultipleChoice/Underline/index.tsx
View File

@@ -86,7 +86,6 @@ const UnderlineMultipleChoice: React.FC<{exercise: MultipleChoiceExercise, secti
)
};
dispatch({ type: "UPDATE_SECTION_STATE", payload: { sectionId, update: newSection } });
dispatch({ type: "REORDER_EXERCISES" });
},
onDiscard: () => {
setLocal(exercise);
@@ -98,7 +97,6 @@ const UnderlineMultipleChoice: React.FC<{exercise: MultipleChoiceExercise, secti
exercises: section.exercises.filter((ex) => ex.id !== local.id)
};
dispatch({ type: "UPDATE_SECTION_STATE", payload: { sectionId, update: newSection } });
dispatch({ type: "REORDER_EXERCISES" });
},
});

2
src/components/ExamEditor/Exercises/MultipleChoice/Vanilla/index.tsx
View File

@@ -165,7 +165,6 @@ const MultipleChoice: React.FC<MultipleChoiceProps> = ({ exercise, sectionId, op
exercises: section.exercises.map((ex) => ex.id === local.id ? local : ex)
};
dispatch({ type: "UPDATE_SECTION_STATE", payload: { sectionId, update: newSection } });
dispatch({ type: "REORDER_EXERCISES" });
},
onDiscard: () => {
setLocal(exercise);
@@ -176,7 +175,6 @@ const MultipleChoice: React.FC<MultipleChoiceProps> = ({ exercise, sectionId, op
exercises: section.exercises.filter((ex) => ex.id !== local.id)
};
dispatch({ type: "UPDATE_SECTION_STATE", payload: { sectionId, update: newSection } });
dispatch({ type: "REORDER_EXERCISES" });
},
});

2
src/components/ExamEditor/Exercises/TrueFalse/index.tsx
View File

@@ -97,7 +97,6 @@ const TrueFalse: React.FC<{ exercise: TrueFalseExercise, sectionId: number }> =
exercises: section.exercises.map((ex) => ex.id === local.id ? local : ex)
};
dispatch({ type: "UPDATE_SECTION_STATE", payload: { sectionId, update: newSection } });
dispatch({ type: "REORDER_EXERCISES" })
},
onDiscard: () => {
setLocal(exercise);
@@ -108,7 +107,6 @@ const TrueFalse: React.FC<{ exercise: TrueFalseExercise, sectionId: number }> =
exercises: section.exercises.filter((ex) => ex.id !== local.id)
};
dispatch({ type: "UPDATE_SECTION_STATE", payload: { sectionId, update: newSection } });
dispatch({ type: "REORDER_EXERCISES" })
},
});

1
src/components/ExamEditor/Exercises/WriteBlanks/index.tsx
View File

@@ -198,6 +198,7 @@ const WriteBlanks: React.FC<{ sectionId: number; exercise: WriteBlanksExercise }
const handleDragEnd = (event: DragEndEvent) => {
setEditing(true);
console.log("ASOJNFOAI+SHJOIPFAS");
setLocal(handleWriteBlanksReorder(event, local));
}

5
src/components/ExamEditor/Exercises/Writing/index.tsx
View File

@@ -17,7 +17,7 @@ interface Props {
const Writing: React.FC<Props> = ({ sectionId }) => {
const { currentModule, dispatch } = useExamEditorStore();
const {edit } = useExamEditorStore((store) => store.modules[currentModule]);
const { edit } = useExamEditorStore((store) => store.modules[currentModule]);
const { generating, genResult, state } = useExamEditorStore(
(state) => state.modules[currentModule].sections.find((section) => section.sectionId === sectionId)!
);
@@ -62,8 +62,9 @@ const Writing: React.FC<Props> = ({ sectionId }) => {
if (genResult !== undefined && generating === "context") {
setEditing(true);
setPrompt(genResult[0].prompt);
dispatch({ type: "UPDATE_SECTION_SINGLE_FIELD", payload: { sectionId, module: currentModule, field: "genResult", value: undefined }})
dispatch({ type: "UPDATE_SECTION_SINGLE_FIELD", payload: { sectionId, module: currentModule, field: "genResult", value: undefined } })
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [genResult, dispatch, sectionId, setEditing, currentModule]);
useEffect(() => {

3
src/components/ExamEditor/SectionRenderer/SectionContext/reading.tsx
View File

@@ -23,7 +23,7 @@ const ReadingContext: React.FC<{sectionId: number;}> = ({sectionId}) => {
sectionId,
mode: "edit",
onSave: () => {
const newState = {...state} as ReadingPart;
let newState = {...state} as ReadingPart;
newState.text.title = title;
newState.text.content = content;
dispatch({type: 'UPDATE_SECTION_STATE', payload: {sectionId, update: newState}})
@@ -45,6 +45,7 @@ const ReadingContext: React.FC<{sectionId: number;}> = ({sectionId}) => {
setContent(genResult[0].text)
dispatch({type: "UPDATE_SECTION_SINGLE_FIELD", payload: {sectionId, module: currentModule, field: "genResult", value: undefined}})
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [genResult, dispatch, sectionId, setEditing, currentModule]);

5
src/components/ExamEditor/SectionRenderer/SectionExercises/index.tsx
View File

@@ -40,17 +40,16 @@ const SectionExercises: React.FC<{ sectionId: number; }> = ({ sectionId }) => {
useEffect(() => {
if (genResult !== undefined && generating === "exercises") {
const newExercises = genResult[0].exercises;
const newState = state as ExamPart;
newState.exercises = [...newState.exercises, ...newExercises]
dispatch({
type: "UPDATE_SECTION_STATE", payload: {
sectionId, update: {
exercises: newExercises
exercises: [...(state as ExamPart).exercises, ...newExercises]
}
}
})
dispatch({ type: "UPDATE_SECTION_SINGLE_FIELD", payload: { sectionId, module: currentModule, field: "genResult", value: undefined } })
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [genResult, dispatch, sectionId, currentModule]);
const currentSection = sections.find((s) => s.sectionId === sectionId)!;

8
src/components/ExamEditor/SectionRenderer/SectionExercises/reading.tsx
View File

@@ -23,7 +23,7 @@ const getExerciseItems = (exercises: ReadingExercise[], sectionId: number): Exer
sectionId,
label: (
<ExerciseLabel
label={`Fill Blanks Question #${firstWordId} - #${lastWordId}`}
label={`Fill Blanks Question #${firstWordId} ${firstWordId === lastWordId ? '' : `- #${lastWordId}`}`}
preview={
<>
&quot;{previewLabel(exercise.prompt)}...&quot;
@@ -41,7 +41,7 @@ const getExerciseItems = (exercises: ReadingExercise[], sectionId: number): Exer
sectionId,
label: (
<ExerciseLabel
label={`Write Blanks Question #${firstWordId} - #${lastWordId}`}
label={`Write Blanks Question #${firstWordId} ${firstWordId === lastWordId ? '' : `- #${lastWordId}`}`}
preview={
<>
&quot;{previewLabel(exercise.prompt)}...&quot;
@@ -59,7 +59,7 @@ const getExerciseItems = (exercises: ReadingExercise[], sectionId: number): Exer
sectionId,
label: (
<ExerciseLabel
label={`${exercise.variant == "ideaMatch" ? "Idea Match" : "Paragraph Match"} ${firstWordId == lastWordId ? `#${firstWordId}` : `#${firstWordId} - #${lastWordId}`}`}
label={`${exercise.variant == "ideaMatch" ? "Idea Match" : "Paragraph Match"} #${firstWordId} ${firstWordId === lastWordId ? '' : `- #${lastWordId}`}`}
preview={
<>
&quot;{previewLabel(exercise.prompt)}...&quot;
@@ -77,7 +77,7 @@ const getExerciseItems = (exercises: ReadingExercise[], sectionId: number): Exer
sectionId,
label: (
<ExerciseLabel
label={`True/False/Not Given #${firstWordId} - #${lastWordId}`}
label={`True/False/Not Given #${firstWordId} ${firstWordId === lastWordId ? '' : `- #${lastWordId}`}`}
preview={
<>
&quot;{previewLabel(exercise.prompt)}...&quot;

24
src/components/ExamEditor/SettingsEditor/index.tsx
View File

@@ -1,5 +1,5 @@
import React, { ReactNode, useCallback, useEffect, useMemo, useState, useRef } from "react";
import { FaEye } from "react-icons/fa";
import { FaEye, FaFileUpload } from "react-icons/fa";
import clsx from "clsx";
import Select from "@/components/Low/Select";
import Input from "@/components/Low/Input";
@@ -18,6 +18,8 @@ interface SettingsEditorProps {
introPresets: Option[];
children?: ReactNode;
canPreview: boolean;
canSubmit: boolean;
submitModule: () => void;
preview: () => void;
}
@@ -28,7 +30,9 @@ const SettingsEditor: React.FC<SettingsEditorProps> = ({
introPresets,
children,
preview,
submitModule,
canPreview,
canSubmit
}) => {
const examLabel = useExamEditorStore((state) => state.modules[module].examLabel) || '';
const { localSettings, updateLocalAndScheduleGlobal } = useSettingsState<SectionSettings>(
@@ -76,6 +80,10 @@ const SettingsEditor: React.FC<SettingsEditorProps> = ({
});
}, [updateLocalAndScheduleGlobal]);
const submitExam = () => {
}
return (
<div className={`flex flex-col gap-8 border bg-ielts-${module}/20 rounded-3xl p-8 w-1/3 h-fit`}>
<div className={`w-full flex justify-center text-ielts-${module} font-bold text-xl`}>{sectionLabel} Settings</div>
@@ -118,7 +126,19 @@ const SettingsEditor: React.FC<SettingsEditorProps> = ({
</div>
</Dropdown>
{children}
<div className="flex flex-row justify-center mt-4">
<div className="flex flex-row justify-between mt-4">
<button
className={clsx(
"flex items-center justify-center px-4 py-2 text-white rounded-xl transition-colors duration-300",
`bg-ielts-${module}/70 border border-ielts-${module} hover:bg-ielts-${module} disabled:bg-ielts-${module}/30`,
"disabled:cursor-not-allowed disabled:text-gray-200"
)}
onClick={submitModule}
disabled={!canSubmit}
>
<FaFileUpload className="mr-2" size={18} />
Submit Module as Exam
</button>
<button
className={clsx(
"flex items-center justify-center px-4 py-2 text-white rounded-xl transition-colors duration-300",

2
src/components/ExamEditor/SettingsEditor/level.tsx
View File

@@ -60,6 +60,8 @@ const LevelSettings: React.FC = () => {
introPresets={defaultPresets}
preview={()=>{}}
canPreview={false}
canSubmit={false}
submitModule={()=> {}}
>
<div>
<Dropdown title="Add Exercises" className={

2
src/components/ExamEditor/SettingsEditor/listening.tsx
View File

@@ -69,6 +69,8 @@ const ListeningSettings: React.FC = () => {
introPresets={[defaultPresets[focusedSection - 1]]}
preview={()=> {}}
canPreview={false}
canSubmit={false}
submitModule={()=> {}}
>
<Dropdown
title="Audio Context"

79
src/components/ExamEditor/SettingsEditor/reading.tsx
View File

@@ -7,21 +7,33 @@ import ExercisePicker from "../Shared/ExercisePicker";
import { generate } from "./Shared/Generate";
import GenerateBtn from "./Shared/GenerateBtn";
import useSettingsState from "../Hooks/useSettingsState";
import { ReadingPart } from "@/interfaces/exam";
import { ReadingExam, ReadingPart } from "@/interfaces/exam";
import { ReadingSectionSettings } from "@/stores/examEditor/types";
import useExamEditorStore from "@/stores/examEditor";
import openDetachedTab from "@/utils/popout";
import { useRouter } from "next/router";
import { usePersistentExamStore } from "@/stores/examStore";
import axios from "axios";
import { playSound } from "@/utils/sound";
import { toast } from "react-toastify";
const ReadingSettings: React.FC = () => {
const router = useRouter();
const { currentModule } = useExamEditorStore();
const {
setExam,
setExerciseIndex,
setPartIndex,
setQuestionIndex,
} = usePersistentExamStore();
const { currentModule, title } = useExamEditorStore();
const {
focusedSection,
difficulty,
sections,
minTimer,
isPrivate,
} = useExamEditorStore(state => state.modules[currentModule]);
const { localSettings, updateLocalAndScheduleGlobal } = useSettingsState<ReadingSectionSettings>(
@@ -68,18 +80,75 @@ const ReadingSettings: React.FC = () => {
}, [updateLocalAndScheduleGlobal]);
const canPreview = sections.some(
const canPreviewOrSubmit = sections.some(
(s) => (s.state as ReadingPart).exercises && (s.state as ReadingPart).exercises.length > 0
);
const submitReading = () => {
const exam: ReadingExam = {
parts: sections.map((s) => {
const exercise = s.state as ReadingPart;
return {
...exercise,
intro: localSettings.currentIntro,
category: localSettings.category
};
}),
isDiagnostic: false,
minTimer,
module: "reading",
id: title,
type: "academic",
variant: sections.length === 3 ? "full" : "partial",
difficulty,
private: isPrivate,
};
axios.post(`/api/exam/reading`, exam)
.then((result) => {
playSound("sent");
toast.success(`Submitted Exam ID: ${result.data.id}`);
})
.catch((error) => {
console.log(error);
toast.error(error.response.data.error || "Something went wrong while submitting, please try again later.");
})
}
const preview = () => {
setExam({
parts: sections.map((s) => {
const exercise = s.state as ReadingPart;
return {
...exercise,
intro: localSettings.currentIntro,
category: localSettings.category
};
}),
minTimer,
module: "reading",
id: title,
isDiagnostic: false,
variant: undefined,
difficulty,
private: isPrivate,
} as ReadingExam);
setExerciseIndex(0);
setQuestionIndex(0);
setPartIndex(0);
openDetachedTab("popout?type=Exam&module=reading", router)
}
return (
<SettingsEditor
sectionLabel={`Passage ${focusedSection}`}
sectionId={focusedSection}
module="reading"
introPresets={[defaultPresets[focusedSection - 1]]}
preview={() => { }}
canPreview={canPreview}
preview={preview}
canPreview={canPreviewOrSubmit}
canSubmit={canPreviewOrSubmit}
submitModule={submitReading}
>
<Dropdown
title="Generate Passage"

3
src/components/ExamEditor/SettingsEditor/speaking.tsx
View File

@@ -87,6 +87,7 @@ const SpeakingSettings: React.FC = () => {
}
}
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [localSettings, difficulty]);
const onTopicChange = useCallback((topic: string) => {
@@ -105,6 +106,8 @@ const SpeakingSettings: React.FC = () => {
introPresets={[defaultPresets[focusedSection - 1]]}
preview={() => { }}
canPreview={false}
canSubmit={false}
submitModule={()=> {}}
>
<Dropdown
title="Generate Script"

91
src/components/ExamEditor/SettingsEditor/writing.tsx
View File

@@ -11,13 +11,17 @@ import useExamEditorStore from "@/stores/examEditor";
import { useRouter } from "next/router";
import { usePersistentExamStore } from "@/stores/examStore";
import openDetachedTab from "@/utils/popout";
import { WritingExercise } from "@/interfaces/exam";
import { WritingExam, WritingExercise } from "@/interfaces/exam";
import { v4 } from "uuid";
import axios from "axios";
import { playSound } from "@/utils/sound";
import { toast } from "react-toastify";
const WritingSettings: React.FC = () => {
const router = useRouter();
const [preview, setPreview] = useState({canPreview: false, openTab: () => {}});
const { currentModule } = useExamEditorStore();
const [canPreviewOrSubmit, setCanPreviewOrSubmit] = useState(false);
const { currentModule, title } = useExamEditorStore();
const {
minTimer,
difficulty,
@@ -26,7 +30,7 @@ const WritingSettings: React.FC = () => {
focusedSection,
} = useExamEditorStore((store) => store.modules["writing"]);
const states = sections.flatMap((s)=> s.state) as WritingExercise[];
const states = sections.flatMap((s) => s.state) as WritingExercise[];
const {
setExam,
@@ -73,34 +77,73 @@ const WritingSettings: React.FC = () => {
}, [updateLocalAndScheduleGlobal]);
useEffect(() => {
const openTab = () => {
setExam({
isDiagnostic: false,
minTimer,
module: "writing",
exercises: states.filter((s) => s.prompt && s.prompt !== ""),
id: v4(),
variant: undefined,
difficulty,
private: isPrivate,
});
setExerciseIndex(0);
openDetachedTab("popout?type=Exam&module=writing", router)
}
setPreview({
canPreview: states.some((s) => s.prompt && s.prompt !== ""),
openTab
})
setCanPreviewOrSubmit(states.some((s) => s.prompt !== ""))
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [states.some((s) => s.prompt !== "")])
const openTab = () => {
setExam({
exercises: sections.map((s) => {
const exercise = s.state as WritingExercise;
return {
...exercise,
intro: s.settings.currentIntro,
category: s.settings.category
};
}),
minTimer,
module: "writing",
id: title,
isDiagnostic: false,
variant: undefined,
difficulty,
private: isPrivate,
});
setExerciseIndex(0);
openDetachedTab("popout?type=Exam&module=writing", router)
}
const submitWriting = () => {
const exam: WritingExam = {
exercises: sections.map((s) => {
const exercise = s.state as WritingExercise;
return {
...exercise,
intro: localSettings.currentIntro,
category: localSettings.category
};
}),
minTimer,
module: "writing",
id: title,
isDiagnostic: false,
variant: undefined,
difficulty,
private: isPrivate,
};
axios
.post(`/api/exam/reading`, exam)
.then((result) => {
playSound("sent");
toast.success(`Submitted Exam ID: ${result.data.id}`);
})
.catch((error) => {
console.log(error);
toast.error(error.response.data.error || "Something went wrong while submitting, please try again later.");
})
}
return (
<SettingsEditor
sectionLabel={`Task ${focusedSection}`}
sectionId={focusedSection}
module="writing"
introPresets={[defaultPresets[focusedSection - 1]]}
preview={preview.openTab}
canPreview={preview.canPreview}
preview={openTab}
canPreview={canPreviewOrSubmit}
canSubmit={canPreviewOrSubmit}
submitModule={submitWriting}
>
<Dropdown
title="Generate Instructions"

2
src/components/ExamEditor/Shared/ExercisePicker/index.tsx
View File

@@ -111,7 +111,7 @@ const ExercisePicker: React.FC<ExercisePickerProps> = ({
exercises: data.exercises
}]
);
dispatch({type: "UPDATE_SECTION_SINGLE_FIELD", payload: {sectionId, module: currentModule, field: "selectedExercises", value: []}})
setPickerOpen(false);
};

188
src/exams/Reading.tsx
View File

@@ -1,24 +1,17 @@
import {MultipleChoiceExercise, ReadingExam, ReadingPart, UserSolution} from "@/interfaces/exam";
import {Fragment, useEffect, useState} from "react";
import Icon from "@mdi/react";
import {mdiArrowRight, mdiNotebook} from "@mdi/js";
import { MultipleChoiceExercise, ReadingExam, ReadingPart, UserSolution } from "@/interfaces/exam";
import { Fragment, useEffect, useState } from "react";
import clsx from "clsx";
import {infoButtonStyle} from "@/constants/buttonStyles";
import {convertCamelCaseToReadable} from "@/utils/string";
import {Dialog, Transition} from "@headlessui/react";
import {renderExercise} from "@/components/Exercises";
import {renderSolution} from "@/components/Solutions";
import {Panel} from "primereact/panel";
import {Steps} from "primereact/steps";
import {BsAlarm, BsBook, BsChevronDown, BsChevronUp, BsClock, BsStopwatch} from "react-icons/bs";
import ProgressBar from "@/components/Low/ProgressBar";
import { convertCamelCaseToReadable } from "@/utils/string";
import { Dialog, Transition } from "@headlessui/react";
import { renderExercise } from "@/components/Exercises";
import { renderSolution } from "@/components/Solutions";
import { BsChevronDown, BsChevronUp } from "react-icons/bs";
import ModuleTitle from "@/components/Medium/ModuleTitle";
import {Divider} from "primereact/divider";
import Button from "@/components/Low/Button";
import BlankQuestionsModal from "@/components/QuestionsModal";
import useExamStore, { usePersistentExamStore } from "@/stores/examStore";
import {defaultUserSolutions} from "@/utils/exams";
import {countExercises} from "@/utils/moduleUtils";
import { countExercises } from "@/utils/moduleUtils";
import PartDivider from "./Navigation/SectionDivider";
interface Props {
exam: ReadingExam;
@@ -29,7 +22,7 @@ interface Props {
const numberToLetter = (number: number) => (number + 9).toString(36).toUpperCase();
function TextModal({isOpen, title, content, onClose}: {isOpen: boolean; title: string; content: string; 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}>
@@ -83,7 +76,7 @@ function TextModal({isOpen, title, content, onClose}: {isOpen: boolean; title: s
);
}
function TextComponent({part, exerciseType}: {part: ReadingPart; exerciseType: string}) {
function TextComponent({ part, exerciseType }: { part: ReadingPart; exerciseType: string }) {
return (
<div className="flex flex-col gap-2 w-full">
<h3 className="text-xl font-semibold">{part.text.title}</h3>
@@ -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<Set<number>>(new Set(showSolutions ? exam.parts.map((_, index) => index) : []));
const [showPartDivider, setShowPartDivider] = useState<boolean>(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 (
<>
<div className="flex flex-col h-full w-full gap-8">
<BlankQuestionsModal isOpen={showBlankModal} onClose={confirmFinishModule} />
{partIndex > -1 && <TextModal {...exam.parts[partIndex].text} isOpen={showTextModal} onClose={() => setShowTextModal(false)} />}
<ModuleTitle
minTimer={exam.minTimer}
exerciseIndex={calculateExerciseIndex()}
{(showPartDivider) ?
<PartDivider
module="reading"
totalExercises={countExercises(exam.parts.flatMap((x) => x.exercises))}
disableTimer={showSolutions}
label={exerciseIndex === -1 ? undefined : convertCamelCaseToReadable(exam.parts[partIndex].exercises[exerciseIndex].type)}
/>
<div
className={clsx(
"mb-20 w-full",
exerciseIndex > -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)) }}
/> : (
<>
<div className="flex flex-col h-full w-full gap-8">
<BlankQuestionsModal isOpen={showBlankModal} onClose={confirmFinishModule} />
{partIndex > -1 && <TextModal {...exam.parts[partIndex].text} isOpen={showTextModal} onClose={() => setShowTextModal(false)} />}
<ModuleTitle
minTimer={exam.minTimer}
exerciseIndex={calculateExerciseIndex()}
module="reading"
totalExercises={countExercises(exam.parts.flatMap((x) => x.exercises))}
disableTimer={showSolutions}
label={exerciseIndex === -1 ? undefined : convertCamelCaseToReadable(exam.parts[partIndex].exercises[exerciseIndex].type)}
/>
<div
className={clsx(
"mb-20 w-full",
exerciseIndex > -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)}
</div>
{exerciseIndex > -1 && partIndex > -1 && exerciseIndex < exam.parts[partIndex].exercises.length && (
<Button
color="purple"
variant="outline"
onClick={() => setShowTextModal(true)}
className="max-w-[200px] self-end w-full absolute bottom-[31px] right-64">
Read text
</Button>
{exerciseIndex > -1 &&
partIndex > -1 &&
exerciseIndex < exam.parts[partIndex].exercises.length &&
showSolutions &&
renderSolution(exam.parts[partIndex].exercises[exerciseIndex], nextExercise, previousExercise)}
</div>
{exerciseIndex > -1 && partIndex > -1 && exerciseIndex < exam.parts[partIndex].exercises.length && (
<Button
color="purple"
variant="outline"
onClick={() => setShowTextModal(true)}
className="max-w-[200px] self-end w-full absolute bottom-[31px] right-64">
Read text
</Button>
)}
</div>
{exerciseIndex === -1 && partIndex > 0 && (
<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
<Button
color="purple"
variant="outline"
onClick={() => {
setExerciseIndex(exam.parts[partIndex - 1].exercises.length - 1);
setPartIndex(partIndex - 1);
}}
className="max-w-[200px] w-full">
Back
</Button>
<Button color="purple" onClick={() => nextExercise()} className="max-w-[200px] self-end w-full">
Next
</Button>
</div>
)}
{exerciseIndex === -1 && partIndex === 0 && (
<Button color="purple" onClick={() => nextExercise()} className="max-w-[200px] self-end w-full">
Start now
</Button>
)}
</>
)}
</div>
{exerciseIndex === -1 && partIndex > 0 && (
<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
<Button
color="purple"
variant="outline"
onClick={() => {
setExerciseIndex(exam.parts[partIndex - 1].exercises.length - 1);
setPartIndex(partIndex - 1);
}}
className="max-w-[200px] w-full">
Back
</Button>
<Button color="purple" onClick={() => nextExercise()} className="max-w-[200px] self-end w-full">
Next
</Button>
</div>
)}
{exerciseIndex === -1 && partIndex === 0 && (
<Button color="purple" onClick={() => nextExercise()} className="max-w-[200px] self-end w-full">
Start now
</Button>
)}
</>
);
}

6
src/stores/examEditor/reducers/index.ts
View File

@@ -9,8 +9,10 @@ export const rootReducer = (
state: ExamEditorStore,
action: Action
): Partial<ExamEditorStore> => {
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,

4
src/stores/examEditor/reducers/moduleReducer.ts
View File

@@ -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)
}
};
}

19
src/stores/examEditor/reducers/sectionReducer.ts
View File

@@ -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
)
}

224
src/stores/examEditor/reorder/global.ts
View File

@@ -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<FillBlanksExercise> => {
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<string, string>);
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<WriteBlanksExercise> => {
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<string, string>);
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<WriteBlanksExercise> => {
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<TrueFalseExercise> => {
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,
};