Variables

ValueType

Variables can be defined and manipulated through ValueType and UIType. ValueType is useful to define and process the variables. For example,

    "quiz_status": ValueType(
        type="str",
        value='default',
    ),  

    "quiz_idx": ValueType(
        type="int",
        value="${min(quiz_idx + 1, len(words) - 1)}",
    ),    

In the above example, we can use ${} to wrap an expression to update a variable called qui_idx.

the type of the ValueType can be

["str", "int", "float", "bool", "list", "dict"]

Variables from user inputs are handled by UIType. We support the following UITypes

UIType

Dropdown

    "level": Dropdown(
        value=None,
        choices=["easy", "medium", "hard"],
        label="Choose Level:"
    ),

to choose from some choices

Button

    "level": Dropdown(
        value=None,
        choices=["easy", "medium", "hard"],
        label="Choose Level:"
    ),

often used as triggers, to submit a form or jump to next pages

Textbox

    "quiz_info": Textbox(
        value='${f"{quiz_idx + 1} / {len(words)} words"}',
        label="Info"
    ),

display some information using plain-text

Image

        "image": Image(
            value="${word2material[word_txt]['pic_path']}",
            show_label=False,
            height=image_height,
            width=image_height,
            show_download_button=False,
        ),

display an image, the size of the image can be manually controlled

Gallery

    'word_images': Gallery(
        value="${[word2material[word]['pic_path'] for word in [choice_0, choice_1, choice_2, choice_3]]}",
        columns=2,
        height=550,
        show_label=False,
    ),

display a group of images

Audio

    "audio_word": Audio(
        value="${word2material[word_txt]['word_tts_audio_path']}",
        label="Word Pronunciation",
    ),

play a audio, the value need to be the path of the audio

DisplayDropdown

    "topic": DisplayDropdown(
        choices="${topics}",
        initial_choices=[""],
        interactive=True,
        label="Choose Topic:",
    ),  

used when the choices need to be dynamically updated