samedi 19 novembre 2016

Randomised Elements in array are not being displayed

Functionality:

It is a quiz game where it will display 1 random question each from 4 different categories, hence, in total it will display 4 random question from the 4 different categories.

Each game page will only display 1 randomised question with the answer option, therefore, in total there will be 4 game pages.

Hence, this is flow:

Game Page 1: Display 1st random question from a pool of questions in the 1st category, if correct, navigate to Game Page 2, else, show the correct answer and navigate to Game Page 2.

Game Page 2: Display 2nd random question from a pool of questions in the 2nd category, if correct, navigate to Game Page 3, else, show the correct answer and navigate to Game Page 3.

Therefore, this will continue till it is at the last game page, where each game page will only display 1 random question

Issue:

These are 2 issues that I am currently facing:

1.) None of the randomised question from each category is shown.. at the game page, both the question and answer option is blank

2.)It doesn't show all the game questions. After the 1st question has been randomly answered(missing question and answer). It will automatically navigate to the GAME OVER page.

Hence, I would like to ask for help, what have i done wrong and how am I able to 1.) display my randomised question and answer option and 2.) Upon answering a single question, it wouldnt navigate directly to the game over page without going through the rest of the game pages.

Code

//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) {
    MediShield_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>



Aucun commentaire:

Enregistrer un commentaire