# Development and Alpha Testing of EzHifz Application: Al-Quran Memorization Tool

Authors: Nor Musliza Mustafa; Zulkifly Mohd Zaki; Khairul Anuar Mohamad; Mokmin Basri; Sedek Ariffin
Journal: Advances in Human-Computer Interaction
 (2021)

---

## Abstract

Learning to memorize the Quran presents a challenge. This paper reports the development and alpha testing of a mobile application called “EzHifz” for Quran memorization based on the VARK learning style. The application received positive feedback for user acceptance testing and heuristic testing. The Fleiss kappa coefficient (κ) results for user acceptance testing show a very good level of agreement (κ = 0.850). Heuristic testing results show that κ = 0.731 for content, manual guide, memorization activities, performance information, and tasmik assessment attributes, while κ = 0.727 for presentation design, interactivity, multimedia elements, attraction, and motivation attributes. These results show a good level of agreement, which indicates that the EzHifz application meets the requirements of design and development based on the attributes evaluated. A combination of memorizing techniques in the application helps strengthen the use of preferred VARK learning styles. The techniques support the use of multiple senses that could facilitate the process of memorizing the Quran independently. This study contributes to the novel design and evaluation of the Quran memorization application based on the Quran memorization model. The application supports the teaching and learning of Quran memorization where it allows students to select their preferred VARK learning style with the technique of memorizing the Quran. This mobile application learning approach based on VARK’s learning style has the potential to be implemented in the process of memorizing the Quran as well as retaining memory through the use of memory senses in support of the learning materials developed.


---

## Body

## 1. Introduction

Innovations of mobile digital in teaching and learning bring a substantial transformation in the field of education [1]. Mobile learning activities were able to develop an idea and creativity [2] that support unique pedagogical features through social and collaborative learning media. Recent studies indicate that applying mobile technology in learning Quran has shown positive support among the younger generation [3–6]. Providing the right teaching aids for students could impact students’ performance levels as it facilitates the understanding of learning. Aligned with this, many previous researchers such as [7–11] have developed interactive mobile applications to help facilitate the process of memorizing and reciting the Quran. The development of the educational application through the process of understanding the systematic teaching design concepts with the right theory and technology of learning can enhance student learning outcomes [12]. However, it is undeniable that learning media that relate to the Quran memorization need a teacher as a complement to the perfect learning process [13].Furthermore, the determination of students’ dominant VARK learning styles is important to be emphasized to ensure the knowledge acquisition works well according to their multiple intelligence [14]. Therefore, the mobile application of Quran memorization based on the VARK learning style is important to be developed as one of the complementary learning tools in the context of Quran memorization (per word). Quran memorization (per word) involves memorizing the Quran verses with the corresponding translation.This paper is structured in the following way. Section2 provides the issues faced by the institution related to memorizing the Quran. Section 3 will discuss the related works, while Section 4 explains the methods and materials used in this research. Section 5 reveals the screen design of the EzHifz application as well as the alpha testing results. Finally, the conclusion and future work are given in Section 6.


## 2. Issues in Quran Memorization

Memorizing the Quran is often considered a difficult skill to learn because it requires a strong memory with a discipline of continuous repetition. Several studies were conducted by previous researchers to develop effective memorization methods [15–19], however, still many students not being able to memorize the Quran well. Many studies found difficulties in memorizing the Quran because of confusion and misunderstanding of the Quran’s meaning, weak memories, disturbances from the environment, and problems in mastery of the Quran [20–22]. The level of Quran memorization among students in Darul Quran (an institute of Quranic Studies in Malaysia) also does not comply with their goal due to the lack of specific memorization techniques [7]. Tahfiz educational teachers need to be proficient in their Quran teaching methods and strategies through technological approaches [23] as well as identifying student learning styles to acquire knowledge [24]. However, most Tahfiz institutions applied the same Quran memorization method to the students without considering their students’ learning styles. This is because different learners may require different approaches to memorize the Quran.Recently, there has been an interest in memorizing the Quran due to the parental demand for their children to memorize the Quran. However, in the Tahfiz school curriculum, many students are unable to memorize all 30 juz within 3 years [25]. There were four issues emphasized in Tahfiz Model Ulul Albab (TMUA) curriculum approaches [25]. This includes (a) the incapability of students to memorize 30 juz of Quran within 3 years; (b) students’ inability to apply the memorization technique; (c) emphasizing on the language as the learning strategy mechanism; and (d) the existing mechanism that does not measure the memorization strategy. These issues can be seen through their different achievements in memorizing the Quran among each other as well as the selection of models and strategies applied in their Quran memorization learning.


## 3. Related Work

### 3.1. VARK Learning Style

The VARK model is a set of learning styles that involves the use of a variety of senses [26]. This model contains four learning styles, namely, visual (V), auditory (A), reading (R), and kinesthetic (K). The following are four (4) features of the VARK learning style available to individuals: (i) individuals with a visual (V) tendency to learn through charts, diagrams, graphs, and symbols rather than words; (ii) individuals with aural/auditory tendencies (A) to learn through conversations, lectures, and discussions; (iii) individuals with a read/write (R) tendencies to learn through words and texts such as reports, assignments, essays, manuals, and slides; and (iv) individuals with kinesthetic (K) tendencies to learn through experiences, training, and simulations in the form of demonstrations, videos, movies, case studies, and applications.Using a dominant VARK learning that adopts appropriate learning strategies and techniques may successfully engage the students’ learning to produce quality learning performance [27, 28]. Teaching students with the right style of learning is essential as the students can easily understand what they are learning. Thus, this may help students improve their learning to achieve good performance.


### 3.2. Memorizing Techniques

