'button not triggering call back function when clicked on. No way to know why as no error's thrown by console

I'm using an event listener on the button element. The user's first asked to select a language. Once they've have done so they are presented with the button in question. Clicking on it triggers a call back function, enabling the user to get started with the quiz. Everything was working as it should be up until this morning. But now nothing happens when I click on said button. The console doesn't even throw an error, which would give me a clue as to where something might have gone wrong.

I went on MDN documentations - see link below - where they said that a button with type="button": "has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur."

I got rid of this attribute but the button's still not responding.

const intro = document.querySelector(".intro");
const finalMessage = document.querySelector(".finalMessage")
const select = document.querySelector("select");
const finalScoreImage = document.getElementById("finalScoreImage");
const welcomeText = document.querySelector(".welcomeText")
const btn = document.querySelector("button");
const header = document.querySelector("header")
const animeQuiz = document.querySelector(".animeQuiz");
const timer = document.querySelector(".timer");
const anime_picture = document.querySelector(".anime_picture img");
const choices = [...document.querySelector(".choices").children];
const numberOfChoices = choices.length;
const finalScore = document.querySelector(".finalScore");
const squares = document.querySelector(".squares");
const progressBar = document.querySelector(".progressBar");
const squaresArray = [...squares.children];
let element;
[score, counter, time, timeUp] = [0, 0, 0, 10];
let Clock;

let japaneseAnime = []


let japaneseAnimeJapanese = [
  {
  name: "ドラゴンボール",
  picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
},
{
  name: "進撃の巨人",
  picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJYjy_bS8t3ScWyG7q94fIltnar3ChaOHmGA&usqp=CAU"
},
{
  name: "ナルト",
  picture: "https://res.cloudinary.com/jerrick/image/upload/v1616592065/605b3cc118e784001e22da0d.jpg"
},
{
  name: "鬼滅の刃",
  picture: "https://cdn.vox-cdn.com/thumbor/gcVHhhZ4VwVswvbDPvI-RfQ7ECQ=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/19721018/Tanjiro__Demon_Slayer_.png"
},
{
  name: "攻殻機動隊",
  picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8VBbI5HMki5cmjP_Gq0TdyA6VZn_0_fmkhg&usqp=CAU"
}
]


let japaneseAnimeEnglish = [
  {
  name: "dragon ball",
  picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
},
{
  name: "Attack On Titans",
  picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJYjy_bS8t3ScWyG7q94fIltnar3ChaOHmGA&usqp=CAU"
},
{
  name: "naruto",
  picture: "https://res.cloudinary.com/jerrick/image/upload/v1616592065/605b3cc118e784001e22da0d.jpg"
},
{
  name: "Demon Slayer",
  picture: "https://cdn.vox-cdn.com/thumbor/gcVHhhZ4VwVswvbDPvI-RfQ7ECQ=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/19721018/Tanjiro__Demon_Slayer_.png"
},
{
  name: "Ghost in the shell",
  picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8VBbI5HMki5cmjP_Gq0TdyA6VZn_0_fmkhg&usqp=CAU"
}
]


select.addEventListener("change", selectLanguage)

function selectLanguage() {
  if(select.value === "日本語") {
    welcomeText.innerHTML = "アニメクイズへようこそ下のボタンをクリックしてゲームを初めて下さい";
    btn.innerHTML = "クイズボタン";
    header.innerHTML = "画像に対応する名称を選択する";
    japaneseAnime = japaneseAnimeJapanese;
  } else {
    welcomeText.innerHTML = "Welcome to the amime quiz click on the button below to get started";
    btn.innerHTML = "quiz button";
    header.innerHTML = "select the name corresponding to the image"
    japaneseAnime = japaneseAnimeEnglish;
  }
  btn.style.display = "block"
  select.style.display = "none"
}


btn.addEventListener("click", startQuiz);


function startQuiz() {
  intro.style.display = "none";
  animeQuiz.style.display = "flex";
  finalScore.style.display = "none"
  app();
  console.log("josue")
}

// generates number between 0 and 3
function randomNumber() {
  return Math.floor(Math.random()*numberOfChoices);
}

