15 мин. на чтение (слов - 2929)

Как создать электронную обучающую игру «Кто хочет стать миллионером?»

Хотите сделать свою собственную версию телешоу «Кто хочет стать миллионером»? Тогда эта статья для вас. Из нее узнаете, как создать аналог популярной телевикторины в ActivePresenter. 

Что такое игра «Кто хочет стать миллионером»?

Правила игры

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

Как создать игру

Все начинается с пустого слайда. Затем переходим в шаблон слайда, чтобы создать шаблон, напоминающий оригинальное шоу «Кто хочет стать миллионером?». Создадим всю графику с линиями, фигурами и рисунками свободной формы и будем использовать встроенные звуки для эффектов щелчка. Таким образом, никаких внешних ресурсов не требуется.

Всего будет 18 слайдов: «Приветствие», «Поражение», «Победа» и 15 слайдов с несколькими вариантами ответов. Вопросы становятся все сложнее и появляются в случайном порядке. Для этого будем использовать наборы слайдов и случайные слайды.

Использование анимации не займет много времени, потому что будем иметь дело с анимационными циклами в слайдах «Приветствие» и «Победа». Что требует времени и усилий, так это построение всех взаимодействий и JavaScript. Необходимо контролировать поведение кнопок, ответы, вопросы, банк (выигранные деньги) и денежное дерево.

Разделим создание игры на несколько этапов:

  1. Создание шаблона вопроса.
  2. Создание слайдов приветствия, поражения и победы.
  3. Создание слайдов вопросов и построение взаимодействий.
  4. Случайные вопросы.
  5. Экспорт проекта в HTML5.

Этап 1: создание шаблона вопроса

На этом этапе придадим всему проекту единый фон и создадим шаблон для вопросов. В шаблоне добавим состояния к объектам, чтобы впоследствии можно было создавать взаимодействия.

1. Создание шаблона вопроса

Воспользуемся шаблоном слайдов, чтобы все слайды с вопросами были с одним и тем же фоном. В открытом проекте с пустой темой выполните следующие действия:

Шаг 1: откройте главный вид (вкладка «Вид» > «Шаблон слайда»).

Шаг 2: выберите шаблон слайда и любой темный стиль фона (с белыми шрифтами) с помощью градиентной заливки. Затем измените градиентную заливку по своему усмотрению. Изменения затронут все макеты в иерархии.

Шаг 3: выберите любой макет, чтобы создать шаблон вопроса с готовыми фигурами, рисунками свободной формы, текстовыми надписями и интерактивными кнопками. В этом примере выбран макет Title Slide.

Сделайте следующее:

  • Измените заголовок на шестиугольник, а кнопку выхода на стрелку влево (вкладка «Формат» > «Изменить фигуру»).
  • Скройте два сообщения для кнопок «Выход» и «Ответить» (панель «Свойства» > «Размер и свойства» > «Расчет времени» > «Изначально скрыто»).
  • Вставьте место размещения для ответов на вопрос, чтобы добавить вопросы в обычном режиме просмотра (вкладка «Шаблон слайда» > «Вставить место размещения» > «Вопрос»).
  • Оставьте четыре шестиугольных ответа и денежное дерево для следующей части (объекты с несколькими состояниями).

Шаг 4: добавьте анимационные эффекты входа («Влетает») в текст вопроса и место размещения ответов. Немного задержите время начала обоих объектов, чтобы текст вопроса и место для ответов появлялись по очереди после начала слайда.

На этом этапе в шаблоне слайда остались две задачи: добавление состояний к объектам и добавление действий к кнопкам «Выход» и «Ответить».

2. Создание объектов с несколькими состояниями

Чтобы игра выглядела реалистичной, вместо четырех кнопок-переключателей каждый вариант ответа на вопрос необходимо заключить в четыре шестиугольника, обозначенных А, B, C и D. Для этого сделаем следующий трюк.

Будем использовать вопросы с несколькими вариантами ответов с «невидимыми» переключателями (за исключением текста). Поместите каждый переключатель точно над каждым шестиугольным ответом в фоновом режиме. Таким образом, обучающиеся будут взаимодействовать с невидимыми переключателями, видя шестиугольники с несколькими состояниями.

