top of page

Conceptual Design

Usecase Diagram

     This diagram shows the relationship of two kinds of users, which are student and teacher, with the application. Teacher can manage server and sessions. Both users can participate in session as shown in figure 1. Teacher allows starting server and shutting down server.Teacher can create three kinds of session, which are Mathematics, English, and Arts, and close session. Before users participate in the session, user must login with their name to get an identification color. If users finish up tasks, they can log out by closing HTML page. 

Deployment Diagram Diagram

Figure1 Usecase diagram of Collaborative Learning Application for Kids

     From this diagram, we separated our software into two parts, which are front-end, and back-end as shown in figure 2. Front-end is the user interface, which is implemented with HTML5 and CSS3 for good usability. On the other side, in the server is the back-end. This side is implemented using Node.js and Socket.IO. 

Figure2 Deployment Diagram of server and client

Component Diagram of Mathematics User Interface

     This component diagram explained connection between client and server via website that we implement as shown in figure3. Start with, users type their name to log-in then JavaScript on the web page will generate identify color to users. For telling other users, each client will send data to server by Socket.IO and then server will broadcast to all users. So everyone on the same web page will see the same thing. Including dragging and dropping object on the interface, users are allowed to drag and drop on the web page. The actions are sent to server by Socket.IO and then server will broadcast to all clients. As a result, our web page is a real-time web.  

Figure3 Component Diagram of Mathematics User Interface

Component Diagram of English & Arts User Interfaces

     To summarize component diagram of English and Arts user interface, there are three parts that are uploading picture, sharing object position, and logging-in session. All three parts are connected with Socket.IO for sending data to server. When server receives data from client, then server will broadcast to other clients interface in the same session.

Figure4 Component Diagrams of English and Arts User Interface

bottom of page