gamescript.js

      //this would be the object shape for storing the questions  
      const questions = [
      {
          question: "Which is the world's largest country by size ?",
          optionA: "Russia",
          optionB: "China",
          optionC: "Mongolia",
          optionD: "Monaco",
          correctOption: "optionA"
      },
  
      {
          question: "How many players are allowed on a soccer pitch ?",
          optionA: "10 players",
          optionB: "11 players",
          optionC: "9 players",
          optionD: "12 players",
          correctOption: "optionB"
      },
  
      {
          question: "Who was the first President of USA ?",
          optionA: "Donald Trump",
          optionB: "Barack Obama",
          optionC: "Abraham Lincoln",
          optionD: "George Washington",
          correctOption: "optionD"
      },
  
      {
          question: "Which is the strongest sence in a dog ?", 
          optionA: "Sense of rhythm",
          optionB: "Sense of smell",
          optionC: "Sense of humor",
          optionD: "Sence of tact",
          correctOption: "optionB"
      },
  
      {
          question: "What do you call the point at which somthing ends ?",
          optionA: "limit",
          optionB: "Bill",
          optionC: "POint of no return",
          optionD: "Billet",
          correctOption: "optionA"
      },
  
      {
          question: "Which is the longest river in the world ?",
          optionA: "River Nile",
          optionB: "Long River",
          optionC: "River Niger",
          optionD: "Lake Chad",
          correctOption: "optionA"
      },
  
      {
          question: "_____ is the hottest Continent on Earth ?",
          optionA: "Oceania",
          optionB: "Antarctica",
          optionC: "Africa",
          optionD: "North America",
          correctOption: "optionC"
      },
  
      {
          question: "Which doctor manages the health of children ?",
          optionA: "Fireman",
          optionB: "Nurse",
          optionC: "Pediatrician",
          optionD: "Warden",
          correctOption: "optionC"
      },
  
      {
          question: "Which of these numbers is an odd number ?",
          optionA: "Ten",
          optionB: "Twelve",
          optionC: "Eight",
          optionD: "Eleven",
          correctOption: "optionD"
      },
  
      {
          question: `"You Can't see me" is a popular saying by`,
          optionA: "Eminem",
          optionB: "Bill Gates",
          optionC: "Chris Brown",
          optionD: "John Cena",
          correctOption: "optionD"
      },
  
      {
          question: "Where is the world tallest building located ?",
          optionA: "Africa",
          optionB: "California",
          optionC: "Dubai",
          optionD: "Italy",
          correctOption: "optionC"
      },
  
      {
          question: "The longest river in the United Kingdom is ?",
          optionA: "River Severn",
          optionB: "River Mersey",
          optionC: "River Trent",
          optionD: "River Tweed",
          correctOption: "optionA"
      },
  
  
      {
          question: "How many permanent teeth does a dog have ?",
          optionA: "38",
          optionB: "42",
          optionC: "40",
          optionD: "36",
          correctOption: "optionB"
      },
  
      {
          question: "Which national team won the football World cup in 2018 ?",
          optionA: "England",
          optionB: "Brazil",
          optionC: "Germany",
          optionD: "France",
          correctOption: "optionD"
      },
  
      {
          question: "Which US state was Donald Trump Born ?",
          optionA: "New York",
          optionB: "California",
          optionC: "New Jersey",
          optionD: "Los Angeles",
          correctOption: "optionA"
      },
  
      {
          question: "How man states does Nigeria have ?",
          optionA: "24",
          optionB: "30",
          optionC: "36",
          optionD: "37",
          correctOption: "optionC"
      },
  
      {
          question: "____ is the capital of Nigeria ?",
          optionA: "Abuja",
          optionB: "Lagos",
          optionC: "Calabar",
          optionD: "Kano",
          correctOption: "optionA"
      },
  
      {
          question: "Los Angeles is also known as ?",
          optionA: "Angels City",
          optionB: "Shining city",
          optionC: "City of Angels",
          optionD: "Lost Angels",
          correctOption: "optionC"
      },
  
      {
          question: "What is the capital of Germany ?",
          optionA: "Georgia",
          optionB: "Missouri",
          optionC: "Oklahoma",
          optionD: "Berlin",
          correctOption: "optionD"
      },
  
      {
          question: "How many sides does an hexagon have ?",
          optionA: "Six",
          optionB: "Sevene",
          optionC: "Four",
          optionD: "Five",
          correctOption: "optionA"
      },
  
      {
          question: "How many planets are currently in the solar system ?",
          optionA: "Eleven",
          optionB: "Seven",
          optionC: "Nine",
          optionD: "Eight",
          correctOption: "optionD"
      },
  
      {
          question: "Which Planet is the hottest ?",
          optionA: "Jupitar",
          optionB: "Mercury",
          optionC: "Earth",
          optionD: "Venus",
          correctOption: "optionB"
      },
  
      {
          question: "where is the smallest bone in human body located?",
          optionA: "Toes",
          optionB: "Ears",
          optionC: "Fingers",
          optionD: "Nose",
          correctOption: "optionB"
      },
  
      {
          question: "How many hearts does an Octopus have ?",
          optionA: "One",
          optionB: "Two",
          optionC: "Three",
          optionD: "Four",
          correctOption: "optionC"
      },
  
      {
          question: "What is an Anaconda ?",
          optionA: "Spider",
          optionB: "Lizard",
          optionC: "Insect",
          optionD: "Snake",
          correctOption: "optionD"
      },

      {
        question: "A friend in need is a friend... ?",
        optionA: "...indeed",
        optionB: "...for all",
        optionC: "...with meat",
        optionD: "...forever",
        correctOption: "optionA"
    },

    {
      question: "What star shines in the day and provides light ?",
      optionA: "Sirius",
      optionB: "Moon",
      optionC: "Sun",
      optionD: "Brad Pitt",
      correctOption: "optionC"
  },

  {
    question: "What is the fastest land animal on earth ?",
    optionA: "Zebra",
    optionB: "Snail",
    optionC: "Rhino",
    optionD: "Cheetah",
    correctOption: "optionD"
  },

  {
    question: "Which is not one of the five senses ?",
    optionA: "Speech",
    optionB: "Touch",
    optionC: "Smell",
    optionD: "Sight",
    correctOption: "optionA"
  },

  {
    question: "Easy come.... ?",
    optionA: "...easy walk",
    optionB: "...easy go",
    optionC: "...easy lose",
    optionD: "...easy run",
    correctOption: "optionB"
  },

  {
    question: "How many lives is a cat said to have ?",
    optionA: "Three",
    optionB: "Five",
    optionC: "Ten",
    optionD: "Nine",
    correctOption: "optionD"
  }
  
]
  
  
  let shuffledQuestions = [] //empty array to hold shuffled selected questions out of all available questions
  
  function handleQuestions() { 
      //function to shuffle and push 10 questions to shuffledQuestions array
      while (shuffledQuestions.length <= 9) {
          const random = questions[Math.floor(Math.random() * questions.length)]
          if (!shuffledQuestions.includes(random)) {
              shuffledQuestions.push(random)
          }
      }
  }
  
  
  let questionNumber = 1 //holds the current question number
  let playerScore = 0  //holds the player score
  let wrongAttempt = 0 //amount of wrong answers picked by player
  let indexNumber = 0 //will be used in displaying next question
  
  // function for displaying next question in the array to con
  //also handles displaying players and quiz information to con
  function NextQuestion(index) {
      handleQuestions()
      const currentQuestion = shuffledQuestions[index]
      document.getElementById("question-number").innerHTML = questionNumber
      document.getElementById("player-score").innerHTML = playerScore
      document.getElementById("display-question").innerHTML = currentQuestion.question;
      document.getElementById("option-one-label").innerHTML = currentQuestion.optionA;
      document.getElementById("option-two-label").innerHTML = currentQuestion.optionB;
      document.getElementById("option-three-label").innerHTML = currentQuestion.optionC;
      document.getElementById("option-four-label").innerHTML = currentQuestion.optionD;
  
  }
  
  
  function checkForAnswer() {
      const currentQuestion = shuffledQuestions[indexNumber] //gets current Question 
      const currentQuestionAnswer = currentQuestion.correctOption //gets current Question's answer
      const options = document.getElementsByName("option"); //gets all elements in dom with name of 'option' (in this the radio inputs)
      let correctOption = null
  
      options.forEach((option) => {
          if (option.value === currentQuestionAnswer) {
              //get's correct's radio input with correct answer
              correctOption = option.labels[0].id
          }
      })
  
      //checking to make sure a radio input has been checked or an option being chosen
      if (options[0].checked === false && options[1].checked === false && options[2].checked === false && options[3].checked == false) {
          document.getElementById('option-modal').style.display = "flex"
      }
  
      //checking if checked radio button is same as answer
      options.forEach((option) => {
          if (option.checked === true && option.value === currentQuestionAnswer) {
              document.getElementById(correctOption).style.backgroundColor = "green"
              playerScore++ //adding to player's score
              indexNumber++ //adding 1 to index so has to display next question..
              //set to delay question number till when next question loads
              setTimeout(() => {
                  questionNumber++
              }, 1000)
          }
  
          else if (option.checked && option.value !== currentQuestionAnswer) {
              const wrongLabelId = option.labels[0].id
              document.getElementById(wrongLabelId).style.backgroundColor = "red"
              document.getElementById(correctOption).style.backgroundColor = "green"
              wrongAttempt++ //adds 1 to wrong attempts 
              indexNumber++
              //set to delay question number till when next question loads
              setTimeout(() => {
                  questionNumber++
              }, 1000)
          }
      })
  }
  
  
  
  //called when the next button is called
  function handleNextQuestion() {
      checkForAnswer() //check if player picked right or wrong option
      unCheckRadioButtons()
      //delays next question displaying for a second just for some effects so questions don't rush in on player
      setTimeout(() => {
          if (indexNumber <= 9) {
  //displays next question as long as index number isn't greater than 9, remember index number starts from 0, so index 9 is question 10
              NextQuestion(indexNumber)
          }
          else {
              handleEndGame()//ends game if index number greater than 9 meaning we're already at the 10th question
          }
          resetOptionBackground()
      }, 1000);
  }
  
  //sets options background back to null after display the right/wrong colors
  function resetOptionBackground() {
      const options = document.getElementsByName("option");
      options.forEach((option) => {
          document.getElementById(option.labels[0].id).style.backgroundColor = ""
      })
  }
  
  // unchecking all radio buttons for next question(can be done with map or foreach loop also)
  function unCheckRadioButtons() {
      const options = document.getElementsByName("option");
      for (let i = 0; i < options.length; i++) {
          options[i].checked = false;
      }
  }
  
  // function for when all questions being answered
  // grading
  function handleEndGame() {
      let remark = null
      let remarkColor = null
  
      // condition check for player remark and remark color
      if (playerScore <= 3) {
          remark = "Bad Grades, Keep Practicing."
          remarkColor = "red"
      }
      else if (playerScore >= 4 && playerScore < 7) {
          remark = "Average Grades, You can do better."
          remarkColor = "orange"
      }
      else if (playerScore >= 7) {
          remark = "Excellent, Keep the good work going."
          remarkColor = "green"
      }
      const playerGrade = (playerScore / 10) * 100

      //data to display to score board
      document.getElementById('remarks').innerHTML = remark
      document.getElementById('remarks').style.color = remarkColor
      document.getElementById('grade-percentage').innerHTML = playerGrade
      document.getElementById('wrong-answers').innerHTML = wrongAttempt
      document.getElementById('right-answers').innerHTML = playerScore
      document.getElementById('score-modal').style.display = "flex"
  }
  
  //closes score modal, resets game and reshuffles questions
  function closeScoreModal() {
      questionNumber = 1
      playerScore = 0
      wrongAttempt = 0
      indexNumber = 0
      shuffledQuestions = []
      NextQuestion(indexNumber)
      document.getElementById('score-modal').style.display = "none"
  }
  
  //function to close warning modal
  function closeOptionModal() {
      document.getElementById('option-modal').style.display = "none"
  }
//not display, display