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>
gefragt vor 2 Jahren359 Aufrufe
1 Antwort
0

Hi there,

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

beantwortet vor 2 Jahren

Du bist nicht angemeldet. Anmelden um eine Antwort zu veröffentlichen.

Eine gute Antwort beantwortet die Frage klar, gibt konstruktives Feedback und fördert die berufliche Weiterentwicklung des Fragenstellers.

Richtlinien für die Beantwortung von Fragen