Скрипт теста для сайта

Скрипт теста для сайта

Приветствую вас дорогие друзья! В сегодняшнем выпуске мы рассмотрим тест, написанный на javascript! Совсем недавно я рассказывал как проверить билетик — счастливый или нет, сегодня мы создадим простецкий тест и как всегда в конце статьи будет Demo пример. Итак, давайте сначала разберем структуру нашего теста..

Из чего состоит тест?

Наш тест будет посвящен знанию английских слов, а именно — он будет содержать один вопрос (слово, требующее перевода) и четыре (4) варианта ответа. Для того, чтобы ответить, достаточно будет нажать на желаемый вариант ответа.

Для примера, я составил тест из четырех вопросов, а значит, что должно быть и 4 варианта ответов.. Итого — потребуется: 4 вопроса 4 * 4 = 16 вариантов возможных ответов 4 варианта правильных ответов

Где хранить вышеперечисленные данные?

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

Массив questions В данном массиве содержатся вопросы (в нашем примере — это слова на русском либо на английском языке). Массивы number1 (2,3,4) Четыре данных массива предназначены для хранения вариантов ответа.

Массив answer В этом массиве мы будем хранить правильные варианты ответа, а точнее, индексы массивов с правильным вариантом ответа.

Особенности теста

Первая особенность: тест начинается по нажатию на кнопку — "Приступить к тесту" — после нажатия, данная кнопка исчезает и появляется тест и также кнопка завершения.

Вторая: Имеется кнопка ("Начать сначала"), соответственно, позволяющая начать тест с самого начала.

Третья: По завершению работы теста, появляется всплывающее окно, в котором выводится информация о количестве правильных ответов. Код программы Давайте рассмотрим полный (со стилями и html разметкой) код нашего теста и разберемся подробнее.. Итак, разберем первые четыре переменные: var countQuest — переменная, которая ведет подсчет вопросов — если она меньше количества вопросов в массиве, то увеличиваем её на единицу и продолжаем тест, иначе выводим количество правильных ответов. var plus — данная переменная содержит количество правильных ответов, и увеличивается, когда число, переданное пользователем при клике на вариант ответа, совпадает с числом из массива правильных ответов (answer). var test_start — эта переменная нужна для запуска теста, 0 — не запущен, 1 — запущен.

Функция check — эта единственная функция, которая и отвечает за сам процесс тестирования. Она имеет один (1) параметр — их примеры: check(4) — это означает, что нужно запустить тест check(5) — это означает, что нужно запустить тест заново. Такие значения параметров, как: 0,1,2,3 — означают соответствующие варианты ответа. Думаю, все остальное понятно из кода.

Как его использовать на своем сайте?

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

Демо пример

Вот так вот он выглядит в работе..

На этом пример на javascript подошел к концу, желаю вам удачи и до скорых встреч! Добавлен улучшенный тест 05.01.2017: Как сделать тест на javascript с ответами?

как создать сайт на wordpress, настроить и оптимизировать wordpress

Здравствуйте, давайте создадим тест и опрос на 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.

В сегодняшней статье собираюсь поведать, как сделать тестирование на сайте. Данное тестирование будет аналогично тому, которое имеется на данном сайте, правда, в упрощённом виде. Сразу говорю, если Ваши знания по PHP и MySQL стремятся к нулю, то можете не читать, а лучше поищите в Интернете готовые скрипты тестов. Для тех же, кто обладает необходимым минимумом, а также хочет узнать, как реализуется тестирование на сайте, я и написал данную статью.

Привожу алгоритм, который Вам потребуется уже преобразовать в PHP+MySQL:

  1. Создать таблицу с тестами. Здесь достаточно следующих полей: id (уникальный идентификатор), title (название теста), description (описание теста). Можете также добавить количество прошедших данный тест и средний балл. Здесь всё элементарно, и Вы должны справиться с этим без проблем.
  2. Создать таблицу с вопросами. Здесь нужны следующие поля: id (уникальный идентификатор), test_id (id теста, к которому принадлежит данный вопрос), title (текст вопроса), variant_1 (текст варианта 1), variant_2 (текст варианта 2), correct (правильный ответ). Здесь Вы можете указывать любое количество вариантов, в данном случае, я поставил 2 варианта. В поле "correct" должно стоять число с правильным ответом, например, "1".
  3. При запуске теста необходимо записать в сессию id тех вопросов, на которые будет отвечать пользователь. Для этого извлеките из базы любое количество вопросов (например, 10 случайных вопросов для выбранного теста) и запишите их id в сессию пользователя. Здесь Вам необходимо записать в сессию массив, где ключами будут id вопросов, а в значении по умолчанию пустая строка. А в будущем будет идти тот ответ, который дал пользователь.
  4. Вывести первый вопрос из массива, который не имеет ответа (то есть значение равно пустой строке).
  5. Принять от пользователя ответ и записать в массив с ключом в виде id данного вопроса, ответ, который прислал пользователь.
  6. Сделать редирект обратно на страницу с вопросами.
  7. Вернуться к пункту 4, если ещё остались вопросы без ответа. Если на все вопросы были даны ответы, то проверить массив в сессии на соответствие правильным ответам, и вывести окончательный результат.
Читайте также:  Как заменить звуковую карту на компьютере

Давайте разберём 3-й пункт с кодом:

