Design and Develop Interactive Multimedia Applying Problem-Based Learning to Enhance Problem-Solving Skills

Informatics is intricately intertwined with the mastery of problem-solving. Within this discipline, one of the fundamental areas of study revolves around the concepts of branching and looping. During field studies, several student problems were identified, such as difficulty solving programming problems presented in the form of stories. This resulted in a lack of problem-solving skills among students when it comes to story problems. Additionally, there were issues with instructional media and less interactive teaching methods. The aim of this research is to design multimedia that implements a problem-based learning model to enhance students' problem-solving abilities. The research method used is Research and Development (R&D) with the ADDIE development model. The study involved 36 students from class X-B RPL at SMKN 1 Cimahi. The data obtained are as follows: 1


I. INTRODUCTION
The informatics subject is a general subject studied by vocational high school (SMK) students.This subject is taught to SMK students in all fields that implement the independent curriculum [1] .It is closely related to algorithms and programming, which are the core of computer science.To learn algorithms and programming, students need to be trained in problem-solving skills [2].Algorithm and programming are related to problemsolving skills [3].Programming algorithms are included in the material taught in the 10th-grade informatics subject at vocational high schools [1].The content of algorithms and programming is essential because the essence of learning them is to solve problems [4].One of the topics studied in programming is Branching and Looping [5] Based on several studies conducted, there are obstacles in learning branching and looping.One factor contributing to the ineffectiveness of teaching branching materials is the use of unsuitable instructional media and learning models [6].The next issue arises with Looping.There are difficulties when students are asked to construct loops for a given case in a problem.Students still struggle to differentiate between For, While, and Do-while loops.These difficulties inevitably affect students' problem-solving abilities [7].Based on field findings at SMKN 1 Cimahi, students still face challenges in distinguishing the types of branching given in a problem.Some also find it challenging to differentiate between two-case, three-case branching, or the use of a switch statement.In loop-related problems, students also encounter difficulties distinguishing between while and do-while loops.Some struggle to comprehend the flowchart of loops and often get confused when creating a for-loop program.Those issues are closely related to problem-solving skills as one of the key skills of the 21st century.
One of the 21st-century skills is problem-solving, often referred to as the 4C skills.The 4C skills encompass communication, collaboration, critical thinking and problem-solving, and creativity and innovation [8].These skills provide solutions to global challenges by encouraging critical thinking, contributing new ideas as creative individuals, overcoming real-world problems, and fostering teamwork and collaboration [9].Problem-solving is the process of resolving an issue or occurrence.For students, problem-solving needs to be cultivated to tackle challenges effectively.Students are expected to understand the problem-solving process and become adept at selecting and identifying relevant conditions and concepts, searching for generalizations, formulating solution plans, and organizing their existing skills [10].There are several important aspects in enhancing problem-solving skills, namely the learning model and instructional media.
The teaching methods employed by teachers often tend to be traditional and monotonous, with one of them being lecture-based methods [11].According to Sulandari, the lecture method is often considered dull and makes students passive in their learning [12].Hafeez echoes the same sentiment, stating that the lecture method is perceived as uninteresting because it fails to engage students in the learning process [13].In this lecture or traditional method, students may feel compelled to listen passively to the teacher's explanations.For visual learners, this method can lead to boredom as it does not align with their learning style [12].As a result, teaching algorithms and programming is unsuitable for this method [14].The instructional media used is also sometimes considered unsuitable for teaching algorithms and programming.
The instructional media used by teachers sometimes prove to be dull and unsuitable.According to a study conducted by Fitria & Fitrihidajati, commonly used instructional media include PowerPoint-based materials [15].However, it turns out that PowerPoint-based media is less effective in delivering content because not all material can be facilitated through PowerPoint [16].PowerPoint is also less suitable for programming instruction as students tend to pay less attention to the material, and it does not encourage active learning [17].Several findings related to PowerPoint usage were identified in the software engineering concentration at SMKN 1 Cimahi.Based on questionnaire results provided by researcher, approximately 91.7% of students expressed that PowerPoint presentations are sometimes boring.Therefore, a solution is needed.
Interactive multimedia serves as a solution to facilitate students in learning a subject compared to monotonous textbooks [18].When using multimedia, students can combine text, audio, and visual motion to explain educational content, aiding students in understanding concepts [19].Interactive multimedia is also known to enhance 21st-century skills [20].Additionally, there is a need to address the learning models used.Interactive multimedia also enhances 21st-century skills [20].Active learning using problem-based learning models results in better knowledge retention and deeper understanding of the material compared to passive learning by shifting the focus to learners' needs and requiring active participation [21].In addition to Interactive media, the learning model is also crucial for enhancing problem-solving abilities.
The problem-based learning is related to problem solving skill [22].A model similar to Problem-Based Learning is Project-Based Learning.The difference lies in Project-Based Learning's focus on creating a project related to enhancing students' creativity [23].Therefore, it can be argued that the Problem-Based Learning model is more suitable for improving students' problem-solving abilities than the Project-Based Learning model.Based on this background, the proposed research title is "Design and Develop Interactive Multimedia Applying Problem-Based Learning to Enhance Problem-Solving Skills."

II. RELATED WORKS/LITERATURE REVIEW
A number of previous studies have been conducted in the field of education aimed at enhancing students' critical thinking skills.One such study was conducted by Putri Zukhruf Dinata in 2023 entitled "Implementation of Learning Report-Assisted Learning Design in Problem-Based Learning Models to Improve Student Problem-Solving Skills in Array Materials."The research results showed differences between the group using the media and those that did not, along with an increase in pretest and posttest scores.The suggestion from this study related to the media was to add comment features and pay more attention to problem-solving indicators [24] Another study by Muhammad Cahya in 2023 titled "Design and Development of Interactive Multimedia with Problem-Based Learning Models to Improve SMK Students' Computational Thinking" showed a 0.57% improvement in students' computational thinking abilities, with positive feedback from students on the multimedia.Suggestions regarding the media included adding learning summary features, web coding, group learning features, additional types of teaching media, and more exercise types [25].The difference with the current study lies in the focus on enhancing problem-solving skills compared to Cahya's focus on computational thinking.
In 2022, Eky Hilmy Laudza conducted a study entitled "Design and Implementation of Interactive Learning Media Using Problem-Based Learning Methods to Improve Cognitive Aspects in SMK Students."The results showed an improvement in student learning from pretest to posttest.Recommendations included ensuring optimal access and operation of the media on all devices, not just computers [26].The difference with the current study is that the author developed a web-based application, whereas Eky's study involved a game.
Endah Permatasari conducted a study in 2019 entitled "Design and Development of Multimedia with Problem-Based Learning (PBL) Models to Improve SMK Students' Understanding of Database Subjects."The results showed a 0.30% increase in student understanding.Recommendations included implementing all stages of PBL in multimedia and randomizing evaluation questions [27].The difference with the current study is the focus on enhancing students' problem-solving skills compared to Permatasari's emphasis on improving student understanding, as well as the different subject matter chosen (informatics).
Reny Murni Hidayati and Wagiran in 2020 conducted a study entitled "Implementation Of Problem-Based Learning To Improve Problem-Solving Skills In Vocational High School."This study focused on the influence of implementing problem-based learning, resulting in increased student grades, indicating improved problemsolving skills [28].The suggestion from this study, similar to others, emphasized careful consideration of time management.The difference with the upcoming study lies in the use of interactive multimedia.
Cece Kurniawan, Ondi Suganda, and Rahma Widiantie also conducted research in 2018 titled "Implementation of Problem-Based Learning (PBL) Assisted by Interactive Multimedia to Improve Problem-Solving Skills of Grade XI Students on the Excretory System Material."The aim was to enhance students' problem-solving abilities, which showed improvement through the research findings [29].

III. METHODS
In this research, researchers will use the Research and Development method.This method is a method used to produce certain products and test the effectiveness of certain products.To produce certain products, research is used that is needs analysis and tests the effectiveness of the product so that it can function in society.This research method is widely used in the fields of natural sciences and engineering.The model of the RnD method used is the ADDIE Model.
The ADDIE model is an abbreviation for Analysis, Design, Development, Implementation, Evaluation.This model has been around since the 1990s.The initial function of this model is to serve as a guide in building training program tools and infrastructure [30].The following are the stages of the ADDIE model carried out.a. Analyze, at this stage the researcher conducts field studies and literature studies to search for data and information related to the research.Next, researcher will carry out an analysis of software requirements for creating website-based interactive multimedia.The data collection is conducted by providing a questionnaire to students via Google Form.At this stage, problems faced by students are also looked for, especially in the ability to solve problems in the form of story problems b.Design, at this stage, prepares teaching materials, questions and application design.Material preparation, namely the preparation of teaching material to be made, is related to branching and repetition, for questions adapted to the material and problem solving indicators according to Polya.Application design: Here researchers design application storyboards, ERDs, context diagrams, application flowcharts and use case diagrams.At this stage the questions are validated by experts.Meanwhile, the material will be finally validated along with the application and at this stage it will only be validated by the supervisor.Multimedia design validation is carried out by the supervisor.
c. Development, in the Development phase, the researcher implements the application design.The program development is carried out using the PHP programming language with the Codeigniter 3 framework.In this stage, validation is also conducted for both media and content by three expert reviewers.
d. Implementation, in the Development phase, the researcher carries out the implementation of the application design.The program is created using the PHP programming language with the Codeigniter 3 framework.At this stage, validation is also performed for both the media and content by three expert reviewers.
e. Evaluation, In this stage, the researcher processes the data obtained from the study.This evaluation is conducted to assess students' responses and the changes in students' problem-solving skills resulting from the multimedia.The results of the multimedia assessment given to students will be evaluated using a Likert scale to determine whether the media is excellent, good, satisfactory, less satisfactory, or poor.In this phase, an impact analysis will also be conducted on the use of interactive multimedia concerning the students' problemsolving skills.
The research design used is the One-Group Pretest Posttest Design.This design involves conducting a pretest before administering the treatment.Subsequently, a comparison will be made between the results before and after the treatment [31] .The aim of this research design is to observe the changes in both pretest and posttest results.The following is Table 1 for the One-Group Pretest Posttest Design: In the end, it becomes measurable how students' scores change from the pretest to the posttest.These score changes can gauge students' problem-solving abilities.

A. Research Population and Sample
In this research activity, sampling is necessary, and the sample is taken from the population that has specific quality and characteristics.In this study, the population will be the students of SMKN Negeri 1 Cimahi.The research does not focus on the entire population but rather on specific characteristics within that population, namely the students of class X-B, totaling 36 students, in the software engineering concentration at SMKN 1 Cimahi.The technique used in this research is non-probability sampling, specifically purpose sampling.This involves selecting samples based on specific considerations, considering that the chosen sample aligns with the research problem.Only one class, X-B, is selected because of the block system implemented at SMKN 1 Cimahi, allowing the examination of only one class at the same time.

B. Research Instrument
Instruments created by the researcher here are diverse.There are instruments for field studies, pretest-posttest questionnaires, worksheets and quiz questions, multimedia assessment instruments, instruments for the presence of problem-based learning stages in multimedia, instruments for the presence of problem-solving indicators in multimedia, and multimedia assessment instruments by students.For the field study instrument, it consists of questions given to teachers and questionnaires given to students discussing issues in programming learning.The pretest and posttest questionnaires consist of 56 questions each, which will be validated by experts and tested on students.Worksheets and Quiz question instruments will be validated by experts, and quiz questions will be tested on students.The multimedia assessment instrument will use the LORI questionnaire, specifically LORI V.2 [32].This questionnaire remains unchanged to combine content and multimedia assessment in one questionnaire.Then, the instruments for assessing problem-based learning and problem-solving in multimedia are used to see if there are problem-based learning stages and problem-solving indicators in multimedia.The student multimedia assessment instrument will refer to the Technology Acceptance Model (TAM) instrument [33]