// generates array of uniques numbers
function uniqueNumbers() {
  let listUniqueNumbers = new Set();
  while(listUniqueNumbers.size < numberOfChoices) {
    listUniqueNumbers.add(randomNumber());
  }
  return [...listUniqueNumbers];
}

// display choices
function displayChoicesAndPicture() {
  anime_picture.src = japaneseAnime[counter].picture;
  let unique = uniqueNumbers();
  choices.forEach((choice, i) => {
    choice.innerHTML = japaneseAnime[unique[i]].name;
  })
}

// checking user answer
function userAnswer() {
  for(var i = 0; i < japaneseAnime.length; i++) {
    choices[i].addEventListener("click", checkAnswer);
  }
}

function checkAnswer(e) {
  e.target.innerHTML === japaneseAnime[counter].name ? rightAnswer() : wrongAnswer();
}

function rightAnswer() {
  document.getElementById(counter).style.backgroundColor = "green"
  score++;
  console.log(score)
  update();
}

function wrongAnswer() {
  document.getElementById(counter).style.backgroundColor = "red"
  update();
}

function update() {
  if(counter < numberOfChoices - 1) {
    time = 0;
    counter++;
    displayChoicesAndPicture();
  } else {
    animeQuiz.style.display = "none"
    userScore();
  }
}

function userScore() {
  finalScore.style.display = "block";
  finalMessage.style.display = "flex";

  let scoreDisplayed = (score / numberOfChoices) * 100;
  finalMessage.innerHTML = `Well done you've completed the quiz. You score is ${scoreDisplayed}`
}

  function displaySquares() {
    for(var i = 0; i < numberOfChoices; i++) {
      element = document.createElement("div");
      element.setAttribute("class", "square");
      element.setAttribute("id", i);
      squares.appendChild(element);
    }
  }

  function timedQuiz() {
    if(time < timeUp) {
      time++
    } else {
      time = 0;
      wrongAnswer();
      update();
    }
      timer.innerHTML = time;
  }


  const app = () => {
    displayChoicesAndPicture();
    userAnswer();
    displaySquares();
    setInterval(timedQuiz, 1000)
  }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  min-height: 100vh;
  font-family: sans-serif;
  background-repeat: no-repeat;
}

p {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 300px;
}



.welcomeText {
  position: absolute;
  color: white;
  font-size: 35px;
  color: rgb(255,0,0);
}

button {
  position: absolute;
  transform: translateY(10ch);
}

select {
  position: absolute;
  transform: translateY(20ch);

}

.intro_image {
  position: fixed;
  object-fit: cover;
}

.intro {
  display: flex;
  justify-content: center;
  align-items: center;
  /* position: fixed; */

  height: 100%;
  width: 100%;
  border: 1px blue solid;
}

.animeQuiz {
  display: none;
  justify-content: center;
  align-items: center;
  position: relative;

  height: 800px;
  width: 800px;
  border: 1px red solid;
}

.anime_picture {
  height: 400px;
  width: 400px;
  position: absolute;
}

.choices {
  height: 100px;
  width: 100%;
  border: 1px blue solid;
  bottom: 0;
  position: absolute;

  display: flex;
  justify-content: space-around;
  align-items: center;
}

.finalScore {
  display: none;

  position: relative;
  height: 400px;
  width: 400px;
  border: 1px blue solid;
  background: red;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.finalMessage {
  position: absolute;

  justify-content: center;
  align-items: center;

  display: none;
  border: solid black 1px;
  border-radius: 100%;
  height: 200px;
  width: 500px;

  color: blue;
  transform: translateY(-120px);
  transform: translateX(500px);
}

.choices > div {
  height: 80px;
  width: 150px;
  border: 1px black solid;
  background-color: #EE6F57;
  cursor: pointer;
  border-radius: 10px;
}

.choices > div:hover {
  color: #EE6F;
}

.welcomeText {
  width: auto;
  height: auto;
  background: white;
  border-radius: 5px;
}

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

  padding: 10px;
  color: white;
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100px;
  border: 1px black solid;
  position: absolute;
  top: 0;
  font-family: fantasy;
}


.square {
  height: 15px;
  width: 15px;
  background-color: gray;
  bottom: 150px;
  margin: 10px;
}

.squares {
  position: absolute;
  bottom: 100px;
  display: flex;
  justify-content: space-around;
}

.timer {
  position: absolute;
  bottom: 150px;
}

.progressBar {
  height: 10px;
  width: 300px;
  position: absolute;
  bottom: 140px;
  background-color: grey;
  border: 1px black solid;
}

button {
  display: none;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css">
    <title>anime page</title>
  </head>
  <body>
    <div class="intro">
      <img class="intro_image" src="images/backgroundImage.jpeg" alt="">
      <p><div class=welcomeText>Welcome to the amime quiz click on the button below to get started</div></p>
      <button name="button">button quiz</button>
      <select class="" name="">
        <option value="">Select a language</option>
        <option value="english">English</option>
        <option value="日本語">日本語</option>
      </select>
    </div>
    <div class="animeQuiz">
      <div class="anime_picture">
        <img src="" alt="">
      </div>
      <div class="choices">
        <div class="choice">
          <div class=""></div>
        </div>
        <div class="choice">
          <div class=""></div>
        </div>
        <div class="choice">
          <div class=""></div>
        </div>
        <div class="choice">
          <div class=""></div>
        </div>
        <div class="choice">
          <div class=""></div>
        </div>
      </div>
      <header>
        <div class="">Select the name corresponding to the image</div>
      </header>
      <div class="progressBar"></div>
      <div class="timer"></div>
      <div class="squares"></div>
    </div>
    <div class="finalScore">
      <img src="images/dragon-ball-z-goku.gif" alt="">
    </div>
    <p class="finalMessage">
      <div class=""></div>
    </p>

  </body>
  <script src="index.js" type="text/javascript"></script>
</html>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

const intro = document.querySelector(".intro");
const select = document.querySelector("select");
const finalScoreImage = document.getElementById("finalScoreImage");
const welcomeText = document.querySelector(".welcomeText")
const btn = document.querySelector("button");
const header = document.querySelector("header")
const animeQuiz = document.querySelector(".animeQuiz");
const timer = document.querySelector(".timer");
const anime_picture = document.querySelector(".anime_picture img");
const choices = [...document.querySelector(".choices").children];
const numberOfChoices = choices.length;
const finalScore = document.querySelector(".finalScore");
const squares = document.querySelector(".squares");
const progressBar = document.querySelector(".progressBar");
console.log(progressBar)
const squaresArray = [...squares.children];
let element;
[score, counter, time, timeUp] = [0, 0, 0, 10];
let Clock;

let japaneseAnime = []


let japaneseAnimeJapanese = [
  {
  name: "ドラゴンボール",
  picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
},
{
  name: "進撃の巨人",
  picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJYjy_bS8t3ScWyG7q94fIltnar3ChaOHmGA&usqp=CAU"
},
{
  name: "ナルト",
  picture: "https://res.cloudinary.com/jerrick/image/upload/v1616592065/605b3cc118e784001e22da0d.jpg"
},
{
  name: "鬼滅の刃",
  picture: "https://cdn.vox-cdn.com/thumbor/gcVHhhZ4VwVswvbDPvI-RfQ7ECQ=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/19721018/Tanjiro__Demon_Slayer_.png"
},
{
  name: "攻殻機動隊",
  picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8VBbI5HMki5cmjP_Gq0TdyA6VZn_0_fmkhg&usqp=CAU"
}
]


let japaneseAnimeEnglish = [
  {
  name: "dragon ball",
  picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
},
{
  name: "Attack On Titans",
  picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJYjy_bS8t3ScWyG7q94fIltnar3ChaOHmGA&usqp=CAU"
},
{
  name: "naruto",
  picture: "https://res.cloudinary.com/jerrick/image/upload/v1616592065/605b3cc118e784001e22da0d.jpg"
},
{
  name: "Demon Slayer",
  picture: "https://cdn.vox-cdn.com/thumbor/gcVHhhZ4VwVswvbDPvI-RfQ7ECQ=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/19721018/Tanjiro__Demon_Slayer_.png"
},
{
  name: "Ghost in the shell",
  picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8VBbI5HMki5cmjP_Gq0TdyA6VZn_0_fmkhg&usqp=CAU"
}
]


select.addEventListener("change", selectLanguage)

function selectLanguage() {
  if(select.value === "日本語") {
    welcomeText.innerHTML = "アニメクイズへようこそ下のボタンをクリックしてゲームを初めて下さい";
    btn.innerHTML = "クイズボタン";
    header.innerHTML = "画像に対応する名称を選択する";
    japaneseAnime = japaneseAnimeJapanese;
  } else {
    welcomeText.innerHTML = "Welcome to the amime quiz click on the button below to get started";
    btn.innerHTML = "quiz button";
    header.innerHTML = "select the name corresponding to the image"
    japaneseAnime = japaneseAnimeEnglish;
  }
  btn.style.display = "block"
  select.style.display = "none"
}


btn.addEventListener("click", startQuiz);

function startQuiz() {
  intro.style.display = "none";
  animeQuiz.style.display = "flex";
  app();
}

// generates number between 0 and 3
function randomNumber() {
  return Math.floor(Math.random()*numberOfChoices);
}

// generates array of uniques numbers
function uniqueNumbers() {
  let listUniqueNumbers = new Set();
  while(listUniqueNumbers.size < numberOfChoices) {
    listUniqueNumbers.add(randomNumber());
  }
  return [...listUniqueNumbers];
}

// display choices
function displayChoicesAndPicture() {
  anime_picture.src = japaneseAnime[counter].picture;
  let unique = uniqueNumbers();
  choices.forEach((choice, i) => {
    choice.innerHTML = japaneseAnime[unique[i]].name;
  })
}

// checking user answer
function userAnswer() {
  for(var i = 0; i < japaneseAnime.length; i++) {
    choices[i].addEventListener("click", checkAnswer);
  }
}

function checkAnswer(e) {
  e.target.innerHTML === japaneseAnime[counter].name ? rightAnswer() : wrongAnswer();
}

function rightAnswer() {
  document.getElementById(counter).style.backgroundColor = "green"
  score++;
  console.log(score)
  update();
}

function wrongAnswer() {
  document.getElementById(counter).style.backgroundColor = "red"
  update();
}

function update() {
  if(counter < numberOfChoices - 1) {
    time = 0;
    counter++;
    displayChoicesAndPicture();
  } else {
    animeQuiz.style.display = "none"
    userScore();
  }
}

function userScore() {
  finalScore.style.display = "flex";
  finalScoreImage.style.display = "flex"
  let scoreDisplayed = (score / numberOfChoices) * 100;
  console.log(score)
  finalScore.innerHTML = `<p>your final score is ${scoreDisplayed}%</p>`
  // `<p>your final score is ${scoreDisplayed}%</p>`
}

  function displaySquares() {
    for(var i = 0; i < numberOfChoices; i++) {
      element = document.createElement("div");
      element.setAttribute("class", "square");
      element.setAttribute("id", i);
      squares.appendChild(element);
    }
  }

  function timedQuiz() {
    if(time < timeUp) {
      time++
    } else {
      time = 0;
      wrongAnswer();
      update();
    }
      timer.innerHTML = time;
  }


  const app = () => {
    displayChoicesAndPicture();
    userAnswer();
    displaySquares();
    setInterval(timedQuiz, 1000)
  }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  min-height: 100vh;
  font-family: sans-serif;
  background-repeat: no-repeat;
}

