Deploy instant assessment quizzes with Jupyter notebook tools

An standalone app suitable for complimenting e-learning web applications.

If your teaching resources include HTML-based script such as formulas, this tutorial will show you how to easily tabulate content with the list of widget components from Jupyter notebook module — ipywidgets and deploy using Voilà and ngrok.

In this tutorial, you will be able to apply and share an elementary-level assessment quiz app that allows user to get interactions with a single click. The examples below include multiple-option, input, diagrams, formulas and answer key functions.


widgets, Layout, Box, GridspecLayout

Create a basic mcq widget function:

Assign and specify the variables within the ‘multipleChoice_widget’ function with the question description, options, correct answer, followed by feedback. Alternatively, you can change the button variables to fit a suitable method.

For mathematical formulas, try using Tex-based language with the Label or HTMLMath widget:

you may also apply a row and column template for Tex-based options:

Some useful links:

Reference diagrams in templates:

Load HTML widgets with embedded http links and basic layout features or tabular diagrams with GridspecLayout for grid style templates.

Text-input quiz

Assign and specify the variables within the ‘textinputquiz_widget’ function with the description, input, followed by feedback output. Alternatively, you can adjust and omit these variables to fit a suitable method.

Lastly, before you deploy align the quiz parts with VBox and HBox and save Jupyter notebook file in .ipynb format and:

  1. Install Voila to host your completed quiz app:

Voilà can be used to run, convert, and serve a Jupyter notebook as a browser app. A Python virtual environment creates an isolated environment for separate project dependencies. Run the command in a pipenv/conda/venv environment:

voila <path>\demo_quiz.ipynb

where <path> is the directory of your file. Merge the code cells and run the app, the browser should pop up and show the output. To share on a url, follow the steps below:

2. Install ngrok to share your completed quiz app via a unique URL as a free or paid option. Run command in console (if using windows, Powershell may require admin):

ngrok http 8866

where the local port for the app is forwarded. Powershell is a windows console for command-line task automation providing for the ngrok task. A ngrok url will be generated and your quiz app is ready!


  2. Buttons — Material Design

Contributor on the py-bandwagon

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store