9.1.6 Checkerboard V1 Codehs !!install!! -

Do not initialize the board like this: board = [[0]*8]*8 . This creates references to the same list 8 times. If you change one row, all rows change. Use a for loop to append new, unique lists to the board variable as shown in the code above. B. Accessing 2D Lists The core of this exercise is board[row][col] = 1 . board[0] accesses the first row (the first internal list). board[0][0] accesses the first element of the first row. C. The print_board Format

function start(): turn off beeper auto-placement var row = 1 while (front is clear or left is clear): placeRow(row) if (front is clear): moveToNextRow() row++

grid of zeros and ones, representing a checkerboard, using nested loops and proper assignment syntax.

To pass the CodeHS autograder, you can't just print the numbers; you must actually values to a 2D list using nested for-loops. 9.1.6 checkerboard v1 codehs

A loop that repeats the setup and move functions until the top of the world is reached. 3. The 9.1.6 Checkerboard V1 Code Solution

# Mastering CodeHS 9.1.6 Checkerboard v1: A Complete Guide Building a checkerboard grid is a classic computer science problem. In the CodeHS JavaScript track, exercise **9.1.6 Checkerboard v1** challenges you to use nested loops and programming logic to draw a grid of alternating colored squares. This guide breaks down the concept, the logic, and the complete solution to help you understand how to write and optimize this code. ## Understanding the Goal The objective of Checkerboard v1 is to create an 8x8 grid of squares on the screen. The squares must alternate colors (usually black and red, or black and white) both horizontally and vertically, perfectly mimicking a real-life checkerboard. ### Key Technical Concepts * **Nested Loops:** Using a loop inside another loop to control rows and columns. * **Conditional Logic (If/Else):** Determining which color to paint a square based on its position. * **Coordinate Math:** Calculating the exact pixel coordinates $(x, y)$ for each square so they do not overlap. --- ## Breakdown of the Logic To build an 8x8 grid, you cannot just draw 64 squares manually. You need a system that loops through 8 rows, and inside each row, loops through 8 columns. ### 1. The Grid Math Assume the screen or grid width is divided equally. If each square is $40 \times 40$ pixels: * **Column 0** starts at $x = 0$ * **Column 1** starts at $x = 40$ * **Column 2** starts at $x = 80$ * Formula for X: `col * SQUARE_SIZE` * Formula for Y: `row * SQUARE_SIZE` ### 2. The Alternating Color Logic How do we know if a square should be Color A or Color B? We look at the grid coordinates `(row, col)`. If you add the current row index and column index together (`row + col`), a pattern emerges: * Row 0, Col 0 $\rightarrow 0 + 0 = 0$ (Even $\rightarrow$ Color A) * Row 0, Col 1 $\rightarrow 0 + 1 = 1$ (Odd $\rightarrow$ Color B) * Row 1, Col 0 $\rightarrow 1 + 0 = 1$ (Odd $\rightarrow$ Color B) * Row 1, Col 1 $\rightarrow 1 + 1 = 2$ (Even $\rightarrow$ Color A) By using the modulo operator (`% 2`), we check if `(row + col)` is divisible by 2. If the remainder is 0, it is an even position; otherwise, it is odd. --- ## CodeHS 9.1.6 Checkerboard v1 Code Solution Here is the complete JavaScript solution using the CodeHS graphics library. ```javascript // Constants for the checkerboard setup var NUM_ROWS = 8; var NUM_COLS = 8; var SQUARE_SIZE = 40; // Adjust based on your specific assignment window size function start() drawCheckerboard(); function drawCheckerboard() // Outer loop controls the rows (vertical movement) for (var row = 0; row < NUM_ROWS; row++) // Inner loop controls the columns (horizontal movement) for (var col = 0; col < NUM_COLS; col++) // Calculate coordinates for the current square var x = col * SQUARE_SIZE; var y = row * SQUARE_SIZE; // Create the square object var square = new Rectangle(SQUARE_SIZE, SQUARE_SIZE); square.setPosition(x, y); // Alternating color logic using row and column indices if ((row + col) % 2 === 0) square.setColor(Color.RED); else square.setColor(Color.BLACK); // Add the square to the screen add(square); ``` --- ## Detailed Code Step-by-Step Walkthrough ### Step 1: Defining Constants We define `NUM_ROWS`, `NUM_COLS`, and `SQUARE_SIZE` at the top. This makes the code adaptable. If you want to change it to a 10x10 board later, you only have to change the constants, not the core logic. ### Step 2: The Outer Loop (`row`) The outer loop runs 8 times. It starts at `row = 0` and stops when `row = 7`. This dictates the vertical $y$-axis progression. ### Step 3: The Inner Loop (`col`) For *every single iteration* of the outer loop, the inner loop runs 8 times. This draws 8 individual squares from left to right before moving down to the next row. ### Step 4: The `if/else` Condition The line `if ((row + col) % 2 === 0)` evaluates the mathematical rule we established earlier. * If true, it assigns `Color.RED`. * If false, it defaults to `Color.BLACK`. ### Step 5: Rendering `add(square)` places the fully configured rectangle object onto the canvas canvas at the calculated `(x, y)` coordinate. --- ## Common Mistakes to Avoid 1. **Mixing up X and Y coordinates:** Remember that columns move horizontally along the X-axis (`col * SQUARE_SIZE`), while rows move vertically down the Y-axis (`row * SQUARE_SIZE`). Swapping these will corrupt the grid rendering. 2. **Forgetting to update loop variables:** Ensure your loop conditions use `row++` and `col++` so you do not accidentally trigger an infinite loop that crashes the CodeHS browser tab. 3. **Using a single loop:** Trying to draw all 64 squares in a single loop using complex division math is messy. Always use nested loops for 2D grids. Use code with caution. If you want to customize this further, let me know:

Never try to move() if you are at a wall. This will cause a Karel crash. Do not initialize the board like this: board = [[0]*8]*8

Here is a comprehensive breakdown of how to approach the code, the logic behind it, and the final implementation.

: Create a 2D integer array with 8 rows and 8 columns.

What are you currently seeing?

The main function drives the entire program. It uses a while (leftIsClear()) loop to ensure that as long as there is a row above to move to, Karel keeps working. The final fillRow() ensures the last row is filled. fillRow() Function This is the core logic. Karel starts by placing a beeper.

if the prompt specifically requests them, as simply printing the pattern without storing it in a grid may cause errors. Typical Pitfalls Incorrect Function Placement : Defining the print_board function inside another block or incorrectly indenting it. Missing Middle Rows

11111111 11111111 11111111 00000000 00000000 11111111 11111111 11111111 Use a for loop to append new, unique

board, you only need to change these two variables rather than hunting through your loops. The Nested Loop Architecture

: Some variations or autograders may require initializing the board with 0s first and then using nested loops to selectively assign to specific indices (e.g., board[i][j] = 1 Autograder Requirements : To pass all tests on , ensure you are using assignment statements