Scribd
Upload
32 views3 pages

Simple Quiz App App - Js at Master Josephkagimu1 Simple Quiz App GitHub

This document contains the source code for a simple quiz app built with React. It defines an App component with state to track the current question, score, and whether the quiz has finished. An array of questions is defined with text and multiple choice options. Clicking an option updates the score and advances the question, or ends the quiz. A restart function resets the state to restart the quiz. The component renders either the quiz or final results based on state.

Uploaded by

Sagar Chaudhari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
32 views3 pages

Simple Quiz App App - Js at Master Josephkagimu1 Simple Quiz App GitHub

This document contains the source code for a simple quiz app built with React. It defines an App component with state to track the current question, score, and whether the quiz has finished. An array of questions is defined with text and multiple choice options. Clicking an option updates the score and advances the question, or ends the quiz. A restart function resets the state to restart the quiz. The component renders either the quiz or final results based on state.

Uploaded by

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

Josephkagimu1 / Simple-Quiz-app Public

Code Issues Pull requests Actions Projects Security

master

Simple-Quiz-app / src / App.js

Josephkagimu1 correction

1 contributor

95 lines (82 sloc) 2.48 KB

1 import { useState } from 'react';


2 import './App.css';
3
4 function App() {
5 const [currentQuestion, setCurrentQuestion] = useState(0);
6 const [score, setScore] = useState(0);
7 const [finalResult, setFinalResult] = useState(false);
8
9 const questions = [
10 {
11 text: "what is capital city of America ?",
12 options: [
13 { id: 1, text: "washington DC", isTrue: true },
14 { id: 2, text: "jaman", isTrue: false },
15 { id: 3, text: "Dubai", isTrue: false },
16 { id: 4, text: "Nairobi", isTrue: false }
17 ]
18 },
19
20 {
21 text: "what is capital city of Uganda ?",
22 options: [
23 { id: 1, text: "Nairobi", isTrue: false },
24 { id: 2, text: "jaman", isTrue: false },
25 { id: 3, text: "Dubai", isTrue: false },
26 { id: 4, text: "Kampala", isTrue: true }
:
27 ]
28 },
29
30 {
31 text: "what is capital city of Kenya ?",
32 options: [
33 { id: 1, text: "washington DC", isTrue: false },
34 { id: 2, text: "Nairobi", isTrue: true },
35 { id: 3, text: "Dubai", isTrue: false },
36 { id: 4, text: "texus", isTrue: false }
37 ]
38 },
39
40 {
41 text: "what is capital city of China ?",
42 options: [
43 { id: 1, text: "Beijing", isTrue: true },
44 { id: 2, text: "jamaica", isTrue: false },
45 { id: 3, text: "Dubai", isTrue: false },
46 { id: 4, text: "has no", isTrue: false }
47 ]
48 }
49 ];
50
51 const optionClicked = (isTrue) => {
52 if (isTrue) {
53 setScore(score + 1);
54 }
55
56 if (currentQuestion + 1 < questions.length) {
57 setCurrentQuestion(currentQuestion + 1)
58 } else {
59 setFinalResult(true);
60 }
61 }
62
63 const restart = () => {
64 setFinalResult(false);
65 setCurrentQuestion(0);
66 setScore(0);
67 }
68
69 return (
70 <div className="App">
71 <h1>React Quiz App</h1>
:
72
73 {finalResult ? (
74 <div className='final-result'>
75 <h2>FinalResult</h2>
76 <h1>You got {score} out of {questions.length} <hr /> ({(score / questions
77 <button onClick={restart} className='restart-btn'> Restart game </
78 </div>
79 ) : (
80 <div className='quiz-container'>
81 <h4> question {currentQuestion} out of {questions.length} </h4>
82 <h2>{questions[currentQuestion].text}</h2>
83
84 <ul>
85 {questions[currentQuestion].options.map((option) =>
86 <li onClick={() => optionClicked(option.isTrue)}> {option.text
87 </ul>
88 </div>
89 )}
90
91 </div>
92 );
93 }
94
95 export default App;
:

You might also like