=Paper=
{{Paper
|id=Vol-2834/Paper11.pdf
|storemode=property
|title=Experience in the Development and Application of an Electronic Learning Resource in the Discipline "Internet Programming" Based on Moodle
|pdfUrl=https://ceur-ws.org/Vol-2834/Paper11.pdf
|volume=Vol-2834
|authors=Tatyana N. Filimonenkova
}}
==Experience in the Development and Application of an Electronic Learning Resource in the Discipline "Internet Programming" Based on Moodle==
<pdf width="1500px">https://ceur-ws.org/Vol-2834/Paper11.pdf</pdf>
<pre>
                                                                                               125


     Experience in the development and application of an
     electronic learning resource in the course "Internet
              Programming" based on Moodle*

                        Tatyana N. Filimonenkova1 [0000-0002-7968-9028]
               1V.I. Vernadsky Crimean Federal University, Simferopol, Russia



                                 tafil-nik@yandex.ru



        Abstract. The article discusses the experience of developing and using the elec-
        tronic educational resource "Internet programming" based on the Moodle educa-
        tional platform. The concept of “electronic learning resource” is defined, three
        sections of the course are described: HTML, CSS, and JavaScript and a brief
        description of their contents. The article presents the organizational structure of
        the training resource and a list of typical materials for each topic, provides exam-
        ples of some training materials.

        Keywords: electronic learning resource, Moodle, Internet programming, HTML,
        CSS, JavaScript, jQuery.


1       Introduction

Currently, the requirements for the use of electronic information and educational re-
sources are included in the Federal Law of the Russian Federation “On Education in
the Russian Federation” and in the requirements of the Federal State Educational Stand-
ards in all areas of training specialists in higher education.
   The concept of "electronic learning resource" includes a wide range of information
resources, presented in various forms and using various technologies for this presenta-
tion [5]. Starting with a text document with guidelines, presentations with lecture notes,
and ending with a training course in the MOOC format (Massive Open Online
Course) – all this can be attributed to electronic training or educational resources and
together constitutes electronic information and educational environment (Electronic In-
formation – Educational Environment – EIEE) [10,7].
   The use of EIEE in the educational process can improve the quality of training of
modern specialists, which at present cannot be achieved only by traditional forms,
methods, and teaching aids [2].
   The main task of the scientific and methodological training center for distance edu-
cation in the Humanities and Education Science Academy (branch) of V. I. Vernadsky

*   Copyright 2021 for this paper by its authors. Use permitted under Creative Commons License
    Attribution 4.0 International (CC BY 4.0).
126


Crimean Federal University in Yalta is the introduction of electronic learning resources
into the educational process [7]. The electronic educational environment of the distance
education center is implemented in the Moodle learning management system [9].
   Consider the experience of creating and using an electronic learning resource in the
course "Internet programming". The course "Internet programming" is studied by stu-
dents in the direction of preparation 09.03.03 "Applied Informatics" in the third year.
This electronic learning resource is certified by an expert commission and is included
in the register of the electronic educational resources of V. I. Vernadsky Crimean Fed-
eral University. In periodicals, one can often find a description of the experience of
using online courses in various academic courses [3], as well as the principles of the
formation of the content of an educational electronic resource [12].


2      HTML and CSS as basic tools for creating web resources

The course consists of 10 sections corresponding to 10 topics. The introductory part of
the course contains all the formal data following the requirements for such training
resources: metadata of the electronic educational resource, the glossary of the course,
the work program of the course, links to the information support of the course, guide-
lines for organizing independent work.
   The course material is divided into three sections (modules), each of which includes
several topics.
   The first section is devoted to the basics of Internet programming - the markup lan-
guage for hypertext documents - HTML. This section examines the basic tag construc-
tions that originally existed and defined the layout of a web document: font formatting
tags, paragraph formatting tags, tags for creating and managing hyperlinks on the page,
designed to go to other pages of the site and inside the same page, tags for placing
graphics and creating tables and forms. We study not only tags but also their attributes
using specific examples. The materials in this section also introduce new tags that have
been introduced in the latest version of the markup language - HTML5. This includes
information about semantic tags that define the logical layout of a web page or its struc-
tural elements, such as <section>, <header>, <nav>, <footer>, <hgroup>,
<figure>, <article>, <aside> and others, as well as tags for including multi-
media resources in web documents: <audio> and <video> and the <canvas> tag,
which defines the area with the ability to draw using scripts.
   The training material discusses all the additional features that are included in the
functionality and appearance of such a web page object as a form - the main element of
user interaction with an Internet resource.
   These are elements such as fields for selecting a date and its elements, fields for
