Quizz-setup/setup.js at main · devJudicael/Quizz-setup · 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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157


    // un tableau d'objet pour contenir les différentes questions
var quizData = [

    {
        question: "Qui a été le premier president de la Côte d'Ivoire ?" ,
        a: "John Kenedy" ,
        b: "Toma Sankara" ,
        c: "Guei Robert" ,
        d: "Félix Houphouet Boigny",

        correct : "d",

    }   ,

    {
        question: "Quel est la date d'independance de la Côte d'Ivoire ?" ,
        a: "07 Août 1960" ,
        b: "11 Avril 2010" ,
        c: "01 janvier 1962" ,
        d: "07 Mars 1960",

        correct : "a",

    }   ,

    {
        question: "Quelle est la devise de la Côte d'Ivoire ?" ,
        a: "Liberté - Égalité - Fraternité" ,
        b: "Union - Respect - Travail" ,
        c: "Union - Discipline - Travail" ,
        d: "Liberté - Foi - Respect",

        correct : "c",

    }   ,

    {
        question: "À quelle date est décédé le président Henry Konan Bédié" ,
        a: "30 Juillet 2022" ,
        b: "30 Juillet 2023" ,
        c: "03 Août 2023" ,
        d: "01 Août 2023",

        correct : "d",

    }


]


var quiz = document.querySelector("#quiz") // la div quiz
var answers  = document.querySelectorAll(".answer") // les inputs
var question = document.querySelector("#question") // la question


        // les labels
var a_text = document.querySelector("#a_text")
var b_text = document.querySelector("#b_text")
var c_text = document.querySelector("#c_text")
var d_text = document.querySelector("#d_text")

var submit = document.querySelector("#submit")

var current = 0;
var score = 0;


// fonction pour insérer les différentes questions

function loadQuiz() {

    unselect()


    var currentQuiz = quizData[current] // obtenir l'indice du tableau

    // à partir de l'indice , insérer les différentes questions

    question.textContent = currentQuiz.question
    a_text.textContent = currentQuiz.a
    b_text.textContent = currentQuiz.b
    c_text.textContent = currentQuiz.c
    d_text.textContent = currentQuiz.d
}


loadQuiz()


    // fonction pour déselectionner tous les boutons radio
function unselect() {

    answers.forEach (answers =>{
        answers.checked=false
    })
}


// function qui vérifie si une réponse a été sélectionner afin de récupérer son id

function getSelected() {
    var reponse

    answers.forEach (answers =>{
        if (answers.checked) {
        reponse = answers.id
        }
    })

    return reponse
}


submit.addEventListener ("click" , ()=>{
    var reponse = getSelected() // recevoir l'id de la reponse cliquée

    if (reponse) {  // le submit est cliqué mais on vérifie aussi si une réponse a été émise

        if (reponse == quizData[current].correct) { // si reponse correct , incrementer l'indice du tableau et incrementer le score

            score ++
        }

        current ++


        if (current < quizData.length) { // si on est pas encore à la fin des questons du tableau , continuer d'appeler loadQuiz à chaque click
            loadQuiz()
        }

        else { // dans le cas où l'on se retrouve à la fin du tableau donc plus de question
           document.querySelector(".quiz-header").innerHTML = `Vous avez correctement repondu à <span style=" color: #008DDA; font-weight: bold; "> ${score}/${quizData.length}</span> questions`

           document.querySelector(".sub").style.display="block"
           submit.style.display="none"


           document.querySelector(".sub").addEventListener("click" , ()=>{
            location.reload()
           })


        }


    }
})