eラーニングデザイナーとして、コースを盛り上げる方法を常に探しているかと思います。コースを盛り上げる楽しい方法の一つはeラーニングに簡単なゲームを組み込むことです。
クロスワードパズルをArticulate Storylineで作成しましたので皆さんに共有したいと思います。これをヒントにアイディアを膨らませてください。
コース主題のインフォーマルな知識チェックやクイズを行うことは、素晴らしいインタラクティブ性になると思います。このインタラクション作成がいかに簡単だったか、プロセスを紹介していきます。
Text Entry Fieldsで単語を作成する
このクロスワードパズルの鍵は、Text Entry Fieldsの使用です。小さい正方形のText Entry Fieldsを挿入し、クロスワードパズルのすべての文字分のText Entry Fieldsをコピーします。この時点では、実際にText Entry Fieldsに文字を入力して単語を完成させ、適切な数のText Entry Fieldsがあることを確認します。最終的には入力した文字は削除します。
このサンプルでは「elearning」という単語を水平の列で配置し、「heroes」という単語を垂直の列で配置しました。この時点で、スライドは次のようになりました。
これらのText Entry Fieldsを配置したら、すべて選択し、塗りつぶしと線の色を編集して、見た目を設定します。Text Entry Fieldsを綺麗に並べるには、Storylineリボンの[Format]タブの下にある整列機能を使うと便利です。
他のスライド要素を追加する
このインタラクションを機能させるには、スライドにさらに要素をいくつか追加する必要があります。まず、右側に二つの単語のヒントを配置しました。次にクロスワードパズルの横に対応する番号を配置しました。最後に、回答が正しいかどうかを確認するボタンを挿入しました。この作業が終わった時点が下図です。
基本の準備ができたので、回答が正しいかどうかをユーザーに伝えるフィードバックレイヤーをいくつか作成します。
フィードバックレイヤーを作成する
フィードバックを提供する方法とタイミングの決定は、インストラクショナルデザイナーにとって課題となるポイントです。今回の場合、学習者に正解/不正解の2つのフィードバックを提供することが最良のアプローチであると判断しました。1つはパズルのすべての単語が正しいと表示、もう1つは少なくとも1つの間違った単語があることを表示します。
ただし、どの単語が間違っているかのフィードバックは説明しません。どこが間違っているかを理解するのは学習者に任せます。
スライドに新しいレイヤーを挿入して「正解」レイヤーを作成しました。フィードバック領域を作成するために、正解フィードバックテキストを含む長方形をヒント領域の上に重ねて挿入し、さらに長方形を緑色にし、正しいことを視覚的に示します。また、すべての回答が正しく入力されるとゲームを終了するためのボタンも追加しました。
正解レイヤーが準備できたので、レイヤーを複製し、不正解フィードバックのためにテキストと図形の色に編集しました。不正解レイヤーのボタンは、ゲームに戻って試行を続けるようにします。
両方のフィードバックレイヤーのレイヤープロパティに移動し、「prevent the user from clicking on the base layer」オプションを有効にすることを忘れないでください。これにより、学習者はフィードバックレイヤーを閉じるまでクロスワードパズルを操作できなくなります。
ほぼ完成です！スライド要素が配置され、フィードバックレイヤーが設定されています。このインタラクションを機能させるための最後のステップは、トリガーを追加することです。
トリガーを追加してインタラクティブ機能を作成する
このクロスワードパズルに必要なトリガーは2つだけです。これを[Verify Answers]ボタンに追加します。
一つ目のトリガーのロジックは、すべてのText Entry Fieldsに正しい値（文字）が入力されていることを確認し、すべて正しい場合は、「Correct（正解）」フィードバックレイヤーを表示します。
二つ目のトリガーのロジックは、1つのText Entry Fieldsに誤った値が含まれている場合、「Incorrect（不正解）」フィードバックレイヤーを表示します。
ロジックを考えて、「Correct（正解）」フィードバックレイヤーを表示するトリガーを作成しました。最初の部分は非常に簡単です。次の図の設定です。
さらに必要なロジックを組み込みます！
トリガーに条件を追加します。条件（Condition）は特定の条件が満たされた場合にのみトリガーが発生するように調整できるif/thenステートメントです。条件を追加するには、[SHOW CONDITIONS]ボタンをクリックし、開いたら[＋]アイコンをクリックします。設定したトリガー条件ウィンドウは次のようになります。
上記の条件では「TextEntry28」の値が文字列「e」だった場合にのみ正しいフィードバックレイヤーが表示されます。（ignore case：大文字小文字は無視する設定）
そしてすべてのText Entry Fieldsに対応するトリガーの確認を忘れないでください。以下の画像をご覧ください。「elearning」という単語の最初の「e」が選択され、それに対応するText Entry変数がトリガーパネル「TextEntry28」で識別され、青色で強調表示されていることがわかります。
クロスワードの各文字に対して条件を追加すると、長い条件が出来上がり、それらのすべての間に「AND」という単語があります。「AND」は、すべての文字を正しく綴るために必要です。以下の画像は、設定した状態を示しています。
時間を節約するために、このトリガーを複製し、「不正解」フィードバックレイヤーを表示するように編集します。条件の各「AND」を「OR」に変更し、さらに全て「Not equal to (ignore case）」に変更します。つまりこれで、Text Entry Fieldsのいずれか1つでも間違った値が含まれている場合、「Incorrect（不正解）」レイヤーが表示されます。トリガー設定は次のようになります。
この2つのトリガーは、このインタラクションを機能させるために必要です。覚えておいていただきたいのは、条件（Condition）も適切に設定することです。
インタラクションが期待通り機能したら、スライドのスタイルを設定します。色をいくつか変更し、フォントスタイルを変更することを検討してください。また、Text Entry Fieldsから表面上の文字を削除し、空白にする必要があります。最終状態を見てみましょう。
これで、Storylineでゲームインタラクションを作成するために行った手順がわかりましたね。コースにゲーミフィケーションの要素を加える場合、変数やText Entry Fieldsなどの機能は、楽しく魅力的なコンテンツを作成するための重要なツールになります。[Downloads]セクションからこのテンプレートを取得して参考にしてください。
関連動画
株式会社ディーシェは日本におけるArticulate製品の販売代理店です
コメント