Scribd
Upload
18 views

Lab 4

Uploaded by

pt0832a
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views

Lab 4

Uploaded by

pt0832a
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Lab 4: About all Hooks

Building a ReactJS application with a user interface that requires the user to input a list of questions and
answer options for each question. Display the questions and answer options to the user and check
whether the user has selected the correct or incorrect answer.

Continue using the same user interface as in Lab 3. However, apply it using Hooks.

1. Design the Quiz Component

 Import React and the necessary Hooks from the 'react' package.
 Create the Quiz component and set up the initial state using the useState Hook.
 Define the quiz questions and answer options as an array of objects.

export const quizData = [


{
question: 'What is ReactJS?',
answers: ['A JavaScript library for building user interfaces', 'A
programming language', 'A database management system'],
correctAnswer: 'A JavaScript library for building user interfaces'
},
{
question: 'What is JSX?',
answers: ['A programming language', 'A file format', 'A syntax extension
for JavaScript'],
correctAnswer: 'A syntax extension for JavaScript'
}
];

2. Implement the user input functionality

 Use the useState Hook to manage the user's input for each question and answer option.
 Create input fields or components for the user to enter the questions and answer options.
 Update the state with the user's input using the useState Hook.

3. Display the questions and answer options

 Use the useEffect Hook to display the questions and answer options from the state.
 Render the questions and answer options in the UI using JSX.

4. Check the selected answer

 Use the useContext Hook to access the selected answer from the state.
 Compare the selected answer with the correct answer for each question.
 Display whether the selected answer is correct or incorrect in the UI

Page 1
Page 2

You might also like