Примеры скриптов в виджетах

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

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

script_0

Настроим:

  • разворачивающиеся блоки с вопросами;
  • всплывающее предупреждение о выборе только одного ответа на вопрос;
  • модальное окно с результатом теста: пройден или нет.

 

Шаг 1. Создать вопросы

Добавьте вопросы с вариантами ответов для тестирования:

  1. Откройте страницу и перейдите в дизайнер интерфейсов.
  2. На вкладке Контекст создайте переменную типа Категория и задайте следующие параметры:
  • Отображаемое имя* — введите вопрос, который будет отображаться на странице;
  • Имя свойства* — измените автоматически заданное название свойства на question1;
  • Тип* — выберите тип Категория с возможностью выбора нескольких вариантов ответа;
  • Значения — введите варианты ответов на вопрос. Измените код каждого ответа на n1, n2 и n3 и нажмите Создать.
    script_5
  1. Таким же образом создайте несколько вопросов.

Шаг 2. Настроить отображение вопросов

Cделаем так, чтобы по умолчанию все вопросы на странице были свёрнуты, а при нажатии Начать тестирование раскрывался первый вопрос. Для этого:

  1. В дизайнере интерфейсов на вкладке Контекст создайте переменную Развернуть вопрос 1 (showQuestion1) с типом Выбор «да/нет».
  2. Добавьте на поле для моделирования виджет Панель с заголовком.
  3. В открывшемся окне настроек задайте параметры:
  • Заголовок* — введите название панели Вопрос №1;
  • Сворачиваемая — выберите Да;
  • Развернута — укажите созданную ранее переменную Развернуть вопрос 1. С помощью этой переменной блок с вопросом будет разворачиваться при нажатии кнопки, которая добавляется далее.

script4

  1. Нажмите кнопку Сохранить.
  2. Добавьте на поле для моделирования виджет Кнопка.  
  3. В открывшемся окне настроек задайте параметры:
  • Надпись/Подсказка* — введите название кнопки Начать тестирование;
  • Выполняемый скрипт — добавьте скрипт, который будет изменять значение переменной Развернуть вопрос 1 (showQuestion1) на true. Для этого нажмите кнопку Создать, укажите название функции startTest, выберите Сохранить, а затем — Открыть.
    script5

На открывшейся вкладке Скрипты пропишите в созданной функции следующий код:

async function startTest(): Promise<void>{
    Context.data.showQuestion1 = true 
}

  1. Сохраните настройки.
  2. Разместите внутри виджета Панель с заголовком созданное ранее свойство типа Категория с первым вопросом, перетащив его с боковой панели дизайнера. На странице свойство будет отображаться в виде виджета Строка формы.
    script12
  1. Добавьте на поле для моделирования столько панелей с заголовком, сколько у вас создано вопросов. Задайте название для каждой панели и в поле Сворачиваемая выберите Да. В поле Развернута укажите Нет. Поместите свойства с вопросами в панели.
  2. Сохраните и опубликуйте внесённые изменения.

После этого все вопросы на странице будут отображаться в свёрнутом виде, а при нажатии кнопки Начать тестирование первый вопрос будет автоматически раскрываться.

Шаг 3. Настроить отображение предупреждения

Предположим, что в первом вопросе может быть только один вариант ответа. Если пользователь отметил несколько ответов, при попытке перехода к следующему вопросу на форме отобразится виджет Информационный блок с предупреждением. При наведении курсора блок исчезнет.

Для этого выполните следующие действия:

  1. В дизайнере интерфейсов на вкладке Контекст создайте переменную Один ответ (oneAnswer) с типом Выбор «да/нет».
  2. Добавьте на поле для моделирования виджет Информационный блок. В открывшемся окне настроек перейдите на вкладку Системные в поле Видимость выберите опцию Показать по условию. Затем укажите переменную Один ответ. Отображение информационного блока будет зависеть от значения этой переменной.
    script8
  1. Настройте проверку количества выбранных ответов. Для этого:
  • выделите виджет Строка формы, содержащий первый вопрос, и откройте его настройки, нажав значок шестерёнки:
    script12
  • перейдите на вкладку События и добавьте скрипт, который будет проверять количество выбранных ответов и изменять значение переменной Один ответ. Для этого в опции Событие при изменении значения нажмите кнопку Создать, введите название функции checkQuestion1, выберите Сохранить, а затем — Открыть;  
  • на открывшейся вкладке Скрипты укажите код, который будет определять значение переменной Один ответ (oneAnswer):

