About an event-listener inside a quiz game

Question

I have a problem with my quiz-game. I was wondering if I need an event-listener if I want to refresh the first page with a question and 4 options. And how that would look like? I am using json to store all the questions.

javascript with my options and question from the first page:

let question = document.getElementById("question").innerHTML = quiz.quests[0].question; let answer1 = document.getElementById("answer1").innerHTML = quiz.quests[0].answer[0].alt; let answer2 = document.getElementById("answer2").innerHTML = quiz.quests[0].answer[1].alt; let answer3 = document.getElementById("answer3").innerHTML = quiz.quests[0].answer[2].alt; let answer4 = document.getElementById("answer4").innerHTML = quiz.quests[0].answer[3].alt;

<div id="wrapper_questions">
<div class="background">
    <div class="grid">
        <div id="question">
            <h1></h1>
        </div>
        <hr style="margin-bottom: 20px">

        <div id="choices">
            <input type="checkbox" id="choice1"><span id="answer1"></span>
            <br>
            <input type="checkbox" id="choice2"><span id="answer2"></span>
            <br>
            <input type="checkbox" id="choice3"><span id="answer3"></span>
            <br>
            <input type="checkbox" id="choise4"><span id="answer4"></span>
        </div>
        <hr style="margin-bottom: 50px">

        <button onclick="nextQuestion()" >Next</button>
        <br>
        <footer>
                <p  id="progress">Question x of y.</p>
        </footer>
    </div>
</div>

Answer 1

Here's an event listener that simply alerts when a choice is selected. Perhaps this will help you get started.

 let choices = document.getElementById("choices"); choices.addEventListener('click', (event)=> { console.log(event.target.id); });

 <div id="wrapper_questions"> <div class="background"> <div class="grid"> <div id="question"> <h1></h1> </div> <hr style="margin-bottom: 20px"> <div id="choices"> <input type="radio" id="choice1" name="choiceForQuestion1"><span id="answer1">Answer 1</span> <br> <input type="radio" id="choice2" name="choiceForQuestion1"><span id="answer2">Answer 2</span> <br> <input type="radio" id="choice3" name="choiceForQuestion1"><span id="answer3">Answer 3</span> <br> <input type="radio" id="choise4" name="choiceForQuestion1"><span id="answer4">Answer 4</span> </div> <hr style="margin-bottom: 50px"> <button onclick="nextQuestion()">Next</button> <br> <footer> <p id="progress">Question x of y.</p> </footer> </div> </div>

However, if the choices are mutually exclusive, I'd use a radio instead of check boxes.