crowd-radio-button

オンかオフのいずれかにできるボタン。ラジオボタンがラジオグループ内にあるとき、グループのラジオボタンをいつでも 1 つだけオンにすることができます。以下に、crowd-radio-group 要素の中に crowd-radio-button 要素を設定する方法の例を示します。

この Crowd HTML 要素を使用する HTML テンプレートのインタラクティブな例については、「」を参照してくださいCodePen。

<crowd-radio-button> 要素で使用できる構文の例を次に示します。次のコードをコピーし、拡張子 .html でファイルに保存します。任意のブラウザでファイルを開き、このテンプレートをプレビューして操作します。

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
<crowd-radio-group>
    <crowd-radio-button name="tech" value="tech">Technology</crowd-radio-button>
    <crowd-radio-button name="politics" value="politics">Politics</crowd-radio-button>
</crowd-radio-group>
</crowd-form>

前の例は、次の GitHub 例のカスタムワーカータスクテンプレートで確認できます: エンティティ認識ラベル付けジョブカスタムテンプレート。

Crowd HTML Element のラジオボタンは HTML タグ required をサポートしていません。ラジオボタンの選択を必須にするには、<input type="radio"> 要素を使用してラジオボタンを作成し、required タグを追加します。ラジオボタンの同じグループに属するすべての <input> 要素の name 属性は、同じでなければなりません。例えば、次のテンプレートでは、ユーザーは送信前に animal-type グループのラジオボタンを選択する必要があります。

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
  <p>Select an animal type:</p>
<img src="https://images.unsplash.com/photo-1537151608828-ea2b11777ee8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1539&q=80" style="height: 500; width: 400;"/>
<br><br>
<div>
  <input type="radio" id="cat" name="animal-type" value="cat" required>
  <label for="cat">Cat</label>
</div>
<div>
  <input type="radio" id="dog" name="animal-type" value="dog">
  <label for="dog">Dog</label>
</div>
<div>
  <input type="radio" id="unknown" name="animal-type" value="unknown">
  <label for="unknown">Unknown</label>
</div>
    <full-instructions header="Classification Instructions">
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
    </full-instructions>
    <short-instructions>
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
    </short-instructions>
</crowd-form>

属性

次の属性が、この要素でサポートされています。

checked

ブールスイッチ。存在する場合、ラジオボタンをオンの状態として表示します。

無効

ブールスイッチ。存在する場合、ボタンを無効なものと表示して、オンにされることを防止します。

name

ワーカーによって送信された回答を識別するために使用される文字列。この値は、回答を指定する JSON オブジェクトのキーに一致します。

注記

crowd-radio-group 要素外のボタンを使用するが、同じ name 文字列および異なる value 文字列を使用する場合、出力の name オブジェクトには各 value 文字列のブール値が含まれます。グループにある 1 つのボタンのみ選択されるようにするため、それらを crowd-radio-group 要素の子にして異なる名前の値を使用してください。

value

要素のブール値のプロパティ名。指定がない場合は、デフォルトとして "on" が使用されます。例えば、{ "<name>": { "<value>": <true or false> } } です。

要素の階層

この要素には、以下の親および子要素があります。

• 親要素: crowd-radio-group

• 子要素: なし

出力

パターンが { "<name>": { "<value>": <true or false> } } のオブジェクトを出力します。crowd-radio-group 要素外のボタンを使用するときに、同じ name 文字列および異なる value 文字列を使用する場合、name オブジェクトには各 value 文字列のブール値が含まれます。ボタンのグループにある 1 つだけが選択されるようにするため、それらを crowd-radio-group 要素の子にして異なる名前の値を使用してください。

例 この要素のサンプル出力

[
  {
    "btn1": {
      "yes": true
    },
    "btn2": {
      "no": false
    }
  }
]

その他の参照資料

詳細については、以下を参照してください。

• Amazon SageMaker Ground Truth を使用してデータにラベルを付ける

• Crowd HTML 要素のリファレンス