DEVELOPMENT OF INTERACTIVE MEDIA ON THE ROOT MATERIAL OF NUMERICAL NONLINEAR EQUATIONS USING GEOGEBRA AND ETHERCALC

This study aims to develop web-based interactive learning media by utilizing geogebra and ethercalc on the topic of determining the roots of non-linear equations numerically and evaluating their validity through material and media validity tests. The development method used is Research and Development (R&D) with the limited ADDIE development model. The data was collected through material and media validation sheets filled out by two experts. The results of the data analysis show that interactive web-based learning media for the topic of roots of nonlinear equations are developed with technologies such as HTML, CSS, Bootstrap, JavaScript, JQuery, Geogebra, Ethercalc, MathJax, Firebase, Figma, Adobe Illustrator, Canva, CapCut, and Netlify. The results of the material validity reached 84% with a high level of validity, while the media validity was 82% with a fairly high level of validity. There are several suggestions from media and material validators, namely improving the instructions for carrying out exercises and evaluations. With these results, after being repaired the learning media is ready to be tested.


INTRODUCTION
The development of technology and science is developing rapidly.This technological advancement has had an impact on the world of education, one of which is the presence of interactive learning media.Learning media is an intermediary used by educators in conveying messages to students to achieve learning goals [1]- [3] .Interactive multimedia is computer-based media which is a combination of images, video, animation and sound in one software, which enables mutual communication between media and users [4] .Therefore, it may be said that interactive learning content is an intermediary or tool that contains interactive multimedia, namely a response or feedback on user activities that is used to convey messages between students and educators to achieve learning goals.
Interactive multimedia can make learning media interesting.Interestingly a learning media can increase interest in learning.High interest in learning can affect good learning outcomes [5]- [7] .However, the reality is that there are still many learning media in schools and universities that use printed books or digital books as educational resources.
The use of printed books or digital books requires an active teacher or lecturer so that students can easily understand a lesson.On research [8] mentioned students stated that the contents of the textbook could not be understood independently without guidance from the teacher so that students were not able to develop the knowledge they had.In addition, the time available for teachers or lecturers to explain active learning is limited.Limited meeting time between teachers or lecturers and students requires students to be able to study independently.
In addition, along with technological advances there have also been changes in the learning approach.
The learning approach that was previously Teacher Centered Learning (CTL), has now changed to Student Centered Learning (SCL).Student centered learning is different from teacher centered learning in that it is marked by the more active role of students when compared to the teacher [9] .The teacher's role in student centered learning is as a companion to student learning throughout the class journey, which sees students not as vessels that need to be filled but as knowledge seekers who need guidance [9], [10].The next role of the teacher is as a motivator, where the teacher provides support to his students so that they are serious about learning to achieve their future [11] .This approach directs students to learn independently.Research conducted by [12] resulting in a higher level of independent learning for students using the Student Center Learning (SCL) method compared to using the Teacher Center Learning (TCL) method.
Advances in technology, namely the existence of a variety of interactive learning media, are starting to be widely used because they can support independent learning but are guided directly by a teacher or lecturer.One of the interactive learning media is web based interactive learning media.Web based learning is instruction delivered via the internet where students can access learning resources on their devices through web sites [13], [14] .This web based interactive learning media can be accessed anywhere and anytime, as well as a direct response from the media [15] .The resulting response is used as a basis for students in strengthening memory [16] .Web based interactive learning media combined with multimedia elements and arranged in such a way can produce interesting and fun learning media for students.In addition, it is also hoped that interactive learning media can increase the independence of students because students can construct their learning independently with the help of interactive media [17], [18] .Researchers consider it necessary to conduct a study on the development of interactive learning media with the title "Development of Web-Based Interactive Learning Media Topic Determining the Roots of Non-Linear Equations" in the numerical method by taking into account the explanation given above.Therefore, the purpose of this research is to develop interactive web-based learning media on the topic of finding the roots of nonlinear equations numerically and the validity of the learning media.

