Design and Development of Online Collaborative Learning Platform of Kit-Build Concept Map

. A concept map is deemed a useful teaching and learning tool. It oﬀers many potential advantages over just representing the students’ knowledge and understanding during learning, and have been widely used to support learning. Kit-Build concept map is one learning framework that incorporate digital concept map for its learning activities. Learning with Kit-Build concept map has been found to have better learning eﬀects towards students’ understanding and knowledge retention. Incorporating Kit-Build concept map into collaborative learning have been reported to have better outcome than the traditional collaborative learning. However, collaborative learning with Kit-Build concept map cannot be accomodated with the current Kit-Build system where learning activity is conducted online. This study presents the design and development of online collaborative learning platform of Kit-Build Concept Map. A prototype of the collaboration system to support collaborative learning with Kit-Build concept map is developed and be evaluated to portray its potential usability for further development and practical use. The result suggested that incorporating Socket.IO as a real-time communication middleware is eﬀective to deliver online collaborative learning features into the Kit-Build system. Evaluation to the system prototype yielded positive learning attitude score of 4.31 from a maximum score of 5. Hence, the potential for actual use in supporting distant collaborative learning with Kit-Build concept map.


Introduction
Concept map has been long used to support meaningful learning [1][2][3] and helped students to understand concepts better, develop critical thinking and problemsolving skills [4]. Using concept maps in learning environment is effective to promote not only meaningful learning, but also memory retention of students; it has been confirmed in several studies [5][6][7]. Meaningful learning could also be attained in cooperative learning [8] by collaboratively constructing knowledge, exchanging ideas, embodying one's understanding, or sharing past experiences in the forms of concept maps.
A concept map is connected. It comprises several interconnected propositions in which each proposition has two connected concepts by one link to express a meaningful relationship or knowledge between connected concepts. Each concept and link in a concept map uses succinct nouns or phrases as its label to represent knowledge. A formed proposition in a concept map should form a meaningful statement [9]; hence, semantically self-explanatory. However, many concept map authors have limited experience in composing concept maps; resulting in vague concept maps with many abstruse propositions. Discussing the issue with the author or partners is often selected as a brisk and appropriate way to clarify the problems and potentially deepen one's understanding of said topic or issue. Thus, comprising collaborative learning with concept maps could potentially improve not only the learning but also the interaction [10].
Concept maps could be adopted in various ways to foster the learning; from individual and cooperative composition to reciprocal knowledge construction. One example of learning framework that uses digital concept maps to support learning is Kit-Build concept map [11]. The framework adopted the Novakian concept map style composition into computer-based concept mapping for easy assessment of one's understanding. Along with its use in educational settings, Kit-Build have contributed to many aspects of learning [12,13]; including one that incorporated Kit-Build concept map into collaborative learning [14,15].
Collaborative learning have been known to promote supportive interaction among students to understand a learning topic better. Because collaborative learning focus more on the process of how learning activities are carried out. Likewise, using Kit-Build concept map in collaborative learning is also shown to foster better interaction and discussion during collaboration. However, the current system of Kit-Build concept map does not support distant collaboration where students could use their devices to collaboratively compose concept maps and discuss the maps from distance. The needs of collaborative concept mapping system is further shoved by situations where distance learning is indispensable [16][17][18]. Hence, the existence of online system for Kit-Build concept map that supported real-time composition and discussion becomes necessary.
This study presented the design and development of Kit-Build concept map collaboration system where students and teachers could collaborate and discuss learning materials with Kit-Build concept map from distance. Preliminary evaluation towards the prototype of the system in a classroom is also presented to portray the usability of the system in supporting collaborative learning. Therefore, to guide this study, the following research questions are addressed: 1. How is the design of a system that enables the current Kit-Build concept map system supports online real-time composition and discussion of concept maps?
2. How is the students' attitude towards the system usability in supporting collaborative learning with Kit-Build concept map?
The results suggested that the designed system was effective to support online collaborative learning with Kit-Build concept map. The students responded the system positively even though several collaboration issues arise during evaluation.

