How to display content for x seconds? [closed]

// Define F1 driver data
const f1Drivers = [{
    name: 'Lewis Hamilton',
    wins: 103,
    podiums: 192,
    points: 4443.5
  },
  {
    name: 'George Russel',
    wins: 1,
    podiums: 9,
    points: 312
  },
  {
    name: 'Michael Schumacher',
    wins: 91,
    podiums: 155,
    points: 1566
  },
  {
    name: 'Sebastian Vettel',
    wins: 53,
    podiums: 122,
    points: 3098
  },
  {
    name: 'Alain Prost',
    wins: 51,
    podiums: 106,
    points: 798.5
  },
  {
    name: 'Ayrton Senna',
    wins: 41,
    podiums: 80,
    points: 614
  },
  {
    name: 'Nigel Mansell',
    wins: 31,
    podiums: 59,
    points: 482
  },
  {
    name: 'Jim Clark',
    wins: 25,
    podiums: 32,
    points: 274.5
  },
  {
    name: 'Juan Manuel Fangio',
    wins: 24,
    podiums: 35,
    points: 277.64
  },
  {
    name: 'Niki Lauda',
    wins: 25,
    podiums: 54,
    points: 420.5
  },
  {
    name: 'Jack Brabham',
    wins: 14,
    podiums: 31,
    points: 261
  },
  {
    name: 'Fernando Alonso',
    wins: 32,
    podiums: 101,
    points: 2106
  },
  {
    name: 'Max Verstappen',
    wins: 37,
    podiums: 80,
    points: 2080.5
  },
  {
    name: 'Nico Rosberg',
    wins: 23,
    podiums: 57,
    points: 1594.5
  },
  {
    name: 'Kimi Raikkonen',
    wins: 21,
    podiums: 103,
    points: 1873
  },
  {
    name: 'Mika Hakkinen',
    wins: 20,
    podiums: 51,
    points: 420
  },
  {
    name: 'Jenson Button',
    wins: 15,
    podiums: 50,
    points: 1235
  },
  {
    name: 'Jackie Stewart',
    wins: 27,
    podiums: 43,
    points: 359
  },
  {
    name: 'Damon Hill',
    wins: 22,
    podiums: 42,
    points: 360
  },
  {
    name: 'Felipe Massa',
    wins: 11,
    podiums: 41,
    points: 1167
  },
  {
    name: 'Valtteri Bottas',
    wins: 10,
    podiums: 67,
    points: 1791
  },
  {
    name: 'Mark Webber',
    wins: 9,
    podiums: 50,
    points: 1235
  },
  {
    name: 'Daniel Ricciardo',
    wins: 8,
    podiums: 32,
    points: 1311
  },
  {
    name: 'Charles Leclerc',
    wins: 5,
    podiums: 24,
    points: 874
  },
  {
    name: 'Sergio Perez',
    wins: 5,
    podiums: 28,
    points: 1255
  },
];

// Get HTML elements
const difficultySelect = document.getElementById('difficulty-select');
const startGameButton = document.querySelector('button');
const gameContainer = document.getElementById('game-container');
const higherButton = document.getElementById('higher-button');
const lowerButton = document.getElementById('lower-button');
const resultContainer = document.getElementById('result-container');
const playAgainButton = document.getElementById('play-again-button');
const frontImage = document.getElementById('bikar');
const easy = document.getElementById('easy_level');
const normal = document.getElementById('normal_level');
const hard = document.getElementById('hard_level');
const diff = document.getElementById('diff-text');



let currentDriverIndex;
let previousDriverIndex;
let currentDifficulty;
let score;


// Add event listener to the "Start Game" button
startGameButton.addEventListener('click', startGame);

function startGame() {
  startGameButton.style.display = 'none'
  frontImage.style.display = 'none';
  easy.style.display = 'none';
  normal.style.display = 'none';
  hard.style.display = 'none';
  difficultySelect.style.display = 'none'
  diff.style.display = 'none'


  currentDifficulty = difficultySelect.value;

  // Show the type of data to be guessed by the user
  const dataTypeElement = document.getElementById('data-type');
  if (currentDifficulty === 'easy') {
    dataTypeElement.textContent = 'Guess the driver with more wins';
  } else if (currentDifficulty === 'normal') {
    dataTypeElement.textContent = 'Guess the driver with more podiums';
  } else if (currentDifficulty === 'hard') {
    dataTypeElement.textContent = 'Guess the driver with more points';
  }

  higherButton.addEventListener('click', onHigherButtonClicked);
  lowerButton.addEventListener('click', onLowerButtonClicked);

  score = 0;

  // Hide the result container and play again button
  resultContainer.textContent = '';
  playAgainButton.style.display = 'none';

  // Show the first driver
  currentDriverIndex = previousDriverIndex = null;
  showNextDriver();
}


