An analogue of Moodle, or as a law teacher, he created his own distance learning system. Part 1. Beginning

Disclaimer: the distance learning system (DLS) is currently put into operation (production), approved, tested and is successfully operating. System free, is open source and posted on GitHub repository… In terms of the technology stack, it is built on the Laravel 8.0 (PHP 7.4) framework using libraries and other packages (programs): React (redux + router), SocketIo, Docker, NodeJs, Rest API, WebRTC, Leaflet, etc.

In a series of articles, I will tell you how the system works, what I had to go through while developing it, and what problems I had to solve.

The unique features of the system include:

  1. Internal anti-plagiarism. In the course of conducting classes, we faced the problem of students copying solutions to tasks from each other. In manual mode, it is quite difficult to track the degree of coincidence of solutions, and therefore a system has been developed showing the percentage of “similarity” of answers.

  2. Identification of technical methods to improve the uniqueness of the text. To increase the efficiency of checking works and detecting attempts to use various methods of increasing uniqueness, a system has been developed to identify signs of suspicious interference with the text.

  3. In addition to the standard verification algorithms (tests, document verification, chats, etc.), the following have been implemented:

    a. Quest. The visual quest designer allows you to implement almost any kind of tasks in the form of a game.

    b. Dialogue system. In the design mode, a tree of questions and answers is created that allow you to non-linearly solve individual problems (conversation, interrogation, algorithm of actions, etc.)

    c. Portfolio. To account for additional work, additional assessment categories have been created (science, creativity, layout, etc.).

  4. Analysis of the text of the answers. Automatic verification of texts and procedural documents allows you to save the teacher’s time and identify poor-quality answers.

  5. Internal self-test. Users can create tasks themselves and cross-check each other’s tasks. Own algorithm for comparing students’ decisions in order to exclude repetitions (duplication) of answers. You can call it your own internal anti-plagiarism.

  6. Virtual whiteboard… To demonstrate documents, presentations, text and photographs to all participants, as well as to conduct a blitz survey on the topic, a board was created that allows the organizer to see and automatically check the answers to tasks online, as well as enable / disable the visibility of the correct answer by users, the visibility of the answer other participants.

  7. Online support. Real-time monitoring of user-opened pages allows for more efficient support.

  8. Gps… To implement creative ideas, an interactive map has been created, on which users are marked in real time and their movement in the field.

  9. Video communication… For remote interaction, a video communication system is used, which allows demonstrating sound and image from a web camera, or the organizer’s screen.

  10. Telegram Bot… A telegram bot will automatically notify you of incoming messages.

Background

Having a higher legal education and having worked for several years as a practicing specialist, life has developed in such a way that I began to work as a teacher in an educational organization at the department of legal profile. Previously, I did not have to think about my own distance learning system – there was enough time for face-to-face classes. However, after a lapse of time (about 5 years), it turned out that there is much more knowledge that I would like to transfer to students than the curriculum allows.

It was understood that it was necessary to give a larger volume of self-study assignments, and it was more difficult to check the increased volume of work, so it was decided to automate the process of checking solutions using web technologies. After searching the Internet for ready-made solutions, I settled on testing implemented in JavaScript. I bought a domain and hosting and uploaded html pages with tests written in the code itself. The information about the solved tasks was sent using the built-in PHP mail function and was sent to the email address. As far as I remember, and oddly enough it worked and letters came. There were a lot of pages and it was inconvenient to edit tests, create new ones, and a real nightmare came when it was necessary to change something in the page functionality (add a menu, information). Partly solving these problems by using include, it quickly became clear that I was reinventing the wheel and that there was probably already something ready.

A review of the existing and most common CMS such as WordPress and Joomla showed that they solve slightly different tasks and out of the box do not have the functionality I need. Installing the necessary plugins, packages and extensions at that moment seemed an impossible task from the point of view of understanding the work of all this in a complex and expanding its own functionality.

I also refused to install and use Moodle due to the complexity of understanding at that time its installation, use and cumbersomeness, even ready-made virtual machines were not considered. I wanted to do something of my own so that it would work quickly with a full understanding of the principles of work and further improvement.

It was decided to create their own system from scratch. The first version of the system was written in PHP and JQuery using the MySql interface for accessing the database, all the material was found on the Internet and by copying the code fragment by fragment, a system was made that allows it to somehow support and expand its functionality.

The shortcomings of this approach were discovered quite quickly, starting from the simplest SQL injections like “1 = 1” that were used to delete the database and the realization that working with procedural code is fraught with many problems in the form of poor support, confusion and code duplication.

Having decided that it was necessary to study modern patterns and design patterns, I settled on the task of creating my own CMS using the MVC and OOP design pattern. Routing was done very primitively: the URI address was processed using regular expressions, the corresponding controller class was called manually (with its own autoload), which in turn called the settings, model and template classes. The system has become more structured and modern. The PDO interface was used to access MySql. The class of each model inherited from the base class, which was connected to the base in the constructor using the singleton template and returned information in an associative array (flag PDO :: FETCH_ASSOC). In the base class, methods were created that vaguely resemble an attempt to implement your own ORM in the form of a CRUD. The structure of the database itself was very ill-conceived: the tasks table contained redundant information about the topic, the task itself, the author, etc.

