Repository navigation
Expand file tree
/
Copy pathApp.tsx
More file actions
126 lines (115 loc) · 3.75 KB
/
Copy pathApp.tsx
File metadata and controls
126 lines (115 loc) · 3.75 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import React, { useState } from "react";
import { fetchQuestions, Difficulty, QuestionState } from "./api/API";
import Question from "./components/Question";
const TOTAL_QUESTION = 15;
export interface UserAnswer {
question: string;
answer: string;
isCorrect: boolean;
correctAnswer: string;
}
const App = () => {
const [loading, setLoading] = useState(true);
const [questions, setQuestions] = useState<QuestionState[]>([]);
const [quesNumber, setQuesNumber] = useState(0);
const [userAnswer, setUserAnswer] = useState<UserAnswer[]>([]);
const [score, setScore] = useState(0);
const [gameOver, setGameOver] = useState(true);
const [isClicked, setIsClicked] = useState(false);
const startQuiz = async () => {
setLoading(true);
setGameOver(false);
try {
const newQuestions = await fetchQuestions(
TOTAL_QUESTION,
Difficulty.EASY
);
setQuestions(newQuestions);
} catch (error) {
console.log(error);
}
setScore(0);
setUserAnswer([]);
setQuesNumber(0);
setLoading(false);
};
const checkAnswer = (evt: React.MouseEvent<HTMLButtonElement>) => {
if (!gameOver) {
const answer = evt.currentTarget.value;
const correctAns = questions[quesNumber].correct_answer === answer;
if (correctAns) {
setScore((previous_score) => previous_score + 1);
}
const userAns = {
question: questions[quesNumber].question,
answer: answer,
isCorrect: correctAns,
correctAnswer: questions[quesNumber].correct_answer,
};
setUserAnswer((previous) => [...previous, userAns]);
setIsClicked(true);
}
};
const nextQuestion = () => {
setIsClicked(false);
const nextQuestionNumber = quesNumber + 1;
if (nextQuestionNumber === TOTAL_QUESTION) {
setGameOver(true);
} else {
setQuesNumber(nextQuestionNumber);
}
};
return (
<div className="bg-gray-100 w-10/12 md:w-2/4 h-full p-4 my-4 m-auto shadow-sm rounded-sm">
<header>
<h1 className="font-bold text-2xl text-center uppercase text-gray-800">
Pop Quiz
</h1>
{gameOver || userAnswer.length === TOTAL_QUESTION ? (
<button
onClick={startQuiz}
className="btn bg-purple-600 text-purple-100 border-purple-200 focus:shadow-outline hover:bg-purple-400 hover:text-purple-700 transform hover:translate-y-1"
>
Start Quiz
</button>
) : null}
{!gameOver ? (
<p className="bg-blue-100 p-4 my-4 text-blue-700 font-bold tracking-widest rounded-lg">
Score: {score}
</p>
) : null}
</header>
<main>
{loading ? (
<p className="tracking-widest animate-pulse text-gray-700">
Loading question...
</p>
) : null}
{!loading && !gameOver ? (
<Question
questionNumber={quesNumber + 1}
totalQuestions={TOTAL_QUESTION}
question={questions[quesNumber].question}
answers={questions[quesNumber].answers}
userAnswer={userAnswer[quesNumber]}
correctAnswer={questions[quesNumber].correct_answer}
giveAnswer={isClicked}
handleCheckAnswer={checkAnswer}
/>
) : null}
{!gameOver &&
!loading &&
userAnswer.length === quesNumber + 1 &&
quesNumber !== TOTAL_QUESTION - 1 ? (
<button
className="btn bg-indigo-700 text-indigo-100 border-indigo-200 focus:shadow-outline hover:bg-indigo-400 hover:text-indigo-700 transform hover:translate-y-1"
onClick={nextQuestion}
>
Next Question
</button>
) : null}
</main>
</div>
);
};
export default App;