Design of Interactive E-Learning Based on Virtual Tour for Higher

Education

Didik Dwi Prasetya

1,2

, Aji Prasetya Wibawa

, Triyanna Widiyaningtyas

, Tsukasa Hirashima

State University of Malang, Malang, Indonesia, Malang, Indonesia

Graduate School of Engineering, Hiroshima University, Japan

Keywords: E-learning, Virtual Tour, Interactive, Immersive, Web

Abstract: E-learning has become a very interesting topic because it offers practical solutions to solve problems in

traditional learning or face to face. The e-learning approach utilizes Internet and web technologies to provide

adequate learning support. This article proposes the design of an e-learning system based on the virtual tour

for higher education in the State University of Malang. The virtual tour presents the real-life visualization of

the outside 360-degree moveable dynamic Computer Network components images as the original object. This

web-based technology design utilizes HTML5, CSS3, and AJAX scripting to realize a rich interactive and

immersive environment. The functionality test results show that the application design is running well in

accordance with the defined specifications and no errors found. In the limited testing, the students were very

enthusiastic in this approach that enhanced the learning experience and provided positive feedback through

the given questionnaire.

1 INTRODUCTION

Information and Communication Technology (ICT)

has a dominant role in changing the human lifestyle

today. As we know, almost all human activities, both

for commercial and non-commercial purposes, rely

on the ICT services. There are many fields that are

actually utilizing the services of this technology, one

of them is education. Various educational strategies,

from elementary until higher education level,

implement ICT-based systems, for example,

electronic learning (or simply called e-learning). In

recent years, e-learning has become a very interesting

topic because it offers practical solutions to solve

problems in traditional learning or face to face.

Classical teaching alone in a classroom may not be

suitable to fulfil the individual requirements to serve

each student’s needs which currently leads to the use

of modern technology (Banditvilai, 2016). Many

researchers agree that the most significant revolution

offered by e-learning is the ability to overcome the

limits of place and time in learning (Tsai, 2009).

According to (Ivleva and Fibikh, 2016), an e- learning

approach is also considered appropriate to be one of

the valuable solutions to be implemented in education

development. E-learning offers many advantages to

support education and learning, including being able

to save time, costs, and resources.

The interaction between teacher and students in

the e-learning context can be implemented either

synchronous (real-time) or asynchronous (delayed).

Online learning based on ICT features and services

are widely applied in education environment because

it offers ease and flexibility. However, this exciting

potential must be supported with adequate

infrastructure, including the availability of

meaningful and interesting content. The role of this

learning content is very important to facilitate the

success of e-learning or digital learning based on ICT.

To optimize the quality of electronic learning, it is

necessary a rich and interactive learning content.

Interactive contents are often used to describe the

relationship between two things influencing each

other (Prasetya, Wibawa and Hirashima, 2018).

Provision of rich content can be realized through

multimedia elements, such as text, image, audio, and

video. The learning system based on multimedia

contents is also able to provide better visual

representation and achieve resource sharing among

students effectively (Wang, Qi and Cui, 2016).

According to the study conducted by (Ni, 2017), the

use of multimedia content in learning is able to

provide various learning information needed by

Prasetya, D., Wibawa, A., Widiyaningtyas, T. and Hirashima, T.

Design of Interactive E-Learning Based on Virtual Tour for Higher Education.

DOI: 10.5220/0008407000100014

In Proceedings of the 2nd International Conference on Learning Innovation (ICLI 2018), pages 10-14

ISBN: 978-989-758-391-9

students and make language practice in learning more

effectively.

One of the potential opportunities to implement

multimedia-based e-learning is integrating a virtual

tour approach. A virtual tour is an interactive

simulation of an existing location on the earth, usually

composed of a sequence text, still images, and

panoramas. The word panorama denotes an unbroken

tour/view because a panorama can be a series of

images captured by the photographer or the video

footage (Cho and Fesenmaier, 2000). These virtual

tours have taken from a series of panoramic

photograph known as a vantage point. A virtual tour

is a computer-based virtual environment which

reconstructs and represents a real place virtually (Yoo

et al., 2010). Thus, this technique provides a real

sensation to users as if they visit the area in advance.

In the 360-degree virtual tour, a panoramic simulation

form is provided in full to a 360-degree viewing

angle. Virtual environments are being utilized in a

wide range of academic and commercial applications.

The study of virtual tour application in

entertainment and commercial fields has been done

and intended for various purposes. (Zhang, Zhu and

Ma, 2017) proposed a special approach for spherical

panorama recording by utilizing a head-mounted

display equipped with stereo effects on a virtual tour

system application. So, in addition to providing

realistic photos like virtual tour applications in

general, this system offers voice features that make

users more impressed. Nevertheless, the

implementation of this virtual tour technology in the

education area is still not much done. One of the

relevant studies related to the use of virtual tours in

the field of education was conducted by (Rajapaksha

et al., 2017). In his research, Rajapaksha developed

E-GEO e-learning application to support Geography

subject in Srilanka. The entire design of the

application adopts gamification technique to provide

a motivational environment for users. This

application works in a totally offline environment

without the Internet connectivity.

Referring to the related studies we have

mentioned, we can highlight the differences works

with our proposed research. The objective of this

study is the design of interactive e-learning based on

virtual tour technology for higher education in the

State University of Malang. This system is an

extension of the previous system that we have

developed before, namely a web-based lightweight

interactive multimedia application for distance

learning (Prasetya, Wibawa and Ahmar, 2018). Here

we add new features to existing systems, a virtual

simulation of a tour of computer network hardware

components. We integrate virtual tour features to

produce a more interesting and motivating electronic

learning environment. Thus, students can have a more

realistic representation of objects in learning.

2 METHOD

2.1 System Design

The designed application is an electronic learning

application that utilizes multimedia content to support

the learning process. The resulting output is a

software application product, so the development

design also refers to the relevant process model. After

the development phase, we conduct a series of tests to

ensure that the product is free of errors and meets the

appropriateness of use.

The illustration of the system design can be

described using the use case diagram as shown in

Figure 1. Here are two main users who will interact

with the system, they are learners or students and

teachers or lecturers. Learners are an entity who has

the main role to access the public learning services of

the system, such as view materials, virtual tour and

take interactive quizzes. In the other side, the teacher

entity is a dedicated user who has the main

responsibility for managing the content of the

learning system. To access the provided content, both

learners and teacher must log in first. After successful

to their level of the user.

Figure 1: Use case diagram of the system.

The main objective of this application design is to

provide an interactive and immersive learning content

in order to help improve the quality of education

services. To realize the research goal, we choose web

technology as the basis of the application platform.

The web technology approach is clearly accessible

widely and together easily.

Design of Interactive E-Learning Based on Virtual Tour for Higher Education

2.2 System Testing

There are two types of testing conducted in this study:

product testing and user feasibility testing. Product

testing is done by testing the main functions

contained in e-learning application developed using a

black-box method. The main functions of the system

represented by five subsystems that have been

defined in the use case diagram. To get the objective

result, we use the same hardware specifications in

both the implementation and test.

The user feasibility test aims to determine the

usefulness of the product directly. This test is

conducted in a limited way by taking 15 university

students in the Informatics Engineering Education

study program. In order for the results of testing to be

more optimal, the selection of subjects is made

through a selection by the class teacher by referring

to three categories of student's abilities (advanced,

intermediate, basic) with each of 5 people. To

complete the testing process, a questionnaire sheet

was provided using a 4-point Likert scale

3 RESULT AND DISCUSSION

As we mentioned above, the product in this study is

an extension of the features of the products that we

have developed previously. Thus, the main interface

design also has the same appearance. So, this system

is a web-based learning application that takes case

studies of Basic Computer Network courses. In the

beginning, there are three main menus available,

including basic material, simulation exercises, and

interactive quizzes. The main interface design is