function onHigherButtonClicked() {
  checkAnswer('higher');
}

function onLowerButtonClicked() {
  checkAnswer('lower');
}

let lastDriverIndex;

function showNextDriver() {
  // Clear the previous driver's data
  gameContainer.innerHTML = '';

  // Pick two random drivers from the list
  if (currentDriverIndex === null) {
    currentDriverIndex = getRandomDriverIndex();
  }

  if (previousDriverIndex === null) {
    previousDriverIndex = getRandomDriverIndex(currentDriverIndex);
  }

  // Create and append elements to display the two drivers and their data
  const currentDriverElement = document.createElement('div');
  const previousDriverElement = document.createElement('div');
  const currentDriverDataElement = document.createElement('ul');
  const previousDriverDataElement = document.createElement('ul');
  const vsElement = document.createElement('div');

  currentDriverElement.classList.add('driver');
  previousDriverElement.classList.add('driver');
  vsElement.textContent = "Vs";

  currentDriverElement.innerHTML = `
            <h2>${f1Drivers[currentDriverIndex].name}</h2>
            <img src="driver-images/${f1Drivers[currentDriverIndex].name.toLowerCase().replace(' ', '-')}.png">
          `;
  previousDriverElement.innerHTML = `
            <h2>${f1Drivers[previousDriverIndex].name}</h2>
            <img src="driver-images/${f1Drivers[previousDriverIndex].name.toLowerCase().replace(' ', '-')}.png">
          `;

  currentDriverElement.appendChild(currentDriverDataElement);
  previousDriverElement.appendChild(previousDriverDataElement);
  gameContainer.appendChild(currentDriverElement);
  gameContainer.appendChild(vsElement);
  gameContainer.appendChild(previousDriverElement);

  // Show the "Higher or Lower" buttons
  const buttonContainer = document.getElementById('button-container');
  buttonContainer.style.display = 'block';
}

function getRandomDriverIndex(excludeIndex) {
  let index;
  do {
    index = Math.floor(Math.random() * f1Drivers.length);
  } while (index === excludeIndex);
  return index;
}


function checkAnswer(guess) {;
  const previousDriver = f1Drivers[previousDriverIndex];
  const currentDriver = f1Drivers[currentDriverIndex];
  let previousData, currentData;
  if (currentDifficulty === 'easy') {
    previousData = previousDriver.wins;
    currentData = currentDriver.wins;
  } else if (currentDifficulty === 'normal') {
    previousData = previousDriver.podiums;
    currentData = currentDriver.podiums;
  } else if (currentDifficulty === 'hard') {
    previousData = previousDriver.points;
    currentData = currentDriver.points;
  }

  const answerIsCorrect =
    (guess === 'higher' && currentData <= previousData) ||
    (guess === 'lower' && currentData >= previousData);


  if (answerIsCorrect) {
    score++;
    currentDriverIndex = previousDriverIndex;
    previousDriverIndex = null;
    showNextDriver();
  } else {
    endGame();
  }
}


function endGame() {
  // Remove event listeners from the buttons
  higherButton.removeEventListener('click', onHigherButtonClicked);
  lowerButton.removeEventListener('click', onLowerButtonClicked);

  let message = "";
  if (score <= 1) {
    const messages = [
      "You may need to get a new pit crew - they're clearly not feeding you the right information!",
      "That answer is a bit like a car stuck in the gravel trap - not quite what we were hoping for!",
      "Looks like you need to spend less time watching the races and more time studying the history books!",
      "Looks like you need some more practice laps before you get the hang of this."
    ];
    const randomIndex = Math.floor(Math.random() * messages.length);
    message = `${messages[randomIndex]} ${message}`;
  } else if (score <= 4) {
    const messages = [
      "Let's just say, if you were driving in the F1, you'd be lapped by now.",
      "Very Bad - You might want to stick to bumper cars!",
      "Don't worry, even the best drivers have their off days. Maybe you'll do better next time.",
      "Well, that answer was definitely not pole position material."
    ];
    const randomIndex = Math.floor(Math.random() * messages.length);
    message = `${messages[randomIndex]} ${message}`;
  } else if (score <= 10) {
    const messages = [
      "You're like a midfield driver - solid, but not quite podium material.",
      "You're doing okay, but maybe you should watch a few more races before playing again.",
      "You're not exactly setting the track on fire, but you're not stalling out either.",
      "Not bad, not bad at all! You're definitely on the right track to becoming an F1 expert."
    ];
    const randomIndex = Math.floor(Math.random() * messages.length);
    message = `${messages[randomIndex]} ${message}`;
  } else {
    const messages = [
      "I think we need to do a doping test on you because that score is unreal!",
      "Congratulations! You just set a new lap record for F1 trivia. Absolutely amazing!",
      "Wow, you're like the Lewis Hamilton of F1 trivia! Impressive!",
      "Hold on, let me check if you're not secretly connected to the FIA. Your knowledge is on another level!"
    ];
    const randomIndex = Math.floor(Math.random() * messages.length);
    message = `${messages[randomIndex]} ${message}`;
  }

  // Display the user's score and message
  resultContainer.textContent = `Game over! You got ${score} correct. ${message}`;
  playAgainButton.style.display = 'block';
  playAgainButton.addEventListener('click', startGame);
}

