Debugging mindset in Intro to Computing - Draw & Build Visually

Draw This - beginner

Draw a flowchart that shows the step-by-step process of debugging a simple program that does not print the expected output.

10 minutes

Hint 1

Hint 2

Hint 3

Grading Criteria

Start and End symbols present

Clear step for identifying the problem

Step for reproducing the error included

Decision diamond for checking if the fix worked

Loop back to code checking if problem persists

Steps arranged in logical order

Solution

  +---------------------+
  |       Start         |
  +----------+----------+
             |
             v
  +---------------------+
  | Identify the problem |
  +----------+----------+
             |
             v
  +---------------------+
  | Reproduce the error  |
  +----------+----------+
             |
             v
  +---------------------+
  | Check the code lines |
  +----------+----------+
             |
             v
  +---------------------+
  | Make a small change  |
  +----------+----------+
             |
             v
  +---------------------+
  | Test the program     |
  +----------+----------+
             |
             v
  +---------------------+
  | Does it work now?   |
  +----------+----------+
       /           \
      / Yes         \ No
     v               v
+----------+    +---------------------+
|   End    |    | Go back to check    |
+----------+    | the code lines      |
                +----------+----------+
                           |
                           v
                  (loops back to "Make a small change")

This flowchart shows the debugging mindset as a step-by-step process:

1. Start: Begin the debugging process.
2. Identify the problem: Understand what is wrong with the program.
3. Reproduce the error: Run the program to see the error happen.
4. Check the code lines: Look carefully at the code to find possible mistakes.
5. Make a small change: Fix one thing at a time to isolate the problem.
6. Test the program: Run the program again to see if the fix worked.
7. Does it work now?: If yes, end the process. If no, go back to checking the code and try another fix.

This loop continues until the program works correctly.

Variations - 2 Challenges

[intermediate] Draw a flowchart for debugging a program that crashes when opening a file.

[advanced] Draw a detailed flowchart for debugging a program that gives incorrect calculation results, including checking inputs, formulas, and output verification.

Practice

1. What is the main goal of having a debugging mindset when working with code?

easy

A. To ignore error messages and keep coding

B. To write code as fast as possible without testing

C. To carefully check and fix code step-by-step

D. To copy code from others without understanding

Solution

1. Step 1: Understand the purpose of debugging mindset

   Debugging mindset means being careful and systematic in finding and fixing errors in code.

2. Step 2: Compare options with this purpose

   Only To carefully check and fix code step-by-step matches this careful step-by-step checking and fixing approach.

3. Final Answer:

   To carefully check and fix code step-by-step -> Option C

4. Quick Check:

   Debugging mindset = careful step-by-step fixing [OK]

Hint: Debugging means careful step-by-step checking [OK]

Common Mistakes:

• Thinking debugging is about coding fast
• Ignoring error messages
• Copying code without understanding

2. Which of the following is the correct way to write a comment in Python to help with debugging?

easy

A.

B. # This is a comment

C. /* This is a comment */

D. // This is a comment

Solution

1. Step 1: Identify Python comment syntax

   Python uses the # symbol to start a comment line.

2. Step 2: Match options with Python syntax

   # This is a comment uses #, which is correct. Others are comment styles for HTML, JavaScript, or C.

3. Final Answer:

   # This is a comment -> Option B

4. Quick Check:

   Python comment = # [OK]

Hint: Python comments start with # symbol [OK]

Common Mistakes:

• Using // or /* */ which are not Python comments
• Using HTML comment syntax in Python

3. Consider this Python code snippet:

def add_numbers(a, b):
    return a + b

result = add_numbers(3, '4')
print(result)

What will happen when this code runs?

medium

A. It raises a TypeError

B. It prints 34

C. It prints 7

D. It prints null

Solution

1. Step 1: Analyze the function call with mixed types

   The function tries to add an integer 3 and a string '4'.

2. Step 2: Understand Python's behavior on adding int and str

   Python cannot add int and str directly, so it raises a TypeError.

3. Final Answer:

   It raises a TypeError -> Option A

4. Quick Check:

   int + str = TypeError [OK]

Hint: Adding int and str causes TypeError in Python [OK]

Common Mistakes:

• Thinking Python concatenates int and str
• Expecting numeric addition without type conversion

4. You have this JavaScript code:

let count = 0;
for(let i = 0; i < 5; i++) {
  count = count + i;
}
console.log(count);

But the output is always 0. What is the most likely error?

medium

A. The console.log statement is missing

B. The loop condition is wrong, it never runs

C. The variable count is declared with let outside the loop

D. The variable count is reset inside the loop

Solution

1. Step 1: Check where count is updated

   If count is reset to 0 inside the loop each time, it never accumulates.

2. Step 2: Identify the cause of output always 0

   Resetting count inside the loop causes it to stay 0 after loop ends.

3. Final Answer:

   The variable count is reset inside the loop -> Option D

4. Quick Check:

   Resetting accumulator inside loop = no sum [OK]

Hint: Check if accumulator resets inside loop [OK]

Common Mistakes:

• Assuming loop never runs
• Ignoring variable reset inside loop
• Thinking console.log missing causes no output

5. You want to debug a program that processes a list of numbers but sometimes skips numbers unexpectedly. Which approach best uses a debugging mindset to find the problem?

hard

A. Add print statements inside the loop to trace each number processed

B. Delete the entire code and rewrite it from scratch

C. Ignore the problem and hope it fixes itself

D. Change random parts of the code without testing

Solution

1. Step 1: Choose a systematic way to observe program behavior

   Adding print statements inside the loop helps see which numbers are processed.

2. Step 2: Use this information to identify where skipping happens

   Tracing output step-by-step reveals logic errors causing skips.

3. Final Answer:

   Add print statements inside the loop to trace each number processed -> Option A

4. Quick Check:

   Trace program flow step-by-step to debug [OK]

Hint: Trace code step-by-step with print statements [OK]

Common Mistakes:

• Rewriting code without understanding
• Ignoring errors
• Changing code randomly without testing