How to make quiz app in React Js

1. Create application using cmd command
2. Create header and quiz component
3. Create json or js question sample file
4. Create CSS file for design
5. Run Application

Create application -:

Using the cmd command create a new application

npx create-react-app quiz
cd quiz

Create component -:

Create header component for heading and image

export default function Header(){
    return <>
    <img src='https://blogshub.co.in/wp-content/uploads/2021/07/logo-1.png'/>
    <h3>Quize - BlogsHub</h3>
    </>
}

Create quiz component:

Import question list and initialize state for manage the question answers

import QUESTIONSLIST from './QuestionsList'
export default function Quiz() {
    const [userAnswer, setUserAnswer] = useState([]);
    const activeQuestionIndex = userAnswer.length;

Create a function for handle current question on click event

    function handleSelectedAnswer(selectedAnswer){
        setUserAnswer((prevans) => {
            return [...prevans, selectedAnswer];
        });
    }

Assign a const for checking quiz is completed

const isQuizComplete = activeQuestionIndex === QUESTIONSLIST.length;
  if(isQuizComplete){
        return <div id="summary">
            <h1>Quiz Completed...</h1>

        </div>
    }

Import header and quiz component in app.js

import Header from './components/Header'
import Quiz from './components/Quiz';

 <Header/>
      <main>
        <Quiz/>
      </main>

Complete Code

app.js

import Header from './components/Header'
import Quiz from './components/Quiz';

function App() {
  return (
    <div className="App">
      <Header/>
      <main>
        <Quiz/>
      </main>
    </div>
  );
}

export default App;

Header.js

export default function Header(){
    return <>
    <img src='https://blogshub.co.in/wp-content/uploads/2021/07/logo-1.png'/>
    <h3>Quize - BlogsHub</h3>
    </>
}

Quiz.jsx

import { useState } from 'react'
import QUESTIONSLIST from './QuestionsList'

export default function Quiz() {
    const [userAnswer, setUserAnswer] = useState([]);
    const activeQuestionIndex = userAnswer.length;

    const isQuizComplete = activeQuestionIndex === QUESTIONSLIST.length;

    function handleSelectedAnswer(selectedAnswer){
        setUserAnswer((prevans) => {
            return [...prevans, selectedAnswer];
        });
    }

    if(isQuizComplete){
        return <div id="summary">
            <h1>Quiz Completed...</h1>

        </div>
    }

    const shuffleAnswers = [...QUESTIONSLIST[activeQuestionIndex].answers];
    shuffleAnswers.sort(() => Math.random() - 0.5);

    return <>
    <div id="quiz">
         <h4>Select Answers</h4>
    <div id="question">
        <h3>{QUESTIONSLIST[activeQuestionIndex].text}</h3>
        <ul id="answer">
            {/* {QUESTIONSLIST[activeQuestionIndex].answers.map((answer)=>( */}
            {shuffleAnswers.map((answer)=>(
                <li key={answer} className='answer'>
                    <button onClick={() => handleSelectedAnswer(answer)}>{answer}</button>
                </li>
            ))}
        </ul>
    </div>
    </div>
   
    </>
}

QuestionsList.js

export default [
    {
      id: 'q1',
      text: 'Which of the following definitions best describes React.js?',
      answers: [
        'A library to build user interfaces with help of declarative code.',
        'A framework to build user interfaces with help of imperative code.',
        'A library used for building mobile applications only.',
      ],
    },
    {
      id: 'q2',
      text: 'What purpose do React hooks serve?',
      answers: [
        'Enabling the use of state and other React features in functional components.',
        'Creating responsive layouts in React applications.',
        'Handling errors within the application.',
      ],
    },
    {
      id: 'q3',
      text: 'Can you identify what JSX is?',
      answers: [
        'A JavaScript library for building dynamic user interfaces.',
        'A specific HTML version that was explicitly created for React.',
        'A tool for making HTTP requests in a React application.',
      ],
    },
    {
      id: 'q4',
      text: 'What is the most common way to create a component in React?',
      answers: [
        'By defining a JavaScript function that returns a renderable value.',
        'By defining a custom HTML tag in JavaScript.',
        'By using the "new" keyword followed by the component name.',
      ],
    },
    {
      id: 'q5',
      text: 'What does the term "React state" imply?',
      answers: [
        'The lifecycle phase a React component is in.',
        'The overall status of a React application, including all props and components.',
        'A library for managing global state in React applications.',
      ],
    },
    {
      id: 'q6',
      text: 'How do you typically render list content in React apps?',
      answers: [
        'By using the map() method to iterate over an array of data and returning JSX.',
        'By using the for() loop to iterate over an array of data and returning JSX.',
        'By using the loop() method to iterate over an array of data and returning JSX.',
      ],
    },
    {
      id: 'q7',
      text: 'Which approach can NOT be used to render content conditionally?',
      answers: [
        'Using a the #if template syntax.',
        'Using a ternary operator.',
        'Using an if-else statement.',
      ],
    },
  ];

index.css

html {
  font-family: 'Roboto', sans-serif;
  line-height: 1.5;
  color: #e8e7ef;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  margin: 0;
  padding: 2rem;
  background-color: #040633;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}


#quiz {
  max-width: 50rem;
  margin: auto;
  padding: 2rem;
  background: linear-gradient(180deg, #3e2a60 0%, #321061 100%);
  border-radius: 8px;
  box-shadow: 1px 1px 8px 4px rgba(12, 5, 32, 0.6);
  text-align: center;
}

#question-overview {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 0.8rem;
  color: #9082a3;
  margin: 0;
  text-transform: uppercase;
}

#answers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.answer {
  width: 90%;
  margin: 0 auto;
}

