Code-Quiz/script.js at main · Johnson90cm/Code-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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
// start quiz button selector
var body = document.getElementById("document")
var buttonEl = document.querySelector("#start-quiz")
// // create quiz question buttons
var questionItemEl = document.createElement("button")
// // holds questions
var titleQuestion = document.createElement("h2")
// holds questions list
var quizListQuestionsEl = document.getElementById("quiz-list-questions")
// holds timer span
var quizTimer = document.getElementById("timer")
// holds highscore eL
var highScoreEl = document.getElementById("highscore")
var saveButtonEl = document.getElementById("save")
var userDivEl = document.getElementById("user-div")
var highscoreButtonEl = document.getElementById("highscore")

var timer = 59
var score = 0
var questionIndex = 0

// questions index
var questions = [
    {
        question: "CSS stands for ____ Style Sheets",
        choices: ["cascading", "concept", "curious", "concave"],
        answer: "cascading"
    },
    {
        question: "What is the value called that defines colors such as the following: #FFFF00?",
        choices: ["color value", "hex value", "rgb value", "decimal value"],
        answer: "hex value"
    },
    {
        question: "What tag is used to define the bottom section (footer) of an HTML document?",
        choices: ["<button>", "<h1>", "<footer>", "<body>"],
        answer: "<footer>"
    },
]


// button click to start the quiz
buttonEl.addEventListener("click", createQuiz)

// function to start quiz
function createQuiz() {
    buttonEl.remove()
    document.getElementById("user-div").style.visibility = "hidden"
    countdown()
    loadQuestions(questionIndex)
}

function loadQuestions(questionIndex) {

    quizListQuestionsEl.innerHTML = "";

    for (i = 0; i < questions.length; i++) {

        var newQuestion = questions[questionIndex].question;
        var newChoices = questions[questionIndex].choices;

        quizListQuestionsEl.textContent = newQuestion;

        newChoices.forEach(function (newChoices) {
            var listItem = document.createElement("button");
            listItem.classList = ("btn btn-primary btn-lg")
            listItem.textContent = newChoices;
            quizListQuestionsEl.appendChild(listItem)
            listItem.addEventListener("click", (compare));
        })

    }
}

function compare(event) {
    var element = event.target;

    questionIndex++

    if (element.textContent == questions[0].answer) {
        score = score + 5;
        console.log("correct")
    } else if (element.textContent == questions[1].answer) {
        score = score + 5;
        console.log("correct")
    } else if (element.textContent == questions[2].answer) {
        score = score + 5;
        console.log("correct")
    } else {
        score = score - 5;
        console.log("incorrect")
    }

    if (questionIndex >= questions.length) {
        quizListQuestionsEl.textContent = "Quiz Complete! " + user.value + " Score is " + score
        completed();
    } else {
        loadQuestions(questionIndex);
    }
}

function completed() {

    user = document.querySelector('#user').value
    localStorage.setItem(user, JSON.stringify(score))

    document.getElementById("timecounter").style.visibility = "hidden"
    highscoreButtonEl.removeAttribute("hidden")
}

// function to start timer
function countdown() {
    var timeInterval = setInterval(function () {
        if (timer < 1) {
            quizTimer.textContent = ("Times Up")
            clearInterval(timeInterval);
        }
        else {
            quizTimer.textContent = timer + ' seconds left'
            timer--
        }
    }, 1000);
}

highScoreEl.addEventListener("click", loadScores)

function loadScores() {

    body.innerHTML = ""
    document.getElementById("highscore").style.visibility = "hidden"

    localStorage.getItem(user, JSON.parse(score))
    for (i = 0; i < user.length; i++) {
        body.innerHTML = user + " score = " + score
    };
};