I am trying to create a quiz game asking multiple Harry Potter trivia questions. The quiz has a start screen which explains the rules.

When the start button is pressed, the quiz commences along with the 75-second timer. When an answer is selected incorrectly, 10 seconds are docked off of the overall time. I have created a basic HTML and js file for the quiz but cannot get the questions to cycle along with the answers in the buttons.

```js
var startScreen = document.querySelector(".startScreen");
var startButton = document.querySelector("#startButton");
var quizScreen = document.querySelector(".quizScreen");
var questionText = document.querySelector("#questionText");
var container = document.querySelector(".container");
var hpTitle = document.querySelector("#hpTitle");
var buttons = document.querySelector("#buttons");
var timerEl = document.querySelector("#count");

var answerArrofObjIndex = 0;

var answerArrofObj = [{
    question: "What is the name of Harry Potters owl?",
    answerArr: ["Hedwig", "Trevour", "Crookshanks", "Dobby"],
    correctIndex: 0
  },
  {
    question: "What is Ron's last name?",
    answerArr: ["Swanson", "Weasley", "Granger", "Potter"],
    correctIndex: 1
  },
  {
    question: "Who is the main villain in Harry Potter",
    answerArr: ["Dumbledoor", "Trevour", "Voldemort", "Seious Black"],
    correctIndex: 2
  },
  {
    question: "Who is Harry Potters godfather?",
    answerArr: ["Tom Riddle", "Severus Snape", "Lucious Malfoy", "Serious Black"],
    correctIndex: 3
  }
]

//start button

startButton.addEventListener("click", setCounter)

function setCounter() {
  if (event.target.matches("button")) {
    startScreen.setAttribute("style", "display: none !important");
    quizScreen.setAttribute("style", "display: block !important");
  }
  var timeLeft = 75;

  var timeInterval = setInterval(function() {
    timerEl.textContent = "time left: " + timeLeft;
    timeLeft--;

    if (timeLeft === 0) {
      timerEl.textContent = "time left: 0";
      clearInterval(timeInterval);
      endScreen();
    }

  }, 1000);

  displayQuestions();
}

function displayQuestions() {

  if (answerArrofObjIndex !== 0) {
    document.getElementById("questionText").children[1].remove();

  }

  var currentLayout = answerArrofObj[answerArrofObjIndex];

  var question = document.createElement("h3");
  question.classList.add("text-center");
  question.setAttribute("src", currentLayout.answerArr[currentLayout.correctIndex])

  document.getElementById("questionText").appendChild(question);

  for (var i = 0; i < currentLayout.questionArr.length; i++) {
    setQuestion(i)
  }

}

setCounter();
```

```html
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">

  <title>Harry Potter Quiz</title>
</head>

<body class="text-monospace">

  <header>
    <a href="high-scores.html" class="text-left btn btn-outline-success mt-0 ml-3 float-left" type="button">view
                high
                scores</a>
    <p class="h4 text-right mr-4 mt-2"><span id="count">time left: 75</span></p>
  </header>

  <main class="container text-center">
    <article class="startScreen">

      <h1 class="text-center m-5" id="hpTitle">Harry Potter Quiz!</h1>
      <p class="text-center" id="instructions"> Welcome to the Harry Potter quiz, if you would like to test your knowledge on all things wizard and witch please click the start button. You have 75 seconds to complete the quiz, everytime you answer incorectly you are docked 10 seconds, the time
        left after the quiz is your final score.
      </p>

      <button type="button" class="btn btn-secondary mt-4" id="startButton"> start the quiz!</button>
    </article>

    <div class="d-none quizScreen">

      <div id="questionText">
        <h3>question goes here</h3>
      </div>

      <div class="buttons">
        <button id="0" type="button" class="btn btn-secondary btn-block mt-4">answer1</button>
        <button id="1" type="button" class="btn btn-secondary btn-block">answer2</button>
        <button id="2" type="button" class="btn btn-secondary btn-block">answwe3</button>
        <button id="3" type="button" class="btn btn-secondary btn-block">answer4</button>
      </div>

    </div>

    <div class="endScreen d-none">

      <h3 id="endTitle"></h3>
      <p id="finalScore">your final score is:</p>
    </div>
  </main>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
</body>
```

High scores:

```js
var startScreen = document.querySelector(".startScreen");
var startButton = document.querySelector("#startButton");
var quizScreen = document.querySelector(".quizScreen");
var questionText = document.querySelector("#questionText");
var container = document.querySelector(".container");
var hpTitle = document.querySelector("#hpTitle");
var buttons = document.querySelector("#buttons");
var timerEl = document.querySelector("#count");

var answerArrofObjIndex = 0;

var answerArrofObj = [{
    question: "What is the name of Harry Potters owl?",
    answerArr: ["Hedwig", "Trevour", "Crookshanks", "Dobby"],
    correctIndex: 0
  },
  {
    question: "What is Ron's last name?",
    answerArr: ["Swanson", "Weasley", "Granger", "Potter"],
    correctIndex: 1
  },
  {
    question: "Who is the main villain in Harry Potter",
    answerArr: ["Dumbledoor", "Trevour", "Voldemort", "Seious Black"],
    correctIndex: 2
  },
  {
    question: "Who is Harry Potters godfather?",
    answerArr: ["Tom Riddle", "Severus Snape", "Lucious Malfoy", "Serious Black"],
    correctIndex: 3
  }
]

//start button

startButton.addEventListener("click", setCounter)

function setCounter() {
  if (event.target.matches("button")) {
    startScreen.setAttribute("style", "display: none !important");
    quizScreen.setAttribute("style", "display: block !important");
  }
  var timeLeft = 75;

  var timeInterval = setInterval(function() {
    timerEl.textContent = "time left: " + timeLeft;
    timeLeft--;

    if (timeLeft === 0) {
      timerEl.textContent = "time left: 0";
      clearInterval(timeInterval);
      endScreen();
    }

  }, 1000);

  displayQuestions();
}

function displayQuestions() {

  if (answerArrofObjIndex !== 0) {
    document.getElementById("questionText").children[1].remove();

  }

  var currentLayout = answerArrofObj[answerArrofObjIndex];

  var question = document.createElement("h3");
  question.classList.add("text-center");
  question.setAttribute("src", currentLayout.answerArr[currentLayout.correctIndex])

  document.getElementById("questionText").appendChild(question);

  for (var i = 0; i < currentLayout.questionArr.length; i++) {
    setQuestion(i)
  }

}

setCounter();
```

```html
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">

  <title>High scores!</title>
</head>

<body class="text-monospace">

  <a href="index.html" class="text-left btn btn-outline-success m-3 float-left" type="button">back to quiz</a>
  <div class="container">

    <h1>High Scores!</h1>

  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
</body>
```