{"id":3361,"date":"2024-03-26T08:57:34","date_gmt":"2024-03-26T03:27:34","guid":{"rendered":"https:\/\/www.rangakrish.com\/?p=3361"},"modified":"2024-03-26T08:57:34","modified_gmt":"2024-03-26T03:27:34","slug":"using-streamlit-to-create-multiple-choice-questions-mcq","status":"publish","type":"post","link":"https:\/\/www.rangakrish.com\/index.php\/2024\/03\/26\/using-streamlit-to-create-multiple-choice-questions-mcq\/","title":{"rendered":"Using Streamlit to Create Multiple Choice Questions (MCQ)"},"content":{"rendered":"

Is it possible to build a web application in Python<\/strong><\/em> to display (and evaluate) multiple-choice questions? Even more importantly, can we render \u201clatex\u201d<\/strong><\/em><\/a>\u00a0 equations as part of the MCQ<\/strong><\/em>?<\/p>\n

After briefly looking at NiceGUI<\/strong><\/em><\/a>, Flet<\/strong><\/em><\/a>, Solara<\/strong><\/em><\/a>, Trame<\/strong><\/em><\/a>, and Streamlit<\/strong><\/em><\/a>, I decided to go ahead with S<\/strong>treamlit<\/strong><\/em> to build this web app.\u00a0<\/span><\/p>\n

Even though this was my first attempt in using streamlit<\/strong><\/em>, 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\u2019t really matter.<\/p>\n

One thing that is crucial to my app is to render \u201cRadio\u201d<\/strong><\/em> buttons with latex<\/strong><\/em> equations<\/strong><\/em>. This is directly supported in streamlit<\/strong><\/em>; I don\u2019t have to do anything special. Here is the code that lays out UI components on the web page:<\/p>\n

\"Rendering<\/a>
Rendering the Page<\/strong><\/figcaption><\/figure>\n

The MCQ<\/strong><\/em> consists of multiple questions and I model this using two classes: Assignment<\/strong><\/em> models the collection of questions and Question<\/strong><\/em> represents each question in the assignment. The Assignment<\/strong><\/em> object is constructed from an Excel Worksheet<\/strong><\/em>, which contains the question, answer choices, and the expected answer. Here is the definition of the two classes:<\/p>\n

\"Assignment<\/a>
Assignment and Question Classes<\/strong><\/figcaption><\/figure>\n

Streamlit<\/strong><\/em> uses \u201csession state\u201d<\/strong><\/em> to share variables across runs. I found this quite useful. I use a few \u201ckeys\u201d<\/strong><\/em> in the program and these are initialized in the beginning:<\/p>\n

\"Initializing<\/a>
Initializing Session Variables<\/strong><\/figcaption><\/figure>\n

To launch the program, type \u201cstreamlit run MCQ.py\u201d<\/strong><\/em> in the terminal. This launches the server and the page is opened in the browser.<\/p>\n

\"Launching<\/a>
Launching the Program<\/strong><\/figcaption><\/figure>\n

Here are the first three questions as they appear in the browser:<\/p>\n

\"Browser<\/a>
Browser Page with MCQ<\/strong><\/figcaption><\/figure>\n

Notice that I am displaying a \u201csummary\u201d<\/strong><\/em> grid at the top. It initially shows the number of questions in the assignment. Once the \u201cSubmit\u201d<\/strong><\/em> button is clicked, the other fields in the grid will be filled.<\/p>\n

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 \u201cstreamlit\u201d<\/strong><\/em>.<\/p>\n

I can now select my answer choices and then click \u201cSubmit\u201d<\/strong><\/em> at the bottom of the page.<\/p>\n

\"The<\/a>
The Submit Button<\/strong><\/figcaption><\/figure>\n

This triggers the \u201csubmitClicked()\u201d<\/strong><\/em> method, which validates the given answers against the correct response stored in the Excel<\/strong><\/em> file. At this point, the browser displays the message \u201cYour answers have been submitted!\u201d<\/strong><\/em>\u00a0 a<\/span>nd updates the table with remaining data. It also disables the Submit<\/strong><\/em> button and Radio<\/strong><\/em> buttons, preventing further changes to the answers.<\/p>\n

\"After<\/a>
After Submit Button is Clicked<\/strong><\/figcaption><\/figure>\n

Given that my main goal was to check if \u201cstreamlit\u201d<\/strong><\/em> can handle Latex<\/strong><\/em> text, I am happy that it satisfies my requirement. Overall, it was an enjoyable experience building the app.<\/span><\/p>\n

You can download the Python<\/strong><\/em> source file and the sample data file here<\/strong><\/em><\/a>.\u00a0<\/span><\/p>\n

Have a nice week!<\/p>\n","protected":false},"excerpt":{"rendered":"

Is it possible to build a web application in Python to display (and evaluate) multiple-choice questions? Even more importantly, can we render \u201clatex\u201d\u00a0 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.\u00a0 Even though this was […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[17,103],"tags":[387,208,386],"class_list":["post-3361","post","type-post","status-publish","format-standard","hentry","category-programming","category-python","tag-mcq","tag-python","tag-streamlit"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9OLnF-Sd","jetpack-related-posts":[{"id":3199,"url":"https:\/\/www.rangakrish.com\/index.php\/2023\/09\/04\/simulating-python-zip-in-lisp\/","url_meta":{"origin":3361,"position":0},"title":"Simulating Python Zip in Lisp","author":"admin","date":"September 4, 2023","format":false,"excerpt":"The zip() function in Python is a convenient mechanism for iterating over multiple \u201citerables\u201d in parallel. Looping over lists is a common scenario. Here is the output generated by the above code: Common Lisp does not have such a feature built into the language or as part of the standard\u2026","rel":"","context":"In "LISP"","block_context":{"text":"LISP","link":"https:\/\/www.rangakrish.com\/index.php\/category\/lisp\/"},"img":{"alt_text":"Python Zip() Feature","src":"https:\/\/i0.wp.com\/www.rangakrish.com\/wp-content\/uploads\/2023\/09\/python-code-300x99.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3399,"url":"https:\/\/www.rangakrish.com\/index.php\/2024\/06\/08\/kp-astrology-rest-server-part-2\/","url_meta":{"origin":3361,"position":1},"title":"KP Astrology REST Server: Part 2","author":"admin","date":"June 8, 2024","format":false,"excerpt":"In my earlier article, I had briefly described the REST server I wanted to build for Krishnamurti Padhdhati system of astrology. After a long time I have managed to complete the implementation and it is now ready for deployment. In this article, I will go over some of its features\u2026","rel":"","context":"In "Astrology"","block_context":{"text":"Astrology","link":"https:\/\/www.rangakrish.com\/index.php\/category\/astrology\/"},"img":{"alt_text":"KPRest Application Window","src":"https:\/\/i0.wp.com\/www.rangakrish.com\/wp-content\/uploads\/2024\/06\/Start-300x174.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1560,"url":"https:\/\/www.rangakrish.com\/index.php\/2019\/05\/05\/python-integration-in-mathematica-12\/","url_meta":{"origin":3361,"position":2},"title":"Python Integration in Mathematica 12","author":"admin","date":"May 5, 2019","format":false,"excerpt":"Mathematica has had Python support since ver 11.2 through ExternalEvaluate[]. In ver 11.3 it was possible to input Python expression in a cell by beginning with \u201c>\u201d character. The good news is that Mathematica 12 has significantly enhanced this integration. Python Cells Let us start with the simplest way to\u2026","rel":"","context":"In "Mathematica"","block_context":{"text":"Mathematica","link":"https:\/\/www.rangakrish.com\/index.php\/category\/mathematica\/"},"img":{"alt_text":"Function References","src":"https:\/\/i0.wp.com\/www.rangakrish.com\/wp-content\/uploads\/2019\/05\/External-Evaluate-4.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.rangakrish.com\/wp-content\/uploads\/2019\/05\/External-Evaluate-4.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.rangakrish.com\/wp-content\/uploads\/2019\/05\/External-Evaluate-4.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":558,"url":"https:\/\/www.rangakrish.com\/index.php\/2017\/07\/07\/clpython-python-in-common-lisp\/","url_meta":{"origin":3361,"position":3},"title":"CLPython – Python in Common Lisp","author":"admin","date":"July 7, 2017","format":false,"excerpt":"My work in the area of NLP requires\u00a0me to work with several frameworks across multiple languages such as Java, Python and Lisp. Sometime ago I got a chance to experiment with CLPython, an open-source implementation of Python in Common Lisp. Although CLPython is not under active development now, I found\u2026","rel":"","context":"In "LISP"","block_context":{"text":"LISP","link":"https:\/\/www.rangakrish.com\/index.php\/category\/lisp\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":912,"url":"https:\/\/www.rangakrish.com\/index.php\/2018\/04\/22\/question-answering-using-dependency-trees\/","url_meta":{"origin":3361,"position":4},"title":"Question Answering\u00a0Using Dependency Trees","author":"admin","date":"April 22, 2018","format":false,"excerpt":"A few weeks ago I had written about my brief experiment with Mathematica's new feature, which provides answers to questions based on given text. After that post, I spent some time thinking about how to implement something similar. In today's post, I want to show you what I have been\u2026","rel":"","context":"In "LISP"","block_context":{"text":"LISP","link":"https:\/\/www.rangakrish.com\/index.php\/category\/lisp\/"},"img":{"alt_text":"Dependency Tree","src":"https:\/\/i0.wp.com\/www.rangakrish.com\/wp-content\/uploads\/2018\/04\/Deptree-example.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1594,"url":"https:\/\/www.rangakrish.com\/index.php\/2019\/06\/08\/using-nodejs-in-mathematica-12\/","url_meta":{"origin":3361,"position":5},"title":"Using NodeJS in Mathematica 12","author":"admin","date":"June 8, 2019","format":false,"excerpt":"In an earlier article, I had described Python integration in Mathematica 12. In addition to Python, NodeJS is also supported as a default \u201cexternal\u201d language. In today\u2019s article, I will focus on NodeJS integration. By the way, NodeJS support was introduced in Mathematica 11.2. Before using NodeJS with Mathematica 12,\u2026","rel":"","context":"In "Mathematica"","block_context":{"text":"Mathematica","link":"https:\/\/www.rangakrish.com\/index.php\/category\/mathematica\/"},"img":{"alt_text":"NodeJS Session Continued","src":"https:\/\/i0.wp.com\/www.rangakrish.com\/wp-content\/uploads\/2019\/06\/Session2.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.rangakrish.com\/wp-content\/uploads\/2019\/06\/Session2.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.rangakrish.com\/wp-content\/uploads\/2019\/06\/Session2.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.rangakrish.com\/wp-content\/uploads\/2019\/06\/Session2.png?resize=700%2C400&ssl=1 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.rangakrish.com\/index.php\/wp-json\/wp\/v2\/posts\/3361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rangakrish.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rangakrish.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rangakrish.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rangakrish.com\/index.php\/wp-json\/wp\/v2\/comments?post=3361"}],"version-history":[{"count":0,"href":"https:\/\/www.rangakrish.com\/index.php\/wp-json\/wp\/v2\/posts\/3361\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rangakrish.com\/index.php\/wp-json\/wp\/v2\/media?parent=3361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rangakrish.com\/index.php\/wp-json\/wp\/v2\/categories?post=3361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rangakrish.com\/index.php\/wp-json\/wp\/v2\/tags?post=3361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}