C. Data Analyses Technique
After validating the questions by experts and validating the media and materials by experts using the LORI questionnaire, whose scores will be taken in the form of a Likert scale, a test was conducted for the XI-A RPL class at SMKN 1 Cimahi, which had studied algorithm and programming materials.The purpose of this test is to assess the discriminative power, validity, reliability, and level of difficulty of the questions.Subsequently, a pretest was conducted on the research sample, followed by the treatment, and then a posttest.The results of the pretest and posttest were analyzed to test the hypothesis regarding whether there was a change in students' problem-solving abilities or not.Hypothesis testing was conducted using the t-test with the SPSS application.Before conducting the hypothesis test, a normality test was performed to assess the normal distribution of the data.The hypotheses were formulated as follows.
0: There is no improvement in students' problem-solving skills.1: There is an improvement in students' problem-solving skills.
In the condition of: if the Sig.value > 5%, then 0 accepted dan 1 rejected if the Sig.value < 5%, then 1 accepted dan 0 rejected After conducting hypothesis testing, a N-Gain test is performed to observe the improvement in students' problemsolving skills based on pretest and posttest scores.This normalized gain is also aimed at determining the effectiveness of a treatment [34] The formula for the N-Gain test will be applied as explained in Formula (1) below.g = Explanation:  : n-gain 1 : Pretest value 2: Pposttest value 3 : Maximum score Then, from the results of the calculations, the data will be interpreted using the classification provided in the Table 2.

A. Analyze Stage
At this stage, there are two major steps undertaken, namely: 1. Literature Study In this stage, information will be gathered from various sources, including theses, books, journals, and other references related to the research problem.In this stage, information will be gathered from various sources, including theses, books, journals, and other references related to the research problem.The topics encompass issues in computer science education, challenges in algorithm and programming learning, difficulties in teaching methods, and the quest for a learning model suitable for problem-solving abilities.

Field Study
In this stage, information will be gathered regarding students performance gaps, determining instructional goals, analyzing learners, examining available resources, and developing a work plan.The details of this stage are as follows: a. Validating Performance Gaps The researcher validates the issues that occur with educators.The purpose of validating performance gaps is to identify problems such as the students' lack of abilities during the learning process or issues related to teaching methods and used media.Based on interviews with computer science teachers, students still struggle with solving story-based problems.b.Checking Instructional Objectives Instructional objectives are statements indicating the expected skills from learning.The aim of this stage is to determine instructional objectives in responding to the challenges faced in the learning process.c.Analyzing Student Analyzing students aims to identify students' abilities, experiences, and problems.This analysis is conducted through questionnaires given to students, serving as a reference in developing teaching media.At this stage, several pieces of data were found.Data can be seen in Fig 2. The data indicates that 83.3% of students sometimes find it difficult to solve problems in the form of story questions.Around 11.1% of students also feel that questions in the form of story problems are difficult.The remaining students answered that it is not difficult.
The students also are experiencing difficulties in differentiate branching structures and comprehending branching itself.They struggle to differentiate which specific cases are better suited for certain branches.Additionally, they find it challenging to discern and determine which branching to utilize in a program.
There are also several common difficulties in solving looping problems.Students generally encounter challenges in solving looping problems because it is difficult for them to distinguish whether a loop problem is more suitable for using for, while, or do while, especially in case study questions.

d. Identify Available Resources
In this stage, the researcher identifies the available resources, which include facilities for learning.In this phase, data is obtained regarding the computer laboratory for the 10th grade in the Software Engineering department, which has 36 adequate all-in-one computers, one projector, available internet access, and the majority of students bring their own laptops.e. Software and Hardware Preparation In this stage, the researcher develops a work plan, clarifying the product's overview.In this phase, the researcher installs all the necessary applications for design and media creation.These applications include XAMPP Control Panel, Visual Studio Code, Balsamiq mockup 3, Visual Paradigm For UML 6.1, animaker, Jdoodle, Scratch, Cicada Flowchart, Netlify, Plotagon, Visio, Filmora 10, Adobe Premiere Pro, and Google Chrome.The researcher also installs Windows 10.As for the minimum hardware used in designing and building this multimedia, it includes an AMD A8 7650K with 8 GB DDR3 RAM and a 128 GB SSD.