selecting and setting time, widgets for choosing colors, input fields for phone numbers,
and email addresses. Such an attribute of form objects as "placeholder" allows you to
specify the text of a hint about the purpose of the input field, the attribute "required"
defines the form field as required. In this way, students are introduced to the basic web
page layout tools that are available in HTML5.
                                                                                      127


   In the second section of the Internet programming course, which is studied over sev-
eral topics, students get acquainted with the formal language for the appearance of a
web page - CSS (Cascading Style Sheets) and the features that its latest version of CSS3
provides. CSS is a formal language based on finding a specific element of a web page
and setting its properties to specific values. So-called selectors are used to searching
for page elements. The selector tells the browser which page element to apply the style
to. Any HTML tag can act as a selector, for example, <h1>, <p>, <ul>, etc. There are
selectors for the attribute “class”, which is set when marking up the page element,
for example, <p class = ”par”>, or by identifier, for example, <div id =
”block1”>. Some universal selectors access all elements of a web page, contextual,
child, and attribute selectors. Pseudo-class selectors are used to selecting page elements
that are difficult or impossible to access with the help of other selectors. Examples of
such selectors can be hyperlinks (:link) or elements that are currently under the
mouse cursor (:hover), as well as children of other selectors, for example, a specific
table cell or list line.
   After assigning the selector to which you want to apply to format, the parameters
and their values are set. Selector formatting rules can include properties such as color,
background, borders, size, and other options for displaying an element in the browser.
   The course includes training materials on the properties and rules of CSS, which
became available in CSS3, which provides a modern level of development of the style
of web pages. These include such features as displaying rounded corners of page ele-
ments, creating gradient fills, transparency, and shadows for both blocks and text. A
mandatory requirement for a modern site is its adaptability, i.e. adequate display on
screens with any available resolution, ranging from typical smartphones, tablets, and
ending with widescreen desktop computers (desktop personal computers). The @media
rule is responsible for this. This rule allows you to specify the media type and those
changes to CSS properties that should be applied to page elements when displayed on
different devices.
   The materials presented in the electronic training resource not only provide theoret-
ical information but also give practical examples of using both the markup language
and CSS, analyze typical typesetting techniques using both the block model and other
modern web programming tools.
   The following are examples of CSS training material for implementing a flexible
layout.
   The flexExample.html file contains the following code:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Flex template</title>
    <link rel="Stylesheet" href="css/styleFlex.css">
</head>
<body>
128


    <header class="main-header"> <h1>Site title </h1>
    </header>
    <nav class="main-nav">
        <ul>
             <li><a href="#">Services</a></li>
             <li><a href="#">Portfolio</a></li>
             <li><a href="#">Contacts</a></li>
        </ul>
    </nav>
    <main class="main-content">
        <div class="main-left">Contents 1</div>
        <div class="main-right">Contents 2</div>
    </main>
    <footer class="main-footer">Copyright&copy;</footer>
</body>
</html>

The contents of the styleFlex.css file:

:root{
    height: 100%; }
