The article describes the sequential creation of a training test. If you do not want to read about programming, then go directly to the section with instructions for modifying the test and downloading it.

Create a simple test

Development information technologies and distance education leads to the need to create electronic learning tests. Many teachers and educators face the challenge of creating learning tests. The main difficulty in solving this problem is that the creation of such electronic materials requires knowledge of HTML and javascript.

How to solve this problem. The teacher can use online constructor tests, or try to create a test yourself based on the use of a template. It is the second option that we will consider in this article.

We will form a simple template that can then be multiplied into several files and turn each into a separate test.

Suppose there is a simple mathematical test, consisting of several tasks in mathematics:

1. 4*12 +7 =
2. 7-8*2 =
3. 34*2 + 17 =

Examples need to be displayed on the screen and give the student the opportunity to enter the answer, then compare the answer with the correct one and show the student the percentage of the task completed correctly.

First, let's create the task's HTML code:

4*12 + 7 =

7-8*2 =

34*2 + 17 =

Verify

Opposite each task of the training test, we have substituted a field for entering text. Read more about the different fields in HTML in the article at the link. At the end, we added a button that, when clicked, should check what the student has typed in the text responses.

Pay attention to the identifiers “z_1”, “z_2” and “z_3”. If you need to add task 4, then you just need to copy the last line with the task, replace the condition and write “z_4” in the identifier field.

In the last line, we will show the result of the tasks after the check.

The next step is to create a javascript code that will compare what the student typed with the correct answers and calculate the percentage of tasks completed.

pr_otv_zadachi_1 = 55;
pr_otv_zadachi_2 = -9;
pr_otv_zadachi_3 = 85;

The first three lines will contain the correct answers. The fourth and subsequent tasks are added to the test by copying the last line with the answer, substituting the number 4 instead of 3 and indicating the correct answer.

Now you need to find out what the student entered in the answers. For this we use the following code.

otv_uch_1 = document.getElementById('z_1').value;
otv_uch_2 = document.getElementById('z_2').value;
otv_uch_3 = document.getElementById('z_3').value;

The fourth task will be newline with the replacement of numbers 3 by 4.

ball = 0;
ball +=1;
}
ball +=1;
}
ball +=1;
}

To add task 4, you will need to copy the last three lines and replace the numbers in them with 4.

vsego_task = 3

In this line we indicate how many tasks are in the training test. If you added more, then you need to correct this figure.

Then you need to display the answer on the screen.

document.getElementById('rezultat').innerHTML = “Jobs completed correctly at ”+procent_vip+”%.”;

That's all. Now let's combine all the code into one HTML page.

Complete the test tasks:

4*12 + 7 =

7-8*2 =

34*2 + 17 =

Verify

That's all the code for the practice test with HTML answers. You can download this file below. Use this manual in order to increase or decrease the number of tasks.

Download test template. Easy option

Download file: (downloads: 593)

Below you can download the extended version of the test.

Separation of test questions. Adding a Next Question Button

We need to make sure that only one question is displayed at a time. And to switch to the next question, you had to click the "Next Question" button.

To do this, add each question and the field for the answer to separate div blocks. Moreover, for the second and third questions, we will add the parameter "display:none" in order to hide them. For the first, specify the "display: block" parameter. And for each block we will sign the numbers of questions.

We will also add the code for the "Next question" button.

Next question

Function sled_vopr()( if(document.getElementById("vopros2").style.display == "block")( document.getElementById("vopros2").style.display = "none"; document.getElementById("vopros3" ).style.display = "block";document.getElementById("kn_sl").style.display = "none";document.getElementById("kn_pr").style.display = "block"; ) if(document.getElementById ("vopros1").style.display == "block")( document.getElementById("vopros1").style.display = "none"; document.getElementById("vopros2").style.display = "block"; ) )

In the first condition, we check whether the second question is displayed, if so, then we need to hide it and display the third question, and we also need to hide the button for switching between test questions and show the "Check" button since this is the last question. In the second condition, we check if the first test question is displayed. If so, then you need to hide it and show the second question.

