TypeScript is an open-source programming language, developed and maintained by Microsoft. It is a strongly typed language that builds on javascript. It is usually used in large-scale projects. It follows javascript syntax and adds more features to it.
ReactJS is an open-source Javascript library specially used to design UI(user interfaces) majorly single-page applications. Having a large developer community it is widely used for making single-page applications.
A simple Quiz App that contains a set of curated questions and their answers and checks for the correctness of the answer given by the user. It navigates through the questions using dynamic programming. A quiz can be used as a method of assessment in education and other similar fields to measure knowledge or skills.
In this article, we will learn how to build a quiz app using ReactJS and Typescript.
Modules required:
- npm
- React
- React Bootstrap
- Typescript
Basic Setup:
Step 1: Run the following commands to create a new React project using the create-react-app package:
npx create-react-app quiz-app --template typescript
Step 2: Change the directory to the project root directory:
cd quiz-app
Step 3: Change directory to src:
cd src
Step 4: Delete everything inside the directory
rm *
Step 5: Now will create a components directory in the src folder and Question.tsx and Quiz.tsx files in it.
mkdir components && cd components && touch Question.tsx touch Quiz.tsx
Step 6: Now we will go to the src directory using these commands:
cd ..
Step 7: The src directory will create an index.tsx, App.tsx, and index.css using the following commands:
touch index.tsx && touch index.css && touch App.tsx
Project Structure: The project structure will be as follows:
Start the server using the following command:
npm start
Example 1:
- src/index.tsx file:
Javascript
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( <React.StrictMode> <App /> </React.StrictMode> ); |
- src/components/Question.tsx: This component will be responsible for displaying each question.
Javascript
import React from 'react'; interface Props { question: string; choices: string[]; answer: string; onAnswer: (answer: string) => void; } const Question: React.FC<Props> = ( { question, choices, answer, onAnswer }) => { return ( <div className="d-flex justify-content-center align-center text-center flex-column"> <h2 className="">{question}</h2> <div className=""> {choices.map((choice) => ( <button className="btn btn-success m-2" onClick={() => onAnswer(choice)}> {choice}</button> ))} </div> </div> ); }; export default Question; |
- src/components/Quiz.tsx: This file will be the component responsible for managing the quiz and displaying the questions.
Javascript
import React, { useState } from 'react'; import Question from './Question'; const questions = [ { question: 'What is the capital of France?', choices: ['Paris', 'London', 'New York'], answer: 'Paris', }, { question: 'What is the largest planet in our solar system?', choices: ['Mars', 'Jupiter', 'Venus'], answer: 'Jupiter', }, { question: 'What is the boiling point of water?', choices: ['100°C', '0°C', '50°C'], answer: '100°C', }, { question: 'What is the largest planet in our solar system?', choices: ['Mars', 'Jupiter', 'Venus'], answer: 'Jupiter', }, { question: 'What is the boiling point of water?', choices: ['100°C', '0°C', '50°C'], answer: '100°C', }, ]; const Quiz: React.FC = () => { const [currentQuestion, setCurrentQuestion] = useState(0); const [score, setScore] = useState(0); const handleAnswer = (answer: string) => { if (answer === questions[currentQuestion].answer) { setScore(score + 1); } const nextQuestion = currentQuestion + 1; if (nextQuestion < questions.length) { setCurrentQuestion(nextQuestion); } else { alert(`Quiz finished. You scored ${score}/${questions.length}`); } }; return ( <div> <h1 className="text-center">Quiz App</h1> {currentQuestion < questions.length ? ( <Question question={questions[currentQuestion].question} choices={questions[currentQuestion].choices} answer={questions[currentQuestion].answer} onAnswer={handleAnswer} /> ) : "null" } </div> ) } export default Quiz; |
- src/App.tsx: As we are done with implementing all the components in the project, let us now import them into the App.tsx to see them in action.
Javascript
import Quiz from "./components/Quiz"; import 'bootstrap/dist/css/bootstrap.min.css'; function App() { return ( <div className="container my-5"> <Quiz /> </div> ); } export default App; |
Output:
How to build a Quiz App with React and TypeScript
