See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/355921386

Interactive platform for Project-Based Learning based on web technologies

Conference Paper · September 2021

DOI: 10.1109/ET52713.2021.9580118

CITATIONS READS

3 50

3 authors, including:

Ava Chikurteva Nina Spasova

Bulgarian Academy of Sciences Technical University of Sofia
15 PUBLICATIONS 23 CITATIONS 12 PUBLICATIONS 39 CITATIONS

SEE PROFILE SEE PROFILE

All content following this page was uploaded by Ava Chikurteva on 07 March 2022.

The user has requested enhancement of the downloaded file.

 Proc. XXX International Scientific Conference Electronics - ET2021, September 15 - 17, 2021, Sozopol, Bulgaria

Interactive platform for Project-Based Learning

based on web technologies
A. Chikurteva1, N. Spasova2 and S. Bogdanov3
1Institute
of Information and Communication Technologies
Bulgarian Academy of Sciences
Acad. G. Bonchev Str., Block 2, 1113 Sofia, Bulgaria
2Department of Microelectronics, Faculty of Electronic Engineering and Technologies
3Deptartment of Computer Systems, Faculty of Computer Systems and Technologies,

Technical University of Sofia

8 Kliment Ohridski blvd., 1000 Sofia, Bulgaria
[email protected] , [email protected], [email protected]
implementing it. The main problem is organizational. In
Abstract – The article presents software architecture on a
specialized platform designed for teaching through Project- order to carry out such a lesson, the teacher must get
Based Learning. This platform is designed to facilitate and acquainted with many documents and practices, the
assist teachers by offering interactive features for creating implementation of the project requires work with different
project-based lessons and tracking the implementation of these platforms and technologies. This leads to the rejection of the
lessons. Web technologies that are used to create the platform method by many teachers, even at the research stage.
are described. The software architecture through which the An important advantage of PBL is its easy application in
platform will be built is presented. distance and e-learning, as the role of the teacher is different
Keywords – Web technologies, PBL, software architecture, from traditional methods and the main task is to provide
web interface. guidance to students. Their responsibility is the distribution
of tasks, meeting deadlines, shaping and presenting the final
I. INTRODUCTION product.
The development of a platform for PBL in support of the
Project-based learning (PBL) is a comprehensive strategy teacher, according to the educational system in Bulgaria,
for activating the cognitive potential of students. The project will lead to easier creation of lessons, and hence a wider
can be considered as a research topic in the context of dissemination of the method in the country. The use of the
didactic tasks, the successful development of which requires method increases the motivation for learning, improves the
both theoretical knowledge and practical skills. Students are basic competencies of students such as information retrieval
given topics to develop or research that are subject to skills, critical thinking, teamwork, self-assessment and etc.
program requirements and educational goals. The project This article presents the main functions of the developed
touches on a topic related to the objectives of the training platform, web technologies used to create the platform,
and the learning content, but in its development students software architecture and interactive methods related to the
have the freedom and opportunity to choose, research and development of the platform. The research is based on a
others, in order to encourage creative thinking, through model of a PBL platform presented in [9].
creativity, innovation and more. [1].
Project-based learning is a learning strategy that covers II. INTERACTIVE FUNCTIONS OF THE DEVELOPED PLATFORM
both subjects in order to realize the relationship between
theoretical knowledge and practical activities of students, to In order to create an Interactive Website, it needs to be
connect learning with their real life cognitive experience [2]. properly structured and appropriate interactive tools selected
This is achieved by the teacher encouraging students by [10]. This means that the site should not just have click
researching a real problem to develop solutions, applying buttons, but provide the necessary information to the user in
evidence of support and presenting the solution in an a convenient and interesting way - the site itself should
interesting and interactive way, using a set of modern communicate with the user [11]. To meet these criteria, two
information and communication technologies [3,4]. types of interactive features have been developed that the
Training in the method of PBL gives better results than platform will provide.
traditional, because it is easily combined with other
innovative teaching methods and techniques, such as A. Assistant-helper for interactive creation of PBU
"Inverted classroom", Model "1: 1" ("One to one") and
Competence approach [5,6]. The use of these innovative An important part of the PBL creation platform is the PBL
methods and approaches is enshrined in the European creation assistant, a tool that will assist teachers at every
Qualifications Framework for lifelong learning [...], stage of lesson creation. By asking questions (concerning
Recommendations of the Council of the EU and the Ministry subject and interdisciplinary links, class, topic, etc.), the
of Education and Science [7,8]. assistant will offer possible answers, and will provide related
The application of PBL in Bulgaria is very late, as by 2020 information from the database. The main goal of the
only a few schools in the largest cities in the country are "assistant" is to provide "ready" through these questions
structured project-based lessons. The assistant will have

978-1-6654-4518-4/21/$31.00 ©2021 IEEE

