Draw Boxes With Recursion Puzzle Explainer


Aim of this puzzle:
This puzzle introduces the concept of recursion. You’ll update an array of possible inputs to a function to include an input that makes the function run again.

Walk through of the solution:
Recursion is when a function repeatedly calls itself from inside its own code block until an end condition is met (known as the base case).

In the code that you start off with, a value, choice, is picked at random from the choices array and used as an argument to withRecursion. The withRecursion function takes choice and compares it to the value pickAgain. If choice is pickAgain, then the recursive case runs: drawBox() outputs a black box, a newLine() is drawn, a nextChoice is selected, and withRecursion calls itself again with nextChoice as an argument. If choice is not pickAgain, then the base case is triggered: drawBox() uses the color value of choice to output a box and the function ends. As it is, the choices array only consists of color values, so the recursive case is never triggered. In this puzzle, you’ll add pickAgain to the choices array so the recursive case can run.

To complete the puzzle, add pickAgain two times to the choices array.

Tap the play button on the Example Solution a few times. Each box illustrates one time through the function, with black boxes representing recursive cases and a color box representing the base case.

Sample code solution:
(Tap below to reveal)

let choices = ['red', 'yellow', 'blue', 'pickAgain', 'pickAgain']
let choice = pickRandom(choices)

function withRecursion (choice) {
    if (choice === 'pickAgain'){
        let nextChoice = pickRandom(choices)
        return withRecursion(nextChoice)
    } else {
        return choice


JavaScript Concepts: Variable, Function, Recursion
Grasshopper Concepts: drawBox(), pickRandom()

listed #2