# 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

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

#### Dropdown.change

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

#### Audio.stop\_recording

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

#### Gallery.select

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

### Handlers

#### goto

jump to another state

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

#### update

update the value of some UIType

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

#### switch\_page

define whether the event will ***possibly*** change the page

```python
        "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)

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

#### play

```python
        '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

```python
        '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

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

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

#### clear

```python
        '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

```python
        '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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://myshell-ai.gitbook.io/neuralautomata/event-listeners.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.