Как сделать функцию, которая отслеживает количество нажатий кнопки

Question

Я пытаюсь сделать так, чтобы кнопка game появлялась после нажатия next-btn 2 раза. Итак, после того, как на тест с множественным выбором был дан ответ 2 раза, я хочу, чтобы кнопка игры отображалась так, чтобы она направляла пользователя на отдельный html, который уже был настроен, с именем agario.html.

i уже пробовали в коде, как вы можете видеть в js

function clickme() { 
  clicks += 1; 
  document.getElementById('next-btn').innerHTML = click;
  if (clicks == 2) {
    game.classList.remove('hide')
  }
}

, но это не работает? Любые идеи?

const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const image1 = document.getElementById('image1')
const answerButtonsElement = document.getElementById('answer-buttons')
const endbutton = document.getElementById('end-btn')
const trybutton = document.getElementById('try-btn')
const startmsgs = document.getElementById('startmsg')
const game = document.getElementById('agar')
var clicks = 0; 

let shuffledQuestions, currentQuestionIndex

startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
  currentQuestionIndex++
  setNextQuestion()
  changeImg()
})

function clickme() { 
  clicks += 1; 
  document.getElementById('next-btn').innerHTML = click;
  if (clicks == 2) {
    game.classList.remove('hide')
  }
}

endbutton.addEventListener('click', () => {
  window.top.close()
})

trybutton.addEventListener('click', setNextQuestion)

function startGame() {
  startButton.classList.add('hide')
  startmsgs.classList.add('hide')
  shuffledQuestions = questions.slice()
  questionContainerElement.classList.remove('hide')
  currentQuestionIndex = 0
  setNextQuestion()
}

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

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

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

function selectAnswer(e) {
  const selectedButton = e.target
  const correct = selectedButton.dataset.correct
  setStatusClass(document.body, correct)
  setStatusClass(selectedButton, correct);
  if(correct){
    if (shuffledQuestions.length > currentQuestionIndex + 1) {
      nextButton.classList.remove('hide')
    } else {
      endbutton.classList.remove('hide')
    }
  } else{
     trybutton.classList.remove('hide')
  }
}

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: 'Are you excited to learn about the immune system?',
    answers: [
      { text: 'Yes', correct: true },
      { text: 'YES!!!', correct: true },
      { text: 'No', correct: false },
      { text: 'YES!!!!!!!', correct: true }
    ]
  },
  {
    question: 'Our immune system protects from the thousands of different viruses we encounter daily! Without it, a simple paper cut could mean death. So to demonstrate how the immune system functions to protect us from bacterias, viruses and foreign bodies, we start our journey with a paper cut!',
    answers: [
      { text: 'I am exicted!', correct: true },
    ]
  },  
  {
    question: 'Paper cuts might seem like a very light injury, but the cut provides an opening for things that do not belong in the body to enter the body. For this activity we are only assuming that a bacteria enters the body and trace the bacteria through its journey in our body and its interactions with our immune system.',
    answers: [
      { text: 'Got it!', correct: true },
    ]
  },
 ]

*, *::before, *::after {
  box-sizing: border-box;
  font-family: cursive,
  'Times New Roman', Times, serif
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  /* background-color: #b61924; */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  z-index: 1;
}

: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-color: hsl(var(--hue), 100%, 20%);
}

body.correct {
  --hue: var(--hue-correct);
}

body.wrong {
  --hue: 0;
}

.container {
  width: 1000px;
  max-width: 80%;
  background-color: white;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 0 10px 2px;
  z-index: 2;
  position: absolute;
} 

.btn-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px;
  margin: 20px 0;
}

.btn {
  --hue: var(--hue-neutral);
  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;
}

.btn:hover {
  border-color: black;
}

.btn.correct {
  --hue: var(--hue-correct);
  color: black;
}

.btn.wrong {
  --hue: var(--hue-wrong);
}

.next-btn {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 10px 20px;
  align-items: flex-end;
  --hue: 245;
}

.start-btn {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 10px 20px;
  --hue: 245;
}

.end-btn {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 10px 20px;
  --hue: 245;
}

.try-btn {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 10px 20px;
  --hue: 245;
}

.container1 {
  display: flex;
  justify-content: center;
  align-items: center; 
  font-family: Arial;
  font-size: xx-large;
  padding: 10px 10px;

}

.container2 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}


.controls {
  display: flex;
  justify-content: center;
  align-items: center; 
}

.hide {
  display: none;
}

.wrapper { 
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 2;
}

.blob {
  width: 100%;
  height: 100%;
  z-index: 1;
}

a:link, a:visited {
  --hue: var(--hue-neutral);
  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;
  font-size: 1.5rem;
  font-weight: bold;
  padding: 10px 20px;
  align-items: flex-end;
  --hue: 245;
  text-decoration: none;
}

<!DOCTYPE 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 rel="stylesheet" href="styles.css">
  <script defer src="script.js"></script>
   <title>Quiz App</title>
</head>
<body>
  </div>
  <div class="container">
      <div class="container2">
        <img name="slide">
      </div> 
      <div id="question-container" class="hide">
        <div id="question">Question</div>
        <div id="answer-buttons" class="btn-grid">
          <button class="btn">Answer 1</button>
          <button class="btn">Answer 2</button>
          <button class="btn">Answer 3</button>
          <button class="btn">Answer 4</button>
        </div> 
      </div>
      <div class="container1">
        <div id="startmsgcontainer" class="hide"></div>
         <div id="startmsg">Adventure Into The Human Immune System</div>
          </div>
      <div class="controls">
        <button id="start-btn" class="start-btn btn">Start!</button>
        <button id="next-btn" class="next-btn btn hide">Next</button>
        <button id="end-btn" class="end-btn btn hide">End (this will close the current tab)</button>
        <button id="try-btn" class="try-btn btn hide">Try again!</button>
        <a id="agar" href="agario.html" class="hide">Game Time!</a>
      </div>
    </div> 
    <div class="wrapper">
        <img src="img/uni.png" alt="image">
    </div>
  </div>
  <div id="particles-js"></div>
  <script src="particles.js"></script>
  <script src="app.js"></script>
  <script src="slide.js"></script>
</body>

Answer 1

Вы фактически нигде не вызываете функцию clickme. Поэтому вам нужно будет добавить его в обработчик нажатия кнопки nextbutton.

nextButton.addEventListener('click', () => {
  currentQuestionIndex++
  setNextQuestion()
  changeImg()
  clickme();
})

Answer 2

Вы объявили прослушиватель событий для следующей кнопки, однако вы никогда не запускаете метод "clickme" для записи кликов.

nextButton.addEventListener('click', () => {
   currentQuestionIndex++;
   setNextQuestion();
   changeImg();
   //function you are using to record clicks.
   clickme();
});