JRSSEM 2023, Vol. 02 No. 6, 1146 – 1154

E-ISSN: 2807 - 6311, P-ISSN: 2807 - 6494

DOI: 10.36418/jrssem.v2i06.370 https://jrssem.publikasiindonesia.id/index.php/jrssem

DEVELOPMENT OF INTERACTIVE LEARNING MEDIA IN

BASIC PROGRAMMING SUBJECTS BASED ON LEARNING

MANAGEMENT SYSTEM (LMS)

Nurhayat Candra Kusumah

Master Program in Information Systems STMIK LIKMI, Indonesia

e-mail: candra.hafidz@gmail.com

*Correspondence: candra.hafidz@gmail.com

Submitted

: 25

December 2023

Revised

: 09

January 2023

Accepted

: 25

January 2023

Abstract: Interactive Learning Media has a very important role in the process of teaching and

learning activities (KBM) in schools, especially during a pandemic, where KBM activities must

be carried out online (in a network). To streamline online learning activities are stored in the

Learning Management System (LMS), which is a web-based software program for the

management, documentation, monitoring, reporting, administration, and distribution of

educational content, training programs, technical manuals, instructional videos or digital

library materials, and projects learning and development. Interactive Learning Media is a

multimedia-based tool that can describe messages or information from teacher to students in

which active two-way communication occurs between multimedia and users (students) so that

it can facilitate the online learning process. This study used the Multimedia Development Life

Cycle (MDLC) method with six stages, namely: concept, design, material collecting, assembly,

testing, and distribution. The research objective is to create interactive learning media for basic

programming subjects using Articulate Storyline software. The results of designing learning

media are in the form of a scam application that can be integrated into the school's Learning

Management System (LMS) and can be accessed by students anywhere and anytime via a

laptop or smartphone.

Keywords: Interactive Learning Media; Multimedia Development Life Cycle (MDLC); Learning

Management System (LMS); Articulate Storyline Software.

Nurhayat Candra Kusumah | 1147

INTRODUCTION

The condition of the Covid-19

pandemic has made all aspects of life

undergo changes that are increasingly

worrying. Direct and indirect transmission

through objects, contaminated surfaces,

and air, makes all humans in the world have

to keep their distance in interacting. This

makes all sectors of human life regress.

One of the biggest impacts of the

pandemic is education. Learning process

activities cannot be carried out, especially

face-to-face, in which in the end the

material is not well presented and makes

the quality of education decrease. To

achieve learning objectives, the learning

process activities are carried out online.

One of the efforts of the online

learning process is to use the Learning

Management System (LMS), which is a

web-based software program for the

management, documentation, monitoring,

reporting, administration, and distribution

of educational content, training programs,

technical manuals, instructional videos or

digital library materials, and learning and

development projects. LMS is used to

deliver training and educational materials

to students or external users via the

Internet. It delivers content in a format that

can be accessed, downloaded, and worked

on from any location where an Internet

connection is available. This flexibility and

cost savings are two key elements of an

LMS (Tafiardi., 2005).

So that the learning content in the LMS

can be more interesting and effective, one

of the important content in the training

material is the creation of interactive

learning media. Interactive learning media

is anything in the form of learning media

whose use can provide a bond between the

audience and the learning media by giving

each other influence and giving each other

actions and reactions between one in

helping to deliver learning material (Arsyad,

2011).

Learning media is a messenger

technology that can be utilized for learning

purposes. In addition, the media has

various benefits, including helping teachers

in delivering their teaching materials, the

media is also seen as a communication tool

that bridges abstract ideas and the real

world (Sadiman, 2011).

One of the teaching materials that

requires the creation of interactive learning

media is the Basic Programming lesson

because the level of difficulty of this subject

matter requires an internal learning system.

This subject belongs to the group

productive subjects because in general

vocational schools are divided into

productive, normative, and adaptive

lessons. where in addition to learning in the

classroom, the learning process is also

carried out in the laboratory because this

subject has practicum material as stipulated

in the vocational school curriculum whose

derivatives are based on the syllabus and KI

KD (Ministry of National Education, 2008).

Creating interactive learning media

requires applications that already support

the latest technology, one of which can be

compatible with various devices and then in

accessing unlimited time and place. The

application that meets the criteria above is

Articulate storyline, which is one of the

multimedia authoring tools used to create

interactive multimedia applications with

content in the form of text, images,

1148 | Development of Interactive Learning Media In Basic Programming Subjects Based On

Learning Management System (LMS)

graphics, sound, video, and even animation

and simulation. For now, articulate storyline

software is widely used, because it has

advantages over other interactive media

software (Yumini, 2015). Among them are:

1. Having this AS feature is very similar to

the feature present on Ms. PowerPoint

2. Easy to learn for beginners who already

have the basics of creating media using

Ms. PowerPoint

3. Supports Game-based learning because

it is Interactive

4. Content can be a combination of text,

images, graphics, sound, animation,

and video

5. The results of the publication can be

run through:

a. Desktop, in the form of an

application file (.exe)

b. Web browser, in the form of an

HTML5 file

c. Android smartphones, by converting

them to APK

