index.html

<!-- You must include this JavaScript file -->
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<!-- For the full list of available Crowd HTML Elements and their input/output documentation,
      please refer to https://docs.aws.amazon.com/sagemaker/latest/dg/sms-ui-template-reference.html -->

<!-- You must include crowd-form so that your task submits answers to MTurk -->
<crowd-form answer-format="flatten-objects">
<!--
    <crowd-instructions link-text="View instructions" link-type="button">
        <short-summary>
            <p>Provide a brief instruction here</p>
        </short-summary>

        <detailed-instructions>
            <h3>Provide more detailed instructions here</h3>
            <p>Include additional information</p>
        </detailed-instructions>
    
        <positive-example>
            <p>Provide an example of a good answer here</p>
            <p>Explain why it's a good answer</p>
        </positive-example>
    
        <negative-example>
            <p>Provide an example of a bad answer here</p>
            <p>Explain why it's a bad answer</p>
        </negative-example>
    </crowd-instructions>
  -->


    <fieldset>
    
        <legend>Section 1 of 3</legend>
    
        <!-- Select Basic -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="gender">Select your gender</label>
            <div class="col-md-4">
                <select id="gender" name="gender" class="form-control">
                    <option value="Female">Female</option>
                    <option value="Male">Male</option>
                    <option value="Prefer not to say">Prefer not to say</option>
                    <option value="Other">Other</option>
                </select>
            </div>
        </div>
        <br>
        <!-- Select Basic -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="age">Select your age</label>
            <div class="col-md-4">
                <select id="age" name="age" class="form-control">
                    <option value="18-">18 or below</option>
                    <option value="19-25">19-25</option>
                    <option value="26-35">26-35</option>
                    <option value="36-45">36-45</option>
                    <option value="46+">46 or above</option>
                </select>
            </div>
        </div>
        <br>
        <!-- Select Basic -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="occupation">Select your occupation</label>
            <div class="col-md-4">
                <select id="occupation" name="occupation" class="form-control">
                    <option value="Student">Student</option>
                    <option value="Business owner">Business owner</option>
                    <option value="Federal employee">Federal employee</option>
                    <option value="Self employed">Self employed</option>
                    <option value="Searching for employement">Searching for employement</option>
                </select>
            </div>
        </div>
        <br>
        <!-- Select Basic -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="marital">Select your marital status</label>
            <div class="col-md-4">
                <select id="marital" name="marital" class="form-control">
                    <option value="Single">Single</option>
                    <option value="Engaged">Engaged</option>
                    <option value="Engaged with children">Engaged with children</option>
                    <option value="Separated">Separated</option>
                    <option value="Divorced">Divorced</option>
                    <option value="Living with a partner">Living with a partner</option>
                </select>
            </div>
        </div>
        <br>
        <!-- Select Basic -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="ethnicity">Select your ethnicity</label>
            <div class="col-md-4">
                <select id="ethnicity" name="ethnicity" class="form-control">
                    <option value="African">African</option>
                    <option value="North-American">North-American</option>
                    <option value="South-American">South-American</option>
                    <option value="European">European</option>
                    <option value="Asian">Asian</option>
                    <option value="Oceanian">Oceanian</option>
                </select>
            </div>
        </div>
    </fieldset>
    
    <fieldset>
    
        <legend>Section 2 of 3</legend>
    
        <!-- Multiple Radios (inline) -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="quest 1">I am the life of the party</label>
            <div class="col-md-4"> 
                <label class="radio-inline" for="quest 1-0">
                    <input type="radio" name="quest 1" id="quest 1-0" value="1">
                    1 (Totally disagree)
                </label> 
                <label class="radio-inline" for="quest 1-1">
                    <input type="radio" name="quest 1" id="quest 1-1" value="2">
                    2
                </label> 
                <label class="radio-inline" for="quest 1-2">
                    <input type="radio" name="quest 1" id="quest 1-2" value="3">
                    3
                </label> 
                <label class="radio-inline" for="quest 1-3">
                    <input type="radio" name="quest 1" id="quest 1-3" value="4">
                    4
                </label> 
                <label class="radio-inline" for="quest 1-4">
                    <input type="radio" name="quest 1" id="quest 1-4" value="5">
                    5 (Totally agree)
                </label>
            </div>
        </div>
        <br>
        <!-- Multiple Radios (inline) -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="quest 2">I leave my belongings around.</label>
            <div class="col-md-4"> 
                <label class="radio-inline" for="quest 2-0">
                    <input type="radio" name="quest 2" id="quest 2-0" value="1">
                    1 (Totally disagree)
                </label> 
                <label class="radio-inline" for="quest 2-1">
                    <input type="radio" name="quest 2" id="quest 2-1" value="2">
                    2
                </label> 
                <label class="radio-inline" for="quest 2-2">
                    <input type="radio" name="quest 2" id="quest 2-2" value="3">
                    3
                </label> 
                <label class="radio-inline" for="quest 2-3">
                    <input type="radio" name="quest 2" id="quest 2-3" value="4">
                    4
                </label> 
                <label class="radio-inline" for="quest 2-4">
                    <input type="radio" name="quest 2" id="quest 2-4" value="5">
                    5 (Totally agree)
                </label>
            </div>
        </div>
        <br>
        <!-- Multiple Radios (inline) -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="quest 3">I feel little concern for the others.</label>
            <div class="col-md-4"> 
                <label class="radio-inline" for="quest 3-0">
                    <input type="radio" name="quest 3" id="quest 3-0" value="1">
                    1 (Totally disagree)
                </label> 
                <label class="radio-inline" for="quest 3-1">
                    <input type="radio" name="quest 3" id="quest 3-1" value="2">
                    2
                </label> 
                <label class="radio-inline" for="quest 3-2">
                    <input type="radio" name="quest 3" id="quest 3-2" value="3">
                    3
                </label> 
                <label class="radio-inline" for="quest 3-3">
                    <input type="radio" name="quest 3" id="quest 3-3" value="4">
                    4
                </label> 
                <label class="radio-inline" for="quest 3-4">
                    <input type="radio" name="quest 3" id="quest 3-4" value="5">
                    5 (Totally agree)
                </label>
            </div>
        </div>
        <br>
        <!-- Multiple Radios (inline) -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="quest 4">I get stressed out easily.</label>
            <div class="col-md-4"> 
                <label class="radio-inline" for="quest 4-0">
                    <input type="radio" name="quest 4" id="quest 4-0" value="1">
                    1 (Totally disagree)
                </label> 
                <label class="radio-inline" for="quest 4-1">
                    <input type="radio" name="quest 4" id="quest 4-1" value="2">
                    2
                </label> 
                <label class="radio-inline" for="quest 4-2">
                    <input type="radio" name="quest 4" id="quest 4-2" value="3">
                    3
                </label> 
                <label class="radio-inline" for="quest 4-3">
                    <input type="radio" name="quest 4" id="quest 4-3" value="4">
                    4
                </label> 
                <label class="radio-inline" for="quest 4-4">
                    <input type="radio" name="quest 4" id="quest 4-4" value="5">
                    5 (Totally agree)
                </label>
            </div>
        </div>
        <br>
        <!-- Multiple Radios (inline) -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="quest 5">I have vivid immagination.</label>
            <div class="col-md-4"> 
                <label class="radio-inline" for="quest 5-0">
                    <input type="radio" name="quest 5" id="quest 5-0" value="1">
                    1 (Totally disagree)
                </label> 
                <label class="radio-inline" for="quest 5-1">
                    <input type="radio" name="quest 5" id="quest 5-1" value="2">
                    2
                </label> 
                <label class="radio-inline" for="quest 5-2">
                    <input type="radio" name="quest 5" id="quest 5-2" value="3">
                    3
                </label> 
                <label class="radio-inline" for="quest 5-3">
                    <input type="radio" name="quest 5" id="quest 5-3" value="4">
                    4
                </label> 
                <label class="radio-inline" for="quest 5-4">
                    <input type="radio" name="quest 5" id="quest 5-4" value="5">
                    5 (Totally agree)
                </label>
            </div>
        </div>
    </fieldset>
    
    <fieldset>
    
        <legend>Section 3 of 3</legend>
    
        <!-- Multiple Radios -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="question1">
                <img src="https://raw.githubusercontent.com/f4shionrecommendation/fashion_reccom/master/img/373947/_2.jpg" alt="Silver Jacket" width="300" height="300"><br>
                Which one is the best recommendation for this top?
            </label>
            <div class="col-md-4">
                <div class="radio">
                    <label for="question1-0">
                        <input type="radio" name="question1" id="question1-0" value="1">
                        Option 1<br>
                        <img src="https://github.com/f4shionrecommendation/fashion_reccom/blob/master/img/373947/6.jpg?raw=true" alt="Golden Trousers">
                    </label>
                </div>
                <div class="radio">
                    <label for="question1-1">
                        <input type="radio" name="question1" id="question1-1" value="2">
                        Option 2<br>
                        <img src="https://github.com/f4shionrecommendation/fashion_reccom/blob/master/img/436320/4.jpg?raw=true" alt="Fuchsia Skirt">
                    </label>
                </div>
                <div class="radio">
                    <label for="question1-2">
                        <input type="radio" name="question1" id="question1-2" value="3">
                        Option 3<br>
                        <img src="https://github.com/f4shionrecommendation/fashion_reccom/blob/master/img/460313/2.jpg?raw=true" alt="Fuchsia Sporty Trousers">
                    </label>
                </div>
                <div class="radio">
                    <label for="question1-3">
                        <input type="radio" name="question1" id="question1-3" value="4">
                        Option 4<br>
                        <img src="https://github.com/f4shionrecommendation/fashion_reccom/blob/master/img/2005891/1.jpg?raw=true" alt="Black Shorts">
                    </label>
                </div>
                <div class="radio">
                    <label for="question1-4">
                        <input type="radio" name="question1" id="question1-4" value="5">
                        Option 5<br>
                        <img src="https://github.com/f4shionrecommendation/fashion_reccom/blob/master/img/2079880/2.jpg?raw=true" alt="Blue Jeans">
                    </label>
                </div>
            </div>
        </div>
        <br>
        <!-- Multiple Radios -->
        <div class="form-group">
        
            <label class="col-md-4 control-label" for="question2">Which one is the best recommendation for this bottom?</label>
            <br>
            <img src="https://raw.githubusercontent.com/f4shionrecommendation/fashion_reccom/master/img/373947/6.jpg" alt="Golden Trousers">
    
            <div class="col-md-4">
          
                <div class="radio">
                    <label for="question2-0">
                        <input type="radio" name="question2" id="question2-0" value="1">
                        Option 1<br>
                        <img src="https://raw.githubusercontent.com/f4shionrecommendation/fashion_reccom/master/img/373947/5.jpg" alt="Silver Shoes">
            
                    </label>
                </div>
                <div class="radio">
                    <label for="question2-1">
                        <input type="radio" name="question2" id="question2-1" value="2">
                        Option 2 <br>
                        <img src="https://raw.githubusercontent.com/f4shionrecommendation/fashion_reccom/master/img/436320/9.jpg" alt="pearly shoes with heels">
                    </label>
                </div>
                <div class="radio">
                    <label for="question2-2">
                        <input type="radio" name="question2" id="question2-2" value="3">
                        Option 3 <br>
                        <img src="https://raw.githubusercontent.com/f4shionrecommendation/fashion_reccom/master/img/460313/_4.jpg" alt="american eagle boots">
                    </label>
                </div>
                <div class="radio">
                    <label for="question2-3">
                        <input type="radio" name="question2" id="question2-3" value="4">
                        Option 4 <br>
                        <img src="https://raw.githubusercontent.com/f4shionrecommendation/fashion_reccom/master/img/2078412/5.jpg" alt="black sneakers">
                    </label>
                </div>
                <div class="radio">
                    <label for="question2-4">
                        <input type="radio" name="question2" id="question2-4" value="5">
                        Option 5 <br>
                        <img src="https://raw.githubusercontent.com/f4shionrecommendation/fashion_reccom/master/img/2079880/8.jpg" alt="shoes with golden heels">
                    </label>
                </div>
            </div>
        </div>
        <br>
        <!-- Multiple Radios -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="question3">Which one is the best recommendation for this for this pair of shoes?</label>
            <br>
            <img src="https://raw.githubusercontent.com/f4shionrecommendation/fashion_reccom/master/img/2333598/7.jpg" alt="long brown velvet boots">
            <div class="col-md-4">
                <div class="radio">
                    <label for="question3-0">
                        <input type="radio" name="question3" id="question3-0" value="1">
                        Option 1 <br>
                        <img src="https://raw.githubusercontent.com/f4shionrecommendation/fashion_reccom/master/img/2333598/6.jpg" alt="white blouse">
                    </label>
                </div>
                <div class="radio">
                    <label for="question3-1">
                        <input type="radio" name="question3" id="question3-1" value="2">
                        Option 2 <br>
                        <img src="https://raw.githubusercontent.com/f4shionrecommendation/fashion_reccom/master/img/2078412/112.jpg" alt="active tank">
                    </label>
                </div>
                <div class="radio">
                    <label for="question3-2">
                        <input type="radio" name="question3" id="question3-2" value="3">
                        Option 3 <br>
                        <img src="https://raw.githubusercontent.com/f4shionrecommendation/fashion_reccom/master/img/373947/_1.jpg" alt="fuchsia blouse">
                    </label>
                </div>
                <div class="radio">
                    <label for="question3-3">
                        <input type="radio" name="question3" id="question3-3" value="4">
                        Option 4 <br>
                        <img src="https://raw.githubusercontent.com/f4shionrecommendation/fashion_reccom/master/img/460313/11.jpg" alt="green hoodie">
                    </label>
                </div>
                <div class="radio">
                    <label for="question3-4">
                        <input type="radio" name="question3" id="question3-4" value="5">
                        Option 5 <br>
                        <img src="https://raw.githubusercontent.com/f4shionrecommendation/fashion_reccom/master/img/373947/4.jpg" alt="top with rhinestones">
                    </label>
                </div>
            </div>
        </div>
        <br>
        <!-- Multiple Checkboxes -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="question4">Would you recommend this pair of shoes to a teenager, an adult or an elder?</label><br>
            <img src="https://raw.githubusercontent.com/f4shionrecommendation/fashion_reccom/master/img/2078412/5.jpg" alt="black sneakers">
    
            <div class="col-md-4">
                <div class="checkbox">
                    <label for="question4-0">
                        <input type="checkbox" name="question4" id="question4-0" value="Teenager">
                        Teenager
                    </label>
                </div>
                <div class="checkbox">
                    <label for="question4-1">
                        <input type="checkbox" name="question4" id="question4-1" value="Adult">
                        Adult
                    </label>
                </div>
                <div class="checkbox">
                    <label for="question4-2">
                        <input type="checkbox" name="question4" id="question4-2" value="Elder">
                        Elder
                    </label>
                </div>
            </div>
        </div>
        <br>
        <!-- Multiple Checkboxes -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="question5">Which adjectives describe, in your opinion, this pair of shoes?</label><br>
            <img src="https://raw.githubusercontent.com/f4shionrecommendation/fashion_reccom/master/img/460313/_4.jpg" alt="american eagle boots">
            <div class="col-md-4">
                <div class="checkbox">
                    <label for="question5-0">
                        <input type="checkbox" name="question5" id="question5-0" value="Comfortable">
                        Comfortable
                    </label>
                </div>
                <div class="checkbox">
                    <label for="question5-1">
                        <input type="checkbox" name="question5" id="question5-1" value="Hot">
                        Hot
                    </label>
                </div>
                <div class="checkbox">
                    <label for="question5-2">
                        <input type="checkbox" name="question5" id="question5-2" value="Cold">
                        Cold
                    </label>
                </div>
                <div class="checkbox">
                    <label for="question5-3">
                        <input type="checkbox" name="question5" id="question5-3" value="Elegant">
                        Elegant
                    </label>
                </div>
                <div class="checkbox">
                    <label for="question5-4">
                        <input type="checkbox" name="question5" id="question5-4" value="Classical">
                        Classical
                    </label>
                </div>
                <div class="checkbox">
                    <label for="question5-5">
                        <input type="checkbox" name="question5" id="question5-5" value="Sporty">
                        Sporty
                    </label>
                </div>
            </div>
        </div>
        <br>
        <!-- Multiple Checkboxes -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="question6">Which adjectives describe, in your opinion, this bottom clothing?</label><br>
            <img src="https://github.com/f4shionrecommendation/fashion_reccom/blob/master/img/460313/2.jpg?raw=true" alt="Fuchsia Sporty Trousers">
            <div class="col-md-4">
                <div class="checkbox">
                    <label for="question6-0">
                        <input type="checkbox" name="question6" id="question6-0" value="Hot">
                        Hot
                    </label>
                </div>
                <div class="checkbox">
                    <label for="question6-1">
                        <input type="checkbox" name="question6" id="question6-1" value="Cold">
                        Cold
                    </label>
                </div>
                <div class="checkbox">
                    <label for="question6-2">
                        <input type="checkbox" name="question6" id="question6-2" value="Comfortable">
                        Comfortable
                    </label>
                </div>
                <div class="checkbox">
                    <label for="question6-3">
                        <input type="checkbox" name="question6" id="question6-3" value="Elegant">
                        Elegant
                    </label>
                </div>
                <div class="checkbox">
                    <label for="question6-4">
                        <input type="checkbox" name="question6" id="question6-4" value="Sporty">
                        Sporty
                    </label>
                </div>
                <div class="checkbox">
                    <label for="question6-5">
                        <input type="checkbox" name="question6" id="question6-5" value="Classical">
                        Classical
                    </label>
                </div>
            </div>
        </div>
        <br>
        <!-- Multiple Checkboxes -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="question7">Which adjectives describe, in your opinion, this top clothing?</label>
            <br>
            <img src="https://raw.githubusercontent.com/f4shionrecommendation/fashion_reccom/master/img/2079880/1.jpg" alt="white sweater">
            <div class="col-md-4">
                <div class="checkbox">
                    <label for="question7-0">
                        <input type="checkbox" name="question7" id="question7-0" value="Hot">
                        Hot
                    </label>
                </div>
                <div class="checkbox">
                    <label for="question7-1">
                        <input type="checkbox" name="question7" id="question7-1" value="Cold">
                        Cold
                    </label>
                </div>
                <div class="checkbox">
                    <label for="question7-2">
                        <input type="checkbox" name="question7" id="question7-2" value="Comfortable">
                        Comfortable
                    </label>
                </div>
                <div class="checkbox">
                    <label for="question7-3">
                        <input type="checkbox" name="question7" id="question7-3" value="Classical">
                        Classical
                    </label>
                </div>
                <div class="checkbox">
                    <label for="question7-4">
                        <input type="checkbox" name="question7" id="question7-4" value="Elegant">
                        Elegant
                    </label>
                </div>
                <div class="checkbox">
                    <label for="question7-5">
                        <input type="checkbox" name="question7" id="question7-5" value="Sporty">
                        Sporty
                    </label>
                </div>
            </div>
        </div>
    
    </fieldset>

</crowd-form>