search

roger-melo-treinamentos / curso-de-js-roger-melo

Repositório de informações do CJRM
492 stars 172 forks source link

Resumo da Aula Exercícios da aula 01 da etapa 07 #5951

Closed Dieison37 closed 1 year ago

Dieison37 commented 1 year ago 
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <title>Quiz | Rock In Roll</title>
</head>
<body>
  <div class="intro py-3 bg-warning text-center">
    <div class="container">
      <h2 class="text-secondary display-3 my-4">Quiz / Rock🎸</h2>
    </div>
  </div>

  <div class="quiz py-4 bg-dark">
    <div class="container">
      <h2 class="my-5 text-white">Algumas curiosidades sobre o mundo do Rock In Roll 🤘</h2>

      <form class="quiz-form text-light">
        <div class="my-5">
          <p class="lead font-weight-normal">1. Que dia é comemorado o dia mundial do Rock ?</p>
          <div class="form-check my-2 text-white-50">
            <label class="form-check-label">
              <input type="radio" name="inputQuestion1" value="A" checked>
              No dia 13 de julho.
            </label>
          </div>
          <div class="form-check my-2 text-white-50">
            <label class="form-check-label">
              <input type="radio" name="inputQuestion1" value="B">
              No dia 16 de junho.
            </label>
          </div>
        </div>

        <div class="my-5">
          <p class="lead font-weight-normal">2. Quem foi considerado um dos maiores precursores do Rock ?</p>
          <div class="form-check my-2 text-white-50">
            <label class="form-check-label">
              <input type="radio" name="inputQuestion2" value="A" checked>
              Elvis Presley.
            </label>
          </div>
          <div class="form-check my-2 text-white-50">
            <label class="form-check-label">
              <input type="radio" name="inputQuestion2" value="B">
              Chuck Berry.
            </label>
          </div>
        </div>

        <div class="my-5">
          <p class="lead font-weight-normal">3. Em que ano o Brasil teve seu primeiro contato com o Heavy Metal e qual foi a banda ?</p>
          <div class="form-check my-2 text-white-50">
            <label class="form-check-label">
              <input type="radio" name="inputQuestion3" value="A" checked>
              Em 1974 com Alice Cooper.
            </label>
          </div>
          <div class="form-check my-2 text-white-50">
            <label class="form-check-label">
              <input type="radio" name="inputQuestion3" value="B">
              Em 1976 com Pink Floyd.
            </label>
          </div>
        </div>

        <div class="my-5">
          <p class="lead font-weight-normal">4. Quem gravou a música "Rock and Roll em Copacabana" em 1957 que é considerado o primeiro rock brasileiro ?</p>
          <div class="form-check my-2 text-white-50">
            <label class="form-check-label">
              <input type="radio" name="inputQuestion4" value="A" checked>
              Cauby Peixoto.
            </label>
          </div>
          <div class="form-check my-2 text-white-50">
            <label class="form-check-label">
              <input type="radio" name="inputQuestion4" value="B">
              Rita Lee.
          </div>
        </div>

        <div class="my-5">
          <p class="lead font-weight-normal">5. Em qual país e local que aconteceu o show de rock com maior público registrando 3,5 milhões de pessoas no 
            dia 31 de dezembro de 1993 ?, que inclusive entrou para o Guinness Book o show foi do cantor Rod Stewart.
          </p>
          <div class="form-check my-2 text-white-50">
            <label class="form-check-label">
              <input type="radio" name="inputQuestion5" value="A" checked>
              Brasil no Rio de Janeiro, praia de Capacabana.
            </label>
          </div>
          <div class="form-check my-2 text-white-50">
            <label class="form-check-label">
              <input type="radio" name="inputQuestion5" value="B">
              Estados Unidos na California, praia de Long Beach.
            </label>
          </div>
        </div>

        <div class="my-5">
          <p class="lead font-weight-normal">6. Qual é o maior festival de Rock In Roll da história ?</p>
          <div class="form-check my-2 text-white-50">
            <label class="form-check-label">
              <input type="radio" name="inputQuestion6" value="A" checked>
              Rock In Rio.
            </label>
          </div>
          <div class="form-check my-2 text-white-50">
            <label class="form-check-label">
              <input type="radio" name="inputQuestion6" value="B">
              Woodstock.
            </label>
          </div>
        </div>

        <div class="my-5">
          <p class="lead font-weight-normal">7. Qual foi o disco de Rock mais vendido com mais de 50 milhões de cópias comercializadas ao redor do 
            mundo ?
          </p>
          <div class="form-check my-2 text-white-50">
            <label class="form-check-label">
              <input type="radio" name="inputQuestion7" value="A" checked>
              Back In Black do AC/DC lançado em 1980.
            </label>
          </div>
          <div class="form-check my-2 text-white-50">
            <label class="form-check-label">
              <input type="radio" name="inputQuestion7" value="B">
              Paranoid do Black Sabbath lançado em 1970.
            </label>
          </div>
        </div>

        <div class="my-5">
          <p class="lead font-weight-normal">8. Qual banda foi a precursora do Heavy Metal ?, que é um gênero do Rock que se desenvolveu no final da década
            de 1960 e no início da década de 1970. </p>
          <div class="form-check my-2 text-white-50">
            <label class="form-check-label">
              <input type="radio" name="inputQuestion8" value="A" checked>
              Led Zeppelin.
            </label>
          </div>
          <div class="form-check my-2 text-white-50">
            <label class="form-check-label">
              <input type="radio" name="inputQuestion8" value="B">
              Black Sabbath.
            </label>
          </div>
        </div>

        <div class="text-center">
          <button class="btn bg-warning  text-secondary">Enviar</button>
        </div>
      </form>
    </div>
  </div>

  <script src="./app.js"></script>
