筆者が小学校4年生の時、先生が算数大会を開いてくれたことがあります。2人の生徒を教壇の前に呼び、掛け算の問題を解かせるのです。正解した生徒が残り、生徒がいなくなるまで別の生徒が呼ばれ、最後に残った人が勝者です。楽しくも緊張するチャレンジでした。
私は数学が好きでしたが（微積分の前までの話です😆）、大勢の人の前で練習するのはいつも好きではありませんでした。そこで、オンライン版を作ることにしたのです。
このゲームでは、他の人と競うのではなく、自分のペースで答えたり、制限時間と競ったりすることができます。
しかも、Storyline 360のランダム変数のおかげで、JavaScriptのコーディングのスキルがなくても作れました！どのように作ったか興味がありますか？では、その手順を説明しましょう。
1. ストーリーボードの作成
このゲームのコンセプトはとてもシンプルでした。学習者に10問を提示し、何問連続で正解できるかを競うというものでした。
それを念頭に置いて、このビジュアルテンプレートを使ってストーリーボードを作成することにしました。こんな感じに仕上がりました。
基本的には、以下のような構成です。
イントロスライド スタートボタンと説明するレイヤーがあり、学習者が時計と競争するかどうかを決定します。
メインスライド すべての算数問題を表示するスライドとフィードバックレイヤーなどがあります。
最終スライド 最終スライドでは、学習者が合格か不合格かを確認し、再挑戦するかどうかを決定します。
2. スライドを作成する
ストーリーボードを実現するためにStoryline 360で最初にしたことは、各スライドとレイヤーを構築することでした。そこから、テキスト、図形、アイコン、グラフィックを挿入していきました。
背景画像とモンスターのイラストは、Content Library 360で探しました。そして、メディアライブラリーから直接Photoshopでイラストを開き、編集しました。例えば、この紫のモンスターの素材は、Photoshopでこのように編集することができました。
編集前
(Content Library 360のイラスト）
背景を取り除き、ポーズや顔の表情を増やすことで、4つのオプションが追加でき、より魅力的な学習体験ができるようになりました。
編集後
すべてのスライドとレイヤーの構築とデザインを終え、より技術的な側面である算数部分に集中する準備ができました！😬
3. ランダムな質問とフィードバックの表示
このゲームをやりがいのあるものにするために、学習者がプレイするたびに異なる算数問題を表示するようにしました。また、様々なフィードバックメッセージを表示することで、より個人的な感覚を得られるようにしたいと思いました。
そのために変数を使いました。変数とは、Storyline 360内のデータを収集・保存し、コース内の任意の場所に情報を表示するために使用するものです。変数には、テキスト（受講者の名前など）や数値（算数の問題のようなもの）が含まれます。
多くの人は、まず変数を作成し、その値を画面に表示するためのリファレンスを挿入します。しかし、筆者は変数名をスライドに打ち込んでから作成し、必要な数と種類を正確に把握することにしました。
Storyline 360では、手動で変数を参照するリファレンスを挿入するのも簡単です。以下のように、テキストボックスを挿入し、変数名の両端にパーセント記号を入力するだけです。
スライド
ベースレイヤーでは、以下のような変数を考えました。
変数名 | タイプ | デフォルト値 | 目的 |
score | Number | 0 | 合計スコア |
a | Number | 0 | 問題での１つ目の数字 |
b | Number | 0 | 問題での２つ目の数字 |
また、ベースレイヤーには表示されない裏の変数を一つ追加する計画にしました。
変数名 | タイプ | デフォルト値 | 目的 |
timer | True/False | False | タイマーを設定した学習者には見えるように、そうでない学習者には見えないようにするための変数 |
レイヤー
レイヤーには、以下の変数を計画しました。
レイヤー名 | 変数名 | タイプ | デフォルト値 | 目的 |
Correct | FeedbackCorrect | Text | なし | 正解時フィードバックテキスト |
Incorrect | FeedbackIncorrect | Text | なし | 不正解時フィードバックテキスト |
Incorrect and Time’s Up | answer | Number | 1 | 正解の値 |
また、正解・不正解のレイヤーには表示されない裏の変数を1つ追加しました。
レイヤー名 | 変数名 | タイプ | デフォルト値 | 目的 |
Correct and Incorrect | FeedbackNumber | Number | 0 | 表示するCorrectとIncorrectのフィードバックフレーズを決定 |
必要な変数をすべて定義したら、トリガーパネルの右上にある[Manage Project Variables]アイコンをクリックして、変数を作成しました。
そして、プラス（+）記号を選択して、新しい変数をそれぞれ作成しました。
完了すると、このような感じになりました。
すべての設定が完了すると、以下の薄黄色のボックスのように、変数のデフォルト値が自動的に表示されます。しかし、これらの枠は、プレビューやパブリッシュの際には表示されませんので、ご安心ください。枠は、変数が参照されているかを表すためのものです。黄色いボックスの上にカーソルを置くと、変数の名前が表示されます。
スライド
レイヤー
4. 学習者が答えを入力するためのスペースを作る
次に、学習者が答えを入力するためのスペースを作る必要がありました。[Insert]タブの[Input]をクリックし、数値を入力する[Numeric Entry]フィールドを選びました。
そして、スライド上で範囲をドラッグして[Numeric Entry]フィールドを作成しました。
[Numeric Entry]フィールドのテキストの書式をコースのデザインに合わせてカスタマイズし、枠をなくして塗りつぶしの色を完全に透明にして、形状をフォーマットしました。
(注：塗りつぶしなし[No Fill]オプションは選択しないでください。そうしてしまうと、学習者がオブジェクトをクリックし、答えを入力することができなくなります。)
[Numeric Entry]フィールドを追加すると、Storyline 360はデータを保存するための変数を自動的に作成します。
そして学習者がフィールドに入力した値を変数に設定するトリガーが自動的に作成されます。
とても簡単です。そして、学習者が答えを入力してクリックするか、送信ボタンを選択すると、Numeric Entry変数は自動的に学習者が入力した値に更新されます。
5. 計算のセットアップ
変数と[Numeric Entry]フィールドがすべて設定できたら、次は算数問題を実行するためのトリガーを追加しましょう！トリガーを使うと、このようなインタラクションをプログラミングしないで簡単に作ることができます。必要なのは、アクションを選択し、それをいつ発生させるかを決めるだけです。それでは、このスライドで作成したトリガーを見てみましょう。
まず、ベースレイヤーです。トリガーは、タイムラインが始まる時と、ユーザーが回答を確認した時の2つに分けて整理しました。それでは、作成したトリガーを見ていきましょう。
1. When the timeline starts on this slide スライドの冒頭で、学習者はランダムな算数問題を提示されます。変数名を書いた画像をわかりやすいように下に貼っておきます。
変数名 | トリガー | 目的 |
a | Set a to random number between 1 and 12 when the timeline starts on this slide | 掛け算の問題に使われる範囲なので、1～12の範囲にしました。トリガーを編集して、別の範囲にすることも簡単にできます。 |
b | Set b to random number between 1 and 12 when the timeline starts on this slide | 同上 |
NumericEntry | Set NumericEntry to value 0 when the timeline starts on this slide | フィールドにデフォルト値を表示し、学習者がそこに答えを入力することが分かるようにしました。 |
2. When the user clicks Check Answer.
学習者が[Numeric Entry]フィールドに答えを入力し、答えを確認するボタンをクリックすると、その回答に応じて自動的にフィードバックレイヤー（正解または不正解）に誘導されます。以下は、学習者が正しいレイヤーに誘導されるように作成したトリガーです。
変数名 | トリガー | 目的 |
answer と a | Multiply answer by variable a when the user clicks Check Answer | 変数を作ったときに、answerの初期値を1にしました。これは、これは掛け算の問題で、0を掛けたものは0になるからです。 answerを1にすることで、このようになります。
となり、正解は
|
answer と b | Multiply answer by variable b when the user clicks Check Answer | 同上 |
answer と NumericEntry | Show layer Correct when the user clicks Check Answer if NumericEntry＝ variable answer | これにより、学習者は自分の回答が正しい答えと同じであることを知ることができます。 |
| Show layer Incorrect when the user clicks Check Answer if NumericEntry ≠ variable answer | これにより、学習者は自分の回答が正解と一致しないことを知ることができます。 |
6. フィードバックを追加する
クイズでは、学習者に成績を知らせるために、フィードバックが重要です。今回はゲームなので、勢いを維持するためにフィードバックはシンプルにしました。技術的な観点から、フィードバックをどのように設定したかを簡単に説明します。
正解（Correct）レイヤー
正解レイヤーでは、トリガーを「Score」「Feedback」「Next button」の3つのカテゴリーに整理しました。
1. Score
スコアを表示することで、学習者は自分の進捗を把握することができます。このゲームのゴールは、学習者が10問連続で正解することなので、スコアを計算するために以下のトリガーを作成しました。
変数名 | トリガー | 目的 |
score | Add value 1 to score when the timeline starts on this layer | 学習者が1問正解するごとに、スコアが加算されます。 |
2. Feedback
最初にCorrectレイヤーを作成した時、「That's right!」というフィードバックフレーズを入力しました。しかし、このインタラクションを改めて見直すと、「That's right!」を10回連続で見ることになります。10回連続は、あまりに繰り返しが多い気がしました。そこで、ランダムな計算問題だけでなく、フィードバックフレーズもランダムに追加して、変化をつけることにしました。
言葉をランダムにする方法がわかりませんでしたが、Montse氏の素晴らしいStorylineのサンプル「E-Learning Needs Analysis Generator」を思い出したのです。コンセプトは私がやりたいことと似ていたので、彼女の作成したファイルを調べて、どのようにセットアップしたのか見てみました。以下は、私のプロジェクトでランダム化されたフィードバックを実現した方法です。
変数名 | トリガー | 目的 |
FeedbackNumber | Set FeedbackNumber to random number between 1 and 10 when the timeline starts on this layer | 10問連続で正解することが目的なので、10種類のフィードバックフレーズを用意しました。この乱数によって、学習者が正解するたびにどのフレーズが表示されるかが決まります。 |
FeedbackCorrect と FeedbackNumber | Set FeedbackCorrect to value Way to go! when FeedbackNumber = value 1 | これらは、FeedbackNumberに応じて表示されるポジティブなフィードバックのフレーズです。それぞれのフレーズに異なる番号を割り当てています。 |
同上 | Set FeedbackCorrect to value Outstanding! when FeedbackNumber = value 2 | 同上 |
同上 | Set FeedbackCorrect to value Marvelous! when FeedbackNumber = value 3 | 同上 |
同上 | Set FeedbackCorrect to value Incredible! when FeedbackNumber = value 4 | 同上 |
同上 | Set FeedbackCorrect to value Right on! when FeedbackNumber = value 5 | 同上 |
同上 | Set FeedbackCorrect to value You’re on fire! when FeedbackNumber = value 6 | 同上 |
同上 | Set FeedbackCorrect to value I’m impressed! when FeedbackNumber = value 7 | 同上 |
同上 | Set FeedbackCorrect to value Good thinking! when FeedbackNumber = value 8 | 同上 |
同上 | Set FeedbackCorrect to value Grrr … eat! when FeedbackNumber = value 9 | 同上 |
同上 | Set FeedbackCorrect to value Brilliant! when FeedbackNumber = value 10 | 同上 |
3. Next button
学習者が正しいフィードバックを確認した後、次の問題に進むことができます。しかし、インタラクション全体を1枚のスライドに構築したため、各質問の後にすべてをリセットするために、いくつかのトリガーを追加する必要がありました。
変数名 | トリガー | 目的 |
n/a | Hide this layer when the user clicks Next button | 学習者がまだ10ポイントを獲得していない場合、レイヤーは閉じられ、さらにポイントを獲得するための新しい問題が表示されます。 |
score | Jump to 1.3 Pass when the user clicks Next button if score = value 10 | 学習者が10ポイントを獲得すると、レイヤーを隠して次の問題を表示するのではなく、最後のスライドに誘導します。 |
answer | Set answer to value 1 when the user clicks Next button | 学習者は次の問題に進んでいるため、このトリガーは正解をデフォルト値である1にリセットします。 |
NumericEntry | Set NumericEntry to value 0 when the user clicks Next button | このトリガーは、前に入力した答えを表示したままにするのではなく、数値入力フィールドを0にリセットし、学習者が任意の数値から始められるようにします。 |
a | Set a to random number between 1 and 12 when the user clicks Next button | このトリガーは、数値フィールドをリセットし、選択された範囲内で新しい算数問題を表示します。 |
b | Set b to random number between 1 and 12 when the user clicks Next button | 同上 |
不正解レイヤー
不正解レイヤーのために、トリガーを2つのカテゴリーに整理しました。「Next button」は、ゲームをリスタートするための最後のスライドに連れて行くので、このレイヤーはそれほど多くのトリガーを必要としません。
1. Feedback
正解レイヤーと同様に、不正解の場合に異なるフィードバックフレーズを提示したいと考えました。その仕組みは次のとおりです。
変数名 | トリガー | 目的 |
FeedbackNumber | Set FeedbackNumber to random number between 1 and 3 when the timeline starts on this layer | この乱数によって、学習者が不正解になるたびに表示されるフレーズが決定されます。 |
Incorrect と FeedbackNumber | Set FeedbackIncorrect to value Ahhh! when FeedbackNumber = value 1 | これらは、FeedbackNumberに応じて表示されるすべてのIncorrect feedbackのフレーズです。それぞれのフレーズに異なる番号を割り当てています。 このゲームでは、より多くの正解を得られると想定しており、学習者がこのレイヤーを頻繁に目にすることはないため、3種類のフィードバックフレーズしか入れていません。 |
同上 | Set FeedbackIncorrect to value Grrr … when FeedbackNumber = value 2 | 同上 |
同上 | Set FeedbackIncorrect to value Eeek! when FeedbackNumber = value 3 | 同上 |
2. Next button
学習者が不正解のフィードバックを確認した後、最終スライドに誘導されます。以下は、その設定方法です。
変数名 | トリガー | 目的 |
n/a | Jump to slide 1.4 Fail when the user clicks the Next button | 10問連続で正解しなかったので、学習者は最後のスライドに誘導され、そこでリプレイできます。 |
n/a | Hide this layer when the user clicks Next button | リプレイ時にスライドがリセットされるように、このトリガーを入れています。 |
7. オプションのタイマーを含める
学習者が望み、さらに挑戦的にするために、制限時間と競争するオプションを与えることにしました。制限時間のあるクイズは、よりゲーム性のある体験になりますが、アクセシビリティの観点から、タイマーをオプションにしました。タイマーは、視覚、認知、または運動機能障害を持つ学習者やスクリーンリーダーを使用している学習者を追い込んでしまうからです。2つのオプションを提供することで、すべての学習者が自分のニーズに合わせて体験をパーソナライズすることができます。
以下は、その設定方法です。
タイマーのグラフィックを作成する
タイマーのグラフィックを作成するために、メインのクイズスライドの上部に3つの細長い長方形を挿入しました。そして、それぞれの塗りつぶしの色を変えて、白、灰色、赤の長方形を1つずつ用意しました。
タイマーを隠す
自分のペースで質問に答えたい学習者のために、タイマーを隠すようにしました。そのために、各シェイプの初期状態（initial state）を非表示[Hidden]に変更しました。
これで、学習者が「Not timed」を選択しても、タイマーは非表示のままです。トリガーは必要ありません。
タイマーを表示する
次に、タイマーを希望する学習者に見えるようにするため、次のトリガーをイントロスライドのInstructionsレイヤーに追加しました。
変数名 | トリガー | 目的 |
timer | Set timer to True when the user clicks Timed button | 「時間制限あり」または「時間制限なし」か、学習者が選択したオプションを保存します。 |
次に、メインクイズスライドのベースレイヤーに3つのトリガーを追加し、各色の長方形に1つずつ、学習者が[Timed]ボタンを選択した場合にタイマーを表示するようにしました。
変数名 | トリガー | 目的 |
timer | Change state of [timer color] to Normal when the timeline starts on this slide if timer = value True | 学習者が制限時間ありを選択した場合、タイマーを表示します。 |
注意：上記のトリガーを各色の長方形に追加する必要があるので、最終的には、同じようなトリガーが3つできるはずです。
タイマーを動作させる
さて、タイマーにアニメーションを追加して、時間が迫っているように見せましょう。そのために、スライドの上部にある赤いタイマー矩形に、[Fade]と[Wipe from Right]のアニメーションを追加しました。10問のクイズを完了する制限時間30秒と合わせるために、ワイプの時間も30秒に変更しました。
次に、アニメーションの時間を考慮し、スライドのタイムラインを30.75秒に伸ばしました。
そして、時間切れになると[Time's Up]レイヤーを表示するために、以下のトリガーを追加しました。
変数名 | トリガー | 目的 |
timer | Show layer Time’s Up when the animation Exit on red completes if timer = value True | 赤い図形が見えなくなった時にTime's Upレイヤーを表示させるため。 |
レイヤーは以下のような感じです。
時間切れになると自動的に[Time's Up]レイヤーが表示されるので、学習者がCheckボタンをクリックして問題に正解したかどうかを確認する時間がありません。そのため、このレイヤーに以下のトリガーを追加しました。
変数名 | トリガー | 目的 |
answer と a | Multiply answer by variable a when the timeline starts on this slide | このレイヤーに正解を表示するため。 |
answer と b | Multiply answer by variable b when the timeline starts on this slide | 同上 |
次に、学習者が[Next]をクリックすると[Fail]スライドにジャンプするトリガーを追加し、自分のスコアが表示され、もう一度プレイするかどうか決められるようにしました。
変数名 | トリガー | 目的 |
n/a | Jump to 1.4 Fail when the user clicks Next button | 最終的な成果を見て、もう一度プレーする機会を与えます。 |
最後に、メインクイズスライドの各レイヤーの設定を調整し、学習者が算数問題を解いているときだけタイマーが作動し、フィードバックを表示しているときには作動しないようにしました。これを行うには、プロパティアイコンをクリックし、ベースレイヤーのタイムラインを一時停止するオプションを選択しました。
8. 仕上げの調整
すべてが思い通りに動くようになったところで、よりゲームらしくするための仕上げをいくつか加えました。例えば、YouTube Studioで見つけた音楽を挿入したり、Freesoundからダウンロードしたサウンドエフェクトをいくつか入れました。また、フェードインやワイプアップのアニメーションを微妙に加えることで、よりスムーズなゲーム体験ができるようになりました。このような小さな工夫が、全体の印象を大きく変えるのです。
まとめ
このプロジェクトでは、ランダム変数を使って算数問題やフレーズを自動生成し、より動的な学習体験を作りました。このゲームをもっと深く掘り下げてみたいですか？ここからファイルをダウンロードできます。
あなたのプロジェクトで変数を使用する方法について、もっとインスピレーションを得たいですか？以下のeラーニングのサンプルをチェックしてみてください。
ここで学んだことを試したい方は、Articulate 360の30日間の無料トライアルをお試しください。ご登録にクレジットカードは必要ありません！！
株式会社ディーシェは日本におけるArticulate製品の販売代理店です