ISSN : 2579-5724 ISSN : 2579-5260 (Online) http://ejournal.umm.ac.id/index.php/MEJ 62 Mathematics Education Journals Vol 3 No. 1 February 2019 Development of Web-Based Interactive Learning Media on Lines and Angles Material in 7th grade of Junior High School Vina Novianti, Dwi Priyo Utomo, Mayang Dintarini Study Program of Mathematics Education Faculty of Teacher Training and Education, University of Muhammadiyah Malang vinanovianti2@gmail.com Abstract This research aimed at: 1) analyzing and describing the development of web- based interactive learning media, 2) analyzing and describing the effectiveness of web- based interactive learning media. The approach of this research was descriptive quantitative. The subjects of this research were the students of 7th grade of Junior High School. The instruments that used were the validation sheets of media and material experts, students’ response questionnaires, and test. The data analysis was done by calculating the score of each indicator to find out the validity, students’ responses, and the students’ learning outcomes. Based on the validation result that obtained from the analysis of media validation, it was obtained the averages of 3,56 and it was very valid and the result of material validation analysis obtained the averages of 3,29 that meant valid. Therefore, the learning media was stated as proper to be tested. However, the analysis result of students’ response analysis was obtained the averages of 87%, in which the learning media got very good response both of students and the students’ learning outcomes that showed the percentages of students achieved the KKM (Minimum Completeness Criteria) in the score of 75 as much as 100% with a very high criterion. Therefore, the web-based interactive learning media was stated as effective and could be used in the learning process. Keywords: Development, Interactive Learning Media, Web, Effective. INTRODUCTION In the development of technology, it is not doubtful that internet has an important role as the spreading information. The convenience of technology will bring the advantages and positive effects if it is used clearly and positively. In the education field, there are a lot of utilization of learning media that designed in the form of web (Fariz, Ajie & Duskarnaen, 2014). In mathematics learning of Junior High School, there is a material of lines and angles, of which material are still difficult to be understood by the students. Along with the problem, it is needed a solution for increasing the interest and also the students’ understanding in the learning process of lines and angles material. The initial results of observation and interview with the mathematics teacher of Christian Junior High School of on May 18th, 2018, it was obtained the information that the teacher used lectured method and the media used was PowerPoint in the learning process. PowerPoint, that used, was still 80% containing the words and the background display was too dark, so that the students were less focus to pay attention on that PowerPoint. The school facilities were adequate, there were classes that facilitated with projector and internet access, in which it could support the mathematics learning process. Looking for the above phenomena, the researcher intends to do a research about the web-based interactive learning media. The web-based learning media is a media that prepared, established, to be implemented on the teaching by using web. This media is presented by multimedia, so that in the learning will be interesting if the multimedia used gives an interactive mailto:vinanovianti2@gmail.com ISSN : 2579-5724 ISSN : 2579-5260 (Online) http://ejournal.umm.ac.id/index.php/MEJ 63 Mathematics Education Journals Vol 3 No. 1 February 2019 activity (Darmawijoyo, 2011). The interactive learning media is a learning media that not only present the material, texts, voice, and videos but also give active responses, and also the speed of material presenting based on the media user (Arsyad, 2013). The web-based learning media is stated attractive if the students feel comfortable in using the web media in the learning process. Moreover, the web-based interactive learning can facilitate the students to access any learning materials, because it includes of many contents in the form of texts, voices, pictures, animation, videos, and many more. Therefore, the researcher intends to conduct a research entitle “Development of Web-Based Interactive Learning Media on Lines and Angles Material in 7th grade of Junior High School”. RESEARCH METHOD The research about the development of web-based interactive learning media on lines and angles material in 7th grade of Junior High School was a Research and Development. The development stages were: 1) potential and problem, by interviewing the mathematics teacher and giving the questionnaires to the students in order to collect the information about the important of media, 2) data collection by determining the basic competence and formulating the indicators, 3) product design was the making of flowchart, storyboard, and the web by using the notepad++ and adobe flash cs4 software, 4) product validation, the media, that had been made, would be validated by the experts, of which experts consisted of media expert and material expert. The purpose of this stage was to find out the validity and quality of the media before it would be trialed to the students, 5) design revision, it was conducted if in the validity stage was needed a revision, 6) product trial, it was conducted by implementing the learning media to the students, giving the response questionnaires, and test, 7) product revision, it was conducted if in the trial stage was found the lacks of it. The subjects of this research were the 7th grade students of Christian Junior High School of St. Albertus Donomulyo, of which subjects were 20 students. The data collection technique used the questionnaires and test. The instruments, that used in this research, were the validation sheets that consisted of the validation sheets of media and material experts to find out how the development of this learning media, whether the media had been fulfilled the criteria to be tested or not, the students’ response questionnaire sheets to find out the effectiveness of the developed media. After the data were collected, the research process was continued by analyzing the data. The effectiveness of web-based interactive media on lines and angles material of 7th grade of Junior High School was reviewed from the analysis result of students’ response questionnaire and the results of students’ test. The learning media was stated as effective if the analysis result of students’ questionnaires got a minimum of 70% with a good criteria and the students’ test scores fulfilled the KKM (Minimum Completeness Criteria) with the score of 75, in which it showed the completeness by using the 6% minimum of the high mastery criteria. RESULT AND DISCUSSION 1. The Development of Web-based Interactive Learning Media The first development stages was potential and problems. According to the interview results with the mathematics teacher and the given questionnaires to the students, the problem that found was the learning process that still used the lectured method. The learning had limitation on the use of learning media, in which the learning media used were student worksheet, mathematics textbook, and PowerPoint. PowerPoint, that used, was still 80% containing words, the background display was too dark so that the students were less focus on paying attention, and the school never used the web-based learning media. The potential, that ISSN : 2579-5724 ISSN : 2579-5260 (Online) http://ejournal.umm.ac.id/index.php/MEJ 64 Mathematics Education Journals Vol 3 No. 1 February 2019 found, was the students had good ability to use computer and internet. The school facilities were adequate to be used, there were classes that facilitated with projector and internet access, in which it could support the learning process. Second, the data collection was determining the basic competences and indicators of the learning in lines and angles material: 3.12 explaining the angles, kinds of angle, the relation between angles, the way to draw the angles, and dividing the angles; 4.12 completing the problems that related to the lines and angles. Then, the learning indicators were: 3.12.1 identifying the line, line segments, and line rays; 3.12.2 determining the position of two lines; 3.12.3 determining the size of the angle from the position of the clockwise; 3.12.4 determining the type of angles (acute, right, obtuse, and straight); 3.12.5 determining the relationship between angles (right, supplementary, and opposite); 4.12.1 problem solving that related to the type of angle; 4.12.2 problem solving that related to the relation of angles. Third, the product design included of the design of web-based interactive learning media. The initial stage in designing this interactive media was designing the homepage. This homepage contained the material title and description of the learning media. Figure 1. The Homepage Design The next step was to make a display of the competences’ menu. This page contained the basic competencies and learning indicators in the line and angles material of 7th grade of Junior High School. Figure 2. The Design of Competence Menu After the competencies display, the next step was to make the material menu display. This display contained the page buttons which presented the material including of the lines material, the position of two lines, the type of angles, the size of the angles from the clockwise, and the relationship between angles. Figure 3. The Design of Material Menu ISSN : 2579-5724 ISSN : 2579-5260 (Online) http://ejournal.umm.ac.id/index.php/MEJ 65 Mathematics Education Journals Vol 3 No. 1 February 2019 1) Lines This material explained about lines, lines segment, and lines ray. Figure 4. The Material Design of Lines 2) Two Lines Position This material explains the relationship of two lines parallel, intersecting, coinciding, and intersecting perpendicularly. The exercises were about two lines where the students were asked to match the answers to the provided column. Figure 5. The Material Design of the Two Lines Position Figure 6. The Exercise Design of the Two Lines Position 3) Kind of Angles This material explained about the definition of angles and the kind of angles such as acute, right, obtuse, and straight angles, in which the students could choose the angles that were existed in the house picture. The exercises were about the kinds of angle, in which the students were asked to match the answer into the provided column. ISSN : 2579-5724 ISSN : 2579-5260 (Online) http://ejournal.umm.ac.id/index.php/MEJ 66 Mathematics Education Journals Vol 3 No. 1 February 2019 Figure 7. The Material Design of Angle Figure 8. The Exercise Design of Angle 4) The Angle Sizes from the Clockwise This material explained about the angle sizes that were formed by the clockwise where the students could shift the length of clockwise on the clock picture to find out the calculation result. The exercises were about the angle sizes of clockwise, in which the students were asked to fill the answer and check whether the answer was right or not. Figure 9. The Material Design of The Angle Size from the Clockwise Figure 10. The Design of the Size of Angles from the Clockwise Exercise ISSN : 2579-5724 ISSN : 2579-5260 (Online) http://ejournal.umm.ac.id/index.php/MEJ 67 Mathematics Education Journals Vol 3 No. 1 February 2019 5) The Relation Between Angles This material explained about the relation between angles of right, supplementary, and opposite. The exercises were about the relation between angles, in which the students were asked to fill the answer and check whether the answer was correct or not. Figure 11. The Material Desing of Relation Between Angles Figure 12. The Design of Relation Between Angles Exercise The next was the evaluation menu or test, in which it consisted of 10 items about the material of lines and angles. If the students were incorrect in choosing the answer, it would turn up the discussion, while if the students’ answer was correct, it would continue to the next items. Figure 13. The Evaluation Menu Design Moreover, this learning media was also equipped with the profile menu that consisted of the researcher profile. ISSN : 2579-5724 ISSN : 2579-5260 (Online) http://ejournal.umm.ac.id/index.php/MEJ 68 Mathematics Education Journals Vol 3 No. 1 February 2019 Figure 14. The Profile Design Fourth, the product validation was carried out by two mathematics education lecturers at the University of Muhammadiyah Malang and two mathematics teaching teachers at Christian Junior High School of St. Albertus Donomulyo. The analysis of the results of media expert validation was obtained from the researchers’ recapitulating in all validator statements then looking for the average total of the media validity aspects and web-based interactive learning material. The results of the analysis of media experts obtained a total average of 3.56. The total average showed that the results of media validation were included in a very valid criteria. The results of the analysis of material experts obtained a total average of 3.29. The total averages indicated that the results of media validation were included in the valid criteria. Therefore, the web-based interactive learning media on lines and angles material was proper to be tested in the learning process. Fifth, the design revisions were an improvement based on the suggestions/inputs from the media and material expert validators when they were conducting the validations. The suggestions that obtained from the media expert validator were that the button on the large material of the clockwise angle was replaced with the appropriate word and the discussion of the exercises on the material of the clockwise angle size was adjusted to the material. Figure 15. The Switch Before Revision Figure 16. The Switch After Revision Figure 17. The Exercise Before Revision Figure 18. The Exercise After Revision Furthermore, the suggestions from the material expert validator were at the end of the lines ray given the back instructions to the material or even to the next material, there were still many sentences and typos, gave the instructions to the bar menu to find out the buttons and functions, the term "large angles" was changed to “the size angles”, the position of the discussion window was better to slide to the right, and it was recommended to replace the evaluation question no. 7. ISSN : 2579-5724 ISSN : 2579-5260 (Online) http://ejournal.umm.ac.id/index.php/MEJ 69 Mathematics Education Journals Vol 3 No. 1 February 2019 Figure 19. The Guidance Before Revision Figure 20. The Guidance After Revision Figure 21. The Term Before Revision Figure 22. The Term After Revision Figure 23. The Discussion Before Revision Figure 24. The Discussion after Revision Figure 25. The Evaluation Items No.7 Figure 26 The Evaluation Items No.7 Before Revision After Revision Sixth, the product trial was to apply the web-based interactive learning media on the 7th grade of Christian Junior High School of St. Albertus Donomulyo, in which it consisted of 20 students. The trial was conducted on June 6th, 2018. The students were divided into 5 groups, each group consisted of 4 students. Each group was given a laptop. After the students tried the interactive learning media that had been developed, the students were asked to answer the test questions and fill out the questionnaire responses. The results of media trial were explained in sub-section 2, namely the analysis of the effectiveness of web-based interactive learning media. ISSN : 2579-5724 ISSN : 2579-5260 (Online) http://ejournal.umm.ac.id/index.php/MEJ 70 Mathematics Education Journals Vol 3 No. 1 February 2019 Seventh is the design revision, based on product trial that had been done very well by the students’ responses and students’ learning outcomes on very high criteria, then the web- based interactive learning media were proper to be used in the learning process. 2. The Analysis of the Effectiveness of Web-based Interactive Learning Media 1) The Students’ Responses Analysis The analysis of students’ responses was obtained from the results of questionnaires that distributed at the end of the trial. The results of student response analysis obtained an average of 87%. The average showed that the students' responses were in the very good criteria; thus, the web-based interactive learning media on lines and angles material was effective and proper to be used in the learning process. 2) The Students’ Learning Outcomes Analysis The analysis of students’ learning outcomes was obtained from measuring the test scores with the Minimum Completeness Criteria (KKM) of 75. The results of the analysis of students’ learning outcomes showed that the students who reached the KKM scored 75 were 20 students out of 20 students, thus the completeness percentages were 100%. This percentages showed that the learning completeness was included in the very high criteria. Therefore, the web-based interactive learning media on lines and angles material was effective and proper to be used in the learning process. The web-based interactive learning media on lines and angles material was developed with notepad ++ and adobe flash CS4 software that could display images, animations, and sounds that were related to the needs. With this software, the web-based learning media, that was developed, could be used as interactive media that was able to support the presentation of material and could attract the students' attention. Development of this web-based interactive learning media followed several research stages according to Sugiyono (2017). Step by step had been carried out according to the needs of media development. One of the main stages was product trial, of which trial was the application of web-based interactive learning media to the students in order to determine the effectiveness of learning media that had been developed. The effectiveness of learning media was seen from the results of analysis of responses and students’ learning outcomes. Based on the results of the analysis of students’ responses, it was obtained from the questionnaire that got an average of 87%, in which the criterion was very good. The percentages showed that the students felt interested in using the web-based interactive learning media on this lines and angles material. From the results of the analysis of students’ learning outcomes, it indicated that the students who achieved the minimum completeness criteria (KKM) score of 75 were 20 students with a completeness percentage of 100% with very high criteria. This showed that the percentage of students’ test scores met the KKM ≥ 61%. The percentage showed that the students did not find it difficult to answer the questions and the questions on the media were in accordance with the material presented. The advantages contained in this learning media were: (1) this learning medium was interactive, so that the direction of learning could be determined by the students and the reciprocal relationship between students and the media that made the students for being more active, (2) the main menu in this learning media were appeared, so that the students were free to choose a menu without returning to the main view. The weaknesses in this learning media were: (1) this web-based interactive learning media contained the animation in the form of flash, so that it could only be run using a personal computer (PC) or laptop, (2) the web-based interactive learning media, that developed, was only limited to the material of lines and angles. ISSN : 2579-5724 ISSN : 2579-5260 (Online) http://ejournal.umm.ac.id/index.php/MEJ 71 Mathematics Education Journals Vol 3 No. 1 February 2019 CONCLUSION Departing from the research result about the development of web-based interactive learning media on the lines and angles material in 7th grade of Junior High School, it can be concluded that: 1. The development of web-based interactive learning media follows the research stages of Sugiyono (2017), of which stages are potential and problems, data collection, product design, product validation, design revision, product trials, and product revision. Based on the obtained validation result of media expert, it obtains the averages result of 3,56 that are very valid and the material validation results obtain the averages of 3,29 that are valid; therefore, the web-based interactive learning media on lines and angles material is proper to be trialed. 2. The media effectiveness is obtained from the analysis result of students’ questionnaires and the students’ learning outcomes. The students’ response questionnaires get the averages result of 87%, it which the meaning is that the development of web-based interactive learning media get a very good response from the students. The students’ learning outcomes show that the students who achieve the score Minimum Completeness Criteria (KKM) of 75 are 20 students. Thus, the percentages of students’ mastery are 100% with a very high criteria. So, the web-based interactive learning media on the lines and angles material is stated as effective and can be used in the learning process. REFERENCES Arsyad, Azhar. 2013. Media Pembelajaran. Jakarta : Raja Grafindo Persada Darmawijoyo. 2011. Pembelajaran Matematika Berbasis Web. Jurnal Sistem Informasi (JSI), 3 (1): 294-303 Fariz, A., Ajie, H., & Duskarnaen, M.F. 2014. Pengembangan Media Pembelajaran Berbasis Web Pada Mata Pelajaran Perakitan Komputer di SMK 3 Perguruan Cikini, 1-11. Retrieved from http:// academia.edu/6138260/ PENGEMBANGAN_MEDIA_PEMBELAJARAN_INTERAKTIF_BERBASIS_WE B. Purmadi, A. & Surjono, H.D. 2016. Pengembangan Bahan Ajar Berbasis Web Berdasarkan Gaya Belajar Siswa Untuk Mata Pelajaran Fisika. Jurnal Inovasi Teknologi Pendidikan, 3 (2): 151-165. Sugiyono. 2017. Metode Penelitian Pendidikan (Pendekatan Kualitatif, Kuantitatif, dan R&D). Bandung : Alfabeta.