Sentiment Analysis Demo

by MTGT_Fiddle_Manager

HTML

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
  <crowd-classifier
    name="intent"
    categories="['buy', 'eat', 'watch', 'browse', 'leave']"
    header="Pick the most relevant intent expressed by the text below"
  >
    <classification-target>
      I could go for a slice of pizza right about now.
    </classification-target>
    
    <full-instructions header="Emotion Classification Instructions">
      <p>In the statements and questions provided in this exercise, what category of action is the speaker interested in doing?</p>
          <table>
            <tr>
              <th>Example Utterance</th>
              <th>Good Choice</th>
            </tr>
            <tr>
              <td>When is the Seahawks game on?</td>
              <td>
                eat<br>
                <greenbg>watch</greenbg>
                <botchoice>browse</botchoice>
              </td>
            </tr>
            <tr>
              <th>Example Utterancee</th>
              <th>Bad Choice</th>
            </tr>
            <tr>
                    <tr>
              <td>When is the Seahawks game on?</td>
              <td>
                buy<br>
                <greenbg>eat</greenbg>
                <botchoice>watch</botchoice>
              </td>
            </tr>
          </table>
    </full-instructions>

    <short-instructions>
      What is the speaker expressing they would like to do next?
    </short-instructions>  
  </crowd-classifier>
</crowd-form>

CSS

greenbg {
  background: #feee23;
  display: block;
}

table {
  *border-collapse: collapse; /* IE7 and lower */
  border-spacing: 0; 
}

th, tfoot, .fakehead {
  background-color: #8888ee;
  color: #f3f3f3;
  font-weight: 700;
}

th, td, tfoot {
    border: 1px solid blue;
}

th:first-child {
  border-radius: 6px 0 0 0;
}

th:last-child {
  border-radius: 0 6px 0 0;
}

th:only-child{
  border-radius: 6px 6px 0 0;
}

tfoot:first-child {
  border-radius: 0 0 6px 0;
}

tfoot:last-child {
  border-radius: 0 0 0 6px;
}

tfoot:only-child{
  border-radius: 6px 6px;
}

td {
  padding-left: 15px ;
  padding-right: 15px ;
}

botchoice {
  display: block;
  height: 17px;
  width: 490px;
  overflow: hidden;
  position: relative;
  background: #fff;
  padding-bottom: 20px;
}

botchoice:after {
  position: absolute;
  bottom: 0;
  left: 0;  
  height: 100%;
  width: 100%;
  content: "";
  background: linear-gradient(to top,
     rgba(255,255,255, 1) 55%, 
     rgba(255,255,255, 0) 100%
  );
  pointer-events: none; /* so the text is still selectable */
}