Kit-Build Concept Map and Its Concept Map Authoring System
Kit-Build concept map is a learning framework that leverages concept maps into digital form for easy assessment of one understanding [11,19,20]. Teachers compose a concept map that represents learning materials and decompose the concept map into concept and link components-a kit-of a concept map. Students reflect their understanding of the materials by recomposing the kit into a concept map. Comparing the teacher concept map with student concept maps could portray students understanding regarding the materials [20]. Kit-Build concept map has been practically used in several kinds of learning environment and studies about Kit-Build showed its positive impact towards students understanding [12,13] and memory retention [5,6].
Employing Kit-Build concept map in a collaborative learning environment allows students to share their understanding and knowledge [21,14,15]. Even though in prior studies about Kit-Build the system cannot directly support the discussion and collaborative concept mapping within the application itself, students could learn collaboratively and reciprocally compose concept maps with their partners offline. This study aimed to address this issue, so students and teachers could discuss and collaboratively work with concept maps in real-time online.
Kit-Build method has been implemented into several platforms in its implementation. The initial implementation of Kit-Build concept map uses Flash for the user interface and Ruby as its backend processing for the storage system and learning analysis [11,19,22] before the following studies about Kit-Build uses Unity platform to make the system portable, cross platform, and be able to run on wide-range tablet devices [20,14,15]. Another study redesigned the Kit-Build concept mapping platform into a HTML5 web application that run on most modern web browsers [23]; thus, covers a wider range of computer platforms-including mobile devices-to run the Kit-Build system. However, the former Kit-Build system, which is built on Flash, has become obsolete since Flash support has been officially ended on all web browser by December 31, 2020; leaving Unity and HTML5 as the two main platforms of Kit-Build system that were actively used in classroom. The latter study also extended the tool's functionality with semi-automatic concept map generation feature to support the concept map composition process.
The Kit-Build system, which uses HTML5, is now the preferred platform to substitute the previous Kit-Build concept map system that uses Unity. Both systems can be used on many different platforms, but one that uses HTML5 have a faster development time, more responsive, utilizes less resources, and has better compatibility towards new technology and future web standards. The drawing canvas of the HTML5 Kit-Build system uses the Cytoscape.js Javascript library for graph analysis and visualisation of Kit-Build concept map [24]. The development in this study focused on extending the HTML5 Kit-Build concept map system; allowing real-time distance collaboration in learning with Kit-Build concept map.

Real-time Web-based Application with Socket.IO and Node
Many applications could benefit from real-time functionality, especially for multiuser applications that support collaborative work; ensuring effective interactions and smooth communications among collaborators. Different techniques were elaborated to support the collaborative work. Prior to HTML5, developing web application with multimedia features was confined. A web page has to embed Java applet, Flash, or Silverlight technology to deliver rich contents over the Internet [25]. Prior to WebSocket and HTML5, developers have to go "native" to a particular platform and utilize the exposed network Application Programming Interface (API) to build collaborative concept mapping programs with real-time communication capability [26]. Nevertheless, WebSocket and HTML5 technologies were introduced to leverage new standard in delivering contents and Internet applications with better accessibility [27] and interactivity [28]. Furthermore, HTML5 technology is designed to support multi platforms [29,30] and provide full native support for 3D and multimedia contents [25].
WebSocket protocol is not a new technology. It was was introduced as one of HTML5 technology standard for active content delivery over the Internet through full-duplex communication channels [31]. Delivering real-time information and constant changes to a client, such as collaborative working systems [32][33][34] and online games [35,36], requires a persistent socket connection between client and server. In a classic client-server web application, real-time complex communication was difficult to achieve without having users constantly poll requests to retrieve the updated information [37]. As WebSocket usability and performance becomes much better [38], many native real-time applications were advancing towards realtime web application [39] and shifting from request-based information generation approach to actively pushing information to users. Prior study have implemented the WebSocket on a virtual whiteboard for real-time online interaction experience across multiple users. Real-time communication with WebSocket was claimed to have lower latency than a regular HTTP communication with a web server [28].
Socket.IO [40] is a Javascript library that provides abstraction layer to bidirectional communication between server side and client side that uses WebSocket technology. Socket.IO leverages WebSocket with long polling fallbacks through its unified API [41]. It requires a Node-based Hypertext Transfer Protocol (HTTP) server to run and a client set up to connect and communicate. Usually, a server running Socket.IO uses Express framework to simplify server side programming in Node; hence, server side code becomes more flexible, more robust [41], and run faster on large number of concurrent requests [42,43]. Node itself is a platform that is built on Chrome's JavaScript runtime to build high performance and scalable network applications.
Socket.IO serves as a communication relay that maintain persistent connections of its clients. It has two components for both the client and the server. Communication between client and server is handled through corresponding event handler on each side. Socket.IO provided an interface-a Javascript IO object-for use in both server side and client side to send messages or attach event handlers to process incoming messages [44]. In this wise, web applications could simply use the IO object instance to send messages and listen to incoming messages.

