International Journal of Interactive Mobile Technologies (iJIM) – eISSN: 1865-7923 – Vol 17 No 03 (2023) Paper—Development of Gamification-Based E-Learning on Web Design Topic Development of Gamification-Based E-Learning on Web Design Topic https://doi.org/10.3991/ijim.v17i03.36957 Fajar Pradana1, Punaji Setyosari1(), Saida Ulfa1, Tsukasa Hirashima2 1 Universitas Negeri Malang, Malang, Indonesia 2 Hiroshima University, Higashihiroshima, Japan punaji.setyosari.fip@um.ac.id Abstract—Learning methods have given ways of those aided by technological advances. The approach known as Student-Centered Learning (SCL) is the foundation of e-learning. Furthermore, SCL demands students to be self-motivated to complete courses and engage with the offered learning content. Programming is one of the most important subjects to study independently and with the aid of an instructor. The need for graduates with programming and computational skills in the field of web design continues to receive widespread attention from the industry. However, problems such as low student engagement are often encountered in learning about programming concepts and syntax. Gamification is an instructional approach to facilitate learning and boost motivation through game elements, mechanics, and thinking. Therefore, this research aims to discuss the development of Gamification-based e-learning to increase student engagement and motivation, especially in HTML and CSS web design. This system was tested using unit, system, and user testing. In user testing, this study involved 264 students from computer backgrounds in validating the system. The results show that the average level of user satisfaction is 4.3 out of a scale of 5.0, indicating that the proposed system gets a good response from users so that the system is ready to be used and integrated into learning. Keywords—gamification, SCL, e-learning, game, engagement, motivation 1 Introduction Learning methods have given ways of those aided by technological advances. Technology usage, such as websites, social media, and mobile devices, expands and impacts the university’s educational process [1]. Computer-based technology is proven to increase collaboration in teaching and training [2]. Furthermore, internet-based technology has become an essential to support daily activities [3], and networks enable everyone to visit the website with ease. E-learning is an approach that utilizes website- based resources to provide various methods to increase efficiency in conveying information [4]. The frameworks and internet-based applications are becoming iJIM ‒ Vol. 17, No. 03, 2023 21 https://doi.org/10.3991/ijim.v17i03.36957 mailto:punaji.setyosari.fip@um.ac.id Paper—Development of Gamification-Based E-Learning on Web Design Topic increasingly popular, allowing users to access information directly through internet media [5]. E-learning has become a topic often discussed in recent years [6] and has become the most crucial part of the learning process in the present and future [7]. Moreover, it refers to a process centered on the students called Student-Centered Learning (SCL) [8]. The application of this model emphasizes mastery of activities that allow students to practice their problem-solving capacity. This is introduced as a fundamental part of the learning experience. Furthermore, universities seek to achieve the goals and effects of the learning process, such as high levels of student satisfaction, motivation, effectiveness, and efficiency. The main goal is to invite students to be engaged and has a high motivation in class [9]. Therefore, when incentive programs are used, students will be more involved in their studies [10]. Self-directed learning model emphazises and focuses on a student. It is increasingly relevant in to today’s modern education. The trend of digitization is always supported by information technology, especially in data science, programming, and web design [11], [12]. Lectures in these fields can improve skills and relate to students’ needs and support career advancement [13]. However, self-directed learning requires students who can motivate themselves to join or accompany courses and lectures and be involved in the learning material presented. Self-directed learning enables students to engage in their learning. Engagement, therefore is as a determinant of learning success. Despite the research discussing this phenomenon in the classroom [14], [15], there are still difficulties and obstacles to get students engaged in teaching and learning activities. Due to student engagement, it still needs to be improved. Hence , achieving the required level of engagement in the goal of high learning potential [16] is challenging in line with programming topics. In software engineering education, programming is one of the critical materials to be studied independently and with the help of class instructors. It requires skills in critical thinking, problem-solving, computational logic, and system design [16]. The need for graduates with good programming and computational skills continues to receive widespread attention from the industry [17]. Since the demand for programming competencies is increasing, graduates are expected to possess knowledge in engineering majors or study programs [16]. However, students often need help learning programming concepts and syntax, such as low engagement [16]. The average programming ability score of first-year students is 23 out of a scale of 110 [19], and the attrition rate is only 30% [18], indicating difficulty in understanding. This could be due to low mathematical abilities, uneven problem- solving, and lack of practice writing program code [16]. Programming languages require students to practice more often and write the program code continuously until the advanced level [19]. Specifically, programmers have several roles, such as backend, front-end, and mobile developers [20]. Front-end developer is one of the most needed roles in the industry [20]. HyperText Markup Language (HTML) and Cascading Style Sheets (CSS) are core technologies to be mastered. Meanwhile, HTML and CSS are the underlying core technologies in website creation. Web Developer and design job prospects are projected to increase by 8% in 2019-2029, faster than the average for all professions. However, there is a phenomenon, even though programming is an essential 22 http://www.i-jim.org Paper—Development of Gamification-Based E-Learning on Web Design Topic competency that computer graduates should possess, many students avoid and tend to be unmotivated in this course. A random survey of entry-level students at the Faculty of Computer Science, Universitas Brawijaya, shows that 76% of 100 students are interested in learning course material other than basic programming [19]. Therefore, students’ motivation in programming and its derivatives must be improved. Increased motivation will impact students’ level of engagement and understanding to achieve their potential [21]. Gamification is the latest method to increase productivity in blended and dynamic learning. Integrating gamification into the curriculum can increase classroom engagement in the learning process [22]. Its growing popularity has positively influenced behavioral and cognitive functions by increasing user motivation and engagement through a game-like experience [23]. There still need to be studies that discuss the concept of gamification and integration in programming topics. Furthermore, few gamification-based learning platforms can be applied to specific fields such as web programming. Research is conducted using gamification to examine the effect of student engagement in computer classes called the FEEPER learning platform to train coding skills in Java Programming [24]. The results of this study show that the application of gamification can significantly improve students' accuracy in answering questions and increase engagement for introverted students. Meanwhile, several other studies use typical gamification-based applications, such as Kahoot and Quizizz [25], Ribbon hero [26], and gamified plugin integration on Moodle [22], [27]. The study’s findings quantitatively indicate that gamification positively influences academic achievement, motivation, and student engagement in courses. Engagement is an essential element in learning, especially in programming. Creating innovations in the form of fun and intuitive learning media is essential. Combining the concepts of playing games and playing is interesting, so gamification will be applied to learning media. This study will develop a Gamification-based learning platform in Web Design called HSS learning, an HTML and CSS learning acronym. HSS Learning is an interactive learning media used in Web Design topics and material on HTML and CSS. This platform utilizes various game elements such as levels, challenges, experience points, leaderboards, hints, live coding, and courses. HSS Learning is expected to increase student involvement and motivation in web programming. 2 Literature review 2.1 Gamification in education In the digitalization era, there has been a shift to learning methods that are adaptive and not centrally distributed [28]. Adaptive learning is learning by adjusting the conditions and needs of the student's environment so that there is mastery of attitudes and skills. Studies conducted by [28] propose an adaptive framework that allows educators to manage learning content for serious games, and students can customize it according to their needs. Several other studies apply digital comics and augmented reality to support learning [29], [30]. The study reports that innovative learning media iJIM ‒ Vol. 17, No. 03, 2023 23 Paper—Development of Gamification-Based E-Learning on Web Design Topic can provide new experiences to students to increase interest in subjects that tend to be complicated and tedious for students (for example, Math and chemistry courses). Another innovation that is possible to implement is gamification. The use of games in education is not new, a study by [31] reported on applying a gamification environment in science education. Gamification is not like playing games; gamification uses game elements that are then applied to non-game contexts. The word gamification appeared in 2002, was popularized by Nick Pelling, and was documented in 2008. Furthermore, it is defined as applying the way of thinking and mechanics of a game to increase user engagement and solve a problem [32]. Game techniques make an activity more exciting and provoke participation [33], equipped with elements in non-game contexts [33]. Furthermore, no provisions govern the set of components in its implementation. Gamification is an instructional approach to facilitate learning and boost motivation through game elements, mechanics, and thinking. It has increased students’ motivation to work on more complex tasks and produce better-quality artifacts [34] and is viewed as using game elements in non-game contexts [35]. In its concept, student do not play games from beginning to end or conduct game-based learning. However, they participate in education where there are applications of elements such as points, challenges, receiving badges after completing a task, and viewing the leaderboard. The main idea is to apply elements commonly found in mobile games into an instructional environment to motivate and increase students’ engagement in learning content. 2.2 E-learning Distance learning is developing rapidly after the COVID-19 pandemic. Distance learning is a learning model that reduces face-to-face meetings between teachers and students. In the distance learning model, the learning process at all levels of education is required to use digital tools [36] to support the learning process. Studies conducted by [36] report that tools such as Photodentro, WordWall, Quiziiz, Google Docs, and Zoom are used massively at the preschool education level. E-learning is a term often used to describe electronic-based learning processes. E-learning uses electronic-based technology and computer networks as supporting media [37]. It can be implemented in a web-based information system with the growing computer network. Meanwhile, the presentation of web-based e-learning can be more interactive. Users can carry out the process anywhere and anytime by using e-learning [7]. The advantages include reaching a wider geographic area, ease of accessing information, and the cost of implementing effective and efficient technology [38]. Learning in e-learning is divided into synchronous and asynchronous [39]. These approaches can be applied by adjusting the students’ condition and objectives. The synchronous method is conducted online but still requires the presence of teachers and students simultaneously. It is relatively cheap and easy but has drawbacks, such as the students cannot be flexible. Meanwhile, e-learning in an asynchronous method is carried out without being bound by time. There are several models: self-study, video/audiotape, computer-based training, social learning, simulation, and 24 http://www.i-jim.org Paper—Development of Gamification-Based E-Learning on Web Design Topic gamification. This study develops gamification-based e-learning to support web design courses, especially HTML CSS, for undergraduate students. 2.3 Web design course Web design is a governance arrangement for the content displayed on a website to clients or recipients of information through the world wide web. Web design is an essential part of developing a website because it will be said to be of quality when not only highlighting the functionality, artistic and aesthetic side, and user interface. In its manufacture, designing a website uses a markup language, namely HTML, which regulates the structure. Stylesheet language is CSS used to set the appearance of components. Meanwhile, HTML and CSS are a core technology in website creation. HTML consists of several elements arranged like a directory. The main elements are opening tags, content, and closing tags. Currently, the number of tags used is 111 tags, and CSS regulates how an HTML element is displayed on the user’s device screen. HTML and CSS are one of the programming languages studied at the Faculty of Computer Science (FILKOM). In traditional learning, students practice is consistent with instructions/demos from the lecturer, watching video tutorials, reading articles, and studying in class during practicum. These activities often leave students in a passive learning mode, which tends to receive material without engagement and willingness to practice regularly. Using traditional learning models in courses can cause students to feel bored, so it is necessary to apply dynamic and interactive learning methods [30]. The e-learning that implements gamification can increase student engagement and motivation. The choice of gamification, both in terms of the correct game elements and the use of attractive visuals to represent the output of HTML CSS, can help increase student engagement. The use of visuals in the form of images in the learning process is fundamental to achieving learning objectives for specific courses [29] 2.4 Application testing Software testing is a procedure, or a series of processes, designed to ensure computer code performs as designed. Software should be predictable and consistent without surprising users [40]. In this research, three stages of testing were carried out, namely unit, validation, and user testing, using the End-User Computing Satisfaction (EUCS) model. 3 Research methods 3.1 Research design This study implied research and development model. It adapted the Waterfall Model, as shown in Figure 1. This model is carried out systematically, starting from the system requirements stage and moving on to the analysis, design, development, and testing/verification stages. In this model, the system development process starts with iJIM ‒ Vol. 17, No. 03, 2023 25 Paper—Development of Gamification-Based E-Learning on Web Design Topic requirements analysis. In this phase, mapping is performed from universal principles on applying gamification in education to system needs. The determination of these situational principles is adapted to the context of learning in the Web Design field while considering the students’ characteristics. The system requirements modeling was carried out using use case diagrams. The modeling results are a basis for system design, divided into architectural, component, and interface design. This design is the basis for the development/coding process. In the final phase, the testing process is carried out, such as development and user testing. Fig. 1. Research model 3.2 Participants Participants or subjects involved 4th and 6th students in Basic Information System Development, User Interface Design Basics, and Information System Analysis and Design. The total number of participants consisted of 264 students. They have various abilities in the field of web design, especially HTML and CSS, including high, medium, and low skills. However, the participants are currently taking introductory courses related to their abilities. This research involves a large group of students to examine the satisfaction of using a gamification-based platform. During observation, the students used the HSS Learning platform for five weeks in a hybrid format. For five weeks, the subject explores features and completes the exercises and challenges in HSS Learning.. 26 http://www.i-jim.org Paper—Development of Gamification-Based E-Learning on Web Design Topic 3.3 Data collection In week 5, students fill out the 5-Likert scale End-User Computing Satisfaction (EUCS) Instrument as a model to assess satisfaction with a system. EUCS was formulated by [41] with five aspects: content, format, ease of use, timeliness, and accuracy. Similarly, [41] has compiled 12 item questions for EUCS research, and they were adopted and used as a guideline for making questionnaires [42]. Each question item is translated into Bahasa to make it easier for participants to understand the context. The sample from the EUCS Questioner Items used in this study is shown in Table 1. Table 1. Sample of items of EUCS questionnaire Variable Question ID Question Item Accuracy A2 Do you be satisfied with the accuracy of the system? Content C1 Does the system produce the information you need? Easy of Use C4 Does the system produce enough information? Format F1 Is the output displayed in a useful format? Timeliness T2 Does the system produce up-to-date information? 3.4 Validity and reliability Before analyzing the student response data, the internal consistency of the questionnaire items was validated by calculating using Cronbach's Alpha to describe their reliability. The summary of the analysis results for each questionnaire item is presented in Table 2. The results indicate that the alpha value for each variable is in the range of 0.7 to 0.8, meaning good reliability. Alpha calculation results imply that each variable's response to the set of questions is reliable, so the response data can be analyzed further to be evaluated. Table 2. EUCS questionnaire Cronbach’s Alpha Variable Cronbach’s Alpha Alpha Cronbach Result Accuracy 0.838 0.60 Reliable Content 0.829 0.60 Reliable Ease of Use 0.779 0.60 Reliable Format 0.769 0.60 Reliable Timeliness 0.731 0.60 Reliable 3.5 Data analysis This research obtained quantitative data through validation sheets and student questionnaires, and the analysis was performed using descriptive statistics. Meanwhile, qualitative data in comments, student suggestions, and work were used for discussion in e-module revision. The instrument uses a Likert scale to measure content, format, iJIM ‒ Vol. 17, No. 03, 2023 27 Paper—Development of Gamification-Based E-Learning on Web Design Topic ease of use, timeliness, and accuracy. Table 3 shows a table of categories and scores related to each category. Table 3. Satisfaction level Level Score (0-5) Satisfaction Level 1 0-1.5 Very Dissatisfied 2 1.6-2.5 Not Satisfied 3 2.6-3.0 Neutral 4 3.1-3.5 Satisfied 5 3.6-4.0 Very Strong 4 Results and discussion 4.1 Requirement analysis The development of gamification-based E-learning creates a web-based system to support HTML and CSS learning. The system was developed to increase student engagement and motivation in programming courses. Meanwhile, programming material can be understood through text, images, and interactive media provided. Students can also complete the existing challenges, and the material provided only accommodates beginners. Furthermore, there are two actors in this system, namely, the guest and the user. The guest is an actor that the system has not authenticated but can access the system’s main features. The user is an actor authenticated to access all the features. The determination of the element refers to the three universal principles described in the previous chapter, as in Table 4. Table 4. Universal principle Universal Principle Situational principle Implementation of the system (gamification elements) Engagement Challenge Challenge is useful feature. The actor will be given a target as an image to be traced using HTML and CSS code. Space Retrieval Practice is a useful feature to train actors to apply the concepts that have been learned in code form by following the instructions given, Actors will get immediate feedback. There is help (hints) when players find it challenging to work on. Character Each player has an avatar that the player can customize at any time. Retrieval Practice Players can access learning content, re-listen, and retrain the material learned through interactive playgrounds and modules. Autonomy & Safe Environment Minimal Control Players have autonomy and are in safe conditions for learning. However, because HTML CSS is a material completed sequentially and the player is still at the beginner level, the system will limit the player’s choice to several material options. Progression Earning Point The system can give experience points to players after completing training. Earning Achievement The system provides a list of available badges, their level, how to obtain the badge, and the number of users. 28 http://www.i-jim.org Paper—Development of Gamification-Based E-Learning on Web Design Topic The game elements are applied to the system design based on the mapping. Use case diagrams can explain the relationships between actors, such as generalization, functions available on the system, and conducted processes. The use case diagram can be seen in Figure 2. Fig. 2. Use case diagram 4.2 Design The design is divided into three stages : architecture, components, and interface. These stages refer to the needs analysis results, and Figure 3 shows the architectural design of HSS Learning. The system is based on a client-server, and the interface was developed using vue.js and Tailwind CSS. Users can access gamification features and elements through the interface on the client side. Furthermore, the editor used to conduct live coding utilizes the codemirror library. CodeMirror is a code editor component for the web to implement text input fields with support for many editing features and a complete programming interface. Live coding allows students to practice coding and conduct exercises. Students can easily simulate program code interactively by taking advantage of the feature. Furthermore, they can get instant feedback regarding error messages, and the assessment results of the cases worked. iJIM ‒ Vol. 17, No. 03, 2023 29 Paper—Development of Gamification-Based E-Learning on Web Design Topic Fig. 3. HSS learning architecture model On the server side, the modules manage learning materials, including exercise and challenge modules. Auto-grading module is used to carry out an automatic assessment process of each activity by students. The knowledge-based system handles predefined test cases for the “exercise” and “challenge” features. In the challenge feature, the test case uses the Pixelmatch library to examine the pixel suitability of the output images. Meanwhile, the exercise test case feature is built using an XML-based interface known as the Document Object Model (DOM). The converter module will convert the automatic assessment into gamified elements and then be managed as log data. The design of the components in Figure 4 describes the algorithm of a particular process in HSS Learning and the logical flow of a process. To explain the structure of components in HSS Learning, Sequence and Class Diagrams are used. A sequence diagram illustrates the objects in the system and the interactions based on time. Meanwhile, a class diagram describes the relationship between objects. 30 http://www.i-jim.org Paper—Development of Gamification-Based E-Learning on Web Design Topic Fig. 4. Sequence diagram The sequence diagram of the function performing this challenge depicts the interaction while completing the challenge. At the beginning of the process, the system shows the target image that the actor should imitate in the provided code editor. After coding, the actor presses the submit button, and the system uses the check similarity method to check the violation due to the created code. For example, an actor uses an HTML image tag containing an image that matches the target. Therefore, the system can show a toast containing the violation committed. It can convert the results of the Actor code in the iframe preview into an image which is then compared with the given Target when no violations are found. iJIM ‒ Vol. 17, No. 03, 2023 31 Paper—Development of Gamification-Based E-Learning on Web Design Topic Figure 5 shows the Learning Journey page interface with a list of available materials, exercises, and learning progress. This page also has a search feature, and the material whose practice has all been completed will have a distinguishing mark. Fig. 5. Interface design The Exercise page interface displays the instructions to follow, the code editor to complete the exercise, and also the rendering of the typed code. There is a hint button to determine the test cases used in the exercise. The exercise interface design can be seen in Figure 5. 4.3 Implementation The subsequent step in developing HSS Learning is implementation, which is conducted based on architectural, component, database, and interface design. HSS Learning is implemented using the PHP and Javascript programming languages. The development process uses the Laravel framework with the MVC concept on the server side. The Vue framework creates a dynamic user interface on the client side, and the Tailwind framework makes it easier to style CSS for HTML markup. Meanwhile, the system refers to needs analysis, mapping of gamification elements, and design results. The software specifications used are shown in Table 5. Table 5. Software specification Component Names Specifications Operating System Ubuntu 20.04.2 LTS x86_64 Programming Language PHP, JavaScript Programming Framework Laravel, Vue.js, Tailwind Database Server MySQL Code Editor Visual Studio Code Design Editor GitMind, ERDPlus, Figma, Navicat Data Modeler Browser Chrome, Mozilla Firefox The implementation results of the previous interface design are explained in the interface. Figure 6 shows a sample interface for e-learning gamification HTML CSS. n our implementation, we implement game elements such as points, leaderboards, 32 http://www.i-jim.org Paper—Development of Gamification-Based E-Learning on Web Design Topic avatars, badges, and playgrounds. The game playground element was extended to provide an environment to try out the lines of code being learned. Programming learning is unique in that students must often do trial and error as often as possible to get an advanced level. Fig. 6. UI implementation 4.4 Testing This research validated the platform using Unit, System, and User testing. The strategy began with unit testing through a base path that will model the pseudocode as a flowgraph. Unit tests are performed to determine system complexity and independent paths. The second test ensures that the system’s functional requirements run as expected using the black box testing method. The final test is user testing on groups of students to provide content, format, ease of use, timeliness, and accuracy. The results using the unit testing method are shown in Table 6. The tests were carried out in three basic modules: exercise, auto-grading, and leaderboard. The three ways are taken randomly from the methods related to the gamification of elements. The test results report that the system has passed the test cases, so it can be said that the system has no weaknesses and can be predicted for its use by students [40]. iJIM ‒ Vol. 17, No. 03, 2023 33 Paper—Development of Gamification-Based E-Learning on Web Design Topic Table 6. Unit testing Method R N E P VG Status Take exercise 4 9 10 2 6 Valid Display leaderboard 3 9 10 3 5 Valid Auto grading 3 6 7 3 5 Valid The results can be seen in Table 7 using black box testing techniques. Validation is carried out to ensure that all functional requirements are as expected. The system tested display exercise, counting experience points, and progression. Meanwhile, user testing is performed by distributing questionnaires to 264 students. The classroom was explored for five weeks to complete exercises and challenges through HSS Learning. Table 8 shows user satisfaction results with variable question instruments presented in descriptive statistics. These results are similar to a study conducted previously by [41] user satisfaction above 4.00 indicates that the system is ready to get a good response from users. The system is ready to be used and integrated into learning. Table 7. System testing Method Expected result Status Display exercise The system can show exercises in HTML and CSS groups. Each topic provides exercise groups based on the difficulty level, namely basic, intermediate, and advanced. Valid Count Experience Point The system can calculate experience points based on the level of difficulty being worked on. Valid Display Progression The system can calculate the progress of the user’s work in a percentage format. Valid Table 8. User satisfaction testing Variable N Min Max Mean Std Dev Level Predicate Accuracy 0.838 2 5 4.17 0.627 5 Very Strong Content 0.829 1 5 4.22 0.645 5 Very Strong Ease of Use 0.779 2 5 4.48 0.646 5 Very Strong Format 0.669 1 5 4.32 0.502 5 Very Strong Timeliness 0.731 2 5 4.31 0.505 5 Very Strong 5 Conclusion Learning in the programming field has unique and different characteristics compared to others. students are expected to familiarize themselves with the programming language. In web design, mastering HTML and CSS is a critical skill. Students’ engagement and high motivation are determining factors for learning success. High engagement and motivation can stimulate them to practice in and outside the classroom. Innovations in learning media are needed to increase interactivity, and the objective is to develop a Gamification-based learning platform in web design. The elements applied 34 http://www.i-jim.org Paper—Development of Gamification-Based E-Learning on Web Design Topic are point, experience point, leaderboard, badge, avatar, progress, and challenges. Learning in the field of HTML and CSS is included as a case study. The SDLC Waterfall approach method is used in system development. This system is validated using three testing methods: unit, system, and user. The research developed a gamification-based e-learning platform that can increase student motivation and engagement. Students will be more interested in and enjoy learning web design topics using this platform. HSS Learning is expected to support the learning model based on student center learning mentioned at the beginning of the introduction; SCL requires students to practice independently often and not be centralized to the teacher. With game elements such as points and leaderboards where there is an element of social influence, there is a possibility that students can be provoked to learn because of the power of other students. This research is in the early stages of development and needs much improvement. Some inputs to be considered include other gamification elements such as social media, interaction with other users, and collaborative learning. In the future, it can be developed into learning analytics to examine user characteristics when accessing the system. Moreover, user logs and valuable expressions can be considered for this purpose. In addition, testing related to student’s perceptions of the application of technology in gamification-based learning using acceptance models such as TAM and UTAUT also be done before the system is operated. 6 References [1] A. N. Saleem, N. M. Noori, and F. Ozdamli, “Gamification Applications in E-learning: A Literature Review,” Technology, Knowledge and Learning, vol. 27, no. 1, pp. 139–159, 2022. https://doi.org/10.1007/s10758-020-09487-x [2] M. Urh, G. Vukovic, E. Jereb, and R. Pintar, “The Model for Introduction of Gamification into E-learning in Higher Education,” Procedia Soc Behav Sci, vol. 197, no. February, pp. 388–397, 2015. https://doi.org/10.1016/j.sbspro.2015.07.154 [3] H. Uzunboylu and D. Karagözlü, “The Emerging Trend of the Flipped Classroom: A Content Analysis of Published Articles between 2010 and 2015,” Revista de Educación a Distancia (RED), no. 54, 2017. https://doi.org/10.6018/red/54/4 [4] L. Aloia and A. A. Vaporciyan, “E-Learning Trends and How to Apply Them to Thoracic Surgery Education,” Thorac Surg Clin, vol. 29, no. 3, pp. 285–290, 2019. https://doi.org/ 10.1016/j.thorsurg.2019.03.006 [5] H. H. Batubara, M. S. Sumantri, and A. Marini, “Developing an Android-Based E-Textbook to Improve Learning Media Course Outcomes,” International Journal of Interactive Mobile Technologies (iJIM), vol. 16, no. 17, pp. 4–19, Sep. 2022. https://doi.org/10.3991/ijim. v16i17.33137 [6] D. Karagozlu, “Determination of the impact of augmented reality application on the success and problem-solving skills of students,” Qual Quant, vol. 52, no. 5, pp. 2393–2402, 2018. https://doi.org/10.1007/s11135-017-0674-5 [7] Samani Ahmed, “The Role of e-Learning to Face the Challenges of the Century,” Proceedings - 2013 4th International Conference on e-Learning Best Practices in Management, Design and Development of e-Courses: Standards of Excellence and Creativity, ECONF 2013, p. 14, 2013. https://doi.org/10.1109/ECONF.2013.6 iJIM ‒ Vol. 17, No. 03, 2023 35 https://doi.org/10.1007/s10758-020-09487-x https://doi.org/10.1016/j.sbspro.2015.07.154 https://doi.org/10.6018/red/54/4 https://doi.org/10.1016/j.thorsurg.2019.03.006 https://doi.org/10.1016/j.thorsurg.2019.03.006 https://doi.org/10.3991/ijim.v16i17.33137 https://doi.org/10.3991/ijim.v16i17.33137 https://doi.org/10.1007/s11135-017-0674-5 https://doi.org/10.1109/ECONF.2013.6 Paper—Development of Gamification-Based E-Learning on Web Design Topic [8] G. Amaral et al., Multiple Attribute Decision Making Method and Application, vol. 369, no. 1. 2013. https://doi.org/10.1017/CBO9781107415324.004 [9] M. D. Hanus and J. Fox, “Assessing the effects of gamification in the classroom: A longitudinal study on intrinsic motivation, social comparison, satisfaction, effort, and academic performance,” Comput Educ, vol. 80, pp. 152–161, 2015. https://doi.org/10.1016/ j.compedu.2014.08.019 [10] W. Ridhoni, P. Setyosari, D. Kuswandi, S. Ulfa, and D. Janan, “CC Thinker: Mobile-based Assessment to Train Creative and Critical Thinking in Students,” International Journal of Interactive Mobile Technologies, vol. 16, no. 15, pp. 16–29, 2022. https://doi.org/10.3991/ ijim.v16i15.29991 [11] J. Allen, I. E., & Seaman, “Changing Course: Ten Years of Tracking Online Education in the United States,” ERIC, 2013. http://www.ncbi.nlm.nih.gov/pubmed/1294567%0A http://www.pubmedcentral.nih.gov/articlerender.fcgi?artid=PMC1259773 [12] J. Goodman, J. Melkers, and A. Pallais, “Can online delivery increase access to education?,” J Labor Econ, vol. 37, no. 1, pp. 1–34, 2019. https://doi.org/10.1086/698895 [13] M. Donnermann et al., “Social robots and gamification for technology supported learning: An empirical study on engagement and motivation,” Comput Human Behav, vol. 121, no. March, p. 106792, 2021. https://doi.org/10.1016/j.chb.2021.106792 [14] R. Gibbs and J. Poskitt, Student engagement in the middle years of schooling (year 7-10): A literature review. Report to the Ministry of Education, no. June. 2010. [Online]. Available: www.educationcounts.govt.nz/publications.%0Awww.educationcounts.govt.nz/publication s [15] P. Sullivan et al., “Junior secondary students’ perceptions of influences on their engagement with schooling,” Aust J Educ, vol. 53, no. 2, pp. 176–191, 2009. https://doi.org/10.1177/ 000494410905300206 [16] D. Topalli and N. E. Cagiltay, “Improving programming skills in engineering education through problem-based game projects with Scratch,” Comput Educ, vol. 120, no. January, pp. 64–74, 2018. https://doi.org/10.1016/j.compedu.2018.01.011 [17] Vaca-Cardenas et al., “Coding with Scratch: The design of an educational setting for Elementary pre-service teachers,” Proceedings of 2015 International Conference on Interactive Collaborative Learning, ICL 2015, no. September, pp. 1171–1177, 2015. https://doi.org/10.1109/ICL.2015.7318200 [18] T. Beaubouef and J. Mason, “Why the high attrition rate for computer science students,” ACM SIGCSE Bulletin, vol. 37, no. 2, pp. 103–106, 2005. https://doi.org/10.1145/1083431. 1083474 [19] F. Pradana, F. A. Bachtiar, and B. Priyambadha, “Pengaruh Elemen Gamification Terhadap Hasil Belajar Siswa Pada E-Learning Pemrograman Java,” Semnasteknomedia, no. February, pp. 7–12, 2018. [20] J. E. Montandon, C. Politowski, L. L. Silva, M. T. Valente, F. Petrillo, and Y. G. Guéhéneuc, “What skills do IT companies look for in new developers? A study with Stack Overflow jobs,” Inf Softw Technol, vol. 129, no. August 2020, 2021. https://doi.org/10.1016/j.infsof. 2020.106429 [21] B. D. Jones, “Motivating and Engaging Students Using Educational Technologies,” Handbook of Research in Educational Communications and Technology, pp. 9–35, 2020. https://doi.org/10.1007/978-3-030-36119-8 [22] I. Yildirim, “The effects of gamification-based teaching practices on student achievement and students’ attitudes toward lessons,” Internet and Higher Education, vol. 33, pp. 86–92, 2017. https://doi.org/10.1016/j.iheduc.2017.02.002 36 http://www.i-jim.org https://doi.org/10.1017/CBO9781107415324.004 https://doi.org/10.1016/j.compedu.2014.08.019 https://doi.org/10.1016/j.compedu.2014.08.019 https://doi.org/10.3991/ijim.v16i15.29991 https://doi.org/10.3991/ijim.v16i15.29991 http://www.ncbi.nlm.nih.gov/pubmed/1294567%0A http://www.pubmedcentral.nih.gov/articlerender.fcgi?artid=PMC1259773 https://doi.org/10.1086/698895 https://doi.org/10.1016/j.chb.2021.106792 http://www.educationcounts.govt.nz/publications.%0Awww.educationcounts.govt.nz/publications http://www.educationcounts.govt.nz/publications.%0Awww.educationcounts.govt.nz/publications https://doi.org/10.1177/000494410905300206 https://doi.org/10.1177/000494410905300206 https://doi.org/10.1016/j.compedu.2018.01.011 https://doi.org/10.1109/ICL.2015.7318200 https://doi.org/10.1145/1083431.1083474 https://doi.org/10.1145/1083431.1083474 https://doi.org/10.1016/j.infsof.2020.106429 https://doi.org/10.1016/j.infsof.2020.106429 https://doi.org/10.1007/978-3-030-36119-8 https://doi.org/10.1016/j.iheduc.2017.02.002 Paper—Development of Gamification-Based E-Learning on Web Design Topic [23] K. Huotari and J. Hamari, “A definition for gamification: anchoring gamification in the service marketing literature,” Electronic Markets, vol. 27, no. 1, pp. 21–31, 2017. https://doi.org/10.1007/s12525-015-0212-z [24] R. Smiderle, S. J. Rigo, L. B. Marques, J. A. Peçanha de Miranda Coelho, and P. A. Jaques, “The impact of gamification on students’ learning, engagement and behavior based on their personality traits,” Smart Learning Environments, vol. 7, no. 1, 2020. https://doi.org/ 10.1186/s40561-019-0098-x [25] D. Orhan Göksün and G. Gürsoy, “Comparing success and engagement in gamified learning experiences via Kahoot and Quizizz,” Comput Educ, vol. 135, no. February, pp. 15–29, 2019. https://doi.org/10.1016/j.compedu.2019.02.015 [26] L. De-Marcos, E. Garcia-Lopez, and A. Garcia-Cabot, “On the effectiveness of game-like and social approaches in learning: Comparing educational gaming, gamification & social networking,” Comput Educ, vol. 95, pp. 99–113, 2016. https://doi.org/10.1016/j.compedu. 2015.12.008 [27] E. Kyewski and N. C. Krämer, “To gamify or not to gamify? An experimental field study of the influence of badges on motivation, activity, and performance in an online learning course,” Comput Educ, vol. 118, no. April 2017, pp. 25–37, 2018. https://doi.org/10.1016/ j.compedu.2017.11.006 [28] A. K. Barianos, A. Papadakis, and N. Vidakis, “Content manager for serious games: Theoretical framework and digital platform,” Advances in Mobile Learning Educational Research, vol. 2, no. 1, pp. 251–262, 2022. https://doi.org/10.25082/AMLER.2022.01.009 [29] L. A. Mamolo, “Students’ evaluation and learning experience on the utilization of Digital Interactive Math Comics (DIMaC) mobile app,” Advances in Mobile Learning Educational Research, vol. 2, no. 2, pp. 375–388, 2022. https://doi.org/10.25082/AMLER.2022.02.006 [30] E. Campos-Pajuelo, L. Vargas-Hernandez, F. Sierra-Liñan, J. Zapata-Paulini, and M. Cabanillas-Carbonell, “Learning the chemical elements through an augmented reality application for elementary school children,” Advances in Mobile Learning Educational Research, vol. 2, no. 2, pp. 493–501, 2022. https://doi.org/10.25082/AMLER.2022.02.018 [31] S. Papadakis and M. Kalogiannakis, “Education of preschool and elementary teachers on the use of adaptive gamification in science education,” 2022. https://doi.org/10.1504/IJTEL. 2022.10044586 [32] G. Zichermann, The gamification revolution: how leaders leverage game mechanics to crush the competition. 2013. [33] A. J. Kim, “ Gamification 101: Designing the player journey,” http://youtu.be/ B0H3ASbnZmc, 2011. [34] K. F. Hew, B. Huang, K. W. S. Chu, and D. K. W. Chiu, “Engaging Asian students through game mechanics: Findings from two experiment studies,” Comput Educ, vol. 92–93, pp. 221–236, 2016. https://doi.org/10.1016/j.compedu.2015.10.010 [35] S. Deterding, D. Dixon, R. Khaled, and L. Nacke, “From game design elements to gamefulness: Defining ‘gamification,’” Proceedings of the 15th International Academic MindTrek Conference: Envisioning Future Media Environments, MindTrek 2011, no. September, pp. 9–15, 2011. https://doi.org/10.1145/2181037.2181040 [36] K. Lavidas, Z. Apostolou, and S. Papadakis, “Challenges and Opportunities of Mathematics in Digital Times: Preschool Teachers’ Views,” Educ Sci (Basel), vol. 12, no. 7, Jul. 2022. https://doi.org/10.3390/educsci12070459 [37] F. Alebeisat, H. Altarawneh, Z. T. Alhalhouli, A. Qatawneh, and M. Almahasne, “The Impact of Human and Computer Interaction on eLearning Quality,” International Journal of Interactive Mobile Technologies, vol. 16, no. 4, pp. 58–69, 2022. https://doi.org/10.3991/ ijim.v16i04.27309 iJIM ‒ Vol. 17, No. 03, 2023 37 https://doi.org/10.1007/s12525-015-0212-z https://doi.org/10.1186/s40561-019-0098-x https://doi.org/10.1186/s40561-019-0098-x https://doi.org/10.1016/j.compedu.2019.02.015 https://doi.org/10.1016/j.compedu.2015.12.008 https://doi.org/10.1016/j.compedu.2015.12.008 https://doi.org/10.1016/j.compedu.2017.11.006 https://doi.org/10.1016/j.compedu.2017.11.006 https://doi.org/10.25082/AMLER.2022.01.009 https://doi.org/10.25082/AMLER.2022.02.006 https://doi.org/10.25082/AMLER.2022.02.018 https://doi.org/10.1504/IJTEL.2022.10044586 https://doi.org/10.1504/IJTEL.2022.10044586 http://youtu.be/B0H3ASbnZmc http://youtu.be/B0H3ASbnZmc https://doi.org/10.1016/j.compedu.2015.10.010 https://doi.org/10.1145/2181037.2181040 https://doi.org/10.3390/educsci12070459 https://doi.org/10.3991/ijim.v16i04.27309 https://doi.org/10.3991/ijim.v16i04.27309 Paper—Development of Gamification-Based E-Learning on Web Design Topic [38] P. J. H. Hu and W. Hui, “Examining the role of learning engagement in technology-mediated learning and its effects on learning effectiveness and satisfaction,” Decis Support Syst, vol. 53, no. 4, pp. 782–792, 2012. https://doi.org/10.1016/j.dss.2012.05.014 [39] Amit G Soni, “Choosing The Right eLearning Methods: Factors And Elements,” 2015. https://elearningindustry.com/choosing-right-elearning-methods-factors-elements (accessed Dec. 12, 2020). [40] A. Mishra, N. Ercil Cagiltay, and O. Kilic, “Software engineering education: some important dimensions,” European Journal of Engineering Education, vol. 32, no. 3, pp. 349–361, 2007. https://doi.org/10.1080/03043790701278607 [41] W. J. Doll, G. Torkzadeh, and S. Management, “The Measurement of End-User Computing Satisfaction End-User Satisfaction The Measurement of End-User Computing Satisfaction,” 1988. https://doi.org/10.2307/248851 [42] Purwanto and P. B. Deden Hedin, “Measurement of user satisfaction for web-base academic information system using end-user computing satisfaction method,” in IOP Conference Series: Materials Science and Engineering, Dec. 2020, vol. 909, no. 1. https://doi.org/ 10.1088/1757-899X/909/1/012044 7 Authors Fajar Pradana is a lecturer of Information System Department and a member of Technology Enhanced Learning at Computer Science Faculty, Universitas Brawijaya, Indonesia. He is currently pursuing his doctoral degree from Department of Educational Technology, Universitas Negeri Malang, Indonesia. His research interests are e- learning, gamification, information system, and software engineering. Punaji Setyosari is a professor in the post Graduate program of the Department of Education and Technology, Universitas Negeri Malang, Malang, Indonesia. His research interests include research methodologies, evaluation and assessment, instructional media, problem-based learning, and collaborative learning (Email: punaji.setyosari.fip@um.ac.id). Saida Ulfa is a lecturer in the Department of Educational Technology, Universitas Negeri Malang, Malang, Indonesia. Her research interests include mobile learning, instructional media, and learning engineering. Tsukasa Hirashima has been a professor of the Graduate School, Department of Information Engineering, Hiroshima University since 2004. Learning Engineering is his major research field. He has received international awards as the Outstanding Paper Award of EDMEDIA95, the Best Paper Award of ICCE2001 & 2002, Honora-ble Mention Award of AIED2009, APSCE Distinguished Researcher Award in 2009, and the ICCE2015 Best Technical Design Paper Award. Article submitted 2022-11-21. Resubmitted 2022-12-09. Final acceptance 2022-12-17. Final version published as submitted by the authors. 38 http://www.i-jim.org https://doi.org/10.1016/j.dss.2012.05.014 https://elearningindustry.com/choosing-right-elearning-methods-factors-elements https://doi.org/10.1080/03043790701278607 https://doi.org/10.2307/248851 https://doi.org/10.1088/1757-899X/909/1/012044 https://doi.org/10.1088/1757-899X/909/1/012044 mailto:punaji.setyosari.fip@um.ac.id