Create an Interactive Data Science e-Course App Using Streamlit

Introduction

If you have been following my Medium blog for some time, you know I am a big fan of Streamlit. I have written several articles about Streamlit, ranging from complete beginners' tutorials to hands-on app-building projects. I never get bored with it and still find new features, cool tricks, or exciting capabilities to explore and learn every day.

Streamlit makes it possible and super easy for me, as a data scientist, to explore the world of web app development, which I find very fascinating and eye-opening. I recently came across a new Streamlit companion library, streamlit_book, that was created by Sebastian Flores Benner and was intended for teachers and content creators to create interactive e-courses, tutorials, or presentations using the Streamlit framework.

I was super interested and immediately started to explore and play with it. Using Streamlit and streamlit_book, I created a sample data science e-tutorial app that has multiple pages, with code examples that users can interact with, and quizzes to test one's knowledge. Despite some minor issues that I ran into during the process (and I had to use some workarounds), in general, I found this new library to be very useful and convenient.

In this article, I'll share with you the ideas, steps, and code of creating a data science e-tutorial app. The main idea here is to experiment with the Streamlit framework and see whether we can bring some level of interactivity into a data science tutorial such as arranging the content in multiple pages, allowing users to run and check the output of a code example, and providing users with quizzes to enhance their learning experience.

Here is a short YouTube video that demos the app:

Pre-requisite

If you haven't already done so, you need to install Streamlit and streamlit_book on your computer for building this app.

#1: Installation of Streamlit:

You can refer to the following article and follow the instructions to install Streamlit and learn the basics.

Streamlit Hands-On: From Zero to Your First Awesome Web App

#2: Installation of streamlit_book

Follow the instructions on the streamlit_book's documentation page to install the streamlit_book library:

pip install streamlit_book

Installation - streamlit_book documentation

Create the Project Folder and Files

Before we launch Streamlit and start building the app, let's create a project folder and some empty python (.py) files, following the steps and structure shown below.

First, let's create a project folder called 'ecourse_app' that will house all of our files needed for this project. Within the project folder, create a sub-folder called 'ecourse_streamlit' and an empty python (.py) file called 'ecourse_main.py'. This python file will be the main file that sets up the app's structure and properties.

Within the sub-folder 'ecourse_streamlit', create a few empty python files which will be the files that host all the course content. Each of the python files serves as a page in the app. Since streamlit_book sorts and reads the content files in alphabetic order, it is helpful to put numbers before the file names to have the desired ordering. In the folder, you will also need to include a sample data CSV file and an image that will be used as the cover image.

Now we can fire up Streamlit from the Anaconda terminal window. A blank Streamlit app should appear in your local web browser.

Create the Main File (ecourse_main.py)

Open the ecourse_main.py file and insert the code below. Line 6 sets up the streamlit_book properties and allows you to configure the behavior of your app. You need to specify the folder name where streamlit_book should look for all the content files using the path parameter. You can also customize what the previous page and next page buttons look like by choosing your own icons or text.

We can also add a sidebar to the app and provide some additional information about the app. To save space, we can use the st.sidebar.expander() widget. We'll also create a feedback section to ask users to rate our app and provide any feedback.

Create the Content Files (00 Cover Page.py, etc.)

Create the Cover Page (00 Cover Page.py)

Let's first create a cover page for our e-tutorial. Open the '00 Cover Page.py' file and insert the following code.

Line 5–9: We add a title to the cover page of the app. The reason why we choose st.markdown() instead of st.title() is that we can use CSS to style the text and make it more visually appealing.

Line 11–19: We add a cover image to the app. We use a little trick here to center the image. Using st.columns() we can create 3 columns, where the second column (the column where the image is placed) has 6 times the width of the first and third, therefore placing the image in the center.

Our cover page is done! It looks like this:

Create the Introduction Page (01 What is Pandas.py)

After the cover page, let's create an introduction page that gives readers a nice intro about what Pandas library is and what this e-tutorial is about. Open the '01 What is Pandas.py' and insert the code below:

Since the introduction page is a text-rich page, you don't always have to create it using a python (.py) file. You can create it using a markdown file (.md file) if you want to apply more customized style and format to the text.

Create the 'Import Data' Page (02 Import Data.py)

Now let's move on to our third page - the 'Import Data' page. On this page, we want to show the readers how to import a CSV file into Pandas. We want to make the page interactive by allowing users to run the code examples and check the output. We also want to include a couple of quizzes at the end of the page so that users can self-test their knowledge. This is an interesting page to build!

Open the '02 Import Data.py' file and insert the code below:

Let's examine the code above in detail:

Line 5–6: we use st.subheader() to add a header to the page and use st.markdown() to add some text to explain how to import data into Python.

Line 8–10: We put the first piece of code in a string and then use st.code() to display it.

Line 12–18: We create a Streamlit button so that when users click the button 'Check Results', we display the output of the first piece of code by using st.write().

Line 20–30: We do the same thing for the second piece of code.

Line 32–46: We put the third piece of code in a string and display it using st.code(), just like what we did for the previous two code pieces. However, since the output of this code is not a data frame, we can't just use st.write() to display the output. Instead, we need to convert the output to a string and use st.text() to display the results, as you see in line 39–44.

Line 48–58: We create a quiz section and add two questions by using the two built-in streamlit_book widgets: stb.single_choice() and stb.true_or_false().

There you go with the third page of the tutorial. It has a few paragraphs to explain the concept and the code, and then displays the code examples and allows users to run and check the output! It also has a nice quiz section to bring extra interactivity into the app.

Now you can just follow the same code template and create the rest of the pages in this app! Do check out the streamlit_books' documentation page as it also has some other cool features to experiment with such as multiple-choice question widgets, to-do-list widgets, etc. Be creative and have some fun! Thanks for reading and I hope you enjoyed this article.

Reference:

1. How to create interactive books with Streamlit in 5 steps by Sebastian Flores Benner

2. Streamlit_book documentation: https://streamlit-book.readthedocs.io/en/latest/

You can unlock full access to my writing and the rest of Medium by signing up for Medium membership ($5 per month) through this referral link. By signing up through this link, I will receive a portion of your membership fee at no additional cost to you. Thank you!