Control what students see

Make the program stop where it matters, hide what doesn't, and give it the input it needs.

Stopping points

A long loop can take dozens of steps to get to the interesting part. Mark the lines that matter, and Next and Back jump straight between them. To mark a line, do either of these:

• End the line with a comment: #break in Python, // break in Java, C, C++, JavaScript and TypeScript.
• In the editor, click the line's number.

for score in scores:
    total += score  #break

Students can still go one step at a time: hold Shift and press the arrow keys. Stopping points are saved in the Share link.

Hide variables

Keep loop counters and helper variables off the diagram with a comment anywhere in the program. List the names, separated by commas:

# codeflip_hide: i, temp

_* hides every name that starts with an underscore. In Java, C, C++, JavaScript and TypeScript, start the comment with //. Python Tutor's pythontutor_hide: works the same.

Keyboard input

Programs can read what's typed, with input(), Scanner, scanf, cin or prompt(). There are two ways to give it:

• Type it ahead of time under Program input in the editor, the way you'd type it at the keyboard.
• Leave that empty. When the program asks, a box appears under its output, and the program carries on with what's typed.

The input goes into the Share link, so students see the program run with the same input.

Files

Java and Python programs can open text files. Under Files in the editor, press Add file to write one, or Upload to add files from your computer. A program can have up to 20 files, 64 KB in all. They go into the Share link too.

Display options

These checkboxes appear in the visualizer when a program can use them:

• Keep finished calls on screen: leaves a function's frame on the diagram after it returns. Good for showing every call a recursive function made.
• Draw 2D arrays as grids: on by default. Turn it off to show each row as its own array, the way it really sits in memory.

Live mode

In the editor, check Live to see the diagram beside the code and watch it update as you type. It's useful in class: change a line and everyone sees what changes.

Keyboard shortcuts