Constructor of interactive exercises for online learning

    Introduction

    Life in the modern world is developing dynamically, technologies appear and die, and our skills become obsolete with them. 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 that require a completely different experience have come to the fore. For example, Java Script, HTML 5, CSS. In 10 years, other technologies and tools, another way of thinking, will most likely come to replace it. Therefore, the learning process in today's changing world is becoming continuous and increasingly intense. This is a must have for any modern specialist.





    As it was before


    Now there are new ways to gain knowledge - webinars and video tutorials, various video courses. Along with this, the books have not lost their relevance, just now you have a wide choice of how to get knowledge - from your smartphone or in the library. Of course, these methods differ in the degree of interactivity and comfort.
    In the good old books there is a section "Security Questions". What are they needed for? The fact is that an important point in learning is self-testing. Not only because a person can independently find out whether he has learned the material learned correctly. It is also important that at the moment of answering control questions a person critically overestimates what has been completed, new angles of vision and perspectives open, which significantly increases the effectiveness of training.
    Imagine that you read a chapter from a book on mechanics dedicated to blocks. What questions may you encounter at the end of the chapter? For example:
    What elements does a block consist of?
    What is a chain hoist?
    Perhaps tasks would be attached to the chapter. For example:
    Task condition:



    In the system shown in the figure, there are blocks and loads connected by cables, the mass of the rightmost load is 700 grams, and the mass of blocks is from 100 to 600 grams. The system is balanced and motionless. Find the masses of goods m1, m2 and m3. The mass, friction and stretching of the cables can be neglected. By the way, this is a rather interesting task; if you want to solve it, it’s better not to look further, since there will be an answer further.
    In order to find out and check, we would look at the end of the book and look at the answers. Thus, we would critically analyze what we read, and it would be remembered much better than if we just read the material. Self-testing reinforces knowledge.

    Now (today)


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



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

    How to do such an exercise


    How to do such an exercise? Here, in the general case, four people are
    needed : 1. We need a specialist in the subject area (in this case, a physicist) who will formulate the essence of the exercise and the answer options.
    2. You 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 (QC) specialist who will make sure that this exercise works well in all browsers, etc.
    The process of developing exercises is as follows:



    1. The specialist formulates the essence of the task, draws a diagram of the exercise with a pen on paper.
    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, as part of the field 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 connects, who checks to see if the essence of the exercise is lost behind all the vicissitudes. In general, steps 3-6 can 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 by a specialist in the subject area, so we decided to make the tool as simple as possible. At this stage, it supports 4 main types of exercises:
    Drag Elements, matching elements to each other.
    Text Gaps, manual text entry.
    Sorting, sorting.
    Single, Multiple choice.
    However, we will not consider all the features of the system.
    Let's just try to create an exercise to balance weights. For starters, of course, we need a picture of the appropriate size. We ask the designer to draw it:



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



    So that all the information about the task is in one place, we will introduce the question directly 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 rectangle control elements and text elements to draw question marks:



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



    Now you can lose the exercise in test mode.



    Done !!! Can be inserted into a book.

    Implementation


    To implement such a tool, the popular combination of AngularJS technology and Breeze.JS was chosen. This approach allows you to have one data model that is synchronized simultaneously with the display using AngularJS and with the server side using Breeze.JS. Such an approach is quite natural for such decisions, since all the complexity focuses on the client level, and is not “spread out" across all layers of the application. We will not describe the solution architecture in detail here; 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, for the operation of the application, the sequence of operations is critical. Imagine, for example, that you add an item and immediately delete it. If in this case the order is violated, then you first delete the nonexistent 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 entities on the client model with the values ​​just stored on the server. Thus, with a large number of changes per unit time, the state of the entity on the client can return to some previous state as a result of the delay in saving on the server. You can, of course, have two copies of the client model and overwrite the fields of entities selectively, processing save events in breeze. However, in this case, the very essence of using breeze is lost, i.e. Creation of a common data model for the client and server.
    Fortunately, breeze supports a kind of extensibility (actually breeze.savequeuing.js is implemented that way), so you can make your own extension that works “on top” of breeze.savequeuing.js, which does not fray 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 analyze it in more detail. First, what is the call context (this) for this function. A context is an object that contains entity metadata. In addition, the function accepts three parameters:
    target - an entity that needs to (or is not necessary) to 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. we don’t need to update the entity, then we do nothing, except for one important case - if the property is part of the key. Why is it important? Because when adding a new entity, the key is empty, and the value in it appears only after saving to the server. And after saving to 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 turned out and worked as it should.

    What have we 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 significantly optimized. We managed to exclude 2 of 4 people involved in the creation of the exercise. We need only a designer to draw pictures for the exercise, and a specialist in the subject area who will be engaged in the creation of the exercise. The time-consuming work of testing exercise behavior in different browsers also falls away. Thus, the time spent on the creation is reduced several times.
    It's always nice to see how IT solutions help transform real life and make it a little easier.

    Also popular now: