{{block style}}
<link rel="stylesheet" href="/static/global/style.css">


<style media="screen">
.otree-btn-next {
  display: none;
}


.image-container {
  display: block;
  width: calc(15vw);
  height: calc(15vw);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  /* align-items: center; */
}

</style>
{{endblock}}

{{ block title }}
{{ if choice_type == "movies" }}
  Consider this movie
{{ elif choice_type == "cars" }}
  Consider this car
{{ elif choice_type == "charities" }}
  Consider this charitable organization
{{ elif choice_type == "dining" }}
  Consider this establishment
{{ elif choice_type == "dinners" }}
  Consider this meal
{{ elif choice_type == "fruits" }}
  Consider this fruit
{{ elif choice_type == "holidays" }}
  Consider this holiday destination
{{ elif choice_type == "magazines" }}
  Consider this magazine
{{ endif }}
{{ endblock }}
{{ block content }}

<!-- <div class="flex-container"> -->
  <!-- <div class="flex-child boxed green"> -->
    <div class="image-container">
      <img src="/static/binarychoice/{{choice_type}}_img/{{productImg}}"/>
    <!-- </div> -->
  </div>
<!-- </div> -->

<br>
<!--Familiarity scale retrieved from Pliner, P., & Hobden, K. (1992). Development of a scale to measure the trait of food neophobia in humans. Appetite, 19(2), 105-120.
https://doi.org/10.1016/0195-6663(92)90014-W -->
<div class="center">
<div class="boxed question small" id="familiarity">
  <h4>How familiar are you with {{product}}?</h4>
<div class="no-font">
  "1 (Not at all familiar)", "2", "3", "4", "5", "6", "7 (Extremely familiar)"
   <input type="radio" id="1" name="familiarity" value="1">
   <label onclick="familiarityClick('1')" class="btn btn-outline-dark familiarity" for="1">1 (Not at all familiar)</label>

   <input type="radio" id="2" name="familiarity" value="2">
   <label onclick="familiarityClick('2')" class="btn btn-outline-dark familiarity" for="2">2</label>

   <input type="radio" id="3" name="familiarity" value="3">
   <label onclick="familiarityClick('3')" class="btn btn-outline-dark familiarity" for="3">3</label>

   <input type="radio" id="4" name="familiarity" value="4">
   <label onclick="familiarityClick('4')" class="btn btn-outline-dark familiarity" for="4">4</label>
   
   <input type="radio" id="5" name="familiarity" value="5">
   <label onclick="familiarityClick('5')" class="btn btn-outline-dark familiarity" for="5">5</label>

   <input type="radio" id="6" name="familiarity" value="6">
   <label onclick="familiarityClick('6')" class="btn btn-outline-dark familiarity" for="6">6</label>

   <input type="radio" id="7" name="familiarity" value="7">
   <label onclick="familiarityClick('7')" class="btn btn-outline-dark familiarity" for="7">7 (Extremely familiar)</label>
</div>
</div>

<div class="boxed question small" id="like">
    <h4>How much do you like {{product}}?</h4>
  <div class="no-font">
     <input type="radio" id="like1" name="like" value="1">
     <label onclick="likeClick('1')" class="btn btn-outline-dark like" for="like1">Dislike extremely</label>
  
     <input type="radio" id="like2" name="like" value="2">
     <label onclick="likeClick('2')" class="btn btn-outline-dark like" for="like2">Dislike very much</label>
  
     <input type="radio" id="like3" name="like" value="3">
     <label onclick="likeClick('3')" class="btn btn-outline-dark like" for="like3">Dislike moderately</label>
  
     <input type="radio" id="like4" name="like" value="4">
     <label onclick="likeClick('4')" class="btn btn-outline-dark like" for="like4">Dislike slightly</label>

     <input type="radio" id="like5" name="like" value="5">
     <label onclick="likeClick('5')" class="btn btn-outline-dark like" for="like5">Neither like or dislike</label>

     <input type="radio" id="like6" name="like" value="6">
     <label onclick="likeClick('6')" class="btn btn-outline-dark like" for="like6">Like slightly</label>

     <input type="radio" id="like7" name="like" value="7">
     <label onclick="likeClick('7')" class="btn btn-outline-dark like" for="like7">Like moderately</label>

     <input type="radio" id="like8" name="like" value="8">
     <label onclick="likeClick('8')" class="btn btn-outline-dark like" for="like8">Like very much</label>

     <input type="radio" id="like9" name="like" value="9">
     <label onclick="likeClick('9')" class="btn btn-outline-dark like" for="like9">Like extremely</label>
  </div>
  </div>
{{ next_button }}
</div>

  
    {{ formfield_errors 'familiarity' }}
</div>


<script type="text/javascript">

function myFunction() {
  var x = document.getElementById("familiarity");
  x.removeAttribute("hidden");
  document.getElementById('familiarity').scrollIntoView(false);
}

function familiarityClick(x) {
  console.log(forminputs);
  forminputs.familiarity.value = x;
  if ((forminputs.familiarity.value !== "") & (forminputs.like.value !== "")){
    var x = document.getElementsByClassName('otree-btn-next')[0];
    x.click();
  }
  document.getElementById('like').scrollIntoView(false)
}

function likeClick(x) {
  console.log(forminputs);
  forminputs.like.value = x;
  if ((forminputs.familiarity.value !== "") & (forminputs.like.value !== "")){
    var x = document.getElementsByClassName('otree-btn-next')[0];
    x.click();
  }
}


</script>


{{ endblock }}