METHOD
Research and development (R&D) is the methodology used in this study with the aim of creating web-based interactive learning media on the topic of finding the roots of nonlinear equations.
The term "research and development" (R&D) refers to a research technique used to create or accredit educational items [19], [20] .This research method emphasizes research ability in making a product in the form of materials, media, learning tools and tactics or educational engineering [21], [22] .The development model used by researchers in this study is the restricted ADDIE model.ADDIE stands for Analysis, Design, Development, Implementation, and Evaluation, which is a stage of the ADDIE model [23], [24] .Due to time constraints in the development of instructional media, the researchers used the limited ADDIE development model, so not all stages of the model could be carried out.The stages carried out by researchers in the restricted ADDIE model are: Analysis, Design, Development, and Evaluation.The evaluation phase carried out is formative evaluation, from the analysis stage to the development stage.Below in Figure 1 is a schematic of the stages of the ADDIE model [25] .A questionnaire was utilized as the method of data collecting in this study.The questionnaire, which includes a media validation questionnaire and a material validation questionnaire, is used to assess the validity of learning medium.The content that has been put into teaching materials serves as the source of the data used to assess the validity of the material.A produced interactive learning media application contains the data that was used to analyze the media's validity.This data will be validated by experts using a questionnaire.The questionnaire was developed with a data collection instrument that was carried out with material and media validation sheets, each of which was filled in by two material and media experts.On the material validation sheet, there are three aspects of assessment: content feasibility, presentation feasibility, and language feasibility, adapted from the National Education Standards Agency (BSNP).Table 2 contains the material expert validation instrument grid.After being validated by experts, the scores obtained will be analyzed using descriptive statistical analysis techniques in the analysis of material validity and the analysis of media validity.Two authorities in their professions validated the content and the medium.Material validity assessment data was obtained from the results of the material validity assessment sheet using calculations with a score of 1 to 4. Meanwhile, the media validity assessment data was obtained from the results of the validity assessment sheet using calculations with a score of 1 to 5. Guidelines for the validity assessment sheet score were adapted from Rahma Rina Wijayanti's book and friends [27] .Table 4 shows guidelines for scoring the validity evaluation sheet.Very Good The validity of the data obtained from the material validation instrument and media validation is then analyzed using a formula that refers to Sukmawati, Sutawidjaja, & Siswono, 2018 with the following formula [28] .The material validation instrument is divided into three aspects of assessment: content feasibility, presentation feasibility, and linguistic feasibility.The material is validated by two material experts.The highest score for each item is 4. Table 5 shows the anticipated results for each component of the material validation assessment.The media validation instrument is divided into three aspects of assessment: feedback and adaptation, presentation design, and interaction usability.The media was validated by two media experts, namely two lecturers who had knowledge of the quality standards of learning equipment.The highest score for each item is 5. Table 6 shows the anticipated results for each component of the media validation assessment.After the expected score is found, the next step is to find the percentage of achievement with the following formula.
The results of the Achievement Percentage (PC) are then compared with the validity criteria to determine the validity of the materials and media that have been developed.The validity of learning media is seen from the results of evaluating the validity of the media and material [29], [30] .Materials and media are declared valid if the Percentage of Achievement (PC) of each aspect meets high or high enough criteria, namely ≥ 65%.The following criteria for the validity of the Percentage Achievement are shown in Table 7 [31].Based on Table 7, material and media can be declared valid if the percentage of achievement scores for each aspect shows the criteria of validity are quite high and high.This is in line with research [31] which states that learning media and learning materials are said to be valid if the percentage results are at least included in a fairly high category.

A. Result
This development research develops web-based interactive learning media by utilizing geogebra and ethercalc in learning to determine the roots of numerical non-linear equations.The development of learning media uses the ADDIE model, which is limited to four steps, namely the analysis, design, development, and evaluation stages, described as follows.

