Геймификация в образовании: 10 игровых механик HTML Academy, которые вы успешно можете использовать

Геймификация в образовании: 10 игровых механик HTML Academy
Геймификация в образовании: 10 игровых механик HTML Academy
HTML Academy исполь­зу­ет игро­вые меха­ни­ки для моти­ва­ции поль­зо­ва­те­лей и с помо­щью при­ме­не­ния гей­ми­фи­ка­ции стре­мит­ся к тому, что­бы уче­ни­ки про­хо­ди­ли кур­сы до кон­ца, учи­лись вни­ма­тель­нее и усерд­нее. Пред­став­ля­ем вам 10 успеш­ных игро­вых мето­дик, кото­рые вы може­те исполь­зо­вать в сво­их про­ек­тах.

Гей­ми­фи­ка­ция – тренд послед­них лет и явля­ет­ся инстру­мен­том для уве­ли­че­ния вовле­чен­но­сти поль­зо­ва­те­лей с помо­щью исполь­зо­ва­ния игро­вых меха­ник в неиг­ро­вом кон­тек­сте. В послед­нее вре­мя мы мно­го писа­ли об исполь­зо­ва­нии гей­ми­фи­ка­ции и, в част­но­сти, в сфе­ре обра­зо­ва­ния. HTML Academy – один из рос­сий­ских про­ек­тов, кото­рый эффек­тив­но исполь­зу­ет игро­вые меха­ни­ки для моти­ва­ции сво­их поль­зо­ва­те­лей.

Про­ект HTML Academy – это сер­вис интер­ак­тив­но­го обу­че­ния HTML и CSS, цель кото­ро­го — сде­лать обу­че­ние мак­си­маль­но инте­рес­ным и затя­ги­ва­ю­щим. С само­го нача­ла поль­зо­ва­те­лей учат рабо­тать с живым кодом и само­сто­я­тель­но писать код, решая зада­чи, при­бли­жен­ные к реаль­ным. Так­же уче­ни­ку пери­о­ди­че­ски при­хо­дит­ся про­хо­дить испы­та­ния, прин­цип кото­рых — «свер­стай, как пока­за­но в образ­це».

Раз­ра­бот­чи­ки про­ек­та явля­ют­ся боль­ши­ми поклон­ни­ка­ми игр Blizzard, поэто­му с игро­вы­ми меха­ни­ка­ми были зна­ко­мы доста­точ­но хоро­шо, хотя сами это­го не подо­зре­ва­ли. Посте­пен­но про­бо­ва­лись раз­лич­ные вари­ан­ты, и на дан­ный момент HTML Academy исполь­зу­ет сле­ду­ю­щие игро­вые меха­ни­ки:

  1. посте­пен­ная пода­ча инфор­ма­ции;
  2. прин­цип посте­пен­но­го услож­не­ния;
  3. голо­во­лом­ки;
  4. мгно­вен­ная обрат­ная связь;
  5. «пер­фек­ци­о­низм»;
  6. мини-игры;
  7. «сто­ри­тел­линг»;
  8. дости­же­ния и очки;
  9. рей­тин­ги;
  10. откры­тые про­фи­ли.

1. Постепенная подача информации

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

2. Принцип постепенного усложнения

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

Геймификация. Состояние потока. Фото Flickr. CC BY 2.0
Состо­я­ние пото­ка: необ­хо­ди­мо най­ти пра­виль­ное соот­но­ше­ние необ­хо­ди­мых навы­ков и слож­но­сти зада­ния .

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

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

При­ме­няя эту меха­ни­ку, необ­хо­ди­мо при­дер­жи­вать­ся сле­ду­ю­щих пра­вил:

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

3. Головоломки

