未显示数组中的随机元素

Question

功能性：

这是一个测验游戏，它将从4个不同的类别中显示1个随机问题，因此，总共将显示来自4个不同类别的4个随机问题。

每个游戏页面只会显示1个带答案选项的随机问题，因此总共会有4个游戏页面。

因此，这是流程：

游戏第1页：显​​示第1类问题池中的第1个随机问题，如果正确，则导航至游戏页2，否则，显示正确答案并导航至游戏页2。

游戏第2页：显示第二类问题池中的第二个随机问题，如果正确，则导航至游戏页面3，否则，显示正确答案并导航至游戏页面。

因此，这将一直持续到最后一个游戏页面，每个游戏页面只会显示1个随机问题

问题：

这是我目前面临的两个问题：

1。）没有显示每个类别的随机问题..在游戏页面，问答选项都是空白

2.）它没有显示所有游戏问题。第一个问题被随机回答后（缺少问题和答案）。它会自动导航到GAME OVER页面。

因此，我想请求帮助，我做错了什么以及我如何能够1.）显示我的随机问答选项和 2.）在回答单个问题时，它不会直接导航到游戏页面而不通过其余的游戏页面。

代码

//Per Category Array

//1st Category
var CategoryA_Questions = ["A1?", "A2?", "A3?", "A4?"];

var CategoryA_Answers = [
  ["A1.png", "A2.png"],
  ["A3.png", "A4.png"],
  ["A5.png", "A6.png"],
  ["A7.png", "A8.png"]
];

var CategoryA_CorrectAnswers = ["1", "2", "1", "1"];

var CategoryA_PopUpAnswers = [
  ["Correct answer: True"],
  ["Correct answer: False"],
  ["Correct answer: True"],
  ["Correct answer: True"]
];

//2nd Category
var CategoryB_Questions = ["B1?", "B2?", "B3?", "B4?", "B5?"];

var CategoryB_Answers = [
  ["B1.png", "B2.png"],
  ["B3.png", "B4.png"],
  ["B5.png", "B6.png"],
  ["B7.png", "B8.png"],
  ["B9.png", "B10.png"]
];

var CategoryB_CorrectAnswers = ["1", "2", "1", "2", "1"];

var CategoryB_PopUpAnswers = [
  ["Correct answer: True"],
  ["Correct answer: False"],
  ["Correct answer: True"],
  ["Correct answer: False"],
  ["Correct answer: True"]
];

//3rd Category
var CategoryC_Questions = ["C1?", "C2?", "C3?", "C4?", "C5?", "C6?", "C7?"];

var CategoryC_Answers = [
  ["C1.png", "C2.png"],
  ["C3.png", "C4.png"],
  ["C5.png", "C6.png"],
  ["C7.png", "C8.png"],
  ["C9.png", "C10.png"],
  ["C11.png", "C12.png"],
  ["C13.png", "C14.png"]
];

var CategoryC_CorrectAnswers = ["2", "1", "1", "2", "1", "2", "2"];

var CategoryC_PopUpAnswers = [
  ["Correct answer: False"],
  ["Correct answer: True"],
  ["Correct answer: True"],
  ["Correct answer: False"],
  ["Correct answer: True"],
  ["Correct answer: False"],
  ["Correct answer: False"]
];

//4th Category
var CategoryD_Questions = ["D1?", "D2?", "D3?"];

var CategoryD_Answers = [
  ["D1.png", "D2.png"],
  ["D3.png", "D4.png"],
  ["D5.png", "D6.png"]
];

var CategoryD_CorrectAnswers = ["2", "1", "1"];

var CategoryD_PopUpAnswers = [
  ["Correct answer: False"],
  ["Correct answer: True"],
  ["Correct answer: True"]
];

var GamePage_question_list = [];

var answerList,
  random_Question_CategoryA,
  random_Question_CategoryB,
  random_Question_CategoryC,
  random_Question_CategoryD,
  random_Question;