.home {
  color: black;
  /* Change the color to black */
  text-decoration: none;
  /* Remove the underline */
}

body {
  background-color: #adadad;
}

#difficulty-select {
  width: 120px;
  height: 30px;
  border: 1px solid #999;
  font-size: 18px;
  color: #1c87c9;
  background-color: #eee;
  border-radius: 5px;
  box-shadow: 4px 4px #ccc;
}

title {
  text-align: center;
}

.info {
  display: none;
  text-align: center;
  top: 5;
}

.icon:hover~.info {
  display: block;
}

#info-hover {
  width: 4%;
  position: absolute;
  top: 4;
  right: 1;
}


/* Style the header */

header {
  background-color: #fff;
  color: rgb(0, 0, 0);
  padding: 10px;
  display: flex;
  justify-content: space-between;
}


/* Style the game container */

#game-container {
  margin: 20px;
  font-size: 24px;
  text-align: center;
}


/* Style the button container */

#button-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}


/* Style the result container */

#result-container {
  font-size: 24px;
  text-align: center;
}

#start-game-button {
  margin: 0;
  position: absolute;
  top: 15%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


/* Style the footer */

footer {
  background-color: #333;
  color: white;
  padding: 10px;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
}


/* Style the "Higher" and "Lower" buttons */

button {
  font-size: 24px;
  margin: 0 10px;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #005eff;
  color: white;
  cursor: pointer;
}


/*
        #button-container {
            margin: 0;
            position: absolute;
            top: 70%;
            left: 75%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }*/

#play-again-button {
  margin: 0;
  position: absolute;
  top: 90%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#resault-container {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


/* Style the selected difficulty option */

#difficulty option:checked {
  background-color: #4CAF50;
  color: white;
}

.home {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.title {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 4em;
}

#easy_level {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 3em;
}

#normal_level {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 3em;
}

#hard_level {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 3em;
}

#data-type {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

#bikar {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

#higher-button {
  background-color: #4CAF50;
  margin: 0;
  position: absolute;
  top: 80%;
  left: 75%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#lower-button {
  background-color: #ff0000;
  margin: 0;
  position: absolute;
  top: 87%;
  left: 75%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#game-container {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

header {
  width: 100%;
  padding: 0;
}

.contact {
  display: flex;
  justify-content: center;
  background-color: #262626;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  width: 100%;
}

#contact {
  color: #fff;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

#privacy {
  color: #fff;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

<header>
  <h1 class="title">Higher or Lower F1 Game</h1>

  <button id="start-game-button">Start Game</button>
</header>
<label id="diff-text" for="difficulty-select" style="text-align: center;  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size: 3em;">Choose difficulty level:</label>
<select id="difficulty-select">
  <option value="easy">Easy</option>
  <option value="normal">Normal</option>
  <option value="hard">Hard</option>
</select>
<div class="icon"><img id="info-hover" src="info.png"></div>
<div class="info" style="font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size: 3em;">Guess if the driver below has more wins/podiums/points</div>
<h2 id="easy_level" style="text-align:center">Easy: Higher or Lower Wins</h2>
<h2 id="normal_level" style="text-align:center">Normal: Higher or Lower Podiums</h2>
<h2 id="hard_level" style="text-align:center">Hard: Higher or Lower Points</h2>
<img id="bikar" src="bikar.png">
<main>
  <div id="data-type" style="text-align:center; font-size: 3em;"></div>
  <div id="game-container" style="font-size: 4em; display: flex; justify-content: center; align-items: center; ">

    <!-- Display F1 driver data here -->
  </div>
  <div id="button-container" style="display: none;">
    <button id="higher-button">Higher</button>
    <button id="lower-button">Lower</button>
  </div>
  <div id="result-container" style="font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;  position: relative; top: 150px; ">
    <!-- Display game result here -->
  </div>
  <button id="play-again-button" style="display:none">Play Again</button>
</main>
<!--<footer>
          <p>Created by Kristjan Jakob</p>
        </footer>-->