Для каждого шестиугольника добавьте три состояния: «Наведение» (появляется при наведении на объект), «Отмечен» (появляется при нажатии) и «Правильно» (появляется при правильном ответе). Добавление и редактирование состояний объектов выполняется на панели «Состояния объектов» (вкладка «Вид» > «Состояния объектов»).

Примите к сведению следующее:

  • Работайте с одним шестиугольником. Как только полностью подготовите его к использованию, скопируйте и вставьте его, чтобы получить три других. Это сохранит время и обеспечит полную идентичность всех шестиугольников.
  • Состояния объекта – это «внешний вид». Если слайд имеет несколько объектов с несколькими состояниями, убедитесь, что схожие состояния различных объектов выглядят гармонично. Например, при наведении на кнопки и ответы.

Что касается денежного дерева, то добавьте еще одно состояние к каждому значению – «Текущий». Это состояние будет выделять текущий вопрос и соответствующий приз. На следующем рисунке ничего не видно в нормальном состоянии, потому что используется прозрачный фон (без заливки, без линии) и белый текст.

Кроме того, дайте ответам и значениям в денежном дереве подходящие имена, потому что позже они будут использоваться для создания взаимодействий. Например, назовите значения 1, 2, 3,..., 15 одно за другим в порядке возрастания.

Этап 2: создание слайдов приветствия, поражения и победы

На этом большом этапе сделаем слайды приветствия, поражения и победы. Переключитесь в обычный вид (вкладка «Шаблон слайда» > «Закрыть шаблон») и работайте со слайдами. Вставьте пустые слайды («Главная» > «Новый слайд» > «Пустой») и раскройте свой творческий потенциал. Как только «визуальная» часть будет готова, добавьте анимационные эффекты и заставьте все кнопки работать.

1. Создание слайдов

Вся графика, включая яркие баннеры, прожекторы и группу зрителей, будет создана вами самостоятельно в ActivePresenter. Используйте готовые фигуры и рисуйте свои. Например, используйте закругленный прямоугольник и много кругов для создания баннера. Затем используйте произвольную фигуру, чтобы нарисовать два прожектора, которые светят на баннер. Заполните прожекторы градиентным цветом, чтобы сделать их более реалистичными.

Создадим публику. Например, чтобы создать женскую аудиторию, возьмите круг, треугольник и несколько прямоугольников. Не забудьте облако-выноску для создания вьющихся волос. Настройте все части и сгруппируйте их в один объект, чтобы перемещать и анимировать их вместе (щелкните правой кнопкой мыши объекты > «Группировать» > «Группировать»).

Примите к сведению следующее:

  • Копируйте и вставляйте похожие объекты и слайды для экономии времени.
  • Откройте панель выбора, чтобы легко управлять дочерними объектами в группе (вкладка «Вид» > «Выбор»).
  • Расположите слайды в следующем порядке: «Приветствие», «Поражение», 15 слайдов с вопросами (добавим позже) и «Победа». Этот порядок важен, если хотите перемещаться по игре и создавать другие взаимодействия (см. ниже).
  • Можно сохранить собственную графику для повторного использования с помощью шаблонов объектов.

2. Создание циклов анимации

Чтобы создать анимационные эффекты, выберите объект, перейдите на вкладку «Анимации» и выберите нужный эффект. Это распространяется на создание анимационных эффектов в шаблоне слайда и слайде поражения. Но если дело доходит до слайдов приветствия и победы, все переходит на другой уровень. На обоих слайдах все эффекты происходят бесконечно: мигающие прожекторы и лампочки вокруг баннера, непрерывный денежный дождь и «живая» аудитория. Чтобы получить такие циклы анимации, нужны интерактивные шкалы времени и действия.

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

На слайде приветствия выполните следующие действия:

Шаг 1: создайте интерактивный шкалу времени и назовите ее «Цикл» (панель «Шкала времени» > поле со списком шкал времени > «Добавить шкалу времени»).

Шаг 2: на шкале времени «Цикл» добавьте эффект акцента («Пульс») к прожекторам и лампочкам. Сделайте так, чтобы эффекты повторялись до конца слайда (дважды щелкните по полосе времени эффекта > «Повтор» > «До конца слайда»).

Шаг 3: добавьте событие «При загрузке» и действие «Запуск шкалы времени» на слайд (панель «Свойства» > «Взаимодействия» > «События и действия»).

На слайде победы будем использовать траектории движения для анимации денег и аудитории. Относительно путей движения для аудитории создается «Авто-реверс»для того, чтобы сделать эффект «Качка»

3. Заставьте кнопки работать

Игра имеет пять кнопок трех типов: навигация (кнопка «Играть»), повтор (кнопки «Играть снова» и «Выход») и подтверждение (кнопка «Ответить»). Чтобы кнопки работали, добавьте в них события и действия (панель «Свойства» > «Взаимодействия» > «События и действия»).

Примите к сведению следующее:

  • Все кнопки имеют эффект щелчка с помощью встроенного звука Mouse Click 1.
  • Презентация будет приостановлена до тех пор, пока обучающиеся не нажмут кнопку «Играть» или «Играть снова» (вкладка «Взаимодействие» > «Общее» > «Пауза презентации для ожидания ввода данных пользователем» > «Перед скрытием объекта»).

а) Навигация: на слайде приветствия, нажав кнопку «Играть», перейдете к первому вопросу, который является третьим слайдом (ниже слайдов приветствия и поражения). Добавьте два действия в событие «По щелчку», как показано ниже:

б) Повтор: необходимо использовать системную переменной apCmdRestart, чтобы снова создать кнопки «Играть» и «Выход». Действие «Регулировка переменной» изменит значение этой переменной на true, чтобы повторить тест.

Для кнопки «Выход», помимо перезапуска игры, необходимо, чтобы при наведении указателя мыши на нее появлялось сообщение подсказки. Для этого переключитесь в шаблон слайда добавьте два других события: «При наведении указателя» и «При отводе указателя» (происходят, когда мышь соответственно наводится на кнопку и отводится от нее).

в) Отправить: кнопка «Ответить» отправляет ответы обучающегося для оценки.

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

Этап 3: создание слайдов вопросов и взаимодействий

Сначала был создан шаблон вопроса в одном макете шаблона слайда. Теперь настало время использовать этот макет, чтобы сделать слайды вопросов. Рекомендуется вставить один слайд вопроса, отредактировать его, создать взаимодействия, а затем скопировать и вставить его нужное количество раз, чтобы получить другие слайды.

1. Создание первого слайда вопроса

Вставьте новый слайд, используя уже созданный шаблон вопроса (вкладка «Главная» > «Новый слайд» > Title Slide).

Шаг 1: щелкните значок множественного выбора в месте размещения ответов на вопрос. Вопрос с множественным выбором добавляется с четырьмя переключателями.

Шаг 2: установите максимальное количество попыток равным 1, чтобы обучающиеся могли только один раз попробовать ответить на вопрос (панель «Свойства» > «Взаимодействия» > «Оценивание и отчетность» > «Попытки» > 1).

Шаг 3: растяните переключатели так, чтобы каждый из них находился точно над каждым шестиугольным ответом. Для этого выберите вопрос и перейдите на панель «Свойства» > «Размер и свойства» > «Макет группы» > «Режим» > «Нет». Теперь можно свободно изменять размер и положение каждого переключателя.

Шаг 4: сделайте все состояния переключателей невидимыми (за исключением текста). Для этого на панели «Состояния объекта» > «Изменить состояния» включите режим редактирования. Затем выберите каждое состояние переключателя и перейдите на вкладку «Формат», чтобы сделать все связанные свойства прозрачными.

