<MyRusakov.ru />

Программирование на C# с Нуля до Гуру

Программирование на C# с Нуля до Гуру

Данный курс научит Вас программировать на языке C#, который является одним из самых востребованных языков программирования в мире. Курс состоит из 7 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

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

Помимо самого курса Вас ждут ещё 3 бесплатных ценных Бонуса: «Технология Windows Presentation Foundation», «Создание библиотеки классов» и «Правильная работа со справочником».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Создание теста для сайта на JavaScript

Создание теста для сайта на JavaScript

На этом уроке создадим тест с вопросами и полями для ввода ответов для дальнейшего размещения на сайте. Вопросы и ответы теста хранятся в последовательно идущих объектах, их которых состоит массив questions. В каждом объекте есть ключи (text, right) и их значения (вопрос, ответ). Вариант хранения вопроса и ответа в одном массиве очень удобен, особенно, если наверняка потребуется добавить или изменить эти данные.

let questions = [
    {
        text: 'Сокращенное название таблицы стилей?', // вопрос
        right: 'CSS', // правильный ответ
    },
    {
        text: 'Кто верстает сайты?',
        right: 'верстальщик',
    },
    {
        text: 'Самый популярный CSS-фреймворк?',
        right: 'Bootstrap',
    },
];

JavaScript на основе массива questions налету создаст структуру HTML разметки. Для каждого объекта массива создается тег div, внутри которого будет параграф p, поле для ввода (input) и дата-атрибут с правильным ответом. То есть этих тегов не будет в HTML разметке, каждый раз они будут сгенерированы скриптом. У такого подхода есть преимущество - лучшая читаемость кода. Ведь вопросов может быть много, что размножит разметку.

<div>
    <p>Сокращенное название таблицы стилей?</p>
    <input data-right="CSS">
</div>
<div>
    <p>Кто верстает сайты?</p>
    <input data-right="верстальщик">
</div>
<div>
    <p>Самый популярный CSS-фреймворк?</p>
    <input data-right="Bootstrap">
</div>

Структура разметки будет создаваться в цикле for...of. Укажем какие элементы мы хотим создать: div, p, input. Через метод appendChild() добавим в test блок div. Затем в блок div добавим теги p и input. Правильный ответ будет хранится в дата-атрибуте инпута.

for (let question of questions) {
    let div = document.createElement('div');
    test.appendChild(div);

    let p = document.createElement('p');
    p.innerHTML = question.text;
    div.appendChild(p);

    let input = document.createElement('input');
    input.dataset.right = question.right;
    div.appendChild(input);
}

В разметку мы поместим контейнер #test, куда будут попадать сгенерированные div блоки и кнопку. По нажатию на кнопку запустится проверка на правильность ответов.

// HTML
<div id="test">сюда попадут сгенерированные теги</div>
<button id="button">Проверить</button>

Получим блок с тестом по его идентификатору.

let test = document.querySelector('#test');

Границы полей с правильными ответами покрасим в зеленый цвет, а с неправильными ответами, в красный.

// CSS
.correct {
    border: 2px solid green;
}
.incorrect {
    border: 2px solid red;
}

Для проверки правильных ответов, сначала обратимся к нашей кнопке по селектору. Привяжем к кнопке событие: при клике по кнопке выполнится функция, которая переберет все инпуты.

let button = document.querySelector('#button');
button.addEventListener('click', function() {
let inputs = document.querySelectorAll('#test input');

Запускаем цикл for...of для перебора инпутов. У каждого инпута считываем значение, которое ввел пользователь. В условии if-else сверяем ответ пользователя с правильным ответом, обратившись через объект dataset. Если ответ правильный, то к инпуту добавится класс correct с зеленой рамкой. Если ответ неправильный, то добавится класс incorrect и покрасит границы инпута в красный цвет. Добавляем классы через объект classList и метод add. Перед каждым новым проходом цикла, все добавленные классы нужно удалять. Иначе на элементе будут висеть два класса одновременно, что недопустимо.

for (let input of inputs) {
    input.classList.remove('correct'); // удаление класса
    input.classList.remove('incorrect'); // удаление класса

    if (input.value == input.dataset.right) {
        input.classList.add('correct');
    } else {
        input.classList.add('incorrect');
    }
}
});

Создание теста для сайта на JavaScript

Тесты на JavaScript не защищены от недобросовестного пользователя, который легко может подсмотреть ответы в коде. Поэтому тесты на JavaScript больше носят развлекательный характер. Реальные тесты, проверяющие знания например у школьников, следует делать на другом языке программирования или хранить ответы в базе данных и вытаскивать их AJAX-ом.

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

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

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

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

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

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

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

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

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.