There are several memorizing techniques suitable to be applied in memorizing the Quran based on the observation report [29]. They are summarized in Table 1.Table 1
Memorizing techniques.
TechniqueDescriptionRepetitionRecurrence or replication of process that helps in strengthening the memory of what is being learned as it is a well-rehearsed method that helps to maintain the memory retention of the Quran for a long time [6, 30, 31]. Repetition of hearing or seeing affects the short-term memory [32].KeywordA two-tier procedure to remember new words that have relevant components called acoustic and mental links [33].SegmentationBreaking up a long string into smaller manageable elements and it is implemented in the information or symbolic encoding for retaining long-term memory [34].Visual mapMemorize facts through colored images; student can learn and memorize information easily through vision [35].Open-closeA method of opening and closing the mushaf (the written pages of the Quran) of the verse alternately while memorizing the Quran [36].Highlight or pointerA signaling principle in multimedia that improves learning when cues that highlight or point the essential materials are added. This includes outlines, headings, and a pointer that highlight printed text such as using bolding, italics, or underlining [37]. Even finger indicators are often used as indicators in the reading.AssociationA memorizing technique for students with high visual tendencies. There are three types of graphical use, namely, migration maps, flowcharts, and contrast comparisons [38]. It helps students to remember well through the compilation and remapping of images coupled with color elements.


### 3.3. Relevant Quran Memorization Application

The previous works related to this research have been reported and summarized in our concept paper [39]. The paper reported the main features of the application versus our proposed Quran memorization tool features. However, in this paper, we are extending the report on the memorization technique that has been adapted. This is shown in Table 2.Table 2
Relevant system/application and memorization technique(s) adapted.
System/applicationMemorization techniques adaptedAl-Quran education module [40]The VARK learning style approach that integrates with the Differentiated Model of Giftedness and Talent Theory (DMGT) based on bloom’s taxonomy scope applied the repetition technique in memorizing the Quran verse and translation.Al-Mudarris Quran Softwarehttp://www.islamcity.com/Audio repetition technique, that is, the repetition of ranges of verse groups and repetition of verses inside the group. Highlight/pointer technique: used to show the audio recitation of verse number.Live Quran Tutoringhttp://www.quraninteractive.comRepetition technique used for memorizing the Quran verse that enables online one-on-one tutoring with an Internet connection.E-Hafiz [41]Repetition technique used in the feature of recorded voices called Mel-Frequency Cepstral Coefficient (MFCC) technique and that compared with experts’ voices stored in the database. It will point out any mismatch on the word level.Quran Memorization (Hifz) and Revision Softwarehttp://www.qurantracker.com/Audio repetition and highlight techniques using color-coding which allow the user to track the start and end date for memorizing a new surah or surah by surah, respectively.Quran Memorizerhttp://www.islamcity.com/Repetition technique used with a selection and loop of range between the verses one wishes to memorize.Quran Memorization Programhttp://www.imaanstar.com/Audio repetition technique used with a selection and loop of range between the verses one wishes to memorize.Quran Memorization Online,http://www.houseofquran.com/Audio repetition and highlight techniques of verses. It groups active verses with a simulation of a Quran teacher.It was found that most of the applications use repetition, open-close, and pointer/highlight techniques to facilitate the Quran memorization. Although some of the projects support the differences in individuals’ VARK learning styles, however, it did not integrate with all memorizing techniques. Generally, these existing applications can show the text and play back the audio of the reciter with the looping method. Some of the applications also provide audio recording capabilities and memorization performance management. Therefore, there is a need for supplementary learning materials to support the Quran memorization based on VARK learning styles with other types of effective memorizing techniques.The motivation of the EzHifz application design was driven by the Quran memorization model developed in [39]. It integrates the VARK learning style mode, sensory memory, short-term memory, and long-term memory. However, the model developed has yet to be evaluated. It is believed that the utilization of multiple senses may support the differences in student preferences in VARK learning styles. Consequently, it may improve the memorizing performance among the students. Thus, the foundation design and development of the prototype in this research are based on this model.


## 3.1. VARK Learning Style

The VARK model is a set of learning styles that involves the use of a variety of senses [26]. This model contains four learning styles, namely, visual (V), auditory (A), reading (R), and kinesthetic (K). The following are four (4) features of the VARK learning style available to individuals: (i) individuals with a visual (V) tendency to learn through charts, diagrams, graphs, and symbols rather than words; (ii) individuals with aural/auditory tendencies (A) to learn through conversations, lectures, and discussions; (iii) individuals with a read/write (R) tendencies to learn through words and texts such as reports, assignments, essays, manuals, and slides; and (iv) individuals with kinesthetic (K) tendencies to learn through experiences, training, and simulations in the form of demonstrations, videos, movies, case studies, and applications.Using a dominant VARK learning that adopts appropriate learning strategies and techniques may successfully engage the students’ learning to produce quality learning performance [27, 28]. Teaching students with the right style of learning is essential as the students can easily understand what they are learning. Thus, this may help students improve their learning to achieve good performance.


## 3.2. Memorizing Techniques

There are several memorizing techniques suitable to be applied in memorizing the Quran based on the observation report [29]. They are summarized in Table 1.Table 1
Memorizing techniques.
TechniqueDescriptionRepetitionRecurrence or replication of process that helps in strengthening the memory of what is being learned as it is a well-rehearsed method that helps to maintain the memory retention of the Quran for a long time [6, 30, 31]. Repetition of hearing or seeing affects the short-term memory [32].KeywordA two-tier procedure to remember new words that have relevant components called acoustic and mental links [33].SegmentationBreaking up a long string into smaller manageable elements and it is implemented in the information or symbolic encoding for retaining long-term memory [34].Visual mapMemorize facts through colored images; student can learn and memorize information easily through vision [35].Open-closeA method of opening and closing the mushaf (the written pages of the Quran) of the verse alternately while memorizing the Quran [36].Highlight or pointerA signaling principle in multimedia that improves learning when cues that highlight or point the essential materials are added. This includes outlines, headings, and a pointer that highlight printed text such as using bolding, italics, or underlining [37]. Even finger indicators are often used as indicators in the reading.AssociationA memorizing technique for students with high visual tendencies. There are three types of graphical use, namely, migration maps, flowcharts, and contrast comparisons [38]. It helps students to remember well through the compilation and remapping of images coupled with color elements.