Analysis Stage
This stage carried out several analytical activities, including general analysis, content analysis, and technology needs analysis.In the general analysis, surveys and literature studies are carried out and produce information related to learning media on non-linear equation roots in lectures and theories to strengthen arguments in the research process in the form of a literature review.Furthermore, at the content analysis stage, there are four activities: material analysis, analysis of digital presentation of material, analysis of media interactivity, and analysis of learning media interfaces.The results of the content analysis are knowing the range of material from the roots of the non-linear equation; there are five root intervals: the root hose, the bisection method, the false position method, the newton-raphson method, and the secant method [32] .In addition, it was also found that this material was not only in the form of text but also required graphics, videos, and displays of mathematical writing, as well as parts that would be made interactive.Next, at the technology analysis stage, it is known what technology is needed for the development of this web based interactive learning media.Technology analysis is carried out based on the results of general analysis and content analysis.In addition to some of the technologies above, of course, some software is also needed to support the development of learning media.Table 9 shows the outcomes of the software analysis.

Design Stage
The design phase is the following stage.At this stage, the design of teaching materials, flowcharts, use case diagrams, and instructional media interfaces is carried out.Before developing learning media, it is necessary to prepare teaching materials.The structure of instructional materials includes learning objectives, resources, sample questions, let's try, exercises, summaries, evaluations, and ethercalc spreadsheets as a place to attempt for users who want to study independently.Based on this, the results of the design of the presentation of teaching materials are in the form of teaching materials that will be used as content in the learning media that will be developed.Furthermore, the design of use case diagrams that describe the interaction relationship between the system and the user.Use case diagrams can be seen in Figure 2.

