An elearning platform for distanced collaborative programming

An elearning platform for distanced collaborative programming Final report by Low Hau Sum Team Member: Chow Tsz Wun, Low Hau Sum, Mok Ka Hei Supervisor: Dr Chui C K FYP14006

2 Table of Contents 1 Introduction... 4 2 Past case studies... 7 2.1 Codecademy... 7 2.2 Treehouse... 9 3 Project overview... 11 3.1 Objectives... 11 3.2 Development Model... 12 3.3 Project Deliverables... 14 3.4 Project Settings... 15 3.4.1 Project Description... 15 3.4.2 Real-time Code Editing... 15 3.4.3 Collaboration Board... 15 3.4.5 Audio and Text Chat... 16 3.4.6 Statistics... 16 3.5 Project Responsibility... 17 4 Functionalities... 18 4.1 Teacher s Side Functionalities... 18 4.1.1 Platform Routing and RESTful API... 18 4.1.2 Statistics... 19 4.1.3 Test-case Data Mining System... 20 4.2 Student s Side Functionalities... 22 4.2.1 Real-time Concurrent Code Editor... 22 4.2.2 Multiple Source Code Editor... 22 4.2.3 RealTime Online Compilation, Execution and Testing... 23 4.2.4 Audio/Text Chat... 24 4.2.5 Drawing... 27 5 Difficulties and Solutions... 28 5.1 Project Management... 28 Page 2 of 32

3 5.2 Version Control... 29 6 Future development... 30 6.1 Crowdsourced Test Case Database... 30 6.2 Advanced Collaboration Board... 30 6.3 Peer Comment... 30 6.4 Various Types of Coding Exercises... 31 7 Conclusion... 32 7.1 For the Project... 32 7.2 For My Work... 32 Page 3 of 32

4 1 INTRODUCTION New era of programming In year 2014, President Obama takes on computer science, kicking of an event called the White House s Computer Science Education Week. On the event s blog at code.org, it claims there are over 53 million students participating the event, and they plan to double the figure. President Obama reached out to students and said Don t just consume things. Create things. Take an hour to learn more about the technology that touches every part of our lives. That s how you can prepare yourself with the skills you need for your future. And it s how you can help prepare our country for the future as well. This shows US government s interest in promoting programming education throughout secondary and even primary education. The new era of programming learning is coming. Collaborative Training There exist many platforms today to train our programming skills, like Udemy and Code Academy, but none of these platforms focus on collaborative training. In real world, we seldom develop a product all by ourselves, in a product development cycle, we require collaboration. The Missing Pieces of Learning Programming, collaboration Education is old, so does the way we learning programming. Traditionally, we learn programming though teachers notes and guidelines, supplemented with tutorials, individual assignments and labs. This traditional way of learning programming is fine, designed to teach students the fundamental concert of programming and logic. However, when it comes to real world programming practice, something is missing. Page 4 of 32

5 Living in a cyber-society connected with internet, we work productively by collaborating with each other. In order to learn and gain more experience on collaborative programming, a new form of programming education is needed. We seek cues from Facebook and Codecademy, learning how they developed a successful model. Now we introduce our platform for online collaborative programming learning to disrupt traditional programming education. Our Learning platform for collaborative programming values collaboration the most. We introduced numerous core features like collaborative drawing board, team matching system, voice and message chat, peer comment and concurrent document editing. Traditional Lecture lacks collaboration task Page 5 of 32

6 Big Data and Data Mining, the future is now Other than building the platform, we employ the power of big data and data mining to gather meaningful data from our platform. Our platform can help teachers as well, by providing essential data such as student statistics and automatic test-case grading. Page 6 of 32

