Is your feature request related to a problem? Please describe.
As a student preparing for the Azure Fundamentals certification, I place great importance on receiving accurate feedback on my exam performance. In the exam mode, after completing the questions within the allotted time, the system should validate the user's answers and calculate the points.

Describe the solution you'd like
Probably the best solution for this is to create a custom hook, but I am open to better suggestions.
The total points of all the questions should add up to 100 and it should take in consideration that there are also questions with multiple answers.

Is your feature request related to a problem? Please describe.
Currently the UI is not responsive.

Describe the solution you'd like
Use tailwind CSS to make the UI responsive for small devices.

Add a selectable dropdown/feature to choose from other exams. The repos are available at https://github.com/ditectrev

Is your feature request related to a problem? Please describe.
It would be nice to have formatter with well-defined rules and don't have to worry about what tools others use to format their code.

Describe the solution you'd like
Add prettier and optionally husky

Is your feature request related to a problem? Please describe.
Currently, the page selection buttons from the home page are hardcoded.

Describe the solution you'd like
A new page button component added to the library that uses Tailwind variants for customization.

Additional context
Class Variance Authority can be used to create the tailwind variants.
Check button component

Is your feature request related to a problem? Please describe.
As a student preparing for the Azure Fundamentals certification, I value a user-friendly and engaging interface when I enter exam mode. Currently the exam mode only has the intro screen, the next one is the quiz itself.

Describe the solution you'd like
To enhance the exam experience, we need to implement the UI for the exam mode that includes the following components:

• Question Display: Each question should be presented clearly and legibly. The practice mode uses Next image, for exam mode let's keep it simple text that can't be selected.
• Answer Selection: I should be able to select my answer choice by clicking the option bar. The selected choice should be visually indicated.
• Timer: A timer displaying the remaining time in "mm:ss" format should be prominently visible throughout the exam in the top right corner. The timer should start automatically when the quiz appears and stop when the time limit is reached or the user has answered the final question.
• Progress Indicator: An indicator showing the progress, such as "X of 50," should help keep track of the progress. It should be positioned in the top left corner and it should update dynamically as the user move through the questions.
• Next Question Button: A clearly labeled "Next Question" button should be provided for the user to move to the next question and save the selected answer/s. The button should be disabled if no answer is selected.
• Skip Question Button: A clearly labeled "Skip Question" button should be provided for the user to move to the next question without selecting any answer. The skipped questions should be visible at the end of the exam.

Additional context
The practice mode already has the quiz component made, which it's a good starting point.

You can find the link to figma file here.

Describe the bug
Text overflows on certain window width.

To Reproduce
Steps to reproduce the behavior:
Just make your browser window smaller. Occurs between 938px and 639px.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser chrome, firefox
• Version 114

Describe the bug
The text is overflowing the boxes on large screens.

To Reproduce
Steps to reproduce the behavior:

1. Go to home page
2. Resize browser window horizontally to min. 2500px

Expected behavior
Text should stay in the same position.

Screenshots

Desktop (please complete the following information):

• OS: [Windows]
• Browser [chrome]
• Version [latest]

I can make changes with the UI. we can upgrade navbar and the cards. Also the question on the practice mode is not clearly visible.
I can fix all that.

Is your feature request related to a problem? Please describe.
Currently there are only two button, for going to the next question and revealing the correct answer. But it would be better if the user can submit there answer and discover whether it is the correct one.

Describe the solution you'd like
Instead of having the reveal answer button, it would be better to have a Submit button, that will check whether the answer the user submitted is correct and display the correct answer.

Is your feature request related to a problem? Please describe.
As a student preparing for the Azure Fundamentals certification, I value a user-friendly and engaging interface when I finish the exam mode. This is the last screen in the exam mode.

Describe the solution you'd like
To enhance the exam experience, the completion screen need to be implemented which includes the following components:

