E-learning technology: Employing Matlab GUI and

Responsive Web Design approach for teaching

Image Processing and ANN
Youssef AYYAD

Hamid MAGREZ

Abdelhak ZIYYAT

Electronics and Systems Laboratory,

Faculty of Sciences, Mohamed First
University
Oujda, Morocco

youssef-ayyad1@hotmail.fr

Electronics and Systems Laboratory,

Faculty of Sciences, Mohamed First
University
Oujda, Morocco
CRMEF Oujda, Morocco
magrezhamid@hotmail.com

Electronics and Systems Laboratory,

Faculty of Sciences, Mohamed First
University
Oujda, Morocco
abdelhak ziyyat@hotmail.com

AbstractWith the increasing availability of Internet technologies and computing, distance learning has attained considerable
attention in many Moroccan universities in recent years. In this
paper, we describe the development of a web-based E-learning
Platform in image processing and Artificial Neural Networks
(ANN). Generally, courses are designed for large screens which
causes some discomfort among users of small screens of mobile
phones, smart-phones and tablets. In this work, we describe the
implementation of a responsive e-learning course. In addition, in
an effort to provide an image-based tool in ANN, an easy to use
MATLAB GUI is provided to help understanding of Artificial
Neural Networks.
Index TermsE-learning Platform; Graphic User Interfaces
(GUI); Responsive Web Design; Adaptive Courses; Kohonen Neural Networks; Self-Organizing Map (SOM); Image Processing.

I. I NTRODUCTION
With the growing increase in the use of information and
communication technologies, the use of e-learning platform
has become increasingly common in different disciplines for
educational purposes. The integration of a knowledge management system, a learning management system or a content
management system in education has taken an important
place, because of their many virtues supposed to describe a
course for anyone online as a tool for developing professional
competencies in students [1].
Several researches address the usefulness of www-based
learning [2] in computer sciences [3], mathematics, physics
[4] and other related fields. Recent work in [5] showed several
factors that motivate learners to learn through a Platform,
among these factors, curiosity, work progress and satisfaction.
More interestingly, to maximize the potential use of the platform, it is necessary to provide an implementation (software),
and not simply an electronic manual. Moreover, with the
increasing availability of mobile units, The Responsive Web
Design is a response to the challenges that the Web is currently
experiencing [6]. The adaptive approach can be applied to

other uses. It is thus possible to design adaptive educational

courses [7], [8], adaptive mobile applications.
Today, students at several universities have increasingly the
ability to read and download their courses on the Internet
(15.1% of the national Internet traffic is via smartphones,
Moroccan report1 of 2014). Furthermore, students are often
required to revise their lessons using smartphones. It is therefore crucial that the Responsive Web Design and E-learning
are closely linked to the student to be able to learn their
lessons in good conditions and encourage them to enjoy at
their leisure, without limits, even in shifting. The ultimate
goal is to put online a responsive E-learning course in image
processing, accessible by any mobile unit through existing Elearning system.
In Mohamed First University, Image Processing courses are
offered for Master degree on Electronics and Informatics, Master Degree on Optics and Materials in our Faculty of Sciences
Oujda (FSO), Electrical Engineering (GE), Telecommunications Engineering and Networks (GTR) in National School
of Applied Engineering (ENSA Oujda). Artificial Intelligence
(IA) is offered for Computer Engineering (GI) in ENSA Oujda.
According to the university policy, an important concern is
dedicated to the use of new technologies in Education. Our
hypothesis is that the use of a MOODLE-based E-learning
Platform2 , responsive E-learning course and Matlab GUI is
crucial since it allows, on one hand, the simple access to the
course materials (Web page, online quiz,...) using a computer
or mobile units, on the other hand, a visualisation tool of the
neurone content for undrstanding Kohonen Neural Networks.
Artificial Intelligence (IA) described in [9] as a modeling
technique that involve the use of an algorithm (Neural Networks, Fuzzy logic, Bayesian Networks,...). The (Kohonen)
Artificial Neural Network is one of many famous algorithms
used by many researchers worldwide in intelligent tutoring
1 www.marocnumericcluster.org
2 https://moodle.org

system [10], medical image segmentation [11], character

