Add mandatory explanation to category classification

Question

I am trying to create a task in Mechanical Turk that asks annotators to select an option and then explain their selection in a free text. The motivation behind this is to refine my suggested categories.

Using the standard <crowd-classifier> element, I did something like that:

<crowd-form answer-format="flatten-objects">
    <crowd-classifier 
        categories="['are','these','good','categories?']"
        header="header"
        name="test">

        <classification-target> 
            <div><p>some notes `${data}'</p></div>
        </classification-target>

        <short-instructions />
        <full-instructions>
        </full-instructions>
    </crowd-classifier> 
</crowd-form>

The following element could be used to get user input:

<div>
    <p>please explain your selection</p>
    <crowd-input name='reason' placeholder='explanation'/>
</div>

However, if I put it within the <classification-target> element, the design looks weird (classification panel is on the right while the explanation line is on the left), and the explanation is not mandatory. If I put it outside, it is not presented at all.

Any suggestions?

Answer 1

A potential solution without <crowd-classifier> tag:

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<style type="text/css">
    .block {
        display: block;
    }
</style>

<crowd-form answer-format="flatten-objects">
    <short-instructions>
        ...
    </short-instructions>

    <full-instructions>
        ...
    </full-instructions>

    <p>${question}</p>
    <div>
        <label class="block"><input type="radio" id="q1a1" name="q1" value="cls1" required>class1</label>
        <label class="block"><input type="radio" id="q1a2" name="q1" value="cls2">class2</label>
        <label class="block"><input type="radio" id="q1a2" name="q1" value="cls2">class3</label>
    </div>

    <div>
        <p>instruction for open text...</p>
        <crowd-input name='reason' required=true..>
    </div>
</crowd-form>