iurygdeoliveira commented 1 year ago

Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Oh, minhas queridas crianças inocentes, eu tenho um desafio empolgante para vocês! Estamos falando de um quiz app, um site que apresenta perguntas para testar os conhecimentos dos usuários. Vocês terão que utilizar o poderoso trio HTML, CSS e JS para criar uma experiência interativa e envolvente.

Mas por que é importante aplicar interatividade em desenvolvimento web? Bem, senhores, a resposta é simples: interatividade é o que mantém os usuários engajados e interessados em um site. É o que os faz querer voltar e explorar mais.

Agora, sobre o desafio em si. Vocês terão que criar uma série de perguntas e respostas que aparecerão em uma página web. Os usuários deverão selecionar a resposta correta para cada pergunta e, no final, receber uma pontuação com base em quantas perguntas eles responderam corretamente.

Para ajudar vocês, aqui estão algumas dicas de comandos CSS e JS que podem ser úteis:

Utilize o seletor :hover do CSS para adicionar efeitos visuais quando o usuário passar o mouse sobre as opções de resposta.
Use o comando setInterval do JS para criar um cronômetro que mostre quanto tempo o usuário levou para responder a cada pergunta.
Use eventos de clique do JS para registrar as respostas selecionadas pelos usuários e compará-las com as respostas corretas.

Com essas dicas, tenho certeza que vocês serão capazes de criar um quiz app incrível! Boa sorte!

Exemplo:

https://user-images.githubusercontent.com/30157522/224550247-1a7988b1-951b-43e6-a315-cdd74a0f69ef.mp4

Additional tips

Código HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Quiz App</title>
  </head>
  <body>
    <div class="quiz-container" id="quiz">
      <div class="quiz-header">
        <h2 id="question">Question text</h2>
        <ul>
          <li>
            <input type="radio" name="answer" id="a" class="answer">
            <label for="a" id="a_text">Question</label>
          </li>

          <li>
            <input type="radio" name="answer" id="b" class="answer">
            <label for="b" id="b_text">Question</label>
          </li>

          <li>
            <input type="radio" name="answer" id="c" class="answer">
            <label for="c" id="c_text">Question</label>
          </li>

          <li>
            <input type="radio" name="answer" id="d" class="answer">
            <label for="d" id="d_text">Question</label>
          </li>
        </ul>
      </div>
      <button id="submit">Submit</button>
    </div>
    <script src="script.js"></script>
  </body>
</html>

lor3nna commented 1 year ago

EQUIPE RESISTECH Alunas: Lorenna e Simone

DESAFIO 42.zip

brunnaborgex commented 1 year ago

EQUIPE: Autarquia Professor, o meu vs code está com problema. Devido tal causa, estarei colocando apenas o código aqui okay?

INDEX.HTML <!DOCTYPE html>

Quiz de perguntas e respostas

Cada questão vale 2 pontos. Que a sorte e o conhecimento esteja com você!

SCRIPT.JS const quizContainer = document.getElementById("quiz-container"); const submitBtn = document.getElementById("submit-btn"); const scoreContainer = document.getElementById("score-container"); let score = 0;

const questions = [ { question: "Qual é a capital do Brasil?", answers: [ { text: "Rio de Janeiro", correct: false }, { text: "Brasília", correct: true }, { text: "São Paulo", correct: false } ] }, { question: "Qual é o maior animal terrestre?", answers: [ { text: "Elefante", correct: true }, { text: "Leão", correct: false }, { text: "Girafa", correct: false } ] }, { question: "Qual é a cor da bandeira dos Estados Unidos?", answers: [ { text: "Azul, branco e vermelho", correct: false }, { text: "Verde e amarelo", correct: false }, { text: "Azul, branca e vermelha", correct: true } ] } ];

function showQuestions() { questions.forEach((question, index) => { const questionContainer = document.createElement("div"); questionContainer.classList.add("question-container");

const questionEl = document.createElement("div");
questionEl.classList.add("question");
questionEl.innerHTML = `${index + 1}. ${question.question}`;

const answersEl = document.createElement("div");
answersEl.classList.add("answers");

question.answers.forEach(answer => {
  const answerEl = document.createElement("div");
  answerEl.classList.add("answer");

  const labelEl = document.createElement("label");
  const radioEl = document.createElement("input");
  radioEl.type = "radio";
  radioEl.name = `question${index}`;
  radioEl.value = answer.text;
  radioEl.addEventListener("change", () => {
    if (answer.correct) {
      score++;
    }
  });

  labelEl.appendChild(radioEl);
  labelEl.append(` ${answer.text}`);

  answerEl.appendChild(labelEl);
  answersEl.appendChild(answerEl);
});

questionContainer.appendChild(questionEl);
questionContainer.appendChild(answersEl);
quizContainer.appendChild(questionContainer);

}); }

showQuestions();

submitBtn.addEventListener("click", () => { const answerContainers = document.querySelectorAll(".answers");

questions.forEach((question, index) => { const answerContainer = answerContainers[index]; const selectedRadio = answerContainer.querySelector(input[name=question${index}]:checked); const isCorrect = selectedRadio.value === question.answers.find(a => a.correct).text;

if (isCorrect) {
  score++;
}

});

scoreContainer.innerHTML = Sua pontuação é: ${score}, pois você acertou ${score/2} de 3 questões. Parabéns!!; submitBtn.disabled = true; });

STYLE.CSS

quiz-container {

margin: 50px auto; }

.question-container { margin-bottom: 20px; }

.question { font-size: 20px; font-weight: bold; }

.answers { margin-top: 10px; }

.answer { margin-bottom: 5px; }

submit-btn {

display: block; margin: 20px auto; padding: 10px; font-size: 20px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; }

score-container {

text-align: center; font-size: 24px; font-weight: bold; margin-top: 50px; } button:hover { transform: scale(1.1); transition: all 0.5s; }

html { height: 100%; width: 100%; }

samuelsamnx commented 1 year ago

Equipe: SLR Foi o máximo que chegamos perto.

Desafio 42 - Construindo um Quiz App.zip

iurygdeoliveira / Web-development-classes

42º Desafio: Construindo um Quiz App- Peso 2 #47