Adobe Captivate のドラッグ&ドロップインタラクションでは、ユーザーがアイテムのグループの関連するアイテムと一致するかどうかをテストします。

アセットとサンプル

この文書の手順では、画像や Adobe Captivate プロジェクトファイルのサンプルなどのアセットを使用する必要があります。 独自のアセットとサンプルを使用することもできます。 ただし、次の zip ファイルをコンピューターにダウンロードして展開することをお勧めします。

drag-drop-interactions.zip

最初のドラッグ&ドロップインタラクションを作成する

国と首都を一致させる、基本的なドラッグ&ドロップインタラクションを作成しましょう。 

  1. 空白のプロジェクトを開きます。

  2. ツールバーのスライドメニューから「空白のスライド」を追加します。

  3. スライドに同梱されている zip ファイルから、スライドにモニュメントと国の画像を追加します。 以下の画像を確認してください。

    CC1
  4. 挿入メニューから、ドラッグ&ドロップインタラクションのウィザードを起動します。

  5. ウィザードの最初の手順で、モニュメントをドラッグソースとして設定します。 モニュメントを同時に選択するには、Ctrl キーを押しながらクリックします。 「次へ」をクリックします。

    CC2
  6. ウィザードの 2 番目の手順で、国をドロップターゲットとして設定します。 国を同時に選択するには、Ctrl キーを押しながらクリックします。 「次へ」をクリックします。

    CC3
  7. 3 番目の手順で、モニュメントをそれぞれの国に関連付けます。 ドラッグソースの中央のハンドルをドラッグし、各ドロップターゲットにドロップします。 「完了」をクリックして、ウィザードを閉じます。

    CC4
  8. ウィザードの最後の手順で、成功時のテキストをここに入力と、失敗時のテキストをここに入力の、2 つのテキストキャプションが表示されます。これらのキャプションをクリックして、ユーザーが成功または失敗したときに受け取るフィードバックメッセージを編集します。 色、サイズ、配置、フォントスタイルなど、テキストのプロパティをカスタマイズすることもできます。

    送信」ボタンも、ウィザードの最後のステップでスライドに表示されます。したがって、ユーザーは、与えられたタスクを完了するために「送信」をクリックすることになります。

    CC5
  9. ユーザーが複数回試行できるようにすることができます。 プロパティインスペクタードラッグ&ドロップタブ/アクションセクションに移動し、試行回数を変更します。

    このオプションを選択すると、ユーザーが行ったインタラクションを次の試行の前にリセットすることもできます。 同じアクションセクションで、リセットの下のすべてリセットを選択します。

  10. 回答を提出する代わりに、よりインタラクティブな方法で、ユーザーに作業をしてもらうこともできます。

    1. ドロップターゲットを選択します。 プロパティインスペクタードラッグ&ドロップタブ/フォーマット  セクションに移動し、「オブジェクトアクション」ボタンをクリックします。
    2. 承認したドラッグソースダイアログボックスが開きます。
    3. すべてを承認」を選択解除し、「カウント」を編集して試行回数を設定します。次に、選択したドロップターゲットの許容されるドラッグソースをチェックします。 同様に、その他のドロップターゲットの許容されるドラッグソースも設定します。
  11. 動作中のドラッグ&ドロップインタラクションを確認するには、「プレビュー」をクリックします。

ドラッグ&ドロップインタラクションのカスタマイズ

ドラッグソースとドロップターゲットにエフェクトを適用する

ドラッグソースをドロップターゲットにドロップしながら、ビジュアルエフェクトを作成できます。 ドラッグソースを選択し、プロパティインスペクタードラッグ&ドロップタブ/、フォーマット  セクションに移動し、「ズームイン」または「グロー」オプションを選択します。

同様に、ドロップターゲットに対してもズームインエフェクトを設定することができます。

表示メッセージを設定する

オプションで、マッチングが正しいか間違っているかのメッセージ、またはヒントを表示することができます。

ドロップターゲットを選択し、プロパティインスペクタードラッグ&ドロップタブに移動し、表示の下の「承認オン」オプションを選択します。成功時のテキストキャプションがスライドに表示されます。 成功メッセージを設定できます。

同様に、拒否オンオプション、またはヒント  オプションをチェックして、適切なメッセージを設定することができます。

インタラクションプロパティの使用

ユーザーが誤ってドラッグソースを移動した場合は、ドラッグソースを元の位置に送るように選択できます。 また、正しい場所にドロップしなかったときに、ユーザーにもう一度ドラッグさせることもできます。 これらのアクションを実施するためにドラッグ&ドロップタブの下のオプションパネルのインタラクションプロパティを使用してください。

redrag_option

