Блог

Главная - Вопросы по программированию - Я хочу, чтобы границы ответов меняли цвет, когда пользователь не нажимает на ответ

Я хочу, чтобы границы ответов меняли цвет, когда пользователь не нажимает на ответ

#javascript

Вопрос:

Я создаю приложение для викторины для изучения javascript, и у меня возникла проблема, связанная с DOM. Поэтому я хотел бы, чтобы цвета границ ответов менялись на «красный», когда пользователь не нажимает на ответ, а затем возвращались к исходному цвету, когда они переходили к следующему вопросу, но у меня по-прежнему возникают проблемы, когда меняется только один ответ, либо первый ответ, либо последний ответ. Я был бы признателен за помощь, я здесь для того, чтобы учиться.

 gsap.from('.quiz-container', {
  duration: 1.2,
  x: '-80px',
  opacity: '0',
  ease: 'power3'
})
gsap.from('.submit-btn', {
  duration: 1.2,
  x: '-80px',
  opacity: '0',
  ease: 'power3'
})




let question = document.querySelector('.question')
let answerbox = document.querySelector('.answer-container')
let quizbox = document.querySelector('.wrapper')
let answer1 = document.getElementById('a1')
let answer2 = document.getElementById('a2')
let answer3 = document.getElementById('a3')
let answer4 = document.getElementById('a4')
let answers = document.getElementsByClassName('answer')
let submitBtn = document.getElementById('submit-btn')
let currentquestion = 0
let currentscore = 0

const questionsData = [{
    question: "How old am I?",
    answers: {
      a: "18",
      b: "21",
      c: "25",
      d: "35",
    },
    correctAnswer: "b"
  },
  {
    question: "What is my favorite color?",
    answers: {
      a: "Purple",
      b: "Green",
      c: "Black",
      d: "Red",
    },
    correctAnswer: "c"
  },
  {
    question: "What is my middle name?",
    answers: {
      a: "Albert",
      b: "David",
      c: "Graham",
      d: "John",
    },
    correctAnswer: "d"
  },
]
const loadquestion = () => {


  //console.log('working!!!')
  //GETTING THE CORRECT ANSWER //
  correctAnswer = (questionsData[currentquestion].correctAnswer)
  //INPUTTING THE QUESTIONS AND ANSWERS FROM THE QUIZDATA
  question.innerText = questionsData[currentquestion].question
  answer1.innerText = questionsData[currentquestion].answers.a
  answer2.innerText = questionsData[currentquestion].answers.b
  answer3.innerText = questionsData[currentquestion].answers.c
  answer4.innerText = questionsData[currentquestion].answers.d
  //GOING TO NEXT QUESTION
  currentquestion  

  // THIS IS THE ISSUE BELOW



  //RESETTING THE BORDERS OF THE ANSWERS IF THE USER DIDNT ANSWER THE QUESTION PREVIOUSLY
  incremented = true
  console.log(incremented)


  answer1.style.border = '2px solid rgb(59, 0, 223)'
  answer2.style.border = '2px solid rgb(59, 0, 223)'
  answer3.style.border = '2px solid rgb(59, 0, 223)'
  answer4.style.border = '2px solid rgb(59, 0, 223)'


  //RESET CLICK WHEN CLICKED OUTSIDE
  const clickreset = (e) => {
    for (i = 0; i < answers.length; i  ) {
      let answerels = answers[i];
      //RESETTING THE SELECTED ANSWER WHEN THE USER MOVES ON TO THE NEXT QUESTION


      if (e.target !== answerels) {
        answerels.checked = false
      } else {
        console.log('user did not click in box')
        //RESETTING THE BORDER COLORS AFTER EACH QUESTION

        console.log(currentquestion)
      }
    }
  }
  window.addEventListener('click', clickreset)
}

loadquestion()

const endofquiz = () => {
  //GIVING RESULTS AT THE END
  question.innerText = `You answered ${currentscore} out of ${questionsData.length}`
  answer1.style.opacity = '0'
  answer2.style.opacity = '0'
  answer3.style.opacity = '0'
  answer4.style.opacity = '0'
  submitBtn.innerText = 'Restart Quiz'
  submitBtn.addEventListener('click', () => {
    //PREVENT THE SCORE FROM GOING UP AT THE END
    currentscore = currentscore
    location.reload()
  })
}

