{% extends "otree/Page.html" %}
{% load otree static %}

{% block content %}

<div class="IntroContent" id="IntroContent">

  <!-- previous button -->
  <div class="prevDiv">
    <a id="leftArrow" class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <p id="prevKey" class="prev-key"> <b>or press [&#8592;]</b> </p>
  </div>
  <!-- Slides  -->
  <div class="mySlides">
    <div class="slide-item" id="slide-0">
      <!-- Title -->
      
      <!-- context -->
      <div class="ContentContainer"> 
        <p style="align-self: center;">
          Before we continue, we will show you the real values for each attribute and value rating. 
          In the next slides you will see the amount of Quality and Sustainability points you receive,
           depending on the rating of the products.
        </p>
        
      </div>
    </div>

    <div class="slide-item" id="slide-1">
      <!-- Title -->

      <!-- context -->
      <div class="ContentContainer"> 
        {{ include "InfoMid/InfoValues.html" }}
        
      </div>
    </div>
    <!-- Slides for each attribute -->
    {{ for attr in lAttr }}
      <div class="slide-item" id="slide-a{{ forloop.counter }}">
        <!-- Title -->
        <h1 id="title-{{ forloop.counter }}"> Information about {{ attr.attr }} ratings </h1>
          
        <!-- context -->
        <div class="ContentContainer"> 
          <img src="{{ static attr.graphPath }}" alt="">
          
        </div>
      </div>
    {{ endfor }}

    <div class="slide-item" id="slide-4">
      <!-- Title -->
        
      <!-- context -->
      <div class="ContentContainer"> 

        <div class="flex-questions">
          <div style="margin-bottom:1em;">
            Just to make sure we explained everything clearly, please answer the following questions: 
          </div>
          <!-- Question1 -->
          <div class="question-wrapper"> 
            <label for="Q1"> 
              How many <img class="symbol" src="{% static C.imgLeaf_symbol %}" />s does a product have, 
              if you get 30 Sustainability points?
            </label>
            <select name="Q1" id="Q1" class="dropdown ControlQuestions">
              <option value="nothing">--Select--</option>
              <option value="1"> 1  </option>
              <option value="2"> 2  </option>
              <option value="3"> 3  </option>
            </select>
          </div>
          <div class="hint" id="hint1">
            Incorrect
          </div>
          <!-- Question 2 -->
          <div class="question-wrapper"> 
            <label for="Q2"> 
              How many <img class="symbol" src="{% static C.imgStar_symbol %}" />s does a product have, 
              if you get 60 Quality points?
            </label>
            <select name="Q2" id="Q2" class="dropdown ControlQuestions">
              <option value="nothing">--Select--</option>
              <option value="1"> 1  </option>
              <option value="2"> 2  </option>
              <option value="3"> 3  </option>
            </select>            
          </div>

          <div class="hint" id="hint2">
            Incorrect
          </div>
       
          <!-- Question 3 -->
          <div class="question-wrapper"> 
            <label for="Q3"> 
              What is the difference in Quality points between a product with 2 <img class="symbol" src="{% static C.imgStar_symbol %}" />s and
              3 <img class="symbol" src="{% static C.imgStar_symbol %}" />s?
            </label>
            <input type="text" name="Q3" id="Q3" class="ControlQuestions">
          </div>

          <div class="hint" id="hint3">
            Incorrect
          </div>

          <!-- Question 4 -->
          <div class="question-wrapper"> 
            <label for="Q4"> 
              What is the difference in Sustainability points between a product with 1 <img class="symbol" src="{% static C.imgLeaf_symbol %}" />s and
              2 <img class="symbol" src="{% static C.imgLeaf_symbol %}" />s?
            </label>
            <input type="text" name="Q4" id="Q4" class="ControlQuestions">
            
          </div>

          <div class="hint" id="hint4">
            Incorrect
          </div>
          <button type="button" id="submitAnswer" class="button" onclick="validateAnswers()"> Submit </button>

        </div>
      </div>


    </div>
  </div>
  <!-- Next Button -->
  <div class="nextDiv"> 
    <a id="rightArrow" class="next" onclick="plusSlides(1)">&#10095;</a>
    <p id="nextKey" class="next-key"> <b>or press [&#8594;] </b></p>
  </div>
</div>

<div class="dot_row">
    <span class="dot" onclick="currentSlide(0)"></span>
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
    <span class="dot" onclick="currentSlide(4)"></span>
</div>


<button id="submit" style="display: none;"></button>
<input type="hidden" id="sSlideSequence" name="sSlideSequence" val="">
<input type="hidden" id="sSlideTime" name="sSlideTime" val="">

{% endblock %}

{% block scripts %}
  <script>
    const lSolutions =  js_vars.lSolutions
  </script>
  <script src="{% static 'global/js/Sliders.js' %}"></script>

{% endblock %}

{% block styles %}

<link rel="stylesheet" href="{% static 'global/css/Sliders.css' %}">
<link rel="stylesheet" href="{% static 'global/css/styling10.css' %}">
{% endblock %}