## 3.3. Relevant Quran Memorization Application

The previous works related to this research have been reported and summarized in our concept paper [39]. The paper reported the main features of the application versus our proposed Quran memorization tool features. However, in this paper, we are extending the report on the memorization technique that has been adapted. This is shown in Table 2.Table 2
Relevant system/application and memorization technique(s) adapted.
System/applicationMemorization techniques adaptedAl-Quran education module [40]The VARK learning style approach that integrates with the Differentiated Model of Giftedness and Talent Theory (DMGT) based on bloom’s taxonomy scope applied the repetition technique in memorizing the Quran verse and translation.Al-Mudarris Quran Softwarehttp://www.islamcity.com/Audio repetition technique, that is, the repetition of ranges of verse groups and repetition of verses inside the group. Highlight/pointer technique: used to show the audio recitation of verse number.Live Quran Tutoringhttp://www.quraninteractive.comRepetition technique used for memorizing the Quran verse that enables online one-on-one tutoring with an Internet connection.E-Hafiz [41]Repetition technique used in the feature of recorded voices called Mel-Frequency Cepstral Coefficient (MFCC) technique and that compared with experts’ voices stored in the database. It will point out any mismatch on the word level.Quran Memorization (Hifz) and Revision Softwarehttp://www.qurantracker.com/Audio repetition and highlight techniques using color-coding which allow the user to track the start and end date for memorizing a new surah or surah by surah, respectively.Quran Memorizerhttp://www.islamcity.com/Repetition technique used with a selection and loop of range between the verses one wishes to memorize.Quran Memorization Programhttp://www.imaanstar.com/Audio repetition technique used with a selection and loop of range between the verses one wishes to memorize.Quran Memorization Online,http://www.houseofquran.com/Audio repetition and highlight techniques of verses. It groups active verses with a simulation of a Quran teacher.It was found that most of the applications use repetition, open-close, and pointer/highlight techniques to facilitate the Quran memorization. Although some of the projects support the differences in individuals’ VARK learning styles, however, it did not integrate with all memorizing techniques. Generally, these existing applications can show the text and play back the audio of the reciter with the looping method. Some of the applications also provide audio recording capabilities and memorization performance management. Therefore, there is a need for supplementary learning materials to support the Quran memorization based on VARK learning styles with other types of effective memorizing techniques.The motivation of the EzHifz application design was driven by the Quran memorization model developed in [39]. It integrates the VARK learning style mode, sensory memory, short-term memory, and long-term memory. However, the model developed has yet to be evaluated. It is believed that the utilization of multiple senses may support the differences in student preferences in VARK learning styles. Consequently, it may improve the memorizing performance among the students. Thus, the foundation design and development of the prototype in this research are based on this model.


## 4. Methods and Materials

The research applied the ADDIE model [42]. This is because the primary concept of this model is structured and directed. It consists of five major phases which include Analysis, Design, Develop, Implement, and Evaluate. The analysis phase was conducted based on two types of analyses, namely, user analysis, and task analysis. These tasks were done through document review, questionnaires, and classroom observations. Fourteen students aged between 10 and 18 years from a Tahfiz Integration School in Sepang, Selangor, Malaysia, were involved in this phase. User analysis focused on understanding of the teaching methods used by teachers, Quran memorization methods practiced by the students, and their VARK learning styles, as well as their knowledge on using mobile devices as a tool for teaching and learning. Task analysis focused on the content of learning, instructional requirements, and learning outcomes. At the end of this phase, a list of user requirements was gathered.In the design phase, a paper-based interface was designed grounded on the syllabus content, manual guide, and activities of Quran memorization. Multimedia presentation elements such as image, audio, video, and text are added and applied to the interactivity of each button provided. The integration of seven memorizing techniques was designed based on the VARK learning style in the process of Quran memorization.During the development and implementation phase, the flowchart and storyboard were developed to show the entire process of the Quran memorization technique in the application (App) prototype. In the development of the prototype, multimedia elements were integrated with the memorizing techniques based on the VARK learning style. The implementation output will be further explained in Section5.Alpha testing was carried out in the evaluation phase. In this evaluation, it was done with the experts only. This evaluation aims to obtain responses from these experts for improvements to the application developed before the application is being tested with a wider community. The user acceptance test [43, 44] and heuristic testing [45] were conducted to acquire feedback and suggestions to improve the functionality of the application. Two groups of participants were involved in this evaluation. Group A consists of three experts in Quran memorization and group B consists of three experts in the educational technology field. All participants have been working in their respective areas for more than 20 years, publishing journals as well as performing teaching in their respective fields.Each participant was provided with the EzHifz application prototype and evaluation form to respond to any errors and weaknesses of the application. A digital recorder was used to capture the verbal feedback from the participants. The user acceptance test instrument uses a scale of “Pass” or “Fail” while the heuristic testing instrument uses a scale of agree (Yes) or disagree (No). The user acceptance test aimed to examine the functions of the interactive buttons and navigation procedures as well as record status after the application is closed. It consists of a list of 54 items conducted with group A participants (see Appendix1). The heuristic testing instrument consisted of 38 items that were used for group A (see Appendix 2), while 48 items were used for group B (see Appendix 3) to test the application. For group A, the items were developed based on the aspects of its content, manual guide, memorization activities, performance information, and evaluation of tasmik (teacher guides, listens, and records the progression of memorizing the Quran individually). However, group B items were focused on the aspects of presentation design, interactivity, multimedia elements, attraction, and motivation. During the testing session, all participants went through the application. Feedback was given by them at the end of the session. The test session was conducted within an hour.Materials for EzHifz application development include software and hardware. Adobe Photoshop and Illustrator were used for graphical editing. Action Script, HTML, and JavaScript were used for programming applications, SQLite was used for a database application, Garage Band and Adobe Premiere were used for audio and video editing, respectively, and BlueStack was used for Android applications. The hardware was in the form of PCs, laptops, and smartphones.


