Academic Integrity: tutoring, explanations, and feedback — we don’t complete graded work or submit on a student’s behalf.

Javascript and calling a function recursively? I didnt attach the html portion b

ID: 3600666 • Letter: J

Question

Javascript and calling a function recursively?

I didnt attach the html portion but I'm hoping someone can see the error or provide some guidance

It's a bingo game that generate a 4x4 board with random numbers. I'm having issues with the bolded part

// This jQuery function verifies that the HTML document has loaded
$(document).ready(function()
{
// TODO Create a var called usedArray of type Array with declared size 76 for the used bingo
// numbers when generating the card
var usedArray = new Array(76);

/* The baseArray provides the base multiplier value for each column based on
       B = 1 - 15
       I = 16 - 30
       N = 31 - 45
       G = 46 - 60
       O = 61 - 75
*/
var baseArray = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);

// TODO Create a global var called number and initialize it to 0
var number = 0;

// TODO Create a global var called base and initialize it to 0
var base = 0;

// TODO call function init()
init();

   // TODO Declare function init()
   // it is the main function of the JavaScript and jQuery that manages
   // the bingo card creation and updating during play
   function init()
   {
       // TODO Write a for loop that loops 24 times and calls function fillCard()
       // passing the counter var as an argument
       for (var i = 0; i < 24; i++)
       {
           fillCard(i);
       }  
   }

   // TODO Declare function fillCard(i), it receives with one parameter
   // This function fills the bingo card
   function fillCard(i)
   {
       // TODO update global variable base and set it equal to the element in
       // array baseArray using the passed in parameter i as the index multiplied
       // by the value 15
       base = baseArray[i] * 15;
         
       // TODO update global variable number and set it equal to the value of
       // global variable base added to a randomly selected number in the
       // range of 1 - 15
       number = base + Math.floor(Math.random() * 15) + 1;
         
       // TODO Write an if condition that checks if the randomly generated number
       // has not been used
       if (usedArray[number] != true)
       {
           // the jQuery updates the HTML tag element with id "cell#"
           // where the # is the random number!
           $('#cell' + i).html(number);
          
           // TODO update the used number array setting the location in the array
           // to true to indicate that the value has been used
           usedArray[number] = true;
          
           // set the background and text color for new game
           var id = "cell" + i;
           document.getElementById(id).style.backgroundColor = "#eee";
           document.getElementById(id).style.color = "#333";          
       }
       // TODO Write the else leg of the above if condition
       else
       {

          
           // TODO using recursion call this function again
           fillCard(i);
       }
  
   }
     

   // TODO Declare function resetUsedNumbersArray()
   // This function resets the used number array for a new card

   function resetUsedNumbersArray()
   {
       // TODO Write a for loop that loops for the length of the array of used
       // numbers and set the value of each array element to false
       for (var j = 0; j < usedArray.length; j++)
       {
          usedArray[j] = false;
       }
   }
     
   // This jQuery function responds to an HTML tag element with id = newCard being clicked
   $('#newCard').click(function()
   {
       // TODO Call function resetUsedNumberArray to reset the used numbers
       resetUsedNumbersArray();

  
       // TODO call function init to generate a new bingo card
       init();
  
   });
     
   // This jQuery function toggles the backgroundColor and text color
   // based on what is it currently set to
   $('td').click(function()
   {
       var toggle = this.style;
       toggle.backgroundColor = toggle.backgroundColor? "":"#333";
       toggle.color = toggle.color? "":"#fff";
   });
});

Explanation / Answer

var baseArray = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);

// TODO Create a global var called number and initialize it to 0
var number = 0;

// TODO Create a global var called base and initialize it to 0
var base = 0;

// TODO call function init()
init();

   // TODO Declare function init()
   // it is the main function of the JavaScript and jQuery that manages
   // the bingo card creation and updating during play
   function init()
   {
       // TODO Write a for loop that loops 24 times and calls function fillCard()
       // passing the counter var as an argument
       for (var i = 0; i < 24; i++)
       {
           fillCard(i);
       }  
   }

   // TODO Declare function fillCard(i), it receives with one parameter
   // This function fills the bingo card
   function fillCard(i)
   {
       // TODO update global variable base and set it equal to the element in
       // array baseArray using the passed in parameter i as the index multiplied
       // by the value 15
       base = baseArray[i] * 15;
         
       // TODO update global variable number and set it equal to the value of
       // global variable base added to a randomly selected number in the
       // range of 1 - 15
       number = base + Math.floor(Math.random() * 15) + 1;
         
       // TODO Write an if condition that checks if the randomly generated number
       // has not been used
       if (usedArray[number] != true)
       {
           // the jQuery updates the HTML tag element with id "cell#"
           // where the # is the random number!
           $('#cell' + i).html(number);
          
           // TODO update the used number array setting the location in the array
           // to true to indicate that the value has been used
           usedArray[number] = true;
          
           // set the background and text color for new game
           var id = "cell" + i;
           document.getElementById(id).style.backgroundColor = "#eee";
           document.getElementById(id).style.color = "#333";          
       }
        // TODO Write the else leg of the above if condition
       else
       {

          
           // TODO using recursion call this function again
           fillCard(i);
       }
  
   }
     

   // TODO Declare function resetUsedNumbersArray()
   // This function resets the used number array for a new card

   function resetUsedNumbersArray()
   {
       // TODO Write a for loop that loops for the length of the array of used
       // numbers and set the value of each array element to false
       for (var j = 0; j < usedArray.length; j++)
       {
          usedArray[j] = false;
       }
   }
     
   // This jQuery function responds to an HTML tag element with id = newCard being clicked
   $('#newCard').click(function()
   {
       // TODO Call function resetUsedNumberArray to reset the used numbers
       resetUsedNumbersArray();

  
       // TODO call function init to generate a new bingo card
       init();
  
   });
     
   // This jQuery function toggles the backgroundColor and text color
   // based on what is it currently set to
   $('td').click(function()
   {
       var toggle = this.style;
       toggle.backgroundColor = toggle.backgroundColor? "":"#333";
       toggle.color = toggle.color? "":"#fff";
   });
});

Hire Me For All Your Tutoring Needs
Integrity-first tutoring: clear explanations, guidance, and feedback.
Drop an Email at
drjack9650@gmail.com
Chat Now And Get Quote