April 23, 2015 at 11:44How it works: developing interactive online courses
In our blog, we already wrote about what is wrong with online courses , and how to fix it. Today we continue the topic and talk about how interactive online courses on HTML and CSS are developed in HTML Academy .
Who comes up with the courses
First of all, it's worth talking about what professional skills the course author (or members of the development team) should have. Below is our version of the list of such qualities:
- You need to know layout well (HTML and CSS);
- Understand JavaScript in order to write checks for tasks and “revive” them (experience with using various “sandboxes” like Codepen is desirable here);
- Design skills and the ability to express thoughts in writing are also required - tasks must be able to be described so that 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 process of developing a course on a topic, the author studies it thoroughly and gets acquainted with all the pitfalls and subtleties.
In addition, the creation of materials that help people broaden their horizons, master a new field of knowledge and even change their career and life ( more and more non-technical specialists are studying the layout now ) is simply a good and useful thing.
Course Development Steps
Creating a course begins with thinking over an idea - at this stage, the development team decides which aspect of HTML and CSS technology she would like to highlight this time, and also describes how the course will look in the final version. We have a special document at the Academy in which each member of the team writes down emerging ideas for topics and questions that have not yet been raised in previous courses and can be of great benefit to students.
Then comes the development of a course scenario. 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 studied, but for more applied courses, not metaphors, but a general idea or legend are better suited. We call it a "setting" by analogy with a game dev.
The result is a scenario of the course in which the tasks are combined by a metaphor or legend - this allows you to make the learning process more interesting.
An example of using such a legend is the animation course (which we wrote about in the last topic), during which the student must help human civilization to go from the primal state to flights into space.
Another course with an interesting storyline is a course on transformations (resizing blocks, turning, distorting, moving). In it, the necessary actions are carried out by the magician, who first trains in the implementation of basic tricks, and then goes on an adventure, where he fights with enemies and eventually meets with the "megaboss".
Legends implying action are not always used. Sometimes you can achieve the desired result by more "calm" methods. For example, the main storyline of the course on smooth transitions of properties is a quiz on the topic of HTML and CSS. Answering her questions, the student learns about how to apply smooth transitions in the interface using material design as an example.
What's next
In the future, the collection of available material takes place, which will then be used in the course, and the “physical” development of tasks starts. It takes place on a “from complex to simple” principle - first, work is done on the final tasks of the course, combining all the material that students will have to master during the training. And only then there is a breakdown of this section into smaller subsections containing tasks on specific questions of the course.
Below is a draft of one of the courses currently being developed - it has not yet spelled out specific goals and objectives. During development, all the design code will be transferred to an external setting file, goals will be created and checks written.
The final step before the final “refinement” of the course is the final review of the team members who were not involved in its development — the direct authors have “blurred the eyes” for several months of work on the tasks, and they cannot see obvious flaws or errors.
When all the edits that appeared at the last stage are made, the course goes through “pre-sale preparation” and is issued. And immediately begins collecting feedback from students who quickly find various errors and simply express their wishes. Thus, work on the course almost never ends.
Not so simple
The ideal course development process is described above. However, in life everything rarely goes smoothly, and at each of the listed stages often some difficulties arise.
In fact, it never happens that the initial idea of a course was realized without changes in the final product - as a rule, the idea itself and the storyline change several times, sometimes even dramatically.
In the development of 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 release it, because it did not turn out the way they wanted. In our practice, there was also experience in developing courses, which we later refused to issue, 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 there is an immersion in advanced techniques. When starting work on a course on a topic, the author has more freedom, which facilitates the creation of the plot and the elaboration of the tasks themselves. And while working on the “sequel”, he is already within the limits set earlier - in such conditions it’s more difficult to come up with a really interesting legend and tasks.
Technical difficulties
In addition to purely organizational difficulties, there is a large stratum and purely technical problems that course developers face. The most obvious of them - when working with CSS, you need to take into account the fact that different browsers support different styles and properties in different ways, and sometimes interpret them cunningly. Even the behavior of several versions of the same Chrome browser in this regard can be very different.
In particular, a similar difference manifested itself when creating a course on transformations. The fact is that browsers transform transformations into a matrix. For example, the
transform: scaleX(1)browser converts the transfusion to matrix(1, 0, 0, 1, 0, 0). But if angles are involved in the transformation function, then different browsers round the matrix value in different ways. For example, transformation
transform: translate(198px, 210px) scale(0.6)or identical to ittransform: 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 simple when developing a course on gradients. The fact is that several different syntax variations have historically been replaced before it was finally settled. Plus, even in the most current syntax there are different ways to set the same effect, and you need to check all possible values in the courses.
Below are some code options 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 were able to solve this problem by using autoprefixer. Variations of the most current syntax are checked in the browser, if the version of the user’s browser is outdated (or a particular student decided the task is not provided for in the check), 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 format needed for the browser engine. We know which version of the webkit is used in the phantom and can accurately determine the values into which the code will be converted.
Increased engagement
In order to make the learning process even more exciting and interesting, gamification is actively used in HTML Academy courses. In addition to the standard “achievements” for achievements, the tasks themselves are developed using specific game mechanics, which we talked about 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 of how to open an additional “level” (“fans” of a certain course really 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 fulfill it and receive separately the achievement and points in the rating.
By the way, we have some plot elements that connect a lot of multidirectional courses (both basic and advanced). For example, in various tasks, the image of the cat of the founder of the Academy AlexPershin named Cupcake is often used .
Here, for example, is one of the tasks where the student needs to add a tag
The presence of such a common "cat" storyline for all courses additionally captivates users, and also makes the course fun and memorable.
I want to try
As you can see, the process of creating courses is not as simple as it might seem at first glance, and for a successful work in this direction a whole team of professionals is needed.
To develop tasks and checks, you need a strong JavaScript programmer, you also need a screenwriter who will come up with a plot, and a designer who can visualize it (maybe there are professionals somewhere combining these qualities), and creating task texts and descriptions The plot should be handled by a content specialist.
It’s not easy to find such specialists, besides they are expensive, but the course still needs to be recouped (and if you make it very expensive, no one will study on it).
Therefore, if you do not have familiar specialists who are ready to start creating training courses, but 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 that your idea will be realized.
That's it for today, thanks for watching!