Создание теста на html и javascript

Создание теста на html и javascript

БлогNot. Как сделать простой тест на JavaScript, с ответами "да" или "нет" и подсчетом ба.

Как сделать простой тест на JavaScript, с ответами "да" или "нет" и подсчетом баллов

Ответ на заданный вопрос.

На самом деле все ответы есть на моем сайте по следующим ссылкам:

Архив с обучающей статьей и примерами по JavaScript

Раздел по JavaScript с множеством доступных для скачивания архивов

Приведу здесь пример с комментариями именно для теста на JavaScript.

2. Сохранить файл с расширением html .

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

Теперь главное, создаем тест. Чтобы было понятно, как работает предложенная система, разберем алгоритм его работы. Выясним что нам для этого нужно.

а) Нужно определиться с системой оценивания. Ведь тест, как раз для этого и нужен. Обычно, прежде чем разрабатывать тест, мы уже знаем, сколько будет вопросов, на сколько вопросов нужно ответить правильно, чтобы получить «5», «4», «3» или «2».

б) Нужно, куда-то, вводить вопросы.

в) Нужно обрабатывать ответы. Чтобы система определила правильно или неправильно.

г) Нужно вывести результат.

Итого, получается 4 пункта. Чтобы был порядок в нашем тесте. Создадим 4 формы, где и будем реализовывать наши команды алгоритма.

В первой форме будем помещать наши вопросы.

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

Эта форма мною названа именем L , здесь 4 интервала. Начинаются соответственно с 0,4,7,10. Вы можете проставлять свои варианты.

Читайте также:  Игры на двоих на компьютерах по сети

input type =" hidden " – означает, что эти величины не отображаются на экране при запуске теста.

Эта форма мною названа именем Н, здесь заканчиваются наши 4 интервала соответственно на 3,6,9,18. Соответственно получаем 4 интервала (от 0 до 3) баллов (от 4 до 6), (от 7 до 9) и (от 10 до 18). Получаются интервалы за которые мы можем поставить оценки соответственно «2», «3», «4» и «5».

Для этого вводим еще одну форму D

Вы можете прописывать свои комментарии к оцениванию.

Теперь приступаем к обработке:

Ну и теперь вводим форму на которую будем выводить результат

В этом уроке я покажу Вам как сделать интересный Drag and drop тест с помощью JavaScript.

Данный тест может пригодится Вам для повышения собственной эрудиции :), а также для вставки на свой сайт. Подобные тесты могут быть интересны посетителям Вашего сайта.

Вставьте следующий код в шапку документа

Код довольно объемный, так как включает в себя стили оформления и длинную JavaScript функцию. Весь код можно найти здесь. (или в исходниках к уроку).

Вставьте следующий код в тело документа

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

Настройка

Все элементы в левой колонке оформляются с помощью неупорядоченного списка следующим образом:

Необходимо создать
для каждого "переносного" элемента. Все элементы необходимо поместить в тег

    . Важно, чтобы в каждом элементе был атрибут groupId. Значение даннго атрибута должно совпадать со значением "id" ячейки, куда каждый элемент необходимо поместить. К примеру, у Oslo groupId = "box2". Если взгляните на код ниже, то увидите, что под Norway идет . Значит, что Осло принадлежит Норвегии. И так далее в таком же духе.
Читайте также:  Виджет для выключения компьютера windows 10

Код ячеек с правой стороны:

Выше представлены все переменные, изменив которые можно немного модифицировать тест.

* boxSizeArray = массив, который показывает количетсво элементов в ячейках с правой стороны
* arrow_offsetX = горизонтальный отступ маленькой стрелки — Вам может потребоваться немного модифицировать это значение, чтобы стрелочка была на своем месте
* arrow_offsetY = Вертикальный отступ стрелки
* arrow_offsetX_firefox и arrow_offsetY_firefox = тоже самое, что и выше — только для Файрфок
* initShuffleItems = Элементы с левой стороны при загрузке будут перемешиваться (true), не будут(false)
* indicateDestionationByUseOfArrow = Показывать место куда будут перенесены объекты стрелкой (true), прямоугольником (false).
* lockedAfterDrag = заблокировать ячейку после переноса. Если пользователь перенесет ответ в ячейку, он не сможет его вернуть обратно.

Спасибо за внимание! Всего хорошего и удачи!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.dhtmlgoodies.com
Перевел: Максим Шкурупий
Урок создан: 9 Августа 2009
Просмотров: 43689
Правила перепечатки

5 последних уроков рубрики "Разное"

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Разработка веб-сайтов с помощью онлайн платформы Wrike

Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

20 ресурсов для прототипирования

Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Топ 10 бесплатных хостингов

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

Быстрая заметка: массовый UPDATE в MySQL

Ни для кого не секрет как в MySQL реализовать массовый INSERT, а вот с UPDATE-ом могут возникнуть сложности. Чтобы не прибегать к манипуляциям события ON_DUPLICATE можно воспользоваться специальной конструкцией CASE … WHEN … THEN.

Ссылка на основную публикацию
Смарт часы что они умеют
В этой статье мы поговорим о том, для чего нужны умные часы, а также какими функциями они располагают чаще всего....
Сервер не поддерживает символы не ascii
Многие из нас пользуются замечательным FTP сервером FileZilla Server. Думаю, не я один столкнулся с проблемой некорректного отображения русских букв...
Сервера для обновления nod32 бесплатно
Отличие полной версии от триальной Полные (не триальные) антивирусные базы и программные компоненты Eset Antivirus и Eset Smart Security! Отличия...
Смарт часы самсунг с сим картой
Хотите быть современным и модным человеком? Перестать зависеть от своего громоздкого смартфона? Только представьте, вы можете не брать телефон на...
Adblock detector