Two Submit Buttons in Mechanical Turk UI

0

When using the HTML code found in the AWS SageMaker docs for the crowd-entity-annotation UI, I found that the demo code they provide (in https://docs.aws.amazon.com/sagemaker/latest/dg/sms-ui-template-crowd-entity-annotation.html) does not work when creating a layout in MTurk Requester Sandbox. It only works when I add this line:

 <input type="hidden" name="fake" />

outside of the </crowd-entity-annotation> element. However, in the preview, and when I publish the HIT, the UI has two submit buttons, one orange and one gray:

Enter image description here

A disclaimer needed to be added to make sure the workers did not press the wrong button. This is confusing and leads to poor quality data. How can I correct this? Full code:

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

<crowd-entity-annotation
  name="crowd-entity-annotation"
  header="Highlight parts of the text below"
  labels="[{'label': 'person', 'shortDisplayName': 'per', 'fullDisplayName': 'Person'}, {'label': 'date', 'shortDisplayName': 'dat', 'fullDisplayName': 'Date'}, {'label': 'company', 'shortDisplayName': 'com', 'fullDisplayName': 'Company'}]"
  text="Amazon SageMaker Ground Truth helps you build highly accurate training datasets for machine learning quickly."
>
  <full-instructions header="Named entity recognition instructions">
    <ol>
      <li><strong>Read</strong> the text carefully.</li>
      <li><strong>Highlight</strong> words, phrases, or sections of the text.</li>
      <li><strong>Choose</strong> the label that best matches what you have highlighted.</li>
      <li>To <strong>change</strong> a label, choose highlighted text and select a new label.</li>
      <li>To <strong>remove</strong> a label from highlighted text, choose the X next to the abbreviated label name on the highlighted text.</li>
      <li>You can select all of a previously highlighted text, but not a portion of it.</li>
    </ol>
  </full-instructions>

  <short-instructions>
    Apply labels to words or phrases.
  </short-instructions>

    <div id="additionalQuestions" style="margin-top: 20px">
      <h3>
        What is the overall subject of this text?
      </h3>
      <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>
      <h2>
      Press the orange colored submit button when you are done! Do NOT press the gray colored submit button!
      </h2>
    </div>
</crowd-entity-annotation>
 <input type="hidden" name="fake" />

<script>
  document.addEventListener('all-crowd-elements-ready', () => {
    document
      .querySelector('crowd-entity-annotation')
      .shadowRoot
      .querySelector('crowd-form')
      .form
      .appendChild(additionalQuestions);
  });
</script>
asked 2 years ago352 views
1 Answer
0

Hi there,

Are you certain that there isn't a lingering expression for the button after the code for the edited UI?

answered 2 years ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions