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

> [HTML Version](widget-scripts.html)

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

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

(script_0.png)

Настроим:

- разворачивающиеся блоки с вопросами;

- всплывающее предупреждение о выборе только одного ответа на вопрос;

- модальное окно с результатом теста: пройден или нет.



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

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

1. Откройте страницу и перейдите в [дизайнер интерфейсов](360027211631.md). 

2. На вкладке **Контекст** создайте переменную типа [Категория](360009707032.md#category) и задайте следующие параметры: 

- **Отображаемое имя\*** — введите вопрос, который будет отображаться на странице; 

- **Имя свойства\*** — измените автоматически заданное название свойства на `question1`; 

- **Тип\*** — выберите тип **Категория** с возможностью выбора нескольких вариантов ответа; 

- **Значения** — введите варианты ответов на вопрос. Измените код каждого ответа на `n1`, `n2` и `n3` и нажмите **Создать**.  
(script_5.png)

3. Таким же образом создайте несколько вопросов. 

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

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

1. В [дизайнере интерфейсов](360027211631.md) на вкладке **Контекст** создайте переменную **Развернуть вопрос 1** (`showQuestion1`) с типом [Выбор «да/нет»](360009707032.md#yes_no). 

2. Добавьте на поле для моделирования виджет [Панель с заголовком](panel_with_heading.md). 

3. В открывшемся окне настроек задайте параметры: 

- **Заголовок\*** — введите название панели **Вопрос №1**; 

- **Сворачиваемая** — выберите **Да**; 

- **Развернута **— укажите созданную ранее переменную **Развернуть вопрос 1**. С помощью этой переменной блок с вопросом будет разворачиваться при нажатии кнопки, которая добавляется далее. 

(script4.PNG)

4. Нажмите кнопку **Сохранить**. 

5. Добавьте на поле для моделирования виджет [Кнопка](button_widget.md).  

6. В открывшемся окне настроек задайте параметры: 

- **Надпись/Подсказка\*** — введите название кнопки **Начать тестирование**; 

- **Выполняемый скрипт** — добавьте скрипт, который будет изменять значение переменной **Развернуть вопрос 1** (`showQuestion1`) на `true`. Для этого нажмите кнопку **Создать**, укажите название функции** **`startTest`, выберите** Сохранить**, а затем** **—** Открыть**.  
(script5.PNG)

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

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

7. ````
Сохраните настройки. 

8. Разместите внутри виджета **Панель с заголовком** созданное ранее свойство типа **Категория **с первым вопросом, перетащив его с боковой панели дизайнера. На странице свойство будет отображаться в виде виджета [Строка формы](form_line_widget.md).  
(script12.png)

9. Добавьте на поле для моделирования столько панелей с заголовком, сколько у вас создано вопросов. Задайте название для каждой панели и в поле **Сворачиваемая** выберите **Да**. В поле **Развернута** укажите **Нет**. Поместите свойства с вопросами в панели. 

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

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

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

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

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

1. В [дизайнере интерфейсов](360027211631.md) на вкладке **Контекст** создайте переменную **Один ответ** (`oneAnswer`) с типом [Выбор «да/нет»](360009707032.md#yes_no). 

2. Добавьте на поле для моделирования виджет **Информационный блок**. В открывшемся окне настроек перейдите на вкладку **Системные** в поле **Видимость** выберите опцию **Показать по условию**. Затем укажите переменную **Один ответ**. Отображение информационного блока будет зависеть от значения этой переменной.  
(script8.PNG)

3. Настройте проверку количества выбранных ответов. Для этого: 

- выделите виджет **Строка формы**, содержащий первый вопрос, и откройте его настройки, нажав значок шестерёнки:  
(script12.png)

- перейдите на вкладку **События** и добавьте скрипт, который будет проверять количество выбранных ответов и изменять значение переменной **Один ответ**. Для этого в опции **Событие при изменении значения** нажмите кнопку **Создать**, введите название функции `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;  
    \}  
\}

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

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

5. ````
В блоке **Вопрос №1** добавьте виджет **Кнопка**, назовите её **Следующий вопрос** и привяжите скрипт для проверки ответа в первом вопросе. При нажатии на эту кнопку:

- если ответов больше одного — отобразится информационный блок с заданным в нём текстом, например, **Выберите только один вариант**;

- если выбран один ответ — блок первого вопроса закроется, и пользователь перейдёт ко второму вопросу.

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

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

6. ````
Сохраните и опубликуйте внесённые изменения. 

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

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

Для этого: 

1. В [дизайнере интерфейсов](360027211631.md) на вкладке **Контекст** создайте две переменные с типом [Выбор «да/нет»](360009707032.md#yes_no):

- **Правильно** (`correct`) — хранит результат выполнения теста;

- **Результат** (`showResult`) — отвечает за видимость модального окна с результатом теста. 

2. Добавьте на поле для моделирования виджет [Модальное окно](modal_window.md). 

3. В настройках виджета в поле **Показать окно** укажите переменную **Результат** (`showResult`), созданную ранее. Отображение модального окна будет зависеть от значения этой переменной.  
(script11.PNG)

4.  В модальном окне добавьте два виджета [Информационный блок](information_block.md). Один отобразится при успешном прохождении теста, а второй — в случае неуспеха.  
  
Настройте их поочерёдно: 

- для успешного результата в настройках одного виджета:

	- на вкладке **Основные** заполните поля **Тип информации** — **Положительный результат**, **Заголовок** — **Тест пройден успешно**;

	- на вкладке **Системные** в поле **Видимость** выберите **Показать по условию** и привяжите созданную ранее переменную **Правильно** (`correct`);

- для неуспешного результата в настройках второго виджета:

	- на вкладке **Основные** заполните поля **Тип информации** — **Ошибка**, **Заголовок** — **Тест не пройден**;

	- на вкладке **Системные** в поле **Видимость** выберите **Скрывать по условию** и привяжите ту же переменную **Правильно** (`correct`). 

5. Чтобы после просмотра результатов теста пользователь мог их скрыть, добавьте внутри модального окна виджет **Кнопка**. В настройках кнопки укажите её название. В опции **Тип действия** выберите **Скрипт** и добавьте код:

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

6. ````
Чтобы отобразить настроенное модальное окно с результатами теста на странице, добавьте на поле для моделирования ещё один виджет **Кнопка**.  
  
В настройках кнопки в поле **Выполняемый скрипт** добавьте код, который будет определять правильность выбранных ответов и показывать один из блоков:

- **Тест пройден успешно** — если выбраны правильные ответы;

- **Тест не пройден** — если выбран неправильный ответ.

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

````
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;  
\}

````


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