Designer interactive exercises for online learning

Introduction

Life in the modern world is developing dynamically, technologies appear and die, and with them our skills also become obsolete. 20 years ago, it was necessary to remember the functions of the Windows API, now many experts do not even know what it is, and this does not prevent them from working. Other technologies have come to the fore, requiring a completely different experience. For example, Java Script, HTML 5, CSS. After 10 years, other technologies and tools, another way of thinking, are likely to replace. Therefore, the learning process in the modern changing world is becoming continuous and more and more intensive. This is a must have of any modern specialist.




')

As it was before

Now there are new ways of getting knowledge - webinars and video tutorials, various video courses. Along with this, the books have not lost their relevance; now you just have a wide choice of how to get knowledge - from a smartphone or in a library. Of course, these methods differ in the degree of interactivity and comfort.
In the good old books there is a section "Test questions". What are they needed for? The fact is that an important point of learning is self-examination. Not only because a person can independently find out whether he has learned the material he has learned correctly. It is also important that at the moment of answering the control questions a person critically overestimates what has been traversed, new perspectives and perspectives open up, which greatly increases the effectiveness of training.
Imagine that you read a chapter from a book on mechanics about blocks. What questions can you meet at the end of the chapter? For example:
What are the elements of the block?
What is a polyspast?
Perhaps the chapter would have attached tasks. For example:
The task:



In the system shown in the figure, there are blocks and weights connected by cables, the mass of the rightmost load is 700 grams, and the masses of blocks are from 100 to 600 grams. The system is balanced and motionless. Find the masses of cargo m1, m2 and m3. Mass, friction and stretching of the cables can be neglected. By the way, this is a rather interesting task, who wants to solve it, it is better not to look further, since the answer will be further.
In order to learn and verify, we would look at the end of the book and see the answers. Thus, we would critically analyze what was read, and it would be remembered much better than if we just read the material. Self-test reinforces knowledge.

Now (our days)

However, progress does not stand still, and now, reading the e-book, you can also meet,
for example, such a test exercise:



Here, as you can see, everything is much clearer and faster. You need to drag all the weights into place. At the same time, we will know the correctness of the answer immediately and we will not waste time turning the pages in search of the page with answers. What is very important, our attention will remain focused on the subject area.

How to do this exercise

How to do this exercise? Here, in general, you need four people:
1. We need an expert in the subject area (in this case, a physicist), who will formulate the essence of the exercises and answer options.
2. We need a designer who will give the exercise a proper look.
3. We need a web programmer who will write the code.
4. We need a quality control specialist (QC) to make sure that this exercise works well in all browsers, etc.
The process of developing an exercise is as follows:



1. The specialist formulates the essence of the task, with a pen on paper draws an exercise scheme.
2. The designer gives it the right look.
3. The programmer implements the exercise.
4. QC checks the exercise, makes comments and returns the exercise to the programmer. Steps 3-4 are repeated several times.
5. Then the designer, within the framework of the supervision procedure, makes his comments on the appearance of the exercise, and thus steps 3-5 are repeated several times.
6. Then again a specialist is connected, who checks if the essence of the exercise has not been lost behind all the ups and downs. In general, steps 3-6 may also be repeated several times.
Only after that the picture can be published in an e-book or burned to DVD.
Thus, we see that the process can take quite a long time.

Future

The idea of ​​our tool was to create such exercises directly to a specialist in the subject area, so we decided to make the tool as simple as possible. At this stage, he supports 4 basic types of exercises:
Drag Elements, matching elements to each other.
Text Gaps, enter text manually.
Sorting, sorting.
Single, Multiple choice.
However, we will not consider all features of the system.
Let's just try to create an exercise to balance weights. To begin with, of course, we need a picture of the appropriate size. Let the designer draw her:



Next, go to our tool and create a new exercise such as Drag Drop.



So that all the information about the task was in one place, we introduce the question right in the title of the exercise.



Now load our picture into the editor.



Now you need to mark the places where you can drag weights. To do this, we need three elements of the Rectangle type control element and text elements to draw question marks:



Each rectangle needs to set the Behavior property. This property must be set to “drop-target”. All that is left is to load the images of the weights and set the value of “drop-element” to them as Behavior, as well as to set them the correct target.



Now you can play an exercise in test mode.



Done !!! You can insert into the book.

Implementation

To implement such a tool, a popular combination of AngularJS and Breeze.JS technology was chosen. This approach allows you to have one data model that synchronizes simultaneously with the display using AngularJS and with the server side using Breeze.JS. This approach is quite natural for this kind of solutions, since all complexity focuses on the client level, and not “smeared” across all layers of the application. We will not describe in detail the architecture of the solution; we may do this in the next article. Let us dwell on one interesting problem that we encountered during implementation.
The important point is that the application immediately saves all changes to the client model on the server side. Therefore, the sequence of operations is critical to the health of the application. Imagine, for example, that you add an element and immediately delete it. If the order is disturbed, you first delete the non-existent element and get an error. To solve this problem, there is an extension for breeze, called breeze.savequeuing.js.
However, when using this library, the following problem was discovered: Breeze updates the state of the entities on the client model with the values ​​just stored on the server. Thus, with a large number of changes per unit of time, the state of the entity on the client may return to some previous state as a result of a delay in saving on the server. You can, of course, have two copies of the client model and overwrite the entity fields selectively, processing the save events in breeze. However, in this case, the very essence of using breeze is lost, i.e. creating a common for the client and server data model.
Fortunately, breeze supports a kind of extensibility (breeze.savequeuing.js itself is implemented in this way), so you can make your extension working “on top” of breeze.savequeuing.js, which does not wipe out all the entities, but only some, of our choice .
How to do it. First, override the updateTargetFromRaw function.

EntityType.prototype.enableSaveWithNoResultUpdate = function () { this._updateTargetFromRaw = EntityType.prototype._updateTargetFromRawNoResultUpdate; }; 

The code for this function is quite long, so we replaced part of the code with comments.

  EntityType.prototype._updateTargetFromRawNoResultUpdate = function (target, raw, rawValueFn) { var overwrite = /*   ,       */; this.dataProperties.forEach(function (dp) { var rawVal = rawValueFn(raw, dp); if (rawVal === undefined) return; var dataType = dp.dataType; var oldVal; if (dp.isComplexProperty) { // } else { var val; if (overwrite) { //   breeze.js,    } else { if ((dp.isPartOfKey || !tp || (tp === dp.defaultValue))) { //   breeze.js,    } } } }); // ... } 

Let's break it down. First, what is the calling context (this) for this function. The context is an object that contains entity metadata. In addition, the function takes three parameters:
target - an entity that needs to (or should not) be updated.
raw - “raw” data returned from the server.
rawValueFn is a function that can extract the value of a property from raw data. If overwrite == false, i.e. it is not necessary to update the entity, then we do nothing, except for one important case - if the property is part of a key. Why is it important? Because when adding a new entity, the key is empty, and the value in it appears only after being saved on the server. And after saving on the server, it must be saved on the client. If overwrite == true, then save the entity in the usual way.
Of course, in the end, everything worked out for us and it worked as it should.

What we have achieved

The most important thing for us was to reduce the time for creating interactive exercises and reduce labor costs. The process of developing an exercise now looks like this:



As you can see, it is greatly optimized. We managed to exclude 2 of 4 people involved in creating the exercise. We need only a designer to draw pictures for the exercise, and an expert in the subject area who will create the exercise. The time-consuming work of testing exercise behavior in different browsers also disappears. Thus, the time spent on creation is reduced several times.
It is always nice to see how IT solutions help transform real life and make it a bit easier.