recognition [12] and face recognition [13]. Our Matlab GUI
is implemented to give learners motivation to implement their
own software.
Related work has been found in the literature.As part of the
research project Xesop [14], a responsive content adaptation
solution was developed. It is to produce educational content in
an XML format. Regarding image processing teaching, [15]
explains the implementation of a Matlab toolbox distributed
manually to undergraduate students. And to support the ANN
teaching, [16] developed a remotely ANN courses using java
applet technology and Matlab examples. The authors in [16]
explain the usefulness of Matlab examples in the learning
process, despite object-oriented simulations.
Rest of the paper is organized as follows. In section II and
III, we adress some basics in Image Processing, ANN Courses
and Responsive Web Design (RWD). In section IV, we show
our E-learning system architecture. In section V, we give the
implementation results. In the remaining sections, we address
a discussion and a conclusion
II. I MAGE P ROCESSING AND ANN C OURSES
This course is designed to give novice learners a undersanding in Image Processing and Kohonen Neural Networks.
An image is a planar representation of a scene or a general
object in three-dimensional space. It must be converted into
digital image to be comprehensible by a computer. The digital
image is made of a set of points called pixels, each pixel
represents a light intensity, these pixels are contained in a twodimensional array (Matrix) constituting the image. That is why
the Matrix laboratory (Matlab) is used for processing digital
images. In addition, to acquire practical skills, the TOOLBOX
Image Acqisition and the TOOLBOX Image Processing
are required in this course for practical work.
kohonen Nearal Network is a learning algorithm that use
winner-take-all strategy [17], designed by [18]. Since it is
a learning algorithm, our scenario consists of using images
(faces, letters, numbers,...) in the input layer, and visualising
the content of neurones. We are interested in what it learns
to express, after the running of the algorithm. Fig. 1 shows
how neurones are linked to input layer.

Fig. 1. Structure of Kohonen Neural Networks

The activation function for each neuron of the grid is

calculated as the distance between the values of the input

neurons and associated weight values:

sX
(e(i) w(i, j))2
a(j) =

(1)

The winner neuron is activated for a smallest activation

function. The weighting vectors of all j of the Kohonen map
neurons are then updated according to the equation:
w(i, j) = w(i, j) + (t)(t, j)(e(i) w(i, j))

(2)

Where (t) is the learning coefficient, which has to decrease

over time to allow the learning to converge. (t) is the
neighborhood function. The most used function is the Gaussian
defined as:
d2
1
(3)
(t, j) = exp( 2 )
2
2
Where d is the distance between winner neurone and neurone
j. And is a time dependent function. The SOM TOOLBOX is
required for practical work in this course. Further information
on the course content can be found at [17], [19].
The next section explains the Responsive Web Design
approach implemented in our E-learning Platform3 therby
helping learners accessing the course materials by computers
or mobile units.
III. R ESPONSIVE W EB D ESIGN
In this section, we develop a practical solution which
consists in the employement of HTML5/CSS3 technology.
A. HTML5/CSS3 technology
HTML5 is an evolution of HTML with a set of new features
and guidelines to give more semantics (meaning) in the Web
page. This development contributes,with the use of style sheets
(CSS3), to the structuring of the content. For adapting a
presentation based on the targeted media, some key points4
are required:
a flexible display grid which does not depend on a fixed
resolution.
flexible media (images, videos)
Media Queries
For structuring the content in the body of the document, we
find among others semantic tags (Fig.2):
header: element to create a header;
footer: element to put a footer;
nav: element for creating menus and navigation between
page
aside: element to define an area or not related to the main
topic of the page
section: element that brings the same subject;
article: content item.
To make a responsive web page, it is important to adjust
the display depending on the resolution and the media type
(screen, print, tv ...), but also according to the characteristics of
3 www.e-learningplatform.pe.hu
4 http://objetdirect.developpez.com

have a value proportional to the size of the characters used on

the page depending on the media type. In addition, the size
can be estimated, by default, a text to be read is 16px (12pt),
and it can be assumed that this corresponds to a 1em. If a title
is 24px (18pt), we can change this value to 1.5em. In fact, for
the correct conversion, the formula 4 is applied:
target
(4)
context
Where target corresponds to the desired size, context to
the normal size and result is expressed in em (ephemeral
unit).
The interest of the transformation is that if the resolution of the
context changes, the text remains proportional to the display.
The formula is applicable to all HTML elements with the
width and height properties (width and height).
result =

C. The flexible media

Fig. 2. The complete structure of an HTML5 page

the medium. The easiest way is to apply different styles (CSS)

according to the screen size. The screen size can be detected
with the functionality offered by CSS3, Media Queries. This
is to find the limits of the effective width with the min-width,
max-width.
We can define three standard configurations:
1) for a desktop computer
2) for a tablet
3) for a smart-phone
In the test we favored the portrait format, allowing us to cover
a wide range of displays. In general, we can consider that a
portrait screen width less than 480px belongs to a smartphone,
and between 480px and 1024px belongs to a tablet and a
higher screen width 1024px to a desktop computer. We can
develop and register the CSS code for each profile and apply:
@media only screen and (max-width:480px){
/* Properties for a window width (viewport) to 480px */
}
@media only screen and (max-width:1024px) and (minwidth:480px) {
/* Properties for a window width (viewport) from 480px to
1024px */
}
@media only screen and (min-width:1024px) {
/* Properties for a window width (viewport) from 1024px */
}
B. The flexible display grid
To implement a flexible display screen, fixed measurements
must be avoided to describe the width and height of the action
area for an HTML element. If the measures are expressed
either as a percentage (%), or em (where 1em = 100%),
flexibility is ensured for both the font size and the size of the
HTML elements. The values assigned in this way allow to

For a responsive website, images, video and other media

objects should not extend beyond the defined framework.
Indeed, it is unpleasant to see a picture overflowing the
screen or too small, crush and virtually invisible. To solve
this problem, the CSS property max-width must be used,
since it specifies the maximum width of the element, relative
to its parent.
img, , video, audio {
max-width: 100%;
height: auto;
}
With the property height: auto, we can keep the media
proportions. The operation causes the scaling of the image,
that is to say resizing according to the screen size.
IV. S YSTEM ARCHITECTURE
Since security and privacy is a prior concern in our university, our system is a MOODLE-based5 E-learning Platform.
This Learning Management System (LMS) is correctly designed and imlemented. In addition, MOODLE has the best
communication tools and information is easily accessible on
the web pages and it has a very active discussion forum. Also,
Moodle did a great job by providing easy ways for teachers
to present material to their students. Files are uploaded and
accessible via Moodle. All that is required by students is
to have the right software to open them. Chat in real time
is available for participants to have a real-time synchronous
discussion (teacher-learner or learner-learner).
Moreover, we used a responsive approach to designing
educational courses (explained in section III). And regarding
Kohonen Neural Network simulation, our scenario is to implement downloadable simulation, performed in the computer
learner. Indeed, we have created a package, containing Matlab
GUI and Matlab Compiler Runtime (MCR), easily downloadable from URL http://e-learningplatform.pe.hu. MCR allows
learners to perform the activities implemented in Matlab GUI
without viewing the source code, since practical works are
5 Security

- MoodleDocs

required in this course. The Fig. 3 shows the architecture of

our system.

Fig. 3. System architecture

The devices (computers, smartphones ...) must be equipped

with a Web browser able to interpret the web languages such
HTML, CSS and javascript

Fig. 5. The GUI face database (original images)

V. I MPLEMENTATION RESULTS
A. Responsive Web Design Implementation
Followed the methods explained at section 4, Fig. 4 shows
example based HTML5/CSS3, designed and implemented in
our E-learning Platform.

Fig. 6. The Kohonen map for iteration=100 and Learning rate=0.6

Fig. 4. Smart-phone, Iphone5 320*568

Table I shows that the responsive approach worked well

on various mobile browsers during tests (Smart-phone, GTS7580).
TABLE I
TESTS WITH THE LATEST VERSIONS OF MOBILE BROWSERS
Mobile web browsers

HTML5

CSS3

Media Queries

Firefox

Opera mini

Chrome

B. Matlab GUI: Kohonen Neural Network simulation

Matlab software is used to implement an image-based
Kohonen Neural Network. Our GUI contains a database as
shown in Fig. 5.

Fig. 7. The Kohonen map for iteration=2000 and Learning rate=0.9

At first, the learner has to select a database and diplay it.

Then, he must choose the learning parameter and the iteration
number since our approach is an Image Coding based on
iteration. Finally, the programme calculates the weights W
depending on these number values and displays the results as

shown in FIG. 6 and FIG.7 (10*10 Neurones). The simulation

result is in accordance with [19].
VI. D ISCUSSION
We adopted a Moodle-based E-learning Platform for teaching Image processing and Kohonen Neural Network as online
tool. The learner will do a practical works by using Image
Acqisition, Image Processing and SOM TOOLBOXs.
As recommended by kohonen, The construction of a neural
network involves two phases, learning and validation. The
use of image processing skills are required to implement the
kohonen map and to be introduced to artificial intelligence
(IA).
According to the constructivist approach, our system is
for anyone, anywhere and anytime. In addition, our system
(in experimentation phase) is available from URL http://elearningplatform.pe.hu/. The official language of the university
(French language) is used to describe the course. And to
provide a classroom-like environement, real-time chat and
forums are availables. Moreover, the system is composed of
many practical works and online quizs to give learners an
immediate result. Please note that our web-based system is
in experimentation phase and we need more time to give a
concrete reliable results.
VII. C ONCLUSION
Students judged positively the use of platforms (via existing
platforms in the university servers) and see them as an asset
that has a positive effect on their learning by giving them
greater autonomy in terms of time management, learning tasks
and social relations.
The work presented in this paper, describes the developement of a web based e-learning platform using two software
tools for e-learning (Moodle and Matlab). Moreover,
mobile units are increasingly available. This makes it essential
to adapt the web pages containing educational courses to
mobile. RWD provides a solution adapted to the new web
development methods. We believe that the adaptive e-learning
is an innovative approach to the design and presentation
(navigation) of the course by combining a wide range of
mobile media.
Finally, from an educational point of view, the simulations
have a unique role in supporting learning because they allow
learners to directly manipulate a system and to observe the
effect of the modification. Unlike electomagnetisme (CST
Microwave simulation, advanced design system simulation,...),
there is no complete software to help undestanding ANN.
It is for this reason, the implementation of an E-learning
platform and a GUI is done for understanding the basics of
ANN (Learning and validation), and thus, the usefulness of
our work.
ACKNOWLEDGMENT
The authors would like to thank Mohamed Premier University (UMP), Oujda, Morocco, for sponsoring the scientific
research.

