{'fraction_non_alphanumeric': 0.026358918328325594, 'fraction_numerical': 0.008649731403077484, 'mean_word_length': 5.325079182263173, 'pattern_counts': {'":': 0, '<': 0, '<?xml version=': 0, '>': 0, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
Gamification of an asynchronous HTML5-related competency-based guided learning system

Practice e-learning systems with traditional asynchronous drills are the most common assisted-learning tools for cognitive study, and they are often employed in instructional environments. Such systems provide learners with immediate feedback that enables them to develop cognitive abilities through constant learning. In this study, a novel, asynchronous HTML5-related gamified competency-based guided learning (CBGL) system was designed. The CBGL algorithm was embedded in the system to provide personalization for enhanced learning effects. This study used the core drivers of the Octalysis gamification framework to design gamified mechanisms that ameliorated the long and tedious CBGL processes. This study used the system satisfaction test to survey the flow experience of the participants and logged their learning behaviors for data mining. The results of system satisfaction analysis revealed that the system gamification generated a favorable flow experience among participants; they actively used the system to study and felt that the guided learning process was engaging. Results of the data mining analysis also revealed that the percentage of learners who completed the CBGL process rose from 58.3% to 79.2%. Therefore, the gamified mechanism helped participants overcome the boring and lengthy learning processes of the CBGL system.


Introduction
Digital learning is defined as any distance education model that applies digital learning resources and digital media [24]. Since 1990, the advancement of the Internet has resolved problems related to updating and delivering learning content. This improvement has led to digital learning that can occur without limits to time and location; consequently, the Internet has become an essential medium for digital learning [24]. Many modern digital learning systems are web-based. The development of Internet technology has also added more innovative elements to digital learning, surpassing conventional learning media such as CDs, TVs, or computers, and evolving toward the era of elearning 4.0. The basis of human knowledge acquisition lies in cognitive learning. The primary mediums of cognitive learning are practice e-learning systems with asynchronous drills that utilize cognitive resources. These systems provide instant feedback and are commonly used for teaching cognitive learning through continuous training and learning processes. However, in asynchronous digital learning environments, other factors (e.g., a lack of teacher supervision and a boring learning process) often affect learners' learning motivation and result in a poor learning outcome. Strategies to overcome this problem are necessary to encourage the adoption of digital learning systems and enable the learning process to become more autonomous, thereby motivating learners to use such systems.
In the 1970s, academics determined that humans obtain cognitive abilities, such as knowledge and memory, on the basis of behaviorism theory [3]. Cognitive development is the first stage at which humans recognize the world around them. Humans continuously gain knowledge through cognitive stimuli, cognitive responses, and experience feedback (S-R-F). Digital drill and practice learning is a type of e-learning that integrates behaviorism, and it is usually used in the learning of cognitive abilities. The S-R association model is formed from continuous stimuli and responses and strengthened by feedback, as illustrated by the behaviorism model in Figure 1. The law of effect dictates that praise and reward provide positive reinforcement and that punishment restrains wrong behavior. The law of contiguity emphasizes immediate feedback, with events that occur together likely to become associated; and the law of exercise emphasizes continuous practice as a route to attain mastery. On the basis of these laws, applying the correct response in the shortest time through continuous exercise can be emphasized through curriculum design to strengthen the S-R association. In drill and practice e-learning systems, questions acts as stimuli and answers act as responses. When answers are correct, systems add points; conversely, when answers are wrong, systems deduct points (as in the law of effect). The reward and punishment come from the immediate feedback (as in the law of contiguity). Moreover, learners using such systems must continuously practice (as in the law of exercise). Consequently, drill and practice e-learning systems can be useful tools for accelerating the S-R-F process during the learning of cognitive knowledge. However, because such systems emphasize continuous practice to increase efficacy, they are likely to cause boredom among students, and they do not motivate learners' or encourage self-study [19].
Competency-based guided learning (CBGL) systems are modified from training-based digital learning systems. The CBGL algorithm is incorporated into training-based systems, and the system emphasizes student-centered learning processes and individual differences among learners. Because cognitive learning is mostly evaluated using a limited item bank, if the learning content has a standard scope that can be classified into different units, CBGL systems can personalize learning paths and guide students to independently learn in stages according to the cognitive level of different units. The results of one study showed that students' learning outcomes could be significantly improved using a CBGL system [14]. The stimulation and construction of the learning environment directly affect students' learning. In digital learning environments, students' active attitudes affect their learning effectiveness [2]. However, the CBGL process is also boring and lengthy, which can result in poor learning attitudes [14]. Prensky (2001) defined the generation born after 1975 as the "G generation," with G standing for GAME, and advocated for learning through gaming. Such learning takes on the fun characteristics of games, thereby enhancing learning motivation and reducing the boredom of conventional classrooms. Therefore, learning through digital games is also known as joyful e-learning. Game-based e-learning is likely to become the primary learning method of the 21st century [17]. Gee (2003) also echoed Prensky's view that digital game learning has already changed the conventional passive acceptance of learning, with learners now becoming actively involved in the learning process [11]. The effect of digital games on students is evident. Students not only play games but also discuss, research, and imagine on the basis of these games [6]. Introducing digital games into courses causes the intrinsic motivation of learners to manifest as learning behavior, inspiring learners to devote more time and energy to learning [16]. Garris, Ahlers, and Driskell (2002) proposed a game learning model that included three stages-input, process, and outcome ( Figure 1). During the game loop, because the performance of learners gradually improves, the pleasure gained from the game enhances learners' willingness to continue learning, creating a flow experience that results in a high degree of excitement and fulfillment [10]. Flow experiences occur when learners are inclined toward certain activities, becoming immersed in the activity to such an extent that they are not aware of the passage of time [5]. Numerous studies have indicated that digital game learning leads to more favorable learning outcomes and greater learning motivation than conventional learning does [1,12,15,21,23].
The essence of gamification is similar to that of game-based learning but differs in implementation. Designs that implement gamification emphasize the encouragement of users' motivation. They implement interesting and engaging elements that are derived from games and can be applied in real world activities. This process of application is referred to as "human-focused design," which comprises knowledge regarding optimized motivation, feeling, and participation [4]. Widely used gamification elements include points, badges, and leaderboards. In conventional teaching environments or systems, these elements are sufficient to motivate learners to compete with each other [20]. PeerWise is an after-school online learning system that enables students to design their own tests.
In the system, badges are used to successfully increase student participation. The addition of gamification has been shown to increase students' enthusiasm for and use of the system [7]. Gamification applies game design items and features to nongaming content, and it can be employed in numerous educational environments, such as in providing learning outcomes (points, virtual coins, and ranks) to social interactions [8]. Gamification effectively increases learning intensity and enhances learning outcomes [13,18]. Thus, it is an appropriate solution for increasing students' engagement and immersion in learning [9,22]. Octalysis is a human-oriented gamification design framework [4]. As shown in Figure 2, the framework has an octagon shape, corresponding to eight core drives on each side. Octalysis arranges eight driving elements that generate learners' motivations, namely epic meaning and calling, development and accomplishment, empowerment of creativity and feedback, ownership and possession, social influence and relatedness, scarcity and impatience, unpredictability and curiosity, and loss and avoidance. The structure is often used to optimize learner perception, motivation, and engagement (participation).

Figure 2.
Octalysis gamification framework (Chou, 2015). Training-based digital learning systems are designed for cognitive learning and can effectively improve learners' cognitive ability. However, the dullness of the learning process can often reduce learners' learning motivation. Moreover, the lack of guidance from teachers in asynchronous learning environments often leads learners to memorize cognitive content mechanically.
In this study, a novel gamification-based digital learning system was designed that employed asynchronous training. The CBGL algorithm was embedded in the system to provide personalized guided learning, enabling the system to take over the guiding role of teachers and providing students with an asynchronous digital learning environment. A gamification mechanism designed using Octalysis driving elements solved problems related to the dullness and length of the learning process, thereby increasing learners' motivation and engagement and generating a positive flow experience.

System model
The system model is illustrated in Figure 3. The model had three primary parts, namely the user, an asynchronous HTML5-related gamified CBGL system, and a server for the database and web pages.
The system incorporated gamification core drives, the CBGL algorithm, and an HTML5-related cognitive e-course in an asynchronous training-based digital learning system, providing personalized guided learning and Octalysis gamification mechanisms.

System structure
The system structure is shown in Figure 4. The system was divided into learner and administrator sections. The functions required by learners were explicitly established in the learner section. The administrator section provided researchers with functions for administration and study. The system website can be found at http://lcs.dk.ntc.edu.tw/~lcs/mtahtml5etask/index.php.
The features of the system were as follows: 1. An incorporated badge leaderboard. 2. Guided learning in the learner section that incorporated CBGL adaptive guidance and the gamification element of badges. 3. Octalysis development, namely a sense of achievement, gamification driving elements, and adaptive guidance functions.  Figure 4. System architecture.

Design of the personalized cognitive learning system
Online test systems are often used to verify learning effects by using question banks as learning material. Programming is a standard course in information technology departments, but it is also a common subject in many other subject areas. Numerous programming languages exist, but for website development, HTML5 is the newest front-end programming language. Therefore, this study employed a cognitive question bank based on HTML5 for learning material and the CBGL algorithm to separate content into five learning units that included 257 questions. The system then constructed the e-course interface based on the included question bank.
If cognitive learning material is contained within a question bank, which is a fixed range and separated into five units, the CBGL algorithm can be used to generate personalized learning paths according to the different cognitive abilities of its users, with the system guiding users to study in stages [14]. Therefore, the CBGL algorithm was employed as the basis of the current study's system design. Every learner of the system underwent a pretest of their HTML5 cognitive abilities before learning, and the system generated a personalized learning path according to the pretest results. Hsu and Li (2015) proposed the algorithmic process of a CBGL system ( Figure 5) [14]. Upon completing registration, their system guides learners directly to the pretest stage. The system displays questions randomly from the question bank, and learners proceed through the test, with the result of every unit recorded in the database of the system. The obtained test result is then computed and generated to the learning path using Equation (1), which then proceeds to the drill and practice learning process. Learners' cognitive abilities must reach the required level to proceed to the next unit; otherwise, they must practice the unit until they attain the necessary standard. (1)

Design of gamification mechanisms
The literature indicates that the Octalysis framework, specifically the core driver of development and accomplishment, is suitable for most problem-based learning systems. Points, badges, and leaderboards have been used to raise users' engagement and motivation [4]. Moreover, these elements  6 have been adopted extensively in gamification designs [20]. PeerWise, a famous online after-school learning system, also successfully used badges to improve students' engagement in the learning process [7]. This study focused on badges and leaderboards in Octalysis development under the core driver of development and accomplishment as the system gamification mechanism. Badges and leaderboards were made for each milestone of the adaptive CBGL path and, on the basis of the law of effect from behavior theory, were used to encourage users to complete various learning stages. The milestones were marked at units 2-4, 4-3, 5-1, 5-3, and 7, as shown in Figure 5. These milestones spanned the pretest process, learning process, and final summary test to prevent users from becoming bored. Assigning badges to each milestone was designed to keep users motivated by providing them with a sense of achievement as they progressed.
The incentive mechanism of the badges in this study was designed as follows: 1. CBGL (A) Obtain one badge for completing the pretest and beginning the learning path.
(B) Obtain one badge for passing one level in the pretest.
(C) Obtain one badge for passing one learning unit and deduct one badge for failing. (D) The final summary test verified learners' overall learning outcomes; thus, the number of available badges was also higher than the other tests-five badges were obtained if users passed the posttest summary test and five were deducted if they failed.

HTML5 simulation test
After completing the CBGL process, the simulation review test was initiated. The review test was for poststudy self-improvement; thus, if users passed the review test, they were awarded with two badges; if they failed, only one badge was deducted. The calculation process of the badge incentive mechanism is shown in Figure 6. The system first extracted the table of user behavior logs from the database and then processed the following calculations: Procedure 1: Determine whether the pretest procedure was completed. If completed, one badge is obtained.
Procedure 2: Determine whether the user already achieved the five goals in the pretest. If achieved, one badge is awarded for each goal.
Procedure 3: Determine the number of levels that the user passed during the learning process. Award the same number of badges as the number of levels passed, and deduct the same number of badges as the number of levels failed.
Procedure 4: Determine if the user completed the final summary test to verify the user's learning outcome. If the user passed the test, award five badges. Deduct five badges if the final summary test was failed.
Procedure 5: If the review test was completed, this indicates the completion of the entire guided learning process, and the system initiates the full-range simulation test. This test is an additional learning function to encourage the user to continue learning. Therefore, award two badges if the simulation test was passed; however, only deduct one badge if it was failed.
Procedure 6: Calculate the number of badges. The collection of badges was displayed in the user section of the system. A picture of the badge awarded is displayed in Figure 7. In addition to serving as evidence of student progression, the badges were used to positively encourage students to work hard. A badge leaderboard was also displayed on the system homepage to motivate users to progress together, as shown in Figure 8.

Experimental scheme 1. Experimental period
The system experiment ran from September 20, 2017, to January 12, 2018.

Experimental participants
A total of 24 students who had taken the MTA HTML5 test at National Taitung Junior College in Taiwan were recruited for experimental testing.

Experimental course
The learning material in the experiment was the designed HTML5-related cognitive knowledge elearning course. 4. Experimental design (A) All of the participants proceeded through the learning process without teacher assistance, learning according to the system's adaptive guidance. (B) Before the midterm examinations, the participants used the ungamified system for learning.
Following the midterm examinations, they used the gamified system. The differences in the participants' completion of the CBGL process were subsequently explored using big data analysis.

Experimental analysis
1. Analysis of system satisfaction A system satisfaction survey was conducted to determine learners' perceptions after using the system and whether the system fulfilled the research objectives. The adaptively guided learning system satisfaction questionnaire designed by Hsu and Li (2015) was chosen, and a 5-point Likert scale was used to examine the learners' satisfaction [14]. A total of 24 responses were collected for a response rate of 100%. The sixth item in the questionnaire was a reverse-scored question. After examining the reverse-scored question, one copy was eliminated, leaving 23 valid responses. The results for system satisfaction are listed in Table 1.
According to the results, the users felt the system caused them to willingly use it to actively learn. They also felt the learning process was engaging; thus, they were willing to patiently read through each question and complete all learning stages. Because the flow experience generated during the learning process was positive, the participants did not feel that the CBGL process was lengthy.

Analysis of the completion of CBGL
Using big data analysis, users' completion of the CBGL process before and after using the gamification system was compared to reflect differences in the flow effect. The users' logs recorded into the database for big data analysis are illustrated in Figure 9. The results for comparison of the completion of CBGL are listed in Table 2.
The participants used the ungamified system for learning prior to the midterm examinations. According to the results of big data analysis, 14 students completed the learning sessions in the CBGL process, and the completion rate was 58.3%. After the midterm examinations, the participants switched to the gamification system. Subsequently, 19 students completed the learning sessions, and the completion rate was 79.2%. Thus, the completion rate increased by 20.9% after the system incorporated gamification mechanisms. This indicated that the incorporation of gamification helped the participants overcome the boring and lengthy learning process of the ungamified CBGL system.

Conclusions
Cognitive learning is the most fundamental method for humans to acquire knowledge, and trainingbased digital learning systems are designed to promote such learning. However, the dullness and length of training-based digital learning processes mean that poor learning motivation often affects learning outcomes. Training-based digital learning is normally conducted in an asynchronous manner. In other words, teachers and students are often not online at the same times, and therefore students must rely entirely on system assistance. This study successfully proposed an asynchronous gamified CBGL system that helps resolve the aforementioned problems.
The designed system for HTML5-related cognitive courses used the CBGL algorithm to provide a personalized guided learning environment for asynchronous digital learning that employed the gamified mechanisms of the Octalysis framework's core drivers to overcome dull and lengthy learning processes. The results indicated that the system helped users generate a positive flow experience that substantially improved their completion rates of CBGL tasks.
In summary, this system is recommended for future teaching experiments to explore whether the flow effect generated by gamification, which increased learning completion rates, can also produce a positive effect on learning outcomes.