• Exam status: A text that show if the exam has been passed or not. The color of the text should be green if the exam is passed and red if not.
• Points: A text showing the number of points the user has made "X/100". Same as the exam status the points should be colored green if the exam has been passed or red if not.
• Completion message: A text showing the user a congratulatory message and the amount of time it took to pass the exam. If the exam is failed it should tell the user the minimum amount of points needed to pass the exam.
• Retake Exam Button: A clearly labeled "Retake exam" button should be provided for the user to let him retake the exam with new random questions.

Additional context

You can find the link to figma file here.

Describe the bug
In practice mode, if I press reveal answer button and I change the question number at the top of the page the option remains selected for all the questions.

To Reproduce
Steps to reproduce the behavior:

1. Go to Practice mode
2. Click on Reveal Answer
3. Change question number at the top of the page
4. See error

Expected behavior
When the question changes no option should be selected or revealed

Describe the bug
In Practice or Exam mode questions index starts from 0

To Reproduce
Steps to reproduce the behavior:

1. Go to Practice or Exam mode
2. In Practice you can see it starts from 0, in Exam after "Begin exam" is clicked, on the right side is "0/30"

Expected behavior
Questions index should start from 1, not 0

Screenshots

Currently, only text questions are displayed, but some questions (sporadically answers) contain images.
It'd be good to have them included as an enhancement.

Describe the bug
Error related to quiz form appears in console

To Reproduce
Steps to reproduce the behavior:

1. Go to Practice Mode
2. See error in console

Expected behavior
No error

Screenshots

Describe the bug
In practice mode, when I click reveal answer for the first questions the back button appears.

To Reproduce
Steps to reproduce the behavior:

1. Go to Practice mode
2. Click on Reveal Answer
3. See bug

Expected behavior
The back button should appear from second question and above if the reveal answer button is pressed

Screenshots

Describe the bug
In the exam mode the Skip Question button is not working properly

To Reproduce
Steps to reproduce the behavior:

1. Click on Exam Mode
2. Click on Begin Exam
3. Click on Skip Question until no more questions left
4. See error

Expected behavior
When the user clicks on the Skip Question button, the current question should be added to a queue of skipped questions.
The questions from the queue should be showed to the user after all the questions from the initial queue has been answered.
The exam should not end until the user has answered all the questions, including the ones in the queue, or the time limit has expired.

Describe the bug
Currently the exam mode has a bug. When I select the first answer and click next question the first answer remains selected also for the next question.

To Reproduce
Steps to reproduce the behavior:

1. Go to Exam Mode
2. Click on Begin Exam
3. Click on first answer
4. Click on Next Question
5. See error -> first answer remains selected

Expected behavior
After I press Next Question no answer should be selected.

Screenshots
First question with first answer selected by the user

Second question with the first answer selected by default

Describe the solution you'd like
Add information to the README file regarding running the npm run prepare command in order to enable Git hooks.

Describe the bug
The question font size is too small on desktop.

To Reproduce
Steps to reproduce the behavior:

1. Open the the URL.
2. See error

Expected behavior
The question font text should be big enough to be readable on desktop.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Microsoft Edge
• Version 111.0.1661.62

Additional context

Describe the bug
Currently, the answered question count updates whenever a user selects an option.

To Reproduce
Steps to reproduce the behavior:

1. Click Begin Exam
2. Select an option
3. Notice the answered questions count updates.

Expected behavior
The selection should happen only when the user clicks on the Next button.

https://github.com/shadowwalker/next-pwa and https://medium.com/geekculture/how-to-make-a-next-js-app-a-pwa-a5e2b13da548 should make it happen!

Describe the bug
When the user ends a test in Exam Mode, the congratulation text on the end screen displays the remaining time instead of the time taken to complete the test.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Exam Mode'
2. Click on 'Begin'
3. Answer questions
4. See end screen

Expected behavior
On the end screen, the congratulatory text should include the time taken to complete test.