B. Design Stage
In the design stage, there is the preparation of teaching materials, questions, and the design of the multimedia to be created.The details of the design stage are as follows: a. Preparing of Teaching Materials At this stage, teaching materials will be prepared in accordance with the previously determined material, namely regarding Branching and Looping.b.Preparing of Teaching Modules At this stage, teaching modules or lesson plans in the independent curriculum will also be prepared which provide an overview of the learning that will be carried out.c.Preparing of Problem Solving Multiple Choice At this stage, multiple choice problem solving questions will be prepared which will later be tested on students.These questions will later be used for pretests, posttests and quizzes.c.Preparing Essay Questions At this stage, essay questions will be prepared to later be used as student practice to train students' problem solving abilities.d.Planning Learning Multimedia At this stage, software planning is carried out including creating an ERD, creating a multimedia storyboard, creating a use case diagram, creating a use case scenario, and creating a sequential diagram.e. Validation of Material At this stage, validation of the material will be carried out by the supervisor.f.Validation of Problem Solving Multiple Choice question At this stage, validation will be carried out on the questions.This validation will be carried out by educational experts.Apart from that, there will also be an analysis of question difficulty, discriminatory power, validity, and reliability.g.Validation of Worksheet At this stage, validation will be carried out on the worksheet Essay questions.This validation will be carried out by educational experts.h.Validation of Learning Multimedia Design At this stage, validation will be carried out on the multimedia learning design that will be created.This validation is carried out by the supervisor i. Material Revision In this stage, revisions are made if errors are found in the material.The purpose of this revision is to correct any mistakes in the material.

j. Problem Solving Multiple Choice Questions Revision
In this stage, revisions are made if errors are found in the questions.The purpose of this revision is to correct any mistakes in the questions.

k. Worksheets Revision
In this stage, revisions are made if any errors are found in the questions.The purpose of this revision is to correct any mistakes in the questions.

l. Learning Media Design Revision
In this stage, revisions are made if errors are found in the design of multimedia.The purpose of this revision is to correct any errors in the design of multimedia.

C. Development Stage
In this stage, the application is developed based on the multimedia design that has been created.After the application is developed, it will undergo black-box testing by the researcher and feedback will be collected.Subsequently, the multimedia and teaching materials will be tested by experts using the LORI questionnaire.The application was developed using Visual Studio Code.The application was developed using Visual Studio Code.The technologies used include PHP with the CodeIgniter framework, CSS with the Bootstrap framework, JavaScript with the jQuery library, and MySQL.Three experts were selected for judge this multimedia: Dr. Wahyudin, M.T., Harsa Wara Prabawa, M.Pd., and Agus Suratna, S.Pd.These experts were chosen based on their expertise, with Dr. Wahyudin and Harsa serving as academic professors, while Agus Suratna is a web programming teacher.Using the LORI questionnaire, media received a score of 89, while the content received 88.Overall, the multimedia development received a score of 88.

D. Implementation Stage
In this stage, the learning implementation will be carried out for the students.In the first meeting, a pretest will be conducted before implementing the learning using the problem-based learning method present in the multimedia.In the first meeting, following the pretest, the learning session will start.Subsequent meetings, such as the second and third ones, will also involve learning activities.At the end of each learning session, a quiz will be conducted.Then, in the fourth meeting, the learning process will be conducted first, followed by the completion of the posttest questions.After completing the posttest questions, students will answer the TAM (Technology Acceptance Model) questionnaire.TAM questionnaire is utilized by students to evaluate the media.

E. Evaluation Stage 1. Research Data Processing a. Normality Test
The normality test was conducted to determine whether the data is normally distributed.The Shapiro-Wilk method was employed for the normality test, and a total of 36 student samples were examined.A significance value greater than 0.05 indicates that the data is normally distributed.The following are the results of the normality test for the pretest and posttest, the results can be seen in the Table 3.The normality test was conducted to determine whether the data is normally distributed.The Shapiro-Wilk method was employed for the normality test, and a total of 36 student samples were examined.A significance value greater than 0.05 indicates that the data is normally distributed.