submitBtn.addEventListener('click', () => {

  //KEEP TRACK OF QUESTIONS UNTIL QUIZ IS FINISHED
  if (currentquestion <= questionsData.length) {
    for (i = 0; i < answers.length; i  ) {
      let answerels = answers[i];

      //CHECK TO SEE IF USER HAS SELECTED AN ANSWER
      if (answerels.checked == true) {
        incremented == true
        //CHECK TO SEE IF USER HAS SELECTED AN ANSWER
        console.log(answerels.value)
        if (answerels.value == correctAnswer) {
          console.log("That's correct!");
          currentscore  ;

        } else {
          console.log(`Sorry, the correct answer is ${questionsData[currentquestion-1].answers[correctAnswer]}.`);
        }
        if (currentquestion < questionsData.length) {
          loadquestion();
        } else {
          endofquiz();
        }
      } else {


        //STOP USER FROM GOING TO NEXT QUESTION WITHOUT SELECTING AN ANSWER
        //LETTING THE USER KNOW THEY DIDNT ANSWER THE QUESETION
        console.log(incremented)

        // THIS IS THE ISSUE BELOW

        if (incremented == false) {
          answer1.style.border = '2px solid red';
          answer2.style.border = '2px solid red';
          answer3.style.border = '2px solid red';
          answer4.style.border = '2px solid red';
        }

      }
    }
  }
}) 
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;0,700;1,400amp;family=Roboto:ital,wght@0,700;1,400amp;display=swap');
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'poppins', sans-serif;
}

 ::-webkit-scrollbar {
  display: none;
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.title {
  color: white;
  font-weight: bold;
  font-size: 2.5rem;
  text-align: center;
  color: black;
}

.quiz-container {
  margin-top: 3em;
  height: 75vh;
  width: 50vw;
  display: flex;
  border-radius: 10px;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.question-container {
  height: 20vh;
  width: 80vh;
  margin-bottom: -2em;
  /* position: absolute; */
  /* top: 10%;
        left: 50%; */
  /* transform: translate(-50%, -10%); */
  background-color: rgb(59, 0, 223);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.question {
  padding: 1em 1.5em;
  font-size: 1.8rem;
  transition: 0.45s ease;
  text-align: center;
  color: white;
}

.answer-container {
  height: 25vh;
  width: 50vh;
  display: flex;
  margin-bottom: 8em;
  flex-direction: column;
}

label {
  background-color: white;
  padding: 0.5em;
  margin: 0.5em;
  position: relative;
  text-align: center;
  font-weight: bold;
  font-size: 1.2rem;
  cursor: pointer;
  border: 2px solid rgb(59, 0, 223);
  transition: 0.45s ease;
}

label:hover {
  background-color: rgb(59, 0, 223);
  color: white;
  cursor: pointer;
  transition: 0.45s ease;
}

input[type="radio"] {
  opacity: 0;
}


/* .answer:hover{
        background-color: rgb(59, 0, 223);
        color: white;
        cursor: pointer;
        transition: 0.45s ease;
    } */

input:checked label {
  background-color: rgb(59, 0, 223);
  color: white;
  cursor: pointer;
  transition: 0.45s ease;
}

.submit-btn {
  margin-top: 2.5em;
  background-color: white;
  outline: none;
  border: 2px solid rgb(59, 0, 223);
  border-radius: 10px;
  padding: 0.5em 1.5em;
  font-weight: bold;
  font-size: 1.3rem;
  width: 10%;
}

.submit-btn:hover {
  color: white;
  background-color: rgb(59, 0, 223);
  transition: 0.45s ease;
  cursor: pointer;
}


/* MEDIA QUERIES FOR MOBILE PHONES */

@media only screen and (max-width: 600px) {
  .title {
    color: white;
    font-weight: bold;
    font-size: 2.5rem;
    text-align: center;
    color: black;
    margin-bottom: 0em;
  }
  .quiz-container {
    margin-top: 2em;
    width: 80vw;
    height: 68vh;
  }
  .question-container {
    width: 90%;
    height: 28%;
    margin-bottom: 2em;
  }
  .question {
    font-size: 1.6rem;
  }
  .answer-container {
    height: 30vh;
    width: 50vh;
    display: flex;
    margin-bottom: 5em;
    flex-direction: column;
  }
  label {
    background-color: white;
    padding: 0.5em;
    margin-left: 30%;
    height: 20%;
    width: 40%;
    position: relative;
    text-align: center;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    border: 2px solid rgb(59, 0, 223);
  }
  label:hover {
    background-color: rgb(59, 0, 223);
    color: white;
    cursor: pointer;
    transition: 0.45s ease;
  }
  .submit-btn {
    background-color: white;
    outline: none;
    text-align: center;
    border: 2px solid rgb(59, 0, 223);
    padding: 1em 2em;
    font-weight: bold;
    font-size: 1rem;
    width: 65%;
  }
} 
 <div class="wrapper">
  <div class="quiz-container" id="quiz-container">
    <h1 class="title">QUIZ APP</h1>
    <div class="question-container">

      <h1 class="question">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet, inventore.</h1>
    </div>
    <div class="answer-container">
      <!-- <input class="answer" id='an1' type="radio" name="a"></input> <label id="a1" for="an1">lorem</label>
            <input class="answer" id='an2' type="radio" name="a"></input> <label id="a2" for="an2">lorem</label>
            <input class="answer" id='an3' type="radio" name="a"></input> <label id="a3" for="an3">lorem</label>
            <input class="answer" id='an4' type="radio" name="a"></input> <label id="a4" for="an4">lorem</label> -->
      <input class="answer" id='an1' type="radio" name="aa" value="a"></input> <label id="a1" for="an1">lorem</label>
      <input class="answer" id='an2' type="radio" name="aa" value="b"></input> <label id="a2" for="an2">lorem</label>
      <input class="answer" id='an3' type="radio" name="aa" value="c"></input> <label id="a3" for="an3">lorem</label>
      <input class="answer" id='an4' type="radio" name="aa" value="d"></input> <label id="a4" for="an4">lorem</label>
    </div>
  </div>

  <button class="submit-btn" id="submit-btn">Next Question</button>
</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js" integrity="sha512-cdV6j5t5o24hkSciVrb8Ki6FveC2SgwGfLE31 ZQRHAeSRxYhAQskLkq3dLm8ZcWe1N3vBOEYmmbhzf7NTtFFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Комментарии:

1. incremented = true где установлено значение false?

Метки: , ,