d. LMS (Learning Management System)

such as Moodle, in the form of

SCORM files.

6. It has a relatively small file size of

publications and APK conversions so it

is lightly installed on a smartphone.

The development of interactive

learning media requires software

development methods, one of the

development methods that can be used is

the Multimedia Development Life Cycle

(MDLC) method. Nurajizah (Mustika,

2017)has used the MDLC method in

developing a multimedia-based children's

song recognition application, the

application creation process uses six stages,

namely: concept, design, material

collecting, assembly, testing, and

distribution.

Based on the description above, the

research made interactive learning media in

basic programming subjects based on the

Learning Management System (LMS) using

the Multimedia Development Life Cycle

(MDLC) research method.

MATERIALS AND METHODS

The development of this multimedia

method is carried out based on six stages,

namely concept, design, material

collecting, assembly, testing, and

distribution. According to Luther in

Binanto (Binanto, 2010), these six stages

do not have to be sequential in practice,

they can exchange positions with each

other. Even so, the concept stage should

indeed be the first thing to do. Figure 1 is

a stage drawing of the MDLC method.

Figure 1. Stages of the MDLC method

Concept (Pengonsepan)

This stage is the stage for

determining the purpose and who the

users of the program are (audience

identification). The purpose and end

use of the program affects the nuances

of multimedia as a reflection of the

identity of the organization that wants

the information to reach the end user.

Nurhayat Candra Kusumah | 1149

At this stage, researchers conceptualize,

among others, to:

Determine the objectives and

benefits of project management

methodology learning media

applications.

Determine who the users of the

project management

methodology learning media

application

Describes the concept of the IT

Project Management Interactive

Learning Media application to be

built.

Design

At this stage the creation of

specifications regarding the program

architecture, style, appearance, and

material/material requirements for the

program. The design that will be made

uses the interface design of the

application menu display. The software

used to design the interface is Microsoft

Visio.

Material Collecting (Pengumpulan

Bahan)

This stage is the stage of collecting

materials that correspond to the needs

worked out. These materials include clip

art, photos, animations, videos, audio,

and others that can be obtained for free

or by ordering from other parties

according to their designs. This stage

can be done in parallel with the assembly

stage. However, in some cases, the

material collecting stage and assembly

stage will be done linearly and not

parallel.

Assembly

The assembly stage is the stage of

making all multimedia objects or

materials. App creation is based on

design stages, such as storyboards,

flowcharts, and/or navigation structures.

Testing

The testing stage is carried out after

completing the assembly stage by

running the application/program and

seeing if there are any errors or not. The

first stage at this stage is also known as

the alpha test stage whose testing is

carried out by the maker or the maker's

environment. After passing alpha

testing, beta testing involving end use

will be performed.

Distribution

At this stage, the application will be

stored in a storage medium. If the storage

medium is not sufficient to hold the

application, compression to the

application, compression to the application

will be performed. This stage can also be

called the evaluation stage for the

development of a finished product to be

better.

RESULTS AND DISCUSSION

The use of the MDLC method

produces research results with the

following steps:

Concept (Pengonsepan)

This stage produces a formulation of

the concept, namely:

The purpose of the application is an

interactive learning media based on

the Learning Management System

(LMS). The benefits of the

1150 | Development of Interactive Learning Media In Basic Programming Subjects Based On

Learning Management System (LMS)

application are to make it easier to

learn Basic Programming material

so that students can be more

motivated to learn and easily

understand the learning material.

The user of the application is a

student of SMKN 1 Cibinong.

Description of Interactive Learning

Media Application Basic

Programming Subjects, based on

LMS, so that it can be operated on

various devices anywhere and

anytime.

Design

In this design stage, the author

analyzes and designs interactive media

data as reference material in the process

of making interactive media.

Site Map Basic Programming Learning

The Site Map of this komjardas

subject illustrates a diagram in the

division of the order of material that

is entered into interactive learning

media and used in teaching and

learning activities.

Figure 2. Site Map Mapel Basic

Programming

Learning Media Menu Structure

The structure of learning media

in each development is needed to

create a flow or arrangement of the

media display to be built. This media

structure is made in the form of

images or charts that are used as a

reference in the development of

learning media.

Figure 3. Learning Media Menu

Structure

Designing the interface display

The interface is used to describe

each display contained in the learning

media before the implementation

stage is carried out. The results of the

interface design that has been made

can be described as follows:

Title and Opening Page

This view is designed to display

the title of the media application.

Figure 4. Opening page design

Main Menu Page

The main page is a page in which

there are main buttons that function

as navigators to go to the desired

page.

Nurhayat Candra Kusumah | 1151

Figure 5. Main page design

Material Page

This page is for displaying

learning materials.

Figure 6. Material page design

Evaluation Page

This page is an evaluation page

for students as evaluation material

for the teaching material that has

been studied.

Figure 7. Valuation page design

Material Collecting (Pengumpulan

Bahan)

At this stage, material related to

teaching materials/learning materials is

obtained from interviews with teachers

who teach basic programming subjects,

read books, and search for other resources

from the internet. As for interactive

multimedia-related materials, authors get

material from reference books and the