7 2 PAST CASE STUDIES 2.1 Codecademy Codecademy is by now the most similar product in the market. And it is one of the most popular coding training websites on the internet. It is an online learning platform for programming where students can login and learn programming with step by step guide. Each lesson is made up of a series of interactive coding exercises. Advantage of Codecademy Codecademy provides lessons in how to use the APIs of other companies, such as YouTube, Twitter, and Facebook. Codecademy is complete free. Disadvantage of Codecademy Codecademy only provides lessons teaching about very simple techniques like how to build a web forms and date pickers, but not a real and complete product. It will not train you to become a pro coder. It is only good for learning basic skills. Everyone can submit a lesson on Codecademy. Therefore, the quality among all lessons are very diverse. Some even have bugs. Our Learning platform however, focus on enhancing student s collaboration skills on programming, rather than each student finish their programming assignment on their own like Codecademy. Page 7 of 32

8 Beside, our platform is especially designed for university and secondary school, where students should challenge themselves to finish the collaborative assignment that posted by their teachers. Page 8 of 32

9 2.2 Treehouse Treehouse is another website that provides training on a range of coding topics. Treehouse has a diverse library of training with coding topics such as PHP, IOS, Ruby on Rails, Android and JavaScript. Each topic is complemented by video, interactive coding exercises and quizzes. Advantage of Treehouse The content of Treehouse meets a high standard of quality because it is crafted by expert teachers. They do not allow anyone to submit a course unlike Codecademy. Treehouse takes a project-based approach. Therefore, you can learn the practical skills of creating real products. It trains you to become a coder. One unique advantage of Treehouse is that it help you start a career or business. There are some courses teach you how to establish a business and how to start a coding career. There is a job board on the Treehouse website. Page 9 of 32

10 Disadvantage of Treehouse Since the courses are only provided by in-house experts, the quantity of courses maybe a bit less than other similar websites. The courses are primarily based on videos, there is no other choice. It is not quite suitable for people who do not like learning from videos, or having poor internet connection to stream videos. Page 10 of 32

11 3 PROJECT OVERVIEW 3.1 OBJECTIVES Provide an online platform for distance collaborative programming Enhance students collaboration skills and promote positive peer interaction via platform Facilitate teachers to evaluate students progress The ultimate goal of the project is to provide an interactive and user-friendly elearning platform with multifarious resources for distanced collaborative programming. With the help of the platform, collaboration and communication among students are promoted through the sharing of knowledge and experience. It is hoped that the platform can help students to learning collaborative programming effectively. Meanwhile, teacher can easily assess students performance using the platform. And the platform will make suggestion on designing test cases. Page 11 of 32

12 3.2 DEVELOPMENT MODEL Iterative development model The platform is developed under Iterative and Incremental Development Model in which our project is divided into small portions according to platform s features (incremental) and developed them through repeated cycles (iterative). In the early phase of the project, a proposal containing the project setting, project schedule and proposed features are released. Then the features are developed step by step following the cycle of Iterative Model starting from requirements collection, design and implementation to testing and evaluation. At the end of the iteration, the feature will be combined with the previously developed features to build up the whole platform. The advantage of Iterative Model is that the features can be completed separately due to its component-based architecture. It also allows flexibility for changes. By working iteratively, the project team goes through a cycle where they evaluate with Page 12 of 32

13 each iteration, and determine what changes are needed to produce a satisfactory end product. Page 13 of 32

14 3.3 PROJECT DELIVERABLES The project is divided into 3 phases with different deliverables. Phase Phase 1 (Jul 2014 Sep 2014) Phase 2 (Oct 2014 Dec 2014) Phase 3 (Jan 2015 Apr 2015) Deliverables Project plan: It includes the project setting, project schedule and proposed features Project web page: It allows the public to know the project news and updates. Preliminary implementation: The Node.js server was setup. Core features such as real-time code editing and collaboration board are implemented. Interim report: It reports the achievements in the earlier stages and describes the future development. Testing: All student s and teacher s side functionalities are tested internally and externally. Final report: It includes detailed description of the final product, implementation details and the development process. Page 14 of 32