p {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 300px;
  /* background-color: red; */
}

.welcomeText {
  position: absolute;
  color: white;
  font-size: 35px;
  color: rgb(255,0,0);
}

button {
  position: absolute;
  transform: translateY(10ch);
}

select {
  position: absolute;
  transform: translateY(20ch);

}

.intro_image {
  position: fixed;
  object-fit: cover;
}

.intro {
  display: flex;
  justify-content: center;
  align-items: center;
  /* position: fixed; */

  height: 100%;
  width: 100%;
  border: 1px blue solid;
}

.animeQuiz {
  display: none;
  justify-content: center;
  align-items: center;
  position: relative;

  height: 800px;
  width: 800px;
  border: 1px red solid;
}

.anime_picture {
  height: 400px;
  width: 400px;
  position: absolute;
}

.choices {
  height: 100px;
  width: 100%;
  border: 1px blue solid;
  bottom: 0;
  position: absolute;

  display: flex;
  justify-content: space-around;
  align-items: center;
}

.finalScore {
  position: relative;
  display: none;
  justify-content: center;
  /* align-items: center;
  height: 400px;
  width: 400px;
  border: 1px blue solid; */
  /* background: red; */
}

#finalScoreImage {
  display: none;
}

.finalMessage {
  position: absolute;
}