The database queries looked pretty bad. An example of a request for a choice of solutions:

$decisions = $model->findBySql("SELECT *, d.id as did, t.login as tlogin, d.login as login  FROM decisions as d, tasks as t WHERE ((d.id_task = 0 and t.number_razdel = d.number_razdel and t.number_task = d.number_task) or (t.id=d.id_task)) and t." . $route['discipline'] . " = 1 and d.login IN ('" . implode("','", $arr_users) . "')", []);

$ decisions = $ model-> findBySql (“SELECT *, d.id as did, t.login as tlogin, d.login as login FROM decisions as d, tasks as t WHERE ((d.id_task = 0 and t.number_razdel = d.number_razdel and t.number_task = d.number_task) or (t.id = d.id_task)) and t. “. $ route[‘discipline’] … “= 1 and d.login IN (‘”. Implode (“‘, ‘”, $ arr_users). “‘)”, []);

Further improvement of the system was the introduction of composer, the creation of an advanced autoloader and namespace. There was also a transition to PhpStorm (teaching license) and OpenServer.

The frontend was also actively developing. Initially, all the logic for building html was built using PHP itself as a template engine, only in some parts of the code was jQuery used for animation and visual effects. Later, third-party libraries were connected TinyMCE (visual editor for content editing), ResponsiveFilemanager (for working with the file system), Bootstrap… The functionality of the system was carried out using classic POST and GET requests with parameters (no encryption systems, no tokens were used), later I came to the widespread implementation of ajax, fetch, axios, but that was later.

In connection with the desire to create my own system of dialogues and educational quests as types of tasks, I came to the understanding that PHP is not suitable for effectively solving such problems and began to look for ready-made solutions for the implementation of ideas. The easiest solution seemed to me to translate a pptx presentation (Microsoft Office), the slides of which have cross-hyperlinks to each other in web mode. For the purpose of translating the presentation into an html document, the ISpring software solution was used, which, in principle, coped with its task. The output document was an html page with connected JavaScript scripts responsible for the functionality. The file was launched in the iFrame of the main site and allowed to go through quests (about them in more detail below), but it became difficult to make changes to the js script file – they were incomprehensible to me from the word “generally”, since the code was minimized. It was also not entirely clear how to send a signal to the main window that the quest was completed. The solution at that time was as follows: the final slide of the quest, loaded into the iFrame, contained the keyword, and the entire document was analyzed once every 1 second using JS and, if it matched, filled in the corresponding form fields.

Quite quickly, I abandoned this idea, first of all, for the above reason, and also because of the complexity of creating projects by other users, the need to re-convert the presentation into a quest at the slightest fixes, the absence of normal feedback from the iframe through the main window, etc. …

Having decided that JavaScript in distance learning technologies is “our everything”, I began to experiment with the possibilities of JS in terms of the interactivity of the implementation of a single page application SPA on 1 page of the site. I had to deal with data structures in JS (first of all, because I liked the MAP collection), prototypes, promises, anonymous and asynchronous functions, call contexts, closures, callbacks, learn the features of ECMAScript 6 with its destructuring (actually very convenient) , new variable types (let, const), etc.

As a result, it turned out, as it seemed to me, a good application that was connected to include on the site page and even worked as I needed. I attach screenshots of the first version. The undoubted advantage was the ability not to use bundlers such as Webpack, but simple editing of the code right on the server.

At that moment, I practically did not use the npm or composer libraries, so I wrote code both at home and at work, and exchanged files using YandexDisk. This did not cause any discomfort. I knew there was a git, but I didn’t know why I needed it.

The problems of running a SPA application without using libraries include the cluttered DOM tree, since all data was stored in data attributes, the complexity of the code readability, everything was stored in the database in a serialized JSON format, a lot of promises implemented in async await functions, which are not always worked as I needed, there was almost no mechanism for handling errors and exceptions. But everything seemed to work and complete the tasks.

End of Part 1.

If the topic is interesting, then I will continue the story (the following works in the current system):

Part. 2. Creation of API for SPA, solving problems with cross-site requests, validation, socket injection, problems of choosing a PHP framework.

Part. 3. How I switched to Laravel and how it turned out to be worse than a self-written framework.

Part 4. Moving to ReactJs, introducing flux, SOLID and integrating into Laravel.

Part. 5 Training through interactive GPS maps, why Docker was needed, the transition to OSM and OSRM.

Part. 6. Parsing of docx documents, internal anti-plagiarism, identification of technical methods to increase the uniqueness of the text.

Part. 7. Implementation of neural networks in the work of the LMS.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *