🚀 React Quiz App

A dynamic and interactive quiz application built with React. Features real-time answer selection, smooth timer animation, result tracking, and a detailed summary page. Ideal for assessments, learning platforms, or trivia games.

✨ Features

• 📝 Interactive multiple-choice questions
• ⏱️ Live countdown timer with smooth animation
• ✅ Real-time answer tracking and validation
• 📊 Detailed summary of correct and incorrect answers
• ⚛️ Built using React functional components and hooks
• 🔄 Clean codebase with reusable components

📦 Installation

Install via npm:

npm install react-quizify-component

⚙️ Basic Usage

import React from 'react';
import QuizApp from 'react-quiz-app';

function App() {
  return <Quiz />;
}

📂 Using Custom Questions

To add your own quiz content, create a questions.js file in your project and export an array of question objects like this:

// questions.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 library for managing state in web applications.',
      '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.',
      'Part of the Redux library for managing global state.',
    ],
  },
  {
    id: 'q3',
    text: 'Can you identify what JSX is?',
    answers: [
      'A JavaScript extension that adds HTML-like syntax to JavaScript.',
      '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.',
    ],
  },
];

📌 Note:

• The first answer in the answers array is considered the correct answer.
• Each question must have a unique id.

✅ Import and Use in App:

import questions from './questions';

function App() {
  return <Quiz questions={questions} />;
}

🎯 Component API

<Question />

Displays a single question with options.

Props:

| Prop | Type | Description | |-------------------|----------|------------------------------------------| | question | object | Question text and answer options | | index | number | Current question index | | onSelectAnswer | func | Callback when answer is selected |

📈 Summary Page

At the end of the quiz, the summary includes:

• ✅ Number of correct answers
• ❌ Number of wrong answers
• ❌ Number of skipped answers
• 🧾 List of all questions, selected answers, and correct answers

Useful for review and performance insight.

🛠 Development Log

• ✅ Designed and implemented summary page with result breakdown
• ✅ Displayed correct and incorrect answer counts
• ✅ Returned a detailed list of user answers
• ✅ Refactored props structure for cleaner component interface
• ✅ Improved progress bar transition for smoother experience