b. N-Gain Test
The N-Gain test is conducted to determine the problem-solving ability after using interactive multimedia.From the overall results of the pretest and posttest, the improvement can be observed as shown in Fig 4.

COMPARATION PRETEST POSTTEST Pretest Posttest
From the N-Gain test results on the overall average of pretest and posttest scores, an N-Gain score of 47% is obtained, which means the increase is classified as "Moderate".Table 4 shows the detail for each indicator: While the detailed results of the average N-Gain for each group are explained in Table 5.Based on the data from the gain test for each group, it can be concluded that all groups have gain values categorized as moderate.The upper group obtained an N-Gain score of 51%, the middle group achieved an N-Gain score of 47%, and the lower group obtained an N-Gain score of 43%.

Students' Responses Regarding the Impact of Interactive Multimedia.
This assessment is conducted by 36 students who have used interactive multimedia.Students' responses to learning with this instructional media received an average percentage score of 83%, which falls into the category of "Excellent" on the Likert scale, as shown in Fig 5.

V. DISCUSSION
In the analysis phase, an analysis of location and issues faced by students was conducted.It was found that students struggle with solving programming problems presented in narrative form and become bored with traditional lecture methods and PowerPoint media.Following the analysis, the design phase commenced.In this phase, tasks included creating questions, developing an application storyboard, crafting content materials, and conducting question trials.Subsequently, the development phase began, focusing on building an interactive multimedia application.Upon completion of development, the implementation phase commenced, involving a four-session learning period.Each session lasted 180 minutes, with pretests and posttests conducted in the first and fourth sessions.
During the development of the interactive multimedia application, the initial step was creating the application storyboard.Then, an Entity-Relationship Diagram (ERD) for the database was developed.Following this, the application was built using PHP version 8.1, with the PHP framework Codeigniter 3 and the CSS framework Bootstrap utilized.Application testing was performed to identify any errors.Media testing, including teaching material evaluation by experts, was conducted.Three experts were selected: Dr. Wahyudin, M.T., Harsa Wara Prabawa, M.Pd., and Agus Suratna, S.Pd.These experts were chosen based on their expertise, with Dr. Wahyudin and Harsa serving as academic professors, while Agus Suratna is a web programming teacher.Using the LORI questionnaire, media received a score of 89, while the content received 88.Overall, the multimedia development received a score of 88.
The use of interactive multimedia had an impact on students, notably enhancing problem-solving skills.Initially, the average score for understanding the problem increased from 25 to 68.Planning the problem-solving process increased from 45 to 69.Executing the problem-solving process increased from 57 to 75.Lastly, the review stage improved from 36 to 62. Thus, summarily, the initial average score of 40 rose to 68.The assessment result of the multimedia is 83%, which is considered excellent.
The next researcher who develops this interactive multimedia platform should also aim to enhance its UI to make it more responsive when accessed on mobile devices.Improving the UI should take into account screen size and the touch capabilities of mobile devices.

VI. CONCLUSIONS
Based on the conducted research, several conclusions can be drawn.The design of interactive multimedia by applying the problem-based learning model follows the ADDIE stages.Based on the test results of the pretest and posttest values, an increase in the pretest and posttest scores can be observed.The total N-Gain is 47.N-Gain for the upper class is 51.N-Gain for the middle class is 47.N-Gain for the lower class is 43.From this, it can be seen that there is an increase, and when interpreted, the increase is at a moderate level.
Based on the results of the Technology Acceptance Model (TAM) questionnaire given to 36 students, it can be seen that the students' response to the multimedia is positive.User perception of usefulness scores 85 out of 100.User perception of ease of use scores 83 out of 100.Attitude in using scores 84 out of 100.Attention to use scores 82 out of 100.Thus, the average is 83.5, and it is rated as excellent.

Fig 1 .
Fig 1. Research Procedure with the ADDIE model Details of the stages are as follows:

Fig 2 .
Fig 2. Difficulities in Solve Narative Question Fig 3 shows several results of creating the application interface.

Fig 3 .
Fig 3. User Interface Display of Interactive Multimedia

Fig 4
Fig 4 N Gain Result

Fig 5 .
Fig 5. Scale of Student Response Results