var playing = false;
var action;
var score;
var timeremaining;
var correctAnswer

const boxes = document.querySelectorAll(".Box")

document.getElementById("Startreset").onclick = //if we click on start/reset
  function() {
    if (playing == true) //if we are playing
    {
      location.reload();
    } else //if we are not playing
    {
      playing = true; //change mode to playing
      score = 0; //set score to  0
      document.getElementById("ScoreValue").innerHTML = score;

      show("Timeremaining"); //show countdownbox
      timeremaining = 60
      document.getElementById("Timeremainingvalue").innerHTML = timeremaining;

      document.getElementById("Startreset").innerHTML = "Resetgame"; //Reset the game
      startCountdown();
      //generate a new question
      generateQA();

    }
  }
// clicking on answer button
for (i = 1; i < 5; i++) {
  document.getElementById("Box" + i).onclick = function(e) {
    if (playing == true)

    {
      const answer = e.target.innerHTML;
      console.log('My answer is', answer, correctAnswer)
      if (this.innerHTML == correctAnswer) {
        score++;
        document.getElementById("ScoreValue").innerHTML = score;
        hide("Wrong");
        show("Correct");
        setTimeout(function() {
          hide("Correct");
        }, 1000)
        generateQA() //genrate new Q/A
      } else { //wrong answer

        hide("Correct");
        show("Wrong");
        setTimeout(function() {
          hide("Wrong");
        }, 1000)

      }
    }

  }
}



function startCountdown() { //start counter
  action = setInterval(function() {
    timeremaining -= 1;
    document.getElementById("Timeremainingvalue").innerHTML = timeremaining;
    if (timeremaining == 0) {
      stopCountdown() //game over
      hide("Timeremaining");
      hide("Wrong");
      hide("Correct");
      playing = false;
      document.getElementById("Startreset").innerHTML = "Start Game";
    }
  }, 1000);
}
//stop counter
function stopCountdown() {
  clearInterval(action);
}
//hide an element
function hide(Id) {
  document.getElementById(Id).style.display = "none";
}
// show an element
function show(Id) {
  document.getElementById(Id).style.display = "block";
}

function generateQA() { //genrate function

  var x = 1 + Math.round(9 * Math.random());
  var y = 1 + Math.round(9 * Math.random());
  correctAnswer = x * y;
  document.getElementById("Question").innerHTML = x + "X" + y;

  var correctPosition = Math.ceil(4 * Math.random())
  //fill one box with correctanswer
  document.getElementById("Box" + correctPosition).innerHTML = correctAnswer

  //fill other boxes with wrong answer

  var answers = [correctAnswer];
  for (i = 1; i < 5; i++) {
    if (i != correctPosition) {
      var wrongAnswer;
      do {
        wrongAnswer = (1 + Math.round(9 * Math.random())) * (1 + Math.round(9 * Math.random()))
      } while (answers.indexOf(wrongAnswer) > -1) // a wrong answer
      document.getElementById("Box" + i).innerHTML = wrongAnswer;
      answers.push(wrongAnswer);
    }
  }
}

html {
  height: 100%;
  background-color: grey;
}

.Container {
  height: 500px;
  width: 1200px;
  background-color: #7fffd4;
  margin: 100px auto;
  padding: 15px;
  border-radius: 15px;
  box-shadow: 6px 6px;
}

#Score {
  background-color: rgb(203, 189, 216);
  color: white;
  position: absolute;
  left: 1275px;
  padding: 7px 8px;
  border-radius: 4px;
  box-shadow: 2px;
}

#Correct {
  position: absolute;
  background-color: green;
  left: 675px;
  color: antiquewhite;
  padding: 7px 8px;
  border-radius: 4px;
  display: none;
}

#Wrong {
  position: absolute;
  background-color: rgb(128, 119, 0);
  left: 500px;
  color: antiquewhite;
  padding: 7px 8px;
  border-radius: 4px;
  display: none;
}

#Question {
  background-color: rgb(45, 135, 204);
  height: 150px;
  width: 500px;
  color: antiquewhite;
  margin: 50px auto 10px auto;
  box-shadow: 0px 4px rgb(176, 181, 181);
  font-size: 100px;
  text-align: center;
  font-family: Arial;
}

#Instruction {
  background-color: rgb(174, 124, 207);
  margin: 10px auto;
  height: 50px;
  width: 500px;
  color: antiquewhite;
  box-shadow: 0px 4px rgb(160, 163, 173);
  text-align: center;
  line-height: 45px;
  font-family: Arial;
}

#Choices {
  height: 100px;
  width: 500px;
  margin: 5px auto;
}

.Box {
  background-color: antiquewhite;
  color: black;
  font-size: 65px;
  text-align: center;
  height: 85px;
  width: 85px;
  float: left;
  margin-right: 53px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
}

.Box :hover #Startreset:hover {
  background-color: cadetblue;
  color: white;
  box-shadow: 0px 4px cyan;
}

#Box4 {
  margin-right: 0px;
}

#Startreset {
  width: 73px;
  background-color: rgb(232, 171, 219);
  color: black;
  position: relative;
  margin: 0 auto;
  padding: 7px 8px;
  border-radius: 4px;
  box-shadow: 2px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

#Timeremaining {
  width: 150px;
  background-color: rgba(13, 234, 13, 0.9);
  color: black;
  position: absolute;
  top: 488px;
  left: 830px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 2px;
  text-align: center;
  cursor: pointer;
  /* visibility: hidden;*/
  display: none;
}

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MathsTableGame t</title>
</head>

<body>

  <div class="Container">
    <div id="Score">score :<span id="ScoreValue"> 0</span></div>
    <div id="Correct"> Correct</div>
    <div id="Wrong"> Try Again </div>
    <div id="Question"> </div>
    <div id="Instruction">Click on the correct answer </div>

    <div id="Choices">
      <div id="Box1" class="Box"></div>
      <div id="Box2" class="Box"></div>
      <div id="Box3" class="Box"></div>
      <div id="Box4" class="Box"></div>
    </div>

    <div id="Startreset"> Start Game</div>
    <div id="Timeremaining">Time remaining :<span id="Timeremainingvalue">60sec</span> </div>
  </div>

</body>

</html>