.choices > div {
  height: 80px;
  width: 150px;
  border: 1px black solid;
  background-color: #EE6F57;
  cursor: pointer;
  border-radius: 10px;
}

.choices > div:hover {
  color: #EE6F;
}

.welcomeText {
  width: auto;
  height: auto;
  background: white;
  border-radius: 5px;
}

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

  padding: 10px;
  color: white;
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100px;
  border: 1px black solid;
  position: absolute;
  top: 0;
  font-family: fantasy;
}

p .finalMessage {
  position: absolute;
}

.square {
  height: 15px;
  width: 15px;
  background-color: gray;
  bottom: 150px;
  margin: 10px;
}

.squares {
  position: absolute;
  bottom: 100px;
  display: flex;
  justify-content: space-around;
}

.timer {
  position: absolute;
  bottom: 150px;
}

.progressBar {
  height: 10px;
  width: 300px;
  position: absolute;
  bottom: 140px;
  background-color: grey;
  border: 1px black solid;
}

button {
  display: none;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css">
    <title>anime page</title>
  </head>
  <body>
    <div class="intro">
      <img class="intro_image" src="images/backgroundImage.jpeg" alt="">
      <p><div class=welcomeText>Welcome to the amime quiz click on the button below to get started</div></p>
      <button type="button" name="button">button quiz</button>
      <select class="" name="">
        <option value="">Select a language</option>
        <option value="english">English</option>
        <option value="日本語">日本語</option>
      </select>
    </div>
    <div class="animeQuiz">
      <div class="anime_picture">
        <img src="" alt="">
      </div>
      <div class="choices">
        <div class="choice">
          <div class=""></div>
        </div>
        <div class="choice">
          <div class=""></div>
        </div>
        <div class="choice">
          <div class=""></div>
        </div>
        <div class="choice">
          <div class=""></div>
        </div>
        <div class="choice">
          <div class=""></div>
        </div>
      </div>
      <header>
        <div class="">Select the name corresponding to the image</div>
      </header>
      <div class="progressBar"></div>
      <div class="timer"></div>
      <div class="squares"></div>
    </div>
    <div class="finalScore">
      <img id="finalScoreImage" src="images/dragon-ball-z-goku.gif" alt="">
      <p class="finalMessage">well done, you've completed the quiz</p>
    </div>


  </body>
  <script src="index.js" type="text/javascript"></script>
</html>

Solution 1:^[1]

You have invalid HTML. P cannot contain a DIV and the empty P created by the two

<p><div class=welcomeText></div></p>

and

<p class="finalMessage">
  <div class=""></div>
</p>

you have blocks clicking the select

Here is a working version

const intro = document.querySelector(".intro");
const finalMessage = document.querySelector(".finalMessage")
const select = document.querySelector("select");
const finalScoreImage = document.getElementById("finalScoreImage");
const welcomeText = document.querySelector(".welcomeText")
const btn = document.querySelector("button");
const header = document.querySelector("header")
const animeQuiz = document.querySelector(".animeQuiz");
const timer = document.querySelector(".timer");
const anime_picture = document.querySelector(".anime_picture img");
const choices = [...document.querySelector(".choices").children];
const numberOfChoices = choices.length;
const finalScore = document.querySelector(".finalScore");
const squares = document.querySelector(".squares");
const progressBar = document.querySelector(".progressBar");
const squaresArray = [...squares.children];
let element;
[score, counter, time, timeUp] = [0, 0, 0, 10];
let Clock;

let japaneseAnime = []


let japaneseAnimeJapanese = [{
    name: "???????",
    picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
  },
  {
    name: "?????",
    picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJYjy_bS8t3ScWyG7q94fIltnar3ChaOHmGA&usqp=CAU"
  },
  {
    name: "???",
    picture: "https://res.cloudinary.com/jerrick/image/upload/v1616592065/605b3cc118e784001e22da0d.jpg"
  },
  {
    name: "????",
    picture: "https://cdn.vox-cdn.com/thumbor/gcVHhhZ4VwVswvbDPvI-RfQ7ECQ=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/19721018/Tanjiro__Demon_Slayer_.png"
  },
  {
    name: "?????",
    picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8VBbI5HMki5cmjP_Gq0TdyA6VZn_0_fmkhg&usqp=CAU"
  }
]


let japaneseAnimeEnglish = [{
    name: "dragon ball",
    picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
  },
  {
    name: "Attack On Titans",
    picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJYjy_bS8t3ScWyG7q94fIltnar3ChaOHmGA&usqp=CAU"
  },
  {
    name: "naruto",
    picture: "https://res.cloudinary.com/jerrick/image/upload/v1616592065/605b3cc118e784001e22da0d.jpg"
  },
  {
    name: "Demon Slayer",
    picture: "https://cdn.vox-cdn.com/thumbor/gcVHhhZ4VwVswvbDPvI-RfQ7ECQ=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/19721018/Tanjiro__Demon_Slayer_.png"
  },
  {
    name: "Ghost in the shell",
    picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8VBbI5HMki5cmjP_Gq0TdyA6VZn_0_fmkhg&usqp=CAU"
  }
]


select.addEventListener("change", selectLanguage)

function selectLanguage() {
  if (select.value === "???") {
    welcomeText.innerHTML = "?????????????????????????????????";
    btn.innerHTML = "??????";
    header.innerHTML = "??????????????";
    japaneseAnime = japaneseAnimeJapanese;
  } else {
    welcomeText.innerHTML = "Welcome to the amime quiz click on the button below to get started";
    btn.innerHTML = "quiz button";
    header.innerHTML = "select the name corresponding to the image"
    japaneseAnime = japaneseAnimeEnglish;
  }
  btn.style.display = "block"
  select.style.display = "none"
}


btn.addEventListener("click", startQuiz);


function startQuiz() {
  intro.style.display = "none";
  animeQuiz.style.display = "flex";
  finalScore.style.display = "none"
  app();
  console.log("josue")
}

// generates number between 0 and 3
function randomNumber() {
  return Math.floor(Math.random() * numberOfChoices);
}

// generates array of uniques numbers
function uniqueNumbers() {
  let listUniqueNumbers = new Set();
  while (listUniqueNumbers.size < numberOfChoices) {
    listUniqueNumbers.add(randomNumber());
  }
  return [...listUniqueNumbers];
}

// display choices
function displayChoicesAndPicture() {
  anime_picture.src = japaneseAnime[counter].picture;
  let unique = uniqueNumbers();
  choices.forEach((choice, i) => {
    choice.innerHTML = japaneseAnime[unique[i]].name;
  })
}

// checking user answer
function userAnswer() {
  for (var i = 0; i < japaneseAnime.length; i++) {
    choices[i].addEventListener("click", checkAnswer);
  }
}

function checkAnswer(e) {
  e.target.innerHTML === japaneseAnime[counter].name ? rightAnswer() : wrongAnswer();
}

function rightAnswer() {
  document.getElementById(counter).style.backgroundColor = "green"
  score++;
  console.log(score)
  update();
}

function wrongAnswer() {
  document.getElementById(counter).style.backgroundColor = "red"
  update();
}

function update() {
  if (counter < numberOfChoices - 1) {
    time = 0;
    counter++;
    displayChoicesAndPicture();
  } else {
    animeQuiz.style.display = "none"
    userScore();
  }
}

function userScore() {
  finalScore.style.display = "block";
  finalMessage.style.display = "flex";

  let scoreDisplayed = (score / numberOfChoices) * 100;
  finalMessage.innerHTML = `Well done you've completed the quiz. You score is ${scoreDisplayed}`
}

function displaySquares() {
  for (var i = 0; i < numberOfChoices; i++) {
    element = document.createElement("div");
    element.setAttribute("class", "square");
    element.setAttribute("id", i);
    squares.appendChild(element);
  }
}

function timedQuiz() {
  if (time < timeUp) {
    time++
  } else {
    time = 0;
    wrongAnswer();
    update();
  }
  timer.innerHTML = time;
}


const app = () => {
  displayChoicesAndPicture();
  userAnswer();
  displaySquares();
  setInterval(timedQuiz, 1000)
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: sans-serif;
  background-repeat: no-repeat;
}

p {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 300px;
}

.welcomeText {
  position: absolute;
  color: white;
  font-size: 35px;
  color: rgb(255, 0, 0);
}

button {
  position: absolute;
  transform: translateY(10ch);
}

select {
  position: absolute;
  transform: translateY(20ch);
}

.intro_image {
  position: fixed;
  object-fit: cover;
}

.intro {
  display: flex;
  justify-content: center;
  align-items: center;
  /* position: fixed; */
  height: 100%;
  width: 100%;
  border: 1px blue solid;
}

.animeQuiz {
  display: none;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 800px;
  width: 800px;
  border: 1px red solid;
}

.anime_picture {
  height: 400px;
  width: 400px;
  position: absolute;
}

.choices {
  height: 100px;
  width: 100%;
  border: 1px blue solid;
  bottom: 0;
  position: absolute;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.finalScore {
  display: none;
  position: relative;
  height: 400px;
  width: 400px;
  border: 1px blue solid;
  background: red;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.finalMessage {
  position: absolute;
  justify-content: center;
  align-items: center;
  display: none;
  border: solid black 1px;
  border-radius: 100%;
  height: 200px;
  width: 500px;
  color: blue;
  transform: translateY(-120px);
  transform: translateX(500px);
}

.choices>div {
  height: 80px;
  width: 150px;
  border: 1px black solid;
  background-color: #EE6F57;
  cursor: pointer;
  border-radius: 10px;
}

.choices>div:hover {
  color: #EE6F;
}

.welcomeText {
  width: auto;
  height: auto;
  background: white;
  border-radius: 5px;
}

.choice {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  color: white;
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px;
  border: 1px black solid;
  position: absolute;
  top: 0;
  font-family: fantasy;
}

.square {
  height: 15px;
  width: 15px;
  background-color: gray;
  bottom: 150px;
  margin: 10px;
}

.squares {
  position: absolute;
  bottom: 100px;
  display: flex;
  justify-content: space-around;
}

.timer {
  position: absolute;
  bottom: 150px;
}

.progressBar {
  height: 10px;
  width: 300px;
  position: absolute;
  bottom: 140px;
  background-color: grey;
  border: 1px black solid;
}

button {
  display: none;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="index.css">
  <title>anime page</title>
</head>

<body>
  <div class="intro">
    <img class="intro_image" src="images/backgroundImage.jpeg" alt="">
    <div class=welcomeText>Welcome to the amime quiz click on the button below to get started</div>
    <button name="button">button quiz</button>
    <select class="" name="">
      <option value="">Select a language</option>
      <option value="english">English</option>
      <option value="???">???</option>
    </select>
  </div>
  <div class="animeQuiz">
    <div class="anime_picture">
      <img src="" alt="">
    </div>
    <div class="choices">
      <div class="choice">
        <div class=""></div>
      </div>
      <div class="choice">
        <div class=""></div>
      </div>
      <div class="choice">
        <div class=""></div>
      </div>
      <div class="choice">
        <div class=""></div>
      </div>
      <div class="choice">
        <div class=""></div>
      </div>
    </div>
    <header>
      <div class="">Select the name corresponding to the image</div>
    </header>
    <div class="progressBar"></div>
    <div class="timer"></div>
    <div class="squares"></div>
  </div>
  <div class="finalScore">
    <img src="images/dragon-ball-z-goku.gif" alt="">
  </div>
  <div class="finalMessage">
    
  </div>

</body>
<script src="index.js" type="text/javascript"></script>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'button not triggering call back function when clicked on. No way to know why as no error's thrown by console

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]