Integrating Islamic Knowledge into Multimedia-Based Supplementary Listening Materials

The purpose of this study was to develop a Listening Courseware as Supplementary Listening Materials which embed Islamic knowledge. In developing the final product, the framework of developmental model by Koper was adapted [1]. The final product was a listening courseware in flash application form accompanied by reflective learning journal. It consists of 4 units of different themes and different authentic listening situations which were arranged on the basis of difficulty levels. Each of the unit involve pre-whilst, and post-listening which were designed based on the theory of communicative approach. The division will guide students through the mental processes for successful listening comprehension, and promote the acquisition of metacognitive strategies in planning, monitoring, and evaluating. Apropos the communicative approach, although linguistic, pragmatic, strategic, intercultural, and discourse competences may naturally be acquired through listening practice, each of them is emphasized in some way. It also enclosed Islamic knowledge to support the vision of the university which is to be an internationally excellent university which is future-oriented in terms of science, technology, and culture for the benefit of those with akhlaqul karimah based on Islam Ahlussunnah waljama'ah


Introduction
Listening skill often receives little attention from high school English teachers, resulting in students' lack of listening exposure and learning autonomy when they study in university. It is in line with the way Nunan labeled listening as the Cinderella skill in second language learning [2]. It remains somewhat neglected in English Language Teaching. As a matter of fact, listening comprehension is the indispensable precursor to speaking [3]. Language production becomes viable only after the corresponding receptive skill is learned. Persons cannot learn to write until they have learned to read and they cannot learn to speak until after they comprehend what they listened to [3]. More importantly, persons exercise their receptive skills much more than their productive skills in their daily lives. As a receptive skill, listening is used considerably more than reading, writing, or speaking [4]. At all levels, listening is perceived as crucial for communication.
On top of that, listening is a complex process. Unlike the traditional theory that views listening as passive process, now its definition has been broadened to a more active and interpretive process [5] [7]. Listening involves a range of active processes under the control of the listener. The listener must discriminate between sounds, understand vocabulary and grammatical structures, interpret stress and intonation, retain what was gathered in all of the above, and interpret it within the immediate as well as the larger socio cultural context of the utterance [7]. Moreover, according to Meskill, the complexity of listening increases in second language [8].
Due to the importance and the complexity of listening, students need a lot of practice. Students will be fluent in second language only if there is a large amount of input [9]. The more the students listen, the better they understand speech. However, not all of English language learners have the opportunity to practice listening. Such insufficient opportunities are also faced by the students of Unisma (Islamic University of Malang).
Since the researchers do not have the authority to do changes related to the teaching and learning activities, like scheduling additional meetings or doing some changes in the main materials, then developing supplementary materials are considered as the appropriate way to help students improve their listening skill and to encourage them more in doing autonomous listening practice. A good way to present supplementary listening materials is by using multimedia due to its great potential. Weller opines that computer technology and its attached language learning program can enliven materials by making students interact with them, promote active learning due to its interactivity, demonstrate ideas that are difficult to explain in text, promote exploratory learning by providing simulations, ease the students in controlling, and allow students to explore impossible or expensive scenarios [10]. Computer assisted language learning could also provide a stress-free environment for learners and make them more responsible [11]. It can also be used to reinforce what has been learned in the classrooms and as remedy to help learners with limited language proficiency [12] .
In terms of computer facility, English Department students of Unisma are basically advantaged as they are provided with Self-Access Center in which the computers and all the devices are free to use for study purposes. Since the technological resources are already there, then it won't be a trouble what Gips, Di Mattia, and Gips are concerned with, that CALL will increase educational costs in an educational institution [13]. In addition, based on informal observation, all the students are computer literate. This means that Lei suggestion on the need of learners to learn basic technology knowledge prior to applying computer technology to assist second language teaching and learning is accomplished [14].
The result of this study was expected to be beneficial for the students and lecturers. For the students, it was expected to be a worthwhile learning tool that facilitates them in learning listening, familiarizes them with some natural discourse, informs them about some linguistic rules, lets them know some information about foreign culture, and also relates the materials with religious values contributing positively to character building. The media also show them the right strategy in listening comprehension which hopefully can encourage them to do more autonomous listening practice. Students can study without the teachers' presence and it gives them the option to study anytime and anywhere. For the teachers, it is expected that the courseware provides an alternative of teaching listening media.

