Как сделать тест на jquery
MnogoBlog
как создать сайт на wordpress, настроить и оптимизировать wordpress
Как создать тест или опрос на JavaScript
Здравствуйте, давайте создадим тест и опрос на html, который будет состоять из 3 вопросов и 6 ответов в каждом из них и обработаем их результаты с помощью javascript.
Для того чтобы узнать какой товар (услуга) пользуется наибольшим спросом на данный момент времени применяют различные опросы и тесты.
Как только вы сможете проанализировать результаты тестов и опросов – начинайте рекламировать ваш товар (услугу) – лучше всего для этого подойдет Яндекс.Директ – идеальная площадка для размещения рекламы на просторах Рунета. Ежедневно эту сеть посещает свыше 5 миллионов пользователей в России и других странах СНГ, поэтому частотность показов релевантных объявлений достаточно высокая. А для того чтобы ваша реклама была максимальна эффективна, то лучше всего обратиться по настройке Яндекс.Директа к профессионалам от Direct-UP – dircet-up.ru. Удачного вам бизнеса!
1. Создаем тест на JavaScript:
Тест будет состоять из 3 вопросов, вы можете установить правильный ответ в каждом из вопросов и в зависимости от набранных баллов перенаправить посетителя на разные страницы.
Рассмотрим код первого вопроса:
Здесь правильный ответ помечен значением value2, все остальные имеют значение value1.
Теперь давайте посмотрим на простой оператор if, который мы используем в JavaScript, чтобы найти сколько же набрано правильных ответов в тесте:
В принципе, мы проверяем только значение value2 и в зависимости от его количества выставляем оценку.
После того, как мы узнали оценку, то можем перенаправить посетителя на разные странички, в зависимости от результата:
Например, перенаправить посетителя на страничку /ocenka2.html.
Вот готовый код файл index.html:
2. Создаем простой опрос на javaScript:
Рассмотрим код первого вопроса:
Затем мы повторяем этот шаблон для каждого вопроса.
Теперь давайте посмотрим на простой оператор if, который мы используем в JavaScript, чтобы найти ответ с наибольшим значением:
В принципе, мы проверяем, что сумма всех ответов со значением value1 выше суммы других возможных вариантов, а также что она выше 0.
Мы выполняем одинаковую проверку для каждого значения.
После того, как мы знаем, самое высокое значение, мы можем использовать этот результат, например, чтобы перенаправить посетителя на разные url:
Так если в большинстве вопросов был выбран ответ под цифрой 1, то result = value1 и соответственно посетитель попадет на страничку value1.html.
Как создавать тесты и викторины на JavaScript
Разбираемся, как создавать тесты и викторины для сайта на ванильном JavaScript.
Тесты и викторины хороши не только ради проверки знаний, но и как развлекательный контент, который заставляет пользователей дольше оставаться на сайте.
Чтобы их создать, можно воспользоваться сторонними сервисами, но разве это когда-нибудь останавливало хоть одного разработчика? С любовью изобретать велосипеды мы создадим собственный код для встраивания тестов на страницы.
Репозиторий проекта на GitHub
Пишет о программировании, в свободное время создает игры. Мечтает открыть свою студию и выпускать ламповые RPG.
Вёрстка страницы
Тест мы поместим в файл quiz.html, чтобы его можно было вставлять с помощью iframe в другие страницы. Давайте сверстаем тест:
Теперь добавим стили:
В файл index.html добавим iframe, чтобы подключить тест:
Смотрим, что получилось:
Наверху находится сам вопрос, под ним — варианты ответов, а в самом низу — прогресс прохождения теста.
Создаём классы
Тест будет работать с помощью следующих классов:
Когда классы готовы, можно инстанцировать объекты (создавать экземпляры):
Здесь создан только один вопрос, чтобы не отвлекать повторяющимся кодом. Вы можете добавить их столько, сколько вам необходимо.
Остаётся только прописать логику взаимодействия с пользователем:
Смотрим, что получилось:
Когда пользователь завершит тест, то увидит свой результат:
Особенности создания разных тестов
Как вы могли заметить, это очень простой тест. Он пригодится, чтобы пользователи могли проверить, насколько хорошо они усвоили материал. Ну или просто для веселья — вот несколько тем для развлекательных тестов:
Всё это может быть очень забавным и вовлекающим, если учитывать особенности своей аудитории. Например, для программистов есть интересные тесты на сайте tproger.ru.
Другое дело, если у вас образовательная платформа и результаты теста влияют на итоговую оценку. В этом случае данные о правильных ответах нужно хранить на сервере. Иначе их можно подсмотреть через консоль разработчика:
То же самое касается и таймеров: если вы даёте ограниченное время на прохождение теста, то время начала отсчёта должно храниться на сервере, а не в JS-коде.
Заключение
С помощью кода из статьи можно создавать сколько угодно тестов. Разве что для каждого придётся дублировать файл app.js, чтобы указать новые вопросы.
Исправить это можно с помощью HTTP-запросов — вопросы будут храниться на сервере и отправляться пользователю в виде JSON. Это очень распространённая практика в веб-разработке, которую нужно знать каждому разработчику.
Если вы хотите лучше освоить JavaScript, то можете записаться на наш курс по Frontend-разработке.
Frontend-разработчик
Ноутбук, ваши навыки и знания, а также стабильный интернет — это всё, что нужно для эффективной работы. Толковые веб-разработчики высоко ценятся в международных компаниях и часто получают приглашения о работе. На курсе вы научитесь верстать сайты и создавать интерфейсы, а также соберёте два проекта в портфолио и получите современную профессию.
Создание учебного теста с ответами при помощи HTML и JavaScript
В статье описывается последовательное создание учебного теста. Если вы не хотите читать о программировании, то сразу переходите в раздел с инструкциями по изменению теста и его загрузки.
Создание простого теста
Развитие информационных технологий и дистанционного образования приводит к необходимости создания электронных учебных тестов. Многие учителя и преподаватели сталкиваются с проблемой создания учебных тестов. Главная сложность решения данной задачи в том, что при создании таких электронным материалов требуется знание HTML и jаvascript.
Как решить эту проблему. Учитель может воспользоваться онлайн конструктором тестов или же попытаться создать тест самостоятельно на основе использования шаблона. Именно второй вариант мы рассмотрим в данной статье.
Мы сформируем простой шаблон, который можно будет потом размножить на несколько файлов и каждый превратить в отдельный тест.
Допустим имеется несложный математический тест, состоящий из нескольких задач по математике:
Примеры нужно вывести на экран и дать ученику возможность ввести ответ, дальше сравнить ответ с правильным и показать ученику процент правильно выполненного задания.
Сначала создадим HTML код задач:
Напротив каждой задачи учебного теста мы подставили поле для ввода текста. Подробнее о различных полях в HTML читайте в статье по ссылке. В конце мы добавили кнопку, при нажатии на которую должна произойти проверка того, что набрал ученик в ответах текста.
Обратите внимание на идентификаторы “z_1”,”z_2” и “z_3”. Если вам нужно добавить задачу 4, то нужно просто скопировать последнюю строку с задачей, заменить условие и в поле идентификатора написать “z_4”.
В последней строке мы покажем результат выполнения заданий после проверки.
На следующем этапе нужно создать jаvascript код, который сравнит то, что набрал ученик с правильными ответами и подсчитает процент выполнения задач.
Первые три строки будут содержать правильные ответы. Четвертая и последующие задачи в тест добавляются путем копирования последней строки с ответом, подстановки числа 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 страницу.
Тест из нескольких задач по математике
«Flaskr» — введение во Flask, разработка через тестирование (TDD) и jQuery
Flask – это замечательный микро веб фреймворк, основанный на Python. Flaskr – это миниблог, который описан в официальном руководстве по Flask. Я продирался через это руководство больше раз, чем могу в этом признаться. Тем не менее, я хотел бы взять это руководство для следующего шага, добавив в него разработку через тестирование (test driven development) и немножко jQuery.
Если вы новичок во Flask и/или в веб-разработке в целом, важно понимать эти основные фундаментальные понятия:
**Примечание**: этот руководство представлено проектом https://realpython.com. Пожалуйста, поддержите этот проект с открытым исходным кодом, приобретая наши курсы http://www.realpython.com/courses с обучением Python и веб-разработке с Django и flask!
Содержание
Требования
Руководство использует следующее ПО:
Разработка через тестирование?
Разработка через тестирование (tdd) — это вид разработки, который предусматривает написание автоматических тестов перед написанием самой функции. Иными словами, это комбинация испытания и написания кода. Этот процесс не только помогает обеспечить корректность кода, но также позволяет развивать дизайн и архитектуру проекта под постоянным контролем.
TDD обычно следует схеме «Красный-Зеленый-Рефакторинг» как показано на картинке выше:
Скачиваем Python
Перед началом убедитесь, что у вас установлена последняя версия Питон 3.5, который вы можете скачать с http://www.python.org/download/
Примечание: это руководство использует Python V 3.5.1.
Вместе с Python также надо поставить:
Установка проекта
Создайте новую папку для сохранения проекта:
Создайте и активируйте виртуальное окружение:
Установка Flask с помощью pip:
Первый тест
Давайте начнем с простой программы «hello, world».
Создаем тестовый файл:
Откройте этот файл в вашем любимом текстовом редакторе. И добавьте в файл app-test.py следующие строки:
Если все хорошо, то тест будет провален (fail).
Теперь добавим следующие строки в файл app.py, чтобы успешно пройти тест.
Обратимся по адресу http://localhost:5000/. Вы увидите строку «Hello, World!» на вашем экране.
Вернемся в терминал и остановим сервер разработки с помощью Ctrl+C.
Запустим наш тест вновь:
Отлично, то что надо.
Установка Flaskr
Добавим пару папок, «static» и «templates», в корень нашего проекта. Должна получится вот такая структура:
Создайте новый файл с именем «schema.sql» и добавьте в него следующий код:
Это позволит создать таблицу с тремя полями — «id», «title» и «text». SQLite будет использоваться для наших СУБД, поскольку SQLite встроен в стандартную библиотеку Python и не требует настройки.
Второй тест
Давайте создадим базовый файл для запуска нашего приложения. Однако сначала нам нужно написать тест для него.
Просто изменим наш app-test.py из первого теста:
Итак, мы ожидаем получить код 404 (error). Запустите тест. Тест не прошел. Почему тест был провален? Все просто. Мы ожидали 404, но на самом деле мы получаем назад код 200 с этого маршрута.
Здесь мы импортируем необходимые модули, создаем раздел конфигурации для глобальных переменных, инициализируем и затем запускаем приложение.
Запускаем сервер. Вы должны увидеть сообщение об ошибке 404, при обращении к маршруту «/», так как маршрута нет и его представления не существует. Вернемся к терминалу. Остановим сервер разработки. Теперь запустим модульный тест. Он должен пройти без ошибок.
Установка базы данных
Наша цель — создать подключение к базе данных, создать базу данных на основе схемы, если она еще не существует, затем закрывать соединение каждый раз после запуска теста.
Как мы можем проверить существование файла базы данных? Обновим наш app-test.py:
Запустите его, чтобы убедиться, что тест терпит неудачу, показывая, что база данных не существует.
Теперь добавьте следующий код в app.py:
Теперь можно создать базу данных с помощью Python Shell и импорта и вызова init_db() :
Закроем оболочку и запустим тест еще раз. Тест пройден? Теперь мы убедились, что база данных была создана.
Шаблоны и представления (Templates and Views )
Далее нам нужно настроить шаблоны и соответствующие представления, которые определяют маршруты. Подумайте об этом с точки зрения пользователя. Нам нужно, чтобы пользователи могли иметь возможность войти в блог и выйти из него. После входа в систему, пользователь должен иметь возможность создать пост. И наконец, мы должны иметь возможность показывать эти посты.
В первую очередь напишем несколько тестов для этого.
Юнит тестирование
Взгляните на окончательный код. Я добавил комментарии для объяснений.
Если сейчас запустить тесты, все рухнет кроме test_database()`:
Давайте сделаем так, чтобы тесты были пройдены.
Показ записей
Во-первых, добавим представление для отображения записей в app.py:
Далее зайдем в папку «templates» и добавим в нее файл index.html такого содержания:
Запустим тест. Должны увидеть следующее:
Авторизация юзеров
Добавим в файл app.py:
Добавим в папку template файл «login.html»:
Запустим тест еще раз.
Вы все равно должны увидеть некоторые ошибки! Рассмотрим одну из ошибок — werkzeug.routing.BuildError: Could not build url for endpoint ‘index’. Did you mean ‘login’ instead?
Далее, добавьте в представление функцию добавления записи:
Теперь вы должны увидеть это:
Эта ошибка утверждает, что при обращении к маршруту / сообщение «No entries here so far» возвращается. Проверьте шаблон index.html. Текст на самом деле гласит: «No entries yet. Add some!». Так обновите же тест и запустите тест вновь:
Добавляем цвета
Сохраните следующие стили в новый файл с именем style.css в папку «static»:
Запустите приложение, войдите в систему (логин/пароль = «admin»), создайте какой-нибудь пост, и выйдете из блога. Затем выполните тесты, чтобы убедиться, что до сих пор все работает.
jQuery
Теперь добавим немного jQuery, чтобы сделать сайт немного более интерактивным.
Создадим файл main.js в директории «static» и запишем в него следующий код:
Добавим новую функцию в app.py, чтобы иметь возможность удалять сообщения из базы данных:
Наконец, напишем новый тест:
Убедитесь, что вы добавили импорт import json
Проверьте это вручную, запустив сервер и добавив две новые записи. Нажмите на одну из них. Запись должна быть удалена из dom, а также из базы данных. Дважды проверьте это.
Затем запустите тестирование. Результат тестов должен быть таким:
Развёртывание
Приложение в рабочем состоянии, давайте не будем на этом останавливаться и развернем приложение на Heroku.
Для этого сначала зарегистрируйтесь, а затем установите Heroku Toolbelt.
Далее, установите веб-сервер под названием gunicorn:
Создайте Procfile в корне вашего проекта:
Добавьте следующий код:
Создайте файл requirements.txt, чтобы указать внешние зависимости, которые должны быть установлены для приложения, чтобы оно работало:
Создайте файл .gitignore:
И добавьте файлы и папки, которые не должны быть включены в систему контроля версиями:
Добавим локальный репозитарий:
Тест (Опять!)
Запустим тест в облаке. Команда heroku open откроет приложение в вашем браузере.
Bootstrap
Давайте обновим стили из Bootstrap 3.
Удалите style.css и ссылку на него в index.html и login.html.Затем добавьте этот стиль в обоих файлах
Теперь мы имеем полный доступ ко всем вспомогательным классам Bootstrap.
Замените код в файле login.html на:
И измените код в index.html:
Проверьте внесенные вами изменения!
SQLAlchemy
Давайте попробуем Flask-SQLAlchemy для лучшего управления нашей базой данных
Установка SQLAlchemy
Запустите установку Flask-SQLAlchemy:
Создайте файл create_db.py и внесите в него нижеследующий код:
Этот файл будет использован для создания нашей новой базы. Едем дальше, удалим старый (flaskr.db) и schema.sql
Далее добавим в новый файл models.py следующее содержимое, которое генерирует новую схему :
Обновим app.py
Обратите внимание на изменения в конфиге в верхней части, а также на средства, через которые мы теперь имеем доступ и управляем базой данных в каждой функции представления — через с SQLAlchemy вместо встроенного SQL.
Создаем базу данных
Запустим команду для создания и инициализации базы данных:
Обновим index.html
Обновим эту строку:
Тесты
Наконец, обновим наши тесты:
Мы в основном просто обновили setUp() и tearDown() методы.
Запустите тесты, а потом проверьте вручную путем запуска сервера и входа и выхода, добавления новых записей и удаления старых записей.