15 3.4 PROJECT SETTINGS 3.4.1 PROJECT DESCRIPTION The elearning platform is combination of online integrated development environment and cloud code editor. It allows users work together on single programming project at the same time. Also, users can compile source code and execute it online. To achieve the objective of being an online learning tool, several essential features are introduced. 3.4.2 REAL-TIME CODE EDITING Concurrent code editing is the core function of the platform. Multiple users can edit the same code concurrently. Changes will be saved in the server and show the all users instantly. The last edited by for each class will be displayed on the screen. And time based versioning control will be implemented for them to recover their work. 3.4.3 COLLABORATION BOARD Collaboration board is workplace for users to brainstorm ideas, shape the program and unify coding style. With the help of drawing tools, students can visualise their ideas by drawing flowcharts or diagrams on the real-time whiteboard. Besides, it facilitates students to manage the project by allowing them to discuss issues like program design and work division. Page 15 of 32

16 3.4.5 AUDIO AND TEXT CHAT To enhance communication between users, the platform will support both audio and text chat. Users can chat with each other with familiar instant messaging or by starting an online group conversation. 3.4.6 STATISTICS Some useful data will be collected, including the duration of voice chat, number of messages and types of comments, to see the degree of collaboration. Page 16 of 32

17 3.5 PROJECT RESPONSIBILITY Chow Tsz Wun Mok Ka Hei Low Hau Sum Website Design Group Matching System Real-time Online Compilation, Execution and Testing Concurrent Editor Audio and Text Chat System Drawing Tool Test case Data Mining System Statistics Debugging Page 17 of 32

18 4 FUNCTIONALITIES CodeTogether is an online interactive e-learning platform that helps students to program collaboratively. There are two ends, one for the teachers and one for the students. Our Platform is mainly developed using PHP and MySQL, together with the latest advanced socket and concurrent technologies using Node.JS For the teachers part, teachers can create courses and assignments, then the platform will automatically assign groups. For the students part, students that enrolled into the course and do assignments. CodeTogether focus on collaborative programming, below is some of the core features. 4.1 TEACHER S SIDE FUNCTIONALITIES 4.1.1 PLATFORM ROUTING AND RESTFUL API To make our platform easier to maintain and debug in the future, CodeTogether will soon employ routing and RESTful approach API. Our server is currently using Apache 2 as website and we have no plan to replace it. We will first route all incoming requests to index.php. There, we deploy a third-party routing class called AltoRouter that allows us to route different request to different pages with just one single line of code. Besides, RESTful approach of our API is also coming soon in the next semester. Using the same routing practice, we route all our API to the corresponding PHP class and method, hence allowing easy maintenance and debugging. Page 18 of 32

19 4.1.2 STATISTICS During the learning process, large amounts of educational data are generated from student interaction with online platform. We aim at collecting as much data as we can and find out meaning data for teachers and students. Raw data like test cases passed and code contribution are collected and analyzed to generate statistical information. We will then visualize the statistical information into charts and infographics to help teacher to understand information more easily and quickly. It also facilitates teachers to evaluate students performance based on the statistics. D3.js is used for implementation of data visualization. D3.js is an open source JavaScript library that uses HTML, SVG, and CSS to render some diagrams and charts from a variety of data sources. This library is also capable of some seriously advanced visualizations with complex data sets. Page 19 of 32

20 4.1.3 TEST-CASE DATA MINING SYSTEM With massive data produced during the learning process, the raw data can be turned into useful information after data mining. These information can be used to facilitate teachers to set effective test cases and suggest suitable test cases for students according to their ability. When teachers add a new test case, the system will predict the category of the test case suggesting which area it tests for. Such prediction is based on a Naïve Bayes classification model. During the data mining process, students compilation data of some categorized test cases are passed into the model as the training data (Supervised Learning). The new test case will run against the every groups latest version of code to obtain the compilation result. Finally, the trained classifier can categorize the new test case by calculating an estimate for the class probability from the training set. More importantly, the system can distinguish whether the new test case belongs to a new category. Teacher are suggested to create test case of new category so as to enrich the test case base. With diversified test cases, different area of knowledge of the students can be examined. Data-mining tool Weka is a collection of machine learning algorithms for data mining tasks. The algorithms can either be applied directly to a dataset or called from Java code. We apply the Naïve Bayes classification model of Weka to classify the category of new test case using Weka s Java API. The predicted class probability distribution is returned by the model given a new instance. The system will automatically determine the new test case belongs to pre-exist or brand new category. Page 20 of 32