Development Stage
Researchers in developing web based interactive learning media need to do a number of things, namely typing the material used, making learning videos and recording audio used in videos, making graphics from related material and coding to adjust the display on the web.The following shows some of the results from the development stage.Figure 3. Home page display Figure 3 shows the display of the initial page when the learning media is opened.On the start page of the learning media there is a navbar which contains four buttons namely homepage, features, login, and lecturer page, which if clicked will go to their respective views.On this initial page, the user is asked to login.Login is a requirement for users to access learning media.On this page, students are asked to enter the username and password that were created on the create account page.After successfully logging in, you will go to the home page.On the home page there are three menu options: the information menu, materials, and application instructions.
Next is the material page.The material page is the main page of the learning media because it is here that users can study the topic of roots of non-linear equations.The material page display can be seen in Figure 4.In Figure 4, it can be seen that the display is divided into 2 parts.On the left is the navigation, which contains the subject menu.Users can go to the desired subchapter page by pressing one of them.When the subsection of the root interval, the bisection method, the false position method, the newton-raphson method, or the secant method is clicked, there is another menu in it, namely materials and exercises.In order to be able to set the open and close dropdown, JavaScript code is used as shown in Figure 5. Based on Figure 5, the code is a JavaScript script that uses the jQuery library.This code will be executed when the HTML page has finished loading (event $(document).ready()).This code handles clicks on elements with the class 'icon-link'.This code controls the appearance of the sub-menu when an element with class 'icon-link' is clicked.If a sub-menu is currently displayed, the other submenus will be hidden.If a sub-menu is not displayed, it will be displayed while the other sub-menus will be hidden.Its purpose is to prevent the dual display of the navigation bar (nav bar) when a sub-menu is opened.
The material in this learning media is not only presented in the form of text and video but also contains graphs, pictures, and spreadsheets.The graphics included in this media were created using the GeoGebra application.This geogebra graph can be enlarged and reduced in graphical view, but the width of the box is fixed.So here the developer includes the .ggbfile into the learning media.This .ggbfile is put in the same folder as the HTML file and then displayed with the script code in the HTML document, as shown in Figure 6.In addition to the above to display the geogebra graph, you need to add a script for geogebra, namely <script src="https: //www.geogebra.org/apps/deployggb.js"> </script>.A display of the use of geogebra graphics on media can be seen in Figure 7. Based on Figure 6, the code above is a <div> element, which has a style attribute to set the width and height of the element.This element has a single id, which can be used to identify the element in JavaScript.Next, there is a JavaScript script that starts with a <script> tag.Inside the script, there is a params variable that contains an object with several properties.Altogether, the code aims to load and display the interactive graph associated with the file "grafik-tunggal.ggb"into a <div> element with a single id.Several display settings, such as toolbars, algebraic input, and menu bars, can be configured according to needs.Figure 7. Geogebra graphic display Furthermore, the presentation of the material in the form of pictures.Images are displayed on media using the <img src= "…"> HTML tag.In addition, there are also images that can be clicked so that they appear in full screen, so that users can see the image more clearly.This display setting is used by the Bootstrap framework, where the image is loaded into a modal so that if the image is clicked, a modal will appear that is set to full screen width.
Next is the spreadsheet view.Spreadsheets on material pages in this media using google spreadsheets.So the google spreadsheet that has been filled in beforehand is then inserted into the media using the <iframe src= "..."> tag as shown in Figure 8.The appearance of the google spreadsheet on the material page can be seen in Figure 8.Based on Figure 9, google spreadsheets can be clicked by the user to find out the formula entered into the spreadsheet.So that it is expected to make it easier for users to understand the material.Besides that, under this google spreadsheet there is also an explanation of each column in the spreadsheet.
Next is the presentation of the video on learning media.Videos on learning media are made using powerpoint and geogebra which are recorded on the screen.The audio of this video was recorded separately using a voice recorder on a cellphone.Furthermore, to remove noise from sound recordings, the Adobe Podcast website is used, which can be visited at the following link https://podcast.adobe.com/enhance.After the process is complete, the next step is video editing using the CapCut application.When finished, the video is uploaded to YouTube and displayed in the learning media.Displaying videos on this learning media uses the <iframe src="..."> HTML tag, which can be taken directly from YouTube.
On the material menu, there is a Let's Try page.The Let's Try page is on every fourth page of the subtopic.Let's try this page, which contains interactive fill-in questions.On this page, the questions are divided into four stages, which are presented in stages.Presentation per stage is done using the blur class in CSS.On this page, the user will enter the answer and then click check answer to check the answer.If there is an error in the answer, a repeat button and instructions will appear.Repeat button to answer the wrong answer again, and hint button to see the correct answer or hint to get the right answer.If all the answers are correct, then the blur filter in the next iteration or stage will be removed.The display of the Let's Try page is shown in Figure 10.Can be seen in this Figure 10 that on the left there are questions to fill in, which can be checked for correctness or wrongness.If true, the box will be green.If wrong, the box will be red, and the user can press the repeat button to correct the wrong answer.The code for checking answers can be seen in Figure 11 below.Figure 11.JavaScript code for answer check Figure 11 above is a JavaScript code implementing an interaction on a web page that allows users to enter answers in the form of input.When the user clicks on an element with the class "cekJawaban1", this script is executed.This script loops through input elements that might represent student answers.Each answer is tested for conformity with the associated correct answer.If the answers match, the display input element changes to green, and if all answers match, some HTML elements change to provide positive feedback.If the answer is blank, a warning message appears.If the answer is incorrect, the input element display changes to red, the "cekJawaban1" button is hidden, and the button and related information elements are displayed.So, this code manages answer validation, provides a visual response to the user, and adjusts the appearance of HTML elements based on the results of that validation.JavaScript code to answer back Figure 12 is the JavaScript code, which is a continuation of the previous code interaction, which focused on testing student answers.When a button with the class "ulang1" is clicked, this function is executed.Its function is to reset the appearance of HTML elements, returning the elements to their initial state.The "cekJawaban1" button element is shown again, while the "ulang1" button and "informasi1" element are hidden.Through the loop, the code returns the display of the input elements to their initial appearance with a white background and black text.The text content and input values are removed, and the element placeholders are reset to ". ..".Even though the code creates the variable x, the value of this variable is not used in the context of this code.Thus, this code has a function to reset the appearance and content of HTML elements after their previous use.
Meanwhile, on the right side there is a calculator, which can be used as a tool to calculate the questions given.This calculator is also a feature of GeoGebra, so inputting this calculator into the media is the same as inputting the GeoGebra graph that was previously explained.The difference is only when saving the .ggbfile, namely when saving we have to set the view first so that only this calculator is displayed.
Then there is a practice page in each sub-chapter where the discussion has been completed.On the exercise page, there is a working time, question numbers that can be moved to the intended question page, and a question navigation.The questions on the practice page are three questions consisting of fill-in questions and essay questions.The display of the exercise page can be seen in Figure 13.In Figure 13, it can be seen that the exercise page provides Ethercalc, a web application whose use is similar to Excel.Ethercalc is used as a place to work on the questions given.The code for embedding Ethercalc in learning media can be seen in Figure 14.

