Adobe Captivate でテキスト入力ボックスを追加する

テキスト入力ボックスは、ユーザーがテキストを入力できるテキストフィールドです。テキスト入力ボックスは、ユーザーの知識をテストするのに非常に役立ちます。ユーザーが質問に答えると、テキスト入力ボックスの作成時に設定しておいた解答とユーザーの解答が照合されます。必要に応じてヒントを提示することもできます。

テキスト入力ボックスの追加

  1. テキスト入力ボックスを追加するスライドを開きます。

  2. テキスト/テキスト入力ボックスをクリックします。スライドにテキスト入力ボックスが表示されます。

    テキスト入力ボックスの起動
    テキスト入力ボックスの起動

  3. 目的に合わせて、テキスト入力ボックスのサイズの設定、ドラッグによる位置変更を行います。

    テキスト入力ボックスの試し
    テキスト入力ボックスの試し

  4. テキスト入力ボックスのプロパティを変更するには、ボックスをクリックし、プロパティインスペクターでプロパティを変更します。

テキスト入力ボックスのプロパティ

テキスト入力ボックスのプロパティを表示するには、スライドでそのテキスト入力ボックスを選択します。プロパティインスペクターに、テキスト入力ボックスのプロパティが表示されます。

プロパティを変更すると、テキスト入力ボックスの選択したインスタンスに変更が瞬時に適用されます。すべてに適用アイコンをクリックして、プロジェクト内のすべてのクリックボックスまたは同じオブジェクトスタイルを使用するクリックボックスに変更を適用します。

テキスト入力ボックス

テキスト入力ボックスの名前プロパティ
テキスト入力ボックスの名前プロパティ

1

テキスト入力ボックスの固有の名前を入力します。ボックスを表示するかどうかの条件を定義するときに、この名前を使用できます。

2

プロジェクトの再生時にテキスト入力ボックスを非表示にする場合は、このオプションの選択を解除します。スライドの開始やスライドの終了などの特定のイベントが発生したときに、オブジェクトを表示できます。詳しくは、オブジェクトの表示の制御を参照してください。

3

テキスト入力ボックスのスタイルを選択します。新しいスタイルを定義するには、編集/オブジェクトスタイルマネージャーを選択します。オブジェクトスタイルについての詳しい情報は、オブジェクトスタイルをご覧ください。

スタイルタブ

スタイルタブのプロパティ
スタイルタブのプロパティ

1

テキスト入力ボックスに表示されるデフォルトのテキストを表示します。ユーザーは、表示されているテキストを上書きして解答を入力できます。例えば、テキスト入力ボックスのデフォルトのテキストを「ここに解答を入力」に設定できます。

2

ユーザーが「戻る」ボタンを使用してこのスライドに戻ったときに、前に入力した解答をユーザーに表示します。

3

テキスト入力ボックス枠の表示を有効または無効にします。テキスト入力ボックスの隅を非表示にする場合は、このオプションを選択します。

4

テキスト入力ボックスにアスタリスクを表示して、ボックスがパスワードフィールドであることを示します。

5

ユーザーが入力した内容を検証します。テキスト入力ボックスはフォームフィールドのように動作し、どのようなユーザー入力も受け入れます。

6

次のオプションを指定できます。

  • 上限数:入力の上限となる文字数。
  • 自動送信:このオプションは、文字数制限を指定した場合に有効化されます。このオプションを有効化すると、上限に達すると「送信」ボタンをクリックしなくても自動的にユーザー入力が送信されます。
  • 数:ユーザーに数字のみを入力させる場合にクリックします。
  • 大文字:テキスト入力ボックスに大文字のみを入力させる場合にクリックします。ボックスに入力されたすべての文字は、ユーザーが小文字で入力しても、自動的に大文字に変換されます。
  • 小文字:テキスト入力ボックスに小文字のみを入力させる場合にクリックします。ボックスに入力されたすべての文字は、ユーザーが大文字で入力しても、自動的に小文字に変換されます。
  • なし :クリックして、設定した制限(数字、大文字、または小文字)をすべて削除します。

7

ユーザーがテキスト入力ボックスに入力した値を格納する変数の名前を示します。別の変数名を指定するには、「X」アイコンをクリックし、変数の名前を入力してOKをクリックします。

テキストのプロパティ

テキストのプロパティ
テキストのプロパティ

1

テキスト入力ボックスの背景色を示します。色を変更するには、「塗りつぶし」ボックスをクリックし、カラーパレットで色をクリックします。

2

次のフォントプロパティを設定します。

  • 文字
  • スタイル
  • サイズ
  • 形式

3

次のプロパティを設定します。

  • シャドウ:チェックボックスを選択すると、テキスト入力ボックスにシャドウが適用されます。
  • 方向:方向(内側または外側)を選択します。選択した方向のプレビューがステージ上に表示されます。
  • プリセット:プリセットの画像いずれかをクリックすると、標準的な角度、距離、ぼかし、色の設定でシャドウを適用できます。これらの設定項目は、「シャドウ」アコーディオン内の該当するオプションを使用してカスタマイズできます。
  • 色:シャドウの色を選択する場合は、このオプションを選択します。横のフィールドでは、その色のアルファ値(パーセント)を指定します。
  • ぼかし:シャドウのぼかし値(ピクセル数)を指定します。
  • 角度:シャドウの角度を指定します。
  • 距離:シャドウを表示する距離(ピクセル数)を指定します。
  • リフレクション:チェックボックスを選択すると、テキストキャプションにリフレクションが追加されます。プリセットを 1 つ選択します。