Screenshots

If I close the browser and reopen it, I have to restart from question #1. If the questions were randomized it would not matter but having to getting back to a question, may take a few hundred clicks.

Is your feature request related to a problem? Please describe.
Currently, the buttons in the library are hardcoded and lack flexibility.

Describe the solution you'd like
A new button component added to the library that uses Tailwind variants for customization. This would allow for more flexibility and ease of use when implementing buttons in projects.

Additional context
Class Variance Authority can be used to create the tailwind variants.

Is your feature request related to a problem? Please describe.
As the project grows and contains more pages, it becomes more important to show each page corresponding title in the browser tab. This would improve the SEO, user experience, and consistency of the project.

Describe the solution you'd like
I think adding the Head component with the title tag to each page is the solution to go.

Is your feature request related to a problem? Please describe.
Moving forward with the exam mode, it is necessary to have an info screen before starting the exam.

Describe the solution you'd like
In the exam mode page add the following info screen, without any functionality.

Link to figma file

Describe the bug
When on mobile the selection checkmark is rendered over the text.

To Reproduce
Steps to reproduce the behavior:

1. Go to mobile view
2. Click on one of the answers
3. See error

Expected behavior
The checkmark should be rendered on the left side of the text, like it is on desktop.

Screenshots

Is your feature request related to a problem? Please describe.
The current application lacks a reliable way to fetch a batch of random questions from the source database. This poses a challenge for implementing the exam mode, where a diverse set of questions is needed to ensure fairness and variety in each exam session.

Describe the solution you'd like
I propose the addition of a new GraphQL query that can retrieve 50 random questions from the source database. Implementing this feature would enhance the user experience by ensuring that each exam is unique and engaging.

Describe alternatives you've considered
Another approach might involve creating a separate server-side function to handle the random question selection, but integrating this functionality into the GraphQL layer would provide a more seamless and consistent experience.

Is your feature request related to a problem? Please describe.
Currently the application has nothing to show how many questions the user has answered.
A counter could be useful.

Describe the solution you'd like
Add a counter inside the form, above the question. (eg. 1/480)

Is your feature request related to a problem? Please describe.
The project could have a github stars button.

Describe the solution you'd like
Add a github stars button on the right side of the header.
This could be useful: https://buttons.github.io

Additional context

Describe the bug
The text contained in the answer options button are not readable enought due to the color of their font.

To Reproduce
Open the website

Expected behavior
User should be able to read the text.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Microsoft Edge
• Version 111.0.1661.62

Additional context
Add any other context about the problem here.

Is your feature request related to a problem? Please describe.
Now that the project has multiple pages, a home button is necessary.

Describe the solution you'd like
A home button added to the left side of the header for all pages except the home page.

Additional context

Figma file can be found here.

This is the home icon that has to be used:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
  <path d="M11.47 3.84a.75.75 0 011.06 0l8.69 8.69a.75.75 0 101.06-1.06l-8.689-8.69a2.25 2.25 0 00-3.182 0l-8.69 8.69a.75.75 0 001.061 1.06l8.69-8.69z" />
  <path d="M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 01-.75-.75v-4.5a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75V21a.75.75 0 01-.75.75H5.625a1.875 1.875 0 01-1.875-1.875v-6.198a2.29 2.29 0 00.091-.086L12 5.43z" />
</svg>

Is your feature request related to a problem? Please describe.
The application needs a home page. In the future the application will have an exam mode.

Describe the solution you'd like
A new home page for the application with two buttons for selecting one of the modes.

Additional context
I created a figma design file here

Our repo https://github.com/Ditectrev/Microsoft-Azure-AZ-900-Microsoft-Azure-Fundamentals-Exam-Questions-Answers gets some minor updates regarding typos, correct answers, community contributions, etc.

It'd be fantastic if the GraphQL query could fetch the content directly from the README.md file, it'd reduce manual updated when the content changes. Thanks!