## 5. Results and Discussion

### 5.1. Screen Design

The EzHifz application prototype is a standalone application that was developed for the Android platform. It is an offline application to facilitate individual students to freely access the application without an Internet connection. Surah Al-Insan (verse 76:1–31) from the Quran is used as the content of the prototype. The application contains several graphical user interfaces (GUI) such as home screen, main menu, profile menu, memorization menu, tasmik menu, and performance menu. The following describes each of the user interfaces in the EzHifz application.Figure1 shows the home screen when the application is first launched. EzHifz’s contents were developed in Bahasa Malaysia, the official language of Malaysia. Students may click on the screen to proceed to the main menu. The main menu is shown in Figure 2.Figure 1
Home screen.Figure 2
Main menu.In the main menu, the students are provided with four options, that is, memorization menu (HAFAZAN), performance menu (PRESTASI), tasmik menu (TASMIK), and profile menu (PROFAIL). The remainder of this section will discuss those options.


#### 5.1.1. Profile Menu

The profile menu requires students to fill in their personal information such as name (NAMA HUFFAZ), age (UMUR), gender (JANTINA), phone (HUBUNGI), e-mail and category (KATEGORI) (either admin, teacher or student), and class (KELAS) as shown in Figure3.Figure 3
Profile menu.


#### 5.1.2. Memorization Menu

Figure4 shows the memorization menu with a full learning mode (V, A, R, and K) being activated. It includes multimedia elements such as images, audio, video, and text. This is where the idea of VARK learning style and memorizing techniques is being integrated.Figure 4
Memorization menu.Integrating the VARK learning style with memorizing techniques such as repetition, keyword, segmentation, visual map, open-closed, pointer, highlighting, and association was implemented in the application to support the process of Quran memorization. The visual mode (V) depicts the translation of the meaning of the Quran verses applying segmentation and association techniques through dividing the verse into two or three small segments of colored objects or images (see the upper right corner of Figure4). The audio mode (A) can be controlled by using the play-pause or play-stop button. This enables a segmentation technique to be implemented while clicking the text or the Quran verse. It may help the student to control the process of memorizing lengthy Quran verses. The reading mode (R) includes the Quran verse and translation in the form of text that also applies segmentation and pointing or highlight techniques. The kinesthetic mode (K) provides a feature of a video of Quran verses using the movement of body motion and gesture. It shows a step-by-step drawing of images using a segmentation technique to enable students to refer to the movement shown in the kinesthetic submenu in Figure 5.Figure 5
Kinesthetic submenu.The open-closed technique is applied to the V, A, R, and K buttons labeled at the right-hand side of the interface. This is to enable the memorization of verses according to individual preferences. For example, if a student wishes to use the visual and reading (V and R) mode as the preference of memorizing the verse, then this option can be activated by clicking V and R buttons. Upon clicking the buttons, the visual and reading modes will appear in the interface as shown in Figure6.Figure 6
VARK Memorization interface showing only “V” and “R” modes being activated.The visual map submenu combines all Quran verses in a single interface with an iconic text and image as a keyword. This is to allow easy navigation between verses either to recall or memorize the Quran. This is shown in Figure7. Students can freely select the verse that he/she wishes to start or continue to memorize from this submenu.Figure 7
Visual map submenu.The performance indicators are also displayed using red, blue, and green colors. These colors serve as a guide to indicate which verses need attention from the student. Red indicates that there is more than one mistake that occurred when the student memorized the Quran. Blue indicates that memorizing has been improved; however, still there is at least one mistake that occurred, while green indicates that there is no mistake. These color indicators are based on the input given by the teacher during the tasmik session.


#### 5.1.3. Tasmik Menu

Figure8 shows the tasmik menu. This menu is provided to the teachers to mark the student performance. Tasmik is one of the typical methods used by a teacher to track their students’ progress in Quran memorization. Attributes like the date (TARIKH), surah’s name (SURAH), verse number (AYAT), mode of learning (VARK), number of repetitions (ULANGAN), duration (TEMPOH), grade (GRED), and status are provided. A selection of grade buttons (such as A, B, C, D, and E) is given by the teacher to determine the student’s current performance in memorizing each of the Quran verses. These grades are equivalent to the “status” which is represented in color. Grade A is equivalent to green color and grade B is equivalent to blue, while grade C and beyond will be represented by red color. A teacher can access the menu by using a password as authentication. This is to maintain the integrity of the grades.Figure 8
Tasmik menu.


#### 5.1.4. Performance Menu

Figure9 shows the performance menu that displays the report of the student’s evaluation. It tracks the date (TARIKH), surah’s name (SURAH), verse number (AYAT), mode of learning (VARK), number of repetitions (ULANGAN), duration (TEMPOH), and performance status. The performance is indicated in color. The green dot represents grade A, i.e., Mumtaz (Excellent), the blue dot represents grade B, i.e., Jayyid (Good), and the red dot represents grade C and beyond, i.e., Maqbul (Acceptable). As mentioned earlier, the performance data in this report were derived from the tasmik session where the student is evaluated by the teacher.Figure 9
Performance menu.


### 5.2. Alpha Testing