</body>
</html>
/*
Este exercício será um pouquinho diferente dos anteriores.
Seu desafio é desenvolver uma versão do quiz que:
- Aborda um tema diferente (não pode ser de filmes);
- Tem um tema de cores diferente do que foi apresentado na aula;
- Exibe na tela a pontuação que o usuário fez. Não há certo ou errado, apenas faça. Essa exibição de pontos é uma das implementações que faremos na próxima aula =D
Independente se você já fez o quiz dos filmes enquanto acompanhava a aula, busque fazer esse exercício sem rever partes da aula.
É importante que a sua versão do quiz seja feita apenas com o conteúdo que vimos até aqui.
*/

const form = document.querySelector('.quiz-form')
const correctAnswers = ['A', 'B', 'A', 'A', 'A', 'B', 'A', 'B']

form.addEventListener('submit', event => {
  event.preventDefault()

  let score = 0
  const userAnswers = [
    form.inputQuestion1.value,
    form.inputQuestion2.value,
    form.inputQuestion3.value,
    form.inputQuestion4.value,
    form.inputQuestion5.value,
    form.inputQuestion6.value,
    form.inputQuestion7.value,
    form.inputQuestion8.value
  ]

  userAnswers.forEach((userAnswer, index) => {
    if (userAnswer === correctAnswers[index]) {
      score += 12.5
    }
  })
  console.log(score)

  form.setAttribute('score', userAnswers)
  form.innerText = `Nota obtida ${score}`

  if (score === 0) {
     form.innerText = `Que pena você errou todas 😢!`
  } else if (score === 50) {
    form.innerText = `Que bom você acertou 50% do Quiz / Rock 🙂!`
  } if (score === 100) {
    form.innerText = `Parabéns você entende muito de Rock In Roll acertou 100% do Quiz / Rock 😎👏👏!`
  }
})

Oi Roger, tudo bem ?! Consegui fazer assim o Quiz e exibir de forma mais simples os resultados na tela.

Dieison37 commented 1 year ago

Boa tarde MivlaM, tudo bem ?

Estou com um problema nessa aplicação em algumas determinadas notas que o usuário faz, quando é exibida na tela ela continua incrementando até quando passa dos 100% e não consegui consertar esse problema e fiz até um vídeo de como está se comportando.

https://user-images.githubusercontent.com/94806311/217891051-bb02d34a-d486-488c-9f45-8c4c862ba345.mp4

Sei que a issue foi fechada mas tem como me dar uma ajudinha ?