Markus Ruottu Tools and Technologies for Interactive Elements and SVG Animations in HTML5-based e-learning Helsinki Metropolia University of Applied Sciences Master of Engineering Information Technology Master’s Thesis 1 Apr 2016 Author Markus Ruottu Title Tools and Technologies for Interactive Elements and SVG Ani- mations in HTML5-based e-learning Number of Pages 96 pages + 1 appendices Date April 1, 2016 Degree Master of Engineering Degree Programme Information Technology Specialisation option Mobile Programming Instructor(s) Kari Salo, Principal Lecturer Eetu Tuomala, B.Eng, Senior Software Developer The research question that thesis tries to answer is: What are the best tools and technolo- gies to develop standardized activities and custom SVG animations for e-learning with HTML5 technologies taking into account the requirements and the restrictions of the mo- bile use and devices? The study tries to answer the question by dividing the studied topics into subcategories and selecting the tools and technologies best suited for each category and trying to get proof they are the most suitable choices with tests. The method to find the best tool was evaluating and scoring the tool candidates and their properties in each subcategory and comparing them against each other. The data used in the research was collected from a great number of sources, many of them in the Web. The research found tools that will benefit developing hotspots and carousel activities, and general or chart animations. Results for a character animation tool were thin. The back- ground chapter of the study describes the technologies and best practices used in a mod- ern e-learning course player. Keywords interaction, animation, activity, hot spots, carousel, chart, JavaScript, SVG, HTML5, e-learning, m-learning, responsive design, GSAP, Swiper, C3.js, qTip, player, devkit Preface As I started this study I had just moved back to HTML after being a Flash developer for almost a decade. So I basically needed to learn everything but the basics again. The technologies of Web development had developed enormously in that time. But I took the challenge assuming it would give me a crash course to catch up. However it did not end up being a crash course as it took me two and half years to finish it. The most difficult part of the study was to find all possible candidates for each spe- cific task – how to be sure that the one, best matching the requirements, is still wait- ing to be found. I appreciate that my employer, MPS Prewise, gave the necessary resources for me to finish the study, especially Eetu Tuomala and Juhani Mäkelä who I consider as my mentors. I also appreciate Kari Salo’s supportive role as my supervisor and Metropolia for granting me extra time to finish the study. Special thanks go to my girlfriend who took the cooking responsibilities on the last months as I needed all the time available to finish the research on time. In an airplane from Helsinki to New York on 5th of March, 2016, Markus Ruottu Contents Preface Abstract Table of Contents Abbreviations Glossary 1 Introduction 1 1.1 Scope of Study 1 1.2 Research Setting 2 1.3 Research Approach and Method 2 1.4 Research Design and Process 3 1.5 Research Question 4 1.6 Structure of Study 4 2 Background 5 2.1 Prewise 5 2.2 E-learning 6 2.3 Mobile Web 7 2.4 Gimlet Flash Player 8 2.5 HTML5 vs. Flash 9 2.6 Gimlet HTML5 Player 10 2.7 Activities 10 2.8 Animations 11 2.8.1 Informative 12 2.8.2 Decorative 14 2.9 Client-side Requirements 15 2.10 HTML5 16 2.11 Best Practices 16 2.12 Responsive Web Design (RWD) 17 2.12.1 Responsive Layouts 19 2.12.2 Mobile First 21 2.12.3 Responsive Images 23 2.12.4 Problems 24 2.12.5 Future 25 2.13 SASS 25 2.14 MVVM and Knockout 26 2.15 Asynchronous Module Definition – AMD 28 2.16 Other Tools 29 2.17 Testing 30 2.18 SVG 30 2.19 SVG Tools 31 2.20 General HTML5 Supported Animation Technologies 33 2.21 Activity Tools 36 3 Method and Material 37 3.1 Methods 38 3.2 Process 39 3.3 Data 40 4 Tasks 42 4.1 Activities 42 4.2 Hotspots 43 4.3 Carousel 45 4.3.1 Requirements 47 4.3.2 Risks 48 4.3.3 Tools 49 4.4 Animations 51 4.5 General Animation 52 4.6 Charts Animation 54 4.7 Character Animation 59 5 Results and Analysis 61 5.1 Hotspots 61 5.2 Carousel 64 5.3 General Animation 67 5.4 Chart Animation 69 5.5 Character Animation 73 5.6 Discussion and Analysis 75 6 Summary 79 References 81 Appendix 1. GHP client requirements Abbreviations CSS Cascading Style Sheets CMS Content Management System DOM Document Object Model HTML5 Hypertext Markup Language (version 5) GFP Gimlet Flash Player GHP Gimlet HTML5 Player GSAP GreenSock Animation Platform IDE Integrated Development Environment IE Internet Explorer JS JavaScript LMS Learning Management System MVVM Model View ViewModel PC Page Component RWD Responsive Web Design SVG Standard Vector Graphics UI User Interface URL Uniform Resource Locator W3C World Wide Web Consortium WYSIWYG What You See Is What You Get Glossary Activity A term used for the standardized interactive elements in Gimlet HTML5 Player Course Player A customized course player based on Gimlet HTML5 Player DevKit Devkit Development kit Gimlet Prewise’s LMS/CMS software product family Page Component Page Component is a standardized activity or other feature used in Prewise’s e-learning courses Prewise Finland’s leading e-learning company Tool This term is used in a broad meaning when referring technologies, applications or JavaScript libraries that can be used as a tool to resolve a problem 1 1 Introduction The key concept of this study is using thorough methodology to find the best available tools and technologies for specific purposes. First, study the subjects in general. Then define the requirements based on current knowledge. Then rate and evaluate the tools based on their properties and features against the requirements. Last make comparisons, qualify the best and test them in practice. The result of the study should provide the best tools for building specific activity types and animation types for e-learning courses. 1.1 Scope of Study This thesis studies tools and techniques used to create interactive elements and animations used in e-learning. Interactive elements will be later referred to as activities for clarity. These tools and techniques can be HTML5 and CSS3 techniques and design patterns, Ja- vaScript libraries and HTML5 Animation IDEs. These were selected as the research target because choosing and using the right tools, developers can save a lot of time and make projects more profitable. This research also takes account of responsive web design and best practices to utilize it, because it is an essential requirement for the results of the pro- ject. I decided to narrow the scope of the studied animation tools to SVG tools, because based in my experience; it is best suited for modern Web. I could not find any studies related directly to more than one of my subjects at a time. So having the subjects together makes this study unique in the field. Other studies on the top- ics were on a more general level, from a different perspective or only about one tool or technology. This thesis does not cover: • Tools suitable for other page elements (or course elements) or exercises. • Usability issues or user experience from the end users perspective with an excep- tion of issues related to responsive design • Issues related to customization of the activities or animations • All tools and technologies related to HTML5 interactions and animations – only the specialized tools suited for each specific task in the thesis. • Linux or Mac specific tools 2 E-learning in general is not the main subject of this study, but a framework where it hap- pens. It will be touched on a general level and in the areas where it relates to the study top- ics. 1.2 Research Setting This thesis was done for MPS Prewise Oy (later just Prewise). Prewise is one if the leading e-learning companies in Finland. Until 2013, Prewise used Adobe Flash as the client-side technology for e-learning courses. In 2007 Prewise developed a development kit (devkit) to standardize common features and operation of the courses and to have a “clean” base to build the new courses on. The main reason was to minimize the customization work for each e-learning course. Web has been adapting fast for the increasing use with mobile devices. E-learning also follows this track and so does Prewise. Flash is not supported in mobile browsers. There- fore a new HTML5 based devkit was developed during 2013 and 2014 to answer to the growing need for mobile support. At the beginning Gimlet HTML5 Player (GHP) was very limited in features compared to its predecessor, Gimlet Flash Player (GFP). It still is, but not as much. It was decided that the development of GFP would end, and all efforts are put to the HTML5 devkit and it should eventually have at least the same features as GFP. I was selected to do this research because I led the development GFP and I have the best knowledge of the standardized activities and animations used in Prewise’s Flash-based courses. I also wanted and needed to learn HTML5 a lot better. Doing the research for the thesis was an effective way to accomplish that.