A Web-Based Code-Editor For Use in Programming Courses Christian Rasmussen David Åse Master of Science in Computer Science Submission date: September 2014 Supervisor: Hallvard Trætteberg, IDI Norwegian University of Science and Technology Department of Computer and Information Science Abstract In this thesis a code-editor was implemented as a part of a bigger web-based system for solving programming assignments in the course TDT4100. The editor was created in order to allow the students of the class to focus solely on writing code, and not on setting up the surrounding framework (installing programming languages and IDEs, setting up projects, etc.). The editor supports syntax highlighting, error checking, code completion, multiples classes, and running of tests, along with all of the more basic editor functionality such as block indentation, bracket matching, line-numbers, etc. The editor is embedded into each problem contained in an assignments, which allows students to solve basic and intermediate programming challenges directly in their web-browser, without the need for any setup. The system also utilizes several gamification elements, as described in the thesis’ preliminary study, “Gamification of Assignment Systems” (Åse, 2014). Responsive web design principles were used while implementing the system, which allows students to check their ranks and scores from any device (cellphone, tablet, laptop and similar). This was done in order to foster competition between the students, which will in turn increase motivation even further. The results from the experiments performed indicate that the editor is well suited for use on programming assignments in courses such as TDT4100, TDT4110 and TDT4120, or any other course which has assignments that can be tested programmatically, as the editor has a low response time even for very large programs (64KB). However, the editor is not suited for courses such as TDT4180, or other GUI-programming courses, since the he editor is currently limited to displaying console output and test-results. Sammendrag I løpet av denne masteroppgaven ble det implementert en kodeeditor som en del av et større web-basert system for å løse programmeringsøvinger i faget TDT4100. Dette ble gjort for å la studentene få fokusere på å skrive kode, og ikke på rammene rundt (det å installere programmeringsspråk, konfigurere utviklingsverktøy og operativsystem, osv.). Editoren støtter syntax highlighting, error checking, code completion, flere klasser og kjøring av tester/kode, i tillegg til mer grunnleggende funksjonalitet som blokkinnrykk, bracket matching, linjenummer, osv. Editoren er tilgjengelig i hver oppgave i en øving, hvilket gjør det mulig for studenter å løse grunnleggende og middels avanserte programmeringsøvinger direkte i nettleseren, uten å måtte tenke noe på oppsett. Systemet benytter seg også av flere spillifiseringselementer, som beskrevet i oppgavens forstudium “Gamification of Assignment Systems” (Åse, 2014). Prinsipper for responsivt design ble brukt under implementasjonen av systemet, noe som gjør det mulig for studenter å holde seg oppdatert fra alle typer enheter (mobil, nettbrett, PC o.l.). Dette ble gjort for å tenne konkurranseinstinktet, som igjen fører til høyre motivasjon. Testresultatene viser at editoren er godt egnet for bruk på programmeringsøvinger i fag som TDT4100, TDT4110 og TDT4200, samt andre fag med øvinger som kan testes programmatisk, siden editoren har lav responstid selv for store programmer (64KB). Editoren er derimot ikke like godt egnet for øvinger i fag som TDT4180, eller andre GUI-programmeringsfag, siden den på nåværende tidspunkt kun kan vise konsollutskrift og testresultater. Preface This is the project report for the subject “TDT4900 – Master Thesis”, written summer 2014. The project was conducted by Christian Rasmussen and David Åse, who are, at the time of writing, studying Computer Science at the Norwegian University of Science and Technology (NTNU). The project was completed under the supervision of Associate Professor Hallvard Trætteberg. To get the most out of this report, the reader should have a basic understanding of computer science, and be familiar with Eclipse and its ecosystem. Nomenclature List AJAX Asynchronous JavaScript and XML API Application Programming Interface BPMN Business Process Modeling Notation CORBA Common Object Request Broker Architecture CPU Central Processing Unit CSS Cascading Style Sheets DAO Data Access Object DSL Domain Specific Language DTO Data Transfer Object ECJ Eclipse Compiler for Java EMF Eclipse Modeling Framework GOMS Goals, Operators, Methods, and Selection rules GUI Graphical User Interface HQL Hibernate Query Language HTML HyperText Markup Language HTTP Hypertext Transfer Protocol IDE Integrated Development Environment IDL Interface Definition Language ISO International Organization for Standardization JAR Java Archive JDK Java Development Kit JPEG Joint Photographic Experts Group JSON JavaScript Object Notation JSP JavaServer Pages JVM Java Virtual Machine MVC Model-View-Controller OCL Object Constraint Language ORB Object Request Broker ORM Object-Relational Mapping OSGi Open Service Gateway initiative PC Personal Computer PNG Portable Network Graphics RAM Random Access Memory REST Representational state transfer RMI Remote Method Invocation RPC Remote Procedure Call SQL Structured Query Language SSE Server-Sent Events SSL Secure Sockets Layer SUS System Usability Scale TA Teaching Assistant TCP Transmission Control Protocol UML Unified Modeling Language URL Uniform Resource Locator UUID Universally Unique Identifier VM Virtual Machine XML Extensible Markup Language YAML YAML Ain't Markup Language Table of Contents 1 - Introduction ................................................................................................................................................................. 1 1.1 Background and motivation ............................................................................................................................ 1 1.1.1 The pre-study ................................................................................................................................................ 1 1.1.2 Thesis scope ................................................................................................................................................... 2 1.2 Goals .......................................................................................................................................................................... 3 1.3 Research approach .............................................................................................................................................. 3 1.4 Thesis structure .................................................................................................................................................... 4 2 - Background theory .................................................................................................................................................... 5 2.1 Process efficiency (usability) .......................................................................................................................... 5 2.1.1 GOMS ................................................................................................................................................................. 5 2.1.2 BPMN ................................................................................................................................................................ 7 2.2 IDE functionality ................................................................................................................................................... 8 2.2.1 Syntax highlighting ...................................................................................................................................... 8 2.2.2 Error checking ............................................................................................................................................... 8 2.2.3 Code completion ........................................................................................................................................... 9 2.2.4 IDE architecture ........................................................................................................................................ 10 2.3 Editor performance .......................................................................................................................................... 13 2.3.1 Response time ............................................................................................................................................ 13 2.3.2 Scalability ..................................................................................................................................................... 14 2.4 Responsive design ............................................................................................................................................. 14 2.5 Gamification......................................................................................................................................................... 16 2.6 State of the art .................................................................................................................................................... 16 2.6.1 Educational systems ...............................................................................................................................