├── index.html
├── questions.js
├── script.js
└── style.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
12 |
13 | QUIZ APP
14 |
15 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/questions.js:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | question: "Quanto é 1 + 2?",
4 | answers: [
5 | { option: "3", correct: true },
6 | { option: "2", correct: false },
7 | { option: "4", correct: false },
8 | ],
9 | },
10 | {
11 | question: "Quanto é 5 x 2?",
12 | answers: [
13 | { option: "9", correct: false },
14 | { option: "10", correct: true },
15 | { option: "11", correct: false },
16 | ],
17 | },
18 | {
19 | question: "Quanto é 10 x 8?",
20 | answers: [
21 | { option: "800", correct: false },
22 | { option: "90", correct: false },
23 | { option: "80", correct: true },
24 | ],
25 | },
26 | {
27 | question: "Quanto é 7 x 7?",
28 | answers: [
29 | { option: "70", correct: false },
30 | { option: "56", correct: false },
31 | { option: "49", correct: true },
32 | ],
33 | },
34 | ];
35 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const question = document.querySelector(".question");
2 | const answers = document.querySelector(".answers");
3 | const spnQtd = document.querySelector(".spnQtd");
4 | const textFinish = document.querySelector(".finish span");
5 | const content = document.querySelector(".content");
6 | const contentFinish = document.querySelector(".finish");
7 | const btnRestart = document.querySelector(".finish button");
8 |
9 | import questions from "./questions.js";
10 |
11 | let currentIndex = 0;
12 | let questionsCorrect = 0;
13 |
14 | btnRestart.onclick = () => {
15 | content.style.display = "flex";
16 | contentFinish.style.display = "none";
17 |
18 | currentIndex = 0;
19 | questionsCorrect = 0;
20 | loadQuestion();
21 | };
22 |
23 | function nextQuestion(e) {
24 | if (e.target.getAttribute("data-correct") === "true") {
25 | questionsCorrect++;
26 | }
27 |
28 | if (currentIndex < questions.length - 1) {
29 | currentIndex++;
30 | loadQuestion();
31 | } else {
32 | finish();
33 | }
34 | }
35 |
36 | function finish() {
37 | textFinish.innerHTML = `você acertou ${questionsCorrect} de ${questions.length}`;
38 | content.style.display = "none";
39 | contentFinish.style.display = "flex";
40 | }
41 |
42 | function loadQuestion() {
43 | spnQtd.innerHTML = `${currentIndex + 1}/${questions.length}`;
44 | const item = questions[currentIndex];
45 | answers.innerHTML = "";
46 | question.innerHTML = item.question;
47 |
48 | item.answers.forEach((answer) => {
49 | const div = document.createElement("div");
50 |
51 | div.innerHTML = `
52 |
55 | `;
56 |
57 | answers.appendChild(div);
58 | });
59 |
60 | document.querySelectorAll(".answer").forEach((item) => {
61 | item.addEventListener("click", nextQuestion);
62 | });
63 | }
64 |
65 | loadQuestion();
66 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
2 |
3 | * {
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | font-family: 'poppins', sans-serif;
8 | }
9 |
10 | body {
11 | height: 100vh;
12 | display: flex;
13 | align-items: center;
14 | justify-content: center;
15 | flex-direction: column;
16 | gap: 5px;
17 | background: linear-gradient(90deg, rgba(91,30,159,1) 0%, rgba(77,39,182,1) 100%);
18 | }
19 |
20 | body h2 {
21 | color: white;
22 | }
23 |
24 | main {
25 | background-color: white;
26 | padding: 10px;
27 | border-radius: 10px;
28 | width: 100%;
29 | max-width: 300px;
30 | min-height: 200px;
31 | display: flex;
32 | align-items: center;
33 | justify-content: center;
34 | }
35 |
36 | .content {
37 | display: flex;
38 | flex-direction: column;
39 | width: 100%;
40 | gap: 10px;
41 | }
42 |
43 | .spnQtd {
44 | text-align: end;
45 | }
46 |
47 | .answers {
48 | display: flex;
49 | flex-direction: column;
50 | gap: 5px;
51 | }
52 |
53 | button {
54 | width: 100%;
55 | text-align: start;
56 | padding: 5px;
57 | border: none;
58 | border-radius: 5px;
59 | cursor: pointer;
60 | background-color: #008CCC;
61 | color: white;
62 | }
63 |
64 | .finish {
65 | display: none;
66 | flex-direction: column;
67 | gap: 10px;
68 | }
69 |
70 | .finish button {
71 | text-align: center;
72 | }
--------------------------------------------------------------------------------