Online Python Tutor (OPT) is a popular virtual learning tool that provides interactive visualisation of program execution in a browser without login. However, such a tool is not easy to maintain because serving allowing the public to run programs in a server without login incurs high computational cost in addition to security risks.

This project makes OPT serverless, i.e., usuable offline without a server. Python programs are run by the browser using pyodide. Hence, teachers can enable more python packages/functions than the original setup without worrying about network attacks. For online exam, students may also use the tool to debug programs without worry of network outage. It can also run in Safe Exam Browser.

Simply visit

https://dive4dec.github.io/optlite/

The live edit mode is at

https://dive4dec.github.io/optlite/live.html

Programs can be shared using permalinks

• System information and available modules
• Enumerate subsets
• Recursion for Fibonacci

Git clone the current repository by running

git clone https://github.com/dive4dec/optlite

Setup a python environment. In the root folder of the repository, run the following to create the python wheel file under dist folder.

pip install -r optlite/requirements.txt
python setup.py bdist_wheel -d dist

Setup [NodeJs]. Install the required packages as

npm install
npm run build:prod

Serve the content in build directory using an http server, e.g.:

python -m simple.http -d build

To install addition packages, take a look at the OptLite object at

• runner.ts
• global.ts

E.g., to install snowballstemmer, modify the script tag in the header of build/index.html to

<script>
OptLite = {
  packages: ['snowballstemmer']
};

(function () {
  let script = document.createElement('script');
  script.src = 'visualize.bundle.js';
  script.defer = true;
  document.head.appendChild(script);
}) ();
</script>

and modify the script tag in the header of build/live.html to

<script>
OptLite = {
  packages: ['snowballstemmer']
};

(function () {
  let script = document.createElement('script');
  script.src = 'opt-live.bundle.js';
  script.defer = true;
  document.head.appendChild(script);
}) ();
</script>