In this section, the results of the alpha testing are discussed in detail. Overall, the testing performed by the participants showed a positive result, although there were suggestions given for improvement. Descriptive statistics were calculated for quantitative measures. Audio recordings and open-ended responses were also reviewed. These are reported in the remainder of this section.


#### 5.2.1. User Acceptance Test

The data of each of the attributes were measured and analyzed based on the index of agreement using the Fleiss kappa coefficient (κ), which was an extension of Cohen’s kappa introduced by Cohen [46]. Fleiss’ kappa [47–49] is a measure of interrater agreement between two or more raters using data in a nominal scale to determine the level or strength of agreement. The ratings are divided into five categories as shown in Table 3.Table 3
Classification of Cohen’s kappa.
Value ofκStrength of agreement<0.21Poor0.21–0.40Fair0.41–0.60Moderate0.61–0.80Good0.81–1.00Very goodSource: Cohen (1960).Group B participants were engaged in carrying out the user acceptance test. Table4 shows the analysis of the participants’ feedback from the user acceptance test.Table 4
Data analysis of user acceptance test.
AttributesPassFailFrequency%Frequency%Function of interactive buttons and navigation4693.8836.124795.9224.084795.9224.08Record status510000510000510000Fleiss’s Kappa coefficient (κ)0.850The results show that the EzHifz application developed is functioning well for the two attributes, namely, the interactive buttons and navigation, as well as the status recorded after the application is closed. The results show that the participant agreement is very good (κ = 0.850, i.e., three participants did agree). This shows that the majority of the participants provide a very good level of agreement concerning the user acceptance test based on the attributes evaluated.


#### 5.2.2. Heuristic Testing

As mentioned in Section4, six (6) participants were engaged in the heuristic testing of the EzHifz application prototype. They are from group A and group B. Table 5 shows the analysis of the participants’ feedback from the attributes provided in the heuristic testing.Table 5
Data analysis of heuristic testing.
ParticipantsAttributesFleiss’s Kappa coefficient (κ)Strength of agreementGroup AContent0.737GoodManual guideMemorization activitiesPerformance informationTasmik assessmentGroup BPresentation design0.727GoodInteractivityMultimedia elementsAttractionMotivationThe results show that both groups agreed that the EzHifz application meets the requirements of design and development based on the attributes evaluated. Group A and group B evaluations show Fleiss’s kappa values of 0.737 and 0.727, respectively. These results show that the majority of the participants provide a good level of agreement of attributes for the items evaluated.The general comments from both groups regarding the content and design of the application were also collected. The following are the three key comments and suggestions from these participants for the betterment of the application.(1)
Clear and precise instruction for using the application environment is required.Although they liked the overall concept of selecting “VARK buttons” (i.e., that allow the user to choose their preferred VARK learning style) for the focusing strategies of learning memorization skills, the participants recognized that our intended users are inexperienced in the new technique introduced in the application. Some comments from them include the following:“…providing a narrator and/or “help” icon in each interface could assist users to easily navigate in the application environment.”“either a demonstration or clear coaching from a researcher would be required to reduce confusion in differentiating between the four modes of learning.”It is noted that the user requires precise instructions when using a new application. These instructions may help users to navigate and use the application. Availability of options like a video demonstration or a help page on using the application may be a way forward to address this issue. However, this needs to be further studied before a decision can be made.(ii)
Allow the application to be more engaging by strengthening teaching and learning.One of the participants suggested“… being able to build a module and training about the flow of the process in the Quran memorization application learning is important so that it will not deviate students from the learning objectives.”“The selection and personalization of the character of the user in terms of their VARK learning style is a way to increase the user application engagement.”All participants agreed that having a choice of the VARK learning style in memorizing the Quran will give options of learning approach for the students to use the application effectively. This availability may be further enhanced by personalizing the application according to the user preferences. This seems to be a good enrichment that could be brought to the application.(iii)
Allow the application to be more attractive through effective design.Several comments were focused on the design and functionality of the multimedia elements used. Below are their comments:“The application should meet the standard interface in the aspect of color, buttons and text.”“.. should have an introductory to inform the user of the objective of using the application.”“The images in the visual mode should differentiate the changing of the color between the segmentation technique used in Quran verses and the translation.”Our first impression was that the application is simple when it was built. However, for a new user who is unfamiliar with the application, a step-by-step guide is still required to navigate and use the application. This implied that a thorough study is needed on the application design before a design decision can be made.


## 5.1. Screen Design

The EzHifz application prototype is a standalone application that was developed for the Android platform. It is an offline application to facilitate individual students to freely access the application without an Internet connection. Surah Al-Insan (verse 76:1–31) from the Quran is used as the content of the prototype. The application contains several graphical user interfaces (GUI) such as home screen, main menu, profile menu, memorization menu, tasmik menu, and performance menu. The following describes each of the user interfaces in the EzHifz application.Figure1 shows the home screen when the application is first launched. EzHifz’s contents were developed in Bahasa Malaysia, the official language of Malaysia. Students may click on the screen to proceed to the main menu. The main menu is shown in Figure 2.Figure 1
Home screen.Figure 2
Main menu.In the main menu, the students are provided with four options, that is, memorization menu (HAFAZAN), performance menu (PRESTASI), tasmik menu (TASMIK), and profile menu (PROFAIL). The remainder of this section will discuss those options.


### 5.1.1. Profile Menu

The profile menu requires students to fill in their personal information such as name (NAMA HUFFAZ), age (UMUR), gender (JANTINA), phone (HUBUNGI), e-mail and category (KATEGORI) (either admin, teacher or student), and class (KELAS) as shown in Figure3.Figure 3
Profile menu.


### 5.1.2. Memorization Menu

