> For the complete documentation index, see [llms.txt](https://myshell-ai.gitbook.io/neuralautomata/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://myshell-ai.gitbook.io/neuralautomata/event-listeners.md).

# 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.