Use Case Title
Subscription-based learning management system to teach Chinese to children. This system has many features to provide educational content, such as books (which students can listen to and read), quizzes (different types), and assessments (to improve skills).
Target Audience
Chinese teachers, school-age children, and their parents who can participate in the learning process.
The main tasks and challenges
What did the client come to us with?
A book dubbing management functionality was the most important task the client came to us with. The main components of dubbing books are narrators and e-books. Dubbing functionality is the process, where an audio recording is playing and you can see which word is highlighted, and which word the announcer is currently on the screen at the same time. And our specialists needed to create management software for the function. Based on this functionality, our developers had to create a read activity functionality, where the user could read a book, highlight a character, mark it in a notepad, and also hear its pronunciation when pressed.
We also had to develop a management function for the three main activities – listening, reading, and quiz. Listening is a dubbing of the book. Reading is the reading plus the highlighting of hieroglyphs with the possibility of listening to the pronunciation. And the questionnaire is the last function we need to work with. Previous developers tried to somehow manually substitute almost every sound for a word, but everything was maximally unoptimized and unworkable. There, in fact, from 100% visually, about 80-90% was ready, but functionally there was 40%. That is, most of the functionality simply did not work.
Previously, another team worked on this project and used a chaotic way of development without bringing it online. We have unraveled the tangle for five months and prepared functions for the MVP version of the site with the main functionality for studying.
Our assessments
We estimated the development of the dubbing functionality, the MVP version of the platform, along with content management. The main work term was estimated at a minimum of 4-6 months, mostly for the development of the MVP version.
Technologies list
To synchronously highlight the symbols relative to audio we parse/convert books in PDF format to HTML, CSS, and JS and split an audio file into many time-stamps (the system analyzes the audio file, determines fragments with sounds (words), and distributes them into parts one by one).
Design
The client had a custom design. And, approximately 98% of the design was ready. There were some missing parts. However, the client knew her project as much as possible and helped us with it. We were always in touch, several calls a week.
Development team
Only developers with middle and middle-plus levels worked on the project. Our guys replaced each other as efficiently as possible, and we followed the standards while writing the code. Coding standards were applied so that at any moment it was possible to connect someone else.
The main development process
Detailed description of the development
Initially, a pool of tasks was created, including the main content management feature development. After that we started subscriptions, then there was functionality for public content. Then, we started working with subscription content. And the software was divided into three interfaces: an admin interface, a teacher interface and a student interface (child interface). Plus the fourth role is a father or mother who could see a partial interface of the teacher in order to monitor their child’s progress.
We drew complete mockups of the functionality for content management, we showed our client how it would work and look like with a full explanation. We did not face any pitfalls during development. Although, it was difficult to implement such a functionality, because there were many points that then appeared in the logic. Like, the dubbing of hieroglyphs, for example. It was necessary to think about how the parser will work in PDF and mp3.
The most difficult part with the narrators was that they were recorded in two different versions – male and female. And the recording quality of both was different. If there was a female voice, a clear pause was between the reading and pronunciation of hieroglyphs. And we set up the system so that it sees where.
Two types of parsers were involved in the development – for PDF and for mp3. The PDF parser extracted all the visual content in the PDF file and highlighted the right hieroglyphs. We inserted into the system a database of the most popular characters in China (about 6200-6700 of them). This is a basic set of characters that everyone knows. The total number of hieroglyphs is over 10,000, but most of these hieroglyphs are not often used. The second parser is for audio files, which detects the sound in the file and cuts off the pieces. The logic of building dubbing books was more manual because the client did not want to use ready-made solutions.
Development Process
The development process was managed in Jira. At first, we tried to use the client’s Jira, but 100% of the tasks were written by another team and were pretty unclear.
Our client knew her project very well, but could not convey to us what we needed to do, because everything was terribly described there. That’s why we made our Jira board and filled it with tasks. We took the titles of those tasks that already existed as a basis for our tasks. We even had calls with the client multiple times. After we learned the main tasks, we took design as a basis, went through the user case of a certain functionality. We defined what was necessary, what needed to be done, at what stage it was implemented, and started work.
Tasks assignment was distributed among our guys, each of them had their own employment section. Someone dealt with purely user interface, someone dealt with admin interface. We separated the developers so that they did not disturb each other. How were the tasks formed? The client asked us what she needed to implement at the next stage. We prepare and create tasks and write them according to the user case, clarify with the client whether everything is correct. She approved, and only after that we started working.
Adobe Illustrator and Adobe Photoshop were used for the design. We took data from there. The trackers used were Upwork and WebWork.
Development terms
During the work on the existing functionality, its adjustment, and implementation, we constantly missed the deadlines. Plus, the client herself was very competent in the project, because she led it from scratch through the stages. Since the client herself is a teacher who wrote these books and programs for the site. And, because the quality of the previous developers’ code was terrible, part of the functionality was either rewritten (at the same time letting the client know about it) or refactored. Otherwise, it is impossible to work with it.
There were many pitfalls in the program’s logic. We were developing separate functionality, we had to create interaction, and this process was difficult. Because the logic was written incorrectly, and we had to adjust it or rewrite it. That is why our deadlines have slipped because the project is ongoing. This is a typical, standard practice when deadlines for ongoing projects burn.
Solution
We have created an online platform for children to learn Chinese, which, first of all, provides teachers with the necessary content. And teachers could choose the necessary educational material for students, form and teach classes. At the same time, Chinese 12Tree is convenient and easy for children to use while learning from teachers, reading books, listening to audios, and taking tests.
In particular, the platform has two login systems: for teachers and children. Teacher accounts have a wider arsenal of functionality and resources. They buy a license to teach and organize classes (1, 5 or 30 children). Also, this functionality allows teachers to choose books of different levels of difficulty for children, as well as to assess children’s abilities in reading, listening, character recognition and correct pronunciation.
If you log in to Chinese 12Tree as a child, the functionality of student accounts is more limited, but easier to use, to ensure a student’s comfortable use of the platform. Here, children have libraries with books, access to which has been enabled by teachers. A child can also read books about Chinese history, fairy tales, adventures, and also listen to Chinese songs. Another category available for the child is Grow Up, statistics. They can see how many books they read, how many audios listened, how many quizzes passed, etc.
As for admins, they are primarily responsible for the content for teachers to work with. Admins fill the library with PDF files, audio files, activate various quizzes, and provide technical support to users (for example, restoring login and password). We made a convenient interface for downloading and interacting with PDF files, as well as converting these files into HTML format. On this platform, we also introduced the Parcer system to find hieroglyphs, pictures, and other visual content in books. Admins can interact with text content, i.e. select and delete characters. After that, they can load the mp3 file, and the line for audio management appears. The system took an audio track, cut it into hundreds of pieces, and then found the sound.
The books were voiced with the help of announcers who voiced the entire book. The user had, first of all, to remove all unnecessary symbols that were not read in the audio file and display them in the correct order. After that, the user had to download the audio format that was cut and display it as well. Suppose this system cut the sound incorrectly. We could combine these two sounds. That is, combine so that the entire word is read as one in its entirety.
Customer feedback
The client was satisfied by our work. But, for technical reasons, Chinese 1-2-tree isn’t currently supported by us anymore.
Technologies
- PHP
- Laravel
- JQuery
- Vue.js
- Elasticsearch
- MySQL
- Mailgun
- Stripe
- AWS services
- JavaScript