## 2 Development of the ETBP
### ETBP Functions  
Based on the requirements described in the previous section, we developed a new ETBP with the following seven functions as a web application running on IIS, employing CakePHP. As shown in Figure 1, a dual-coding design combining icons and text was adopted throughout the user interface.  
1. Platform Users function provides password-based login/logout and role-based authentication for instructors and students. It also provides user account management (create, edit, delete, display, and search) for instructors.
2. ETB Designer function allows for students to design, edit, manage, and search online ETB scenarios, providing no-code templates based on the microlearning principle of 5 min or less of content and the segmentation principle of structuring scenarios with overviews, chapters, and pages.
3. Audio Recorder function records audio materials based on the online ETB scenarios in conjunction with the h5p Audio Recorder website.
4. ETB Creator function enables students to publish, edit, manage, and search for online ETBs. Based on multimedia principles, it provides no-code templates that combine  
Figure 1: The user interface for the instructor mode of the ETBP.  
images, graphics, and videos with text scenarios and audio materials. Based on the learner control principles, it can add video/audio controls, such as \"play\", \"stop\", and \"repeat\", and navigation options, such as \"next\" and \"back\".
5. ETB Visual Learning function manages and delivers content for E-learning of online ETB development methods. It teaches students a model case of content creation based on the principles of cognitive apprenticeship. It comprises three pieces of content that reflect the principles of E-learning theory, textual and visual explanation, coherence, and learner control, as well as the principles described in the functions above.
6. Quizzes function is a no-code template tool for creating, editing, and managing quizzes (true or false/choice) for student formative assessment. Based on the principle of self-regulated learning, students can check their understanding at any time.
7. Reports function generates student performance reports, such as student activity logs and quiz scores from the ETBP database.  
The developed ETBP realizes the above requirements as follows. (a) Microlearning principles are implemented in the no-code templates of ETB Designer to help students design online ETB segments for effective learning without learners' overload. These principles are also reflected in the content provided by ETB Visual Learning. (b) E-learning theory is implemented in the templates in ETB Designer (Segmentation) and ETB Creator (Multimedia, Learner Control), allowing for students to develop content that facilitates learner comprehension quickly, as shown in Figure 2. ETB Visual Learning is also based on the same concept. (c) The principle of cognitive apprenticeship is realized in ETB Visual Learning function by providing not only the initial material to teach online ETB development methods but also practical learning using ETB Designer, Audio Recorder, and ETB Creator. In addition, instructors could provide feedback to students based on reports generated by Reports, leading to more effective ETB development. (d) The principle of self-regulated learning is mainly realized by Quizzes that are available at any time so that students can confirm their understanding and select the necessary functions to proceed with their learning. (e) The dual-coding principle is fully incorporated into the user interface design to reduce the learning cost for usability and achieve an environment where it is easy to concentrate on learning.  
Figure 2: No-code template for creating online ETB content page with audio narration.