COLLABORATIVE IDE FOR E-CLASSROOM WITH PROGRESS TRACKING
OF STUDENTS
A Thesis
Presented to the
Faculty of
California State Polytechnic University, Pomona
In Partial Fulfillment
Of the Requirements for the Degree
Master of Science
In
Computer Science
By
Bhargav V. Parekh
2019 SIGNATURE PAGE
THESIS: COLLABORATIVE IDE FOR E- CLASSROOM WITH PROGRESS TRACKING OF STUDENTS
AUTHOR: Bhargav V. Parekh
DATE SUBMITTED: Fall 2019
Department of Computer Science
Dr. Yu Sun Thesis Committee Chair Computer Science
Dr. Gilbert Young Computer Science
Dr. Hao Ji Computer Science
ii ACKNOWLEDGEMENTS
I would first like to thank my thesis advisor Dr. Yu Sun. He consistently helped me during my work and provided his best feedback to improve my work to make it most useful product. With his guidance of practical usability of the system only I am able to achieve this goal. I also thank Dr. Gilbert S. Young and Dr. Hao Ji for their willingness to review my work as thesis committee member.
I would also like to thank my family to encouraging me for higher studies, without their support this was not possible. A big thanks to all my colleagues who always motivated and pushed me to get best out of myself.
iii ABSTRACT
The online classrooms are now great in trend. Due to the ample amount of internet - sharing and getting knowledge becomes simple and cost-effective. Nowadays, many schools provide online classes in all areas of the study. This simplicity and easiness attract more and more students towards acquiring knowledge online. According to a private company which helps users to find the best cost-effective coding bootcamps, between the year 2018 and 2019, online coding bootcamps increased 177% based on a market study of 79 cities in US and Canada.
With the growth in online coding classes and bootcamps, need arise for tools to help instructors and students to get the highest benefits of the new methods of learning and delivering a lecture. The main problem of this kind of learning is the environment, in the coding/programming field setting up infrastructure and environment is the most crucial part. Another issue is the interaction between instructor and student and progress tracking.
In this report, I will be focusing on providing a solution for two main issues: 1)
Environment setup, 2) Progress tracking. This report includes my approach to solving these problems by developing software and description of its implementation.
iv TABLE OF CONTENTS
SIGNATURE PAGE ...... ii
ACKNOWLEDGEMENTS...... iii
ABSTRACT...... iv
LIST OF FIGURES ...... vi
CHAPTER 1: INTRODUCTION ...... 1
CHAPTER 2: COLLABORATIVE CODE EDITOR ...... 4
2.1 ACE code editor ...... 5
2.2 Collaboration on editor...... 6
2.3 Conflict resolution ...... 7
CHAPTER 3: TERMINAL ON WEB ...... 8
3.1 Use of terminal ...... 8
3.2 REPL Concept ...... 9
CHAPTER 4: IMPLEMENTATION ...... 10
4.1 Overview ...... 10
4.2 Software/Platform requirement ...... 15
4.3 Open-source libraries used ...... 17
4.4 Deployment details ...... 19
4.5 REST APIs ...... 22
4.6 User interface ...... 28
CONCLUSION...... 34
REFERENCES ...... 35
v LIST OF FIGURES
Figure 1: Online bootcamp market growth between year 2018 and 2019...... 2
Figure 2: Collaborative text editor with user presence based on Firepad library ...... 6
Figure 3: Basic OT diagram and conflit resolution ...... 7
Figure 4: REPL concept in flowchart ...... 9
Figure 5: User Diagram of the Co-IDE System...... 11
Figure 6: Sequence diagram for instructor user...... 13
Figure 7:Sequence diagram for student user...... 14
Figure 8: Firepad example with ACE code editor available on https://firepad.io/ ...... 17
Figure 9: GoTTY running example and accessing CLI to a web browser ...... 19
Figure 10: Instructor's view for starting a new coding class/session...... 29
Figure 11: Student's view once receive invite url from instructor...... 30
Figure 12: Instructor's three column view with student list, code editor and terminal..... 31
Figure 13: Student's view with code editor and terminal view once registered ...... 33
vi CHAPTER 1: INTRODUCTION
The online classrooms are getting more popular these days in all field of studies. Due to the ample amount of internet - sharing and getting knowledge becomes simple and cost- effective. Nowadays, online courses have become prominent in schools, particularly for field of Computer Science. Also, Computer Science is the field that every other field of study and industry are integrating with. So, the requirement for learning coding/programming and concepts of computer science are highly on demand. On a small scale, schools offer online courses that have time, physical, instructor availability constraint. In this form of course offering, materials are presented through recorded lectures, problem sets, and readings, and students and professors use mechanisms such as discussion forums to communicate.[1] This simplicity and easiness attract more and more students towards acquiring knowledge online.
As per the number published by Oregon State University, from 2013 to 2015, attendance in the CS classes in e-campus program – online course offering program - grew from 100 to more than 2,000 paying students.[4] According to a private company which helps users to find the best cost-effective coding bootcamps, between the year 2018 and 2019, online coding bootcamps increased 177% based on a market study of 79 cities in US and Canada.
This market study shows 49% increase in coding bootcamp graduation, this growth includes in-person and online bootcamps. That means in-person method only able to grow by 31% whereas online method increased by 177%. In terms of number of students in online form of bootcamps, number increased from 2022 to 5519 students.[2] This numbers
1 clearly mentions popularity of online courses among learners.
ONLINE BOOTCAMPS On line cod ing bootcamps are growing faster than in-person; 5,519 (of the total 23,043 students) wi ll graduate from full-time, online coding bootcamps in 2019.
~ ~~ II c,9-.0 24.3 WEEKS 12,900 ? - ,'1".,. e ONLINE BOOTCAMPS ARE l- LONGER + LESS EXPENSIVE THAN IN-PERSON SCHOOLS
2018 2019
Figure 1: Online bootcamp student graduation market growth between year 2018 and 2019[2]
All the benefits come with issues and new problems, as these online programs provide
convenience of time, commute and availability at a same time it also causes issues like
environment setup and tracking of students’ progress during the session. On-campus
instructors can easily interact with their students to resolve problems and keep track of their
progress, but massive open online course (MOOC) students have fewer chances to interact
with instructor and the other way around, which could limit efficiency of this kind of
wonderful programs. Authors of one study suggest that MOOCs cannot offer the social
experience of on-campus courses, which limits their effectiveness. [1][4] In computer science
specifically in coding courses, environment setup is most important part. For on-campus
courses, students have access of infrastructure with proper environment setup but on the
2 same time for online courses there is no such facility that accommodated course requirement. The students have to setup entire environment or in worse case they have to purchase new hardware which is not cost-effective. In addition to this point, not setting up proper environment impacts directly to their online session. In majority of cases they will miss the session or not able to perform hands-on for the session.
In this report, I will mainly focus on these two issues and shows my implementation to overcome it. So, the first problem is to keep track of students’ progress, I will manage this by doing student-led live coding which is directly visible to instructor. Second problem is the environment setup, so I will demonstrate my implementation for python programming language with code editor (integrated development environment) and terminal. Due to which students don’t required to setup any environment and can work from any operating system.
3 CHAPTER 2: COLLABORATIVE CODE EDITOR
As attending online courses, students do not get social environment which is essential for learning and provides motivation. To simulate social environment, making code editor collaborative is the best way. By doing so students can feel competitive social environment.
As name suggest collaborative code editor is a real-time code editor so multiple user can contribute at same time. Unless like Git (not real-time collaboration tool) collaborative code editor works on web and updates all the copies immediately to allow other users to work on same editor.
To implement collaborative code editor for online courses there are two way of collaboration we can achieve.
x Instructor-led collaboration: In this type of implementation, instructor works to
achieve final goal and at the same time all student can watch process to contribute
when instructor asks to do so. This will be one-to-many collaboration (one
instructor to many students).
x Student-led collaboration: In this type of implementation, students work to achieve
final goal and at the same time instructor can watch process how they are doing and
contribute where student faces problem. This will be many-to-one collaboration
(many students to one instructor).
A study demonstrated that student-led live coding makes students more active during the session and focuses on processes with result, which prompted more interaction from
4 instructor side as instructor knows the thought process of the student. The research revealed that the thought process is of more concern than the final product.[5] In this implementation
I am using student-led live coding to help best approach.
2.1 Ace code editor
For developing prototype, I used Ace code editor. Ajax.org Cloud9 Editor (Ace) is a standalone JavaScript based code editor with goal to create a web-based code editor that provides and extends the features and performance of existing native editors such as Vim,
Eclipse, Visual Code. Below are some of the feature of Ace code editor retrieved from developer’s repository. [10]
x Syntax highlighting for over 120 languages (TextMate/Sublime/.tmlanguage files
can be imported)
x Over 20 themes (TextMate/Sublime/.tmtheme files can be imported)
x Automatic indent and outdent
x An optional command line
x Handles huge documents (at last check, 4,000,000 lines is the upper limit)
x Fully customizable key bindings including vim and Emacs modes
x Search and replace with regular expressions
x Highlight matching parentheses
x Toggle between soft tabs and real tabs
x Displays hidden characters
x Drag and drop text using the mouse
x Line wrapping
5 x Code folding
x Multiple cursors and selections
x Live syntax checker (currently JavaScript/CoffeeScript/CSS/XQuery)
x Cut, copy, and paste functionality
2.2 Collaboration on editor
In previous section we discussed code editor that provides look and feel of core editors, but it does not provide any collaboration of any type. Now to collaborate on code editor we will be using Firepad (https://firepad.io) – a firebase-powered opensource collaborative text editor. Firepad is a real-time collaborative editor, complete with intelligent
OT(operational transformation)-based merging and conflict resolution. It supports rich text as well as code editing. Best features of Firepad includes cursor position synchronization, text highlighting, user attribution, presence detection, and version checkpointing.[12]
(5) Font y , Size y Colory I B J !.!. ■ Marga.r~t I ■ John Welcome to Firepad! Tony Col laborat ive text ed iting without serve r code I ■ G0 David Figure 2: Collaborative text editor with user presence based on Firepad library[12] 6 This library is fully supported on client-side which makes simple to integrate in any kind of development environment. To connect with firebase it uses JavaScript, so no complex configuration required or compatibility check required. 2.3 Conflict resolution For collaboration in real -time and conflict resolution, firepad uses OT(operational transformation) technique which is also base of Google Doc collaboration. OT is a technology for supporting a range of collaboration functionalities in advanced collaborative software systems. OT was invented for consistency maintenance and in collaborative text editing environment. Intensive research has extended its capabilities to include group undo, locking, conflict resolution, operation notification and compression, group-awareness, HTML/XML and tree-structured document editing, and collaborative office productivity tools.[13][14] Below image shows basic OT diagram and conflict resolution. abc 02=del[ 2, "c"] 01 = lns[O, "x"] ab xab 02 ' = T(02 , 01) xab 01 ' = T(01 , 02 ) = del[3, "c"] = lns[O, "X"] Figure 3: Basic OT diagram and conflit resolution[13] 7 CHAPTER 3: TERMINAL ON WEB As discussed in introduction section, environment availability is the major issue of any online computer science courses. In online form of course, students are at remote location in other word not in school campus which has all the environment setup. Many times, students are not competent to perform all the prerequisites before course start. This clearly means they will miss course content partially or fully. There are multiple solution to provide environment over the web. x Weblinux: It is a web app tool providing a standard Linux OS and an IDE in the browser, including a terminal, a code editor and a file browser. It provides a client- side and offline Linux OS environment based on a JavaScript emulated processor.[17] x REPL base GoTTY: It is read–eval–print loop or language shell based approach in which user is provided with interactive computer programming environment (IDE) that takes single user inputs, executes, and returns the result to the user.[15] 3.1 Use of terminal In this implementation I mimic REPL logic and implemented using GoTTY, a library written in go language. As there are many limitations of Weblinux for installation of software I choose to use actual server terminal and provide it over the web. Main hurdle is the interactive command which takes inputs from users on runtime and then executes program. Due to this reason we cannot simply execute program and return result as text. 8 For this reason, I used WebSocket which opens a port on server while user is interacting with program and providing inputs. 3.2 REPL Concept In a REPL, the user enters one or more expressions (rather than an entire compilation unit) and the REPL evaluates them and displays the results.[15] Below is the figure that simply explains concept. Ready EvaI Result Read Output ---'! Input Reading Figure 4: REPL concept in flowchart[16] To mimic this flowchart, I executed GoTTY for each user command, open port to print output, accept user input if any, and repeat until all commands are executed and printed. 9 CHAPTER 4: IMPLEMENTATION In this section, I will discuss implementation strategy, software stack, control flow, system design, database design and user interface in depth. This section will give you an idea about system requirements, open-source libraries used and deployment stapes. The development is mainly divided into two parts: Front-end, Back-end. Front-end is a user interface that directly interacts with the users and includes API for data transfer between client and server. Back-end consists of a database, APIs and other processing logic. This part is mainly responsible for all data transmission between front-end and back-end via exposed APIs. 4.1 Overview As described in the introduction section, this system is intended for two types of users: 1) Instructor, 2) Student. The below figure with the user diagram shows available functionalities for each user on this system. Start coding session: This is the starting functionality of the system; Instructor is the intended user of this function. By using this, Instructor can create a session for limited amount of time. Once the instructor fills the form and submits it, a session with form details is stored in the database and returns with session code which will be unique for each class. The instructor will be redirected to the code editor view for instructor after this step. Share invite url: Once the instructor view is open after starting coding session, Instructor can see one invite url on the top left corner of the screen which can be copied directly by 10 clicking on copy button on right to the url. This url can be shared with students of the class and will be valid for the time session is enabled by the instructor. -JOESystem Slartcod ingsess ion Shareinvite url ~ lnslruclor Executeprogram Student Figure 5: User Diagram of the Co-IDE System Start coding with invite url: After receiving invite url, students can open the url and will be redirected to start coding form. This functionality enables students to register for a specific session. If the url is invalid or the session is expired, a student will not be allowed to start coding. If the url is valid and student registers, then the Instructor of the session will be notified by the student list on the instructor’s view. 11 Execute program: For this functionality, intended users are students as well as instructors. Once users either registered for a class or started a session they can use this functionality. It allows users to test their program for output and errors. Check students’ progress: Instructors are the intended users for this functionality. This functionality allows users to check students' progress in terms of the line of code they have written as well as the last execution time of the program they have written. These measures are most important for an instructor to know the activeness and progress of the students. Lines of code and last execution can be viewed on students’ list. It gets updated automatically as per students’ activity. Download code from IDE: This functionality allows users to download their programs to local storage for future reference purposes. Students, as well as Instructors, can use this functionality to store their code to the local storage system. Above description explains available functionalities to the users and short detail of their usage. Now I am going to explain flow of the control with respect to each intended user. As earlier mentioned, there are two users of the system, below figure shows sequence diagram of instructor which clearly explain flow of the system. x Instructor fills a form to request start session with name, description of class and expire time. Front-end makes API call to register this request and gives a session code for further use. x Back-end inserts request details to database and return a session code. This session code is further passed to front-end. Now using this session code, front-end redirect 12 instructor to new page with student list, code editor and terminal. In this page all the registered student is visible as well as their activity. x Once this page is open, code editor requests a connection of editor from database so that instructor can code, execute as well as store progress (s)he made in coding. Database return a connection which will be used in subsequent code update requests. ongoDB Firebase Inst ru ctor Front-end Back-end Database Request for session ' Call create session API ' Insert a sessiont o 0 8 .- < ------Return session id Return session id ~' < ------~ ' ' ' - ' ' ' Redirect to instructor view ' 1._ Request to create IOE sessionf or Instructor . ' ' ' Returnco nnection' for coUaboration <·------:------·····------~' ' ' Call student list ' ' ' ' Request student list ' - . ' Return student list «;------···· ------Return student list ~' <·------······------' ( Return page (student • IDE) _ ' '' ' ' ' ' ' Figure 6: Sequence diagram for instructor user 13 x At the same time front-end also makes API call to get all registered students with the session code. This API will return all student details to the instructor’s view. Now as instructor has opened a session so now it’s time to understand floe from the student side. Below figure shows sequence of operation from the student user once invite url received from instructor. MongoDB Firebase ructor Sharei nvite url Requestto start coding Call add studentAP! Inserta studentto DB <· ... SO,m ''-'°"------~ ( _____Return ide _code ______ ~- ' ,' Redirect to codeeditor v iew '+- Re eo,m """,.",. ,. .. ,.. -~ ~------·------_R eturnnew added student connec uli: for oolaboralionto studentlist ___ J______~ ' ' t,,,.-----···---·····------Returnpage (t DE) . :'. :'. Figure 7:Sequence diagram for student user x Once instructor shares invite url, students will open invite link and fill out form which requires name, email and session code. In this form session code is prepopulated and non-editable field. Now students request to start coding. 14 x This request goes directly to back-end via add_student API call. API validates session code validity, if not valid or expired then it will return a error message and not allow student to join session. x If session code is valid then form details is added to database with a unique ide code specifically generated for each student. Now this ide code will be returned to front- end for further processing. x After getting ide code, front-end will redirect student to code editor page which consist of code editor and terminal part. x Now front-end will request a connection of editor with ide code. Database will return a connection to student so that student can start coding on editor and store progress (s)he made on code editor part. At the same time editor connection is also returned to instructor to check students’ progress and help them if sees any position where students are having problem by directly interacting to student’s code editor. 4.2 Software/Platform requirement In this section I will discuss all the software and platform requirement and their uses for the system. And to use this project, latest version of Mozilla Firefox and Google Chrome are the recommended browsers as the project is tested on these two browsers. Java JDK 8+: This coding platform is used to build back-end REST APIs so this program is a prerequisite of this project. For this project purpose, JDK version 8 is minimum requirement as it is used to build this project. 15 Apache Maven: This build automation tool is used to compile and get all dependencies to create an executable version of the back-end code. Detailed steps are mentioned in deployment section. AWS EC2 instance: For the deployment server, AWS EC2 t2.micro instance is used for the project prototype deployment and testing purpose. This server instance comes with 1 vCPU, 1.0 GiB RAM and 8 GiB of storage space. MongoDB: In this project to store all the session and student details, MongoDB database is used. MongoDB is a cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with schema. Firebase: This is a real-time database owned by Google to develop rapid web and mobile app. In this project I used this database to store code editor data in real-time to collaborate with multiple user without any latency. AngularJS 1.7: I used angularJS 1.7 – JavaScript based web framework for dynamic website and populate dynamic views on the entire front-end project. NodeJS 12.x: This version of NodeJS is used in this project for deployment of the front- end server, further details are mentioned in deployment section. Go language: This language is mainly used to compile GoTTY – web based terminal program. As GoTTY is written in go language, installation of Go language platform is most important for terminal functionality. 16 4.3 Open-source libraries used During the implementation of the system I used two open-source libraries to achieve some of the functionalities. Firepad (https://firepad.io/): Firepad is an open source library available for real-time collaborative text editor, complete with intelligent OT (operational transform) based merge and conflict resolution.[8] It provides some of the feature listed below. x Cursor position synchronization x Undo & redo x Text highlighting x User attribution x Presence detection x Version checkpointing II JavaScript Editing with Fire pad ! 2 ~ function go ( ) J 3 var message - "Hel lo, wor l d . "; 4 console .l og (message ) ; s }I Figure 8: Firepad example with ACE code editor available on https://firepad.io/[8] Firepad is highly useful as to use it, user does not have to run any process on server side. It uses firebase(https://firebase.google.com/) directly from JavaScript to avoid all the 17 server compatibility issues to store and share editor data. It also provides ACE based code editor out-of-the-box and easy to extends code editor features. GoTTY (https://github.com/yudai/gotty): GoTTY is an open source library to use command line interface into web applications. GoTTY uses xterm.js (https://xtermjs.org/) and hterm to run a JavaScript based terminal on web browsers. GoTTY itself provides a WebSocket server that simply relays output from the TTY to clients and receives input from clients and forwards it to the TTY.[9] It is written in go language, HTML, JavaScript and CSS. Internally it reads command and all the configuration to start server on specified port and execute a command. For the security reason by default user input is disabled in GoTTY, to enable it user must pass -w switch in command line. Below is some useful configuration available in this library. --address value, -a value IP address to listen (default: "0.0.0.0") --port value, -p value Port number to liten (default: "8080") --permit-write, -w Permit clients to write to the TTY --credential value Credential for Basic Authentication (default: disabled) --random-url, -r Add a random string to the URL --tls, -t Enable TLS/SSL --tls-crt value TLS/SSL certificate file path (default: "~/.gotty.crt") --tls-key value TLS/SSL key file path (default: "~/.gotty.key") --reconnect Enable reconnection --reconnect-time value Time to reconnect (default: 10) --once Accept only one client and exit on disconnection --timeout value Timeout seconds for waiting a client (default: 0) 18 .:. .. : I ; t 160 l Old . , 2 • 1;•~n1n(J, 158 '-' l.eq_:~'l(J, 0 ) t0pped 1 0 .:'orb1e d' "'° · l. (IU (SI : 0.2 lJ':'>, 8.4 '> i' 0.0 n l, 99.4 l tl , 0.0 ,,'d' 0.0 ~l l I 0.0 ".:, 0.0 ,t '\1!:i nc,: 6176808 tot a~, 7914108 u'>cr., l0l040 ~ ,c ( • 305472 r,.;'fcr·~ \1B ":i',,'ap: 999420 t O t [ I [ /'1,.:,-.r_•/y:..,rJ,I::. ] ·•; . l .J I 1~ •j,J11_:'f'li"lil;_ld tOG 2015/08/16 20:13:36 Sever ts running at :88B0, cocr,ar>d: ~op -~2015/08/16 20:13:38 ~ cl1ert cornected: [td17:1: :129a:ddtt:tea6:bt7c] :60831 Figure 9: GoTTY running example and accessing CLI to a web browser [9] In this system I used GoTTY to execute python program. By doing this, it allows us to overcome overhead of configuring environment for each student. So, students do not have set any kind of environment or special operating system. While running this library I also enabled user input by providing -w switch in command. 4.4 Deployment details In this section I will discuss steps for deployment of the system and all the prerequisites installation steps. This section covers all the software requirements and steps to follow for 19 making the system live. Below are the software requirements and commands to fulfil them on AWS EC2 instance with linux operating system. Java JDK: As previously discussed, java language is used to develop this system so this is the first requirement to live this system. The coding syntax is used which works best on JDK version 8 or higher. $ sudo apt install default-jdk This is the command to install latest JDK version on the linux based operating system. Make sure to use linux flavor specific commands. Python3: During the study, python3 is used for system prototyping purpose. In most of the linux operating system python3 is pre-installed software. In case server requires to install python3 below is the command. $ sudo apt install python3 Apache Maven: This is an opensource build automation tool written in Java and used primarily for Java projects. Maven is developed by Apache Software Foundation which can be installed by following command. $ sudo apt install maven As Maven is written in java, java should be installed prior to this software. Git: Git is a distributed version-control system for collaborating source code during software development. It is also designed to track changes in any set of files. In this 20 implementation, Git is used as a repository and using it migrate code to all the deployment servers. $ sudo apt install git Go language: It is a programming language designed by Google. In this implementation go language is used to show terminal over the web to provide environment for python programming language. WebSocket to command line interface is written in this language and third-party library GoTTY is also written in go language. Here are commands to install and set environment path of go language. $ wget https://dl.google.com/go/go1.13.4.linux-amd64.tar.gz $ sudo tar -xvf go1.13.4.linux-amd64.tar.gz $ rm go1.13.4.linux-amd64.tar.gz $ sudo mv go /usr/local $ export GOROOT=/usr/local/go $ export GOPATH=$HOME $ export PATH=$GOPATH/bin:$GOROOT/bin:$PATH $ go version GoTTY: It is a library to project command line interface (CLI) over the web. To install and compile here are the commands. $ go get github.com/yudai/gotty $ gotty -p 8800 -w python3 21 NodeJS: This opensource, cross-platform, JavaScript runtime environment is used for front-end server to install it below are the commands. In this system, I used NodeJS 12.x version. Another version may work but never tested. $ curl -sL https://deb.nodesource.com/setup_12.x|sudo -E bash - $ sudo apt-get install -y nodejs $ npm i -g serve 4.5 API Documentation In this system, RESTful APIs are used as backend service provider written in java language with the help of Spring Boot framework. The main purpose of the APIs is to connect frontend to backend servers and access database to get, add and update user data. The benefit of using APIs is it reduces dependency and coupling between frontend and backend. And also, it can be consumed by any frontend devices or servers. Below is the documentation of all the API developed and used with url, request and response detail. All the APIs sends and receives application/json format. Start session: URL: POST | http:// This API’s main function is to start session or class by instructor. Before students start coding, instructor must start session which allows students to join session and instructor can track students’ progress live after that. In the request body, expireAt is a timestamp in GMT format which is calculated based on instructor’s selection of end session within dropdown. All three attributes are mandatory. 22 Request body: { "name": " "courseDesc": " "expireAt": "2019-11-19T00:04:11.483+0000" } Response body: { "success": true, "generatedCode": " } Start coding: URL: POST | http:// This API’s main function is to allow students to join a coding session. As previously mentioned, students can only join a session which is in progress currently. In the request body, name will be student’s name, same will be shown to instructor for live progress tracking. generatedCode is a session code shared by instructor via invite url to all the students. And ideCode is a unique per student code that allows student and instructor to work together in collaboration mode. If session is expired then student will be shown an error message “Class is not in progress, please check your class code.”. This API enters student details to database under a session code. 23 Request body: { "name": " "email": " "generatedCode": " "ideCode": " } Response body: { "success": true, "message": "registered" } Get all students for a session: URL: GET | http:// This API’s function is to retrieve all students’ details for individual session based on session code. This API uses GET method instead of POST as we are just retrieving data not pushing any data towards server or database. Session code can be passed as url path shown above, server will interpret request and read session code from url path. After reading session code, server hit the database and retrieve all the students’ detail and return in application/json format. In response first parameter is success to know whether operation is successful or not. Second parameter is number of students, this allows frontend to know total number of student and how to render them on instructor’s screen. And last parameter 24 is student list with all the details like name, ideCode, numberOfLines, lastExecuted for live notification purpose. Response body: { "success": true, "numberOfStudents": 15, "studentList": [ { "id": 8, "createDate": "2019-11-26T22:20:02.136+0000", "name": "Tom", "email": "[email protected]", "generatedCode": "261018161116", "ideCode": "vqwn55ywhwpj15pg0pphld", "comment": null, "linesOfCode": 8, "lastExecuted": "2019-12-05T09:27:38.248+0000" }, { "id": 9, "createDate": "2019-11-29T05:07:29.321+0000", "name": "Roy", "email": "[email protected]", 25 "generatedCode": "261018161116", "ideCode": "mq842idz8801l9gd06ba99", "comment": null, "linesOfCode": 6, "lastExecuted": "2019-12-10T09:58:45.696+0000" }, { "id": 10, "createDate": "2019-11-29T07:59:18.333+0000", "name": "Jeff", "email": "[email protected]", "generatedCode": "261018161116", "ideCode": "p5rm1cxs10gvehm0siwt68", "comment": null, "linesOfCode": 12, "lastExecuted": "2019-12-05T09:28:05.759+0000" },... ] } Execute code from IDE: URL: POST | http:// 26 This API’s is useful for both the users: student and instructor. In effort to provide environment over the web, executing program written by user and return output of the program is crucial part. Once user clicks on run button this API will be called with some of the data. First parameter for request body is editor’s code written by user. Second parameter is isStudent Boolean, this helps backend server to update lastExecution time if user is a student based on last parameter ideCode of student as ideCode is unique for each student. If user is instructor, program simply executes it and return port of output process to show on web terminal on the screen. Request body: { "code": “ "isStudent": true/false, "ideCode": “ } Response body: { "success": true, "PortNumber": " } Update numbers of line for progress tracking of the student: URL: POST | http:// 27 This API’s is useful for progress tracking of each student. At regular interval this API is called to push number of line student has written to student’s database record so that instructor can view live notification of student’s work. This API consumes and produces application/json content, sample request and response body is as below. Request body: { "code": “ "isStudent": true/false, "ideCode": “ } Response body: { "success": true, "message": " } 4.6 User interface User interface is the most important part of any application as it determines usability of it. As per the standard definition of usability in Human Computer Interface is easiness to learn and perform desired task with more accuracy. For this reason, I developed simple and self- guided user interface for students and instructors without any confusion and clutter. Below is the screen by screen view as per the flow of system and their detailed description. 28 C! {i) 0 r, 3997100.20'J ••• 0 * . W\ D • = PythonIDE ForStudents Enterbelow details to generatea classcode and start session. Entername Enterdescription of yourclass StartSession Figure 10: Instructor's view for starting a new coding class/session x Above figure (Figure 10) is the starting point of the entire system. This screen helps instructors to create a coding session. x In order to create a session, instructor must fill in the simple form with name, class description and expiration hour. This expiration selection will restrict students from registering to a session once it is expired. After filling the form, instructor can click on “Start Session” button on screen to start session. x On the same page, is user wants to use system as student, on top right corner a link is provided for Students. This link helps user to navigate between two different interface each intended for specific user group. x Once form is submitted, backend API is called to create a session in database and redirects to instructor’s view (Figure 12). 29 C 1i) 111,; 3991100209 ••• G * I\ D , = PythonIDE ForInstructors Enterbelow detai ls to startcod ing and shareyour ,deto instructm Entername Enteremail ID 261018161116 StartCoding Figure 11: Student's view once receive invite url from instructor x Above figure (Figure 11) is the starting point of the students. This screen helps students to join a coding session and start coding. x Once instructor created a session and shared invite url from their screen to all the students, students can open the invite url which opens above page with pre- populated session code. x Now student jut has to fill in name and email before submitting the form to start coding by joining the session. After button click backend API will be called to register student with specific session and generate unique ideCode for each student. x Once frontend gets response from API, it will redirect students to a IDE view for students shown in Figure 13. x Same link for Instructor is available in this page to change user role and interface. 30 C! {i) 0 ,; 3997100209 , .. 0 * . W\ D • = PythonIDE 11-1·1¥1 '''' htlp://39.97.100.209/start _axfing?code=2610 18161116 ..,I #python editor MylDE ~ pri nt ( •Hello World !n) rom D~ Roy D~ Jeff m~ Matt lJ~ Vu El~ Ang 0~ zhou" l!J~ Bha,gavll!J ~ Dummy ommm Rob ommm Test fJmm!l!I Foo fJmm!l!I Figure 12: Instructor's three column view with student list, code editor and terminal x Above figure (Figure 12) is the instructor’s view once (s)he created a coding session. This screen helps instructors to invite students, check students’ progress, code, execute, check students’ code to resolve any issue and download code written on IDE. x This screen is divided in to four parts and all the components are grouped according to proximity and usability. x Part 1 Header: In this part included components are invite url that can be shared with students for joining the session. Another stuff is “Run” button to execute program written in editor section and show output on terminal section. Last component is “Download” button to store code written in editor part to local storage for future purpose. 31 x Part 2 Student list: This part consists of all the students name and progress who joined session using invite url. First row shows number of students joined class and this row works as instructor’s IDE for their practice and demo. And all the following lines are student’s name list with progress badge. There are two badges: number of lines written by student and last execution time of each student. Each row with student name is link with students’ IDE, so by clicking on it instructor can view code written by student. x Part 3 Editor: This part is ACE based code editor with GitHub theme, and all the work done here is collaborated with a unique id and can be shared to others for teamwork. For executing or downloading, code must be present in this section. AngularJS reads this part and does the further process. x Part 4 Terminal over web: This part is terminal over the web to provide environment to all the users using GoTTY library. Once user clicks on “Run” button this part will show the executed program’s output. x Below figure (Figure 13) is the student’s view once (s)he joined a coding session. This screen helps students to write program/code, post their progress, execute and download code written on IDE. x This screen is divided in to three parts and all the components are grouped according to proximity and usability similar to instructor’s view in Figure 12. x The only difference is in this view, students cannot view other students in the class and their code to prevent copy. And extra task done by this screen is to report progress to server for progress tracking. 32 r! Gt 0 ,; 3997100.209 ••• 0 * . W\ D • = PythonIDE l- I·11I # Pythoneditor pri nt( •Hello World!•) input(•What' s your namer ) #Jeff here • def factorial(n): if n == 8: ret urn 1 • els e: ret urn n • fac torial{n • 1) .u. pri nt (factorial( S)) Figure 13: Student's view with code editor and terminal view once registered 33 CONCLUSION In conclusion, the market for online computer science courses is growing rapidly than face- to-face instruction environment due to easiness to get knowledge and to overcome some of the constraints. Especially coding boot camps are getting more and more popular nowadays to learn programming by any field’s major. On the other side, this type of course having some issues too as compare with a face-to-face version like environment availability, progress tracking, immediate feedback, the social environment of typical classroom setup. By implementing this system (a python prototype), I overcome the issue of environment by providing it over the web and issue of progress tracking and feedback by implementing collaborative IDE with live notification to instructors. This system will help instructors to track students' progress without asking them and working with them to improve the area where students are facing issue immediately by checking their code. For future work, this prototype can be extended for multiple languages such as Java, C language, C++, Unix programming, etc. Also, there are many issue s of online mode as already mentioned can be implemented on the top of this prototype feature. 34 REFERENCES [1] M. Goldman, “Role-Based Interfaces for Collaborative Software Development,” Proc.24th ACM Symp. Adjunct User Interface Software and Technology (UIST 11 Adjunct), 2011, pp. 23−26. [2] L. Eggleston, “2019 Coding Bootcamp Market Size Study,” Course Report, 01- Aug-2019. [Online]. Available: https://www.coursereport.com/reports/coding- bootcamp-market-size-research-2019. [Accessed: 10-Aug-2019]. [3] L. Murphy et al., “Active and Cooperative Learning Techniques for the Computer Science Classroom,” J. Computing in Small Colleges, vol. 18, no. 2, 2002, pp. 92−94. [4] S. Ghorashi and C. Jensen, “Integrating Collaborative and Live Coding for Distance Education,” Computer, vol. 50, no. 5, pp. 27–35, May 2017. [5] L.L. Werner, B. Hanks, C. McDowell, "Pair-Programming Helps Female Computer Science Students", J. Educational Resources, vol. 4, no. 1, 2004. [6] J. Lautamäki, A. Nieminen, J. Koskinen, T. Aho, T. Mikkonen, and M. Englund, “CoRED: browser-based Collaborative Real-time Editor for Java web applications,” Proceedings of the ACM 2012 conference on Computer Supported Cooperative Work - CSCW 12, Feb. 2012. [7] Wu, Junao, Arek Mikolajczak, and James Cheney. "TryLinks: An interactive tutorial system for a cross-tier Web programming language." arXiv preprint arXiv:1905.02033 (2019). [8] “Firepad Integration Documentation,” Firepad. [Online]. Available: https://firepad.io/docs/. [Accessed: 07-Jul-2019]. 35 [9] Yudai, “yudai/gotty,” GitHub, 13-Dec-2017. [Online]. Available: https://github.com/yudai/gotty. [Accessed: 28-Jul-2019]. [10] Ajaxorg, “ajaxorg/ace,” GitHub, 03-Dec-2016. [Online]. Available: https://github.com/ajaxorg/ace. [Accessed: 13-Dec-2019]. [11] B. Nédelec, P. Molli, and A. Mostefaoui, “CRATE: Writing Stories Together with our Browsers,” Proceedings of the 25th International Conference Companion on World Wide Web - WWW 16 Companion, pp. 231–234, Apr. 2016. [12] M. Lehenbauer, “Announcing Firepad - Our Open Source Collaborative Text Editor,” The Firebase Blog, 09-Apr-2013. [Online]. Available: https://firebase.googleblog.com/2013/04/announcing-firepad-our-open- source.html. [Accessed: 21-Aug-2019]. [13] “Operational transformation,” Wikipedia, 06-Oct-2019. [Online]. Available: https://en.wikipedia.org/wiki/Operational_transformation. [Accessed: 15-Oct- 2019]. [14] T. Jungnickel and T. Herb, “Simultaneous editing of JSON objects via operational transformation,” Proceedings of the 31st Annual ACM Symposium on Applied Computing - SAC 16, pp. 812–815, Apr. 2016. [15] “Read–eval–print loop,” Wikipedia, 30-May-2019. [Online]. Available: https://en.wikipedia.org/wiki/Read–eval–print_loop. [Accessed: 13-Sep-2019]. [16] A. Masad, “Making Repl.it Collaborative at Heart,” repl.it, 18-Sep-2019. [Online]. Available: https://repl.it/site/blog/collab. [Accessed: 20-Sep-2019]. [17] R. Sharrock, L. Angrave, and E. Hamonic, “WebLinux,” Proceedings of the Fifth Annual ACM Conference on Learning at Scale - L@S 18, Jun. 2018. 36