How to make an interactive web application for research in minutes

Follow this detailed guide to use our open source web application format in your next study

Photo by John Schnobrich on Unsplash

Are you a behavioral researcher? Do you want to implement quiz games, interventions, or interactive assessments that give participants detailed feedback (and collect data) for free? Then this tutorial is for you!

We’ve created a web quiz to test misinformation resilience with psychometrically validated items from the Misinformation Susceptibility Test (MIST), which you can read more about from Cambridge or YouGov. You can use this tutorial to create your own MIST web app (try it at https://yourmist.streamlit.app) or adapt this template for your use case.

The process has three steps:

1. Making a Streamlit account (a Python web app module & hosting),
2. Copying your MIST app from our GitHub,
3. Creating and connecting a private online database (MongoDB) to the web app. (Optional).

Going through this tutorial should not take longer than 30 minutes. If you have any questions or get stuck along the way, don’t hesitate to leave a comment here or reach out to me on Twitter.

YourMIST app (https://yourmist.streamlit.app) screenshot by the author.

Step 1: Create a Streamlit account

Go to https://streamlit.io and sign up for an account, connect your GitHub account (create one here if you don’t have it yet). It might take the Streamlit team a couple of days to approve your account (three for me), meanwhile you can proceed to Step 2.

Step 2: Fork MIST from GitHub and create your app

You will need a GitHub account for this. Create one here if you don’t have it yet. You can also install GitHub Desktop for a more user-friendly interface.

1. Go to https://github.com/yarakyrychenko/mist and click Fork.
2. Make any changes you’d like in the app.py file to customise your app (or keep as is for now). Delete the parts that attempt to save participant data if you don’t want that (in line 305 replace st.session_state.dem_submitted with False).
3. Go to Streamlit, log in with your account and create an app. Select the correct repository, write “main” under Branch and “app.py” under Main file path.

Deploy your MIST app with Streamlit.

Step 3: Connect to MongoDB (optional, to collect participant data)

1. Go to https://www.mongodb.com/cloud/atlas/register to create a MongoDB account.

1. Create a MongoDB account.

2. Go to Database and click + Create to create a new cluster. Pick the appropriate cluster tier (free) and country for data storage. You will be prompted to create a user and a password. Jot it down somewhere because you’ll need it later to connect.

2. Create a new cluster.

3. Select Network Access under Security. Then click Add IP Address and select Allow access from anywhere.

3. Select Network Access under Security. Then click Add IP Address and select Allow access from anywhere.

You should see this if you’ve successfully updated your access preferences in Step 3.3.

4. Go to the Database and click on your cluster name.

5. Click on Collections and Create Database. Name your databased mist and collection app.

6. Go back to the cluster overview (click on the cluster name) and click Connect. Pick Connect your application. Then select Python and Version 3.11 or later. Copy and save the string somewhere. Enter the username and password you created in step 2 into the string instead of the placehodlers.

6. Click Connect. Pick Connect your application. Then select Python and Version 3.11 or later.

7. Go to your Streamlit account and add the string to the secrets by clicking on Settings for your MIST app and selecting Secrets. Type mongo = and then paste your string and save the changes.

Done! Enjoy your MIST-powered web app!

You can connect your app to a private Google Sheet instead of MongoDB following the guide below (Google Sheet API might not be free for all use cases):

How to create a python web app to securely collect and store user information

In case you’re new to Streamlit and want to learn more, here is a beginner-friendly guide:

How to impress with your project: build a web app on Streamlit

Thanks for going through the tutorial! I would love to see all the amazing apps you create, so please tweet them at me (@YaraKyrychenko).