Streamlit으로 간단한 퀴즈 페이지 만들어보기

정말 오랜만에 streamlit 관련 게시물을 쓴다.

 

내 블로그 조회수의 대부분은 streamlit 게시글 특히 사이드바 관련 게시물이다. 2개밖에 안되는데..

 

개발 공부를 하면서 여러 가지를 배웠다.

리액트나, 스프링이나 자바스크립트나 뭐 등등

 

근데 상세하게 만들것이 아니라 대충만들어 슥삭 배포하기에는 streamlit만한게 없다.

streamlit으로 api를 활용해 구내식당 메뉴 페이지

게임용 페이지등 여러가지를 만들어 봤다.

그중에서 간단하게 만들 수 있는 페이지를 소개하겠다.

 

다음은 streamlit을 활용한 간단한 주관식 퀴즈를 맞출 수 있는 페이지를 만들어보고자 한다.

 

다음처럼 페이지를 만들 수 있다.

먼저 퀴즈를 사용하기 위해서는

 

text input

button

이 필요하며,

 

streamlit만의 도큐멘터리에서 가져올 수 있는 코드로는

 

balloons, success, warning등의 코드가 있다.

 

text input으로는 비밀번호와 정답등을 입력하게 할 것이고

 

버튼으로는 정답 확인, 힌트 확인 등의 기능을 구현하고

 

풍선으로는 정답을 맞추면 풍선이 날아가는 효과,

success는 정답 시 초록색 창 출력

warning은 오답 시 노란색 창 출력을 하게 할 수 있다.

 

먼저 구현된 전체의 페이지도 보여주자면 다음과 같다.

 

풍선이 날아 갈때를 캡쳐하기가 힘들다..

 

전체 코드도 먼저 작성하겠다.

import streamlit as st

st.title("퀴즈 만들어보기")
password1 = "도전"
answer1 = "python" and "파이썬"

quiz1_password = st.text_input("퀴즈를 풀고싶다면, [도전]이라고 적어주세요",  key="quiz1_password")
if quiz1_password == password1:
    quiz1 = st.text_input("Streamlit을 구성하는 언어는 무엇일까요?")
    if st.button("정답 확인", key="check_answer_button1"):
        if quiz1 == answer1:
            st.balloons()
            st.success("정답입니다!")
            st.write("streamlit은 파이썬으로 이루어져 있어 ╰(*°▽°*)╯")
        else:
            st.warning("정답이 아니야. 다시 생각해봐")
    if st.button("힌트 보기", key="check_hint_button1"):
            st.write("p로 시작하는 언어야")
elif quiz1_password != "" and quiz1_password != password1:
    st.error("비밀번호가 틀렸어!")

 

상세 내용은 아래에 설명하자면,

 

제목

제목은 앞서 streamlit페이지를 만드는 방법을 알려줄 때의 코드를 활용해 작성하면 된다.

st.title("퀴즈 만들어보기")

 

제목보다 먼저 streamlit을 활용하려면 모듈을 import해줘야 한다.

 

import streamlit as st

다음의 모듈을 꼭 입력해줘야 streamlit이 작동한다.

 

다음으로는 퀴즈의 정답과 문제를 풀기위한 비밀번호를 설정해줘야 한다.

 

비밀번호들의 위치는 어디에 배치해도 상관없다.

나는 제목 바로 아래에 작성했다.

password1 = "도전"
answer1 = "python" and "파이썬"

and를 활용해 한글로 작성할때와 영어로 작성할때의 경우 모두가 정답이 될 수 있게 했다.

 

if문을 활용해 맨 첫 text input에서 정답을 입력해야 아래의 퀴즈가 나타날 수 있게 만들었다.

if quiz1_password == password1:

만약 if문이 제대로 작동하면 아래에 퀴즈가 나타나고, 도전이라고 작성하지 않아 비밀번호가 틀리게 되면

warning문이 작동해 비밀번호가 틀렸다고 경고를 준다.

if quiz1_password == password1:
    quiz1 = st.text_input("Streamlit을 구성하는 언어는 무엇일까요?")
    if st.button("정답 확인", key="check_answer_button1"):
        if quiz1 == answer1:
            st.balloons()
            st.success("정답입니다!")
            st.write("streamlit은 파이썬으로 이루어져 있어 ╰(*°▽°*)╯")

아래에 문제가 나타나게 되면서 문제에 대한 답을 작성하고, 작성한 답은 quiz1의 변수로 저장된다.

quiz1의 변수가 위에 설정한 답과 같다면 풍선 애니메이션이 출력되면서 축하해준다.

다음처럼 풍선이 한타임 날아간다

참고로 button을 여러개 작성한다면, key를 꼭 고유의 값으로 지정해주는것이 좋다. 

지정해주지 않는다면 충돌이 발생해 정상적으로 작동하지 않게된다.

힌트 버튼

 

정답이 아니라면 다음과 같이나온다

문제를 여러개 추가해 주어도 좋고, 다른 애니메이션으로 변경해도 재미있다.

 

https://docs.streamlit.io/library/api-reference

Streamlit Docs

 

위의 streamlit 코드를 활용해 이것저것 바꾸어 보면 더 재미있다.