16 мин. на чтение (слов - 3168)

Создание электронной обучающей игры «Колесо фортуны»

Игру «Колесо фортуны» можно использовать при электронном обучении по определенной теме. При этом обучающиеся будут чувствуют себя более вовлеченными и мотивированными.

Давайте узнаем, как создать игру «Колесо фортуны» с помощью ActivePresenter.

Как выглядит игра «Колесо фортуны»

Ниже приведена игра, созданная с помощью ActivePresenter 7. Легче понять игру, если знать, как она выглядит.

Правила игры

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

После того как обучающийся ответит на все 5 вопросов, игра заканчивается. Итоговый балл – это сумма баллов правильных ответов.

Дизайн игры

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

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

Имейте в виду, что игра использует некоторые внешние ресурсы, чтобы сделать ее более привлекательной. Эти ресурсы представляют собой четыре аудиодорожки, которые можно легко найти в интернете. Один трек воспроизводится, когда появляется слайд начала игры. Один предназначен для звука вращающегося колеса. Другие звучат, когда обучающиеся дают правильный или неправильный ответ.

В общей сложности игра состоит из шести этапов:

  1. Создание темы игры.
  2. Создание интерактивного колеса.
  3. Создание слайдов «Начать игру» и «Игра окончена».
  4. Создание набора вопросов.
  5. Экспорт игры в HTML5.

Первые два шага можно выполнить в главном представлении (на вкладке «Вид» > «Шаблон слайда»).

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

Остальные этапы выполнятся в обычном представлении.

Этап 1: создание темы игры

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

1. Изменение темы

ActivePresenter предоставляет галерею с различными темами (на вкладке «Оформление» > «Темы»). Каждая тема имеет следующие элементы: цвета темы, шрифты темы и стили фона. Можно настроить любую тему, например, изменить стиль фона, цвета и шрифты для объектов и т. д.

Предположим, вы хотите использовать тему Galaxy. Нажмите на нее, и эта тема сразу применяется к текущему проекту.

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

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

Чтобы звезды мерцали бесконечно, нужны интерактивные шкалы времени и действия.

Сначала создайте новую интерактивную шкалу времени. Затем добавьте эффект акцента «Пульс» к объекту «Звезда» и повторите этот эффект до конца слайда. Затем примените эффект ко всем звездным объектам. Наконец, вызовите действие для вызова интерактивной шкалы времени при запуске слайда. Таким образом, звезды будут мерцать, пока игра не закончится.

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

Шаг 1: выберите макет шаблона (первый слайд в иерархии).

Шаг 2: панель «Шкала времени» > список шкал времени > «Добавить шкалу времени». Назовите ее «Пульс».

Шаг 3: на шкале времени «Пульс» добавьте эффект «Пульс» к звездному объекту. Затем дважды щелкните панель времени эффекта > «Повторить» > «До конца слайда». Это заставляет эффект проигрываться до конца слайда.

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

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

3. Настройка макета вопроса

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

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

Кроме того, в макете вопроса имеется звук вращения колеса. Чтобы звук появлялся в нужный момент, щелкните правой кнопкой мыши значок аудио на холсте или выберите аудио на шкале времени > «Изначально скрыто»). После этого используйте действия, чтобы воспроизвести его (показать объект) и приостановить его (скрыть объект) при вращении колеса.

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

  • Для отображения первых используйте системные переменные: apQuizTakenInteractions и apQuizTotalInteractions. Не нужно создавать новые.
  • Чтобы показать последнее, необходимо добавить новую переменную total.

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

Шаг 1: перейдите на вкладку «Главная» > «Переменные», чтобы открыть окно «Переменные». Это окно имеет две вкладки: «Пользователь» и «Система». Во второй вкладке содержатся системные переменные.

Чтобы создать переменную total, на вкладке «Пользователь» укажите имя, тип, значение по умолчанию и описание переменной. Можно выбрать три типа переменных: ИСТИНА/ЛОЖЬ, ТЕКСТ и ЧИСЛО. Для переменной total выберите тип ЧИСЛО.

Шаг 3: используйте ссылки на переменные, чтобы получить и отобразить нужные данные на слайдах вопросов. Просто вставьте текстовые объекты. Затем на вкладке «Главная» > «Ссылка» добавьте ссылки на переменные. Ниже приведен пример ссылки на переменную total. Обратите внимание, что каждая ссылка на переменную отображается в тексте как заполнитель, содержащий имя переменной, заключенное в двойные знаки процента (%).

При этом соответствующие значения отображаются во время игры.

4. Добавление взаимодействия для места размещения вопроса

Когда останавливаете колесо, появляется вопрос, и игра приостанавливается, чтобы ответить на вопрос. После выбора ответа и нажатия кнопки «Ответить» появляется сообщение и воспроизводится звук, чтобы показать, правильный или неправильный ответ.

  • Если ответ правильный, оценка, которую получите за текущий вопрос, будет складываться с общим счетом, и вы увидите количество вопросов, на которые ответили, и общее количество вопросов в игре.
  • В случае неправильного ответа баллы не начисляются.

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

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

