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:
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>
Hi @Ntiyiso Ngonyama,
Thank you for your response. I took the code in the documentation (https://docs.aws.amazon.com/sagemaker/latest/dg/sms-ui-template-crowd-entity-annotation.html) and only added the previously mentioned line ( <input type="hidden" name="fake" />). That gives me two submit buttons. I am not sure if there is any other expression for the button. I have edited my post with the exact code I used.