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

Part and MC question grid jump to, has a bug on next going to refactor the whole thing

Browse Source
This commit is contained in:
Carlos Mesquita
2024-08-23 21:17:32 +01:00
parent b4b078c8c9
commit f0f38b335f
9 changed files with 339 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/QuestionsModal.tsx
View File

@@ -4,12 +4,12 @@ import Button from "./Low/Button";
interface Props {
isOpen: boolean;
blankQuestions?: boolean;
finishingWhat? : string;
type?: "module" | "blankQuestions" | "submit";
unanswered?: boolean;
onClose: (next?: boolean) => void;
}
export default function QuestionsModal({ isOpen, onClose, blankQuestions = true, finishingWhat = "module" }: Props) {
export default function QuestionsModal({ isOpen, onClose, type = "module", unanswered = false }: Props) {
return (
<Transition show={isOpen} as={Fragment}>
<Dialog onClose={() => onClose(false)} className="relative z-50">
@@ -34,11 +34,11 @@ export default function QuestionsModal({ isOpen, onClose, blankQuestions = true,
leaveTo="opacity-0 scale-95">
<div className="fixed inset-0 flex items-center justify-center p-4">
<Dialog.Panel className="w-full max-w-2xl h-fit p-8 rounded-xl bg-white flex flex-col gap-4">
{blankQuestions ? (
{type === "module" && (
<>
<Dialog.Title className="font-bold text-xl">Questions Unanswered</Dialog.Title>
<span>
Please note that you are finishing the current {finishingWhat} and once you proceed to the next {finishingWhat}, you will no longer be
Please note that you are finishing the current module and once you proceed to the next module, you will no longer be
able to change the answers of the current one, including your unanswered questions. <br />
<br />
Are you sure you want to continue without completing those questions?
@@ -52,14 +52,16 @@ export default function QuestionsModal({ isOpen, onClose, blankQuestions = true,
</Button>
</div>
</>
): (
)}
{type === "blankQuestions" && (
<>
<Dialog.Title className="font-bold text-xl">Confirm Submission</Dialog.Title>
<Dialog.Title className="font-bold text-xl">Questions Unanswered</Dialog.Title>
<span>
Please note that you are finishing the current {finishingWhat} and once you proceed to the next {finishingWhat}, you will no longer be
able to review the answers of the current one. <br />
You have left some questions unanswered in the current part. <br />
<br />
Are you sure you want to continue?
If you wish to continue, you can still access this part later using the navigation bar at the top. <br />
<br />
Do you want to proceed to the next part, or would you like to go back and complete the unanswered questions in the current part?
</span>
<div className="w-full flex justify-between mt-8">
<Button color="purple" onClick={() => onClose(false)} variant="outline" className="max-w-[200px] self-end w-full">
@@ -71,6 +73,34 @@ export default function QuestionsModal({ isOpen, onClose, blankQuestions = true,
</div>
</>
)}
{type === "submit" && (
<>
<Dialog.Title className="font-bold text-xl">Confirm Submission</Dialog.Title>
<span>
{unanswered ? (
<>
By clicking &quot;Submit,&quot; you are finalizing your exam with some <b>questions left unanswered</b>. Once you submit, you will not be able to review or change any of your answers, including the unanswered ones. <br />
<br />
Are you sure you want to submit and complete the exam with unanswered questions?
</>
) : (
<>
By clicking &quot;Submit,&quot; you are finalizing your exam. Once you submit, you will not be able to review or change any of your answers. <br />
<br />
Are you sure you want to submit and complete the exam?
</>
)}
</span>
<div className="w-full flex justify-between mt-8">
<Button color="purple" onClick={() => onClose(false)} variant="outline" className="max-w-[200px] self-end w-full">
Go Back
</Button>
<Button color="purple" onClick={() => onClose(true)} className="max-w-[200px] self-end w-full">
Submit
</Button>
</div>
</>
)}
</Dialog.Panel>
</div>
</Transition.Child>