Methodology
In order to extend the existing Kit-Build concept map authoring tool with collaboration features and address the research questions, a general design and development methodology as shown in Fig. 1, is followed. This study was started with a preliminary review and analysis phase, which includes: (1) review and analysis to the current Kit-Build concept map authoring tool, (2) requirements specification of new features, (3) discovering how the tool works, (4) identifying possible technology approaches to be used, and (5) identifying how the new features be integrated into the system.
The design and development phase of the system prototype followed a prototyping approach where several prototypes were developed and tested to satisfy the specified requirements. After all requirements have been satisfied by the prototype, the latest prototype was put into a trial to discover whether the tool could effectively support the collaborative learning with Kit-Build concept map in an online classroom for several meetings. During the meetings, the students learned the topics by collaboratively recomposing Kit-Build concept map in pair groups. The students and the learning subjects were targetting the undergraduate students of Information System department of Universitas Brawijaya, Indonesia. At the last meeting of the class, the students were given a questionnaire regading their attitude towards using the collaborative Kit-Build concept map authoring tool using a validated Online Cooperative Learning Application (OCLA) scale [45] to portray how the tool supported a collaborative learning activity with Kit-Build concept map.

Requirement Analysis
This study assumes that a Kit-Build concept map authoring tool has been developed. Thus, design and development of the collaboration tool was focused on extending the tool with the development of group collaboration support feature of the existing Kit-Build concept mapping authoring tool; hence, the basis of the collaboration platform development in this study.
In supporting collaborative work of concept mapping in an online environment, there are two major issues that need to be taken care of, i.e., (1) reflecting one working activities to others' workspace, and (2) providing communication interface as one way for collaborators to communicate with each other. Hence, meaningful interaction could be attained. Minimizing delay during collaboration becomes the key factor for a useful online collaboration system, including one that used for collaborative learning. Several general functional requirements were defined in guiding the design and development process of the system. The requirements for the collaboration features of the authoring tool were specified in Table 1.
All requirements as specified in Table 1 extended the current Kit-Build concept map authoring tool functionalities that used HTML5 and Javascript technology. The extension was expected not to alter the behavior of users to use and run the concept map authoring tool with their web browser.

Architecture Design
In the current Kit-Build concept map authoring tool, there is a Javascript object-called Canvas-that handles all user concept mapping activities and all user interactions with the authoring tool. The Canvas object has an interface that allows other object to listen to concept mapping activity of a user, namely ActivityListener. Another part of the application who listen to users' concept