internet. Assets or materials for making

interactive media are images or images

such as images that will be used as

backgrounds and buttons, animations for

the opening, and sounds that will be used

as backgrounds or sound effects.

To build an application, hardware, and

software are needed. The hardware used is

a set of computers with specifications:

Intel Inside Core i5 Processor, 4 GB

Memory, and 12.0" Monitor. The software

needed is Windows 10 Home as an

Operating System, Articulate Storyline 3.0

is used to create and process applications,

Adobe Illustrator is used to process

images, Adobe After Effects to process

animations, and Adobe audition to

process sound.

Assembly

At this stage, the creation of the

application uses Articulate Storyline

Software, for a design using Adobe

Illustrator Software. The process of

creating interactive media for basic

programming subjects based on the

design process is as follows:

Opening Page

This page was created as an opening

for an interactive media application by

displaying a title. This page is designed

using the adobe after effect application

and then entered into the articulate

storyline application so that it becomes

a moving text animation

Figure 8. Opening Page View

1152 | Development of Interactive Learning Media In Basic Programming Subjects Based On

Learning Management System (LMS)

Main Menu Page

On this page, there are 3 main

buttons about the material to be

studied and quizzes. Then above there

is a button with a question mark, which

serves as a hint for using the program

Figure 9. Main Menu Page View

Material Page

On this page, there is a material

title in the top center, the content of the

material in the middle of the page, and

the sub-material are in the bottom left.

Then above the right, there is a menu

button from the material and

instructions. On the left and right sides

of the material, there are the next and

back buttons.

Figure 10. Material Page View

Quiz Page

On this page, there is a quiz title on

the left side of the page and the username

input is in a box on the right side of the

page and a login button. Then there is a

Figure 11. Quiz Page View

After the student finishes doing the

quiz, a results page will appear with a tail

and cartoon image displayed on the right

and left sides of the page. Below the page,

there is a repeat button and below it again

there is a description of the quiz results.

Above the kana, there is an x button to exit

the quiz.

Figure 12. Quiz Results Page View

Testing

The testing stage is carried out after

completing the assembly stage by running

the application/program can be seen

whether there are errors or not. At this

stage, testing is carried out using black-box

testing. This black box method is a program

test based on the function of the program.

The purpose of this black box testing

method is to find function errors in the

program. Blackbox testing focuses on the

functional requirements of the software.

This test allows the analysis of the system

to obtain input conditions that work on the

entire functional needs of the application.

Nurhayat Candra Kusumah | 1153

The last test scenario that is carried out

repeatedly can be to obtain test results. The

test results can be seen in table 1.

Table 1. Test Results

Distribution

The distribution stage is the stage

where the application is stored in LMS or

online learning media. This is the final stage

where interactive learning media is ready to

be used by students in the learning process.

This basic programming interactive

learning medium was created using

Articulate Storyline 3.0, where project files

are stored in the form of *.ls files. story

(articulate document). After the media has

been created, it is then exported into a file

*. score, so that the application can be run

easily in the LMS.

CONCLUSIONS

The development of interactive media

learning media for basic programming

subjects was created using Adobe

Illustrator, Adobe After Effect, Adobe

Audition, and Articulate Storyline 3.0

software. The MDLC method is used in the

development of this interactive learning

media, which produces interactive

multimedia learning media in the form of

interactive media that can be integrated

into the LMS page which aims to facilitate

the teaching and learning process

between teachers and students. The

learning media created has been tested

with blackbox testing techniques with

good results.

The next suggestion for researchers is

to be able to develop even more interesting

interactive learning media, by combining 3-

dimensional objects and learning

simulation animations. Applying learning

media using dynamic learning models. It is

necessary to add material so that this

interactive multimedia application can be

fully used on Basic Programming Subjects.

REFERENCES

Arsyad, A. (2011). Learning media.

Jakarta:

PT Raja Grafindo Persada

Binanto, I. (2010). Digital Multimedia–Basic

Theory and Its Development.

Yogyakarta: Andi

Ministry of National Education. (2008).

Big

Dictionary Indonesian Fourth Edition

PT Gramedia Pustaka Umum.

Mustika, et al. ,. (2017). Development of

Interactive Learning Media using the

Multimedia Development Life Cycle

Method.

Journal of Online Informatics

(2), 121–126.

Sadiman, A. S. (2011). Media Education,

Definition, Development, and

Utilization.

Jakarta: PT. Raja Grafindo

Persada

Tafiardi. (2005). Improving the Quality of

Education Through E-Learning.

1154 | Development of Interactive Learning Media In Basic Programming Subjects Based On

Learning Management System (LMS)

Journal of Sower Education

((4)), 85-

97.

Yumini, S. , & R. L. (2015). Development of

Interactive Learning Media Based on

Articulate Storyline in the Eyes of Basic

Electronic Engineering Training at SMK

Negeri 1 Jetis Mojokerto.

Journal of

Electrical Engineering Education

((3)), 845–849.

for possible open-access

publication

under the terms and conditions of the Creative

Commons Attribution (CC BY SA) license

(https://creativecommons.org/licenses/by-sa/4.0/).