Figure 14. HTML code for embedding ethercalc in learning media
The HTML code above uses the <iframe> element to embed and display content from outside the website on the current web page.This <iframe> element is intended for displaying ethercalc web pages, which are webbased collaborative spreadsheet applications.The width and height parameters are useful for setting the width and height of the website entered, namely ethercalc.Parameter src="https://ethercalc.net/_new":This specifies the source (URL) of the web page to be displayed, which is the ethercalc address that loads the new spreadsheet worksheet.Furthermore, at the bottom there is a conclusion from the student's answers, which are presented in the form of entries.Finally, there is a button to select a file and upload answers.The continuation of the exercise page display can be seen in Figure 15 below.In this learning media there is also an evaluation page.The evaluation page contains six questions, which include material on root intervals, the bisection method, the false position method, the Newton-raphson method, and the secant method.The types of questions on the evaluation page are essays.This evaluation page also has download, select file, and upload features.The Download feature functions to download pages on the website, so that they can become student worksheets that already contain answers.This download feature uses the JQuery Print-This plugin.After downloading, it is saved.After saving, the user can click the select file button and then select the file that was downloaded earlier.The code for the select file feature is shown in Figure 16.Finally, if the file has been selected, click the upload button to send the answer file.This answer file will be saved to the database, and this file will be used as a link, so to open it later, the lecturer just clicks on the link that was created.
Next is the lecturer page, which is a page that can only be accessed by lecturers.On this page, the lecturer can see data on students who have accounts on this learning media, and files on the results of training and evaluation answers from students.The student's answer file can be downloaded by the lecturer by clicking the PDF or EXCEL button according to the format you want to download.Besides that, it can also be printed by clicking the Print button.The display of student data pages on the lecturer page can be seen in Figure 17.After the development stage is complete, the learning media are published so that they can be accessed by users.The website used to publish this media is Netlify.This web based interactive learning media can be accessed online at https://numless.netlify.app/.After publication, the media is then verified by media professionals to ensure the validity of the learning media.
The validity test was carried out using an assessment instrument by material experts and media experts.The validity assessment was carried out by two material experts and two media experts.

a. Material validity
Assessment of the validity of the material was obtained from two material experts, namely one ULM Faculty of Engineering lecturer and one ULM FMIPA lecturer.The outcomes are presented in Table 10 based on the findings of the material experts' validity test.Based on Table 10, the results of the validity assessment by two validators obtained a total percentage of 84%.Based on the validity criteria, teaching materials that will become learning media content have high criteria.After being corrected according to the validator's suggestions, the teaching materials can be said to be valid and usable.

b. Media validity
The media validity assessment was completed by two media experts, namely one lecturer at the ULM FKIP Computer Education Study Program and one lecturer at the ULM Faculty of Engineering.The outcomes are shown in Table 11 and are based on the findings of the media experts' validity test.11 the results of the media validity assessment by two validators obtained a total achievement percentage of 82%.Based on the validity criteria, interactive learning media has fairly high criteria.Then interactive learning media can be said to be valid.

B. DISCUSSION
This research is a type of Research and Development (R&D) that aims to produce a product in the form of web based interactive learning media on the topic of determining the roots of non-linear equations numerically.Web based interactive learning media was developed using the limited ADDIE model, which consists of the stages of analysis, design, development, and evaluation.
The learning media created have interactivity, in which there is two-way communication between the user and the media.In addition, this learning media is also web based, so users can use it whenever and wherever as long as there is an internet network.This web based interactive learning media contains discussion on the topic of roots of non-linear equations numerically, which is taught in numerical methods courses.This learning media was developed using a variety of technologies, namely HTML, CSS, Bootstrap, JavaScript, JQuery, Firebase, and MathJax.In addition, there is also some software used in the development of this learning media, namely Figma, Canva, Adobe Illustrator, Geogebra, Ethercalc, PowerPoint, Capcut, and Netlify.
Learning media can be said to be valid after the material and media are validated by experts and get a score with a relatively high minimum category.The results of the validity of the material carried out by two material experts in their fields, namely ULM Faculty of Engineering lecturers and ULM FMIPA lecturers, obtained an Achievement Percentage (PC) of 84% in the high category.There are three aspects that are measured: the feasibility aspect of the content, the presentation aspect, and the linguistic aspect.Meanwhile, the results of media validity carried out by two media experts, namely ULM FKIP lecturers and ULM Engineering faculty lecturers, obtained an Achievement Percentage (PC) of 82% in a fairly high category.Based on this, the topic of web based interactive learning media determines the roots of non-linear equations numerically and can be said to be valid.This also shows that the learning media developed can be tested.This is consistent [31] with studies that indicate learning media and learning materials are said to be valid if the percentage results are at least included in the fairly high category.
The research results are supported by previous research where the GUI Matlab application can help solve nonlinear equations, while the use of a learning management system or interactive multimedia can support the learning process [7], [28], [33] .Apart from that, developing interactive multimedia applications can improve student learning outcomes and improve problem solving for junior high school students [7], [34]- [36] .