body{
    background: #ddd;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column; }
.main-nav li{
    width:180px;}
.main-nav a{
    text-decoration:none;
    color: black;
    font-size:18px;
    font-weight:600;
    color:#00a9d9; }
.main-nav a:hover{
    text-decoration:underline; }
.main-nav ul{
                                                                     129


    list-style: none;
    display:flex;
    order:-1;
    flex-direction:row-reverse;
    justify-content:right; }
.main-header{
    background: #b61e32;
    padding:10px;
    order: 1;
    height:20vh; }
.main-content{
    background: #f7ce28;
    min-height:60vh;
    padding:10px;
    order:2;
    display:flex;
    flex-direction: row;
    justify-content:space-evenly; }
.main-left{
    background: aqua;
    padding:10px;
    width:35%;
    margin-right: 30px; }
.main-right{
    background:cornsilk;
    padding:10px;
    width:65%; }
.main-footer{
    background: #abc999;
    padding:10px;
    order:3;
    text-align:center; }

The view of the web page in the browser window is shown in Fig. 1.
130




                     Fig. 1. Example of a flexible layout of a web page


3      JavaScript programming language

The third module of the “Internet Programming” course is devoted to the study of the
JavaScript programming language [8]. Currently, JavaScript is the main scripting lan-
guage when developing the interface of the client-side of the website. Using JavaScript,
interactive elements are created, such as menus, form processing scripts, slide shows,
and others. Its widespread use is also dictated by the fact that all modern browsers sup-
port it. Using JavaScript in developing the site, the programmer can be sure that the
script will execute in any browser. JavaScript is a multi-paradigm programming lan-
guage and supports paradigms such as functional, procedural, and object-oriented.
   The electronic educational resource includes topics such as the basics of program-
ming in JavaScript. The basic syntax of the language is based on the programming lan-
guage C and C ++. Students study the technology of working with variables, basic
arithmetic operations, the use of a library with mathematical functions, the basic algo-
rithmic design: if..else statement., switches, and loops. Also, they get acquainted with
the predefined language objects: Object, Array, Boolean, Date, Func-
tion, Math, Number - and methods for using them.
   A separate topic in this section is devoted to the object model of the JavaScript pro-
gramming language. It is called the DOM (Document Object Model) and provides an
application programming interface or application programming interface (API) for
HTML and XML documents. It defines the logical structure of web documents and how
to interact with them. The entire model of the web page is included in the object model:
                                                                                   131


tables, links, graphic images, etc., access to these objects is carried out through the
global variable document [8]. This object is used to retrieve, modify, or add content
to an HTML document and to process events in this document. The functions of ac-
cessing the web page object are studied: getElementById, getElementsBy-
ClassName, getElementByName, querySelectorAll, querySelector.
   The theoretical material is accompanied by a large number of examples of program
code that implements typical tasks. Below is the code for organizing a slide show on a
web page:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <style>
        #slide {
             box-shadow: rgb(150, 150, 150) 10px 10px
10px;
        }
    </style>
    <title>Button Slide Show</title>
</head>
<body>
    <div align='center'>
        <h3>Slide Show</h3>
        <img id="slide" src="img/crimea1.jpg" width="600"
height="400">
        <p>
             <button onclick="show(-1);">
                 </button>
             <button onclick="show(+1);">
             </button>
        </p>
    </div>
    <script>
        var URLs = new Array('img/crimea3.jpg', 'img/cri-
mea4.jpg',
             'img/crimea5.jpg', 'img/crimea6.jpg',
'img/crimea8.jpg',
             'img/crimea9.jpg', 'img/crimea10.jpg',
'img/crimea11.jpg', 'img/crimea1.jpg');
132


        var currentImage = 0;
        function show(direction) {
            currentImage += direction;
            if (currentImage == URLs.length)
                currentImage = 0;
            if (currentImage == -1)
                currentImage = URLs.length - 1;
            document.getElementById('slide').setAttrib-
ute('src', URLs[currentImage]);
        }
    </script>

</body>
</html>

This module includes the topic of considering algorithms and solutions to typical web
programming tasks: placing a running clock, calendar, programming an online calcula-
tor, creating and processing a cascading menu on a page. Below is the text of the script
that creates the table on the page.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Table</title>
    </head>

<body>
    <div id="wrapper">
        <script>
            var str = '<table border="1px" width="30%">';
            for (var i = 1; i < 10; i++) {
                 str += '<tr>';
                 for (var j = 1; j < 10; j++) {
                     str += '<td>';
                     str += i * j;
                     str += '</td>';
                 }
                 str += '</tr>';
            }
                                                                                        133


                str += '</table>';
                var el = document.getElementById('wrapper');
                el.innerHTML = el.innerHTML + str;
            </script>

    </div>
</body>

</html>

Currently, a large number of JavaScript libraries have been created. One of the most
popular is the jQuery library. The study of techniques for working with this library,
namely: connection and application are also considered in the framework of this learn-
ing resource.


4      The organizational structure of electronic educational
       resource

    Typical content for each topic includes the following sections:
    - a description of the topic, including a summary of the main issues, addressed in it;
    - A glossary or dictionary of highly specialized terms that are first introduced to
teaching people when studying this topic. The terms and their interpretation are given,
including, if required, translation into a foreign language and examples;
    - a lecture on the topic, including theoretical information, syntactic rules, and seman-
tic interpretation of the constructions of the markup language HTML or CSS, the pro-
gramming language JavaScript, examples of their use.
    - laboratory work, in which students are invited to complete a practical task on a
particular topic of the course; consolidate the received theoretical information and prac-
tice practical skills;
    - a list of literary sources or links to Internet resources on the topic;
    - questions for self-testing and independent work
    An example of the presentation of training material is shown in Fig. 2.
    The system for setting up training materials allows you to place them in various
formats: lectures, assignments, pdf documents, presentations, videos, and graphics [6].
In addition to the standard sections of its description and glossary, each topic includes
a lecture, a description of laboratory work, or a practical lesson. As a rule, it includes a
presentation with lecture notes, a list of references, questions for self-examination, and
independent work.
134




                    Fig. 2. List of sample materials for each course topic

In the process of training, students are invited to pass three tests that complete the study
of the corresponding section of the course: HTML, CSS, JavaScript. Modern technol-
ogies for assessing learning outcomes can be found in the article [11]. The article notes
the benefits of using the Moodle electronic platform for conducting the assessment pro-
cedure. As an example, you can get acquainted with the materials outlined in [9]. The
flexible system for setting up test tasks offered by Moodle allows you to group random
questions of the test in the process of passing it, adjust the number of attempts, test
time, and other parameters. The test questions bank contains more than 120 different
tasks.
   The course "Internet programming" provides a course project and an exam. Typical
topics of course projects and guidelines for its implementation are also included in the
electronic educational resource. The assessment fund also includes questions for exam
preparation. In the final part of the course, students are invited to undergo final testing.
The final test consists of 25 questions in all sections of the course. The data of the test
results of all tests and especially the final one are taken into account in the final assess-
ment of the student in the exam and significantly affect the assessment of the course.
                                                                                           135


Conclusion

The presentation of electronic educational resources in the Moodle system has another
significant advantage - it allows you to quickly maintain the course information in an
up-to-date form, which is very important for such a dynamically developing field of
programming as web programming [4]. The e-learning resource “Internet program-
ming” is actively used in the learning process of both full-time and part-time students.
   In conclusion, I would like to note that the new educational standards of higher ed-
ucation in the Russian Federation expand the scope of an educational institution to-
wards the formation of electronic information and the educational environment. Thus,
the teacher gets additional opportunities for a creative approach to the organization of
the educational process, which contributes to the development of the professional com-
petencies of modern specialists.


References
 1. Ivanov A.V. Review of information technologies and their importance in the educational
    directory of education. RUDN Journal of Informatization of Education, 15 (1), pp. 107-113.
    (In Russian) DOI 10.22363/2312-8631-2018-15-1-107-113
 2. K.Yu. Androsov, G.F. Golubeva, E.V. Spasennikova Prospects for the development of dig-
    ital education and mass open online courses in the assessments of teachers and students.
    Ergo design. Vol. 2019 N 4 (6), pp. 214-222 (In Russian.) DOI:10.30987/2619-1512-2019-
    2019-4-214-222
 3. Konnova L. P., Lipagina L. V., Postovalova G. A., Rylov A. A., Stepanyan I. K. Adaptive
    online course in mathematics: the experience of designing and implementation. Business.
    Education. Law, 2020, no. 1, pp. 436–446. (In Russian) DOI: 10.25683/VOLBI.2020.50.161
 4. Kruglyk V.S., Osadchyi V.V. Developing Competency in Programming among Future Soft-
    ware Engineers. Integratsiya obrazovaniya = Integration of Education. 2019; 23(4), pp.587-
    606. (In Russian.) DOI: 10.15507/1991-9468.097.023.201904.587-606
 5. Krylova E. A. Blending learning in higher education, Tomsk State Pedagogical University
    Bulletin, 2020, Vol. 1 (207), pp. 86-93 (In Russian) DOI: 10.23951/1609-624X-2020-1-86-
    93
 6. Makhmutova M.V., Senicheva E.I., Akimova O.A. Technology for the development and use
    of electronic educational resources in the educational process of a university. Open Educa-
    tion. 2019;23(6):50-58. (In Russian.) DOI: 10.21686/1818-4243-2019-6-50-58
 7. N. Mamgain, A. Sharma and P. Goyal Learner's perspective on video-viewing features of-
    fered by MOOC providers: Coursera and edX, 2014 IEEE International Conference on
    MOOC, Innovation and Technology in Education (MITE), Patiala, 2014, pp. 331-336.
    DOI: 10.1109/MITE.2014.7020298
 8. Russ Ferguson Beginning JavaScript.The Ultimate Guide to Modern JavaScript Develop-
    ment // Ocean, NJ, USA, 2019, 206p. ISBN-13 (electronic): 978-1-4842-4395-4 DOI:
    10.1007/978-1-4842-4395-4
 9. Shagilova E.V. Architecture and implementation of online testing to check solutions to
    Olympiad programming problems. Vestnik of Don State Technical University.
    2018;18(2):214-222. (In Russian.) DOI: 10.23947/1992-5980-2018-18-2-214-222
10. Shtanko M. A. Electronic learning as a modern educational resource. Business. Education.
    Law, 2019, no. 2, pp. 445–449. (In Russian) DOI: 10.25683/VOLBI.2019.47.245
136


11. Smirnova Zh.V., Krasikova O.G. Modern tools and technologies for assessing learning out-
    comes // Vestnik of Minin University. 2018. Vol. 6, no. 3. Р. 9. DOI: 10.26795/2307- 1281-
    2018-6-3-9
12. Zaslavskaya O.Yu. Principles of content formation educational electronic resource. RUDN
    Journal of Informatization of Education, 14 (3), pp.309-316. (In Russian) DOI
    10.22363/2312-8631-2017-14-3-309-316

</pre>