-2

How to shuffle questions order when game starts?

I have a working code of a 10 text questions' trivia game with a timer (html, javascript, css). Already studied 1 to get an idea. However, my javascript coding skills are very limited. I would appreciate if you can point me to the right direction, so I can achieve my goal.

(function() {
  const playButton = document.querySelector("#play");
  const letsstartButton = document.querySelector("#lets-start");
  const playagainButton = document.querySelector("#play-again");
  const howToPlayButton = document.querySelector("#how-to-play-button");
  const closeHowToButton = document.querySelector("#close-how-to");
  const howToPlayScreen = document.querySelector(".how-to-play-screen");
  const mainScreen = document.querySelector(".main-screen");
  const triviaScreen = document.querySelector(".trivia-screen");
  const resultScreen = document.querySelector(".result-screen");

  playButton.addEventListener("click", startTrivia);
  letsstartButton.addEventListener("click", startTrivia);
  playagainButton.addEventListener("click", startTrivia);

  howToPlayButton.addEventListener("click", function() {
    howToPlayScreen.classList.remove("hidden");
    mainScreen.classList.add("hidden");
  });

  closeHowToButton.addEventListener("click", function() {
    howToPlayScreen.classList.add("hidden");
    mainScreen.classList.remove("hidden");
  });

  const questionLength = 10;
  let questionIndex = 0;
  let score = 0;
  let questions = [];
  let timer = null;

  function startTrivia() {
    //show spinner
    questionIndex = 0;
    questions = [];
    score = 0;

    window.setTimeout(function() {
      //get questions from server
      mainScreen.classList.add("hidden");
      howToPlayScreen.classList.add("hidden");
      resultScreen.classList.add("hidden");
      triviaScreen.classList.remove("hidden");

      questions = [{
          answers: ["Roma", "Athens", "London", "Japan"],
          correct: "Roma",
          text: "YOUR TEXT HERE."
        },
        {
          answers: ["Roma1", "Athens1", "London1", "Japan1"],
          correct: "Athens1",
          text: "YOUR TEXT HERE."
        },
        {
          answers: ["Roma2", "Athens2", "London2", "Japan2"],
          correct: "London2",
          text: "YOUR TEXT HERE."
        },
        {
          answers: ["Roma3", "Athens3", "London3", "Japan3"],
          correct: "London3",
          text: "YOUR TEXT HERE."
        },
        {
          answers: ["Roma4", "Athens4", "London4", "Japan4"],
          correct: "Athens4",
          text: "YOUR TEXT HERE."
        },
        {
          answers: ["Roma5", "Athens5", "London5", "Japan5"],
          correct: "Athens5",
          text: "YOUR TEXT HERE."
        },
        {
          answers: ["Roma6", "Athens6", "London6", "Japan6"],
          correct: "Roma6",
          text: "YOUR TEXT HERE."
        },
        {
          answers: ["Roma7", "Athens7", "London7", "Japan7"],
          correct: "Japan7",
          text: "YOUR TEXT HERE."
        },
        {
          answers: ["Roma8", "Athens8", "London8", "Japan8"],
          correct: "London8",
          text: "YOUR TEXT HERE."
        },
        {
          answers: ["Roma9", "Athens9", "London9", "Japan9"],
          correct: "Japan9",
          text: "YOUR TEXT HERE."
        }
      ];

      const questionCount = document.getElementById("question-count");
      questionCount.innerHTML = questionLength.toString();
      displayNextQuestion();
    }, 50);
  }

  const isTriviaCompleted = function() {
    return questionLength === questionIndex;
  };

  function displayNextQuestion() {
    const answersContainer = document.getElementById("answers-container");
    const answerButtons = answersContainer.querySelectorAll(".default-button");

    answerButtons.forEach(function(element) {
      element.disabled = false;
      element.classList.remove("correct");
      element.classList.remove("wrong");
    });

    if (isTriviaCompleted()) {
      showScores();
    } else {
      startProgressbar();
      timer = window.setTimeout(function() {
        guess(null);
      }, 10000);

      setQuizText("This is from");

      const textElement = document.getElementById("question-placement");
      textElement.innerHTML = questions[questionIndex].text;

      const choices = questions[questionIndex].answers;
      for (let i = 0; i < choices.length; i++) {
        const element = document.getElementById(`answer${i}`);
        element.innerHTML = choices[i];

        element.addEventListener("click", handleAnswerClick);
      }

      showProgress();
    }
  }

  function handleAnswerClick(e) {
    const el = e.currentTarget;
    const answer = el.innerHTML;
    el.removeEventListener("click", handleAnswerClick);
    guess(answer);
  }

  function showProgress() {
    const questionIndexElement = document.getElementById("question-index");
    const index = questionIndex + 1;
    questionIndexElement.innerHTML = index.toString();
  }

  function guess(answer) {
    clearTimeout(timer);
    const answersContainer = document.getElementById("answers-container");
    const answerButtons = answersContainer.querySelectorAll(".default-button");

    answerButtons.forEach((element) => {
      element.disabled = true;
      if (element.innerHTML === questions[questionIndex].correct) {
        element.classList.add("correct");
      }
    });

    stopProgressbar();

    if (questions[questionIndex].correct === answer) { // correct answer
      score++;
      setQuizText("Fantastic … Correct!");
    } else if (answer) { // incorrect answer
      setQuizText("Nice try … You were close.");
      answerButtons.forEach((element) => {
        if (element.innerHTML === answer) {
          element.classList.add("wrong");
        }
      });
    } else {
      setQuizText("Your time is out! Oh no!");
    }

    questionIndex++;

    window.setTimeout(function() {
      displayNextQuestion();
    }, 2500);
  }

  function setQuizText(text) {
    const el = document.getElementById("trivia-text");
    el.innerHTML = text;
  }

  function showScores() {
    const scoreElement = document.getElementById("score");
    const scoreTotalElement = document.getElementById("score-total");
    const scoreNameElement = document.getElementById("score-name");

    scoreElement.innerHTML = score.toString();
    scoreTotalElement.innerHTML = questionLength.toString();

    if (score < 4) {
      scoreNameElement.innerHTML = "Newbie";
    } else if (score < 7) {
      scoreNameElement.innerHTML = "Rookie";
    } else if (score < 10) {
      scoreNameElement.innerHTML = "Expert";
    } else {
      scoreNameElement.innerHTML = "Grandmaster";
    }

    triviaScreen.classList.add("hidden");
    resultScreen.classList.remove("hidden");
  }

  function startProgressbar() {
    // select div turn into progressbar
    const progressbar = document.getElementById("progress-bar");
    progressbar.innerHTML = "";
    // create div changes width show progress
    const progressbarInner = document.createElement("span");

    // Append progressbar to main progressbardiv
    progressbar.appendChild(progressbarInner);

    // When all set start animation
    progressbarInner.style.animationPlayState = "running";
  }

  function stopProgressbar() {
    const progressbar = document.getElementById("progress-bar");
    const progressbarInner = progressbar.querySelector("span");
    progressbarInner.style.animationPlayState = "paused";
  }
}());
  *,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Verdana', cursive;
  text-transform: uppercase;
  color: #ccc;
  letter-spacing: 2px;
}