Взаимодействия описаны ниже:

  • При запуске слайда с вопросом происходит событие «При загрузке» и выполняется следующий сценарий. Здесь необходимо сначала создать переменную location. Затем используйте скрипт, чтобы получить состояние вращения колеса, когда воспроизводится новый слайд вопроса.
prez.object('Колесо').rotate(prez.variable('location')); 

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

var rotateWheel = prez.object('Колесо').rotate();
var totalScore = prez.variable('total');

//переменной 'location' присваивается состояние вращения колеса
prez.variable('location', rotateWheel);

//установка очков на колесе
var score1 = prez.object('Очки_1').text();
var score2 = prez.object('Очки_2').text();
var score3 = prez.object('Очки_3').text();
var score4 = prez.object('Очки_4').text();
var score5 = prez.object('Очки_5').text();
var score6 = prez.object('Очки_6').text();

if (rotateWheel > 0){
    if(rotateWheel >= 0 && rotateWheel <= 60) { showScore (totalScore, Number(score6)); return false; } if(rotateWheel >= 61 && rotateWheel <= 120) { showScore (totalScore, Number(score5)); return false; } if(rotateWheel >= 121 && rotateWheel <= 180) {
        showScore (totalScore, Number(score4));
        return false;
    }
}
else{
    if(rotateWheel <= 0 && rotateWheel >= -60) {
        showScore (totalScore, Number(score1));
        return false;
    }
    if(rotateWheel <= -61 && rotateWheel >= -120) {
        showScore (totalScore, Number(score2));
        return false;
    }
    if(rotateWheel <= -121 && rotateWheel >= -179) {
        showScore (totalScore, Number(score3));
        return false;
    }
}

function showScore (totalScore, x){
          totalScore = totalScore + x;         
          prez.variable ('total', totalScore,);
} 

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

var rotateWheel = prez.object('Колесо').rotate();
var totalScore = prez.variable('total');

//переменной 'location' присваивается состояние вращения колеса
prez.variable('location', rotateWheel); 

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

Этап 2: создание интерактивного колеса

Обратите внимание, что слайд «Начать игру» и все слайды с вопросами имеют колесо. Но разница в том, что слайды, о которых идет речь, являются интерактивными. Поэтому лучше на раннем этапе спроектировать колесо в макете вопроса. Затем скопируйте его на слайд «Начать игру». Для создания слайдов вопросов используйте макет вопроса.

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

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

Как правило, колесо включает в себя основание, сектора с цифрами, стрелку и кнопку вращения в центре. Их все можно сделать, используя объекты фигуры без какого-либо внешнего ресурса. Все, что нужно, это овал, линия, стрелки, фигура произвольной формы и подпись к тексту. Чтобы увидеть эти фигуры, откройте вкладку «Главная» или «Аннотации» > «Фигуры».

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

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

Чтобы сгладить этот процесс, обратите внимание на следующее:

а) Рисование сектора

Обратите внимание, что колесо имеет 6 секторов с равными углами (каждый по 60 градусов). Просто создайте сектор. Затем скопируйте и вставьте его, чтобы получить другие.

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

б) Рисование других секторов

Чтобы нарисовать пять остальных секторов, скопируйте и вставьте объект «Сектор» пять раз. Поверните каждый из новых секторов соответственно на 60 градусов, 120 градусов, 180 градусов, 240 градусов и 300 градусов. Затем поместите их в одно колесо. Можно изменить цвета секторов и чисел. После этого сгруппируйте все объекты «Сектор» в один объект. Назовите эту группу «Колесо».

2. Создание вращения колеса

Чтобы колесо вращалось, добавьте эффект анимации. Здесь также необходимо создать интерактивную шкалу времени. Сделайте следующее:

Шаг 1: добавьте шкалу времени и назовите ее «Колесо».

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

3. Задействование кнопки «Старт»

Когда нажимаете кнопку «Старт», происходят три вещи: кнопка «Старт» немедленно превращается в кнопку «Стоп», колесо начинает вращаться, воспроизводится звук. Если колесо вращается, при нажатии кнопки «Стоп» колесо перестает вращаться, звук перестает воспроизводиться, появляется вопрос с ответами.

Чтобы получить эти взаимодействия, сначала добавьте два состояния для кнопки «Старт»: состояние «Старт» как «Normal (По умолчанию)» и состояние «Стоп». При этом необходимо создать переменную rotate. Эта переменная предназначена для управления колесом и звуком. Ее начальное значение ИСТИНА.

Давайте изучим процедуру.

Шаг 1: создаем кнопку «Старт» с несколькими состояниями. Это можно сделать с помощью состояний объекта (вкладка «Вид» > «Состояния объекта»).