three sections of questions - organizational, operational and
evaluation (Figure 1). III. WEB TECHNOLOGIES USED TO CREATE THE PLATFORM
The organizational ones will cover the first part of the
establishment of the PBL. The operational ones will cover The platform is based on standard web technologies that
the second part - the implementation of the project. provide both purely visual and interactive features [12]. The
Evaluation - third part. The teacher will be offered a special HTML and CSS JavaScript languages were used to create
method and scale for assessment, where the teacher's the web interface and the frontend part.
assessment, team assessment and self-assessment have equal - HTML (Hypertext Markup Language), CSS
weight. (Cascading Style Sheets) and JavaScript are the
essential components needed for a modern website.
They are constantly evolving and provide numerous
opportunities to create interactive content.
- HTML is a language that makes the content of a
website and tells the browser (Internet Explorer,
Google Chrome, Mozilla firefox, etc) what to display
on the site. CSS is a language that works with HTML
and separates the content and structure of the website
from their visual presentation.
- HTML5 adds many new syntax features. These
include <video>, <audio> and <canvas> elements, as
well as the integration of SVG content, which is
designed to improve the performance of multimedia
and graphic content in the web space without plug-
ins and their APIs. Other new elements, such as
Figure 1. Main components of the teacher support assistant. <section>, <article>, <header> and <nav>, are
designed to enhance the semantic richness of
B. General interactive functions for working with the documents. Other items have been removed. New
platform attributes have also been introduced. Some items,
such as <a>, <cite>, and <menu> have changed.
The functionality of the developed platform includes the - HTML5 includes (APIs) such as: Canvas element for
following features: 2D drawing; Multimedia playback; Offline database
- creation of user and administrator accounts. The idea storage (offline web applications); Drag-and-Drop;
is for users like students to have accounts where the Cross-document messages; Manage browser history;
user name is their first name and the password is their MIME type; Microdata; Geolocation; Web SQL
faculty number; for the students from the school the database, local database; WebSimpleDB
user name is also their first name but the password is - JavaScript is a programming language commonly
their personal identification number. The used to create interactive effects and dynamic web
administrator account will be for use only by pages in a web browser.
teachers, and the goal is to track user activity, to have - CMS (content management system)
paths that show which user has logged in, what he
was interested in and with the help of this tracking The web interface is the tool for working with the
administrators can direct consumers to the next platform. it must provide all current and future management
category that meets their demand and learning. features of the content of the platform. This consists of
- ability to upload files, documents, videos, tests in all updating information, adding or deleting materials, articles,
widely used formats so that everyone has access to videos, and registered users.
them.
- possibility for real-time correspondence between IV. SOFTWARE ARCHITECTURE
users and administrators.
- automatically directing users under each topic what The software architecture is based on the principle of
else would be useful to them client server, in this architecture the main part of the system
- automatic generation of rating tables so that users can is the Backend server which provides everyone with access
make an up-to-date self-assessment. to the content via Web interface, see figure 2.
- creating a set of questions or tasks to support and For the realization of the server part the number of active
guide students' work users in the moments with maximum load must be taken into
- section with the most frequently asked questions by account, the amount of information also the possibility for
the students and the respective answers by the future development with the addition of additional
teachers. Ask a new question. components. Preferred languages for this purpose are often
- the ability to download the materials so that they can for Java, C ++, C # and other similar object-oriented,
be useful to users at any time, even if they are not because they provide an opportunity to create an object-
connected to the Internet or the platform oriented architecture, which in turn is suitable for server
- field with the available logged-in accounts (active applications. The database that will store information about
users in the platform) in order to inform both parties. courses, larger files and videos must be selected so that it
can take the load without degrading over time with large are splitted in independent services which will be able to
volumes of data. This will allow regular backups of the communicate in between via internal Inter process
database without affecting the user part. The user database communication interface.
must be separate in terms of security and performance. With Architecture will have DB separation for Clients
split databases, the speed of access to the database will not information and Courses information. Client DB will hold
be affected by a large number of users, at an ideal time who information like - user name, passwords, university, courses
are trying to log in to the system or use it. It is envisaged to etc., all related information to client including their role in
use a distributed DB approach, which will share the load the system - student, teacher and admin. Courses DB will
with large amounts of data and parallel access. hold all bulky information about courses materials, tests, and
every information related to the educational process.
Separation is made to avoid overloading one single DB
improve security and to speed up access to freshly logged
users. Each DB will be accessed via a single service (Clients
DB service and Courses DB service) with organized
message queues, which will hold and serve all requests from
and to DB. In addition to that will have a DB Manager,
which will dispatch all requests to both DB’s like router. In
this approach, the chance of race condition and unauthorized
simultaneous access to both DB will be eliminated. Every
major and significant activity will have separated
independent service, this will give flexibility to add and
remove services dynamically. Currently are listed services,
which should exist to guarantee working system:
- Connections Manager - will serve all input
connection requests and will filter potential attempts
for attaches. This component will provide secured
HTTPS connection to all clients connected to it;
Figure 2. Overview of the generl architecture. - Login Manager - will take care for all login request
and will delegates users rights according to their
information;
- User Interface - Interface to the system from Web
browser;
- Users Manager - Take care for user control, which
will be available only to administrator and authorized
teaches. This give ability to add / delete / edit;
- Tracking Manager - will track student’s behavior in
the system and will give statistics for user activity
interest and how much time students are spending in
the system;
- Courses Manager - give interface to manipulate
courses and educational materials. Gives ability to
add / delete / change courses;
- Manager X - is representing ability to any service or
functionality because of the independent
infrastructure. Extensibility is unlimited from
architectural point of view.

