crowd-checkbox

Composant d'interface utilisateur qui peut être coché ou décoché et permet à l'utilisateur de sélectionner plusieurs options d'un ensemble.

Consultez un exemple interactif d'un modèle HTML qui utilise cet élément HTML Crowd dans CodePen.

Voici un exemple de modèle Liquid qui utilise l'élément <crowd-checkbox>. Copiez le code suivant et enregistrez-le dans un fichier avec l'extension .html. Ouvrez le fichier dans n'importe quel navigateur pour prévisualiser et interagir avec ce modèle.

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  
  <p>Find the official website for: <strong>{{ task.input.company }}</strong></p>
  <p>Do not give Yelp pages, LinkedIn pages, etc.</p>
  <p>Include the http:// prefix from the website</p>
  <crowd-input name="website" placeholder="http://example.com"></crowd-input>

  <crowd-checkbox name="website-found">Website Found</crowd-checkbox>

</crowd-form>

Attributs

Les attributs suivants sont pris en charge par cet élément.

checked

Commutateur booléen qui, s'il est présent, affiche la case comme cochée.

Voici un exemple de syntx utilisée pour cocher une case par défaut.

  <crowd-checkbox name="checkedBox" value="checked" checked>This box is checked</crowd-checkbox>

disabled

Commutateur booléen qui, s'il est présent, affiche la case comme décochée et empêche celle-ci d'être cochée.

Voici un exemple de syntaxe utilisée pour désactiver une case à cocher.

  <crowd-checkbox name="disabledCheckBox" value="Disabled" disabled>Cannot be selected</crowd-checkbox>

name

Chaîne utilisée pour identifier la réponse envoyée par l'employé. Cette valeur correspondra à une clé dans l'objet JSON qui spécifie la réponse.

obligatoire

Commutateur booléen qui, s'il est présent, nécessite une saisie de la part de l'employé.

Voici un exemple de syntaxe utilisée pour exiger une case à cocher.

  <crowd-checkbox name="work_verified" required>Instructions were clear</crowd-checkbox>

value

Chaîne utilisée comme nom pour l'état de la case à cocher dans la sortie. La valeur par défaut est « on » si elle n'est pas spécifiée.

Hiérarchie des éléments

Les éléments parents et enfants de cet élément sont les suivants :

• Éléments parents : crowd-form

• Éléments enfants : aucun

Sortie

Fournit un objet JSON. La chaîne name est le nom de l'objet et la chaîne value est le nom de propriété de la valeur booléenne en fonction de l'état de la case à cocher. La valeur est true si elle est cochée et false si elle ne l'est pas.

Exemple : Exemples de sorties de l'élément

Utilisation de la même valeur name pour plusieurs cases.

<!-- INPUT -->  
<div><crowd-checkbox name="image_attributes" value="blurry"> Blurry </crowd-checkbox></div>
<div><crowd-checkbox name="image_attributes" value="dim"> Too Dim </crowd-checkbox></div>
<div><crowd-checkbox name="image_attributes" value="exposed"> Too Bright </crowd-checkbox></div>

//Output with "blurry" and "dim" checked
[
  {
    "image_attributes": {
      "blurry": true,
      "dim": true,
      "exposed": false
    }
  }
]

Notez que les trois valeurs de couleur sont des propriétés d'un même objet.

Utilisation d'une valeur name différente pour chaque case.

<!-- INPUT -->
<div><crowd-checkbox name="Stop" value="Red"> Red </crowd-checkbox></div>
<div><crowd-checkbox name="Slow" value="Yellow"> Yellow </crowd-checkbox></div>
<div><crowd-checkbox name="Go" value="Green"> Green </crowd-checkbox></div>

//Output with "Red" checked
[
  {
    "Go": {
      "Green": false
    },
    "Slow": {
      "Yellow": false
    },
    "Stop": {
      "Red": true
    }
  }
]

Voir aussi

Pour plus d’informations, consultez les rubriques suivantes.

• Utilisation d'Amazon SageMaker Ground Truth pour étiqueter les données

• Référence des éléments HTML crowd