Figure4 shows the memorization menu with a full learning mode (V, A, R, and K) being activated. It includes multimedia elements such as images, audio, video, and text. This is where the idea of VARK learning style and memorizing techniques is being integrated.Figure 4
Memorization menu.Integrating the VARK learning style with memorizing techniques such as repetition, keyword, segmentation, visual map, open-closed, pointer, highlighting, and association was implemented in the application to support the process of Quran memorization. The visual mode (V) depicts the translation of the meaning of the Quran verses applying segmentation and association techniques through dividing the verse into two or three small segments of colored objects or images (see the upper right corner of Figure4). The audio mode (A) can be controlled by using the play-pause or play-stop button. This enables a segmentation technique to be implemented while clicking the text or the Quran verse. It may help the student to control the process of memorizing lengthy Quran verses. The reading mode (R) includes the Quran verse and translation in the form of text that also applies segmentation and pointing or highlight techniques. The kinesthetic mode (K) provides a feature of a video of Quran verses using the movement of body motion and gesture. It shows a step-by-step drawing of images using a segmentation technique to enable students to refer to the movement shown in the kinesthetic submenu in Figure 5.Figure 5
Kinesthetic submenu.The open-closed technique is applied to the V, A, R, and K buttons labeled at the right-hand side of the interface. This is to enable the memorization of verses according to individual preferences. For example, if a student wishes to use the visual and reading (V and R) mode as the preference of memorizing the verse, then this option can be activated by clicking V and R buttons. Upon clicking the buttons, the visual and reading modes will appear in the interface as shown in Figure6.Figure 6
VARK Memorization interface showing only “V” and “R” modes being activated.The visual map submenu combines all Quran verses in a single interface with an iconic text and image as a keyword. This is to allow easy navigation between verses either to recall or memorize the Quran. This is shown in Figure7. Students can freely select the verse that he/she wishes to start or continue to memorize from this submenu.Figure 7
Visual map submenu.The performance indicators are also displayed using red, blue, and green colors. These colors serve as a guide to indicate which verses need attention from the student. Red indicates that there is more than one mistake that occurred when the student memorized the Quran. Blue indicates that memorizing has been improved; however, still there is at least one mistake that occurred, while green indicates that there is no mistake. These color indicators are based on the input given by the teacher during the tasmik session.


### 5.1.3. Tasmik Menu

Figure8 shows the tasmik menu. This menu is provided to the teachers to mark the student performance. Tasmik is one of the typical methods used by a teacher to track their students’ progress in Quran memorization. Attributes like the date (TARIKH), surah’s name (SURAH), verse number (AYAT), mode of learning (VARK), number of repetitions (ULANGAN), duration (TEMPOH), grade (GRED), and status are provided. A selection of grade buttons (such as A, B, C, D, and E) is given by the teacher to determine the student’s current performance in memorizing each of the Quran verses. These grades are equivalent to the “status” which is represented in color. Grade A is equivalent to green color and grade B is equivalent to blue, while grade C and beyond will be represented by red color. A teacher can access the menu by using a password as authentication. This is to maintain the integrity of the grades.Figure 8
Tasmik menu.


### 5.1.4. Performance Menu

Figure9 shows the performance menu that displays the report of the student’s evaluation. It tracks the date (TARIKH), surah’s name (SURAH), verse number (AYAT), mode of learning (VARK), number of repetitions (ULANGAN), duration (TEMPOH), and performance status. The performance is indicated in color. The green dot represents grade A, i.e., Mumtaz (Excellent), the blue dot represents grade B, i.e., Jayyid (Good), and the red dot represents grade C and beyond, i.e., Maqbul (Acceptable). As mentioned earlier, the performance data in this report were derived from the tasmik session where the student is evaluated by the teacher.Figure 9
Performance menu.


## 5.1.1. Profile Menu

The profile menu requires students to fill in their personal information such as name (NAMA HUFFAZ), age (UMUR), gender (JANTINA), phone (HUBUNGI), e-mail and category (KATEGORI) (either admin, teacher or student), and class (KELAS) as shown in Figure3.Figure 3
Profile menu.


## 5.1.2. Memorization Menu

Figure4 shows the memorization menu with a full learning mode (V, A, R, and K) being activated. It includes multimedia elements such as images, audio, video, and text. This is where the idea of VARK learning style and memorizing techniques is being integrated.Figure 4
Memorization menu.Integrating the VARK learning style with memorizing techniques such as repetition, keyword, segmentation, visual map, open-closed, pointer, highlighting, and association was implemented in the application to support the process of Quran memorization. The visual mode (V) depicts the translation of the meaning of the Quran verses applying segmentation and association techniques through dividing the verse into two or three small segments of colored objects or images (see the upper right corner of Figure4). The audio mode (A) can be controlled by using the play-pause or play-stop button. This enables a segmentation technique to be implemented while clicking the text or the Quran verse. It may help the student to control the process of memorizing lengthy Quran verses. The reading mode (R) includes the Quran verse and translation in the form of text that also applies segmentation and pointing or highlight techniques. The kinesthetic mode (K) provides a feature of a video of Quran verses using the movement of body motion and gesture. It shows a step-by-step drawing of images using a segmentation technique to enable students to refer to the movement shown in the kinesthetic submenu in Figure 5.Figure 5
Kinesthetic submenu.The open-closed technique is applied to the V, A, R, and K buttons labeled at the right-hand side of the interface. This is to enable the memorization of verses according to individual preferences. For example, if a student wishes to use the visual and reading (V and R) mode as the preference of memorizing the verse, then this option can be activated by clicking V and R buttons. Upon clicking the buttons, the visual and reading modes will appear in the interface as shown in Figure6.Figure 6
VARK Memorization interface showing only “V” and “R” modes being activated.The visual map submenu combines all Quran verses in a single interface with an iconic text and image as a keyword. This is to allow easy navigation between verses either to recall or memorize the Quran. This is shown in Figure7. Students can freely select the verse that he/she wishes to start or continue to memorize from this submenu.Figure 7
Visual map submenu.The performance indicators are also displayed using red, blue, and green colors. These colors serve as a guide to indicate which verses need attention from the student. Red indicates that there is more than one mistake that occurred when the student memorized the Quran. Blue indicates that memorizing has been improved; however, still there is at least one mistake that occurred, while green indicates that there is no mistake. These color indicators are based on the input given by the teacher during the tasmik session.