Method
In developing the courseware, this research and development (R&D) adapts the framework of developmental model by Koper whose specialization is courseware development [1]. This product-oriented method, integrates instructional design methods and techniques with software engineering methods and techniques. However, not all of the steps are compatible with this study. Therefore, the modified version of PROFIL by Yaniafari was adopted [15].
The procedure of the development was classified into three stages: 1. Pre-development 2. Developing the draft of the product 3. Producing the final product.
The only phase in the pre-development stage was preliminary investigation. The second stage, developing the draft of the product, involved definition and script phases. Producing the final product, as the last stage, covered technical realization phase which comprised several steps: 1. Editing Audio-Visual materials 2. Making the technical design of the application 3. Programming an early version of the application 4. Entering the content 5. Completing the graphical design of the early version 6. Validation and revision. Figure 1 shows the complete flow and the classification of the phases. Pre-development initiated the process of the product development. Preliminary investigation is the only phase in pre-development. In this phase, the researchers were concerned with the general design of the course. Several processes preceded the course plan construction, i.e.
1. Formulating the objectives of the course 2. Identifying the target group 3. Deciding the didactic scenario of the course 4. Selecting which elements of the didactic scenario would be implemented in the media.
In formulating the objectives of the course, the researchers consulted the courseoutline of the Listening II course and other listening theories. To identify the target group characteristics, a need assessment was conducted. The need assessment used two methods, observation and questionnaires. The observation was conducted to know the students' level of listening proficiency based on ACTFL (American Council on the Teaching of Foreign Languages) proficiency guidelines [16]. Apropos the questionnaires, it consisted of four components: students' computer literacy, previous listening experience, problem in learning listening, also their interest in terms of topic, layout, and type of questions. Prior to distribution to the students of Unisma, as it is suggested by McCawley, the questionnaire was reviewed and a pilot test was conducted to refine the instrument [17]. After the pre-development stage, the draft development stage was conducted. In this stage, the complete draft, both content and design, was produced. Definition phase and script phase were included to this stage. In the definition phase, project plan per medium application was created in which the planning was made in more detail than in the previous phase. The script phase is almost the same as the previous phase, but more detail design was planned. The key to script phase is finding the various scripts needed to make the desired design come to fruition.
The last stage is producing the final product. It consisted only technical realization. Through this stage, the provided draft was transferred to a final multimedia product. It comprised editing audio-visual components, technical design, content entry, validation, and the final product.
In this research, three kinds of validation were established, which were peer-review, expert validations (validations by practitioner, expert in media, and expert in material), and product try out. After each of the validation, the product was revised until it became a well validated product.

Findings
In the preliminary investigation, two steps were conducted to know the students characters and need. The first is direct visits to observe the students' listening skill level. The second one is questionnaire. The result of the observation revealed that students' listening skill varied from Novice High to Intermediate Mid. The questionnaires which were administered to total 57 students informed about: students' computer literacy, previous listening experience, problem in learning listening, and their interest in terms of topic, layout, and type of questions. Those data were then used as the basis of product development.
The product that had been developed based on the result of preliminary investigation then was validated through five methods: The result of peer, practitioner, and expert judgments as well as the result of Product Try Out were used as the basis of revision.
Five fellow graduate students were asked to review the media. Some suggestions from this process were noted. The first suggestion is about the length of the video. Video in unit 2 was considered too long that it can make students bored, thus the video was then shortened. The reviewer also found some buttons that didn't do any action whenever it's pressed and a "next page" button in pre-listening section which was unclear. The dysfunctional buttons were then fixed and the unclear button which formerly only a picture of folded paper tip to a clearer one by using a labeled arrow (See Figures 2 and 3). The practitioner who validated the product was a lecturer of Unisma who knew the characteristics of the students. The aspects evaluated were Content, Instructional Design, and Language. The practitioner confirmed strongly that the content and instructional design aspects of all 4 units were appropriate; yet she argued that students need more difficult vocabulary exercises. Because of this, the video script was reviewed again, and the vocabulary items prone to be difficult were noted. To confirm the difficulty level of the vocabulary, the vocabulary ranks were verified by using http://www.wordcount.org/main.php. Only those who rank above 3000 were subsequently included in the vocabulary exercise.
Apropos the validation by expert in media, an IT graduate who has years of experience in web-coding was asked to validate the product in terms of the choice of medium, user control, and the design of the media. For the choice of the medium, the expert stated that the use of multimedia and flash animation is appropriate, for it can ease the learner to play the video and audio. Yet, there was a number of user interfaces which needed to be redesigned. The issues that required user-interface redesign were: 1. The inconsistency of the position and shape of the buttons in each unit 2. The user difficulties in understanding the sequence of the media 3. The absence of feature in the video player that allows users to go backward and forward to certain part of the video without having to replay the video all over again 4. The inappropriateness of color combination in Tutorial menu 5. The lack of resolution in display video 6. The heavily ornamented layout design 7. The user unfamiliarity with the position of video control button.
To solve issue number 1 and 6, the layout of post-listening pages were simplified and made nearly identical. It was in line with the suggestion of the expert of media to strive for consistency in button shape and position; however the suggestion to uniform the background and excludes the animation were not completely acted upon. It was due to the result of need analysis that shows students' preference in theme variation and animation. Figure 4 to 7 show some of the changes in the design.   To solve issue number 2, the expert expected a redesign that would ease the users in understanding the sequence of the media. It was then resolved by an additional page that informs the sequence and allows the users to go to one page to another within the same unit. Problem number 3 (the absence of feature in the video player that allows users to go backward and forward to certain part of the video without having to replay the video all over again), 5 (the lack of resolution in display video), and 7 (the user unfamiliarity with the position of video control button) could be answered by attaching Simple Video FLV Player to the page. This video player allows user to go at any point in the video, the skin of the player is also user-familiar, and it can play external video without compressing it nor decreasing the video resolution. Figure 8 and 9 is the picture of whilst-listening page before and after revision.    Fig. 11. "About" Page After A lecturer of English Department Universitas Negeri Malang, was asked to evaluate each unit of the media in terms of content, instructional design, and language. For the general comments, the materials with moral lessons were considered interesting. The use of multimedia and audiovisual materials really made the materials more interesting. The organization of the materials was also systematic. Yet, some improvements were needed due to: 1. The absence of some words or phrases in vocabulary focus exercises, 2. The lack of item variation in vocabulary focus exercise, 3. The inverted order of Unit I and II, 4. A number of unfamiliar vocabulary and terms in the video, 5. Several ambiguous question and ineffective distracters in comprehension exercises 6. Inadequacy or error in post-listening passages.
The improvements concerning the vocabulary focus activities were done by including the word "ignorance" and others in vocabulary focus unit II; also varying the type of the task with matching and clicking map questions. These improvements solved problems 1 and 2. The change in the arrangement of the material was also done to solve problem 2. Actually, a number of factors had been considered as the basis of the order of the materials. However, the factors mentioned by the expert were worth to contemplate. The material in Unit II (talk) was a monologue while Unit I (movie scene) involved dialogues which needed greater effort to comprehend. The expert also stated that Unit II (talk) had slower speech rate compared to Unit I (movie scene). The speech rate had been calculated before by dividing the number of words by the length of the video; but the researchers failed to take the break between conversational turn into consideration. A certain part of video in Unit III was omitted to solve problem 4. The part of the video was considered rather insignificant and contained too many difficult vocabulary.
The Product Try Out was conducted on the 17th of June, 2014. The product was tested to 48 students of Listening II classes in Unisma. The students were given brief information about the product prior to the Product Try Out. After they had finished trying out the developed media, they were required to fill in the 4-point likert-scale questionnaire asking students judgment in terms of practicality, students' appropriateness, instructional appropriateness, and presentation.
The first part of the questionnaire was directed to know the practicality of the media. Two items were included in this part. Students' response to the first item confirmed that the media was easy to operate. Given a 4-point Likert-scale, the average of the response was 3.27. However, when they forgot the instruction, the students often forgot that there was a figure serving as the guide in the corner of the page. Therefore, additional label was added (See figure 12 and 13). The second item asked about the portability of the media, that the students could learn by using the media anytime and anywhere. The average of students' response were 3.23, with the least response 1 meant disagree and the highest was 4 which meant strongly agree. The second part of questionnaire was designed to record information whether the media was appropriate for the students' level and interest. The score for the students' interest of the topic was 3.21. The response varied from 3 (interesting) to 4 (very interesting), and none of the students stated that the topic was 1 (uninteresting). In terms of difficulty level, 2.71 was the average response for the video; 2.73 for the comprehension exercises; and 3.02 for the language of the instruction. The ranges of students' response from 2 (slightly difficult) to 3(easy) proved that the level of difficulties was appropriate, as it was neither too difficult nor too easy for the students.
Two items in the third part of the questionnaire were intended to know whether the media facilitates the students' learning. The first item asking helpfulness of the media was responded positively by the students; it scored 3.35. As for the second item asking whether the media encourages students to learn scored 3.33.
The last aspect in the questionnaire, the presentation aspects, include the attractiveness of the layout and the clarity of the text, audio, and video. Being asked about their interest on the layout, the average score for students' response were 3.44. Twenty five of the students responded 3 (interesting), 21 responded 4 (very interesting), and only 3 students stated that it was slightly uninteresting. Those three students demand more interesting animation, as they feel bored when reading the post-listening passages. To solve the first issue, some illustrations were added in post-listening pages to catch the students' eyes (See figure 14-15). About the clarity of the text, audio, and video; the average students' responses were consecutively 3.33, 3.31, and 3.42.

