questoesLinuxEssentials/index.html at main · joaopedrolourencoaffonso/questoesLinuxEssentials · 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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Questões Linux</title>

    <style>
        body {
          font-family: Tahoma, sans-serif;
        }

        .placar {
            border-radius: 50px;
            background: #074c9b;
            padding: 5px;
            width: 15%;
            text-align: center;
            color: white;
            font-size: 24px;
            /*height: 150px;*/
        }

        .novaQuestao {
            display: block;
            margin-left: auto;
            margin-right: auto;
            /*display: inline-block;*/
            padding: 15px 25px;
            font-size: 24px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            outline: none;
            color: #fff;
            background-color: #04AA6D;
            border: none;
            border-radius: 15px;
            box-shadow: 0 9px #999;
            width: 50%;
        }

        .novaQuestao:hover {background-color: #3e8e41}

        .novaQuestao:active {
            background-color: #3e8e41;
            box-shadow: 0 5px #666;
            transform: translateY(4px);
        }

        .alternativa {
            display: block;
            margin-left: auto;
            margin-right: auto;
            background-color: white;
            border: 1px solid #555555;
            color: black;
            transition-duration: 0.4s;
            cursor: pointer;
            width: 50%;
            text-align: left;
        }
        .alternativa:hover {
            background-color: #0066ff;
            color: white;
        }

        .campoResposta {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 25%;
        }

        .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .box {
            position: absolute;
            text-align: center;
            bottom: -100px;  /* Start off-screen at the bottom */
            left: 50%;       /* Optional: Center horizontally */
            transform: translateX(-50%); /* Optional: Exact centering */
            background-color: lightcoral;
            padding: 20px;
            color: white;
            visibility: hidden;  /* Initially hidden */
            opacity: 0; /* Initially invisible */
            transition: bottom 0.5s ease, opacity 0.5s ease;  /* Smooth transition */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Questões para o Linux Essentials</h1>
        <div class="placar" id="placar">
            <p>Placar: <a id="certas">0</a>/<a id="feitas">0</a></p>
        </div>
    </div>

    <div class="corpo" id="minhacaixa">
        <i><p id="enunciado">Kernel é um programa que haje como interface entre o sistema operacinal e (dentre outros componentes físicos) a memória:</p></i>
        <button class="alternativa" onclick="checaResposta('a')"><p id="a">VERDADEIRO</p></button><br>
        <button class="alternativa" onclick="checaResposta('b')"><p id="b">FALSO</p></button><br>
        <button class="alternativa" onclick="checaResposta('c')"><p id="c"></p></button><br>
        <button class="alternativa" onclick="checaResposta('d')"><p id="d"></p></button><br>
        <br>
        <p id="campoResposta" class="campoResposta"></p>
    </div>
    <button class="novaQuestao" onclick="PegaQuestao()">Nova questão</button>

    <div class="box" id="box">
        Parabéns, você acertou 10 questões direto!
        <br>
        <img src="https://upload.wikimedia.org/wikipedia/en/5/5c/Mario_by_Shigehisa_Nakaue.png">
        <!--Essa figura foi tirada da wikimedia commons, nem vem que não tem, Nintendo-->
    </div>
<script>
    let respostaGlobal = 'a';
    let totalQuestoesFeitas = 0;
    let totalQuestoesCertas = 0;
    let certasDireto = 0;

    async function PegaQuestao() {
        try {
            document.getElementById("campoResposta").innerHTML = "";
            //console.log(certasDireto);
            // Fetch data from the server
            const response = await fetch("https://raw.githubusercontent.com/joaopedrolourencoaffonso/questoesLinuxEssentials/refs/heads/main/static/questoes.json");

            // Parse the response as JSON
            const questoes = await response.json();

            // Get a random question
            const randomIndex = Math.floor(Math.random() * questoes.length);
            const enunciado = questoes[randomIndex]['enunciado'];
            const opcao_a = "A - " + questoes[randomIndex]['a'];
            const opcao_b = "B - " + questoes[randomIndex]['b'];
            const opcao_c = "C - " + questoes[randomIndex]['c'];
            const opcao_d = "D - " + questoes[randomIndex]['d'];
            const resposta = questoes[randomIndex]['resposta'];

            // Log the random question
            //console.log(resposta);

            // Update the HTML with the random question (if desired)
            // Uncomment the following lines if you have elements with these IDs:
            document.getElementById("enunciado").innerHTML = enunciado;
            document.getElementById("a").innerHTML = opcao_a;
            document.getElementById("b").innerHTML = opcao_b;
            document.getElementById("c").innerHTML = opcao_c;
            document.getElementById("d").innerHTML = opcao_d;
            respostaGlobal = resposta;

        } catch (error) {
            console.error("Error fetching data:", error);
        }
    }

    async function checaResposta(respostaDoAluno) {
        try {
            console.log(certasDireto);
            if (respostaDoAluno == respostaGlobal) {
                //alert("Acertou!");
                totalQuestoesFeitas += 1;
                totalQuestoesCertas += 1;
                certasDireto += 1;
                document.getElementById("feitas").innerHTML = totalQuestoesFeitas;
                document.getElementById("certas").innerHTML = totalQuestoesCertas;
                document.getElementById("campoResposta").innerHTML = "Parabéns! Você acertou!";
            } else {
                //alert("Errou!");
                totalQuestoesFeitas += 1;
                certasDireto = 0;
                document.getElementById("feitas").innerHTML = totalQuestoesFeitas;
                document.getElementById("campoResposta").innerHTML = "Errado. A resposta correta é alternativa '" + respostaGlobal + "'";
            }
            console.log("1");
            if (certasDireto == 10) {
                showElement();
                await sleep(2000);
                hideElement();
                certasDireto = 0;
            }
        } catch (error) {
            console.error("Error fetching data:", error);
        }
    }

    async function showElement() {
        var element = document.getElementById("box");
        element.style.display = "inline";
        element.style.bottom = "25%"; // Move to the top
        element.style.visibility = "visible";  // Make it visible
        element.style.opacity = "1";
    }

    // Function to hide the element by moving it back down
    async function hideElement() {
      var element = document.getElementById("box");
      element.style.bottom = "-75%"; // Move it back off-screen
      await sleep(1000);
      element.style.visibility = "hidden";  // Hide it
      element.style.opacity = "0";
      element.style.display = "none";
    }

    function sleep(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    }
</script>
</body>
</html>