SCORM対応の「ブロックくずしゲーム」を作成・追加する方法

こんにちは！開発の小橋🌵です。
ここ数日で気温が急激に下がり、朝晩寒くなりましたね。
季節が、じわじわと秋に向かい1年も、早い所であと2ヵ月で終わりです。
今回の記事では、秋がもっと楽しくなる「SCORM対応のブロックくずしゲーム」をご紹介いたします。
弊社のeラーニングシステム【learningBOX】はSCORM1.2に対応したLMSです！
従って、LMSへ学習データを送信するようにコードを追加すると、学習教材としてユーザーに利用してもらうことができます。
 

目次はこちら

• １．そもそも「SCORM」とは一体？
• ２．SCORM対応のブロックくずしゲーム
• ３. learningBOXはSCORM教材に対応したLMSです
• ４. まとめ

そもそも「SCORM」とは一体？

SCORMとはeラーニングにおける標準規格で、LMS（学習管理システム）と教材を組み合わせるための仕様を定義しています。
SCORMは米国のAdvanced Distributed Learningによって策定され、日本国内においては、日本イーラーニングコンソシアムがLMSやコンテンツの認証および、SCORM関連資格の認定を行っています。
SCORMに準拠した教材であれば、SCORMに準拠したLMSで利用できます。
 

SCORMの目的

▼SCORMには、大きく分けて2つの目的があります。

1．教材をシステムに登録する
2．教材とシステムの間で成績等をやり取りする

※SCORMについて詳しく知りたい方はこちらの【SCORMとは】をご確認ください！
 

SCORM対応のブロックくずしゲーム

今回ご紹介するコンテンツは、教材というよりも、ずばり「ゲーム」です。
まずはこちらの動画をご覧ください！

ブロックくずしゲームの詳細について

今回ご紹介する、「ブロックくずしゲーム」は、MDN Web Docsが「Canvas」を使って公開しているものに少し手を加えたものです。
javascriptとhtmlがある程度わかる方はぜひトライしてみてください。
参考：https://developer.mozilla.org/ja/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls
 

■ブロックくずしゲームの変更内容はこちら
・ゲーム終了後、繰り返し自動実行となっていたので、一度終了したら繰り返さないように変更。
・ゲーム終了と同時に「成績（合格か不合格）」と「得点」を自動送信するよう変更。
・成績を100点満点としたいため、計算しやすいようにブロックの数を合計15個から20個に変更し、ブロック1個につき5点の得点を加算するよう変更。
・ゲーム終了時のメッセージをアラートからテキスト表示に変更。
・マウス操作のみに変更。

learningBOXはSCORM教材に対応したLMSです

SCORM教材は、簡単なプログラムを書いたことのある人ならすぐに再現できます。
ブロックくずしゲームはこちらからダウンロードすることができます。
コンテンツをダウンロードしましたら、実際の動作をlearningBOXで確認してみましょう。
⇒[download id=”61379″ template=”教材をダウンロードする”]　
 

ブロックくずしゲームの動作確認してみましょう

学習画面からブロック崩しゲームに挑戦してみましょう

教材の学習ステータスが合格・不合格の表示に切り替わります。
学習後、成績データが反映されます。

ブロックくずしゲームの成績データを確認をする

learningBOXはSCORMに準拠したLMSなので、成績データも保存されます。
管理者はユーザーの受講履歴を成績管理画面で確認したり、CSV形式で成績データをダウンロードすることも可能です。
今回のブロックくずしゲーム成績の判定基準は80点以上を合格に設定してます。

成績管理の見かた、概要についてはこちらの成績管理ページにて詳しく紹介されています。
 

ブロックくずしゲームをカスタマイズしてみよう

コンテンツを学習していると、「ここはこういう動きの方がいいな～」とか、いろいろ修正したいところが見つかるかと思います。
Javascriptの基礎知識をお持ちの方でした、ぜひ自分仕様にコンテンツをカスタマイズしてみましょう！

■カスタマイズ例）
・合格基準を変えてみる
・球の速さを変えてみる
・ブロックの数を変えてみる
・経過時間を成績送信してみる
・スタートボタンを用意して押したらゲームが開始されるように変えてみる
・違うゲームに書き換えてみる

▼SCORM教材に関連する記事はこちらをご覧ください

2020.01.15

TensorFlow.jsを使ってSCORM教材を作成・追加する方法

あけましておめでとうございます。開発の横山🐈です。本年もよろしくお願いいたします！ 今回、ご紹介する記事は「TensorFlow.jsを使って、learningBOXに手書き文字を判定する問題を追加してみる」です。本来、SCORMにはimsmanifest.xmlという、教材の構造を定義...

2020.01.21

自作のプログラムをSCORM教材に書き換えてlearningBOXで利用しよう

自作のプログラムをSCORM教材に書き換えてlearningBOXで利用しよう こんにちは。開発部の森下です。本稿では、「百マス計算」のプログラムをSCORM教材としてlearningBOXに実装するまでの方法をご紹介します。 JavaScriptを学んで間もない私でも実装できまし...

まとめ

SCORM教材を手作りしてインポートするとゲームのような自由度の高いコンテンツが作成できます。
learningBOXを使えば、自作のゲームを公開し、ランキング表示なども設定可能です！

今回ご紹介した「ブロックくずしゲーム」ほんの一例にすぎませんが、世界に一つだけのプログラムをlearningBOXで公開しましょう！
learningBOXなら、SCORMを追加するだけで、SCORM対応の多種多様なコンテンツが作成できます。
まずは楽しみながら簡単なSCORMコンテンツを作ってみませんか？

弊社のeラーニングシステムは学習者にとっても使いやすいeラーニングです。
もし、eラーニングシステムの導入やSCORM教材を学習コンテンツとしてご利用したいとお考えのお客様は一度、弊社のlearningBOXをお試しください。
learningBOXは10アカウントまででしたら、なんと、期間無制限・無料でご利用が可能です。
⇒フリープランをお試しする
本稿もご覧いただきありがとうございました。