К основному контенту
LIFEL
рекомендует

Проблема двух подряд нажатий одной клавиши на смежных кадрах КурсЛаба

18.08.2018
Андрей Матюков
Решение проблемки нажатия одной и той же клавиши подряд
Сегодня обращаю внимание на особенность вёрстки симуляторов ПО в редакторе CourseLab 3.1 при случае, когда нужно на двух смежных кадрах нажимать одну и ту же клавишу для перехода.

Допустим (абстрактный пример), нужно сделать симулятор авторизации на сайте того же Ростелекома, который предполагает:

  1. Ввод логина
  2. Нажатие клавиши Enter
  3. Ввод пароля
  4. Нажатие клавиши Enter

Создаем три кадра со скринами, на первых двух из которых размещаем по полю ввода: на первом простое для логина, на втором — поле скрытого ввода для пароля.
CourseLab
Казалось бы, всё прозрачно. Добавляем действия для каждого из первых двух кадров, при которых по нажатию клавиши Enter будет осуществляться переход на следующий кадр.
CourseLab
Проверка ввода в данном случае роли не играет, показываем лишь сам принцип
Вот только при просмотре курса происходит так, что нажатие второго Enter происходит как бы мгновенно, и зрительно с первого кадра автоматом перелетаем на третий. А если нажатий Enter в каких-то особых случаях будет «n», то «n-1» кадров пролетят для пользователя незаметно. Демонстрирую:
CourseLab
Как видно выше, после ввода логина и нажатия Enter на первом кадре «перелетаем» сразу на третий. Для решения этой проблемы вносим свое «пользовательское прерывание» на второй кадр.

На событие «Показ завершен» вешаем полусекундный таймер, по истечению которого задаем значение некой переменной (fr1_2=1).
CourseLab
А уже на событие нажатия клавиши Enter добавляем следующую проверку:
CourseLab
Т. е., пока второй кадр полностью не покажется, клавиша Enter на нем не сработает. Для пользователя же этот процесс невидим. Мы же подразумеваем, что хоть на секунду пользователь остановится на кадре — это ж всё-таки обучение :-).

В итоге этих небольших манипуляций получаем корректную работу симулятора при двух подряд нажатиях одной клавиши на смежных кадрах.
CourseLab
Понравилась статья? Нажми на Лайфика!
статьи по теме