How to Use the Lesson Page
This guide explains how to navigate and interact with the lesson page effectively. The page consists of two main sections: the left tree view and the right content area.
Left Section: Tree View Navigation
The left side of the page displays a hierarchical tree structure containing all lessons. The structure follows a Language → Category → Lesson format.
- Clicking on a lesson highlights it and displays its content on the right.
- The currently active lesson is visually distinguished.
- Users can switch between lessons easily by selecting from the list.
Right Section: Lesson Content
The right side of the page contains multiple layers stacked vertically, each serving a specific function.
1. Audio Player Layer
This layer provides an interactive audio player that controls the playback of the associated lesson audio.
- Waveform Display: Shows the visual representation of the audio clip.
- 3Play/Pause Button & Loop Indicator: Starts or stops the audio. The number indicates how many times the audio will loop (default: 3 times).
- Time Display: Shows the current playback time.
- Volume Slider: Adjusts the playback volume.
- Speed Slider: Controls the audio playback speed.
- Region Button: Toggles the creation and deletion of an audio region. Users can move and resize this region for focused listening.
2. Functional Layer
This layer includes various control buttons and features, such as:
- Phonetic Button: Enables phonetic assistance.
- Random Hiding Button: Enables the random hiding function for the lesson content. When activated, certain words in the lesson are hidden based on a defined percentage. You can adjust this percentage by moving the slider.
- Other functional buttons depending on the lesson content.
3. Lesson Layer
This section contains the actual lesson content.
By understanding these layers, users can navigate and engage with the learning content efficiently.