简体   繁体   中英

Unexpected space under <form> using Mechanical Turk's crowd html elements

I got a weird question on Amazon MTurk's html layout. There is unexpected space under <form> when using the crowd elements by AWS.

Here is a piece of demo code:

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

<crowd-form answer-format="flatten-objects">
    <div>
        <form>
            <p> Some random question</p>
            <input type="radio" name="q-1" value="1"> <label>Choice1</label>
            <br>
            <input type="radio" name="q-1" value="2"> <label>Choice2</label>
            <br>
            <input type="radio" name="q-1" value="3"> <label>Choice3</label>
        </form>
     </div>      
<p> Some random text to test the space after `form` </p>
</crowd-form>

which produces a multi-choice question with a ton of spaces (the second pic is directly after the first one -- but I have to screenshot two separate ones as the space is too long).

在此处输入图像描述 在此处输入图像描述

However , when commenting out the crowd html line, everything seems just fine:

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

<crowd-form answer-format="flatten-objects">
    <div>
        <form>
            <p> Some random question</p>
            <input type="radio" name="q-1" value="1"> <label>Choice1</label>
            <br>
            <input type="radio" name="q-1" value="2"> <label>Choice2</label>
            <br>
            <input type="radio" name="q-1" value="3"> <label>Choice3</label>
        </form>
     </div>      
<p> Some random text to test the space after `form` </p>
</crowd-form>

which produces the following:

在此处输入图像描述

Does anyone know why this happens, and how I could fix it if I still want to use the crowd form? Thanks!

You should omit the <form> elements.

<crowd-form> takes care of all the form submission for you.

You need to include (not comment out) the Crowd HTML Elements script import:

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

Hope this helps.

Please let me know if you have additional questions.

Thank you,

Amazon Mechanical Turk

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM