Как сделать тест в html

Создание учебного теста с ответами при помощи HTML и JavaScript

В статье описывается последовательное создание учебного теста. Если вы не хотите читать о программировании, то сразу переходите в раздел с инструкциями по изменению теста и его загрузки.

Создание простого теста

Развитие информационных технологий и дистанционного образования приводит к необходимости создания электронных учебных тестов. Многие учителя и преподаватели сталкиваются с проблемой создания учебных тестов. Главная сложность решения данной задачи в том, что при создании таких электронным материалов требуется знание HTML и jаvascript.

Как решить эту проблему. Учитель может воспользоваться онлайн конструктором тестов или же попытаться создать тест самостоятельно на основе использования шаблона. Именно второй вариант мы рассмотрим в данной статье.

Мы сформируем простой шаблон, который можно будет потом размножить на несколько файлов и каждый превратить в отдельный тест.

Допустим имеется несложный математический тест, состоящий из нескольких задач по математике:

Примеры нужно вывести на экран и дать ученику возможность ввести ответ, дальше сравнить ответ с правильным и показать ученику процент правильно выполненного задания.

Сначала создадим HTML код задач:

Напротив каждой задачи учебного теста мы подставили поле для ввода текста. Подробнее о различных полях в HTML читайте в статье по ссылке. В конце мы добавили кнопку, при нажатии на которую должна произойти проверка того, что набрал ученик в ответах текста.

Обратите внимание на идентификаторы “z_1”,”z_2” и “z_3”. Если вам нужно добавить задачу 4, то нужно просто скопировать последнюю строку с задачей, заменить условие и в поле идентификатора написать “z_4”.

В последней строке мы покажем результат выполнения заданий после проверки.

На следующем этапе нужно создать jаvascript код, который сравнит то, что набрал ученик с правильными ответами и подсчитает процент выполнения задач.

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

Первые три строки будут содержать правильные ответы. Четвертая и последующие задачи в тест добавляются путем копирования последней строки с ответом, подстановки числа 4 вместо 3 и указанием правильного ответа.

Теперь нужно узнать то, что ввел ученик в ответах. Для этого используем следующий код.

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

Четвертая задача будет означать новую строку с заменой цифр 3 на 4.

Читать еще: Как сделать шкатулку из открыток

Далее нужно сравнить ответы ученика с правильными ответами. Если ответы будут совпадать, то за каждую задачу теста нужно добавить 1 балл.

ball = 0;
if(otv_uch_1 == pr_otv_zadachi_1) <
ball +=1;
>
if(otv_uch_2 == pr_otv_zadachi_2) <
ball +=1;
>
if(otv_uch_3 == pr_otv_zadachi_3) <
ball +=1;
>

Для добавления задачи 4 вам потребуется скопировать последние три строки и заменить цифры в них на 4.

Теперь нужно посчитать процент правильных ответов.

В этой строке мы указываем сколько всего задач в учебном тесте. Если вы добавили еще, то нужно исправить эту цифру.

procent_vip = ball/vsego_zadach * 100;

Затем нужно вывести ответ на экран.

document.getElementById(‘rezultat’).innerHTML = “Задания выполнены верно на ”+procent_vip+”%.”;

Вот и все. Теперь объединим весь код в одну HTML страницу.

Тест из нескольких задач по математике

Как создать онлайн тест на php

Иногда людям не знающим программирования, нужно создать онлайн тест на php для своего сайта, на самом деле все очень просто, постараюсь наглядно объяснить.

Для решения данной задачи мы будем использовать простую HTML форму и POST запросы. И так приступим.

1. Нам потребуется создать файл php, в общем по сути не важно, если вы используете CMS, то пишете там, где можно вставить php код.

2. Создадим простую форму с полями “radio”, то есть для выбора вариантов ответа и кнопкой для результатов.

В результате получим:

3. Отлично мы создали форму. Теперь в неё нужно внести изменения, чтобы она работала.

Добавим атрибуты к форме.

method=”POST” – метод отправки php форм.

action=”result.php” – файл, в который будут отправляться результаты формы.

4. Присвоим уникальное имя вариантам ответов, чтобы объединить их между собой, для одного вопроса – name = “имя”:

5. А теперь пропишем имя ответов к каждому варианту, например ‘value = “a”‘

В результате получим:

6. Создадим файл result.php в том же каталоге, в котором создадим скрипт теста на php для обработки и вывода результата правильных и не правильных ответов.

7. Перед html кодом добавим скрипт php:

Описание: Здесь все довольно просто, мы создаем простое условие для каждого вопроса. Если в вопросе [q1] вариант “a”, то прибавляем к переменной “$ot” + 1 ($ot – количество правильных ответов), если другой вариант то записываем в переменную $not “неправильных ответов” + 1.

Читать еще: Как сделать паровую машину

8. Теперь выводим на страницу в html коде правильные и неправильные ответы:

Заключение. Теперь у вас есть простой тест на php и html, теперь можно и запустить его для онлайн. Вы можете добавить сколько угодно вариантов ответов по аналогии. Добавить стилей и улучшить код. Можно было все сделать намного грамотней, но проще этого не придумаешь. Работа у теста такая: выбрали варианты, нажали на кнопку “результат”, нас перекидывает на вторую страницу, где выводится подсчет правильных и неправильных ответов. Удачи!

С помощью POST-запроса можно реализовать обратную форму, о том, как это делается читайте в статье – Форма обратной связи php без спама.

Как сделать текст в HTML (топ 10 запросов)

Чем отличается написание текста в обычном текстовом редакторе, от написания в HTML? В текстовом редакторе, форматирование текста происходит в интерфейсе программы. Для HTML страницы – текст форматируется, при помощи тегов.

Теги сообщают браузерам, как и в каком месте страницы, отображать текст. Для этого придуманы специальные теги. Мы не пишем, текст, просто так.

Хорошего Вам дня!

Текст, всегда заключают, между тегами, например, внутри абзаца.

Пожелайте мне удачи!

Мы собрали список, наиболее частых запросов, связанных с текстом, от начинающих изучать HTML.

Как сделать текст в центре

По умолчанию, текст, прилипает к левому краю. Свойство text-align, внутри тега div, выравнивает текст по центру.

div <
text-align: center; // CSS
>

Как сделать текст справа

div <
text-align: right; // CSS
>

Как сделать отступ текста

За отступы текста отвечают свойства – margin и padding. Margin отделяет абзацы друг от друга, а padding создает воздушное пространство, внутри абзаца. Отступы измеряют в абсолютных единицах измерения – пикселях или в относительных – %, em, rem.

Отодвинься от меня

p <
margin: 20px; // CSS
padding: 10px;
>

Как сделать текст жирным

Через тег b, можно вставлять прямо в разметку. Этот способ предпочтительнее для SEO-оптимизации.

Хочу быть жирным

или выделять участок тегом span и задавать степень жирности в CSS правилах.

Хочу быть самым жирным

span <
font-weight: bolder; // CSS
>

или указывать жирность в цифрах.

span <
font-weight: 700; // в интервале 100 – 900
>

Читать еще: Как сделать рисунок на ногтях

Как сделать ссылку в тексте

Нужный фрагмент текста, заключить в тег a, с указанием URL-адреса.

Вам следует перейти по этой ссылке

Как сделать текст в рамке

Рамка задается не тексту, а блочному тегу, в котором находится этот текст.

Я – важный текст

p <
border: 2px solid pink; // толщина, сплошная, цвет
padding: 15px; // воздух между рамкой и текстом
>

Как сделать текст подчеркнутым

Нужное место, обрамляем тегом u.

Прошу здесь подчеркнуть меня

Как задать тексту фон

Сделать фон для всего абзаца.

Хочу выделиться фоном

p <
background-color: pink; // CSS
>

Если вы хотите задать фон, отдельному фрагменту текста, тогда используйте span.

Нет, только розовый цвет

span <
background-color: pink; // CSS
>

Как увеличить текст

Посмотрите, какой я большой

Как сделать текст курсивом

Через тег i в разметке.

Здесь я прямой, а тут – курсивом

Курсивом – я особенный

span <
font-style: italic; // CSS
>

Итого

Мы взяли список топовых запросов, связанных с форматированием текста в HTML, от начинающих и коротко ответили на них. Задавайте ваши вопросы в комментариях.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (https://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: https://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: https://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

BB-код ссылки для форумов (например, можете поставить её в подписи):