R EFERENCES
[1] N. Fix, S. Kolesnikov, and G. Petrova, Using electronic courses in
teaching masters degree students, Procedia - Social and Behavioral
Sciences, vol. 206, pp. 262266, 2015.
[2] A. Ruiz-Martinez, F. Pereguez-Garcia, R. Marin-Lopez, P. M. RuizMartinez, and A. F. Skarmeta-Gmez, Teaching advanced concepts
in computer networks: Vnuml-um virtualization tool, IEEE Trans.
Learning Technol., vol. 6, no. 1, pp. 8596, 2013.
[3] S. Mohammed and A. M. Abdelazziz, Wide an interactive web integrated development environment to practice c programming in distance
education, 2013 1st International Conference of the Portuguese Society
for Engineering Education (CISPEE), 2013.
[4] K. Salmi, H. Magrez, and A. Ziyyat, Interactive simulation as a virtual
tool in electromagnetics for online education, 2014 Third IEEE International Colloquium in Information Science and Technology (CIST),
2014.
[5] K. M. Alraimi, H. Zo, and A. P. Ciganek, Understanding the moocs
continuance: The role of openness and reputation, Computers and
Education, vol. 80, pp. 2838, 2015.
[6] W. Jiang, M. Zhang, B. Zhou, Y. Jiang, and Y. Zhang, Responsive web
design mode and application, Advanced Research and Technology in
Industry Applications (WARTIA), 2014 IEEE Workshop on, pp. 1303
1306, 2014.
[7] B. Zhu, Responsive design: E-learning site transformation, 2013
Fourth International Conference on Networking and Distributed Computing (ICNDC), pp. 126130, 2013.
[8] K. M. Sudhana, Contextual diversity and rule-based adaptive e-learning
system scheme. International Journal of Emerging Technologies in
Learning, vol. 10, no. 5, 2015.
[9] M. Brandenburg, K. Govindan, J. Sarkis, and S. Seuring, Quantitative
models for sustainable supply chain management: Developments and
directions, European Journal of Operational Research, vol. 233, no. 2,
pp. 299312, 2014.
[10] R. Zatarain-Cabada, M. L. Barron-Estrada, L. Zepeda-Sanchez, G. Sandoval, J. M. Osorio-Velazquez, and J. Urias-Barrientos, A kohonen
network for modeling students learning styles in web 2.0 collaborative
learning systems, MICAI 2009: Advances in Artificial Intelligence, pp.
512520, 2009.
[11] N. I. Jabbar and M. Mehrotra, Application of fuzzy neural network for
image tumor description, World Academy of Science, Engineering and
Technology, vol. 44, pp. 575577, 2008.
[12] S. A. Hussain, S. Zaman, and M. Ayub, A self organizing map based
urdu nasakh character recognition, Emerging Technologies, 2009. ICET
2009. International Conference on, pp. 267273, 2009.
[13] S. Lawrence, C. L. Giles, A. C. Tsoi, and A. D. Back, Face recognition:
A convolutional neural-network approach, Neural Networks, IEEE
Transactions on, vol. 8, no. 1, pp. 98113, 1997.
[14] I. Madjarov and O. Boucelma, Xesop: a content-adaptive m-learning
environment, 21st Century Learning for 21st Century Skills, pp. 531
536, 2012.
[15] I. Kosesoy, M. Cetin, and A. Tepecik, A toolbox for teaching image
fusion in matlab, Procedia-Social and Behavioral Sciences, vol. 197,
pp. 525530, 2015.
[16] J. V. Ringwood and G. Galvin, Computer-aided learning in artificial
neural networks, Education, IEEE Transactions on, vol. 45, no. 4, pp.
380387, 2002.
[17] J. Brownlee, Clever algorithms: nature-inspired programming recipes.
Jason Brownlee, 2011.
[18] T. Kohonen, The self-organizing map, Neurocomputing, vol. 21, no. 1,
pp. 16, 1998.
[19] S. S. Haykin, Neural networks : a comprehensive foundation, 3rd ed.
Prentice Hall, 2008.