NLW-quiz-JavaScript/index.js at main · aliccestari/NLW-quiz-JavaScript · 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
const perguntas = [
    {
      pergunta: "Qual é a maneira correta de declarar uma variável em JavaScript?",
      respostas: [
        "var myVar;",
        "let myVar;",
        "const myVar;",
      ],
      correta: 1
    },
    {
      pergunta: "Qual método é usado para imprimir algo no console em JavaScript?",
      respostas: [
        "log()",
        "print()",
        "console.log()",
      ],
      correta: 2
    },
    {
      pergunta: "Qual destes é um operador de comparação em JavaScript?",
      respostas: [
        "==",
        "===",
        "&=",
      ],
      correta: 1
    },
    {
      pergunta: "Qual é a função de `typeof` em JavaScript?",
      respostas: [
        "Para verificar o tipo de dados de uma variável.",
        "Para atribuir um tipo de dados a uma variável.",
        "Para converter uma variável para um tipo de dados específico.",
      ],
      correta: 0
    },
    {
      pergunta: "O que o método `addEventListener` faz em JavaScript?",
      respostas: [
        "Remove um evento de um elemento HTML.",
        "Adiciona um evento a um elemento HTML.",
        "Altera o estilo de um elemento HTML.",
      ],
      correta: 1
    },
    {
      pergunta: "Qual é o operador de atribuição em JavaScript?",
      respostas: [
        "=",
        "==",
        ":=",
      ],
      correta: 0
    },
    {
      pergunta: "Qual função é usada para converter uma string em um número inteiro em JavaScript?",
      respostas: [
        "parseInt()",
        "toFloat()",
        "parseInteger()",
      ],
      correta: 0
    },
    {
      pergunta: "O que o método `push()` faz em JavaScript?",
      respostas: [
        "Remove o último elemento de um array.",
        "Adiciona um elemento ao início de um array.",
        "Adiciona um elemento ao final de um array.",
      ],
      correta: 2
    },
    {
      pergunta: "Qual é a função do operador `&&` em JavaScript?",
      respostas: [
        "Operador de concatenação de strings.",
        "Operador de comparação de igualdade estrita.",
        "Operador lógico de 'E' (AND).",
      ],
      correta: 2
    },
    {
      pergunta: "Qual método é usado para remover o último elemento de um array em JavaScript?",
      respostas: [
        "pop()",
        "shift()",
        "splice()",
      ],
      correta: 0
    },
  ];

  const quiz = document.querySelector('#quiz')

  const template = document.querySelector('template')

  const corretas = new Set()

  const totalDePerguntas = perguntas.length

  const mostrarTotal = document.querySelector('#acertos span')

  mostrarTotal.textContent = corretas.size + ' de ' + totalDePerguntas

  for(const item of perguntas){
    const quizItem = template.content.cloneNode(true)
    quizItem.querySelector('h3').textContent = item.pergunta
    for(let resposta of item.respostas){
        const dt = quizItem.querySelector('dl dt').cloneNode(true)
        dt.querySelector('span').textContent = resposta
        dt.querySelector('input').setAttribute('name', 'pergunta-' + perguntas.indexOf(item))
        dt.querySelector('input').value = item.respostas.indexOf(resposta)
        dt.querySelector('input').onchange = (event) =>
        {
          const estaCorreta = event.target.value == item.correta
          corretas.delete(item)
          if(estaCorreta)
          {
            corretas.add(item)
          }
          mostrarTotal.textContent = corretas.size + ' de ' + totalDePerguntas
        }
        quizItem.querySelector('dl').appendChild(dt)
    }
   quizItem.querySelector('dl dt').remove()
   quiz.appendChild(quizItem)
  }