ID
Requirement Definition FR1 The system should provide collaborative mechanisms that reflect concept map authoring activities of one collaborator to other collaborators. FR2 The system should provide a general text-based communication channel that allow collaborators to send and receive broadcast message in a collaboration room. FR3 The system should provide a text-based communication channel that allows collaborators to send and receive message for a specific concept or link node. FR4 The system should provide notification and indicators for incoming messages of a particular concept or link node. FR5 The system should keep track of concept and link node in discussion, hence collaborators could quickly switch and discuss on a different concept or link channel.
mapping activities should implement the interface and attach itself to the Canvas object; hence, all users' concept mapping activities could be captured by external objects. The Canvas object also provides public methods that allow external entities to control the Canvas object; thus, automate the concept mapping composition activities on the drawing canvas, such as visualizing the concept map composition process from activity log data or manipulating objects drawn on canvas. This Canvas object becomes the key entry point in extending the authoring tool functionality to support collaborative work in concept mapping.
The system architecture design, which extends the current Kit-Build concept map authoring tool to support real-time collaboration in this study, is shown in Fig. 2  The backend processing at server side is processed using a web application framework as previously designed and developed in [46]. The application framework utilizes Model-CollectionService-Controller-Presenter (MCCP) design pattern, which is an adaptation of Model-View-Controller (MVC) pattern, that allows data model and collection service code be reused by many different applica-tion controllers. In the case of this study, two application controllers were created; one existing controller serves the App Logic on the client side, while another one new controller serves the Collaboration Server. Both controllers inside the MCCP Backend module, which served two different target platforms, i.e., the App Logic and Collaboration Server, could reuse the same service components that provided data processing service to a database server; hence, reusing or restructuring existing codes becomes more efficient and easy. Most importantly, the design should implement component-based and modular design patterns; hence, better reusability for further development.

Real-time Inter-client Communication Pattern of Concept Mapping Activity and Messaging
Concept mapping synchronization among collaborators could be performed when all collaborators have been connected to the Collaboration Server, joined a collaboration room, and ready to listen collaboration and concept mapping activity message. According to the requirements as specified in Table 1, the system should be able to synchronize concept map authoring activities of one canvas to other collaborators' canvas. A synchronization flow example of concept mapping activity across different collaborators is depicted in Fig. 3. The flow assumed that the Collaboration Server has been online, both end-clients have connected to the Collaboration Server, and both end-clients have joined the same collaboration room.   Fig. 2 is broken down into two submodules, i.e., ActivityListener and CollabListener submodule. The ActivityListener and CollabListener object are two new object interfaces that responsible in listening users' concept mapping activity and listen to any collaboration message sent from collaboration server respectively. The collaboration server is responsible to maintain connection between clients and forward activities and messages to all collaborators in a collaboration room. Sending chat messages from one collaborator to other collaborators is performed in a similar fashion to synchronizing the concept mapping activity via collaboration server.

The Collab Logic module as shown in
ActivityListener object has responsibility to listen to concept mapping activity on canvas, encapsulate the activity into collaboration messages, and send the messages to other collaborators through Collaboration Server. The Collaboration Server listens to incoming messages from clients-ActivityListeners-and broadcast the messages to all collaborators in the specified room. Lastly, the p-ISSN: 2540-9433; e-ISSN: 2540-9824 CollabListener object listens to any messages coming from Collaboration Server and interpret the message as a concept mapping instruction to be reflected on collaborators' canvas. Every collaborator could serve both the sender and receiver of concept map activity messages.
In addressing functional requirement FR2, FR3, FR4, and FR5, the system should provide a text-based communication mechanism among collaborators. The system should provide two type of discussion in the system, i.e., general discussion and concept/link channeled discussion. The synchronization flow of the collaboration messaging system is shown in Fig. 4

