Skip to content

Commit 8bf1971

Browse files
danieldanieleckidanieldanielecki
committed
🔧 fix(exam/page.tsx): adjust width classes for responsive design consistency
🔧 fix(layout.tsx): add 'h-full' class to ensure main content fills the viewport 🔧 fix(modes/page.tsx): update width classes for responsive design consistency 🔧 fix(page.tsx): adjust width classes for responsive design consistency 🔧 fix(practice/page.tsx): adjust width classes for responsive design consistency 🔧 fix(QuizForm.tsx): add type keyword to FC import for TypeScript compatibility
2 parents 69c10cb + 818cc20 commit 8bf1971

File tree

7 files changed

+20
-19
lines changed

7 files changed

+20
-19
lines changed

‎app/exam/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ const Exam: NextPage<{ searchParams: { url: string; name: string } }> = ({
9292
const numberOfQuestions = data.randomQuestions.length || 0;
9393

9494
return (
95-
<div className="py-10 px-5 mx-auto w-5/6 sm:w-1/2 bg-slate-800 border-2 border-slate-700 rounded-lg">
95+
<div className="py-10 px-5 mb-6 mx-auto w-[90vw] lg:w-[60vw] 2xl:w-[45%] bg-slate-800 border-2 border-slate-700 rounded-lg">
9696
<div>
9797
<div className="px-2 sm:px-10 w-full flex flex-row justify-between items-center">
9898
<p className="text-white font-bold text-sm sm:text-2xl">

‎app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
2424
<body className="bg-slate-900">
2525
<ApolloProvider>
2626
<TopNav />
27-
<main className="flex flex-col justify-between md:h-[calc(100vh-2.5rem-64px)]">
27+
<main className="flex flex-col justify-between md:h-[calc(100vh-2.5rem-64px)] h-full">
2828
{children}
2929
<Footer />
3030
<Cookie />

‎app/modes/layout.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,5 @@ type ModesLayoutProps = {
1414
};
1515

1616
export default function ModesLayout({ children }: ModesLayoutProps) {
17-
return (
18-
<main className="flex flex-col justify-between h-[calc(100vh-2.5rem-64px)]">
19-
{children}
20-
</main>
21-
);
17+
return <>{children}</>;
2218
}

‎app/modes/page.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@ const Modes: NextPage<{ searchParams: { url: string; name: string } }> = ({
77
const { url, name } = searchParams;
88

99
return (
10-
<div className="mx-auto w-5/6 sm:w-2/3 lg:w-2/3 xl:w-2/4 text-center">
11-
<h2 className="text-white text-4xl text-leading font-bold uppercase mt-14">
10+
<div className="mx-auto mb-6 w-full md:w-[90vw] lg:w-[70vw] 2xl:w-[45%] text-center">
11+
<h2 className="text-white text-4xl text-leading font-bold uppercase md:mt-14">
1212
{name}
1313
</h2>
1414
<p className="text-white text-lg mt-4 mb-14 px-5 leading-6">
15-
Test your knowledge under pressure with our timed exam mode, or explore
16-
and master over 480 questions at your own pace with our practice mode.
15+
Test your knowledge under pressure with our timed exam mode or explore
16+
and master all the questions at your own pace with our practice mode.
1717
</p>
18-
<div className="flex max-sm:flex-col max-sm:align-center justify-center gap-10 sm:mx-16">
18+
<div className="flex max-sm:flex-col max-sm:align-center justify-center gap-10 mx-5 md:mx-16">
1919
<ExamLink
2020
href={{
2121
pathname: "/practice",

‎app/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import exams from "@azure-fundamentals/lib/exams.json";
44

55
const Home: NextPage = () => {
66
return (
7-
<div className="mx-auto w-5/6 sm:w-2/3 lg:w-2/3 xl:w-2/4 text-center">
8-
<h2 className="text-white text-5xl text-leading font-bold uppercase mt-14">
7+
<div className="mx-auto mb-6 w-full lg:w-[70vw] 2xl:w-[45%] text-center">
8+
<h2 className="text-white text-5xl text-leading font-bold uppercase md:mt-14">
99
Welcome!
1010
</h2>
1111
<p className="text-white text-lg mt-4 mb-14 px-5 leading-6">
1212
Select an exam from the list bellow.
1313
</p>
14-
<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-10 gap-y-5 sm:mx-16">
14+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-10 gap-y-5 mx-5 lg:mx-0">
1515
{exams.map((exam) => {
1616
return (
1717
<NameLink

‎app/practice/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const Practice: NextPage<{ searchParams: { url: string; name: string } }> = ({
5858
if (questionsError) return <p>Oh no... {questionsError.message}</p>;
5959

6060
return (
61-
<div className="py-10 px-5 sm:p-10 mx-auto w-5/6 sm:w-1/2 bg-slate-800 border-2 border-slate-700 rounded-lg">
61+
<div className="py-10 px-5 mb-6 sm:p-10 mx-auto w-[90vw] lg:w-[60vw] 2xl:w-[45%] bg-slate-800 border-2 border-slate-700 rounded-lg">
6262
<QuizForm
6363
isLoading={loading || questionsLoading}
6464
questionSet={data?.questionById}

‎components/QuizForm.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FC, useState } from "react";
1+
import { type FC, useState } from "react";
22
import { useForm, FieldValues } from "react-hook-form";
33
import { Question } from "./types";
44
import Image from "next/image";
@@ -22,7 +22,7 @@ const QuizForm: FC<Props> = ({
2222
totalQuestions,
2323
link,
2424
}) => {
25-
const { register, handleSubmit, reset } = useForm();
25+
const { register, handleSubmit, reset, watch } = useForm();
2626
const [showCorrectAnswer, setShowCorrectAnswer] = useState<boolean>(false);
2727
const [lastIndex, setLastIndex] = useState<number>(1);
2828
const [canGoBack, setCanGoBack] = useState<boolean>(false);
@@ -55,6 +55,7 @@ const QuizForm: FC<Props> = ({
5555

5656
if (isLoading) return <p>Loading...</p>;
5757
const { question, options, images } = questionSet!;
58+
const watchInput = watch(`options.${currentQuestionIndex}`);
5859

5960
const noOfAnswers = options.filter((el) => el.isAnswer === true).length;
6061
return (
@@ -144,7 +145,7 @@ const QuizForm: FC<Props> = ({
144145
</svg>
145146
</button>
146147
</div>
147-
<p className="text-white px-12 pt-10 pb-5 select-none">{question}</p>
148+
<p className="text-white md:px-12 pt-10 pb-5 select-none">{question}</p>
148149
{images.length !== 0 && (
149150
<ul className="flex flex-row justify-center gap-2 mt-5 mb-8 select-none md:px-12 px-0">
150151
{images.map((image) => (
@@ -213,6 +214,10 @@ const QuizForm: FC<Props> = ({
213214
disabled={currentQuestionIndex < lastIndex}
214215
onClick={() => {
215216
setShowCorrectAnswer(false);
217+
setSavedAnswers((prev) => ({
218+
...prev,
219+
[currentQuestionIndex]: watchInput,
220+
}));
216221
if (currentQuestionIndex === totalQuestions) {
217222
handleNextQuestion(1);
218223
setLastIndex(1);

0 commit comments

Comments
 (0)