Теперь давайте разберём 5-й пункт, так как он тоже является, возможно, не совсем понятным:

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

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

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

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

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

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

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

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

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

    Добавьте результат этого скрипка с рисунком??

    Результат здесь: http://myrusakov.ru/tests.html В любой тест заходите вот и будет результат, за вычетом того, что в конце данного скрипта нет разбора вопросов.

    Да. Было бы не плохо, если бы появились пункты со скринами, или допустим со ссылками для переходу, где можно было бы просмотреть итог.

    Ничего себе длииииинющая статья. Это рекорд. Прим. — не в обиду автору а просто хочется чтобы темы пошире раскрывались а не абстрактно

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

    Михаил, разве тут $_SESSION["questions"][$question_id"] не должна быть кавычка перед $question_id ?

    Михаил скажите пожалуйста как мне вытащить все вопросы по определенной теме допустим где test_id=3

    Уважаемый Андрей,id каждого вопроса теста не должны повторяться. Можно сделать категорию,занести в неё нужные вам тесты,задать ей id,например,3 и при помощи запроса вытащить все данные из неё.

    Уважаемый Александр Альт если Вам не сложно помогите мне пожалуйста я php знаю на среднем уровне до темы регулярные выражения (учусь по курсу Михаила)но мне срочно нужно сделать тестирование поможете сопровождая меня советами?

    Буду стараться Вот смотрите,у вас есть айди теста: — 3 в таблице с вопросами у каждого вопроса из этого теста,должен стоять идентификатор 3 в колонке test_id У Михаила разобран вывод по одному вопросу при помощи массива и так по действиям,что,в принципе и актуально для теста. Cуть примерно такая. Подключаетесь к базе данных при помощи php. Думаю у Михаила этот вопрос разобран в курсах,так что вдаваться в подробности не буду. После этого создаёте запрос к таблице и выводите данные из неё при помощи массива: $row = mysql_fetch_array(mysql_query("SELECT * FROM таблица WHERE test_id=`3`",$имя переменной,где задан коннект к базе данных); потом выводите результат при помощи команды echo, включив нужные вам данные в вывод. echo $row[‘title’]; Выведет название вопроса) Ну,можно вывести название,далее варианты ответов и т.д. Это как обычный вывод массива

    Читайте также:  Указатели и динамические массивы

    все понял кроме этого момента Вот смотрите,у вас есть айди теста: — 3 в таблице с вопросами у каждого вопроса из этого теста,должен стоять идентификатор 3 в колонке test_id на данный момент я создал отдельную базу kontrol и в ней две таблицы testi с полями id и title(тема тестов) и таблицу vopros с полями id id_test title_vopros(Текст вопроса) variant_1 variant_2 variant_3 variant_4 и поле correct это чтобы Вы видели ситуацию изнутри теперь вопрос как подставить эти данные в форму (тоесть заголовок варианты и т.д) обе таблицы я заполнил по одной записи в нужных полях

    Ну вот. Вытаскиваете этим запросом: $row = mysqli_fetch_array(mysqli_query("SELECT * FROM таблица WHERE test_id=`3`",$имя переменной,где задан коннект к базе данных); все данные из таблицы,у которых параметр test_id = 3 mysqli_fetch_array — этим вы добавили все данные из всех колонок,test_id которых равен 3,в массив =) Ну вот,а теперь выводите,создавая внешний вид теста например:echo $row[‘title_vopros’]; — текст вопроса. Следующей строчкой: echo $row[‘variant_1’]; — выведет первый вариант ответа и так далее,формируя тело отображения теста Про привязку к форме отпишу чуть позже.

    на данный момент я вывел из базы тему теста вопрос теста и варианты ответа вот файл testing.php а вот файл select_testing.php

    Здравствуйте Андрей. Пустое поле в таблице не как не повлияет на работу в целом. Чтобы выводился следующий вопрос из таблицы читайте внимательно пункты 2-7 и делайте по аналогии.

    Здравствуйте а можно как то обойтись без сессий? я их еще не изучал а тупо копировать я не хочу так как потом сам же не разберусь в коде в случае чего

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

    Скажите как сделать так чтобы при нажатии следующий вопрос выводился следуший вопрос? если можно пример пожалуйста

    Лучше реализовать одной кнопкой "Ответ" и после ее нажатия, пользователю автоматически подается следующий вопрос. Реализовать можно множеством способов, зависит от того, как у Вас работает система, можно AJAX’ом допустим.

    нет аякс не использую можно как то по другому ? я слышал get запросом как то можно\подскажите код

    пример из двух файлов, форма отправки находится в файле form.php, а обработчик в файле add.php. Файлы Вы можете конечно называть как вам угодно, лишь придерживаясь правильности именования файлов и правильно указывайте путь к обработчику. Создайте form.php и добавьте следующий код: Затем, создайте add.php и в него добавьте следующее: Затем, запустите form.php и увидите результат работы передачи данных методом GET.

    у меня все получилось но все вопросы выводятся на одной странице как это исправить?

    Ссылка на основную публикацию
    Сканер штрих кода плей маркет
    QR код – это двумерный штрих код. Он выглядит как картинка с узором из квадратных точек, и может распознаваться камерой...
    Сервер не найден из за ошибки dns
    Столкнуться с неполадками интернет-соединения неприятно, но порой этого не избежать. Один из распространенных сбоев происходит, когда не удается найти DNS...
    Сервер приложений что это
    Сервер приложений — сервер, предназначенный для выполнения прикладных процессов. Сервер приложений: взаимодействует с клиентами, получая задания; и взаимодействует с базами...
    Сканеры графические планшеты цифровые фотокамеры это устройства
    Содержание Сканер - устройство, которое анализируя какой-либо объект (обычно изображение, текст), создает цифровую копию изображения объекта. В зависимости от способа...
    Adblock detector