21 Java code for classifying new instances Page 21 of 32

22 4.2 STUDENT S SIDE FUNCTIONALITIES 4.2.1 REAL-TIME CONCURRENT CODE EDITOR CodeTogether supports real time concurrent code editing. It works like Google Document, by using socket technologies, we are able to create a real time code editor that supports multiple students to program at the same time. We utilize a library called ShareJS, every time when a student edit the code, the program generates an operation. Operations are like Git commits to the document, e.g. insert: int num, position: 50. If multiple students edit the code, one of the edits is applied directly and the other students edit is automatically transformed by the server and then applied. Example of how ShareJS works 4.2.2 MULTIPLE SOURCE CODE EDITOR Object-Oriented Programming is the model that we use the most in real life software development. In developing applicable application in real life, it is rarely the case that only a single piece of source code or one single developer is involved. Usually Page 22 of 32

23 multiple developers are working on the same project and each responsible for some source code, combining them into a single program. And it is where collaboration and communication become important. CodeTogether will support multiple source code editor on a single assignment. Users can add or remove editor if needed. OOP learning experience will be provided on CodeTogether. 4.2.3 REALTIME ONLINE COMPILATION, EXECUTION AND TESTING CodeTogether support real time compilation and run self-defined test cases. Users can compile their source code online by clicking Compile and Run. The result will be shown instantly online. The program will be run against test cases specified by teachers and test cases specified by student themselves if any. By using ShareJS, all the user currently editing that assignment can see the result simultaneously. Page 23 of 32

24 4.2.4 AUDIO/TEXT CHAT Group chat is an essential feature for a distanced elearning platform as it allow students to collaborate across time zones. Users can chat with each other with familiar instant messaging using the group chat box. Students are encouraged to ask questions, leave comments and share opinions. To enhance communication between users, the platform supports both audio and text chat. Users can use microphone to record a voice message by pressing the record button and the message will be delivered to everyone in the group. Furthermore, users can share drawing created in the drawing board to the group. Audio Text Drawing Page 24 of 32

25 Implementation detail of the chat function When multiple students are doing the same assignment on our platform, we need to provide a method for our platform to communicate. We uses socket technologies to allow program events to travel form one students to the entire group. Socket.IO, which is a JavaScript library based on Node.js, is adopted to enables realtime bidirectional event-based communication among group of users. Server can push messages to clients so that whenever user write a chat message, the server will get it and push it to all other connected clients. Server side A chat socket is created when server starts. The socket listens to events (such as join room or sending message ) on the io instance and keep track of the connected clients with their respective user name and room id. Once the message event is triggered, the socket will broadcast the message event which all clients of same group are listening for. Server side code of chat socket Page 25 of 32

26 Client side Socket is created when the clients join the assignment group with their group number as the unique room id. The socket is listening to the events coming from the server such as join room, message, and sysbroadcast. Users chat room are updated upon receiving sysbroadcast event which contains message from other users. Client side code of chat socket Page 26 of 32

27 4.2.5 DRAWING To further enhance the degree of collaboration, we added a drawing board. Students can draw their message in an interactive way. With deep integration with the chat module, students can also share their drawing to the group, allowing further discussion on the topic. Sharing of drawing images is done via chat, where students can open the images and follow the instructions. Page 27 of 32