V. RESULTS

An initial test version of the user interface has been

developed. The home page is shown in Figure 4. Two Log
In and Registration buttons are available for easier operation
at this stage. Once the user logs in to the system, there are
different options according to the type of profile (teacher or
student). Here we have presented the profile of the teacher
and in particular part of the interactive assistant. Figure 5
shows the first step of creating a new PBU, where the project
theme is introduced.
Figure 3. High-level software architecture.

Fig. 3 presents architecture for a Web based platform for

“education”. In the proposed architecture, all important parts
 materials directly from the platform and be in constant
contact with teachers.
For future work, it is planned to fully implement the
presented software architecture, after which the platform
will be released for testing in universities and schools.

ACKNOWLEDGMENT
This work is funded by the National program “Young
Figure 4. Home page of the web interface. scientists and postdoctoral researchers” of the Ministry of
Education and Science, Bulgaria.

REFERENCES

[1] Mitova, D.(2011) "Project - based technological education –

theory and methods"
[2] Larmer, J. (2016). It's a Project-Based World. Educational
Leadership, 73(6), 66-70.
[3] Lenz, Bob, and John Larmer. "Project-Based Learning That
Makes a Difference." Educational Leadership 77.6 (2020): 66-
70.
[4] Mitchell, Gloria, Will Hudson, and Melissa Barone. "The
Project Method in Practice." Schools 17.1 (2020): 9-27.
[5] The European Qualifications Framework
Figure 5. Creation of the PBL project in the WebUI. https://europa.eu/europass/bg/european-qualifications-
framework-eqf
Once the project is created, the assistant generates two [6] Bulgarian National Qualifications Framework
files. One is the one with the information about the project - https://eacea.ec.europa.eu/national-policies/eurydice
title, participants, goal and others. The other is a table with /content/national-qualifications-framework-12_bg
data for the participants in the project by teams and [7] Programme “Education” 2021 – 2027:
evaluation of the project implementation according to the https://www.eufunds.bg/bg/opseig/term/493
following criteria: cooperation, distribution of tasks, content [8] Strategic framework for the development of education,
mastery, creativity, deadline, presentation. At the end, a final training and learning in the Republic of Bulgaria (2021 –
score is formed, obtained from the summation of the points 2030) https://www.mon.bg/bg/143
according to all criteria. Each student in their profile can [9] Chikurteva A., Chikurtev D.. Model of Project-Based
check the points and grades given by the teacher and the Learning Platform. 55th International Scientific Conference
team, as well as self-assess (Table 1). The presentation of on Information, Communication and Energy Systems and
the files is displayed in the interface in the form, using Technologies, IEEE, 2020, ISBN: 978-1-7281-7144-9,
functions in HTML, CSS and JavaScript. DOI:10.1109/ICEST49890.2020.9232753
[10] Chivarov, N, Chikurtev, D, Chivarov, S, Pleva, M, Ondas, S,
VI. CONCLUSION Juhar, J, Yovchev, K. A Case Study on Human-Robot
Interaction of the Remote-Controlled Service Robot for
Elderly and Disabled Care. 2019, ISSN: 2585-8807
The presented platform uses the latest web technologies
[11] Chikurtev D., Yovchev K., Chikurtev E.. Design and
to create web platforms and sites. With the help of these
functionality of Web User interface for control of service
technologies a highly interactive environment is achieved, mobile robot through the Internet. Problems of Engineering
which facilitates the work with the platform. This platform Cybernetics and Robotics, 67, Prof. Marin Drinov Academic
provides good opportunities for the creation and Publishing House, 2016, 2016, ISSN: 0204-9848, 51-60
management of PBU. With its help, teachers can quickly and [12] Chikurtev, D, Rangelov, I, Yovchev, K, Chivarov, N.
easily create new projects, track student progress and Communication system for remote control of service robots.
evaluate the results achieved. Students can access learning IFAC-PapersOnLine, 52, Elsevier, 2019, ISSN: 24058963,
192-197
TABLE 1. SCORING TABLE FOR PROJECT COMPLETION.

View publication stats