shown in Figure 2.

The first part of the material contains an

introduction to computer networks that are adjusted

to the level of college. This material content is

compiled with reference to textbooks and consists of

text, images, and videos. The structure of this basic

material is similar to that in textbooks, it's just added

animated and video content. In the training section,

students can try the simulation of composing

computer network design based on topology. To try

these interactive simulation students use mouse input

devices by dragging and dropping to the appropriate

node. Display simulation page for composing

computer network design is shown in Figure 3. One

of the additional features provided in this learning

system application is full-screen display. This feature

enables the users to focus on the wide view of window

application without any interruption by the other

window application.

Unlike the previous applications that only finished

at the computer network design step, here we added a

virtual tour feature. When the computer network is

properly arranged, students can click on the

components involved to see more details. Display

components are designed based on virtual tour

technology that can be shifted to the left or right.

Thus, students can have a more understanding of the

picture of the components as shown in Figure 4.

Figure 2: Main page of learning system.

Figure 3: Network design simulation.

Figure 4: Virtual tour of content material.

ICLI 2018 - 2nd International Conference on Learning Innovation

The implementation of a virtual tour approach in

electronic learning applications looks very

appropriate and interesting. However, in the context

of computer network material, students need to

understand well the components used, including

detailed descriptions. Through the virtual tour view,

students can see component objects virtually with an

angle of 360 degrees freedom. This approach is able

to represent objects in real terms as if looking

directly. So, students are no longer just to imagining

without getting complete information.

The next step after the product development stage

is to ensure that the product is in accordance with

specifications and there are no errors found. In

software development, this step was realized through

a series of trials. To support this testing phase we

define procedures and test cases first. This phase

includes the activities of executing the system in the

defined condition and observes the results.

Testing performed by evaluating the main

functions of the smallest unit until the whole system.

Testing conducted using black-box methods and

based on the scenario in each subsystem. There are

two scenarios that we involve: normal and alternative

scenarios. Alternative scenarios arise when there is

branching, for example at the stitching stage, the

result might be either successful and failure. As

described in the use case diagram, there are five

main functions available: view material contents,

virtual tour, interactive quiz, login system, and

manage content. The complete testing result is shown

in Table 1.

The test procedure is to execute the main unit or

module of the system application. Furthermore, we

give an input and observe the given output as a

feedback. For example, in the login system module,

the possibility that happens is a successful login

(normal scenario) and failure (alternative scenario). If

the system gives a suitable output, then it can be said

that the module functionality is declared acceptable,

otherwise is rejected. If there are still modules that

have not well functioned, it will be repaired and

retested until the entire of the module is declared

accepted. Based on the test results, it can be

concluded that the application software is free of

syntax errors and well functioned.

In the practical use stage, it starts with a brief

explanation and continues by accessing the

application through a computer that is connected to

the local network. Students are given 20 minutes to

carry out learning with the help of products that have

been developed. The last stage, students are given 10

minutes to fill in the response assessment instrument

on the feasibility of the product.

Table 1: Black-box test result.

Sub-

system

Scenario

Methods

Results

Material

contents

Normal

Black-

box

Accepted

Alternative

Black-

box

Accepted

Virtual

tour

Normal

Black-

box

Accepted

Alternative

Black-

box

Accepted

Interactive

quiz

Normal

Black-

box

Accepted

Alternative

Black-

box

Accepted

system

Normal

Black-

box

Accepted

Alternative

Black-

box

Accepted

Manage

content

Normal

Black-

box

Accepted

Alternative

Black-

box

Accepted

Based on the results of a limited field test, the

average results were 84.00. Referring to the table of

validity, it can be concluded that practical use in a

limited group got very high criteria. That is, the

design of electronic learning applications that were

developed received a very good response with a

percentage of the appropriateness of 84%.

Based on the field test results, can be analysed the

statement items that get the highest point of 91.67%

is "The virtual tour approach is able to provide a

better and more interesting representation". On the

