-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
81 lines (67 loc) · 2.43 KB
/
script.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
//INITIAL DATA
let currentQuestion = 0
let correctAnswers = 0
showQuestion()
//EVENTS
document
.querySelector('.scoreArea button')
.addEventListener('click', resetEvent)
//FUNCTIONS
function showQuestion() {
if (questions[currentQuestion]) {
let q = questions[currentQuestion]
let pct = Math.floor((currentQuestion / questions.length) * 100)
document.querySelector('.progress--bar').style.width = `${pct}%`
document.querySelector('.scoreArea').style.display = 'none'
document.querySelector('.questionArea').style.display = 'block'
document.querySelector('.question').innerHTML = q.question
document.querySelector('.options').innerHTML = ''
let optionsHtml = ''
for (let i in q.options) {
optionsHtml += `
<div data-op="${i}" class="option">
<span>${parseInt(i) + 1}</span>
${q.options[i]}
</div>`
}
document.querySelector('.options').innerHTML = optionsHtml
document.querySelectorAll('.options .option').forEach(item => {
item.addEventListener('click', optionClickEvent)
})
} else {
finishQuiz()
}
}
function optionClickEvent(e) {
let clickedOption = parseInt(e.target.getAttribute('data-op'))
if (questions[currentQuestion].answer === clickedOption) {
correctAnswers++
}
currentQuestion++
showQuestion()
}
function finishQuiz() {
let points = Math.floor((correctAnswers / questions.length) * 100)
if (points < 30) {
document.querySelector('.scoreText1').innerHTML = `Tá ruim hein ?!`
document.querySelector('.scorePct').style.color = '#ff0000'
} else if (points >= 30 && points < 70) {
document.querySelector('.scoreText1').innerHTML = `Muito bom !`
document.querySelector('.scorePct').style.color = '#ffff00'
} else if (points > 70) {
document.querySelector('.scoreText1').innerHTML = `Parabéns !!`
document.querySelector('.scorePct').style.color = '#0d630d'
}
document.querySelector('.scorePct').innerHTML = `Acertou ${points}%`
document.querySelector(
'.scoreText2',
).innerHTML = `Você respondeu ${questions.length} e acertou ${correctAnswers}`
document.querySelector('.scoreArea').style.display = 'block'
document.querySelector('.questionArea').style.display = 'none'
document.querySelector('.progress--bar').style.width = `100%`
}
function resetEvent() {
correctAnswers = 0
currentQuestion = 0
showQuestion()
}