<%- include('./includes/samtop2.ejs') %> 
<div class="space1"></div>
<div class="row mx-auto justify-content-center align-items-center flex-column">
    <div class="col-8">
<div class="alert alert-info" role="alert">
  <h5 class="alert-heading">Additional Annotations</h5>
    Selected Music Track: <%= music %>

  <hr />

  <h6>How STRONG you feel the emotion is?</h6>
  <div class="row">
    <div class="col-1"></div>
    <div class="col-2">
        <center><h3>Very Low</h3></center>
    </div>
    <div class="col-2">
        <center><h3>Low</h3></center>
    </div>
    <div class="col-2">
        <center><h3>Medium</h3></center>
    </div>
    <div class="col-2">
        <center><h3>High</h3></center>
    </div>
    <div class="col-2">
        <center><h3>Extreme</h3></center>
    </div>
    <div class="col-1"></div>
  </div>
    <div class="space"></div>
<form method="GET" action="/sam-form-end">
  <!-- 5 rado buttons for each column under the images-->
    <div class="row">
        <div class="col-1"></div>
        <div class="col-2 d-flex justify-content-center">
        <input type="radio" name="strongness" value="-2" style="height: 25px;width: 25px;" class="form-check-input" required="required"/>
        </div>
        <div class="col-2 d-flex justify-content-center">
        <input type="radio" name="strongness" value="-1" style="height: 25px;width: 25px;" class="form-check-input"/>
        </div>
        <div class="col-2 d-flex justify-content-center">
        <input type="radio" name="strongness" value="0" style="height: 25px;width: 25px;" class="form-check-input"/>
        </div>
        <div class="col-2 d-flex justify-content-center">
        <input type="radio" name="strongness" value="1" style="height: 25px;width: 25px;" class="form-check-input"/>
        </div>
        <div class="col-2 d-flex justify-content-center">
        <input type="radio" name="strongness" value="2" style="height: 25px;width: 25px;" class="form-check-input"/>
        </div>
        <div class="col-1"></div>
  <input type="hidden" name="id" value="<%= id %>" />
  <input type="hidden" name="arousal" value="<%= arousal %>">
  <input type="hidden" name="valence" value="<%= valence %>">
  <input type="hidden" name="last" value="false">
  <input type="hidden" name="music" value="<%= music %>" />
</div>

<hr />

  <h6>How much do you LIKE the music ?</h6>
  <div class="row">
    <div class="col-1"></div>
    <div class="col-2">
        <center><h3>Very Low</h3></center>
    </div>
    <div class="col-2">
        <center><h3>Low</h3></center>
    </div>
    <div class="col-2">
        <center><h3>Medium</h3></center>
    </div>
    <div class="col-2">
        <center><h3>High</h3></center>
    </div>
    <div class="col-2">
        <center><h3>Very High</h3></center>
    </div>
    <div class="col-1"></div>
  </div>
    <div class="space"></div>
    <div class="row">
        <div class="col-1"></div>
        <div class="col-2 d-flex justify-content-center">
        <input type="radio" name="likeness" value="-2" style="height: 25px;width: 25px;" class="form-check-input" required="required"/>
        </div>
        <div class="col-2 d-flex justify-content-center">
        <input type="radio" name="likeness" value="-1" style="height: 25px;width: 25px;" class="form-check-input"/>
        </div>
        <div class="col-2 d-flex justify-content-center">
        <input type="radio" name="likeness" value="0" style="height: 25px;width: 25px;" class="form-check-input"/>
        </div>
        <div class="col-2 d-flex justify-content-center">
        <input type="radio" name="likeness" value="1" style="height: 25px;width: 25px;" class="form-check-input"/>
        </div>
        <div class="col-2 d-flex justify-content-center">
        <input type="radio" name="likeness" value="2" style="height: 25px;width: 25px;" class="form-check-input"/>
        </div>
        <div class="col-1"></div>
    </div>
    <hr />

  <h6>How well do you KNOW the music/music pattern?</h6>
  <div class="row">
    <div class="col-1"></div>
    <div class="col-2">
        <center><h3>Very Low</h3></center>
    </div>
    <div class="col-2">
        <center><h3>Low</h3></center>
    </div>
    <div class="col-2">
        <center><h3>Medium</h3></center>
    </div>
    <div class="col-2">
        <center><h3>High</h3></center>
    </div>
    <div class="col-2">
        <center><h3>Very High</h3></center>
    </div>
    <div class="col-1"></div>
  </div>
    <div class="space"></div>
    <div class="row">
        <div class="col-1"></div>
        <div class="col-2 d-flex justify-content-center">
        <input type="radio" name="familiarity" value="-2" style="height: 25px;width: 25px;" class="form-check-input" required="required"/>
        </div>
        <div class="col-2 d-flex justify-content-center">
        <input type="radio" name="familiarity" value="-1" style="height: 25px;width: 25px;" class="form-check-input"/>
        </div>
        <div class="col-2 d-flex justify-content-center">
        <input type="radio" name="familiarity" value="0" style="height: 25px;width: 25px;" class="form-check-input"/>
        </div>
        <div class="col-2 d-flex justify-content-center">
        <input type="radio" name="familiarity" value="1" style="height: 25px;width: 25px;" class="form-check-input"/>
        </div>
        <div class="col-2 d-flex justify-content-center">
        <input type="radio" name="familiarity" value="2" style="height: 25px;width: 25px;" class="form-check-input"/>
        </div>
        <div class="col-1"></div>
    </div>
    <br>
</div>

  

  <div class="row">
    <div class="col-md">
      <div class="d-flex justify-content-end">
  <button type="submit" class="btn btn-primary">Next Step <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-right-fill" viewBox="0 0 16 16">
    <path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
  </svg></button>
</div>
</div>

</div>
</form>
<br />
    <h5>Annotation Progress : 3 of 4 Steps</h5>
    <div class="progress">
      <div
        class="progress-bar progress-bar-striped progress-bar-animated"
        role="progressbar"
        aria-valuenow="25"
        aria-valuemin="0"
        aria-valuemax="100"
        style="width: 90%"
      ></div>
    </div>
</div>
</div>
<!-- image click event -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
  $("img").click(function(){
    var name = $(this).attr("name");
    $("input[name=valence][value="+name+"]").prop("checked", true);
  });
});
</script>
<%- include('./includes/bottom.ejs') %>