async function checkQuestion1(): Promise<void> {
    if (Context.data. question1 && Context.data. question1.length > 1) {
        Context.data.oneAnswer = true
    } else {
        Context.data.oneAnswer = false;
    }
}

  1. В настройках виджета Информационный блок в поле Событие при наведении курсора добавьте скрипт, который будет изменять значение переменной Один ответ (oneAnswer) на false:

async function closeBlock(): Promise<void> {
    Context.data.oneAnswer = false 
}

  1. В блоке Вопрос №1 добавьте виджет Кнопка, назовите её Следующий вопрос и привяжите скрипт для проверки ответа в первом вопросе. При нажатии на эту кнопку:
  • если ответов больше одного — отобразится информационный блок с заданным в нём текстом, например, Выберите только один вариант;
  • если выбран один ответ — блок первого вопроса закроется, и пользователь перейдёт ко второму вопросу.

Пример скрипта

async function nextQuestion(): Promise<void> {
// Выполняем проверку количества ответов на первый вопрос
    checkQuestion1();
    if (!Context.data.oneAnswer) {
        // Переходим ко второму вопросу
        Context.data.showQuestion1 = false;
        Context.data.showQuestion2 = true;
    }
}    
  1. Сохраните и опубликуйте внесённые изменения.

Шаг 4. Настроить отображение результатов теста

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

Для этого:

  1. В дизайнере интерфейсов на вкладке Контекст создайте две переменные с типом Выбор «да/нет»:
  • Правильно (correct) — хранит результат выполнения теста;
  • Результат (showResult) — отвечает за видимость модального окна с результатом теста.
  1. Добавьте на поле для моделирования виджет Модальное окно.
  2. В настройках виджета в поле Показать окно укажите переменную Результат (showResult), созданную ранее. Отображение модального окна будет зависеть от значения этой переменной.
    script11
  1. В модальном окне добавьте два виджета Информационный блок. Один отобразится при успешном прохождении теста, а второй — в случае неуспеха.
     
    Настройте их поочерёдно:
  • для успешного результата в настройках одного виджета:
    • на вкладке Основные заполните поля Тип информации — Положительный результат, Заголовок — Тест пройден успешно;
    • на вкладке Системные в поле Видимость выберите Показать по условию и привяжите созданную ранее переменную Правильно (correct);
  • для неуспешного результата в настройках второго виджета:
    • на вкладке Основные заполните поля Тип информации — Ошибка, Заголовок — Тест не пройден;
    • на вкладке Системные в поле Видимость выберите Скрывать по условию и привяжите ту же переменную Правильно (correct).
  1. Чтобы после просмотра результатов теста пользователь мог их скрыть, добавьте внутри модального окна виджет Кнопка. В настройках кнопки укажите её название. В опции Тип действия выберите Скрипт и добавьте код:

async function closeResult(): Promise<void> {
    Context.data.showResult = false;
}

  1. Чтобы отобразить настроенное модальное окно с результатами теста на странице, добавьте на поле для моделирования ещё один виджет Кнопка.
     
    В настройках кнопки в поле Выполняемый скрипт добавьте код, который будет определять правильность выбранных ответов и показывать один из блоков:
  • Тест пройден успешно — если выбраны правильные ответы;
  • Тест не пройден — если выбран неправильный ответ.

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

async function resultTest(): Promise<void> {
    if (!Context.data.question1 || Context.data.question1.length > 1) {
        // На Вопрос 1 должен быть один ответ
        Context.data.oneAnswer = true;
        Context.data.correct = false;
        return;
    }
 
    // Проверяем вопрос 1
    for (let i of Context.data.question1) {
        if (i.code == "n1") {
            Context.data.correct = true;
        }
        else {
            Context.data.correct = false;
        }
    }
 
    // Показываем результат
    showResult();
}
async function showResult(): Promise<void> {
    Context.data.showResult = true;
}

 
  1. Сохраните и опубликуйте внесённые изменения.
client_server_scripts.html widget_functions.html