28 5 DIFFICULTIES AND SOLUTIONS 5.1 PROJECT MANAGEMENT In this project, Trello is selected as the project management tool. Trello is a free webbased project management application in which projects are represented by boards which contain lists (corresponding to task lists) and lists contain cards (corresponding to tasks). Our project contain four lists which represent four different stages of the development process (to be implemented, developing, testing, finalized). To divide the work, team members are assigned to cards which include the description, checklist and due date of certain task. In the development process, cards progress from one list to the next (via drag-and-drop), mirroring the flow of a feature from idea to implementation. Trello helps to organize the project in a visualized way and keep track of the working process. Page 28 of 32

29 5.2 VERSION CONTROL In a distributed and collaborative development environment, a version control system is essential to coordinate the team of contributors. In this project, Github is used for version control and source code management. Github provide a Git repository hosting service which allows developers to create a central repository online. Developers are encouraged to fork the project s repository to its own system and release their changes back to the central repository. If any conflicts that arise when two contributors independently change the same piece of code, it will be automatically flagged when the changes are merged. Also, every change made can be tracked so that problems arose from a change can then be followed up by an examination of who made the change and the reasons they gave for making the change. Page 29 of 32

30 6 FUTURE DEVELOPMENT 6.1 CROWDSOURCED TEST CASE DATABASE With more teachers and students using CodeTogether, test cases contributed by the users can form a huge test case database. The database can facilitate teachers to assess various programming skills of students. However, to make good use of the database, a crowdsourcing platform that allow users to share their test cases conveniently. Also, it is important to manage and organize the database properly as crowdsourced data are disordered and full of meaningless information. To explore useful test cases from database, data mining and analytics are needed. It can also be achieved by analyze the comments and rating of the test case from other users. 6.2 ADVANCED COLLABORATION BOARD The drawing board we have now is under development. In future, we will develop it into a collaboration board. Collaboration board is workplace for users to brainstorm ideas, shape the program and unify coding style. With the help of drawing tools, students can visualize their ideas by drawing flowcharts or diagrams on the real-time whiteboard. Besides, it facilitates students to manage the project by allowing them to discuss issues like program design and work division. 6.3 PEER COMMENT We would implement peer commenting board on CodeTogether. Students are encouraged to leave comments on other student s code and tag the comment. They can specify which type of comment it is by the options provided, including Coding Style, Algorithm, Progress of Assignment, etc. Providing peer feedback let student develop monitoring mechanisms for their own learning activities. Page 30 of 32

31 6.4 VARIOUS TYPES OF CODING EXERCISES There are several limitations on the type of the type of coding exercises allowed in this platform by now. First, only source code written in Java can be compiled. We have only implemented the Java editor in the frontend and shell script that compile and execute Java program. We choose Java to be demonstrated because Java is an OOP language and is widely used in real life business in Hong Kong. It serves as a very good example for collaborative programming. Other languages shall be supported in future development. Besides, some kind of operations are not supported such as file IO, socketing, threading, etc. Only standard IO is supported at this time.jar files cannot be included too. Unfortunately, the system cannot detect such operations before compilation. Therefore, the system will report with runtime error instead of stopping students from submitting. It shall be improved in the future. Page 31 of 32

32 7 CONCLUSION 7.1 FOR THE PROJECT After one year development, we have established a solid foundation for CodeTogether being an online collaborative elearning platform. Even though it is only a prototype that require further development, core functions such as real-time code editing and compilation, collaboration board and test management are supported. There is plenty of room for improvement for the data mining system as the data generated during learning process is enormous, and we can make effective user of the data to perform tasks like Predicting students' future learning behavior and improving data mining models other than just test case data mining. Moreover, advanced features such as crowdsourced test case database are expected in the future. 7.2 FOR MY WORK Through this project, I have learned practical skills about web application development like setting up server, PHP and JavaScript programming, Node.js frameworks, etc. I am also glad to cooperate with two of my team members who help me a lot. All in all, it is a valuable experience for me to work with team members to develop the project. Page 32 of 32