Jupyter Notebooks - Supporting Computing Education

This binder configuration has been initialised with a range of packages and extensions to support introductory programming activities.

To enable / disable extensions, select the Edit - nbextensions config menu item or click on the Nb_extensions tab in the notebooks homepage and then force reload the notebook page in your browser.

Jupyter notebooks include code cells that can act, by default, as an interactive IPython command line.

For example, enter a simple calculation such as 1 + 2 in a code cell and then run the cell either from the toolbar Run button or using the SHIFT-RETURN keyboard shortcut.

In [ ]:
# An example of hello world

print("Hello World")
In [ ]:

If the last line of a code cell returns a value, that will be displayed as the Out[]: value of the cell.

In [ ]:

Jupyter notebook markdown cells can contain non-executable code fragments with language sensitive syntax highlighting.

For example, python:

print("Hello World!")

Or Javascript:

var msg="Hello World!";

Python code can also be included and executed in a markdown cell. For example, double click on this cell to see how the following sum is calculated:

a + a = {{ a + a}}

Note that it requires any variables that are referenced to have values set by previously executed code cells. If the variable values are changed the value in the markdown cell will not change unless the markdown cell is re-run.

Line numbering

Line numbers can be enabled / disabled in a code cell; select / click in a code cell and use the ESC-l keyboard shortcut to toggle line numbers in the selected cell, SHIFT-l to toggle line numbers in all code cells.

In [ ]:
# Code cells can display line numbers
print("Hello World")

Code Folding

Code folding is enabled / disabled using the Codefolding notebook extension.

The folded state of the code is persisted in a saved notebook.

In [4]:
def my_function_uncollapsed(txt='Hello world'):
    return txt

def my_function_collapsed(txt='Hello world'):
    return txt
In [22]:
# Comments in the first line of a code cell support collapsing too
print('The code is collapsed under the comment')
The code is collapsed under the comment

Locked and Frozen Cells

Cells can be locked (that is, read-only and frozen using the Freeze extension. Select a cell and click on the appropriate toolbar button to select the desired action (unlock, read-only, freeze).

read-only: It's input can be viewed by double-clicking on it, but cannot be changed. frozen: Input cannot be viewed by double-clicking.

In a read-only markdown cell, the input can be viewed by double-clicking on it, but content cannot be edited and the cell cannot be deleted.

The read-only nature of the cell is revealed by colour -highlighting when you double-click on the cell to try to edit it.

In a frozen markdown cell, the cell cannot be deleted and the content can neither be edited nor viewed in edit mode.

In [ ]:
# *read-only* code cell: can be executed, but cannot be edited or deleted
In [ ]:
#*frozen* code cell: cannot be deleted, altered or executed

Variable Inspector

A variable inspector panel, from the varInspector extension, can be selected from the toolbar to pop up a display showing the variables that have been defined in the current Python session and their values.

Tone Down Error Messages

The Skip Traceback extension hides a lot of the scary stuff if an error is generated. Clicking the arrow allows the full trace to be displayed.

In [1]:
NameError                                 Traceback (most recent call last)
<ipython-input-1-0d4ee401fc71> in <module>()
----> 1 this_is_not_defined

NameError: name 'this_is_not_defined' is not defined

Snippets Menu

The Snippets Menu extension adds a new menu that contains common code fragments. The menu can also be customised with code fragments added via a JSON object defined in the Snippets Menu extension management view.

Snippets can be used as a way of getting boilerplate code to users.

To add a snippet, select a cell, such as the code cell below, and then select the desired snippet from the menu.

In [ ]:


A simple turtle widget from https://github.com/gkvoelkl/ipython-turtle-widget

This allows activities based around controlling a simple 2D graphical turtle to be run within a notebook environment.

In [ ]:
from ipyturtle import Turtle
In [10]:
#Use a floating display panel
t = Turtle()
In [11]:

Or use a fixed panel:

In [17]:
t2 = Turtle(fixed=False, width=100, height=100)
In [18]:
for i in range(4):
In [19]:

Blockly Style Programming

Learners can get started creating simple programs using a blockly style interface using the %jigsaw magic from Calysto/metakernel.

In [7]:
#!pip3 install metakernel
import metakernel

The programme is saved to a local file related to the workspace name:

In [ ]:
%jigsaw Python --workspace mynewProgram

The code in the previous cell is generated from the blockly programme.

The blockly programme is also saved as an .xml file, which means the notebook session can be closed and the blockly programme reopened in the same - or different - notebook at a later date.

In [9]:
!ls *mynewProgram*
mynewProgram.html  mynewProgram.xml


Via https://github.com/lgpage/nbtutor

The nbtutor extension provides a code stepper that lets you step through a code snippet one line at a time and inspect the values of variables that have been set whilst stepping through the code.

Note that running the tutor sets the code cell toolbar to the Visualize type. To go back to the normal view, select View -> Cell Toolebar -> None.

In [36]:
%load_ext nbtutor
In [38]:
%%nbtutor -r -f
import math

def multi(x, y):
    tmp=x * y
    return y

xy=multi(3, 5)
In [ ]: