<%- include('./includes/top2.ejs') %> 
<div class="space2"></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">Annotate the valence</h5>
    Selected Music Track: <%= music %>
  <p>
    Valence refers to the <b>pleasantness</b> or <b>unpleasantness</b>(Lower end of the scale) of an
        emotional stimulus.
  </p>
  <hr />

  <h6>Valence Scale</h6>
  <div class="row">
    <div class="col-1"></div>
    <div class="col-2">
      <img
        src="./images/valence/-2.png"
        class="img-fluid"
        alt="Responsive image"
        name="-2"
      />
    </div>
    <div class="col-2">
      <img
        src="./images/valence/-1.png"
        class="img-fluid"
        alt="Responsive image"
        name="-1"
      />
    </div>
    <div class="col-2">
      <img
        src="./images/valence/0.png"
        class="img-fluid"
        alt="Responsive image"
        name="0"
      />
    </div>
    <div class="col-2">
      <img
        src="./images/valence/+1.png"
        class="img-fluid"
        alt="Responsive image"
        name="1"
      />
    </div>
    <div class="col-2">
      <img
        src="./images/valence/+2.png"
        class="img-fluid"
        alt="Responsive image"
        name="2"
      />
    </div>
    <div class="col-1"></div>
  </div>
    <div class="space"></div>
<form method="GET" action="/additional-annotation2">
  <!-- 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 id="valenceScale1"type="radio" name="valence" value="-2" style="height: 25px;width: 25px;" class="form-check-input" required="required"/>
        </div>
        <div class="col-2 d-flex justify-content-center">
        <input id="valenceScale2" type="radio" name="valence" value="-1" style="height: 25px;width: 25px;" class="form-check-input" />
        </div>
        <div class="col-2 d-flex justify-content-center">
        <input id="valenceScale3" type="radio" name="valence" value="0" style="height: 25px;width: 25px;" class="form-check-input"/>
        </div>
        <div class="col-2 d-flex justify-content-center">
        <input id="valenceScale4" type="radio" name="valence" value="1" style="height: 25px;width: 25px;" class="form-check-input"/>
        </div>
        <div class="col-2 d-flex justify-content-center">
        <input id="valenceScale5" type="radio" name="valence" 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="last" value="false">
  <input type="hidden" name="music" value="<%= music %>" />
</div>
</div>
  <br>
  

  <div class="row">
    <div class="col-md">
      <div class="d-flex justify-content-end">
  <button id="valenceNext" 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: 75%"
      ></div>
    </div>
</div>
</div>
<!-- image click event -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var valenceScale1 = document.getElementById("valenceScale1");
var valenceScale2 = document.getElementById("valenceScale2");
var valenceScale3 = document.getElementById("valenceScale3");
var valenceScale4 = document.getElementById("valenceScale4");
var valenceScale5 = document.getElementById("valenceScale5");
var valencelNext = document.getElementById("valenceNext");


$(document).ready(function(){
  $("img").click(function(){
    var name = $(this).attr("name");
    $("input[name=valence][value="+name+"]").prop("checked", true);
  });
});

valenceScale1.addEventListener("click", function(){
      //valence scale select marker using 111 for -2
      var valence = "111";
      console.log(valence);
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "http://127.0.0.1:5000/doserial/ranking/" + valence, true);
      xhr.send();
      valenceScale2.disabled = true;
      valenceScale3.disabled = true;
      valenceScale4.disabled = true;
      valenceScale5.disabled = true;
  });

  valenceScale2.addEventListener("click", function(){
      //valence scale select marker using 112 for -1
      var valence = "112";
      console.log(valence);
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "http://127.0.0.1:5000/doserial/ranking/" + valence, true);
      xhr.send();
      valenceScale1.disabled = true;
      valenceScale3.disabled = true;
      valenceScale4.disabled = true;
      valenceScale5.disabled = true;
  });

  valenceScale3.addEventListener("click", function(){
      //valence scale select marker using 113 for 0
      var valence = "113";
      console.log(valence);
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "http://127.0.0.1:5000/doserial/ranking/" + valence, true);
      xhr.send();
      valenceScale1.disabled = true;
      valenceScale2.disabled = true;
      valenceScale4.disabled = true;
      valenceScale5.disabled = true;
  });

  valenceScale4.addEventListener("click", function(){
      //valence scale select marker using 114 for 1
      var valence = "114";
      console.log(valence);
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "http://127.0.0.1:5000/doserial/ranking/" + valence, true);
      xhr.send();
      valenceScale1.disabled = true;
      valenceScale2.disabled = true;
      valenceScale3.disabled = true;
      valenceScale5.disabled = true;
  });

  valenceScale5.addEventListener("click", function(){
      //valence scale select marker using 115 for 2
      var valence = "115";
      console.log(valence);
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "http://127.0.0.1:5000/doserial/ranking/" + valence, true);
      xhr.send();
      valenceScale1.disabled = true;
      valenceScale2.disabled = true;
      valenceScale3.disabled = true;
      valenceScale4.disabled = true;
  });

  valenceNext.addEventListener("click", function(){
      //valence scale select marker using 120 for end of valence
      var valenceN = "120";
      console.log(valenceN);
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "http://127.0.0.1:5000/doserial/ranking/" + valenceN, true);
      xhr.send();
  });
  
</script>
<%- include('./includes/bottom.ejs') %>