Implementation
On the client side, the new extension modules were implemented in the same fashion as the existing module. The user interface and collaboration module were implemented in HTML5 and Javascript program code. Real-time, bidirectional and event-based communication between the browser and the server, which is serverd by the Collaboration Server, is implemented by a separate instance of Node.js server and is running the Socket.IO communication library. Thus, the extended concept map authoring tool will still be able to run on the client's web browser without the need of additional software. The Canvas and ActivityListener object communicate in an event-based interface with two arguments-type and data-representing the event type and data of an activity. The data consisted of information needed to replicate said activity on another canvas. The following code excerpts depict how an activity is being distributed to other collaborators' canvas by ActivityListener, Collaboration Server, and CollabListener objects; written in Javascript programming language: Example of a program code of an ActivityListener listening to activity on Canvas and sending the activity information as a message to a Collaboration Server. // Setup Socket.IO connection var url = new URL(window.location.origin); url.port = 3000; this.socket = io(url.toString()); // Event listener of concept mapping activity on Canvas // The data argument consists of node id // and x-y coordinate of the node on Canvas. onCanvasEvent(event, data) { switch (event) { case 'move-concept': this.moveNode(data); break; } } // Sending activity message // Encapsulate activity data and room information moveNode(node) { let data = { room: this.room, node: node }; // this.socket is Socket.IO server socket this.socket.emit('move-node', data); } Example of a program code of an Socket.IO server listening to an activity message and broadcast the activity information to all connected clients of a particular room.

Example of a program code of a CollabListener object listening to an activity message and reflect the activity to Canvas.
// Listen to activity broadcast from Socket.IO server this.socket.on('move-node', (data) => { // Reflect activity on Canvas this.canvas.moveNode( data.node.id, data.node.x, data.node.y ); }); Sending and receiving general messages as well as channel messages were implemented in a similar way with activities. However, instead of listening to Canvas object, ActivityListener object listens to the Discuss UI for chat messages. If a chat message is received by the CollabListener, the message will be inspected for its attributes; thus, CollabListener object updates the User Interface (UI), e.g., updating the chat message list and displaying notification, in respect to the received chat message type.

Result and Discussion
With the designed mechanism to facilitate collaboration in the concept mapping activity with Kit-Build concept map authoring tool, it is now possible for students and teachers to collaborate and communicate at a distance. Using HTML5 WebSocket technology with Socket.IO allows web-based applications to implement real-time, two-way active communication; moving one step forward from the traditional request-based passive client-server communication method. Thus, real-time communication and collaborative work and learning on a web platform can be realized.

System Prototype
To address the first research question, a prototype of the online collaborative concept mapping system has been developed. The collaboration system was designed to support both closed-end and open-ended concept map composition approach for learning activity that used the Kit-Build method. A Socket.IO server was deployed as the middleware for the collaboration system in addition to the existing HTTP server that serves the client application. Using the Socket.IO library as a middleware to leverage HTML5 WebSocket technology in fostering collaborative concept mapping activities with Kit-Build concept map is shown to be effective. One's concept mapping activities could be effectively distributed across collaborators in real-time to constitute the effect of real-time distant collaborative concept map composition. A screenshot of the developed collaboration system prototype is shown in Fig. 5. With the developed system prototype, all requirements as specified in Table 1 have been met. Referring the prototype shown in Fig. 5, it can be seen that students could effectively collaborate and discuss a specific topic by using the destined discussion interface. The system could notify the user when new discussion messages arrive and track their discussion across different concepts or links; hence, talk separation between process and content could be maintained and keep the collaboration process smooth.

