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