questionario_lotr_nlw/index.js at main · IsabeleBarros/questionario_lotr_nlw · 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
const perguntas = [
    {
        pergunta: "Quam escreveu o livro O Senhor dos Anéis?",
        respostas: [
            "C.S. Lewis",
            "H. G. Hells",
            "J.R.R. Tolkien",
        ],
        correta: 2
    },
    {
        pergunta: "Quantos livros compõe a série?",
        respostas: [
            "3 livros",
            "1 livro",
            "6 livros",
        ],
        correta: 2
    },
    {
        pergunta: "Quem matou Gandalf?",
        respostas: [
            "Sauron",
            "Saruman",
            "Balrog",
        ],
        correta: 2
    },
    {
        pergunta: "Quem foi amigo de Frodo Bolseiro em sua caminhada para a Terra Sombria?",
        respostas: [
            "Pippin",
            "Aragorn",
            "Samwise Gamgee",
        ],
        correta: 2
    },
    {
        pergunta: "Qual o nome da criatura que foi dominado pelo Um Anel?",
        respostas: [
            "Smaug",
            "Galadriel",
            "Gollum",
        ],
        correta: 2
    },
    {
        pergunta: "Qual o nome do Elfo que fez parte da Sociedade do Anel?",
        respostas: [
            "Elrond",
            "Thranduil",
            "Legolas",
        ],
        correta: 2
    },
    {
        pergunta: "Quantos aneis foram dado aos homens?",
        respostas: [
            "9",
            "7",
            "3",
        ],
        correta: 0
    },
    {
        pergunta: "Qual o nome do Reino de Aragorn?",
        respostas: [
            "Rohan",
            "Gondor",
            "Valfenda",
        ],
        correta: 1
    },
    {
        pergunta: "Qual o nome do Mago da floresta?",
        respostas: [
            "Saruman",
            "Radagast",
            "Alatar",
        ],
        correta: 1
    },
    {
        pergunta: "Qual foi amigo de Frodo Bolseiro no condado?",
        respostas: [
            "Peregrin Took",
            "Gimli",
            "Boromir",
        ],
        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

// loop ou laço de repetição
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)
        // arrow function
        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)
}