## 5.1.3. Tasmik Menu

Figure8 shows the tasmik menu. This menu is provided to the teachers to mark the student performance. Tasmik is one of the typical methods used by a teacher to track their students’ progress in Quran memorization. Attributes like the date (TARIKH), surah’s name (SURAH), verse number (AYAT), mode of learning (VARK), number of repetitions (ULANGAN), duration (TEMPOH), grade (GRED), and status are provided. A selection of grade buttons (such as A, B, C, D, and E) is given by the teacher to determine the student’s current performance in memorizing each of the Quran verses. These grades are equivalent to the “status” which is represented in color. Grade A is equivalent to green color and grade B is equivalent to blue, while grade C and beyond will be represented by red color. A teacher can access the menu by using a password as authentication. This is to maintain the integrity of the grades.Figure 8
Tasmik menu.


## 5.1.4. Performance Menu

Figure9 shows the performance menu that displays the report of the student’s evaluation. It tracks the date (TARIKH), surah’s name (SURAH), verse number (AYAT), mode of learning (VARK), number of repetitions (ULANGAN), duration (TEMPOH), and performance status. The performance is indicated in color. The green dot represents grade A, i.e., Mumtaz (Excellent), the blue dot represents grade B, i.e., Jayyid (Good), and the red dot represents grade C and beyond, i.e., Maqbul (Acceptable). As mentioned earlier, the performance data in this report were derived from the tasmik session where the student is evaluated by the teacher.Figure 9
Performance menu.


## 5.2. Alpha Testing

In this section, the results of the alpha testing are discussed in detail. Overall, the testing performed by the participants showed a positive result, although there were suggestions given for improvement. Descriptive statistics were calculated for quantitative measures. Audio recordings and open-ended responses were also reviewed. These are reported in the remainder of this section.


### 5.2.1. User Acceptance Test

The data of each of the attributes were measured and analyzed based on the index of agreement using the Fleiss kappa coefficient (κ), which was an extension of Cohen’s kappa introduced by Cohen [46]. Fleiss’ kappa [47–49] is a measure of interrater agreement between two or more raters using data in a nominal scale to determine the level or strength of agreement. The ratings are divided into five categories as shown in Table 3.Table 3
Classification of Cohen’s kappa.
Value ofκStrength of agreement<0.21Poor0.21–0.40Fair0.41–0.60Moderate0.61–0.80Good0.81–1.00Very goodSource: Cohen (1960).Group B participants were engaged in carrying out the user acceptance test. Table4 shows the analysis of the participants’ feedback from the user acceptance test.Table 4
Data analysis of user acceptance test.
AttributesPassFailFrequency%Frequency%Function of interactive buttons and navigation4693.8836.124795.9224.084795.9224.08Record status510000510000510000Fleiss’s Kappa coefficient (κ)0.850The results show that the EzHifz application developed is functioning well for the two attributes, namely, the interactive buttons and navigation, as well as the status recorded after the application is closed. The results show that the participant agreement is very good (κ = 0.850, i.e., three participants did agree). This shows that the majority of the participants provide a very good level of agreement concerning the user acceptance test based on the attributes evaluated.


### 5.2.2. Heuristic Testing

As mentioned in Section4, six (6) participants were engaged in the heuristic testing of the EzHifz application prototype. They are from group A and group B. Table 5 shows the analysis of the participants’ feedback from the attributes provided in the heuristic testing.Table 5
Data analysis of heuristic testing.
ParticipantsAttributesFleiss’s Kappa coefficient (κ)Strength of agreementGroup AContent0.737GoodManual guideMemorization activitiesPerformance informationTasmik assessmentGroup BPresentation design0.727GoodInteractivityMultimedia elementsAttractionMotivationThe results show that both groups agreed that the EzHifz application meets the requirements of design and development based on the attributes evaluated. Group A and group B evaluations show Fleiss’s kappa values of 0.737 and 0.727, respectively. These results show that the majority of the participants provide a good level of agreement of attributes for the items evaluated.The general comments from both groups regarding the content and design of the application were also collected. The following are the three key comments and suggestions from these participants for the betterment of the application.(1)
Clear and precise instruction for using the application environment is required.Although they liked the overall concept of selecting “VARK buttons” (i.e., that allow the user to choose their preferred VARK learning style) for the focusing strategies of learning memorization skills, the participants recognized that our intended users are inexperienced in the new technique introduced in the application. Some comments from them include the following:“…providing a narrator and/or “help” icon in each interface could assist users to easily navigate in the application environment.”“either a demonstration or clear coaching from a researcher would be required to reduce confusion in differentiating between the four modes of learning.”It is noted that the user requires precise instructions when using a new application. These instructions may help users to navigate and use the application. Availability of options like a video demonstration or a help page on using the application may be a way forward to address this issue. However, this needs to be further studied before a decision can be made.(ii)
Allow the application to be more engaging by strengthening teaching and learning.One of the participants suggested“… being able to build a module and training about the flow of the process in the Quran memorization application learning is important so that it will not deviate students from the learning objectives.”“The selection and personalization of the character of the user in terms of their VARK learning style is a way to increase the user application engagement.”All participants agreed that having a choice of the VARK learning style in memorizing the Quran will give options of learning approach for the students to use the application effectively. This availability may be further enhanced by personalizing the application according to the user preferences. This seems to be a good enrichment that could be brought to the application.(iii)
Allow the application to be more attractive through effective design.Several comments were focused on the design and functionality of the multimedia elements used. Below are their comments:“The application should meet the standard interface in the aspect of color, buttons and text.”“.. should have an introductory to inform the user of the objective of using the application.”“The images in the visual mode should differentiate the changing of the color between the segmentation technique used in Quran verses and the translation.”Our first impression was that the application is simple when it was built. However, for a new user who is unfamiliar with the application, a step-by-step guide is still required to navigate and use the application. This implied that a thorough study is needed on the application design before a design decision can be made.


