JavaScript Quiz
Get a brief explanation of how the JavaScript Quiz app will function.
There will be 10 multiple-choice questions, each with three options.
Overview
This JavaScript Quiz app will put a user’s knowledge of JavaScript principles to the test. All questions will be imported from a QuestionData.js file and displayed on the screen, alongside answer options for each. Finally, we’ll use a third-party confetti npm package to show animated confetti if the user gets a good score.
This is how our final app will look. Feel free to experiment with it and explore the app’s features.
import React from "react";
import Confetti from "react-confetti";
const Result = ({ score, questions, restartHandler }) => {
const showConfetti = score > 7 ? <Confetti /> : null;
return (
<React.Fragment>
{showConfetti}
<div className="finalScore">
You scored {score} out of {questions.length}
</div>
<button onClick={restartHandler} className="restart">
RESTART{" "}
</button>
</React.Fragment>
);
};
export default Result;
Because all responses are unique, we won’t use nanoid to generate the unique id key this time. Instead, we’ll use the answer text as a key. We’ll also include functions to restart the quiz and check the correct option, such as restartHandler and handleAnswerClick. This quiz isn’t restricted to JavaScript. We can use any topic and include many questions.