crowd-card

情報を表示するための外観が向上したボックス。

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

<crowd-card> 要素を使用する感情分析タスク用に設計された Liquid テンプレートの例を次に示します。次のコードをコピーし、拡張子 .html でファイルに保存します。任意のブラウザでファイルを開き、このテンプレートをプレビューして操作します。

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

<style>
  h3 {
    margin-top: 0;
  }
  
  crowd-card {
    width: 100%;
  }
  
  .card {
    margin: 10px;
  }
  
  .left {
    width: 70%;
    margin-right: 10px;
    display: inline-block;
    height: 200px;
  }
  
  .right {
    width: 20%;
    height: 200px;
    display: inline-block;
  }
</style>

<crowd-form>
  <short-instructions>
    Your short instructions here.
  </short-instructions>
  
  <full-instructions>
    Your full instructions here.
  </full-instructions>
  
  <div class="left">
    <h3>What sentiment does this text convey?</h3>
    <crowd-card>
      <div class="card">
        Nothing is great.
      </div>
    </crowd-card>
  </div>
  
  <div class="right">
    <h3>Select an option</h3>
    
    <select name="sentiment1" style="font-size: large" required>
      <option value="">(Please select)</option>
      <option>Negative</option>
      <option>Neutral</option>
      <option>Positive</option>
      <option>Text is empty</option>
    </select>
  </div>
  
  <div class="left">
    <h3>What sentiment does this text convey?</h3>
    <crowd-card>
      <div class="card">
        Everything is great!
      </div>
    </crowd-card>
  </div>
  
  <div class="right">
    <h3>Select an option</h3>
    
    <select name="sentiment2" style="font-size: large" required>
      <option value="">(Please select)</option>
      <option>Negative</option>
      <option>Neutral</option>
      <option>Positive</option>
      <option>Text is empty</option>
    </select>
  </div>
</crowd-form>

属性

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

heading

ボックスの上部に表示されるテキスト。

イメージ

ボックス内に表示されるイメージの URL。

要素の階層

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

• 親要素: crowd-form

• 子要素: なし

以下の資料も参照してください。

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

• Amazon を使用する SageMaker ラベル付けデータの Ground Tru

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