Estoy creando un juego de preguntas y tengo una función checkAnswer() y una función IncreaseCorrectScore() que funcionan. Una vez que el usuario haya hecho clic en un botón (uno de los tres botones es correcto), devolverá la respuesta correcta o incorrecta, luego aparecerá el botón 'Siguiente' y el usuario hará clic para cargar la función nextQuestion () (función que aún no se ha llamado en el código a continuación ). Mi problema: en este momento, el usuario puede hacer clic en la respuesta incorrecta, pero aún puede hacer clic en la respuesta correcta y obtener un punto. También pueden seguir haciendo clic en la respuesta correcta para hacer trampa en el juego. Cómo puedo:

1. impedir que el usuario haga clic en la respuesta correcta si primero hizo clic en una respuesta incorrecta?
2. evitar que el usuario haga clic repetidamente en la respuesta correcta para aumentar su puntaje antes de hacer clic en 'Siguiente' para la siguiente pregunta?

Me gustaría dejar el botón Siguiente y la funcionalidad que hace que el usuario haga clic en la siguiente pregunta, en lugar de simplemente ejecutar nextQuestion() después del primer clic en una respuesta.

 function checkAnswer() { if (this.textContent === newFlags[currentFlagIndex].country) { let correct = true let correctAnswer = `CORRECT!` document.getElementById('result').innerHTML = correctAnswer; nextButton.classList.remove('hide'); setStatusClass(document.body, correct) increaseCorrectScore(); } else { let wrong = false let wrongAnswer = `WRONG!` document.getElementById('result').innerHTML = wrongAnswer; nextButton.classList.remove('hide'); setStatusClass(document.body, wrong) } } /** * Gets the current score from the DOM and increments it by 1 */ function increaseCorrectScore() { let currentScore = parseInt(document.getElementById('correct').innerText); document.getElementById('correct').innerText = ++currentScore; }

El HTML:

 <!-- GAME AREA --> <div class="container"> <div id="timer"></div> <div class="flag"><img src="" id="flag"></div> <div id="answer-buttons" class="answer-box"> <button class="btn" id="answer-1">Country 1</button> <button class="btn" id="answer-2">Country 2</button> <button class="btn" id="answer-3">Country 3</button> </div> <div id="result" class="result"></div> <div class="answer-box"><button class="next-btn hide" id="next-question">Next flag >></button></div> <div class="score">Score: <span id="correct" class="score">0</span></div> </div>