- The Submission should not contain spaces, for example /rct-101 folder/eval will not work.
- Do not push node_modules and package-lock.json to github.
✅ Able to submit the app - 1 mark ( minimum score )
✅ Heading and button to start the exam should be visible when the component loads - 1 mark
✅ Should make a get request to the endpoint when clicked on Start Exam button and disappear on UI once clicked on it and End Exam button, Score(Score: 0) is visible - 2 marks
✅ Check all questions are visible along with 4 options - 2 marks
✅ Check whether able select the answer for any question and the score is getting updated only after selecting the correct ans -3 marks
✅ Check whether the user able to select only one answer, and all option buttons of that question are getting disabled after selecting it - 1 mark
✅ Check End Exam button is working as per the problem statement or not - 2 marks
✅ check after selecting option for any question, the correct option is having className as "bgGreen" and the wrong options are having className as "bgRed" - 3 marks
✅ There should be a show ans button on clicking it the ans should be visible for that question - 1 mark
- Use node version(LTS) should be
v16.16.0
- Don't change/override package.json
npm install --engine-strict
// run locally
npm run start
- the system on cp.masaischool.com may take between 1-20 minutes for responding,
- so we request you to read the problem carefully and debug it before itself
- we also request you not just submit it last minute try to keep one submission at a time
Design an online exam application using React that allows users to take a quiz. The user should be able to start and end the exam using dedicated buttons. Each question should be displayed with four options, and upon clicking the correct answer, marks should be visible in real-time.
When the user clicks on any option, the marks should be updated on real-time. And the className
of the correct option should be changed to bgGreen
and other wrong options should have className bgRed
. The user should be able to click on only one option per question.
├── src
| ├── App.css
| ├── App.jsx
| ├── Components
| | ├── Booklet.jsx
| | ├── Option.jsx
| | └── QuestionCard.jsx
This component will be responsible for rendering the Booklet
component. The App component should import the Booklet
component and include it inside a <div>
element with a class name of "App".
- Initial Display
Booklet
component in Booklet.jsx contains div
with data-testid="Booklet"
, Inside this div
, create a div as below.
div
should be withclassName="welcome-div"
- This should contain a welcome message in
h1
tag with textContentTo begin the exam, click on the 'Start Exam' button below
- There should also be a
button
with textContentStart Exam
- This should contain a welcome message in
On clicking the Start Exam
button, the application should make a GET request to the API and display all the questions in cards using the QuestionCard
component.
The API request is made to the following URL: (only use Fetch)
-
Use Fetch only
-
After getting the data
div
withclassName="welcome-div"
should not exist onDOM
.- The div with
className="questions-container"
should also contain the following HTML elementsh3
tag with textContentScore: {score}
, the score by default will be0
- button with textContent
End Exam
on Clicking it, we should see onlydiv
withclassName="welcome-div"
existing on DOM anddiv
withclassName="questions-container"
should not exist on DOM. (We have ended the exam here, so when we again start the exam by clicking onStart Exam
, the score should be 0, and the user should be able to answer the questions from the start) - The questions should be visible on the DOM with the help of the
QuestionCard
component. And all theQuestionCard
components should be appended inside thediv
withclassName="questions-container"
provided. The div withclassName="questions-container"
is already provided to you inBooklet.jsx
.
-
Note:- This
div
withclassName="questions-container"
should exist on DOM only when the user starts the exam(After clicking onStart Exam
button). And it should not exist on DOM when the user stops the exam(After clicking onEnd Exam
button).
The QuestionCard
component should contain the following HTML elements and should be used for displaying the question
along with 4 options.
- create
h3
tag to display the question. (The textContent of this tag will be the question) div
withclassName="options"
.(provided in boilerplate)- All the options should be appended to the above div with the help of
Option
component.
- All the options should be appended to the above div with the help of
- Create a div with
className="show-ans"
(provided in boilerplate)- This div should contain a button with textContent as
Show Ans
by default and on clicking it, the button textContent should be changed toHide Ans
and ap
tag with textContent as correct ans of that question should exist on DOM. By default thisp
tag should not exist on DOM, it should be visible only when we click on the buttonShow Ans
and on Clicking on the button(Hide Ans
) again, thep
tag should not exist on DOM.
- This div should contain a button with textContent as
Functionality required.
- The user should be able to click only one option per question. And on clicking it,
- If he clicks on the
correct option
the score should be increased by1
mark. - correct answer option for that question should have
className
asbgGreen
and the wrong options should have className asbgRed
.(This className should get assigned after selecting any option of that question. ) - Hint:- You can prevent the user from clicking on different options for a single question by using the disabled attribute for option buttons. For bgRed and bgGreen we gave css in App.css, so focus on how classNames can be assigned after selecting any option(Here options is a buttons).
- If he clicks on the
This component will be responsible for displaying the option. And there is a div
with data-testid="option"
provided in the boilerplate.
- You need to create a
button
with textContent as an option of that question.
- Make sure you use only the given components and don't create new Components, files, or folders of your own. Changing the component name, and file/folder structures might result in giving you zero marks
- Do Not Remove
data-cy="xxxx"
from anywhere, these are used by testing tools to test your code, and removal of this will lead to low scores. - Also make sure to cross-check all the spellings and Cases of Texts.
- The system on cp.masaischool.com may take between 1-20 minutes for responding,
- so we request you to read the problem carefully and debug it before itself
- we also request you not to just submit it last minute
- try to keep one submission at a time