function showQuestion() {

  //Question list shown is more than 4, show game over
  if (GamePage_question_list.length == 4) {
    GameOver();
  } else {

    //Randomise Each Category Questions

    //Randomise Category_A Question
    random_Question_CategoryA = Math.floor(Math.random() * CategoryA_Questions.length);

    //Randomise Category_B Question
    random_Question_CategoryB = Math.floor(Math.random() * CategoryB_Questions.length);

    //Randomise Category_C Question
    random_Question_CategoryC = Math.floor(Math.random() * CategoryC_Questions.length);

    //Randomise Category_D Question
    random_Question_CategoryD = Math.floor(Math.random() * CategoryD_Questions.length);

    var exist = false;

    for (i = 0; i < GamePage_question_list.length; i++) {
      if (GamePage_question_list[i] == (random_Question_CategoryA + "")) {
        exist = true;
      } else if (GamePage_question_list[i] == (random_Question_CategoryB + "")) {
        exist = true;
      } else if (GamePage_question_list[i] == (random_Question_CategoryC + "")) {
        exist = true;
      } else if (GamePage_question_list[i] == (random_Question_CategoryD + "")) {
        exist = true;
      }
    }

    Game_wait = false;

    if (exist == false) {
      GamePage_question_list.push(random_Question_CategoryA + "");
      GamePage_question_list.push(random_Question_CategoryB + "");
      GamePage_question_list.push(random_Question_CategoryC + "");
      GamePage_question_list.push(random_Question_CategoryD + "");

      //Display Question from each category after each question has been answered
      if (GamePage_question_list.length == 0) {

        $("#GamePage_question").html(CategoryA_Questions[random_Question_CategoryA]);

        answerList = CategoryA_Answers[random_Question_CategoryA];

        $("#GamePageAnswer_1").attr("src", answerList[0]);

        $("#GamePageAnswer_2").attr("src", answerList[1]);

      } else if (GamePage_question_list.length == 1) {

        $("#GamePage_question").html(CategoryB_Questions[random_Question_CategoryB]);

        answerList = CategoryB_Answers[random_Question_CategoryB];

        $("#GamePageAnswer_1").attr("src", answerList[0]);

        $("#GamePageAnswer_2").attr("src", answerList[1]);

      } else if (GamePage_question_list.length == 2) {

        $("#GamePage_question").html(CategoryC_Questions[random_Question_CategoryC]);

        answerList = CategoryC_Answers[random_Question_CategoryC];

        $("#GamePageAnswer_1").attr("src", answerList[0]);

        $("#GamePageAnswer_2").attr("src", answerList[1]);

      } else if (GamePage_question_list.length == 3) {

        $("#GamePage_question").html(CategoryD_Questions[random_Question_CategoryD]);

        answerList = CategoryD_Answers[random_Question_CategoryD];

        $("#GamePageAnswer_1").attr("src", answerList[0]);

        $("#GamePageAnswer_2").attr("src", answerList[1]);

      } else if (GamePage_question_list.length == 4) {

        $("#GamePage_question").html(GameQuestion[random_Question]);

        answerList = GameAnswer[random_Question];

        $("#GamePageAnswer_1").attr("src", answerList[0]);

        $("#GamePageAnswer_2").attr("src", answerList[1]);
      }
    } else {
      showQuestion();
    }
  }
}


//Function to check on selected answer: if chosen answer is correct, proceed, else show GameOver Page
function select_answer(flag) {

  if (Game_wait == false) {
    Game_wait = true;

    var CategoryA_correctAnswer = CategoryA_CorrectAnswers[parseInt(currentQuestionIndex)];
    var CategoryA_POPUP_Answer = CategoryA_PopUpAnswers[parseInt(currentQuestionIndex)];

    var CategoryB_correctAnswer = CategoryB_CorrectAnswers[parseInt(currentQuestionIndex)];
    var CategoryB_POPUP_Answer = CategoryB_PopUpAnswers[parseInt(currentQuestionIndex)];

    var CategoryC_correctAnswer = CategoryC_CorrectAnswers[parseInt(currentQuestionIndex)];
    var CategoryC_POPUP_Answer = CategoryC_PopUpAnswers[parseInt(currentQuestionIndex)];

    var CategoryD_correctAnswer = CategoryD_CorrectAnswers[parseInt(currentQuestionIndex)];
    var CategoryD_POPUP_Answer = CategoryD_PopUpAnswers[parseInt(currentQuestionIndex)];

    var correctAnswer = GameCorrectAnswer[parseInt(currentQuestionIndex)];
    var POPUP_Answer = GamePopUpAnswer[parseInt(currentQuestionIndex)];

    if (flag == (CategoryA_correctAnswer + "")) {


      Game_Correct_Count++;

      showQuestion();
    } else if (flag == (CategoryB_correctAnswer + "")) {

      Game_Correct_Count++;
      showQuestion();
    } else if (flag == (CategoryC_correctAnswer + "")) {

      Game_Correct_Count++;

      showQuestion();
    } else if (flag == (CategoryD_correctAnswer + "")) {

      Game_Correct_Count++;
      showQuestion();
    } else {

      //Change text color to RED
      $("#GamePage_question").css('color', 'red');
      $("#GamePage_question").width("580px");

      //Show the POPUP Correct answer
      $('#POPUP_Answer').fadeIn({
        queue: false,
        complete: function() {
          $("#Correct_Answer_POPUP").html(POPUP_Answer);
        }
      });

      Game_show_correct_answer();
    }
  }
}

function WrongAnswerNext() {

  showQuestion();
}

<!-- Original Question -->
<div id="GamePage_question" style="position:absolute; z-index:99; top:460px; left:160px; margin:auto; color:#FFFFFF; font-size:60px; font-family: Calibrib; width:800px; text-align: center;"></div>

<!-- Answer-Original-Choice List -->
<img id="GamePageAnswer_1" style="position:absolute; z-index:3; top:1100px; left:260px; margin:auto;" />
<img id="GamePageAnswer_2" style="position:absolute; z-index:3; top:1300px; left:260px;" />

<!-- Selection answer -->
<img src="lib/image/transparent.png" class="transparentBg" style="position:absolute; z-index:4; top:1100px; left:0px; margin:auto; width:1080px; height:150px; border:1;" onclick="select_answer(1);" />
<img src="lib/image/transparent.png" class="transparentBg" style="position:absolute; z-index:4; top:1300px; left:0px; margin:auto; border:1; width:1080px; height:150px;" onclick="select_answer(2);" />

<!-- Wrong Answer POP-UP -->

<div id="POPUP_Answer" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=99; top:0px;margin:auto;">

  <img id="POPUP_Orange" src="lib/image/PopUp.png" style="position:absolute; z-index:90; top: 980px; left:6px; margin:auto;" />

  <div id="Correct_Answer_POPUP" style="position:absolute; z-index:100; top:1115px; left:80px; margin:auto; color:#FFFFFF; font-size:40px; font-family: Calibrib; width:950px; text-align: center;"></div>

  <button class="NextQuestion" onclick="WrongAnswerNext()"></button>
</div>