CONCLUSION
There are two conclusions obtained from the results of research into the development of web-based interactive learning media on the topic of determining the roots of non-linear equations numerically using Geogebra and Ethercalc, namely as follows.First, this research produces web-based interactive learning media that contain the roots of nonlinear equations using numerical methods.The technology used to develop this learning media is HTML, CSS, Bootstrap, JavaScript, JQuery, Firebase, and MathJax.Meanwhile, some of the software used is Figma, Canva, Adobe Illustrator, Capcut, Visual Studio Code, Geogebra, Ethercalc, and Netlify.The features contained in learning media are material, let's try, practice, evaluate, geogebra, and ethercalc.Second, web-based interactive learning media topics determine non-linear equations that are numerically valid for use with a material validity percentage of 84% with high validity criteria, and media validity obtains a percentage of 82% with quite high validity criteria.

Figure 1 .
Figure 1.Addie Model Stages Details of the stages of the ADDIE model were adapted from the research of Muhammad 2023, which can be seen in Table 1

:
The total number of questions on the aspect being measured ∑  : Total respondents

Figure 2 .
Figure 2. Use Case diagram Finally, at the design stage, the interface design of the interactive learning media to be developed is carried out.Interface design starts with the start page, material, questions, and of course the design of interactivity in learning media.This aims to be able to help and facilitate work on the next stage, namely the development stage.

Figure 4 .
Figure 4. Learning material page display

Figure 5 .
Figure 5. JavaScript code for the dropdown on the subject

Figure 6 .
Figure 6.HTML code to display Geogebra on media

Figure 8 .Figure 9 .
Figure 8. Code to display google spreadsheet to media

Figure 10 .
Figure 10.Let's try the page display

Figure 12 .
Figure 12.JavaScript code to answer back

Figure 15 .
Figure 15.Continuation of the exercise page display

Figure 16 .
Figure 16.JavaScript code to select files Based on Figure 16, SelBtn is the id embedded in the select file button on the HTML page.SelBtn.onclick= function(){ input.click();}, is used to add a click action on the CellBtn element to trigger a click on the input element.Its purpose is to pop up a file selection dialog when the SelBtn element is clicked.The code on lines 68 to 72, function GetFileExt(file), functions to retrieve the file extension from the given file name.This function splits filenames by dot, takes the last part of the split, and adds a dot in front of the found extension before returning the value.The code in lines 74 to 78, function GetFileName(file), functions to retrieve the file name (without extension) from the given file name.This function breaks the file name by dot, takes all parts of the file name except the last part (extension), and concatenates the parts of the file name back before returning a value.Finally, if the file has been selected, click the upload button to send the answer file.This answer file will be saved to the database, and this file will be used as a link, so to open it

Table 2 .
Material expert validation instrument grid

Table 3
displays the media expert validation instrument grid.

Table 3 .
Media expert validation instrument grid

Table 4 .
Guidelines for scoring validation sheets

Table 5 .
Expected score on material validity

Table 6 .
Expected score on media validity

Table 7 .
Material and media validity criteria

Table 8 .
Technology needs

Table 9 .
Software used

Table 10 .
Result of material validity

Table 11 .
Result of media validity