Flode is a course that creates executable flow charts. Flode is a great way to teach computational thinking and introduce students to programming. It can:
- create beautiful, annotated flow charts
- write proper code expressions, including decisions, in chart elements
- integrated debugger
- export your charts as images for project write-ups
- input and output elements so automated tests can auto-grade charts.
Please see the sections below for details on how to access ready made course or how to create your own projects where students can create Flode charts within their own projects.
Cheat Sheet
Here is a quick reference for commonly used actions.
Dragging in blocks
Drag from the top toolbar into the chart.
Connecting blocks with lines
- Hover over a block to see the connection points
- Move the mouse over one of the small connection point circles
- Click and drag with the mouse to start creating the line
- Release the mouse to move in another direction then click to change direction again or connect to another connection point
Resizing blocks
Click on a block then drag a highlighted point
Zooming & centering your chart
Zoom controls are in the toolbar or using the mouse wheel if you have one
Multi selection
- Press the shift key then drag the mouse to surround blocks to multi-select
- Select one block then press the shift key then start dragging the mouse
Aligning blocks
- Multi select the blocks to align
- Right click and select one of the alignment options
Undo & Redo
- Undo
Ctrl+Z
(PC)Cmd+Z
(Mac) - Redo
Shift+Ctrl+Z
(PC)Shift+Cmd+Z
(Mac)
Adding comments
- Click on a block then press the speech bubble icon to add a comment.
Video overview
Flode teaching content
The content also contains many auto-graded assessments. Results can be seen instantly on the teacher Courses feature.
- Log into Codio
- Select Resources from the items on the left of the Dashboard
- Look for An Introduction to Programming
An Introduction to Programming uses Flode extensively and provides an excellent way of introducing students to programming, computational thinking and Algorithms.
Creating and editing a new Flode file
If you want to create Flode charts independently of any Codio Course content, create a new project from the Dashboard > My Projects area.
Once inside a project, to create a new flow chart, simply create a new file with the extension .flode
. A new Flode window will appear and you can start creating and editing your chart.
A new file is created from either the File menu or by right-clicking on the project name line in the file tree.
To edit an existing .flode
file, simply click on the file name to open the Flode editor.
Detailed instructions
To get detailed instructions on how to use Flode,
- Log into Codio
- Select Resources from the items on the left of the Dashboard
- Look for An Introduction to Programming
- Select the first Module, Flode
- Press Start Assignment from the first Unit in the list Introduction to Flode
Credits
Many thanks to the folks at JGraph for their excellent flowcharting and diagramming tools.