As a result, our test looks like this:

But in this option, adding new questions to the test will be more difficult.

Transferring test questions and answers to a separate JavaScript file

In order to make it easier to replace questions, you need to move them and answers to separate file. Then you don't have to look for this data in the main file. If you are not a programmer, then such a search will not be easy. So we create new file data.js and connect it to the main html file our test. Next, we add several variables with questions and several with answers to it (we transfer the answers from the main file).

Questions_1 = "4*12 + 7 = "; questions_2 = "7-8*2 = "; questions_3 = "34*2 + 17 = "; pr_otv_zadachi_1 = 55; pr_otv_zadachi_2 = -9; pr_otv_zadachi_3 = 85;

And we write the javascript code for setting the text of the questions from the variables after the page is loaded.

Document.addEventListener("DOMContentLoaded", function()( document.getElementById("v_1").innerHTML = vopros_1; document.getElementById("v_2").innerHTML = vopros_2; document.getElementById("v_3").innerHTML = vopros_3 ; ));

That's all. Now, in order to replace the text of the test questions and answers to it, you only need to edit the data.js file. Similarly, add the name of the test:

Var test = "Multiply";

Test response encryption

In the program of the training test, which we got, there is one flaw. If the student opens the "data.js" file, he will see not only the texts of the questions, but also the answers. Therefore, we need to encrypt the answers so that the student cannot recognize them.

To do this, we use the kodirov function. It looks like this:

Function kodirov(stroka) ( var b64ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefg"+ "hijklmnopqrstuvwxyz0123456789+/="; var b64enc = ""; var ch1, ch2, ch3; var en1, en2, en3, en4; for (var i=0; i > 2; en2 = ((ch1 & 3)<< 4) | (ch2 >> << 2) | (ch3 >>

Similarly, we encrypt the second and third questions. After encryption, the content of the data.js file looks like this:

Varvopros_1 = "4*12 + 7 = "; var questions_2 = "7-8*2 = "; var questions_3 = "34*2 + 17 = "; varpr_otv_zadachi_1 = "NTU="; var pr_otv_zadachi_2 = "LTk="; varpr_otv_zadachi_3 = "ODU=";

As you can see, the responses are encrypted and are a set of characters.

In the main file, before checking, you need to encrypt what the student wrote.

Otv_uch_1 = document.getElementById("z_1").value; otv_uch_1 = kodirov(otv_uch_1); otv_uch_2 = document.getElementById("z_2").value; otv_uch_2 = kodirov(otv_uch_2); otv_uch_3 = document.getElementById("z_3").value; otv_uch_3 = kodirov(otv_uch_3);

As a result, the program checks the encrypted answers and the student cannot find out the answers to the questions of the educational test.

Outputting the answer for each question

Our practice test outputs overall result in percents. Let's make it so that the results for each question separately are also displayed. Thus it will be possible to carry out more detailed analysis students doing the test.

To do this, you need to modify the function of checking student answers.

Function proverit()( otv_uch_1 = document.getElementById("z_1").value; otv_ucgenika_1 = otv_uch_1; otv_uch_1 = kodirov(otv_uch_1); otv_uch_2 = document.getElementById("z_2").value; otv_ucgenika_2 = otv_uch_2; otv_uch_2 = kodirov( otv_uch_2); otv_uch_3 = document.getElementById("z_3").value; otv_ucgenika_3 = otv_uch_3; otv_uch_3 = kodirov(otv_uch_3); ball = 0; if(otv_uch_1 == pr_otv_zadachi_1)( ball +=1; otveti = "Question 1. You answered correctly. Your answer is:"+otv_ucgenika_1; ) else ( otveti = "Question 1. You answered incorrectly. Your answer is:"+otv_ucgenika_1; ) if(otv_uch_2 == pr_otv_zadachi_2)( ball +=1; otveti += "
Question 2. You answered correctly. Your answer: "+otv_ucgenika_2; ) else ( answer += "
Question 2. You answered incorrectly. Your answer: "+otv_ucgenika_2; ) if(otv_uch_3 == pr_otv_zadachi_3)( ball +=1; answer += "
Question 3. You answered correctly. Your answer: "+otv_ucgenika_3; ) else ( answer += "
Question 3. You answered incorrectly. Your answer:"+otv_ucgenika_3; ) vsego_zadach = 3; procent_vip = ball/vsego_zadach * 100; document.getElementById("resultat").innerHTML = "Tasks completed correctly on "+procent_vip+"%.

"+answer; )

As a result of the modification of this function, it is displayed whether the student answered correctly, and also his answer is displayed on the screen. The teacher can compare the student's answer with the correct one, as well as analyze the learning work.

Thus, we have received a full-fledged training test that can be used in your learning activities. For more convenience, I moved the data.js file to separate folder. You can edit the data.js file in any text editor, for example, Notepad.

After the last modifications, increasing the fonts, adding color to the answers, we get the following complete original html code file:

The result of running the test with an error in the third task is shown in the figure below. I also added the "toFixed()" function for rounding the percentage of tasks completed.

Below you can download this program.

Download test template

Download file: (downloads: 93)
Download file: (downloads: 102)
Download file: (downloads: 120)

You can code answers for the test on our website.

Adding Images to Quiz Questions

Naturally, for many questions, when creating a test, you need to add images. Often you need to add an image instead of question text. We implement this opportunity also through the data.js file. I will be editing the largest test of 15 questions. So, for each question I will add a separate variable and indicate in it: if there is an image, then - "yes", otherwise - "no".

var questions_ris_1 = "yes"; var questions_ris_2 = "no"; var questions_ris_3 = "no"; var questions_ris_4 = "yes"; var questions_ris_5 = "no"; var questions_ris_6 = "no"; var questions_ris_7 = "yes"; var questions_ris_8 = "no"; var questions_ris_9 = "no"; var questions_ris_10 = "no"; var questions_ris_11 = "no"; var questions_ris_12 = "no"; var questions_ris_13 = "no"; var questions_ris_14 = "no"; var questions_ris_15 = "yes";

I draw your attention to the fact that the text of the question in the case of an image, I completely removed.

varvopros_1 = ""; var questions_2 = "7-8*2 = "; var questions_3 = "34*2 + 17 = "; var questions_4 = ""; var questions_5 = "36*2 + 4 = "; var questions_6 = "37*8 + 7 = "; var questions_7 = ""; var questions_8 = "39*12 + 19 = "; var questions_9 = "40*2 + 16 = "; var questions_10 = "41*4 + 3 = "; var questions_11 = "42*8 - 7 = "; var questions_12 = "43*6 - 5 = "; var questions_13 = "4*62 - 6 = "; var questions_14 = "45*9 - 9 = "; var questions_15 = "";

But you can also add both an image and question text.

IN this case I indicated that in questions numbered 1,4,7 and 15 there will be images. Therefore, I have to add these images to the "data" folder. Their names should correspond (including content) to the question numbers: "01.jpg", "04.jpg", "07.jpg" and "15.jpg".

IN programming code In the main file, I added conditions that test variables. If there is an image, then one is loaded to the test question. Example of such code for the first question: if(vopros_ris_1 == "yes")( vopros_1 = "

"+vopros_1; document.getElementById("v_1").innerHTML = vopros_1; ) else ( document.getElementById("v_1").innerHTML = vopros_1; )

Download file: (downloads: 57)

Shuffle test questions randomly

In the case when the test is performed by several students in the class at once, who are sitting next to me, I encountered a problem when some look at what the others sitting next to answer. This is the first reason for mixing questions. The second is just creation a large number versions of the same test.

These manipulations complicate the program somewhat. To do this, you need to create an array, put all the questions, images and answers into it, and then shuffle everything in random order.

At the same time, I did not edit the "data.js" file.
This is how the variable in which the array is placed looks like: voprosi = [,,,,,,,,,,,,,,];

Peremeshat_vse_voprosi(voprosi);

In the data.js file, I add a new variable in which you can specify whether to shuffle questions or not ("yes" or "no").

var peremeshat_voprosi = "yes";

Sample question output in html file:

Document.getElementById("v_1").innerHTML = voprosi;

You can download the test with the possibility of mixing questions from the link below.

Since the questions are mixed, I added the output of not only the student's answers, but also the text of the questions to the result of the program. I combined all this into one table.

Download test template with images

Download file: (downloads: 59)

Visual design of the testing program

All main functions have been added to the test. Now let's move on to the design of the training test program. To reduce the time of design work, I use free library bootstrap.

Library classes have been added and almost all properties have been replaced for the design of both test questions and the result output table.
So the test itself looks like this:

And the response table looks like this:

Note that with the help of the bootstrap library, I also added a scale that displays the percentage of correctly completed test tasks.

So, latest version(on the this moment) you can download the already visually designed test from the link below.

Download full version test template

Download file: (downloads: 246)

You can code answers for the test on our website.

Now the site is available testing for knowledge of the following topics: HTML, css, JavaScript, PHP, SQL.

Each test consists of 10 questions on a specific topic. In each question, I tried to touch on the most diverse areas of application of a particular language in order to check your level of knowledge as thoroughly as possible.

Of course, everything tests are free and anyone can go through.

Test procedure:

1. Follow the link " Start testing" of the corresponding test.
2. Answer the questions by choosing the only one correct option.
3. Upon completion of testing, you will see your score, number of mistakes, as well as analysis of each question from the test.

Attention! Returning to the previous question will not work, so before answering, think.

Tests currently available

1. HTML

   • Total test passed: 67354 people
   • Average score: 2.85 out of 5 points.

   Basic knowledge test HTML. You will need to know basic HTML tags and their proper use. It is also necessary to understand the features of the standard XHTML 1.1.

2. css

   • Total test passed: 29039 people
   • Average score: 3.38 out of 5 points.

   The test tests knowledge of the basics css. To successfully pass the test, you must know the main types of selectors (their syntax), know the basic properties and their possible values, and also know the purpose of the most popular pseudo-elements.

3. JavaScript

   • Total test passed: 22972 people
   • Average score: 3.3 out of 5 points.

   This test tests your knowledge of JavaScript language. Questions from the test cover different areas of application given language. There are a lot of questions about understanding "small" nuances. Otherwise, you are required to know basic things: working with variables, basic JavaScript functions, operation priorities, and so on.

4. PHP

   • Total test passed: 31651 people
   • Average score: 3.03 out of 5 points.

   This test tests your knowledge of PHP language. You are required to know basic PHP constructs, working with variables, sessions, redirect implementation and other standard things.
   Convincing request: The test contains many questions like: "What will the script output?". A big request, do not copy it and check it. Be honest with yourself.

5. SQL

   • Total test passed: 17168 people
   • Average score: 3.29 out of 5 points.

   This test tests your knowledge of the language SQL queries. The questions concern only the most basic knowledge this language, without any deepening. You will need knowledge of the most basic SQL queries, as well as their competent use.

We searched, searched for the file you specified, but did not find it. This can be in one of two cases:

1. You did something wrong.
2. We did something wrong.

In order not to fall into the next time similar situation please listen short lecture, which explains how and why a 404 error page appears.

How and why a 404 error page appears

Of course, you often wondered why, when typing the address of a page or clicking on a certain link, something completely different from what is expected appears, but a mysterious and incomprehensible page containing information that we absolutely do not need. Not only do we get disappointed, because instead of what we want, they slip a “dummy” on us, but this page is usually hung with banners, as if everyone is visiting it.

So, a 404 error page occurs as a result of the following situations. And since you are reading this text, it means that you are in one of them.

1. The page address is typed with an error

Well, they made a mistake, with whom it does not happen. Look carefully and type the address again. If you are sure that you typed everything correctly, go to the next step.

2. The page has been moved or deleted by the site administrator

There was a page, but it floated. Maybe they removed it, maybe they renamed it, or maybe they moved it, or maybe ... Yes, anything can happen. Because the administrator can do whatever he wants on the site. That's why he's an administrator! In this case, it remains only to catch him in a dark corner and say politely: “How so! Where is the page of affairs, I ask for the last time, the page, since your two are so, where are you going? Come back to your place!" After that, any sane person, understanding the depth of his delusion and complete incompetence, makes a redirect from the address old page to the new address. And we are satisfied, we can dial the usual address again, no longer worrying about whether it is correct or not.

3. The developer entered the URL of the link incorrectly

Once again history repeats itself with a dark angle. Only this time we catch the developer who typeset the site and made links on it. And again in a polite tone, playing with a cold, sharp object near his soft parts of the body, we ask you to do everything right. It is simply impossible to resist such an innocent request.

After reading, you may have the idea that you ended up on this page solely through the fault of the author of this site. I can assure you that this is not so. Read the first paragraph, everything is written there.

If you want to improve your development skills, the best way to perfection - practice. We bring to your attention resources for testing knowledge in HTML / CSS.

That is why it is important to find different ways practice and discover your strengths and weak sides.
Practical experience helps to rationally assess the gaps in their knowledge and continuously improve their skills. What's more, testing your knowledge will ensure that you stay on top of the latest trends in your field.

So here are ten ways to test your knowledge of HTML and CSS and become a better web developer.

Start your own project

Being an expert in theory is great, but you are unlikely to achieve great heights if you do not know how to apply your vast knowledge in practice. That is why start the project - best plan action for you. In the process of developing, for example, your own website, you will be able to mark progress and evaluate the achievement of your goals.

compete

The best way to test yourself for strength is to take part in real programming competitions, for example, in the community Code Wars. In the form of a game, you compete with others real people learning from their own mistakes. But it only makes sense if you play fair.

Join the community

If the competition is too Difficult choice for you, especially if you are a complete beginner, good option will join the community for testing and further learning. In the process of communication, it is much easier to identify your strengths and weaknesses and work on them.

At the same time, the community is a company of talented people who give you the opportunity and incentive to improve. By participating in discussions, you can safely ask questions and get the information you need.

Practice in the sandbox

This tool runs your code and allows you to see the result of its execution. Projects run in the browser and can participate in contests and competitions, which will show how high expectations they can meet.

The resource contains many projects open for study, which will allow you to understand how they work and apply the knowledge gained in your own practice. From time to time, in order to motivate participants, contests are held on the site in which you can measure your strength with other programmers with the opportunity to take high positions in the leaderboard and win prizes.

Try puzzles and quizzes

There is a vast array of quizzes and puzzle games available online that cover HTML, CSS, and other programming languages. As a rule, they are present on paid sites as an addition to training courses. You can also practice with a more experienced mentor.

play

It's no secret that if you suddenly decide to have fun, you can get much more benefit from this form of learning than from dry theory and solving exercises. While playing, along with programming skills, you get pleasure, a charge of positive impressions and high level satisfaction with the results. The game makes the emerging tasks more lively and interesting, which means it makes fantasy and creative thinking work.

Find a site with interactive tests

by the most in a simple way to objectively assess programming skills is to visit the site for testing. Tests provide an opportunity to work on a variety of questions and practice well. You can evaluate your level before and after passing any test or course of tests.

Discipline yourself

An important part of the process of learning and testing your own knowledge is to identify the most best way achieve maximum productivity. You can participate in activities that will help you find this way. For example, Clean Coders is a site that provides this opportunity through professional training videos. Moreover, these videos are very interesting, so you don't have to worry about concentration, you will get involved from the first minutes.

Take a look at the world around

Put yourself next to developers from all over the world. There is social network, which allows you to connect with freelance programmers from more than a hundred countries around the world. You will find many talented people, as well as the opportunity to evaluate your abilities and learn new things.