-
Notifications
You must be signed in to change notification settings - Fork 2
/
Quiz.js
58 lines (48 loc) · 1.93 KB
/
Quiz.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
import getData from "../../utils/data_helpers"
import React from "react"
import Timer from "./Timer"
export default function Quiz(props) {
const [jsonData, setJsonData] = React.useState(null)
const [index, setIndex] = React.useState(0);
const [timeLeft, setTimeLeft] = React.useState(15)
React.useEffect(() => {
getData().then(results => setJsonData(results))
}, []);
if (!jsonData) {
return <h3>...Loading</h3>;
}
const currentQuestion = jsonData.results[index]
const question = currentQuestion.question;
const correct_answer = currentQuestion.correct_answer;
const incorrect_answers = currentQuestion.incorrect_answers;
const choices = [correct_answer, ...incorrect_answers]
var shuffledChoices = choices.sort(() => Math.random() - 0.5)
function checkAnswer(event){
// if selected answer = correct answer
// then change background of button to green
// else if wrong background of button to red
if (event.target.textContent === correct_answer) {
event.target.className = "green";
setTimeLeft(timeLeft + 5);
props.setScore(props.score + 1)
} else {
event.target.className = "red";
setTimeLeft(timeLeft - 2);
}
}
return (
<main>
<Timer timeLeft={timeLeft} setTimeLeft={setTimeLeft} setGameState={props.setGameState}/>
{ index === 0 ? <h1>Whale hello there, {props.username}!</h1> : null }
<h2>{index + 1}.<span dangerouslySetInnerHTML={{__html: question}} /></h2>
{shuffledChoices.map(choice => (
<button onClick ={(event) =>{
checkAnswer(event)
setIndex(index + 1)
}
}>{choice}</button>
))}
<h2>SCORE:{props.score}</h2>
</main>
)
}