How it all works: the development of interactive online courses

In our blog, we already wrote about what is wrong with online courses , and how to fix it. Today, we will continue the topic and discuss how interactive online courses on HTML and CSS are developed in HTML Academy .

Who comes up with courses

First of all, we should talk about what professional skills the author of the courses should possess (or members of the development team). Below is our version of the list of such qualities:
')

• You need to know the layout well (HTML and CSS);
• Understanding JavaScript in order to write checks for tasks and “animate” them (here you should experience using different sandboxes like Codepen);
• Design and writing skills are also needed - the tasks should be able to be described in such a way that the students understand what is required of them.

This is an interesting work that allows IT professionals to use their skills and constantly improve - in the course of developing a course on any topic, the author studies it thoroughly and becomes familiar with all the pitfalls and subtleties.

In addition, creating materials that help people broaden their horizons, master a new area of ​​knowledge, and even change their careers and lives (now more and more non-technical specialists are studying layout) is just a good and useful thing.

Stages of course development

Creating a course begins with thinking through the ideas - at this stage the development team decides which aspect of the HTML and CSS technologies it would like to highlight this time, and also describes how the course will look like in the final version. We at the Academy have a special document in which each team member writes down emerging ideas to topics and questions that have not yet been addressed in previous courses and can carry great benefits for students.

Then comes the development of the course script. At this stage, the author is looking for metaphors that will help explain theoretical material, for example: biathlon targets and a deck of cards to explain the work of selectors or the battle of cats for a chicken to explain specificity. Such metaphors are good in “theoretical” courses, where new properties are being studied, but for more applied courses not metaphors are better suited, but a general idea or legend. We call it the "setting" by analogy with game dev.

The result is a course scenario in which tasks are combined by metaphor or legend — this makes the learning process more interesting.

An example of the use of such a legend is a course on animations (about which we wrote in the past topic ), during which a student must help human civilization to go from the primitive state to flying into space.

Another course with an interesting storyline is a course on transformations (changing block sizes, turns, distortions, movements). In it, the magician performs the necessary actions, who first trains in performing basic techniques, and then sets off on an adventure, where he fights with the enemies and eventually encounters the megaboss.



Not always used legends implying "action". Sometimes you can achieve the desired result and more "calm" methods. For example, the main storyline of the course on smooth transitions of properties is a quiz on HTML and CSS. Answering her questions, the student will learn how to apply smooth transitions in the interface using the example of material design.

What's next

In the future, the existing material is collected, which will then be used in the course, and the “physical” development of tasks will start. It takes place according to the principle “from difficult to simple” - first, the work goes on the final tasks of the course, combining all the material that students will have to master during their studies. And only then there is a division of this site into smaller subsections, containing tasks on specific issues of the course.

Below is a draft of one of the courses currently being developed - it does not yet have specific goals and objectives. During development, the entire decoration code will be moved to an external setting file, targets will be created and checks written.



The final stage before the final “refinement” of the course is the final review of the team members who did not develop it - direct authors for several months of working on the tasks “blurred eyes”, and they cannot see the obvious flaws or errors.

When all edits that have appeared at the last stage have been made, the course passes a “pre-sale training” and is issued. And immediately begins collecting feedback from students who quickly find various errors and simply express their wishes. Thus, the work on the course almost never ends.

Not so simple

The above is an ideal course development process. However, in life everything rarely goes smoothly, and at each of the stages listed above, certain difficulties arise.

Almost never happens so that the original idea of ​​the course is implemented without changes in the final product - as a rule, the idea itself and the storyline change several times, sometimes even drastically.

In developing courses, we at HTML Academy adhere to the Blizzard approach - this company can spend a lot of time and money on developing the game, and then not let it out, because it did not work out the way they wanted. In our practice, there was also the experience of developing courses, the issue of which we later refused, because in our own opinion they did not give students the opportunity to master the material qualitatively.

In addition, courses often consist of several parts — first, basic things and concepts are revealed, and then immersion in advanced techniques takes place. At the beginning of work on a course on some topic, the author has more freedom, which facilitates the creation of the plot and the elaboration of the tasks themselves. And when working on a “sequel”, he is already in the framework set earlier - in such conditions it is harder to come up with a really interesting legend and tasks.

Technical difficulties

In addition to the purely organizational difficulties, there is a large reservoir and purely technical problems faced by course developers. The most obvious of them is that when working with CSS, it is necessary to take into account the fact that different browsers support different styles and properties in different ways and sometimes interpret them slyly. Even the behavior of several versions of the same Chrome browser in this regard can be very different.

In particular, this difference manifested itself when creating a course on transformations. The fact is that browsers transform transformations into a matrix. For example, the transform transform: scaleX(1) browser converts to matrix(1, 0, 0, 1, 0, 0) .

But if corners are involved in the transformation function, then different browsers round the matrix value in different ways. For example, a transform transform: translate(198px, 210px) scale(0.6) or an identical transform: translate(-198px, -210px) rotate(180deg) scale(0.6) can be converted to the following matrix values:

 "matrix(0.6, 0.00000000000000007347880794884119, 0.00000000000000007347880794884119, 0.6, 198, 210)" "matrix(0.6, 0.00000000000000007347880794884119, 0.00000000000000007347880794884119, 0.6, 198.00000000000003, 209.99999999999997)" "matrix(0.6, 0, 0, 0.6, 198, 210)" 

And this is only the difference in the behavior of the most popular browsers.

The solution was found in the inverse transformation of the matrix, in order to calculate the angle and displacement value.

 function(transform) { var values = transform.split('(')[1]; values = values.split(')')[0]; values = values.split(','); var a = values[0]; var b = values[1]; return Math.round(Math.atan2(b, a) * (180/Math.PI)); } 

Not everything was just when developing a course on gradients. The fact is that historically several different variations of syntax changed, before it finally settled. Plus, even in the most current syntax, there are different ways of specifying the same effect, and checking in courses you need all possible values.

Below are some code variations that give the same result:

 linear-gradient(rgb(255, 255, 255) 25%, rgb(17, 153, 255) 50%, rgb(0, 57, 166) 75%, rgb(213, 43, 30) 100%); linear-gradient(rgb(255, 255, 255) 25%, rgb(17, 153, 255) 50%, rgb(0, 57, 166) 75%, rgb(213, 43, 30)); linear-gradient(to bottom, rgb(255, 255, 255) 25%, rgb(17, 153, 255) 50%, rgb(0, 57, 166) 75%, rgb(213, 43, 30) 100%); linear-gradient(to bottom, rgb(255, 255, 255) 25%, rgb(17, 153, 255) 50%, rgb(0, 57, 166) 75%, rgb(213, 43, 30)); -webkit-linear-gradient(top, rgb(255, 255, 255) 25%, rgb(17, 153, 255) 50%, rgb(0, 57, 166) 75%, rgb(213, 43, 30) 100%); -webkit-linear-gradient(top, rgb(255, 255, 255) 25%, rgb(17, 153, 255) 50%, rgb(0, 57, 166) 75%, rgb(213, 43, 30)); 

We managed to solve this problem by using autoprefixer. Variations of the actual syntax are checked in the browser, if the version of the user browser is out of date (or a particular student decided to do the task not provided for in the verification method), he will need to manually click the Check button, after which his code will be checked on the server. There, the code using autoprefixer is converted to the desired format for the browser engine. We know what version of the webcam is used in the phantom and can accurately determine the values ​​into which the code will be converted.

Increase engagement

In order to make the learning process even more exciting and interesting, HTML Academy actively uses gamification. In addition to the standard “achievements” for achievements, the tasks themselves are developed using specific game mechanics, which we described in detail in this topic .

In addition, the interest in learning is fueled by the presence of bonus tasks - in the text of a specific task you can often find hints on how you can open an additional “level” (“fans” of a particular course appreciate the opportunity to work out more). All this, again, is gamified - passing hidden levels gives the student additional achievements.

Here is an example of one of the bonus tasks: in the block with goals, an additional task appears, which is written in general form, and not with specific values. Here the student needs to experiment in order to complete it and get a separate achievement and points in the ranking.



By the way, we have some story elements that connect many differently directed courses (both basic and advanced). For example, in various tasks the image of the cat of the founder of the Academy AlexPershin by the name of Keks is often used.

Here, for example, is one of the tasks where the student needs to add the <video> . The video to be inserted depicts just a cupcake, at the time when he was still a kitten:



The presence of such a common "cat" storyline for all courses additionally fascinates users, and also makes the passage of the course fun and memorable.

I want to try

As you can see, the process of creating courses is not as simple as it may seem at first glance, and a whole team of professionals is needed for successful work in this direction.

To develop tasks and checks, you need a strong JavaScript programmer, you also need a script writer who will come up with a plot, and a designer who can visualize it (perhaps there are professionals somewhere that combine these qualities), and creating task texts and descriptions The plot should deal with a content specialist.

It is not easy to find such specialists, besides, they are expensive, and the course still needs to be recouped (and if it is made very expensive, then no one will study it).

Therefore, if you do not have familiar specialists who are ready to start creating training courses, but you have ideas for creating training materials (and storylines) that have not yet been presented at the Academy, write to us, and it is quite possible your idea will be implemented.

That's all for today, thank you for your attention!