2020年9月1日読了時間: 5分

Storylineでクロスワードパズルを作成する方法

更新日：2023年11月22日

原文「Here’s How to Build a Cool Crossword Puzzle for Storyline in No Time」

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から表面上の文字を削除し、空白にする必要があります。最終状態を見てみましょう。