.answer button {
  display: inline-block;
  width: 100%;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 0.9rem;
  padding: 1rem 2rem;
  border: none;
  border-radius: 24px;
  color: #fff;
  background: #000;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.answer button:hover,
.answer button:focus {
  background: #9d5af5;
  color: white;
}

.answer button.selected {
  background: #f5a76c;
  color: #2c203d;
}

.answer button.correct {
  background: #5af59d;
  color: #2c203d;
}

.answer button.wrong {
  background: #f55a98;
  color: #2c203d;
}

#summary {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 2rem;
  background: linear-gradient(180deg, #a17eda 0%, #895fc4 100%);
  color: #191321;
  border-radius: 8px;
  box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.6);
  animation: slide-in-from-bottom 0.7s ease-out;
}

#summary img {
  display: block;
  width: 8rem;
  height: 8rem;
  object-fit: contain;
  margin: 0 auto 1rem auto;
  padding: 1rem;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.6));
  border: 2px solid #3a2353;
  border-radius: 50%;
  background: #c18cfa;
}

#summary h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 3rem;
  text-align: center;
  margin: 0;
  text-transform: uppercase;
  color: #3a2353;
}

#summary ol {
  list-style: none;
  margin: 2rem auto;
  padding: 0;
  text-align: center;
}

#summary li {
  margin: 2rem 0;
}

#summary h3 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #2c203d;
  color: #d8cde8;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
}

#summary .question {
  margin: 0.25rem 0;
  font-size: 1rem;
  color: #30273a;
}

#summary .user-answer {
  margin: 0.25rem 0;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: bold;
  color: #251e2f;
}

#summary .user-answer.correct {
  color: #054e37;
}

#summary .user-answer.wrong {
  color: #730b4b;
}

#summary .user-answer.skipped {
  color: #d1baf2;
  font-weight: normal;
}

#summary-stats {
  display: flex;
  gap: 3rem;
  width: 60%;
  margin: 2rem auto;
  padding-bottom: 2rem;
  border-bottom: 2px solid #594276;
}

#summary-stats p {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
}

#summary-stats .number {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 3rem;
  color: #594276;
}

#summary-stats .text {
  font-family: 'Roboto Condensed', sans-serif;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: #30273a;
  margin-top: -0.7rem;
  margin-left: 0.2rem;
  letter-spacing: 0.1rem;
}
ul {
  list-style: none;
}
li {
  padding: 0px 10px;
  padding-top: 11px;
  min-height: 38px;
  display: -moz-inline-stack;
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  color: #fff;
  vertical-align:middle;
  cursor:pointer;
  zoom: 1;
  *display: inline;
  _height: 38px;
}


img {
  width:150px;
}

Run applicatin

npm start

Output:

Keep Learning 🙂