Вы используете старую версию браузера. Из-за этого увидеть самое интересное на сайте не получится. Чтобы всё работало, как надо, лучше открыть страницу в свежей версии Google Chrome, Safari, Mozilla Firefox, Microsoft Edge или Яндекс.Браузера.

Использование JavaScript в QuizMaker

JavaScript – это язык программирования, созданный для интернета. Скрипты (программы) на этом языке выполняются на стороне “клиента” в веб-браузере. Примеры JavaScript: анимация на веб-странице, часы в углу сайта или всплывающее сообщение.

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

iSpring QuizMaker позволяет выполнить простой скрипт по завершению теста. При обработке и выводе сообщения могут быть использованы имя пользователя и другие данные, такие как процент правильных ответов, время прохождения, и т.д.

Ниже показано всплывающее окно, которое показывает количество набранных баллов с помощью JavaScript:
Alert JavaScript message over the last slide of iSpring Quiz.

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

Как выполнить JavaScript по окончанию теста?

  1. Откройте существующий тест, или создайте новый тест в QuizMaker.

  2. Выберите Свойства на панели инструментов QuizMaker.

  3. Перейдите на вкладку Результаты на левой панели окна Свойства теста.

  4. Включите опцию Выполнить JavaScript и нажмите кнопку Настроить ...

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

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

Написание сценария

Окно редактирования JavaScript покажется после нажатия на кнопку Настроить:

Это довольно простой редактор JavaScript кода, в котором отсутствует какой-либо отладчик, автоподставление и многое другое. Если ваш скрипт содержит ошибку, он просто ничего не сделает. Мы рекомендуем использовать программу Notepad++ для более удобного редактирования кода, а также консоль браузера для отладки.

Вы можете использовать следующие переменные:

  • Проходной балл (% PASSING_SCORE%)

  • Количество набранных баллов (% AWARDED_SCORE% )

  • Процент прохождения (% PASSING_PERCENT%)

  • Набранный процент (% AWARDED_PERCENT%)

  • Название теста (% QUIZ_TITLE%)

  • Статус прохождения теста (% QUIZ_STATUS%)

  • Продолжительность (% QUIZ_DURATION%)

Помимо этого, вы можете использовать пользовательские переменные, такие как имя %USER_NAME%, электронная почта %USER_EMAL%, а также любые другие используемые переменные.

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

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

  • Это же окно ( "_self ") – мы рекомендуем использовать эту опцию

  • Новое окно браузера ("_blank ")

  • Родительское окно ("_parent ")

  • Окно на уровень выше ("_top ")

Вывод простого сообщения

Для начала давайте выведем простое alert-сообщение с помощью JavaScript, которое будет использовать некоторые переменные. Мы будем использовать команду \n для перевода строк в сообщениях.

  1. На основной панели нажмите Свойства →Основные. Включите опцию Запрашивать информацию о пользователе, далее нажмите Настроить.Ask for quiz taker information and click Customize.

  2. Убедитесь, что USER_NAME является обязательным полем

  3. Пройдите в Свойства → Результаты → Выполнить JavaScript и нажмите кнопку Настроить.

  4. Выделите следующий код и скопируйте в буфер:

alert( "%USER_NAME%, вы прошли тест \ nи набрали % AWARDED_SCORE% баллов.»)

  1. Вставьте код из буфера обмена в окно редактирования скрипта и нажмите Сохранить. alert("%USER_NAME%, you passed the test!\nYou awarded %AWARDED_SCORE% points.")

  2. Опубликуйте тест и откройте его в вашем интернет-браузере.

Имя, которое вводит учащийся будет храниться в переменной %USER_NAME%
Enter Your Details: Name

После успешного завершения теста выведется следующее сообщение:

This page says: Michael, you passed the test! You awarded 30 points.

Дополнительная обработка

Для того, чтобы вывести оценку от одного до пяти относительно процента набранных баллов, необходимо добавить логику. Мы будем использовать пару логических операторов if / else для решения этой задачи.

Возьмем следующую таблицу соответствия:

Процент

Оценка

90  100

5

80 - 89

4

70 - 79

3

60 - 69

2

0 - 60

1

А представим её в JavaScript-коде:

if (%AWARDED_PERCENT% < 60 ) {

  alert(“Ваша оценка 1”);

} else {

  if (%AWARDED_PERCENT% <= 70 ) {

    alert(“Ваша оценка 2”);

  } else {

    if (%AWARDED_PERCENT% <= 80) {

      alert(“Ваша оценка 3”);

    } else {

      if (%AWARDED_PERCENT% <= 90) {

        alert(“Ваша оценка 4”);

      } else{

        alert(“Ваша оценка 5!”);

      }

    }

  }

}

Выполнение данного кода выведет сообщение вида:

Ваша оценка 5!

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

Вы можете поделиться своими JavaScript-примерами с нами. Лучшие примеры будут размещены в нашем GitHub!

Важно

  • Не используйте опции публикации Desktop (Flash) и EXE. Мы рекомендуем Mobile (HTML5) или комбинированный режим.

  • Убедитесь, что JavaScript включен в настройках безопасности вашего Интернет браузера. Инструкция, как включить JS для каждого браузера: http://enable-javascript.com/

  • Тест необходимо опубликовать, потому что в режиме Просмотра JavaScript не выполняется. Если вы запустили QuizMaker в iSpring Suite, нажмите кнопку основного меню (в верхнем левом углу), и выберите Опубликовать.

  • Отображение всплывающих окон с сообщениями может по разному отображаться на разных мобильных устройствах.