Event Listeners

the event listeners handle the events from UI components by defining the behavior after the event is triggered. We have several pre-defined event and the handlers as follows

Events

Button.click

        "confirm_start_btn.click": {
            'goto': "choose_topic_state",
            "preload_page": "learn_page",
            "switch_page": True,
        },

Dropdown.change

        "language.change": {
            'goto': "setup_state",
            'update': 'topic'
        },

Audio.stop_recording

        "input_word_audio.stop_recording": {
            'goto': "practice_word_pronunciation_state",
            "update": "word_pronounce_score",
        },

Gallery.select

        'word_images.select': {
            'select_index': "image_selected",
        },

Handlers

goto

jump to another state

        "language.change": {
            'goto': "setup_state",
            'update': 'topic'
        },

update

update the value of some UIType

        "language.change": {
            'goto': "setup_state",
            'update': 'topic'
        },

switch_page

define whether the event will possibly change the page

        "confirm_start_btn.click": {
            'goto': "choose_topic_state",
            "preload_page": "learn_page",
            "switch_page": True,
        },

preload_page

define whether we need to preload the next page (update the value of UIType on the next page)

        "confirm_start_btn.click": {
            'goto': "choose_topic_state",
            "preload_page": "learn_page",
            "switch_page": True,
        },

play

        'choice_0_button.click': {
            'play': ('audio_info', 'quiz_explain_page::quiz_audio_path'),
            'update': 'quiz_info',
        },

play the audio given by the audio_info

enable/disable

        'next_word.click': {
            'goto': 'check_idx_state',
            'enable': 'submit_answer',
            'disable': 'next_word',
            'preload_page': [next_quiz_page, 'summary_page'],
            "switch_page": True,
        },

make some UIType enabled/disabled

select_index

        'word_images.select': {
            'select_index': "image_selected",
        },

save the selected index of a Gallery to the ctx with the given variable name.

clear

        'next_word.click': {
            'goto': {
                'next_state': 'learn_word_state',
                'ctx_handler': {
                    'learn_status': {
                        'finished': {
                            'info': 'You have finished all words in this topic! Please have a quiz.'
                        }
                    }
                }
            },
            'update': '',
            'clear': ['input_word_audio', 'word_pronounce_score', 'input_sent_audio', 'sent_pronounce_score'],
        },

clear the output of several UITypes

ctx_handler

        'choice_0_button.click': {
            'goto': {
                'next_state': 'check_answer',
                'ctx_handler': {
                    'quiz_status': {
                        'correct': {
                            'info': "Correct!",
                        },
                        'wrong': {
                            'warn': 'Wrong!',
                        }
                    }
                }
            },

perform some action given the value in the ctx. For example, the above code means when choice_0_button clicked, it will check the value of quiz_status and display some information.