School of Science and Technology 科技學院
Computing Programmes 電腦學系

An Integrated and Realistic Online Classroom

Herbert Koon Hang CHAN, Ken Lap Kan WONG, Trance Tsz Long WONG

ProgrammeBachelor of Computing with Honours in Internet Technology
SupervisorDr. Oliver AU
Year of Completion2019


Nowadays, different kinds of online tutoring web applications have been designed. However, these tools are still not widely used by either traditional tutoring schools or private tutoring. We observed that these applications not included integrated function, lacked interaction between participants, lacked small-scale group tutoring, and also lacked classroom management. These applications also cannot simulate a real-life classroom atmosphere.


The aim of the project (RIOC – Realistic Interactive Online Classroom) is to develop a realistic and interactive online classroom by simulating the components and interaction of a traditional classroom.

To achieve the aim, the objective is to provide a number of classroom-related functions that simulate realistic classroom atmosphere and improve interaction between participants. They are integrated into an application.

The project has defined a number of sub-objectives as follows:

  • Define what an ideal online classroom is.
  • Design the classroom components such as adding students into classes, classroom ownership, shareable whiteboard function, 1-to-many video conferencing (webcam), drawer, and class management function.
  • Design interactive components such as whiteboard and video channel, grouping, drawer, and personal notebook.
  • Perform performance evaluation from the perspective of users.

Video Demonstration

Background and Methodology

Techniques and technologies used (Selected)


Elixir is a functional and concurrent general-purpose programming language that runs on the Erlang virtual machine (BEAM).


ReactJS is used for building the user interface in our project. React.js ensures faster rendering for heavy loaded and higher performance. Also, it guarantees stable code.

Material UI

Material UI is selected for our library to develop a single underlying system that unifies the user experience across platforms, devices, and input methods. Also, it provides a flexible foundation for innovation and customization.

React Konva

Konva is an HTML5 Canvas JavaScript framework that operates high performance animations, transitions, node nesting, layering, filtering, caching, and event handling for desktop and mobile applications.


WebRTC (Web Real-Time Communications) is used for exchanging video and audio streams between different users.

System Design and Implementation

Figure 1: System architecture

Figure 2: Use case Diagram of OverCoded’s Online Classroom

Figure 3: Login page

Figure 4: Class list

Figure 5: A teaching schedule and student whiteboard.

Figure 6: Uploading teaching materials with mobile phones

Figure 7: Distributing materials to students


Table 1 shows the comparison between our web application and existing solutions including Skype, Discord, Mytutor, and Google Classroom. Most of the respondents agreed that in terms of convenience and performance, our application was more preferable than other four alternatives. However, some respondents mentioned that our application was not smooth enough while they were using notebook to perform the testing.

Table 1: Scores indicating whether OverCoded’s RIOC is more preferable and more convenient than the alternatives

Figure 8: Would you prefer to use OverCoded’s RIOC?

Figure 9: Would you recommend this application to others?

It was clear that the majority of respondents would like to use our application as their online classroom and recommend this application to others.

Conclusion and Future Development

For the future development of our application, three main functions need to be improved and added. They are more class activity functions, providing screen sharing function, and improving whiteboard and drawer features.

The functions of creating quiz and group discussion and of group gaming can be included in order to simulate a realistic classroom atmosphere and enhance students’ engagement during the lesson.

Also, to improve the video communication efficiency, the system can provide Screen Sharing service. Users will broadcast their screen instead of images in real time.

Besides, for the drawer and whiteboard function, apart from only supporting the formats of images, the view function in our application should support files with different extensions, such as .xlsx (excel), .docx (word), and .pdf (pdf). In addition to the view function, for PDF file format, we should support ‘dragging and dropping’ and ‘drawing and highlighting’ in the whiteboard.

Jonathan Chiu
Marketing Director
3DP Technology Limited

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.

Krutz Cheuk
Biomedical Engineer
Hong Kong Sanatorium & Hospital

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
Software and Hardware Engineer
Innovation Team Company Limited

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 CodeTitleCredits
 COMP S321FAdvanced Database and Data Warehousing5
 COMP S333FAdvanced Programming and AI Algorithms5
 COMP S351FSoftware Project Management5
 COMP S362FConcurrent and Network Programming5
 COMP S363FDistributed Systems and Parallel Computing5
 COMP S382FData Mining and Analytics5
 COMP S390FCreative Programming for Games5
 COMP S492FMachine Learning5
 ELEC S305FComputer Networking5
 ELEC S348FIOT Security5
 ELEC S371FDigital Forensics5
 ELEC S431FBlockchain Technologies5
 ELEC S425FComputer and Network Security5
 Course CodeTitleCredits
 ELEC S201FBasic Electronics5
 IT S290FHuman Computer Interaction & User Experience Design5
 STAT S251FStatistical Data Analysis5
 Course CodeTitleCredits
 COMPS333FAdvanced Programming and AI Algorithms5
 COMPS362FConcurrent and Network Programming5
 COMPS363FDistributed Systems and Parallel Computing5
 COMPS380FWeb Applications: Design and Development5
 COMPS381FServer-side Technologies and Cloud Computing5
 COMPS382FData Mining and Analytics5
 COMPS390FCreative Programming for Games5
 COMPS413FApplication Design and Development for Mobile Devices5
 COMPS492FMachine Learning5
 ELECS305FComputer Networking5
 ELECS363FAdvanced Computer Design5
 ELECS425FComputer and Network Security5