JavaScript-Quiz/main.js at main · danielveselinov/JavaScript-Quiz · GitHub

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
const API = `https://opentdb.com/api.php?amount=20`

// Menu's
const startGameMenu = document.getElementById('start_game')
const inGameMenu = document.getElementById('in_game')
const finishGameMenu = document.getElementById('finish_game')

// Buttons
const startGameBtn = document.getElementById('startGame')
const startOverBtn = document.getElementById('startOver')
const tryAgainBtn = document.getElementById('tryAgain')

// Div's
const answersDiv = document.getElementById('answers')
const resultsDiv = document.getElementById('result_score')
const loading = document.getElementById('loading')

// Points
const points = document.getElementById('counter_score')

// Counters
let counter = 0
let correct_points = 0
let qID = 0

startGameBtn.addEventListener('click', function(){
    startGameMenu.style.display = 'none'

    inGameMenu.style.display = 'block'
    resultsDiv.style.display = 'block'
    points.innerText = `Completed: 0/20`

    location.hash = "#question-0"
})

startOverBtn.addEventListener('click', function() {
    counter = correct_points = qID = 0
    localStorage.removeItem('correct_points')
    location.href = './index.html'
})

tryAgainBtn.addEventListener('click', function() {
    counter = correct_points = qID = 0
    localStorage.removeItem('correct_points')
    location.href = './index.html'
})

window.addEventListener('load', function() {
    setTimeout(() => {
        loading.style.display = 'none'

        document.getElementById('content').style.display = 'block'
    }, 2000);
})

window.addEventListener('hashchange', function(){
    for (let i = 0; i < 20; i++) {
        if (location.hash == `#question-${i}`) {
            getQuestions()
            qID++
            points.innerText = `Completed: ${i}/20`
        } else if (location.hash == '#question-20') {
            inGameMenu.style.display = 'none'
            answersDiv.style.display = 'none'

            finishGameMenu.style.display = 'block'
            points.innerText = `Total Correct Answers: ${localStorage.getItem('correct_points')}/20`
        }
    }
})

function getQuestions() {
    fetch(API)
    .then(function(data) {
        return data.json()
    })
    .then(function(data) {
        const arrData = data.results
        arrData.forEach(function(val, index) {
            if (val.type == 'boolean') {
                answersDiv.innerHTML = `<div class='card' data-aos="zoom-in">
                <div class='card-header'>${val.question}</div>
                    <div class='card-body d-flex justify-content-center'>
                        <a href='#question-${qID}' data-answer='a' class='answer btn btn-outline-secondary mx-2'>${val.correct_answer}</a>
                        <a href='#question-${qID}' data-answer='a-0' class='answer btn btn-outline-secondary mx-2'>${val.incorrect_answers}</a>
                    </div>
                    <div class='card-footer'>${val.category}</div>
                </div>`
            } else if (val.type == 'multiple') {
                answersDiv.innerHTML = `<div class='card' data-aos="zoom-in">
                <div class='card-header'>${val.question}</div>
                    <div class='card-body d-flex justify-content-between'>
                        <a href='#question-${qID}' data-answer='a-0' class='answer btn btn-outline-secondary mx-2'>${val.incorrect_answers[0]}</a>
                        <a href='#question-${qID}' data-answer='a' class='answer btn btn-outline-secondary mx-2'>${val.correct_answer}</a>
                        <a href='#question-${qID}' data-answer='a-0' class='answer btn btn-outline-secondary mx-2'>${val.incorrect_answers[1]}</a>
                        <a href='#question-${qID}' data-answer='a-0' class='answer btn btn-outline-secondary mx-2'>${val.incorrect_answers[2]}</a>
                    </div>
                    <div class='card-footer'>${val.category}</div>
                </div>`
            }

            document.querySelectorAll('.answer').forEach(element => {
                element.addEventListener('click', function(event) {
                    let correctAnswer = element.getAttribute('data-answer')

                    if (correctAnswer == 'a') {
                        correct_points++
                        localStorage.setItem('correct_points', correct_points)
                    }
                })
            })
         })
    })
    .catch(function(err) {
        resultsDiv.innerHTML = `<p>Error: ${err}</p>`
    })
}