other hand, application performance issues still need

to be reviewed again and get the lowest point, which

is 78.33%. However, this value can still be tolerated

because, as usual, virtual tours usually always involve

large or collective image data.

Figure 5: Appropriateness of practical use test.

Design of Interactive E-Learning Based on Virtual Tour for Higher Education

There are at least 3 added values that contribute to

the application design in this article: interactive

simulations, virtual tours, and interactive quizzes.

Interactive simulation allows students to build

network topology designs with drag and drop game

models. Integration of virtual tour application in this

research is represented by giving outside 360-degree

virtual tour feature in electronic learning. This stage

is realized by processing a series of images that

overlap and form whole objects. Other interactive

content provided in the design of this application is

multiple choice evaluation. In this feature, the learner

can practice and get a result that describes the

understanding of the material

4 CONCLUSIONS

This paper has proposed and developed design of

interactive e-learning based on virtual tour

technology for higher education. The development of

this application utilizes web technology that is able to

produce lightweight and widely accessible

application. To realize the virtual tour feature on

material objects, we use a series of overlap images

that are processed using scripts and make it moveable

through mouse interaction. A web-based virtual tour

360-degree electronic learning application is one of

the right strategies to support educational services.

Based on the functionality test results, it can be

concluded that the e-learning system is no syntax

errors and well functioned. Thus, the development of

this application is fulfilled with the defined system

requirements. The results of testing in a limited group

also show that this product is suitable for use in

learning. However, to find a more objective and

optimal result, further work is necessary to conduct

field testing broadly and involve the learning

outcomes.

REFERENCES

Banditvilai, C. (2016) ‘Enhancing Students’ Language

Skills through Blended Learning’, Electronic Journal of

e- Learning, 14(3), pp. 220–229.

Cho, Y. H. and Fesenmaier, D. R. (2000) ‘A conceptual

framework for evaluating effects of a virtual tour’, in

Information and Communication Technologies in

Tourism. Vienna: Springer, pp. 314–323.

Ivleva, N. V. and Fibikh, E. (2016) ‘April Experience of e-

learning implementation through massive open online

courses’, IOP Conference Series: Materials Science and

Engineering, 122(1).

Ni, D. (2017) ‘Design and Research on English Listening

Teaching Assisted by Computer Multimedia’,

International Journal of Emerging Technologies in

Learning, 12(1).

Prasetya, D. D., Wibawa, A. P. and Ahmar, A. S. (2018)

‘Design of Web-based Lightweight Interactive

Multimedia for Distance Learning’, Journal of Physics:

Conference Series, 1028(1).

Prasetya, D. D., Wibawa, A. P. and Hirashima, T. (2018)

‘An interactive digital book for engineering education

students’, World Transactions on Engineering and

Technology Education, 16(1), pp. 54–59.

Rajapaksha, P. H. A. S. et al. (2017) ‘E-GEO: Geography

based E-learning system for sri lanka’, in Technology

and Management (NCTM), National Conference.

IEEE, pp. 189–194.

Tsai, M. J. (2009) ‘The model of strategic e-learning:

Understanding and evaluating student e-learning from

metacognitive perspectives’, Journal of Educational

Technology & Society, 12(1).

Wang, Y., Qi, A. and Cui, F. (2016) ‘Application of the

Multimedia Teaching System Based on Real-time

Shooting and Production in Martial Art Course’,

International Journal of Emerging Technologies in

Learning, 11(3).

Yoo, B. et al. (2010) ‘3D user interface combining gaze and

hand gestures for large-scale display’, in CHI’10

Extended Abstracts on Human Factors in Computing

Systems, pp. 3709–3714.

Zhang, Y., Zhu, Z. and Ma, P. (2017) ‘Walk through a

Museum with Binocular Stereo Effect and Spherical

Panorama Views’, in Culture and Computing (Culture

and Computing), 2017 International Conference. IEEE,

pp. 20–23.

ICLI 2018 - 2nd International Conference on Learning Innovation