レスポンシブドラッグ&ドロップインタラクションの作成

  1. レスポンシブプロジェクトを開きます。

  2. ツールバーから、2 つの垂直方向の Fluid Box を挿入します。 

  3. 一番上の行と一番下の行に、3 つの水平方向の Fluid Box を挿入します。 

    cc_responsive_1
  4. 前のセクションと同様に、同梱されている zip ファイルから、スライドにモニュメントと国の画像を追加します。

  5. Fluid Box を個々の画像の周りに合わせて調整します。

    cc_responsive_2
  6. プレビュースライダーを移動して、画像が様々なフォームファクターでどのように表示されるかを確認します。 例えば、次の画像は iPad での表示方法を示しています。

    cc_responsive_3
  7. ドラッグ&ドロップインタラクションウィザードを起動します。 

  8. ドラッグソース、ドロップターゲットを設定し、前のセクションと同様にそれらを関連付けます。 また、成功時および失敗時のフィードバックテキストキャプションを編集します。

  9. プロジェクトをプレビューします。

ドラッグ&ドロップインタラクションでタイプを使用する

ドラッグ&ドロップインタラクションを使用して、ユーザーがアイテムのコレクションから類似したアイテムをグループ化できるようにすることもできます。 この作業は、タイプオプションを使用して行います。 例えば、果物と野菜が混ざっている状態からこれらを分けるプロジェクトを作成しましょう。

Drag-and-drop
  1. 空白のプロジェクトを開きます。

  2. ツールバーのスライドメニューから「空白のスライド」を追加します。

  3. スライドに同梱されている zip ファイルから、スライドに果物と野菜の画像を追加します。

    dnd-_fv1
  4. ドラッグ&ドロップインタラクションウィザードを起動します。

  5. 最初に、すべての果物と野菜のアイテムをドラッグソースとして設定します。 その間に、タイプを使用してそれらを別々のグループに分類します。 このタスクは、次の 2 段階で完了できます。

    1. すべての果物アイテムを同時に選択します。 このグループに果物という名前を付けるには、ウィザードツールバーでタイプに追加オプションの + 記号をクリックします。
    2. 同様に、すべての野菜アイテムを同時に選択し、野菜という名前のタイプを作成します。

    次へ」をクリックします。

    DnD-FV3
    DnD-FV4
  6. ドロップターゲットとしてバスケットを選択します。 「次へ」をクリックします。

    DnD-FV5
  7. 果物アイテムの 1 つの中心のハンドルをドラッグし、フルーツバスケットに向けます。 アイテムをドラッグすると、他のすべての果物アイテムも自動的にフルーツバスケットを指します。 同様に、野菜アイテムを野菜バスケットに関連付けると、他のすべての野菜アイテムもバスケットに関連付けられます。 「完了」をクリックします。

    DnD-FV6
  8. 成功と失敗のメッセージを設定します。 また、テキストキャプションを追加し、3 回の試行が可能と名付けます。

  9. ユーザーが複数回試行できるようにすることができます。 プロパティインスペクタードラッグ&ドロップタブ/、アクションセクションに移動し、試行回数を 3 に変更します。

    このオプションを選択すると、ユーザーが行ったインタラクションを次の試行の前にリセットすることもできます。 同じアクションセクションで、リセットの下のすべてリセットを選択します。

    DnD-FV7
  10. 実行中にインタラクションを表示するには、「プレビュー」をクリックします。

Adobe Captivate クイズにドラッグ&ドロップインタラクションを含める

通常のクイズ質問に加えて、ドラッグ&ドロップインタラクションでも採点できるように、Adobe Captivate クイズにドラッグ&ドロップインタラクションを含めることができます。

この記事の最初のセクションのドラッグ&ドロップインタラクションをクイズに追加してみましょう。

  1. 空白のプロジェクトを開きます。

    タイトルに「クイズを開始」と名前を付けます。

    また、ツールバーのシェイプメニューから、開始記号が付いたボタンをスライドに追加します。プロパティインスペクター/「プロパティ」タブ/「アクション」セクションを開き、成功時次のスライドに移動に設定します。

  2. シンプルなドラッグ&ドロップインタラクションを作成するには、最初のドラッグ&ドロップインタラクションを作成するセクションの手順 3 ~ 8 を実行します。

  3. フィルムストリップでドラッグ&ドロップスライドを選択します。 プロパティインスペクタードラッグ&ドロップタブ/アクションセクションに移動し、報告の下のクイズに挿入を選択します。クイズに挿入が選択されると、合計に追加が自動的に選択されます。

    また、セッションでユーザーから与えられた回答を収集し、LMS に送信してレポートとしてパブリッシュすることもできます。 このオプションを使用するには、報告の下の  解答を報告するをチェックします。

  4. ユーザーが回答を提出した後にユーザーにスコアを表示する方法

    1. メニューバーのクイズメニューに移動し、「クイズ環境設定」を選択します。
    2. クイズ環境設定ダイアログボックスが開きます。 ダイアログボックスで、カテゴリーペイン/クイズの下で、「設定」を選択します。
    3. クイズの最後にスコアを表示を選択します。ドラッグ&ドロップインタラクションスライドの後に、クイズ結果スライドが追加されます。
    dnd_quiz_menu
  5. ドラッグ&ドロップスライドからフィードバックのテキストキャプションを削除します。

  6. 実行中のクイズを表示するには、プロジェクトをプレビューします。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー