Is it possible to build a web application in Python to display (and evaluate) multiple-choice questions? Even more importantly, can we render “latex” equations as part of the MCQ?
After briefly looking at NiceGUI, Flet, Solara, Trame, and Streamlit, I decided to go ahead with Streamlit to build this web app.
Even though this was my first attempt in using streamlit, I found it easy to work with since it has good documentation. I am sure my code could be improved, but I am not building a commercial tool, so it doesn’t really matter.
One thing that is crucial to my app is to render “Radio” buttons with latex equations. This is directly supported in streamlit; I don’t have to do anything special. Here is the code that lays out UI components on the web page:
Rendering the Page
The MCQ consists of multiple questions and I model this using two classes: Assignment models the collection of questions and Question represents each question in the assignment. The Assignment object is constructed from an Excel Worksheet, which contains the question, answer choices, and the expected answer. Here is the definition of the two classes:
Assignment and Question Classes
Streamlit uses “session state” to share variables across runs. I found this quite useful. I use a few “keys” in the program and these are initialized in the beginning:
Initializing Session Variables
To launch the program, type “streamlit run MCQ.py” in the terminal. This launches the server and the page is opened in the browser.
Launching the Program
Here are the first three questions as they appear in the browser:
Browser Page with MCQ
Notice that I am displaying a “summary” grid at the top. It initially shows the number of questions in the assignment. Once the “Submit” button is clicked, the other fields in the grid will be filled.
I am pleased with the display of equations in the problem description area as well as along side the Radio buttons. This is one of the main reasons for choosing to go with “streamlit”.
I can now select my answer choices and then click “Submit” at the bottom of the page.
The Submit Button
This triggers the “submitClicked()” method, which validates the given answers against the correct response stored in the Excel file. At this point, the browser displays the message “Your answers have been submitted!” and updates the table with remaining data. It also disables the Submit button and Radio buttons, preventing further changes to the answers.
After Submit Button is Clicked
Given that my main goal was to check if “streamlit” can handle Latex text, I am happy that it satisfies my requirement. Overall, it was an enjoyable experience building the app.
You can download the Python source file and the sample data file here.
Have a nice week!
Recent Comments