Голо­во­лом­ка — это слож­ное на пер­вый взгляд, но прин­ци­пи­аль­но реша­е­мое зада­ние. Голо­во­лом­ки обла­да­ют отлич­ным балан­сом слож­но­сти и увле­ка­тель­но­сти. Глав­ное, что­бы уче­ник ясно пони­мал, что и он может решить голо­во­лом­ку. Чем она слож­нее, тем при­ят­нее ее решить – это дает поло­жи­тель­ную обрат­ную связь уче­ни­ку и моти­ви­ру­ет его на даль­ней­шие дей­ствия и обу­че­ние.

В этом испытании HTML и CSS-код уже готов, но отсутствуют селекторы. Ученику нужно просто подобрать подходящие селекторы, чтобы получить изображение мишеней. Конечно, неподготовленному человеку сверстать такой пример с нуля очень сложно, но в формате головоломки это ему вполне по плечу.
В этом испы­та­нии HTML и CSS-код уже готов, но отсут­ству­ют селек­то­ры. Уче­ни­ку нуж­но про­сто подо­брать под­хо­дя­щие селек­то­ры, что­бы полу­чить изоб­ра­же­ние мише­ней. Непод­го­тов­лен­но­му чело­ве­ку свер­стать такой при­мер с нуля очень слож­но, но в фор­ма­те голо­во­лом­ки это ему вполне по пле­чу.

4. Мгновенная обратная связь

Уче­ник видит резуль­тат рабо­ты сво­е­го кода и реак­цию систе­мы на него прак­ти­че­ски мгно­вен­но, и сра­зу пони­ма­ет – прав он или нет.

Этот меха­низм рабо­та­ет луч­ше, когда зада­ние делит­ся на несколь­ко более про­стых под­за­дач. В этом слу­чае мак­си­маль­но сокра­ща­ет­ся пет­ля обрат­ной свя­зи и суще­ствен­но сни­жа­ет­ся цена ошиб­ки: объ­ем зада­ний ста­но­вит­ся мень­ше, а что­бы про­ве­рить оче­ред­ной вари­ант реше­ния, надо напи­сать мень­ше кода. Уче­ник при выпол­не­нии зада­ния рабо­та­ет неболь­ши­ми ите­ра­ци­я­ми, по ана­ло­гии с тем, как рабо­та­ют мно­гие вер­сталь­щи­ки и про­грам­ми­сты, кото­рые про­ве­ря­ют резуль­тат после каж­дых несколь­ких стро­чек кода.

5. «Перфекционизм»

Ино­гда эту игро­вую меха­ни­ку назы­ва­ют «про­гресс­бар». Суть тако­ва: что­бы прой­ти испы­та­ние, нуж­но, что­бы уро­вень схо­же­сти резуль­та­та и образ­ца пре­вы­сил 90%, но очень мно­гие хотят непре­мен­но набрать 100%, что при­во­дит к инте­рес­ным послед­стви­ям:

  • повы­ша­ет­ся вовле­чен­ность в про­цесс обу­че­ния: для про­сто­го про­хож­де­ния испы­та­ния обыч­но доста­точ­но 10–20 минут, а для иде­аль­но­го — до 6 часов;
  • уче­ни­ки не про­сто зави­са­ют на одном испы­та­нии, а пере­про­хо­дят кур­сы, деталь­но раз­би­ра­ют­ся в их рабо­те, про­хо­дят сле­ду­ю­щие, более слож­ные кур­сы, что­бы вер­нуть­ся и одо­леть испы­та­ние на 100%.

Здесь есть и отри­ца­тель­ная сто­ро­на: чело­век может тра­тить боль­шое коли­че­ство вре­ме­ни, когда спо­соб реше­ния зада­чи уже ясен.

Пер­фек­ци­о­низм хоро­шо соче­та­ет­ся с голо­во­лом­ка­ми, так как реше­ние голо­во­лом­ки на 100% достав­ля­ет наи­боль­шее удо­воль­ствие.

6. Мини-игры

Эта меха­ни­ка заклю­ча­ет­ся в том, что серия зада­ний в кур­се или сам курс созда­ют­ся в фор­ма­те игры.

Серия заданий на «перетягивание курочки» с помощью изменения приоритета селекторов в курсе про каскадность.
Серия зада­ний на «пере­тя­ги­ва­ние куроч­ки» с помо­щью изме­не­ния при­о­ри­те­та селек­то­ров в кур­се про кас­кад­ность.

Недав­но инте­рес­ный при­мер такой игры обле­тел все сооб­ще­ство раз­ра­бот­чи­ков и дизай­не­ров. Это игра CSS Diner, посвя­щен­ная изу­че­нию селек­то­ров, зада­ча кото­рой – с помо­щью под­хо­дя­щих селек­то­ров выбрать либо тарел­ки, либо лежа­щие на них фрук­ты.

7. «Сторителлинг»

Дан­ная игро­вая меха­ни­ка рабо­та­ет, когда несколь­ко зада­ний или кур­сов объ­еди­не­ны общей иде­ей или сце­на­ри­ем. Напри­мер, курс про селек­то­ры объ­еди­нен темой биат­ло­на и иде­ей «стрель­бы селек­то­ра­ми по мише­ням».

Зада­ча сто­ри­тел­лин­га — доба­вить эмо­ции и про­бу­дить инте­рес, жела­ние узнать, «чем все в ито­ге закон­чи­лось?», и дой­ти до кон­ца кур­са.

Сто­ри­тел­линг отлич­но соче­та­ет­ся с мини-игра­ми. Напри­мер, в кур­се про кас­ка­ди­ро­ва­ние финаль­ное зада­ние пере­кли­ка­ет­ся с сери­ей зада­ний про «бит­ву за куроч­ку» и в ито­ге полу­ча­ет­ся дра­ма­ти­че­ская раз­вяз­ка кур­са с уче­ни­ком в роли спа­си­те­ля и супер­ге­роя.

8. Достижения и очки

За выпол­не­ние опре­де­лен­ных дей­ствий или за полу­че­ние каких-либо резуль­та­тов поль­зо­ва­те­лю дают­ся вир­ту­аль­ные награ­ды-знач­ки.

Сейчас считается, что использование только достижений без вышеописанных механик имеет невысокий эффект.
Сей­час счи­та­ет­ся, что исполь­зо­ва­ние толь­ко дости­же­ний без выше­опи­сан­ных меха­ник име­ет невы­со­кий эффект.

9. Рейтинги

Цель меха­ни­ки – про­буж­дать дух сорев­но­ва­тель­но­сти, пуб­ли­куя рей­тин­ги луч­ших уче­ни­ков.

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

10. Открытые профили

Эта меха­ни­ка дает воз­мож­ность про­смат­ри­вать про­фи­ли дру­гих уче­ни­ков с дости­же­ни­я­ми и моти­ви­ру­ет полу­чить ана­ло­гич­ные, исполь­зуя такие чело­ве­че­ские каче­ства, как, напри­мер, зависть и тще­сла­вие. Глав­ный эффект мож­но назвать так: «раз они смог­ли, то и я смо­гу». Когда уче­ник видит огром­ное коли­че­ство людей, кото­рые спра­ви­лись со слож­ным кур­сом, то он пони­ма­ет, что тоже спра­вит­ся.

Эффект использования геймификации

Про­ект HTML Academy сво­им при­ме­ром пока­зы­ва­ет, что исполь­зо­ва­ние игро­вых меха­ник уве­ли­чи­ва­ет вовле­чен­ность поль­зо­ва­те­лей, хотя бы на при­ме­ре меха­ни­ки пер­фек­ци­о­низ­ма.

Более точ­ные дан­ные по вли­я­нию гей­ми­фи­ка­ции в обра­зо­ва­тель­ном про­ек­те полу­чить слож­но. Одна из при­чин – игро­вые меха­ни­ки глу­бо­ко внед­ря­ют­ся в функ­ци­о­нал про­ек­та и без самих игро­вых меха­ник уже невоз­мож­но запу­стить ори­ги­наль­ный про­ект.