注意:

このセクションのプロパティを変更した場合は、「一般」セクションのオブジェクトスタイルの先頭に「+」記号が表示されます。この記号は、スタイルが現在上書き状態であることを示しています。オブジェクトスタイルについて詳しくは、「オブジェクトスタイル」を参照してください。

「アクション」タブ

「アクション」タブのプロパティ
「アクション」タブのプロパティ

1

ユーザーがボックスをクリックしたときに発生するイベントを指定します。使用可能なオプションの説明は、インタラクティブなオブジェクトを使用したプロジェクトのナビゲーションを参照してください。

2

ユーザーが試行できる回数に制限はありません。

3

指定したアクションが実行される前にユーザーが質問を試行できる回数を指定します。デフォルトでは、試行できる回数に制限はありません。数を指定するには、最初に試行回数無制限の選択を解除し、「試行」オプションに関連付けられている数値をクリックします。

4

マウスクリックに対応するキーボードショートカットを指定できます。ユーザーは、マウスの代わりにキーボードショートカットを使用できます。例えば、マウスクリックのキーボードショートカットとして Control + Shift + Enter を選択した場合を考えます。ユーザーがこのキーの組み合わせを使用すると、クリックが正解(ボックス内のクリック)として処理されます。ユーザーが間違った組み合わせを押した場合は、ボックスの外側のクリック操作として扱われます。

注意: Adobe Captivate プロジェクトをブラウザーで表示する場合、ブラウザーでよく使用するショートカットキーを避けて設定します。例えば、F1 はヘルプを表示するショートカットキーによく使用されています。Ctrl キー、Alt キー、Shift キーは、Macintosh® コンピューターでは Control キー、Option キー、Shift キーにそれぞれ対応します。

5

ユーザーが Enter キーまたは Tab キーを押したときに実行されるアクションを選択します。

成功および失敗テキストのオプション

成功および失敗オプション
成功および失敗オプション

1 このオプションを 選択し、 ユーザーが正解を送信したときに表示されるキャプションを含みます。
2 このオプションを  選択し、 ユーザが不正解を送信したときに表示されるキャプションを含みます。
3 このオプションを 選択し、 ユーザーへのヒントを指定します。ヒントは、ユーザーがクリックボックスの上にマウスを移動したときに表示されます。
4 成功時および失敗時のキャプションがすべて表示されるまでプロジェクトを一時停止する場合は、このチェックボックスを選択します。
5 テキスト入力ボックスに「送信」ボタンをデフォルトで追加します。ボタンのラベルやラベル内の文字の書式などのプロパティを変更するには、このボタンをクリックします。
6 ユーザーがテキスト入力ボックスのスペースを超えて入力したときに、スクロールバーを表示します。
7 テキスト入力ボックスを現在のクイズの質問と見なします。このボックスに割り当てた点数は現在のクイズのスコアに追加されます。
8 質問に割り当てる得点です。最大で 100 点、最小で 0 点です。このテキスト入力ボックスに割り当てた点数は現在のクイズのスコアに追加されます。
9 正解がクリックされたときの点数を合計スコアに含めます。
10 クイズのスコアを学習管理システム(LMS)に送信します。
11 追跡情報を学習管理システムに送信します。学習管理システムで指定されているインタラクション ID を使用します。

「オプション」タブ

「オプション」タブのプロパティ
「オプション」タブのプロパティ

1

音声をクリックボックスに関連付けることができます。

2

テキスト入力ボックスの正確なサイズや位置をピクセル単位で定義するには、このセクションを使用します。このセクションでは、テキスト入力ボックスの回転を指定することもできます。

  • X : X 軸上でのテキスト入力ボックスの位置です。
  • Y : Y 軸上でのテキスト入力ボックスの位置です。
  • W : テキスト入力ボックスの幅です。
  • H : テキスト入力ボックスの高さです。

3

  • 縦横比:テキスト入力ボックスのサイズを変更するときに、高さと幅の比率を維持します。
  • 角度:テキスト入力ボックスの回転角度です。

タイミングインスペクター

タイミングインスペクタープロパティ
タイミングインスペクタープロパティ

1

テキスト入力ボックスがスライドに表示される期間を指定します。

2

時間を秒単位で指定します。

3

スライドの最初の表示からテキスト入力ボックスの最初の表示までの遅延を指定します。

4

ユーザーがテキスト入力ボックスにテキストを入力できるように、プロジェクトが一時停止するポイントを指定します。ユーザーが正解をクリックするまで、プロジェクトは先に進みません。

例 1 :テキスト入力ボックスの作成

