-
Notifications
You must be signed in to change notification settings - Fork 1
/
App.js
128 lines (111 loc) · 4.51 KB
/
App.js
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
import React from "react"
import Start from "./Start"
import QandA from "./QandA"
export default function App() {
const [tokData, setTokData] = React.useState(null)
const [qData, setQData] = React.useState([])
const [randomOrder, setRandomOrder] = React.useState([])
const [selectedAnswers, setSelectedAnswers] = React.useState([{}, {}, {}, {}, {}])
const [submitted, setSubmitted] = React.useState([])
const [showQuiz, setShowQuiz] = React.useState('start')
const [qAndAComponents, setQAndAComponents] = React.useState([])
function fetchQuestions(token) {
fetch(`https://opentdb.com/api.php?amount=5&type=multiple&token=${token}`)
.then(response => response.json())
.then(data => {
setQData(data.results)
})
.catch(error => {
console.error('Error fetching data:', error)
})
}
React.useEffect(() => {
fetch('https://opentdb.com/api_token.php?command=request')
.then(tokResponse => tokResponse.json())
.then(tokenData => {
setTokData(tokenData.token)
fetchQuestions(tokenData.token)
})
.catch(error => {
console.error('Error fetching data:', error)
})
}, [])
function handleSelection(answer, index) {
setSelectedAnswers(prevAnswers => {
const updatedAnswers = [...prevAnswers]
updatedAnswers[index] = {
answer: answer,
isCorrect: null
}
return updatedAnswers
})
}
function gradeAnswers(event) {
event.preventDefault()
const updatedAnswers = selectedAnswers.map((answerObj, index) => ({
...answerObj,
isCorrect: answerObj.answer === qData[index].correct_answer
}))
setSelectedAnswers(updatedAnswers)
setSubmitted(updatedAnswers)
setShowQuiz('show-results')
}
function restartGame(event) {
event.preventDefault()
fetchQuestions(tokData)
}
React.useEffect(() => {
if (qData) {
const randOrder = qData.map((qAObj, index) => {
//Insert correct answer at random location in 'const answersArr'
const answersArr = [...qAObj.incorrect_answers]
const randomIndex = Math.floor(Math.random()*(answersArr.length + 1))
answersArr.splice(randomIndex, 0, qAObj.correct_answer)
return answersArr
})
setRandomOrder(randOrder)
}
}, [qData])
React.useEffect(() => {
if (qData) {
const qAndAComps = qData.map((qAObj, index) => {
return (
<QandA
key={index}
question={qAObj.question}
correct={qAObj.correct_answer}
wrong={qAObj.incorrect_answers}
answers={randomOrder[index]}
ident={index}
handleSelection={handleSelection}
submitted={submitted[index]}
/>
)
})
setQAndAComponents(qAndAComps)
}
}, [randomOrder, submitted])
return (
<div>
{showQuiz === 'start' && <Start handleClick={() => setShowQuiz('show-quiz')}/>}
<div className="quiz-container">
<form className="quiz-form">
{showQuiz === 'show-quiz' || showQuiz === 'show-results' ? qAndAComponents : null}
{showQuiz === 'show-quiz' &&
<button
className="submit-btn"
onClick={(event) => gradeAnswers(event)}
>Submit</button>}
{showQuiz === 'show-results' &&
<button
className="restart-game"
>Restart Game</button>}
</form>
</div>
</div>
)
}
// compare selectedAnswers with qData.correct_answer
// if match return true graded = [t, f, t, t, f]
// add styles (green) on correct answers
// add styles (red) to selectedAnswers with f