## 5.2.1. User Acceptance Test

The data of each of the attributes were measured and analyzed based on the index of agreement using the Fleiss kappa coefficient (κ), which was an extension of Cohen’s kappa introduced by Cohen [46]. Fleiss’ kappa [47–49] is a measure of interrater agreement between two or more raters using data in a nominal scale to determine the level or strength of agreement. The ratings are divided into five categories as shown in Table 3.Table 3
Classification of Cohen’s kappa.
Value ofκStrength of agreement<0.21Poor0.21–0.40Fair0.41–0.60Moderate0.61–0.80Good0.81–1.00Very goodSource: Cohen (1960).Group B participants were engaged in carrying out the user acceptance test. Table4 shows the analysis of the participants’ feedback from the user acceptance test.Table 4
Data analysis of user acceptance test.
AttributesPassFailFrequency%Frequency%Function of interactive buttons and navigation4693.8836.124795.9224.084795.9224.08Record status510000510000510000Fleiss’s Kappa coefficient (κ)0.850The results show that the EzHifz application developed is functioning well for the two attributes, namely, the interactive buttons and navigation, as well as the status recorded after the application is closed. The results show that the participant agreement is very good (κ = 0.850, i.e., three participants did agree). This shows that the majority of the participants provide a very good level of agreement concerning the user acceptance test based on the attributes evaluated.


## 5.2.2. Heuristic Testing

As mentioned in Section4, six (6) participants were engaged in the heuristic testing of the EzHifz application prototype. They are from group A and group B. Table 5 shows the analysis of the participants’ feedback from the attributes provided in the heuristic testing.Table 5
Data analysis of heuristic testing.
ParticipantsAttributesFleiss’s Kappa coefficient (κ)Strength of agreementGroup AContent0.737GoodManual guideMemorization activitiesPerformance informationTasmik assessmentGroup BPresentation design0.727GoodInteractivityMultimedia elementsAttractionMotivationThe results show that both groups agreed that the EzHifz application meets the requirements of design and development based on the attributes evaluated. Group A and group B evaluations show Fleiss’s kappa values of 0.737 and 0.727, respectively. These results show that the majority of the participants provide a good level of agreement of attributes for the items evaluated.The general comments from both groups regarding the content and design of the application were also collected. The following are the three key comments and suggestions from these participants for the betterment of the application.(1)
Clear and precise instruction for using the application environment is required.Although they liked the overall concept of selecting “VARK buttons” (i.e., that allow the user to choose their preferred VARK learning style) for the focusing strategies of learning memorization skills, the participants recognized that our intended users are inexperienced in the new technique introduced in the application. Some comments from them include the following:“…providing a narrator and/or “help” icon in each interface could assist users to easily navigate in the application environment.”“either a demonstration or clear coaching from a researcher would be required to reduce confusion in differentiating between the four modes of learning.”It is noted that the user requires precise instructions when using a new application. These instructions may help users to navigate and use the application. Availability of options like a video demonstration or a help page on using the application may be a way forward to address this issue. However, this needs to be further studied before a decision can be made.(ii)
Allow the application to be more engaging by strengthening teaching and learning.One of the participants suggested“… being able to build a module and training about the flow of the process in the Quran memorization application learning is important so that it will not deviate students from the learning objectives.”“The selection and personalization of the character of the user in terms of their VARK learning style is a way to increase the user application engagement.”All participants agreed that having a choice of the VARK learning style in memorizing the Quran will give options of learning approach for the students to use the application effectively. This availability may be further enhanced by personalizing the application according to the user preferences. This seems to be a good enrichment that could be brought to the application.(iii)
Allow the application to be more attractive through effective design.Several comments were focused on the design and functionality of the multimedia elements used. Below are their comments:“The application should meet the standard interface in the aspect of color, buttons and text.”“.. should have an introductory to inform the user of the objective of using the application.”“The images in the visual mode should differentiate the changing of the color between the segmentation technique used in Quran verses and the translation.”Our first impression was that the application is simple when it was built. However, for a new user who is unfamiliar with the application, a step-by-step guide is still required to navigate and use the application. This implied that a thorough study is needed on the application design before a design decision can be made.


## 6. Conclusion and Future Work

Overall, the alpha testing conducted helped to improve the quality of the application. This application has been designed and developed as a tool to evaluate the Quran memorization model presented in [39]. The evaluation results proved that it is possible to integrate the VARK learning style with memorization techniques. Choosing the right VARK student learning style inclination in using the application may create a stimulating and effective learning environment for students.The development of an attractive application interface also may enhance students’ motivation as well as features that are easily accessible offline. The application also allows for the self-exploration of learning without the help of a teacher. This model may be suitable to be implemented in other domains that have a similar practice to this study; however, further studies are needed to be done to confirm this claim.The next stage of this research is to leverage the comments captured from the participants. Improvements to the application will be done and the prototype will be evaluated with a group of potential students to study the usability of the application. This includes assessing the efficiency, effectiveness, learnability, acceptability, and user satisfaction towards the application in a real environment to aid the Quran memorization among students.



---

*Source: 5567001-2021-05-11.xml*