User Feedback and System Evaluation
To address the second research questions, the system was put into a trial with students to collaboratively learn several learning materials in an online class and captured their responses about the system. In evaluating the new collaborative features of Kit-Build concept map authoring tool, 95 students were invited to experience learning with Kit-Build concept map and use the developed concept mapping tool. In addition to recomposing concept maps to learn a course's subject learning material, they recomposed a concept map from a given kit with their partners collaboratively. They were also requested to discuss their map using the provided communication system. Students attitude towards using the Kit-Build concept map collaboratively online was measured using 17 items of the Online Cooperative Learning Application (OCLA) scale [45]. The detail of the scale is shown in Appendix and the responses were summarized in Table 2 and Fig. 6. According to the result, the students have positive attitude towards the designed collaborative concept mapping tool. Most students agree to strongly agree that learning with the online collaborative Kit-Build concept map was enjoyable, useful, entertaining, and help them learn better with friends as all of their responses to the OCLA positive attitude items have an average mean of higher than 4 (the higher the better) from a maximum score of 5 (strongly agree). They responded their disagreement to negative attitude items of the OCLA, meaning they actually have positive attitude towards using the online collaborative Kit-Build concept map tool (the lower the better).
There were two noticable attitude items that were perceived in both positive and negative view; having a mean score between 2 and 3 of 5 scale, i.e., item A12 and A15. They responded that somehow they need to teach their partners of something during collaboration that makes them feel tired (item A12). There also cases during collaboration where their partners are too depending in doing their work (A15). The students tend to disagree more on item A12 than item A15, which means that they don't like more if their partners are depending on them rather than requesting them to teach on how to use the system or solve the problem. These issues were also mentioned on previous study [10] as a challenge to elucidate in collaborative learning. Furthermore, these issues might indicate that the collaboration system needs to be improved regarding usability. Providing feedback or features could motivate group members to collaborate and contribute on their collaborative work. Nevertheless, a deeper investigation is required to discover the cause and elucidate the issue.

Limitation and Future Work
According to the result of this study, a web-based application for collaborative learning-such as the case of collaborative learning with Kit-Build concept map-could be implemented and well used in online classroom. However, issues in technical point of view do exists on collaboration systems that run over computer network. Intermittent network connection and system compatibility are two examples of issue that might cause problems to the system functionalities. The system has to maintain collaboration activities synchronized among different collaborators; thus, ensuring the collaboration product consistent and becomes a target of future development of the system developed in this study.
Current study does not evaluate the learning effect of the students when they collaboratively learn by recomposing concept maps with Kit-Build. Investigating the learning effect of the system and how the students interact and discuss within the system could discover how the system would impact the learning effectiveness in comparison to the traditional learning approach that carried out in an online classroom. There are many factors that influence the collaborative concept mapping activity; thus affecting its effectiveness towards learning [10]. This study assumed that the students who respond to the evaluation questionnaire have adequate experience in using web-based applications and have experienced learning with concept map. Prior using the system, users have to understand on how to compose a concept map and how to use the system to compose a concept map; otherwise, they might fail to achieve the expected learning achievement. Therefore, providing apparent guidance regarding the activity when using the system should keep users focus on the collaboration; thus, improve their meaningful learning and interaction more.
Even though current evaluation to the collaborative learning system with Kit-Build concept map yielded a positive result. More in depth experiment and trial to the system in learning environment should be conducted for more sufficient and accurate depictions regarding the developed system readiness for use in an actual learning environment. Hence, an immediate future work of the study in supporting distant collaborative learning with Kit-Build concept maps.

Conclusion
An online collaborative concept mapping system of Kit-Build concept map has been successfully designed and developed; facilitating students to learn collaboratively using Kit-Build concept map with others online. With the proposed real-time communication design, which employ Socket.IO library as the middleware that bridges the communication between two or more clients, seamless collaborative learning with Kit-Build concept map could be well attained. Having a trial with students in evaluating the system usability have yielded a positive response towards the system and useful for further development and use. According to the Online Cooperative Learning Application learning attitude measurement, the system prototype yielded a positive learning attitude score of 4.31 from a maximum score of 5. Thus, the developed online collaborative Kit-Build concept map system was shown to be useful, enjoyable, and fun where they could express their ideas and creativity. With the system, students could share their knowledge and experience while collaboratively construct and discuss concept maps, thus improve their learning.