работа с radio-button
- Город: Харьков
Отправлено 26 марта 2012 — 10:33
есть два радио баттона, как проверить, что если 1 баттон выбран, то 2 становиться «невыбранным».
Мне кажется самый простой способ:
Command — Target — Value
——————————————
verifyValue — name=radiobutton1 — on
verifyValue — name=radiobutton2 — off
А вообще ganzalik228, если правой кнопкой кликнуть на элементе — развернётся список «Show All Available Commands». Там можно найти много полезного.
— Как называется человек, который любит смотреть на страдания других?
— Программист.
У тестировщика всегда чётное количество синяков: если он наступил на грабли — обязан воспроизвести ошибку.
(bash.org)
Тестирование пользовательского интерфейса
Тестирование пользовательского интерфейса. Графический интерфейс пользователя (Graphical user interface, GUI) –разновидность пользовательского интерфейса, в котором элементы интерфейса (меню, кнопки, значки, списки и т. п.), представленные пользователю на дисплее, исполнены в виде графических изображений.
Проверяется в целом общий вид приложения и в отдельности формы, расположенные на странице.
Общие проверки:
- Вид элементов при уменьшении окна браузера + появление скрола
- Правильность написания текста + текст должен быть выровнен
- Правильность перемещения фокуса в окне (Tab / Tab+Shift)
- Выбранные элементы выделяются
- Неизменяемые поля выглядят одинаково и отличаются от редактируемых
- Желательно не использовать двойной клик
- Проверка наличия нужных нотификейшенов
- Унификация дизайна (цвет, шрифт, размер)
- При необходимости должны быть тултипы
- Изменение вида элемента при ховере на него
- Если формы дублируются, то должны быть одинаковые названия
Дополнительные проверки для веб-форм
Текстовое поле
- Проверить выделение текста с помощью Ctrl+A / Shift+стрелка
- Проверка ввода длинного текста
Радио-баттон
- Расположение возле соответствующего текста
- Переключение кнопок с помощью клавиатуры
Чек-боксы
- Установить чекбокс кликом и пробелом
- Расположение возле соответствующего текста
Выпадающие списки
- Должна быть функция прокрутки
- Должны располагаться по алфавиту (если текст), по возрастанию (если числовые значения)
- Если элемент был выбран, то должен находиться сверху либо обозначен, что он выбран
Поп-ап
- Расположение по центру окна
GUI (Graphical User Interface) Testing — тестирование графического пользовательского интерфейса. Графический пользовательский интерфейс — это интерфейс, в котором пользователь взаимодействует с компьютером, используя графические изображения .
Основные элементы графического интерфейса:
- окно (окно браузера, диалоговое окно, модальное окно, плавающее окно)
- меню (главное, всплывающее, контекстное, системное)
- виджеты/элементы управления/контролы (аккордеон, кнопка, радио-кнопка, чек-бокс, значок (иконка), список, панель инструментов, дерево, полоса прокрутки, ползунок, строка состояния, тултип (подсказка) и др.)
- вкладка
- элементы взаимодействия: курсор мыши, текстовый курсор, поинтер (“ладошка”), курсор перетаскивания и др.
Основные моменты при проверке GUI:
- расположение, размер, цвет, ширина, длина элементов; возможность ввода букв или цифр
- реализуется ли функционал приложения с помощью графических элементов
- размещение всех сообщений об ошибках, уведомленией (а также шрифт, цвет, размер, расположение и орфография текста)
- читабелен ли использованный шрифт
- переходит ли курсор из текстового в поинтер при наведении на активные элементы, выделяются ли выбранные элементы
- выравнивание текста и форм
- качество изображений
- проверить расположение и отображение всех элементов при различных разрешениях экрана, а также при изменении размера окна браузера (проверить, появляется ли скролл)
- проверить текст на орфографические, пунктуационные ошибки
- появляются ли тултипы (если есть необходимость)
- унификация дизайна (цвета, шрифты, текст сообщений, названия кнопок и т.д.)
Наиболее распространенные баги:
- курсор не переходит в поинтер при наведении на активный элемент
- орфографические и грамматические ошибки
- не ровное расположение полей ввода в формах, самих форм
- неправильное отображение элементов при смене размера окна браузера и масштаба страницы
- изменение размера текста при смене языка
- неровное расположение форм
- разные шрифты
- выбранные элементы не отличаются от не выбранных
Проверка pixel to pixel — проверка точного (пиксель в пикcель) соответствия сверстанного HTML — шаблона оригиналу (PSD-макету). Другими словами, если наложить “картинку” сверстанного HTML-шаблона на картинку оригинального PSD-макета, то обе картинки должны совпадать. Совместиться должны все элементы картинок — текст, изображения, графические элементы.
Все о тестировании и качестве ПО
- Мобильное тестирование
- Формальное тестирование
- Валидация в тестировании
- Чек-лист локализации
- Собеседование Junior QA
I believe in QA, все о тестировании
| Пн | Вт | Ср | Чт | Пт | Сб | Вс |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 |
Больше о тестировании и качестве ПО
- Собеседование Middle QA
- Тестирование локализации
- Мобильное тестирование
- Расширенное тестирование
- Методы верификации программного обеспечения
- Валидация и верификация
Radio buttons, checkboxes и другие виды селекторов
Выбери меня! Выбери меня! Нет, выбери меня! В сегодняшней статье мы рассмотрим селекторы и чем они различаются. В отличие от большинства других моих статей, основное внимание будет уделено двум компонентам (радиокнопкам (radio buttons) и флажкам (checkboxes), а также их сравнению с парой других селекторов. Читайте также: Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)
1. Что такое селекторы
Селектор (selector) – это поле ввода, в котором пользователь должен выбрать один (или несколько) параметров, в отличие от текстового поля, в котором пользователь имеет полную свободу действий. Селекторы, как прически Lady Gaga, бывают разных форм и стилей. Выпадающие списки, флажки, переключатели, ползунки и т.д. – это разные типы селекторов, но они не похожи друг на друга. Основное функциональное различие между этими типами селекторов состоит в том, сколько вариантов пользователь может выбрать: один или несколько. В идеальном мире, где нет голода, браконьерства, парниковых газов или преступлений, я бы ходатайствовала об изменении названия радиокнопок на «одиночные селекторы», а флажков на «мультиселекторы». Я думаю, что подобные названия намного лучше описывают их функциональность, но, увы, эти устаревшие названия слишком укоренились, и, вероятно, останутся с нами навсегда.
2. Анатомия флажков и радиокнопок
Хотя, в этой статье мы рассмотрим различные типы селекторов, мы сосредоточимся на радиокнопках (radio buttons) и флажках (checkboxes). Ниже их анатомия. Анатомия радиокнопок и флажков Примечание: Иногда люди говорят «radio button»/ «checkbox», когда имеют ввиду метку и селектор вместе, в то время, как в других случаях они подразумевают только селектор. Я предпочитаю последний вариант.
3. В чем разница между радиокнопками и флажками
- 1
- 3
- Неограниченное кол-во
- 0
2) Какова форма селектора радиокнопки?
- Квадрат
- Круг
- Шестиугольник
- Треугольник
3) Если вы хотите создать интерфейс, в котором пользователь сможет выбрать несколько начинок для мороженого, вы должны использовать:
4) Если вы хотите создать интерфейс, в котором пользователь может выбрать тип банковского счета, который он может открыть, вы должны использовать:
5) Если бы вы хотели создать селектор «Подписаться на рассылку», какой тип вы бы использовали?
6) Выберите на картинке ниже вариант с радиокнопкой.
ОТВЕТЫ:
1): 3. Неограниченное кол-во
4): 1. Радиокнопки
Вы справились! (Надеюсь).
4. Распространенные стили селекторов
Ниже представлен ряд распространенных стилей флажков и радиокнопок, с которыми вы можете столкнуться в Интернете.
Стандартный стиль (радиокнопки / флажки)
Самый стандартный стиль флажков и радиокнопок – это кнопки с «галочками» или заполненные кружки. Я предпочитаю кнопки с галочкой, если вы не имеете дело с образовательными тестами (см. ниже).
Стандартный стиль с галочками
Стандартный стиль без галочек
Стиль кнопки в тестах (радиокнопки / флажки)
Когда пользователь отвечает на вопросы теста или викторины, мы должны убедиться в двух вещах: 1) что он может четко видеть, какие ответы выбирает, 2) что он не запутается, когда получит фидбек на свой ответ.
Если вы посмотрите на приведенный ниже пример, то увидите, что «галочка» может сбить с толку – кажется, что эти ответы верны, хотя еще не проверены.
Селекторы викторины, показывающие, что наличие галочки вызывает путаницу
Основной стиль с изображением (радиокнопки/ флажки)
Хотя этот стиль селектора может дать пользователю лучшее представление о том, что он выбирает, я редко использую его, поскольку, все равно изображение всегда будет слишком маленьким, чтобы его можно было разглядеть.
Радиокнопки и флажки с изображениями. Изображения: (с unSplash): Гамбургер от @amir_v_ali | Чикенбургер от @amir_v_ali | Веджибургер от @swimstaralex | Сыр от @swimstaralex | Помидоры от @lmablankers | Латук от @producteurslocaux
Изображения в стиле сетки (одно / несколько)
Я предпочитаю этот стиль изображений базовому, поскольку вы можете сделать изображения намного больше, и они лучше смотрятся.
Селекторы с сеткой изоражений. Изображения (с unSplash): Гамбургер от @amir_v_ali | Чикенбургер от @amir_v_ali | Веджибургер от @swimstaralex | Сыр от @swimstaralex | Помидоры от @lmablankers | Латук от @producteurslocaux
Впервые я узнал об этом стиле в тестах Buzzfeed. Они просто показывают изображение без текста. Если вы используете этот макет, пожалуйста, убедитесь, что у вас есть альтернативный текст для пользователей, использующих программу чтения с экрана или на случай плохого подключение к Интернету.
Многоуровневые флажки
Многоуровневые флажки необходимы, если элементы нужно разделить на группы. Также обратите внимание, что, если выбраны лишь несколько дочерних элементов, родительская категория выбирается только частично.
Это один из наиболее сложных элементов интерфейса, потому что верхний элемент (родительский) действует одновременно, как селектор и, как аккордеон. А что, если вы нажмете на метку, она выберет селектор или откроет / закроет аккордеон? Я не смогла найти определенное исследование того, какой вариант лучше, поскольку это необычный паттерн, но в прошлом я делала метку не селектором, а частью аккордеона. Пишите в комментариях, если у вас есть предложения, как решить эту дилемму.
Принудительный выбор
Иногда вам нужно разрешить пользователям выбирать только определенное количество элементов. Если пользователь выберет на одно значение больше разрешенного количества, самый первый выбранный вариант будет заменен («вытеснен») последним выбранным вариантом.
Флажки с принудительным выбором
Стиль кнопки (одиночный / множественный выбор)
Этот стиль позволяет вам складывать много разных элементов в стек. Это означает, что вы можете сэкономить место и иметь больше вариантов ответа. Поскольку этот паттерн не является распространенным, я предлагаю вам сообщить пользователю, сколько вариантов он может выбрать. Хотя нет причин не использовать его для одиночных селекторов, я никогда не встречала такой вариант.
Селектор в стиле кнопки
Этот стиль очень распространен, когда пользователя просят выбрать несколько тегов контента (хотя он может не знать об этом). В приведенном ниже примере Apple Music просит пользователей выбрать свои любимые жанры, которые, в свою очередь, порекомендуют песни и исполнителей в зависимости от выбора пользователя.
Переключатель (одиночный выбор)
Переключатель (toggle) чаще всего используется для настроек и позволяет пользователю выбирать между вариантами да / нет.
На мобильном устройстве сам переключатель обычно находится в крайнем правом положении, а метка – в крайнем левом. Это сделано для того, чтобы большому пальцу правой руки было легче менять параметры.
5. Состояния
Флажки и радиокнопки должны изменять свое состояние / внешний вид, чтобы пользователи знали, что они были выбраны. Нам нужно добавить эти маленькие визуальные подсказки, чтобы подтолкнуть пользователя в правильном направлении, используя паттерны, которые они уже знают и понимают.
По умолчанию / активно (Default/active)
Это начальное состояние селекторов. Это состояние указывает пользователю, что он может кликать по пунктам в вопросах.
Пример радиокнопок и флажков в их стандартном / активном состоянии
Неактивно (Inactive)
Когда установлено неактивное состояние, пользователь не сможет взаимодействовать с вариантами ответа. Пользователь редко сталкивается с этим состоянием, если это не указано в правилах продукта.
Пример радиокнопок и флажков в их неактивном состоянии
Наведение курсора (Hover)
Как и кнопки, селекторы должны указывать пользователям, что они интерактивны или кликабельны. Обычно это делается с помощью подсветки фона элемента при наведении курсора. Это также указывает, какая область элементов является кликабельной. Если вы уберете курсор, он должен вернуться в исходное состояние.
Пример радиокнопок и флажков в состоянии наведения курсора
Совет для нубов: у сенсорных устройств нет состояния наведения курсора
Фокус / выделение (Focus/highlighted)
Фокус или выделенное состояние обычно обозначается синим ореолом вокруг активируемого кликом элемента. Вы можете убедиться в этом сами, щелкнув по интерфейсу. Пользователь редко сталкивается с этим состоянием, если только не нажмет «Enter», чтобы выбрать элемент.
Пример радиокнопок и флажков в их состоянии фокуса / выделения
Нажато (Pressed)
Это состояние, когда пользователь удерживает свою мышь / палец, и элемент указывает пользователю, что на него нажимают.
Пример радиокнопок и флажков в их нажатом состоянии
Выбрано (Selected)
После того, как пользователь щелкнул по элементу, интерфейс должен сообщить ему об этом. Как упоминалось ранее, радиокнопки могут иметь только один выбранный элемент, а флажки могут иметь несколько, в зависимости от бизнес-правил.
Пример радиокнопок и флажков в их выбранном состоянии
Ошибка обратной связи (Fail feedback)
При свободном вводе текста пользователь может сделать опечатку и т. д. Однако, поскольку параметры в селекторе предопределены, должен быть только один тип обратной связи при ошибке: «incomplete», который пользователь получит только, если нажмет кнопку «отправить» до того, как закончат заполнение формы. Для флажков это будет необходимо, только если вопрос заставит их выбрать один или несколько элементов.
Пример радиокнопок и флажков в состоянии ошибки
6. Правила для текста метки
Существует только одно жесткое правило для меток селектора: быть последовательным.
- Убедитесь, что регистр на каждой метке селектора одинаков (регистр предложений, регистр заголовков и т. д.)
- Убедитесь, что все элементы либо заканчиваются точкой, либо нет.
- Постарайтесь убедиться, что все элементы являются либо предложением, либо фразой, либо словом. Старайтесь избегать, чтобы часть вариантов была предложениями, а другая – отдельными словами. Использование комбинации усложняет решение вопроса о том, какой регистр и пунктуацию использовать.
Пример меток элементов
7. Когда вы должны их использовать
Когда следует использовать радиокнопки или флажки? Это целиком зависит от того, какой вопрос вы задаете. Если вы хотите, чтобы пользователи выбрали несколько вариантов ответа, используйте флажки. Если хотите, чтобы пользователи выбрали только один вариант, используйте радиокнопки (или другой тип селектора).
Когда использовать радиокнопки
У меня есть четыре правила, когда использовать радиокнопки. Вот они:
- Когда вы хотите, чтобы пользователь выбрал только один элемент
Если вы хотите, чтобы пользователь выбрал более одного элемента, лучше использовать флажки. - Если у вас меньше шести вариантов ответа
В зависимости от ваших правил дизайна, если есть более пяти или шести элементов, используйте раскрывающийся список. Да, да, я знаю, что они неуклюжие, но они экономят много пространства вашего дизайна.
Сравнение раскрывающегося списка и радиокнопок
При этом, если пространство не является проблемой, возможно, стоит использовать радиокнопки – особенно, если вы проектируете для мобильных устройств. Я видела, что это идеально подходит для служб доставки еды.
Если хотите узнать больше о раскрывающихся списках, прочитайте мою предыдущую статью.
- Вы хотите принудить выбрать один вариант ответа
Когда вы выбираете элемент в списке радиокнопок, вы не можете отменить его выбор. Вы можете выбрать что-то еще и изменить выбор, но вы не можете отменить ответ на вопрос, если уже выбрали его.
- Если у вопроса есть только два варианта: да / нет
Если ваш вопрос «Хотите получать уведомления?», «Воспроизвести фоновую музыку?» и т. д., то лучше используйте переключатель. Они занимают гораздо меньше места, являются более понятными, и поскольку это относительно новый тип селектора, они модные.
Сравнение радиокнопок и переключателя
Дополнение к статье после ее публикации:
5. Если хотите, чтобы пользователи нажимали «Сохранить» для применения выбранного варианта
Если вы находитесь на странице настроек или в месте, где вы хотите, чтобы пользователь мог экспериментировать с параметрами, прежде чем он нажмет большую зеленую кнопку «Сохранить»– лучше использовать радиокнопки (или флажки). Однако, если вы хотите, чтобы ваши настройки были применены немедленно (включение / выключение Wi-Fi), лучше используйте переключатель.
Этот вариант предложил Thomas Veit_, спасибо ему:)
_6. Если метки варианта ответа короткие, рассмотрите возможность использования переключателя с множественным выбором
Вы очень редко будете встречать этот вариант. Переключатели со множественным выбором соединяют в себе лучшее от радиокнопок и переключателей. Компактные, аккуратные и удобные. Я бы рекомендовал использовать их только в том случае, если метки ответов короткие – в противном случае это может стать неудобным на мобильных устройствах.
Пример переключателя с множественным выбором
Когда использовать флажки
У меня есть два правила, когда использовать флажки, и вот они:
- Если вы хотите, чтобы пользователь мог выбрать несколько вариантов или вообще не выбирать
Если вы хотите, чтобы ваш пользователь мог добавить несколько начинок в свою пиццу, этот вариант для вас. Пользователь может выбрать все, несколько или ни один из флажков.
Тест: почему пункт «Я прочитал условия» всегда в виде флажка, а не радиокнопки? Ведь имеет смысл использовать радиокнопку, так как это лучший тип селектора для вопросов «да / нет»?
Ответ: потому что вы можете отменить его выбор. В отличие от радиокнопок только с одним элементом, где вы не можете отменить его. Если вы нажмете на него, он будет выбран НАВСЕГДА.
8. Проверка доступности
Вы сделали это! Вы завершили проектирование своих селекторов, и пришло время отправить их команде разработчиков. Но погодите! Вы проверили их доступность?
- Соответствует ли ваш селектор стандартам цветового контраста WCAG AAA? Вместо этого некоторые дизайнеры используют стандарты АА. Моя любимая программа проверки контрастности – WebAIM.
- Варианты ответа / элементы больше, чем 44px для сенсорных экранов? (Иногда используют 36px.)
- Расстояние между каждым вариантом ответа / элементом больше 8px?
- Всегда ли видна метка / вопрос?
- Есть ли в соответствующих полях полезный текст обратной связи? (Например, «Пожалуйста, заполните этот вопрос»)
9. Мысли в заключение
После этой статьи я собираюсь отойти от темы паттернов интерфейса форм и перейти к другим типам паттернов интерфейса. НО, если вы хотите, чтобы я рассмотрела другие типы полей формы, сообщите об этом в комментариях.
Берегите себя, ибо сейчас мир совсем обезумел.
Флажки, переключатели
Аннотация: Одним из классических вариантов создания интерактивности в приложениях являются разнообразные тесты. В лекции на примере рассматривается алгоритм создания тестового приложения.
Флажки, переключатели
Материалы к лекции Вы можете скачать здесь.
Типичным примером интерактивных приложений образовательной направленности являются тесты. Тесты используются и как инструмент проверки знаний (при ответе пользователя на вопрос, идет подсчет количества правильных ответов и по окончании тестирования на экран выдается сообщение – итог тестирования в баллах, анализ ответов на вопросы и др.) и в целях обучения (при неправильном ответе пользователя на вопрос, выводится правильный ответ ).
Для создания тестов необходимо воспользоваться готовыми компонентами («Окно» — «Компоненты»), такими как RadioButton (радиокнопка или переключатель ) и CheckBox (флажок), и которые вставляются на сцену путем перетаскивания из раскрывающегося списка » User Interface «.
- Компонент RadioButton позволяет поставить пользователя перед выбором единственного варианта из нескольких. Этот компонент должен использоваться в группе, где существует не менее двух экземпляров RadioButton. В любое время можно выбрать только одного члена данной группы.
- Использование компонентов CheckBox позволяет выбирать (устанавливать флажки) на нескольких компонентах.
На панели свойств или в Инспекторе компонентов (вызов через режим меню «Окно») можно задать параметры компонента для каждого экземпляра (переключателя или флажка). Каждый из этих параметров имеет соответствующее свойство ActionScript с тем же именем.
Разбираться с процессом создания тестов будем на практике.
Создадим на сцене статическое текстовое поле (в нем отобразим вопрос), три компонента CheckBox (с их помощью будем выбирать правильный ответ ), кнопку (для фиксации ответа. Кнопку можно также выбрать из раскрывающегося списка » User Interface «. В дальнейшем нам может понадобиться и кнопка «Вперед» для перехода к следующему вопросу теста) и динамическое поле (для вывода информации о том, правильно ли был дан ответ на вопрос). Каждому созданному объекту задаем имя в поле «Назначить имя экземпляру» на панели свойств (флажки – «r1», «r2», «r3», кнопка Ок – имя «Ok», динамическое текстовое поле – «t»).
Рис. 20.1. Пример практической работы «Тест»
По очереди выделяем каждый из флажков, на панели свойств во вкладке «Параметры компонента» задаем свойства выделенного флажка:
- Label – надпись (вводим текст варианта ответа)
- Label Placement – положение надписи относительно флажка (стандартно – справа)
- – выбор (будет ли выбран компонент (стоять флажок) при запуске ролика), не выбираем.
В качестве надписи к компоненту «флажок» может быть текст, стоящий в статическом текстовом поле рядом с флажком. Но при этом поле Label в «Параметрах компонента» должно быть пустым.
Выделяем первый ключевой кадр , открываем окно «Действия» и создаем скрипт :
stop(); Ok.addEventListener (MouseEvent.CLICK, fl); function fl (event:MouseEvent):void < if (r1.selected == true) < t.text = "Yes"; >else < t.text = "No"; >>
В результате функция -обработчик события » Клик мыши» для кнопки but выполнит стоящие в теле функции действия:
- В качестве условного выражения в команде if проверяется поставлена ли «галочка» в компоненте: проверяется свойство компонента r1 «выбранность» (selected) – равно ли («==») это свойство значению «true» (истинно)?
- В примере в качестве первого действия стоит команда t.text = «Yes» (свойству text динамического текстового поля t присваивается значение Yes), то есть в текстовое поле будет выведена фраза Yes.
- В качестве второго действия стоит команда t.text = «No» (свойству text динамического текстового поля t присваивается значение No), то есть в текстовое поле будет выведена фраза No.
Продолжим работу. В статическом текстовом поле введем текст вопроса. В тексте надписи флажков (или в статических текстовых полях рядом с флажками) введем варианты ответов на вопрос. Предположим, что правильный ответ соответствует выбору второго флажка. На первом кадре временной шкалы должен быть скрипт :
stop(); Ok.addEventListener (MouseEvent.CLICK, fl); function fl (event:MouseEvent):void < if ((r1.selected == false) && (r2.selected == true) && (r3.selected == false)) < t.text = "Верно"; >else < t.text = "Неверно"; >>
Условное выражение в команде if сложное, состоящее из трех простых, соединенных логическими операциями «&&» (логическими союзами «и»). В результате этой операции все условное выражение будет истинно, если будет истины и первое, и второе, и третье простые условные выражения.
Вам также могут понадобятся логические операции «||» («или») и «!» («не»). В результате выполнения логической операции «||» («или») все логическое выражение будет истинно, если будет истинно хотя бы одно простое логическое выражение . Логическая операция «!» («не») инвертирует (меняет на противоположное) результат логического выражения.
- Для организации перехода к следующему вопросу нам понадобится кнопка «Вперед». Дадим ей имя Vpered. В скрипт будет необходимо внести команды для организации перехода к следующему кадру: — свойству «выбранность» (selected) компонентов r1, r2, r3– присвоить значение «false» (при переходе к следующему вопросу флажки не должны стоять ни в одном компоненте)
— очистить текстовое поле: t.text = «»
— перейти к следующему кадру: nextFrame()
Vpered.addEventListener(MouseEvent.CLICK, f2); function f2(event:MouseEvent):void
Для создания второго вопроса теста на временной шкале необходимо создать второй ключевой кадр слоя «Слой 1″ (на слое » Actions » располагается скрипт ). На втором кадре «Слоя 1» поменяем текст вопроса и варианты ответа на него.
Аналогичные действия проделайте для создания третьего, четвертого и т.д. вопросов теста. В слое » Actions » необходимо вставить столько кадров, сколько вопросов будет в тесте. Приложение работает, но на каждый новый вопрос правильные ответы будут «закреплены» за одними и теми же флажками.
Помощь в решении этой проблемы: На каждом ключевом кадре Слоя 1 создается код, в котором переменным логического типа (описаны в скрипте первого ключевого кадра слоя » Actions «, как переменные типа Boolean) fla.1, fla.2, fla.3 присваиваются значения false либо true (в зависимости от правильного ответа, «закрепленного» за соответствующим флажком). В условном выражении скрипта слоя «Action» проверяется состояние флажков путем сравнения со значениями переменных fla.1, fla.2, fla.3 (см. рис. 20.2):
Рис. 20.2. Скрипт первого ключевого кадра слоя «Actions» (тест с флажками)
В случае правильного ответа, в текстовое поле выводится соответствующее сообщение, и значение переменной k увеличивается на «1» (при дальнейшей разработке приложения вы сможете проанализировать количество правильных ответов в тесте).
В случае с переключателями только один может быть активизирован (один из вариантов ответа правильный). В скриптах ключевых кадров «Слоя 1» можно задать номер переключателя с правильным ответом
Рис. 20.3. Скрипт первого ключевого кадра слоя «Actions» (тест с переключателями)
В скрипте есть обращение к объекту (переключателю) по имени this [«r» + n]. Такой способ задания имени предполагает, что «этот» объект имеет имя, состоящее из двух частей – текстовой (неизменной) части (r) и числовой ( значение которой берется из переменной n). Например, при программировании экземпляра символа с именем r2 можно пользоваться таким способом идентификации объекта, как this [«r» + n], в том случае, если в переменной n хранится «2».
Краткие итоги лекции:
Типичным примером интерактивных приложений образовательной направленности являются тесты. Тесты используются и как инструмент проверки знаний (при ответе пользователя на вопрос, идет подсчет количества правильных ответов и по окончании тестирования на экран выдается сообщение – итог тестирования в баллах, анализ ответов на вопросы и др.) и в целях обучения (при неправильном ответе пользователя на вопрос, выводится правильный ответ ).
Для создания тестов необходимо воспользоваться готовыми компонентами («Окно» — «Компоненты»), такими как RadioButton (радиокнопка или переключатель ) и CheckBox (флажок), и которые вставляются на сцену путем перетаскивания из раскрывающегося списка » User Interface «.
- Компонент RadioButton позволяет поставить пользователя перед выбором единственного варианта из нескольких. Этот компонент должен использоваться в группе, где существует не менее двух экземпляров RadioButton. В любое время можно выбрать только одного члена данной группы.
- Использование компонентов CheckBox позволяет выбирать (устанавливать флажки) на нескольких компонентах.
На панели свойств или в Инспекторе компонентов (вызов через режим меню «Окно») можно задать параметры компонента для каждого экземпляра (переключателя или флажка). Каждый из этих параметров имеет соответствующее свойство ActionScript с тем же именем (например, в свойстве selected задается «выбор» данного компонента).
Для программирования работы флажков и переключателей потребуется использовать в скрипте команду ветвления для анализа правильности выбранного ответа (выбранного компонента). Условное выражение в команде ветвления может быть сложным, состоящим из простых, соединенных логическими операциями:
- «&&» (логическими союзами «и»). В результате этой операции все условное выражение будет истинно, если будет истины и первое, и второе, и третье и т.д. простые условные выражения.
- «||» («или»). В результате выполнения логической операции «||» («или») все логическое выражение будет истинно, если будет истинно хотя бы одно простое логическое выражение.
- «!» («не»). Логическая операция «!» («не») инвертирует (меняет на противоположное) результат логического выражения.
Ключевые термины
- Компоненты
- Радиокнопка, переключатель
- Флажок
- Сложное условное выражение
- Логические операции «И», «ИЛИ», «НЕ»
Набор для практики:
- Перечислите готовые компоненты, наиболее подходящие для реализации тестов в приложении.
- Перечислите отличия флажков от переключателей.
- Перечислите свойства переключателей.
- Перечислите свойства флажков.
- Каков тип значения свойства selected компонентов?
- Каков будет результат сложного логического выражения, состоящего из простых выражений, соединенных союзом «И»?
- Каков будет результат сложного логического выражения, состоящего из простых выражений, соединенных союзом «ИЛИ»?
- Назначение логической операции «НЕ»?
Создайте тестирующее приложение по любой теме. В качестве вариантов ответа используйте готовые компоненты (флажки и переключатели).