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

{% block title %}
    Test
{% endblock %}

{% block content %}

    <p>
    For each experience, please answer the questions honestly using the appropriate scale.
    </p>

    <tr>

         <td>1. Although there is danger, travel into space and get within 430,000 miles of the Sun using newly
             developed super-reflective material on the spacecraft</td>

<table class="table">
    <tr>
         <td>  </td>
        <th> 1 </th><th> 2 </th><th> 3 </th><th> 4 </th><th> 5 </th>
     </tr>

    <tr>
                <td>How safe would you feel in this scenario?</td>

     {% for number in ExpQ_scales %}

        <th><input type="radio" name="ExpQ_1" value={{ number }} required></th>

     {% endfor %}

    </tr>

    <tr>

                <td>How likely are you to accomplish this?</td>

    {% for number in ExpQ_scales %}

        <th><input type="radio" name="ExpQ_2" value={{ number }} required></th>

     {% endfor %}

    </tr>

</table>

    <p>

        {% formfield player.ExpQ_3 %}

    <p>

        {% formfield player.ExpQ_4 %}

            How much would you pay to experience this scenario?
            <output name="ExpQ_4" id="valueID1">50000</output>
    </p>

       <input type="hidden" name="val1" value="50000" id="id_value1"/>

        <input type="range" name="position1" id="positionID1" value="50000" min="0" max="100000" oninput="valueID1.value = positionID1.value; id_value1.value = positionID1.value">

    <p>

         <td>2. Although Venezuela is one of the most dangerous countries in the world to visit, travel to
             Venezuela to see Angel Falls (the tallest waterfall in the world)</td>

<table class="table">
    <tr>
         <td>  </td>
        <th> 1 </th><th> 2 </th><th> 3 </th><th> 4 </th><th> 5 </th>
     </tr>

    <tr>
                <td>How safe would you feel in this scenario?</td>

     {% for number in ExpQ_scales %}

        <th><input type="radio" name="ExpQ_5" value={{ number }} required></th>

     {% endfor %}

    </tr>

    <tr>
                <td>How likely are you to accomplish this?</td>

    {% for number in ExpQ_scales %}

        <th><input type="radio" name="ExpQ_6" value={{ number }} required></th>

     {% endfor %}

    </tr>

</table>

    <p>

        {% formfield player.ExpQ_7 %}

    <p>
        {% formfield player.ExpQ_8 %}

            How much would you pay to experience this scenario?
            <output name="ExpQ_8" id="valueID2">50000</output>
    </p>

       <input type="hidden" name="val2" value="50000" id="id_value2"/>

        <input type="range" name="position2" id="positionID2" value="50000" min="0" max="100000" oninput="valueID2.value = positionID2.value; id_value2.value = positionID2.value">

    <style>
        p {
          font: 16px arial, sans-serif;
          color: black;
          text-align: left;
        }

        input[type=range] {
          -webkit-appearance: none;
          margin: 18px 0;
          width: 100%;
        }
        input[type=range]:focus {
          outline: none;
        }
        input[type=range]::-webkit-slider-runnable-track {
          width: 100%;
          height: 8.4px;
          cursor: pointer;
          animate: 0.2s;
          box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
          background: #3071a9;
          border-radius: 1.3px;
          border: 0.2px solid #010101;
        }
        input[type=range]::-webkit-slider-thumb {
          box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
          border: 1px solid #000000;
          height: 36px;
          width: 16px;
          border-radius: 3px;
          background: #ffffff;
          cursor: pointer;
          -webkit-appearance: none;
          margin-top: -14px;
        }
        input[type=range]:focus::-webkit-slider-runnable-track {
          background: #367ebd;
        }
        input[type=range]::-moz-range-track {
          width: 100%;
          height: 8.4px;
          cursor: pointer;
          animate: 0.2s;
          box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
          background: #3071a9;
          border-radius: 1.3px;
          border: 0.2px solid #010101;
        }
        input[type=range]::-moz-range-thumb {
          box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
          border: 1px solid #000000;
          height: 36px;
          width: 16px;
          border-radius: 3px;
          background: #ffffff;
          cursor: pointer;
        }
        input[type=range]::-ms-track {
          width: 100%;
          height: 8.4px;
          cursor: pointer;
          animate: 0.2s;
          background: transparent;
          border-color: transparent;
          border-width: 16px 0;
          color: transparent;
        }
        input[type=range]::-ms-fill-lower {
          background: #2a6495;
          border: 0.2px solid #010101;
          border-radius: 2.6px;
          box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        }
        input[type=range]::-ms-fill-upper {
          background: #3071a9;
          border: 0.2px solid #010101;
          border-radius: 2.6px;
          box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        }
        input[type=range]::-ms-thumb {
          box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
          border: 1px solid #000000;
          height: 36px;
          width: 16px;
          border-radius: 3px;
          background: #ffffff;
          cursor: pointer;
        }
        input[type=range]:focus::-ms-fill-lower {
          background: #3071a9;
        }
        input[type=range]:focus::-ms-fill-upper {
          background: #367ebd;
        }
    </style>


    {% next_button %}

{% endblock %}