この例で、テキストを取得し、別のスライドのテキストを表示するには、テキスト入力ボックスを使用します。

  1. レスポンシブスライドで、テキスト/テキスト入力ボックスをクリックします。垂直方向の Fluid Box を追加します。

  2. 以下に表示されているものに見えるよう、テキスト入力ボックスを拡張し、展開します。

    テキスト入力ボックスの拡張
    テキスト入力ボックスの拡張

  3. テキスト入力ボックスに対して次のプロパティを設定します。

    • デフォルトのテキストを「ここに解答を記述」に設定します
    • ツールバーから 選択し、 テキストを保持します
    • ツールバーから 選択し、  テキストボックス枠を表示します
    • 最大文字数を 250 に設定します
    例 1 のテキスト入力ボックスプロパティ
    例 1 のテキスト入力ボックスプロパティ

    アクションタブで、次のプロパティを設定します。

    • チェックボックスの受講回数制限なしを選択します
    • 成功ドロップダウンリストの次のスライドに移動を選択します

    また、スクロールバーの表示オプションを選択します。

    例 1 の「アクション」タブのプロパティ
    例 1 の「アクション」タブのプロパティ

  4. スライド#2では、さまざまなテキスト入力ボックスに入力することで、テキスト入力ボックスにテキストを入力して送信をクリックしている際に、そのテキストがスライド#2で表示されます。

    テキストキャプションを入力し、そのキャプション用のプロパティインスペクターで[X] をクリックします。次のプレースフォルダーが表示されます。

    $$Text_Entry_Box1$$

  5. スライド#1では、 Fluid Box のオプションで、以下にあるよう、テキスト入力ボックスでパディングプロパティを設定します。

    例 1 の Fluid Box のプロパティ
    例 1 の Fluid Box のプロパティ

  6. プロジェクトをプレビューします。テキスト入力ボックスにテキストを追加して、送信をクリックすると、そのテキストが 2 番目に表示されます。

    出力テキストの試し
    出力テキストの試し

例 2 :テキスト入力ボックスの作成し、無効な値を確認する

この例では、空欄(無効な値l)を受けいれないテキスト入力ボックスを使用します。テキスト入力ボックスが、事前に定義された値のみを受け入れるようにプロパティを設定します。

  1. 空のスライドにテキストキャプションを挿入します。また、何も値を入力せずに送信ボタンをクリックすると、それに応じて適切なキャプションを表示するスマートシェイプを挿入します。

  2. 2つの変数、 v_ namev_ null を作成します。これらの変数を使用することで、入力された名前が空かそうでないかを比較できます。

  3. 値を比較する高度なアクションを作成し、もしv_nameの値が無効である場合は、最初には表示されていないスマートシェイプが表示されます。

    例 2 の高度なアクション
    例 2 の高度なアクション

    ELSE セクションでは、次のスライドに移動アクションを選択します。

  4. スライド#2では、テキスト入力ボックスに入力した名前を表示するスマートシェイプを挿入します。スマートシェイプには、入力した名前の変数名が含まれています。次の例を参考にしてください。

    こんにちは、$$ v_ name$$

  5. プロジェクトをプレビューします。名前を入力せずに送信ボタンをクリックした場合は、再度実行キャプションが表示されます。

    空欄時の再度実行キャプション
    空欄時の再度実行キャプション

  6. プロジェクトを再度プレビューします。何かテキストを入力して、送信ボタンをクリックします。次のスライドで、入力したテキストが表示されることを確認できます。

    入力したテキストの表示
    入力したテキストの表示

例 3 :成功と失敗キャプションを使ったテキスト入力ボックスの作成

この例では、値を受け入れる時に値により成功もしくは失敗キャプションを表示するテキスト入力ボックスを使用します。

  1. 空のスライドで、テキスト/テキスト入力ボックスをクリックします。

  2. プロパティインスペクターで、「スタイル」タブ内において、ユーザーインプットの確認オプションを選択します。

    プロパティパネルの一般グループからユーザーインプットの確認を選択することによって、正解エントリを設定し、正解エントリーのダイアログボックスで用語を指定できます。

    +をクリックして、さらにエントリを追加します。

    次の例を参考にしてください。

    例 3 の正解エントリ
    例 3 の正解エントリ

  3. 「アクション」タブで、成功失敗ヒントのオプションを選択し、下記にあるようにそれぞれのキャプションを設定します。

    例 3 のオプション
    例 3 のオプション

    また、次の設定を行います。

    • 成功ドロップダウンリストを選択し継続します。
    • 試行回数制限なしチェックボックスを選択します
  4. プロジェクトをプレビューします。Real Madrid を入力して送信をクリックすると、成功のキャプションが表示されます。

    例 3 の正解
    例 3 の正解

  5. プロジェクトを再度プレビューします。Real Madrid 以外を入力して送信をクリックすると、失敗のキャプションが表示されます。

    例 3 の不正解
    例 3 の不正解

サンプルプロジェクトのダウンロード

Captivate で魅力的な学習コンテンツを作成する方法の詳細については、次のプロジェクトをダウンロードします。

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX 2025

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト