I have to double click the button before the nested buttons and feedback hide

Summary

Hello.
I am making this language flashcard app but I got problems that I couldnt figure out although I read a post related to my problem and kinda new to streamlit. The nested buttons hid after I clicked and chose twice. When I chose and click a button at first I couldnt see the feedback but could see on the second round.

Steps to reproduce

import streamlit as st

if “current_flashcard_index” not in st.session_state:
st.session_state.current_flashcard_index = 0
if “user_score” not in st.session_state:
st.session_state.user_score = 0
if “clicked” not in st.session_state:
st.session_state.clicked = {1: False, 2: False, 3: False}
if “feedback_shown” not in st.session_state:
st.session_state.feedback_shown = False
if ‘display_result’ not in st.session_state:
st.session_state.display_result = False
if ‘reset’ not in st.session_state:
st.session_state.reset = False

flashcards = [
{“source”: “Dog”, “translation”: “Perro”},
{“source”: “Cat”, “translation”: “Gato”},
{“source”: “Elephant”, “translation”: “Elefante”},
{“source”: “Lion”, “translation”: “Leon”},
{“source”: “Tiger”, “translation”: “Tigre”},
{“source”: “Dolphin”, “translation”: “Delfin”},
{“source”: “Bear”, “translation”: “Oso”},
{“source”: “Monkey”, “translation”: “Mono”},
{“source”: “Penguin”, “translation”: “Pinguino”},
{“source”: “Giraffe”, “translation”: “Jirafa”},
]

st.title(“ANIMAL FLASHCARD”)

current_flashcard = flashcards[st.session_state.current_flashcard_index]
current_flashcard2 = current_flashcard[“source”]
st.write(current_flashcard2)

def clicked(button):
st.session_state.clicked[button] = True

def reset_buttons():
st.session_state.clicked[2] = False
st.session_state.clicked[3] = False

def reset_interface():
st.session_state.clicked[1] = False
st.session_state.clicked[2] = False
st.session_state.clicked[3] = False
st.session_state.feedback_shown = False

def btn_b_callback():
st.session_state.display_result=False
st.session_state.reset=False

st.button(‘Show Translation’, on_click=clicked, args=[1])

if st.session_state.clicked[1]:

current_flashcard3 = current_flashcard["translation"]
st.write(current_flashcard3)
st.session_state.display_result = True
correct_button_clicked = st.button('Correct', on_click=clicked, args=[2])
wrong_button_clicked = st.button('Wrong', on_click=clicked, args=[3])

if correct_button_clicked and not st.session_state.feedback_shown:
    st.success("You are correct")
    st.session_state.feedback_shown = True
    reset_buttons()
    reset_interface()

if wrong_button_clicked and not st.session_state.feedback_shown:
    st.warning("You are wrong")
    st.session_state.feedback_shown = True
    reset_buttons()
    reset_interface()

st.session_state.current_flashcard_index += 1

Expected behavior:

I expected that every time I click the correct or wrong button it will hide the nested buttons (correct and wrong button) and current_flashcard[“translation”]. You can only see the translation button and current_flashcard[“source”].

Actual behavior:

  1. The nested buttons hid after I clicked and chose twice. When I chose and click a button at first I couldn`t see the feedback but could see on the second round.
  2. Also, The current_flashcard[“translation”] and nested buttons when I clicked the translation button

Debug info

  • Streamlit version: (get it with $ streamlit version)
  • Python version: (get it with $ python --version)
  • Using Conda? PipEnv? PyEnv? Pex?
  • OS version:
  • Browser version:

Requirements file

Using Conda? PipEnv? PyEnv? Pex? Share the contents of your requirements file here.
Not sure what a requirements file is? Check out this doc and add a requirements file to your app.

Links

  • Link to your GitHub repo:
  • Link to your deployed app:

Additional information

If needed, add any other context about the problem here.

Hi @Jun

Thanks for your question, the code snippet that you pasted was not formatted properly (thus making it difficult to reproduce the error encountered), could you encapsulate your code using three tick symbol as in:
```
import streamlit as st

st.write(‘Hello world!’)
```

Thus it would look like the following:

import streamlit as st

st.write('Hello world!')

Also, could you clarify what was clicked and chose, a screenshot of the app in action and the intended behavior annotated in the screenshot would help the community in understanding the problem better.

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.