School of Science and Technology 科技學院
Computing Programmes 電腦學系
| Programme | Bachelor of Computing with Honours in Internet Technology |
| Supervisor | Terri Wong |
| Areas | E-learning |
| Year of Completion | 2021 |
This project aims to develop a mobile application that makes learning HTML more efficient for secondary school students and more manageable by their teachers. Interaction is an effective way for beginners to pick up new knowledge. Therefore, a comment section is needed for students to have discussions. It will enhance the interactions between students, and they could ask questions through the application and teachers could give a brief response. This will further enhance the teaching effectiveness as online and face-to-face classes are integrated together. The flexibility of mobile learning allows students to decide their learning paths. The school teaching plan does not restrict learning pace, and students can choose the more interesting HTML topics to study first. The application will track student progress, if a student falls behind, it will send a notification to tell them to speed up and to catch the progress. Therefore, the new way of learning increases the motivation and flexibility of students to study HTML. An interface is set up to help teachers to receive student performance reports and give customized exercises for each student according to their quiz results.
The HTML Learner Application will be built using Android as the OS and several technologies such as Java, Google Firebase Storage, MySQL, PHP, and Material Design will be involved. The tasks will be split into smaller manageable units using divide and conquer and the task will be assigned to teammates. For the student and teacher view in the application, Session will be used to keep track of the access rights and update the corresponding UI such as menu items to users. Each student will have their achievement list according to the HTML Quizzes results, their result will be stored in MySQL using PHP. In order to display the achievement, a JSON array will be returned from PHP server and the report interface will be displayed. Information Hiding and Encapsulation (Ricciardi, 2016) will be used to hide our implementation method and encryption algorithms.
MySQL database is a relational database management system that allows users to directly interact with and can be connected and accessed through Java codes. It can be used to store, retrieve and update data on students' performance and students' comments on the comment section.
The HTML code editor is a program for editing HTML, CSS, Javascript codes, it can allow students to write HTML codes and have an instant live preview to observe the changes of different elements of codes they typed.
Android Studio is an IDE for Android operating systems. Using Android Studio to implement student and teacher user interfaces. It supports Java for implementation.
The design of the application aims to provide a user interface that does not require users to spend extra time to learn and adapt the UI layout. We try to minimize the user input as typing for a long time on handheld mobile devices is not feasible. For example, if the HTML Quiz requires students to input the answer using the keypad on the screen, it will bring inconvenience to them and they might not be able to complete the quiz while commuting to/ from school. As we designed the HTML quiz could be completed while commuting and within 5 minutes, using keyboard input is not the optimal method. After considering the usability and the user input on mobile devices (Kangas,2014), we opt for drag and drop as the input method.
Figure 1: Overview of our system
Figure 2: Landing Page
Figure 3: HTML Editor
Figure 4: HTML Examples
Figure 5: <ol> Example
Figure 6: Student Overview
Figure 7: Add Quiz
The design of the application aims to provide a user interface that does not require users to spend extra time to learn and adapt the UI layout. We try to minimize the user input as typing for a long time on handheld mobile devices is not feasible. For example, if the HTML Quiz requires students to input the answer using the keypad on the screen, it will bring inconvenience to them and they might not be able to complete the quiz while commuting to/ from school. As we designed the HTML quiz could be completed while commuting and within 5 minutes, using keyboard input is not the optimal method. After considering the usability and the user input on mobile devices (Kangas,2014), we opt for drag and drop as the input method.
Figure 8: HTML Drag and Drop Quiz
Figure 9: Side Navigation Menu
Scrolling may not be the best navigating method on mobile devices, most of the pages in the application could be viewed without scrolling except the HTML Example, HTML Quiz, and HTML Test lists. The scrolling feature is disabled for pages that are not required scrolling in order to avoid the layout misalignment between devices with different screen sizes. For navigation, a side navigation menu is used. When the user login to the system, the authentication backend will identify which user group it belongs to and set the corresponding navigation menu item.
From the student's point of view, they will first take the HTML Examples on different HTML tags to get a basic understanding of HTML syntax. After they acquire enough understanding of the specific tag, then they could take the HTML Drag and Drop quiz to measure their performance. While submitting the quiz, teachers will receive a notification with the student's quiz result and could give an appropriate response such as giving some customized exercise or send a notification to complement the student.
From the teacher's point of view, they could read the student list to see which students are lacking behind or performing well. Teachers could upload new HTML Example to the application to provide more in-depth teaching materials for students to read. The application will automatically categorize students into different groups (Weak, Fall Behind, Excellent) based on their performances on the quizzes and tests.
Figure 10: HTML Test
Figure 11: Student List
After collecting the quiz result, we agree that our application effectiveness is similar to w3school and after collecting the questionnaire we discovered that the functionality of the application is sufficient to learn HTML. Some students also highlight that the teacher notification is helpful for them to track their progress and the customized quiz could tackle their pain point in HTML learning.
| Evaluation | Group A (Using the App) | Group B (Using w3School) |
| Structure | 7/10 | 6/10 |
| colspan attribute | 6/10 | 4/10 |
| th & td tag Usage | 9/10 | 7/10 |
| Hand-written code | 4/10 | 4/10 |
Table 1: User Evaluation Average Result
After collecting the quiz result, we agree that our application effectiveness is similar to w3school and after collecting the questionnaire we discovered that the functionality of the application is sufficient to learn HTML. Some students also highlight that the teacher notification is helpful for them to track their progress and the customized quiz could tackle their pain point in HTML learning.
To get a better understanding from the students, we randomly selected 2 students to conduct an in-depth interview. In the interview, we asked which functionality enables them to discover the HTML syntax. Both of them agree the HTML Example and HTML Editor are the most useful tools for them to discover HTML structure. They could first study the example to learn the usage of a specific HTML tag, then they could click the “Modify HTML” button to modify that HTML Example in the HTML Code Editor. They could try different HTML tag combinations at the editor and it allows them to get a better understanding of HTML syntax.
We also asked about the usefulness of the teacher role in the learning app. First, we show the teacher interface and introduce different functionalities to them. Afterward, they think the in-app notification is a great tool to tell students to catch up on the progress or complement the student.
This project aims to develop a mobile application that makes HTML learning easier for students and offers an integrated tool for teachers to track and monitor their students' progress. The application is built to bridge the gap between real-time and online learning as the existing learning tools in the market do not support the teacher role and cannot customize the teaching path according to the school's teaching syllabus. With the implementation of the student learning tools and teacher interface, the application is now satisfying the requirements and objectives that we designed at the early stage of the development cycle.
In the HTML learning tools, we used Google Firebase services as the storage and authentication backend which provides high reliability in data access. We stored the HTML examples, HTML quizzes, and HTML tests at Firebase datastore using JSON format which allows teachers to update the examples or quizzes while other students use the application. The progress notification is one of the main features of the application, the application will send an auto-notification to those registered students to keep track of their performance and progress. Also, teachers could add some customized notifications to remind students or complement students based on their performance.
The application fulfilled the functional and non-functional requirements stated in the earlier parts of this report. We had evaluated the functional requirements in the aspect of usability, ease to learn, and whether the function operated as we intended to. For non-functional requirements, we conducted a stress test to check how many users could send requests to the system at a time and check if the response time is within the acceptable range.
Future work
We will develop a web-based version of the application to allow cross-platform support. Some of the backend components are based on PHP such as the RESTful API for data retrieval, this would be an efficient way to make the application available across mobile, laptop, or even desktop devices.
Jonathan handles all external affairs include business development, patents write up and public relations. He is frequently interviewed by media and is considered a pioneer in 3D printing products.
After graduating from OUHK, Krutz obtained an M.Sc. in Engineering Management from CityU. He is now completing his second master degree, M.Sc. in Biomedical Engineering, at CUHK. Krutz has a wide range of working experience. He has been with Siemens, VTech, and PCCW.
Hugo Leung Wai-yin, who graduated from his four-year programme in 2015, won the Best Paper Award for his ‘intelligent pill-dispenser’ design at the Institute of Electrical and Electronics Engineering’s International Conference on Consumer Electronics – China 2015.
The pill-dispenser alerts patients via sound and LED flashes to pre-set dosage and time intervals. Unlike units currently on the market, Hugo’s design connects to any mobile phone globally. In explaining how it works, he said: ‘There are three layers in the portable pillbox. The lowest level is a controller with various devices which can be connected to mobile phones in remote locations. Patients are alerted by a sound alarm and flashes. Should they fail to follow their prescribed regime, data can be sent via SMS to relatives and friends for follow up.’ The pill-dispenser has four medicine slots, plus a back-up with a LED alert, topped by a 500ml water bottle. It took Hugo three months of research and coding to complete his design, but he feels it was worth all his time and effort.
Hugo’s public examination results were disappointing and he was at a loss about his future before enrolling at the OUHK, which he now realizes was a major turning point in his life. He is grateful for the OUHK’s learning environment, its industry links and the positive guidance and encouragement from his teachers. The University is now exploring the commercial potential of his design with a pharmaceutical company. He hopes that this will benefit the elderly and chronically ill, as well as the society at large.
Soon after completing his studies, Hugo joined an automation technology company as an assistant engineer. He is responsible for the design and development of automation devices. The target is to minimize human labor and increase the quality of products. He is developing products which are used in various sections, including healthcare, manufacturing and consumer electronics.
| Course Code | Title | Credits | |
|---|---|---|---|
| COMP S321F | Advanced Database and Data Warehousing | 5 | |
| COMP S333F | Advanced Programming and AI Algorithms | 5 | |
| COMP S351F | Software Project Management | 5 | |
| COMP S362F | Concurrent and Network Programming | 5 | |
| COMP S363F | Distributed Systems and Parallel Computing | 5 | |
| COMP S382F | Data Mining and Analytics | 5 | |
| COMP S390F | Creative Programming for Games | 5 | |
| COMP S492F | Machine Learning | 5 | |
| ELEC S305F | Computer Networking | 5 | |
| ELEC S348F | IOT Security | 5 | |
| ELEC S371F | Digital Forensics | 5 | |
| ELEC S431F | Blockchain Technologies | 5 | |
| ELEC S425F | Computer and Network Security | 5 |
| Course Code | Title | Credits | |
|---|---|---|---|
| ELEC S201F | Basic Electronics | 5 | |
| IT S290F | Human Computer Interaction & User Experience Design | 5 | |
| STAT S251F | Statistical Data Analysis | 5 |
| Course Code | Title | Credits | |
|---|---|---|---|
| COMPS333F | Advanced Programming and AI Algorithms | 5 | |
| COMPS362F | Concurrent and Network Programming | 5 | |
| COMPS363F | Distributed Systems and Parallel Computing | 5 | |
| COMPS380F | Web Applications: Design and Development | 5 | |
| COMPS381F | Server-side Technologies and Cloud Computing | 5 | |
| COMPS382F | Data Mining and Analytics | 5 | |
| COMPS390F | Creative Programming for Games | 5 | |
| COMPS413F | Application Design and Development for Mobile Devices | 5 | |
| COMPS492F | Machine Learning | 5 | |
| ELECS305F | Computer Networking | 5 | |
| ELECS363F | Advanced Computer Design | 5 | |
| ELECS425F | Computer and Network Security | 5 |
