javascript – How do I show the next and restart button at the bottom of each question?

Creating a Javascript quiz web app, how do I show the next and restart button at the bottom of each question? And why does my web app not allow the user to select the incorrect answer in the quiz answer options.

I am struggling to show my next and restart buttons so the quiz stays on the one question and my quiz now does not allow the user to select the wrong answer and I did change the selectAnswer function to:

function selectAnswer(e) {   
    const selectedButton = e.target
    const correct = selectedButton.dataset.correct
    setStatusClass(document.body, correct)   
    Array.from(answerButtonsElement.children).forEach(button => {      
        setStatusClass(button, button.dataset.correct)   
    })
}

this is my index.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="style.css" rel="stylesheet">
  <script defer src="script.js"></script>
  <title>Countries Quiz Web App</title>
</head>
<body>
  <div class="container">
    <div id="question-container" class="hide">
      <div id="question">Question</div>
      <div id="answer-buttons" class="btn-grid"></div>
    </div>
    <div class="controls">
      <button id="start-btn" class="start-btn btn">Start Quiz</button>
      <button id="next-btn" class="next-btn btn hide">Next</button>
    </div>  
</body>
</html>

This is my style.css

    box-sizing: border-box;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  }
  
  :root {
    --hue-neutral: 200;
    --hue-wrong: 0;
    --hue-correct: 145;                                                          
  }
  
  body {
    --hue: var(--hue-neutral);
    padding: 0;
    margin: 0;
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-image: url("image.jpg");
  }
  
  body.correct {
    --hue: var(--hue-correct);
  }
  
  body.wrong {
    --hue: var(--hue-wrong);
  }
  
  .container {
    width: 500px;
    max-width: 80%;
    background-color: white;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 10px 2px;
  }
  
  .btn-grid {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 10px;
    margin: 20px 0;
  }
  
  .btn {
    --hue: var(--hue-neutral);
    display: inline-block;
    border: 1px solid hsl(var(--hue), 100%, 30%);
    background-color: hsl(var(--hue), 100%, 50%);
    border-radius: 5px;
    padding: 5px 10px;
    color: white;
    outline: none;
    transition: all 0.5s;
    cursor: pointer;
  }
  
  .btn:hover {
    border-color: black;
    padding-right: 25px;
  }

  .btn.span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 00.5s;
  }
  

  .btn.span:after {
  content: '0bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
  }

  .btn:hover.span{
  padding-right: 25px;
  }

.btn:hover span::after{
  opacity: 1;
  right: 0;
}


  .btn.correct {
    --hue: var(--hue-correct);
    color: greenyellow;
  }
  
  .btn.wrong {
    --hue: var(--hue-wrong);
  }
  
  .start-btn, .next-btn {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 10px 20px;
    color: aquamarine;
  }
  
  .controls {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .hide {
    display: none;
  }

This is my script.js

const nextButton = document.getElementById("next-btn")
const questionContainerElement = document.getElementById("question-container")
const questionElement = document.getElementById("question")
const answerButtonsElement = document.getElementById("answer-buttons")

let shuffledQuestions, currentQuestionIndex

startButton.addEventListener("click", startGame)



function startGame() {
startButton.classList.add("hide")
shuffledQuestions = questions.sort(() => Math.random() - .5)
currentQuestionIndex = 0
questionContainerElement.classList.remove("hide")
setNextQuestion()
}



function setNextQuestion() {
showQuestion(shuffledQuestions[currentQuestionIndex])
}

function showQuestion(question) {
    console.log(question);
questionElement.innerText = question.question
question.answers.forEach(answer => {
    console.log(answer.text);
  const button = document.createElement("button");
  button.innerHTML = answer.text;
  button.classList.add("btn");
  if (answer.correct) {
    button.dataset.correct = answer.correct;
    button.addEventListener("click", selectAnswer);
  answerButtonsElement.appendChild(button);
  } 
  else{
    answerButtonsElement.appendChild(button);
  }
})
}


function resetState() {
  clearStatusClass(document.body)
  nextButton.classList.add("hide")
  while (answerButtonsElement.firstChild){
    answerButtonsElements.removeChild
    (answerButtonsElement.firstChild)
  }
}

function selectAnswer(e) {
  const selectedButton = e.target
  const correct = selectedButton.dataset.correct
  setStatusClass(document.body, correct)
  Array.from(answerButtonsElement.children).forEach(button => {
    setStatusClass(button, button.dataset.correct)
  })
}


function setStatusClass(element, correct) {
  clearStatusClass(element)
  if (correct) {
    element.classList.add("correct")
  } else {
    element.classList.add("wrong")
  }
}



function clearStatusClass(element) {
  element.classList.remove("correct")
  element.classList.remove("wrong")
}






const questions = [
  {
    question: 'What language do they speak in Zimbabwe?',
    answers: [
      { text: 'Shona', correct: true },
      { text: 'Spanish', correct: false }
    ]
  },
  {
    question: 'Who is the President of Russia?',
    answers: [
      { text: 'Juju', correct: false },
      { text: 'Putin', correct: true },
      { text: 'Hitler', correct: false },
      { text: 'Clint', correct: false }
    ]
  },
  {
    question: 'What are the colours of the Jamaican flag?',
    answers: [
      { text: 'Pink and White', correct: false },
      { text: 'Green, yellow, white and black', correct: true },
      { text: 'White, yellow and gold', correct: false },
      { text: 'Red', correct: false }
    ]
  },
  {
    question: 'What is the Capital City of Germany ?',
    answers: [
      { text: 'Belgium', correct: false },
      { text: 'Berlin', correct: true }
    ]
  },
  {
    question: 'In which city is the Statue of Liberty?',
    answers: [
      { text: 'Soweto', correct: false },
      { text: 'New York City', correct: true }
    ]
  },
  {
    question: 'Which country has a unicorn as its national animal?',
    answers: [
      { text: 'Finland', correct: false },
      { text: 'Scotland', correct: true },
      { text: 'Fairytopia', correct: false },
      { text: 'Narnia', correct: false }
    ]
  },
  {
    question: 'Where is Nollywood?',
    answers: [
      { text: 'Nairobi', correct: false },
      { text: 'Nigeria', correct: true },
      { text: 'Namibia', correct: false },
      { text: 'Nashville', correct: false }
    ]
  },
  {
    question: 'Which country is home to the tallest building?',
    answers: [
      { text: 'Singapore', correct: false },
      { text: 'UAE', correct: true },
      { text: 'China', correct: false },
      { text: 'France', correct: false }
    ]
  },
  {
    question: 'Which is the largest country in the world?',
    answers: [
      { text: 'China', correct: false },
      { text: 'Russia', correct: true },
      { text: 'Mexico', correct: false },
      { text: 'Nigeria', correct: false }
    ]
  },
  {
    question: 'Who is the President of South Korea?',
    answers: [
      { text: 'Son Heung-Min', correct: false },
      { text: 'Yoon Soek-Youl', correct: true },
      { text: 'Kim Nam-Joon', correct: false },
      { text: 'Kim Bok-Joo', correct: false }
    ]
  },
]

Leave a Comment