Discussion
Among many options in providing listening material (e.g. printed materials and online), it uses multimedia for it is determined to be an excellent way of delivering instructional material [18]- [20]. Different factors contribute to the excellence of using multimedia as the learning medium. It can be attributed mainly to dual coding of the information [21] or as the combination of the dual channel, limited capacity, and active learning assumptions [22].
Taking into account that the success of technology uses lies in the design [23], product strived for design that suits students' need and want. The design was based on the data from the questionnaire administered prior to the product development, yet still adhered to the user-interface design principles. Thence, it conforms to user preference and the criteria of good media. Apropos the model of development used to bring the design into fruition, PROFIL was used rather than the other developmental. Since it used PROFIL whose specialization is courseware development, then the steps conducted in developing the product is holistic, involving details in content making and technical steps.
As most listening materials are purposely made for instructional material, they rarely represent the authentic spoken discourse which is complex and involving particular features. Unlike those listening materials, this media made use of authentic materials provided widely in the internet. A number of videos were downloaded mainly from youtube. The downloaded videos were not simply any video, rather they those which satisfy certain criteria. They had to fit into one of the 5 students' most favorite theme and four different transactional listening situations. The video included in the media had been through two video selection phases, the selection by the researchers and the selection by freshman undergraduate students.
Each of the video then was transformed into a full unit of listening material based on basic framework on contrasting listening lesson and communicative approach. Each unit involves three main stages: 1. Pre-listening 2. Whilst listening 3. Post-listening [7], [24] [26].
The division will guide students through the mental processes for successful listening comprehension, and promote the acquisition of metacognitive strategies in planning, monitoring, and evaluating. Apropos the communicative approach, although linguistic, pragmatic, strategic, intercultural, and discourse competences may naturally be acquired through listening practice, each of them is emphasized in some way. Furthermore, it also enclosed Islamic knowledge to support the vision of the university which is to be an internationally excellent university which is future-oriented in terms of science, technology, and culture for the benefit of those with akhlaqul karimah based on Islam Ahlussunnah waljama'ah An-Nahdliyah.
In the beginning of each unit, an Islamic quote is displayed to gear the user's mind into the Islamic aspect of the material to learn. Then, to build users' curiosity, a social context is established, thus when watching the video later, users will not only practicing their listening comprehension, but also enjoy the material as there is a social purpose in it. Here is the example of the social context given in unit II: "This movie goes viral among university students of educational field. People talking about this movie make you wonder about what makes people love it and feel the need to watch it. We have found scenes of the movie for you. Here it is!".
Subsequent to the Islamic quote and social context, the pre-listening part introduces the users to any background information needed prior to watching the video and provides them with vocabulary focus activity. To make sure that students know the pronunciation of the word, the vocabulary focus activity are accompanied by voiceover. Since British and American Accent are different for some vocabulary, the accent of voiceover was based on the accent of the video. Aside from vocabulary focus activity, pre-listening is also provided before-listening checklist to familiarize users with the right pre-listening strategy as strategic competence is part of communicative competence.
Following pre-listening, then the users come to the whilst-listening part. This is where the video is displayed. The users are free to pause, play, stop, or replay the video as much as they want. There is also feature that allows user to go backward and forward to certain part of the video without having to replay the video all over again. The script of the video player lets the video played through external link, so the videos are still in their genuine quality without any size compression that would diminish the resolution. Comprehension exercises attached in this part are accompanied by automatic assessment feature that let students know their score only with one-click. All those features provide stress-free environment that minimizes the problems that often discourage users in listening such as bad audio quality, too fast conversation, invisibility of the speaker, and inability to repeat the audio.
To improve the linguistic competence, the post-listening part provides "more from the video" section explaining certain linguistic aspect of the video. To add knowledge about culture, "Peep into the Culture" section is offered. It explains certain cultural aspect of the video. During the product try out, students looked enthusiastic when reading this part. Beside passages about linguistic and culture, "What Islam Says" Section is also provided in post-listening part to inform the students about how Islam views a certain aspect of the video. Voiceover is also there together with written passages to familiarize students with the pronunciation. Some illustrations are also given next to the texts to make them more attractive and clearer. After users finish doing each unit, they are required to fill out the after-listening checklist and reflection form to be familiar with proper after-listening strategy.
Despite the good features of the media, there are still some frailties that need considering for future modifications or research. The first is about the level of difficulties. The product has tried to provide 4 materials with different difficulty level that cope with novice-high to intermediate-mid users. Yet, since it only covers 4 units, the span between one unit to another might need a slightly greater level change in students' listening skill. Thence, the lower level students might find challenging when doing the entire units successively. The second issue is related to the voiceover. When designing the media, the researchers has two feasible method options in providing the voiceover, inserting manually-recorded non-native voice with proper intonation, or using native text-to-speech apparatus with flat intonation. Since the objective of Listening II course is "to familiarize students with oral extended native speakers" and the text-to speech voice assumed to have better pronunciation accuracy, then the second option was chosen and the intonation was overlooked. The third issue is concerned with the Islamic terms. In post-listening part, "What Islam Says" section, there are several low-frequency specific terms that cannot be simplified, such as "benefaction" and "humble acceptance". To help the students understand the vocabulary, there have been Islamic terms put beside them, like "benefaction [ni'mah]" and "humble acceptance [istikana]". However, students might still find it difficult to understand, and the product try out had failed to see whether this assumption is right or wrong.

Conclusion
By looking at the features and the content of the developed product, the students can fully utilize the media for self-study since it has been designed mainly for that purpose. However, as another alternative to teaching listening, the teacher could also adapt a teaching model "listening-based learning for overall language development' described by Guo and Wills [27]. The pedagogical approach is a combination of face-to-face teaching, and encouragement of students' autonomous learning. At the beginning period of the first term, the teacher guided students in setting up learning groups. Then the teachers and students identified learning objectives for each unit and design teaching activities. The teacher could monitor the result of self-study through the learning journal.
For the future researchers who would like to conduct research on similar topics, it is suggested to provide material for other listening competence level with wider choice of difficulties, and find a way to make the media accessible through android mobile phone since students expected it. As in this study the researchers were required to redesign the lay-out which doubled the allotted time for lay-out design; in developing multimediabased materials, if the researcher also serves as the lay-out designer, it is suggested to consult the principles of user-interface design from the beginning of the assembly.