Теперь введите вопрос и ответы для первого слайда вопроса. Не забудьте установить правильный ответ, дважды щелкнув один из уже невидимых переключателей. Для этого есть хороший трюк. Дважды щелкните правильный ответ и обратите внимание на состояние по умолчанию в области состояния объекта. Состояние правильного ответа будет «Отмечен (По умолчанию». Если не получится изменить таким образом правильный ответ, то щелкните на нужный вариант ответа, перейдите на панель «Состояния объекта» > «Изменить состояния» > нажмите правую кнопку мыши на состоянии «Отмечен» > «Задать как состояние по умолчанию» > «Закончить изменения состояний».

Теперь у нового правильного варианта ответа изменится состояние на «Отмечен (По умолчанию»).

Старый вариант правильного ответа примет состояние «Normal (По умолчанию») и состояние «Отмечен» уже не будет по умолчанию.

2. Управление поведением ответов

Как говорилось ранее, обучающиеся будут взаимодействовать с невидимыми переключателями, видя вместо них шестиугольники с несколькими состояниями. Таким образом, необходимо добавлять события к переключателям для управления внешним видом шестиугольников. Будем использовать три события: «При наведении указателя», «При отводе указателя» (для эффекта наведения) и «При отметке» (для эффекта щелчка).

Эффекты работают следующим образом:

  • Наведение указателя мыши на не выбранный ответ делает его светлее (состояние «Наведение»). Выбранный ответ при этом остается желтым (состояние «Отмечен»).
  • Щелчок на ответ превращает его в желтый. Воспроизводится звук щелчка.
  • Ответы являются взаимоисключающими, как и переключатели в вопросе с множественным выбором.

Ниже для наглядности приведены взаимодействия, добавленные к одному из переключателей:

3. Оценивание вопросов

В этой части будем использовать три события: «Если правильно», «Если неправильно» и «Если не завершено», чтобы оценить вопросы. Идея состоит в том, чтобы добавить события и действия к первому слайду вопроса (макету), а затем скопировать и вставить этот слайд вопроса для остальных 14 вопросов, обновив лишь действия.

Взаимодействия заключаются в следующем:

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

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

Если обучающиеся нажимают кнопку «Ответить», не давая ответа, то происходит событие «Если не завершено» и запускается действие «Показать объект» для отображения сообщения подсказки «Выберите ответ».

4. Создание оставшихся взаимодействий

Необходимо выполнить некоторые скрипты в начале и в конце слайдов вопросов (когда происходят события «При загрузке» и «При выгрузке»). Рекомендуется писать сценарии в диалоговом окне «Свойства проекта» > вкладка «Событие» (кнопка ActivePresenter > «Проект» > «Свойства»). Так будет удобнее редактировать их в любое время.

  • При запуске слайда вопроса происходит событие «При загрузке» и выполняется функция prez.loadQuiz(). Эта функция получает общий счет, затем использует его для выделения соответствующего значения в денежном дереве и вычисления общей суммы выигрыша.
if (!prez.loadQuiz) {
    prez.loadQuiz = function() {
        var score = prez.variable('apQuizScore');
        if (score !== undefined) {
            for (var i = 1; i <= 15; ++i) {
                var objectName = 'Уровень ' + i;
                var object = prez.object(objectName);
                if (object) {
                    if (i == score + 1) {
                        object.state('Текущий');
                        object.animate(AP.EffectType.PULSE, 500);
                    } else {
                        object.state('Normal');
                    }
                }
            }
            
            // Деньги
            var arrMoney = ['0 ₽', '100 ₽', '200 ₽', '300 ₽', '500 ₽', '1 000 ₽',
                            '2 000 ₽', '4 000 ₽', '8 000 ₽', '16 000 ₽', '32 000 ₽',
                            '64 000 ₽', '125 000 ₽', '250 000 ₽', '500 000 ₽', '1 000 000 ₽'];
            var moneyObject = prez.object('Выигрыш');
            if (moneyObject) {
                moneyObject.text(arrMoney[score]);
            }
        }
    }
} 

Когда слайд вопроса заканчивается, происходит событие «При выгрузке» и выполняется функция prez.unloadQuiz(). Эта функция получает общий счет и вычисляет, правильно ли обучающийся ответил на вопрос или нет. Если правильно, он перейдет к следующему вопросу. В противном случае он перейдет к слайду поражения.

if (!prez.unloadQuiz){
    prez.unloadQuiz = function() {
        var score = prez.variable('apQuizScore');
        if (score !== undefined && score != 15) {
            var passed = prez.currentSlideIndex() - 1 == (score + 2); // Влючает 3 первых слайда
            if (!passed) {
                prez.showSlideAt(2); // Слайд поражения
            }
        }
    }
} 

На этом этапе создание макета слайда вопроса завершено. Теперь скопируйте и вставьте его 14 раз. Поскольку игра становится все сложнее, разделите 15 вопросов поровну на три уровня: легкий, нормальный и сложный. Затем измените вопрос и ответы на каждом слайде. После этого измените правильные ответы и соответствующие действия.

Этап 4: случайные вопросы

Сделаем игру более динамичной. Сначала будут пять простых вопросов, затем пять нормальных вопросов, за которыми следуют пять сложных. Все вопросы должны появляться в случайном порядке. Для этого будем использовать наборы слайдов и случайные слайды.

Создадим три набора слайдов возрастающей сложности и переместим слайды вопросов в соответствующие наборы. После этого вставим 15 случайных слайдов в проект, чтобы вопросы появлялись случайным образом из наборов. Выполним следующие действия:

Шаг 1: Откройте панель «Наборы слайдов» (вкладка «Вид» > «Наборы слайдов»).

Шаг 2: Набор 1 уже существует. Нажмите «Переименовать», чтобы переименовать его на Уровень 1. Это будет наименее сложный набор, содержащий первые пять простых вопросов.

Шаг 3: нажмите «Добавить» для создания двух других наборов. Назовите их Уровень 2 и Уровень 3.

Шаг 4: переместите пять простых, пять нормальных и пять сложных вопросов соответственно в Уровень 1, Уровень 2 и Уровень 3. Для этого щелкните правой кнопкой мыши слайды вопросов > «Переместить слайд в» > «Уровень 1/2/3».

Шаг 5: вставьте 15 случайных слайдов в проект (вкладка «Слайд» > «Случайный слайд»). Разместите эти случайные слайды под слайдами приветствия и поражения, но над слайдом победы.

Шаг 6: создайте вопросы из наборов. На панели «Слайды» выберите первые пять случайных слайдов, перейдите на панель «Свойства» > «Свойства слайда» > «Связанный набор» > «Уровень 1». Аналогичным образом свяжите следующие пять случайных слайдов с набором Уровень 2 и последние пять случайных слайдов с набором Уровень 3.

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

На этом основные действия по созданию игры заканчиваются. Остался лишь предварительный просмотр игры и ее экспорт.

Этап 5: экспорт проекта в HTML5

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

1. Предварительный просмотр проекта

Предварительный просмотр проекта во время и после процесса редактирования позволяет просмотреть работу и заметить необходимые изменения. На вкладке «Главная» или «Экспорт» щелкните «Предварительный просмотр HTML5» и выберите режим «Обучение», «Практика» или «Тест». Не выполняйте предварительный просмотр в режиме «Демонстрация», так как этот режим доступен только для просмотра.

2. Экспорт проекта

Как только будете уверены в своей работе, экспортируйте ее в HTML5 (вкладка «Экспорт» > «HTML5»). Можно также упаковать проект в пакет, совместимый со SCORM/xAPI, чтобы можно было загрузить пакет в LMS. Перед экспортом можно настроить плеер (вкладка «Экспорт» > «Настройки плеера»).

Предположим, необходимо встроить свою игру в сообщение WordPress или на страницу без панели инструментов плеера и без какого-либо оценивания, только для развлечения. Чтобы получить страницу в формате *.html, необходимо:

  • Скрыть панель инструментов плеера во всех режимах работы (вкладка «Экспорт» > «Настройки плеера» > снять чекбокс «Показать панель инструментов»).
  • Экспортируйте проект в режимы «Обучение», «Практика» или «Тест». В этом случае все три режима работают одинаково. Не используйте режим «Демонстрация», поскольку этот режим не является интерактивным, а доступен только для просмотра.

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


Как создать и использовать пользовательский шаблон...
3 простых шага для создания учебного пособия по пр...

Читайте также:

 

Комментарии

Нет комментариев. Будь первым, кто оставит комментарий.
Уже зарегистрированы? Войти на сайт
Гость
23.05.2019