Luke Luke - 19 days ago 7
jQuery Question

experiencing "Uncaught RangeError: Maximum call stack size exceeded"

Functionality:

Am trying to create a quiz with 5 tries whereby each question page is a randomised question displayed from each category.

Hence, if a user gets each question correct, the next question will fadeIn and if the user were to get 3 questions correct within 3 out of 5 tries, they will be navigated to the gameWin page. Else, if users have exhausted all 5 tries, it will navigate the users to a GameOver page.

Issue:

At this point in time, after users have exhausted all 5 tries, the following error msg is displayed in my console.log as => Uncaught RangeError: Maximum call stack size exceeded.

I would like to ask for help on how to rectify the following issue on the call stack size exceeded.

Code:



function showQuestion() {

//Question list shown is more than 5, show game over
if (GamePage_question_list.length > 5) {
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);

//Display random question
random_Question = Math.floor(Math.random() * GameQuestion.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;
} else if (GamePage_question_list[i] == (random_Question + "")) {
exist = true;
}
}

Game_wait = false;

if (exist == false) {

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

console.log("Questions:" + CategoryA_Questions[random_Question_CategoryA]);


GamePage_question_list.push(random_Question_CategoryA + "");

$("#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]);

console.log("Answers:" + answerList);

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

GamePage_question_list.push(random_Question_CategoryB + "");

$("#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_list.push(random_Question_CategoryC + "");

$("#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_list.push(random_Question_CategoryD + "");

$("#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_list.push(random_Question + "");

$("#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 select_answer(flag) {

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

var currentQuestionIndex = GamePage_question_list[GamePage_question_list.length - 1];

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)];

console.log("flag_answer chosen:" + flag);


//Show the POPUP Correct answer
//THIS IS THE PART WHERE THE CORRECT ANSWER WILL SHOW IF THE USER ANSWERS EACH QUESTION WRONGLY

if (GamePage_question_list.length == 1) {

console.log("CategoryA_correctAnswer" + CategoryA_correctAnswer);
console.log("A");

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

console.log("CategoryB_correctAnswer" + CategoryB_correctAnswer);
console.log("B");

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

console.log("CategoryC_correctAnswer" + CategoryC_correctAnswer);
console.log("C");

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

console.log("CategoryD_correctAnswer" + CategoryD_correctAnswer);
console.log("D");

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

console.log("GameCorrectAnswer" + GameCorrectAnswer);
console.log("E");
}


}
}


function GameOver() {
idleTime = 0;

console.log("GameOver");

setTimeout(function() {
location.reload();
}, 5000);
}

<!-- 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);" />




Answer

I basically guess that the else clause here > if (exist == false) causes an same infinite call to showQuestion (as commented by @JonasGrumann) while exist is a value except false (as commented by @Reddy, a call loop causes this RangeError). GamePage_question_list never reaches the sixth length as commented by @FK82, thus the if clause of if (GamePage_question_list.length > 5) never executes, but the else clause, where showQuestion is re-called forever at the else clause of if (exist == false) (I think 5 length should be more programatic here: 4).

The basic solution would be to update this GamePage_question_list.length > 5 condition, where bigger than operator could be >=, or 5 could be 4, checking if the length getter returns a value bigger/than or equal/to 5.