Шаг 2: откроем окно «Переменные», чтобы добавить переменную rotate. Процедура аналогична процедуре создания переменной total, описанной ранее.

Шаг 3: добавим события и действия к кнопке «Старт». Имейте в виду, что действие «Регулировка переменной» направлено на изменение значений переменных rotate и stop на ИСТИНА/ЛОЖЬ, чтобы колесо вращалось или отображало вопрос и ответы. Кроме того, укажите несколько условий, чтобы определить, будет ли выполнено действие.

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

Этап 3: создание слайдов «Начать игру» и «Игра окончена»

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

Слайды «Начать игру» и «Игра окончена» не имеют ничего общего. Однако есть две вещи, которые нужно иметь в виду. Во-первых, как автоматически воспроизводить звук при появлении слайда «Начать игру». Во-вторых, как создать кнопки «Начать игру» и «Играть снова».

1. Включение автоматического воспроизведения музыки при появлении слайда «Начать игру»

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

Для этого выберите слайд «Начать игру». Затем на панели «Свойства» > «Взаимодействия» > «События и действия» > «При загрузке» > «Добавить действие» > «Воспроизведение аудио».

2. Создание кнопки «Старт» и «Играть снова»

На слайде «Начать игру» есть кнопка «Старт», а в конце игры – кнопка «Играть снова». Сделайте так, чтобы эти кнопки работали, добавляя к ним события и действия (панель «Свойства» > «Взаимодействия» > «События и действия»).

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

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

б) «Играть снова»: при нажатии на кнопку «Играть снова» появляется возможность снова запустить игру. Добавьте действие «Регулировка переменной», чтобы изменить системную переменную apCmdRestart на значение true для перезапуска игры. Кроме того, кнопка «Играть снова» имеет звуковой эффект. Чтобы вставить этот звук, используйте действие «Воспроизведение аудио» и добавьте в него встроенный звук (Mouse Click 1).

Этап 4: создание набора вопросов

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

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

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

Чтобы создать слайды с вопросами, сделайте следующее:

Шаг 1: на вкладке «Главная» или «Слайд» > «Новый слайд» > выберите макет вопроса.

Шаг 2: щелкните значок вопроса «Выбор ответа» в заполнителе вопроса, чтобы создать вопрос. Затем выберите любой переключатель, чтобы установить правильный ответ.

Шаг 3: сделайте вопрос и ответы невидимыми, пока ученики не повернут колесо и не остановят его. Сделайте это, щелкнув правой кнопкой мыши заголовок вопроса и ответы > «Изначально скрыто».

Шаг 4: установите максимальное количество попыток для ответа (панель «Свойства» > «Взаимодействия» > «Оценивание и отчетность» > «Попытки». Для этой игры установите 1.

Шаг 5: скопируйте и вставьте новый слайд с вопросом, чтобы получить четыре других. Затем измените текст заголовков вопросов и ответов.

2. Случайные вопросы

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

Шаг 1: на вкладке «Вид» > «Наборы слайдов». По умолчанию ActivePresenter предоставляет Набор 1.

Шаг 2: щелкните правой кнопкой мыши по всем слайдам с вопросами > «Переместить слайд в» > Набор 1.

Шаг 3: вставьте 5 случайных слайдов в текущий проект (вкладка «Слайд» > «Случайный слайд»). Разместите их под слайдом «Начать игру» и над слайдом «Игра окончена». По умолчанию эти случайные слайды связаны с Набором 1. Итак, на этом ваша работа выполнена.

Этап 5: предварительный просмотр и экспорт игры в HTML5

Пришло время просмотреть то, что создали, и проверить, все ли вам нравится. Для этого используйте функцию «Предпросмотр HTML5». После этого, если игра устраивает, экспортируйте ее в HTML5.

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

Для предварительного просмотра игры на вкладке «Главная» или «Экспорт» > «Предпросмотр HTML5».


Существует четыре режима работы: «Демонстрация», «Обучение», «Практика» и «Тест». Можно выбрать любой из них для предварительного просмотра и взаимодействия с игрой, кроме демонстрации. Этот режим не интерактивный, а только для просмотра.

2. Экспорт игры

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

Если хотите встроить свою игру в веб-страницу, как показано на скриншоте ниже, экспорт проекта в HTML5 – очень хороший выбор.

Вот некоторые советы, которые нужно помнить:

  • Используйте оболочки и заготовки, чтобы быстро изменить внешний вид панели инструментов плеера.
  • Если не хотите показывать панель инструментов плеера, спрячьте ее («Настройки проигрывателя» > «Общее» > «Параметры» > «Панель инструментов» > снимите отметку «Показать панель инструментов»).

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

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

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


Как создать руководство по программному обеспечени...
Совершенствование оценивания при электронном обуче...

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