.container {
  background: #999999;
}

.wrapper {
  max-width: 800px;
  margin: auto;
}

.screen-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 20px 20px 70px;
  position: relative;
}

.hidden {
  display: none;
}

.trivia-screen-step {
  color: #ccc;
}

.trivia-image-wrapper {
  max-width: 100%;
  margin: 50px auto;
  position: relative;
}

.trivia-image {
  max-width: 100%;
  width: 300px;
  position: relative;
  z-index: 1;
}

.trivia-timer {
  width: 550px;
  max-width: 100%;
  height: 20px;
  border-radius: 3em;
  margin-bottom: 50px;
  padding: 5px 6px;
}

.trivia-timer span {
  display: inline-block;
  background: linear-gradient(90deg, #fff, #06c);
  height: 10px;
  vertical-align: top;
  border-radius: 3em;
  animation: progressbar-countdown;
  animation-duration: 10s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-play-state: paused;
  animation-timing-function: linear;
}

@keyframes progressbar-countdown {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

.trivia-question {
  margin-bottom: 50px;
}

.how-to-play-screen .default-button {
  margin-bottom: 60px;
  margin-top: 30px;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 50px;
  width: 600px;
  max-width: 100%;
}

.button-outer {
  flex-basis: 100%;
  text-align: center;
  margin-bottom: 20px;
  max-width: 100%;
}

.default-button {
  background: #333333;
  border-radius: 3em;
  font-family: 'Verdana', cursive;
  font-size: 18px;
  color: #fff;
  letter-spacing: 2.45px;
  padding: 10px 8px;
  text-transform: uppercase;
  transition: background .2s;
  outline: none;
  width: 250px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.default-button:hover {
  background: #222;
}

.default-button[disabled] {
  background: transparent;
  color: #222;
  cursor: default;
}

.default-button[disabled]:hover {
  background: transparent;
}

.default-button.correct {
  cursor: default;
  background: #2bb24a;
  color: #fff;
}

.default-button.correct:hover {
  background: #2bb24a;
  color: #fff;
}

.default-button.wrong {
  cursor: default;
  background: #F6484C;
  color: #fff;
}

.default-button.wrong:hover {
  background: #F6484C;
  color: #fff;
}

.title {
  font-size: 32px;
  margin-top: 100px;
}

.text {
  line-height: 24px;
  font-size: 16px;
  font-family: 'Verdana', sans-serif;
  text-align: center;
  color: #ffffff;
  text-transform: none;
}

.trivia-logo {
  position: absolute;
  bottom: 20px;
}

.trivia-corner-logo {
  position: absolute;
  left: 0;
  top: 15px;
  width: 100px;
}

.close-button {
  position: absolute;
  top: 50px;
  right: 0;
  background: transparent;
  border: none;
  color: #fff;
  font-family: 'Verdana', cursive;
  font-size: 34px;
  outline: none;
  text-transform: none;
  cursor: pointer;
  transition: color .2s;
}

.close-button:hover {
  color: #eee;
}

.score-name {
  margin: 0 0 28px;
  font-size: 46px;
}

.score {
  font-size: 18px;
  margin-bottom: 10px;
}

.description {
  text-align: center;
  font-family: Verdana, sans-serif;
  font-size: 16px;
  color: #fff;
  text-transform: none;
  line-height: 24px;
  display: inline-block;
  margin-bottom: 30px;
}

@media screen and (min-width: 700px) {
  .screen-section {
    padding: 50px;
  }
<div class="container">
  <div class="wrapper">
    <div class="screen-section main-screen">
      <div class="trivia-image-wrapper">
        <img alt="LOGO" src="./assets/Game-Logo.png" class="trivia-image">
      </div>
      <h1>Trivia</h1>
      <div class="button-container">
        <div class="button-outer">
          <button class="default-button" id="play" type="button">Play</button>
        </div>
        <div class="button-outer">
          <button class="default-button" id="how-to-play-button" type="button">How to play?</button>
        </div>
      </div>
      <div class="trivia-logo">
        <img alt="logo" src="./assets/-Logo.png">
      </div>
    </div>
    <div class="screen-section hidden how-to-play-screen">
      <img alt="LOGO" src="./assets/Game-Logo.png" class="trivia-corner-logo">
      <button class="close-button" id="close-how-to" type="button">X</button>
      <h2 class="title">How to Play</h2>
      <p>Answer questions to score points.</p>
      <button class="default-button" id="lets-start" type="button">Ok. Let's start</button>
      <div class="trivia-logo">
        <img alt="logo" src="./assets/-Logo.png">
      </div>
    </div>
    <div class="screen-section hidden trivia-screen">
      <div class="trivia-screen-step"><span id="question-index">1</span> out of <span id="question-count">10</span></div>
      <div class="trivia-image-wrapper">
        <p id="question-placement"></p>
      </div>
      <div class="trivia-timer" id="progress-bar"></div>
      <div class="trivia-question" id="trivia-text"></div>
      <div class="button-container" id="answers-container">
        <div class="button-outer">
          <button class="default-button" id="answer0" type="button"></button>
        </div>
        <div class="button-outer">
          <button class="default-button" id="answer1" type="button"></button>
        </div>
        <div class="button-outer">
          <button class="default-button" id="answer2" type="button"></button>
        </div>
        <div class="button-outer">
          <button class="default-button" id="answer3" type="button"></button>
        </div>
      </div>
      <div class="trivia-logo">
        <img alt="logo" src="./assets/-Logo.png">
      </div>
    </div>
    <div class="screen-section hidden result-screen">
      <div class="trivia-image-wrapper">
        <img alt="Trivia LOGO" src="./assets/Game-Logo.png" class="trivia-image">
      </div>
      <p class="score"><span id="score">0</span> out of <span id="score-total">10</span></p>
      <h1 class="score-name" id="score-name">Trivia</h1>
      <span class="description">you will learn more.</span>
      <button class="default-button" id="play-again" type="button">Play again</button>
      <div class="trivia-logo">
        <img alt=" logo" src="./assets/-Logo.png">
      </div>
    </div>

  </div>
</div>
NDi
  • 184
  • 1
  • 2
  • 17
  • 2
    Please see [Why is “Can someone help me?” not an actual question?](https://meta.stackoverflow.com/q/284236/328193) You are encouraged to make an attempt. If during your attempt you encounter a specific problem, such as a specific operation producing an error or an unexpected result, we can help with that. To learn more about this community and how we can help you, please start with the [tour] and read [ask] and its linked resources. – David Jan 11 '23 at 19:23
  • 1
    Continue to put your questions in an array or an object. and object is likely a better way. then your object should have 2 methods: loadQuestions() ( from json file, rather than text ) and provideRandomQuestion() - that's an OOP way to do it – This Guy Jan 11 '23 at 19:25
  • 1
    Regarding the edit... *"Can the questions be served from a simple .txt file (so I can scale)?"* - If this game is running in a browser on a website and you want to serve questions from a text file on the same server then a JSON file would be the way to go. You can make an AJAX request to fetch that JSON data. *"Can the javascript choose the questions in a random order, every time the games starts?"* - Yes, you can for example keep the questions in an array and select a random element from that array. – David Jan 11 '23 at 19:30
  • #1: Get questions from .txt file: Won't work. Javascript in the browser cannot load files on the local drive* (* In google chrome you can actually load files) – ControlAltDel Jan 11 '23 at 19:35
  • 1
    #2: Randomization: https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array – ControlAltDel Jan 11 '23 at 19:35
  • 1
    The problem with doing quizes in JavaScript is that any user who knows how to either view the page source (through right click) or how to open the developer panel (F12 normally) will be able to see the answer right there in the code. In general, creating quizzes requires that there be a server which can score question answers – ControlAltDel Jan 11 '23 at 19:38

1 Answers1

1

In your case the best way would be to create an API (for example https://fastapi.tiangolo.com/) that would return a random question, but if you want to have it in a separate file you would simply have to move the variable questions to another javascript file and import it into the <head> of your web page.

To randomize the JSON you can use the following function:

function shuffleQuestions(questions) {
    for (let i = questions.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [questions[i], questions[j]] = [questions[j], questions[i]];
    }
}


(function() {
  const playButton = document.querySelector("#play");
  const letsstartButton = document.querySelector("#lets-start");
  const playagainButton = document.querySelector("#play-again");
  const howToPlayButton = document.querySelector("#how-to-play-button");
  const closeHowToButton = document.querySelector("#close-how-to");
  const howToPlayScreen = document.querySelector(".how-to-play-screen");
  const mainScreen = document.querySelector(".main-screen");
  const triviaScreen = document.querySelector(".trivia-screen");
  const resultScreen = document.querySelector(".result-screen");

  playButton.addEventListener("click", startTrivia);
  letsstartButton.addEventListener("click", startTrivia);
  playagainButton.addEventListener("click", startTrivia);

  howToPlayButton.addEventListener("click", function() {
    howToPlayScreen.classList.remove("hidden");
    mainScreen.classList.add("hidden");
  });

  closeHowToButton.addEventListener("click", function() {
    howToPlayScreen.classList.add("hidden");
    mainScreen.classList.remove("hidden");
  });

  const questionLength = 10;
  let questionIndex = 0;
  let score = 0;
  let questions = [];
  let timer = null;

  function startTrivia() {
    //show spinner
    questionIndex = 0;
    questions = [];
    score = 0;

    window.setTimeout(function() {
      //get questions from server
      mainScreen.classList.add("hidden");
      howToPlayScreen.classList.add("hidden");
      resultScreen.classList.add("hidden");
      triviaScreen.classList.remove("hidden");

      questions = [{
          answers: ["Roma", "Athens", "London", "Japan"],
          correct: "Roma",
          text: "YOUR TEXT HERE."
        },
        {
          answers: ["Roma1", "Athens1", "London1", "Japan1"],
          correct: "Athens1",
          text: "YOUR TEXT HERE."
        },
        {
          answers: ["Roma2", "Athens2", "London2", "Japan2"],
          correct: "London2",
          text: "YOUR TEXT HERE."
        },
        {
          answers: ["Roma3", "Athens3", "London3", "Japan3"],
          correct: "London3",
          text: "YOUR TEXT HERE."
        },
        {
          answers: ["Roma4", "Athens4", "London4", "Japan4"],
          correct: "Athens4",
          text: "YOUR TEXT HERE."
        },
        {
          answers: ["Roma5", "Athens5", "London5", "Japan5"],
          correct: "Athens5",
          text: "YOUR TEXT HERE."
        },
        {
          answers: ["Roma6", "Athens6", "London6", "Japan6"],
          correct: "Roma6",
          text: "YOUR TEXT HERE."
        },
        {
          answers: ["Roma7", "Athens7", "London7", "Japan7"],
          correct: "Japan7",
          text: "YOUR TEXT HERE."
        },
        {
          answers: ["Roma8", "Athens8", "London8", "Japan8"],
          correct: "London8",
          text: "YOUR TEXT HERE."
        },
        {
          answers: ["Roma9", "Athens9", "London9", "Japan9"],
          correct: "Japan9",
          text: "YOUR TEXT HERE."
        }
      ];
      
      shuffleQuestions(questions);
      const questionCount = document.getElementById("question-count");
      questionCount.innerHTML = questionLength.toString();
      displayNextQuestion();
    }, 50);
  }

  const isTriviaCompleted = function() {
    return questionLength === questionIndex;
  };

  function displayNextQuestion() {
    const answersContainer = document.getElementById("answers-container");
    const answerButtons = answersContainer.querySelectorAll(".default-button");

    answerButtons.forEach(function(element) {
      element.disabled = false;
      element.classList.remove("correct");
      element.classList.remove("wrong");
    });

    if (isTriviaCompleted()) {
      showScores();
    } else {
      startProgressbar();
      timer = window.setTimeout(function() {
        guess(null);
      }, 10000);

      setQuizText("This is from");

      const textElement = document.getElementById("question-placement");
      textElement.innerHTML = questions[questionIndex].text;

      const choices = questions[questionIndex].answers;
      for (let i = 0; i < choices.length; i++) {
        const element = document.getElementById(`answer${i}`);
        element.innerHTML = choices[i];

        element.addEventListener("click", handleAnswerClick);
      }

      showProgress();
    }
  }

  function handleAnswerClick(e) {
    const el = e.currentTarget;
    const answer = el.innerHTML;
    el.removeEventListener("click", handleAnswerClick);
    guess(answer);
  }

  function showProgress() {
    const questionIndexElement = document.getElementById("question-index");
    const index = questionIndex + 1;
    questionIndexElement.innerHTML = index.toString();
  }

  function guess(answer) {
    clearTimeout(timer);
    const answersContainer = document.getElementById("answers-container");
    const answerButtons = answersContainer.querySelectorAll(".default-button");

    answerButtons.forEach((element) => {
      element.disabled = true;
      if (element.innerHTML === questions[questionIndex].correct) {
        element.classList.add("correct");
      }
    });

    stopProgressbar();

    if (questions[questionIndex].correct === answer) { // correct answer
      score++;
      setQuizText("Fantastic … Correct!");
    } else if (answer) { // incorrect answer
      setQuizText("Nice try … You were close.");
      answerButtons.forEach((element) => {
        if (element.innerHTML === answer) {
          element.classList.add("wrong");
        }
      });
    } else {
      setQuizText("Your time is out! Oh no!");
    }

    questionIndex++;

    window.setTimeout(function() {
      displayNextQuestion();
    }, 2500);
  }

  function setQuizText(text) {
    const el = document.getElementById("trivia-text");
    el.innerHTML = text;
  }

  function showScores() {
    const scoreElement = document.getElementById("score");
    const scoreTotalElement = document.getElementById("score-total");
    const scoreNameElement = document.getElementById("score-name");

    scoreElement.innerHTML = score.toString();
    scoreTotalElement.innerHTML = questionLength.toString();

    if (score < 4) {
      scoreNameElement.innerHTML = "Newbie";
    } else if (score < 7) {
      scoreNameElement.innerHTML = "Rookie";
    } else if (score < 10) {
      scoreNameElement.innerHTML = "Expert";
    } else {
      scoreNameElement.innerHTML = "Grandmaster";
    }

    triviaScreen.classList.add("hidden");
    resultScreen.classList.remove("hidden");
  }

  function startProgressbar() {
    // select div turn into progressbar
    const progressbar = document.getElementById("progress-bar");
    progressbar.innerHTML = "";
    // create div changes width show progress
    const progressbarInner = document.createElement("span");

    // Append progressbar to main progressbardiv
    progressbar.appendChild(progressbarInner);

    // When all set start animation
    progressbarInner.style.animationPlayState = "running";
  }

  function stopProgressbar() {
    const progressbar = document.getElementById("progress-bar");
    const progressbarInner = progressbar.querySelector("span");
    progressbarInner.style.animationPlayState = "paused";
  }
  
  function shuffleQuestions(questions) {
    for (let i = questions.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [questions[i], questions[j]] = [questions[j], questions[i]];
    }
}
}());
*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Verdana', cursive;
  text-transform: uppercase;
  color: #ccc;
  letter-spacing: 2px;
}

.container {
  background: #999999;
}

.wrapper {
  max-width: 800px;
  margin: auto;
}

.screen-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 20px 20px 70px;
  position: relative;
}

.hidden {
  display: none;
}

.trivia-screen-step {
  color: #ccc;
}

.trivia-image-wrapper {
  max-width: 100%;
  margin: 50px auto;
  position: relative;
}

.trivia-image {
  max-width: 100%;
  width: 300px;
  position: relative;
  z-index: 1;
}

.trivia-timer {
  width: 550px;
  max-width: 100%;
  height: 20px;
  border-radius: 3em;
  margin-bottom: 50px;
  padding: 5px 6px;
}

.trivia-timer span {
  display: inline-block;
  background: linear-gradient(90deg, #fff, #06c);
  height: 10px;
  vertical-align: top;
  border-radius: 3em;
  animation: progressbar-countdown;
  animation-duration: 10s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-play-state: paused;
  animation-timing-function: linear;
}

@keyframes progressbar-countdown {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

.trivia-question {
  margin-bottom: 50px;
}

.how-to-play-screen .default-button {
  margin-bottom: 60px;
  margin-top: 30px;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 50px;
  width: 600px;
  max-width: 100%;
}

.button-outer {
  flex-basis: 100%;
  text-align: center;
  margin-bottom: 20px;
  max-width: 100%;
}

.default-button {
  background: #333333;
  border-radius: 3em;
  font-family: 'Verdana', cursive;
  font-size: 18px;
  color: #fff;
  letter-spacing: 2.45px;
  padding: 10px 8px;
  text-transform: uppercase;
  transition: background .2s;
  outline: none;
  width: 250px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.default-button:hover {
  background: #222;
}

.default-button[disabled] {
  background: transparent;
  color: #222;
  cursor: default;
}

.default-button[disabled]:hover {
  background: transparent;
}

.default-button.correct {
  cursor: default;
  background: #2bb24a;
  color: #fff;
}

.default-button.correct:hover {
  background: #2bb24a;
  color: #fff;
}

.default-button.wrong {
  cursor: default;
  background: #F6484C;
  color: #fff;
}

.default-button.wrong:hover {
  background: #F6484C;
  color: #fff;
}

.title {
  font-size: 32px;
  margin-top: 100px;
}

.text {
  line-height: 24px;
  font-size: 16px;
  font-family: 'Verdana', sans-serif;
  text-align: center;
  color: #ffffff;
  text-transform: none;
}

.trivia-logo {
  position: absolute;
  bottom: 20px;
}

.trivia-corner-logo {
  position: absolute;
  left: 0;
  top: 15px;
  width: 100px;
}

.close-button {
  position: absolute;
  top: 50px;
  right: 0;
  background: transparent;
  border: none;
  color: #fff;
  font-family: 'Verdana', cursive;
  font-size: 34px;
  outline: none;
  text-transform: none;
  cursor: pointer;
  transition: color .2s;
}

.close-button:hover {
  color: #eee;
}

.score-name {
  margin: 0 0 28px;
  font-size: 46px;
}

.score {
  font-size: 18px;
  margin-bottom: 10px;
}

.description {
  text-align: center;
  font-family: Verdana, sans-serif;
  font-size: 16px;
  color: #fff;
  text-transform: none;
  line-height: 24px;
  display: inline-block;
  margin-bottom: 30px;
}

@media screen and (min-width: 700px) {
  .screen-section {
    padding: 50px;
  }
<div class="container">
  <div class="wrapper">
    <div class="screen-section main-screen">
      <div class="trivia-image-wrapper">
        <img alt="LOGO" src="./assets/Game-Logo.png" class="trivia-image">
      </div>
      <h1>Trivia</h1>
      <div class="button-container">
        <div class="button-outer">
          <button class="default-button" id="play" type="button">Play</button>
        </div>
        <div class="button-outer">
          <button class="default-button" id="how-to-play-button" type="button">How to play?</button>
        </div>
      </div>
      <div class="trivia-logo">
        <img alt="logo" src="./assets/-Logo.png">
      </div>
    </div>
    <div class="screen-section hidden how-to-play-screen">
      <img alt="LOGO" src="./assets/Game-Logo.png" class="trivia-corner-logo">
      <button class="close-button" id="close-how-to" type="button">X</button>
      <h2 class="title">How to Play</h2>
      <p>Answer questions to score points.</p>
      <button class="default-button" id="lets-start" type="button">Ok. Let's start</button>
      <div class="trivia-logo">
        <img alt="logo" src="./assets/-Logo.png">
      </div>
    </div>
    <div class="screen-section hidden trivia-screen">
      <div class="trivia-screen-step"><span id="question-index">1</span> out of <span id="question-count">10</span></div>
      <div class="trivia-image-wrapper">
        <p id="question-placement"></p>
      </div>
      <div class="trivia-timer" id="progress-bar"></div>
      <div class="trivia-question" id="trivia-text"></div>
      <div class="button-container" id="answers-container">
        <div class="button-outer">
          <button class="default-button" id="answer0" type="button"></button>
        </div>
        <div class="button-outer">
          <button class="default-button" id="answer1" type="button"></button>
        </div>
        <div class="button-outer">
          <button class="default-button" id="answer2" type="button"></button>
        </div>
        <div class="button-outer">
          <button class="default-button" id="answer3" type="button"></button>
        </div>
      </div>
      <div class="trivia-logo">
        <img alt="logo" src="./assets/-Logo.png">
      </div>
    </div>
    <div class="screen-section hidden result-screen">
      <div class="trivia-image-wrapper">
        <img alt="Trivia LOGO" src="./assets/Game-Logo.png" class="trivia-image">
      </div>
      <p class="score"><span id="score">0</span> out of <span id="score-total">10</span></p>
      <h1 class="score-name" id="score-name">Trivia</h1>
      <span class="description">you will learn more.</span>
      <button class="default-button" id="play-again" type="button">Play again</button>
      <div class="trivia-logo">
        <img alt=" logo" src="./assets/-Logo.png">
      </div>
    </div>

  </div>
</div>
Joan Lara
  • 1,362
  • 8
  • 15
  • 1
    @NickDimou I edited my post and added the full code. I placed the function in the end of your file and I called it after declaring the JSON with all the questions. – Joan Lara Jan 11 '23 at 19:55