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

{% block title %}

    Experience Questionnaire

{% endblock %}

{% block content %}

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


    <p>

         <td>34. Taking a 5-hour road trip to see a concert</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 ExpQ1_scales %}

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

     {% endfor %}

    </tr>

    <tr>

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

    {% for number in ExpQ2_scales %}

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

     {% endfor %}

    </tr>

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

    {% for number in ExpQ3_scales %}

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

     {% endfor %}

    </tr>

</table>

    <p>
        {% formfield player.ExpQ4_34 %}

    <p>

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

       <input type="hidden" name="val34" value="50000" id="id_value34"/>

        <input type="range" name="position34" id="positionID34" value="50000" min="0" max="100000" oninput="valueID34.value = positionID34.value; id_value34.value = positionID34.value">



    <p>

         <td>35. Stargazing in your backyard</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 ExpQ1_scales %}

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

     {% endfor %}

    </tr>

    <tr>

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

    {% for number in ExpQ2_scales %}

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

     {% endfor %}

    </tr>

    <tr>

                <td>How confident would you feel in doing this scenario?</td>

    {% for number in ExpQ3_scales %}

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

     {% endfor %}

    </tr>

</table>

    <p>
        {% formfield player.ExpQ4_35 %}

    <p>

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

       <input type="hidden" name="val35" value="50000" id="id_value35"/>

        <input type="range" name="position35" id="positionID35" value="50000" min="0" max="100000" oninput="valueID35.value = positionID35.value; id_value35.value = positionID35.value">



    <p>

         <td>36. Spending time and having dinner with your family and friends for a night in the city</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 ExpQ1_scales %}

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

     {% endfor %}

    </tr>

    <tr>

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

    {% for number in ExpQ2_scales %}

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

     {% endfor %}

    </tr>

    <tr>

                <td>How confident would you feel in doing this scenario?</td>

    {% for number in ExpQ3_scales %}

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

     {% endfor %}

    </tr>

</table>

    <p>
        {% formfield player.ExpQ4_36 %}

    <p>

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

       <input type="hidden" name="val36" value="50000" id="id_value36"/>

        <input type="range" name="position36" id="positionID36" value="50000" min="0" max="100000" oninput="valueID36.value = positionID36.value; id_value36.value = positionID36.value">



    <p>

         <td>37. Setting off commercial fireworks in your backyard</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 ExpQ1_scales %}

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

     {% endfor %}

    </tr>

    <tr>

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

    {% for number in ExpQ2_scales %}

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

     {% endfor %}

    </tr>

    <tr>

                <td>How confident would you feel in doing this scenario?</td>

    {% for number in ExpQ3_scales %}

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

     {% endfor %}

    </tr>

</table>

    <p>
        {% formfield player.ExpQ4_37 %}

    <p>

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

       <input type="hidden" name="val37" value="50000" id="id_value37"/>

        <input type="range" name="position37" id="positionID37" value="50000" min="0" max="100000" oninput="valueID37.value = positionID37.value; id_value37.value = positionID37.value">



    <p>

         <td>38. Seeing the Northern Lights at Abisko National Park in Sweden</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 ExpQ1_scales %}

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

     {% endfor %}

    </tr>

    <tr>

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

    {% for number in ExpQ2_scales %}

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

     {% endfor %}

    </tr>

    <tr>

                <td>How confident would you feel in doing this scenario?</td>

    {% for number in ExpQ3_scales %}

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

     {% endfor %}

    </tr>

</table>

    <p>
        {% formfield player.ExpQ4_38 %}

    <p>

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

       <input type="hidden" name="val38" value="50000" id="id_value38"/>

        <input type="range" name="position38" id="positionID38" value="50000" min="0" max="100000" oninput="valueID38.value = positionID38.value; id_value38.value = positionID38.value">



    <p>

         <td>39. Seeing a professional sports game in person at a stadium</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 ExpQ1_scales %}

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

     {% endfor %}

    </tr>

    <tr>

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

    {% for number in ExpQ2_scales %}

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

     {% endfor %}

    </tr>

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

    {% for number in ExpQ3_scales %}

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

     {% endfor %}

    </tr>

</table>

    <p>
        {% formfield player.ExpQ4_39 %}

    <p>

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

       <input type="hidden" name="val39" value="50000" id="id_value39"/>

        <input type="range" name="position39" id="positionID39" value="50000" min="0" max="100000" oninput="valueID39.value = positionID39.value; id_value39.value = positionID39.value">



    <p>

         <td>40. Scuba-diving/snorkeling off of the coast of Maui to see the coral reefs and exotic aquatic life</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 ExpQ1_scales %}

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

     {% endfor %}

    </tr>

    <tr>

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

    {% for number in ExpQ2_scales %}

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

     {% endfor %}

    </tr>

    <tr>

                <td>How confident would you feel in doing this scenario?</td>

    {% for number in ExpQ3_scales %}

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

     {% endfor %}

    </tr>

</table>

    <p>
        {% formfield player.ExpQ4_40 %}

    <p>

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

       <input type="hidden" name="val40" value="50000" id="id_value40"/>

        <input type="range" name="position40" id="positionID40" value="50000" min="0" max="100000" oninput="valueID40.value = positionID40.value; id_value40.value = positionID40.value">



    <p>

         <td>41. Riding a motorcycle without a helmet</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 ExpQ1_scales %}

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

     {% endfor %}

    </tr>

    <tr>

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

    {% for number in ExpQ2_scales %}

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

     {% endfor %}

    </tr>

    <tr>

                <td>How confident would you feel in doing this scenario?</td>

    {% for number in ExpQ3_scales %}

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

     {% endfor %}

    </tr>

</table>

    <p>
        {% formfield player.ExpQ4_41 %}

    <p>

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

       <input type="hidden" name="val41" value="50000" id="id_value41"/>

        <input type="range" name="position41" id="positionID41" value="50000" min="0" max="100000" oninput="valueID41.value = positionID41.value; id_value41.value = positionID41.value">



    <p>

         <td>42. Playing with a poisonous snake that could potentially bite</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 ExpQ1_scales %}

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

     {% endfor %}

    </tr>

    <tr>

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

    {% for number in ExpQ2_scales %}

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

     {% endfor %}

    </tr>

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

    {% for number in ExpQ3_scales %}

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

     {% endfor %}

    </tr>

</table>

    <p>
        {% formfield player.ExpQ4_42 %}

    <p>

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

       <input type="hidden" name="val42" value="50000" id="id_value42"/>

        <input type="range" name="position42" id="positionID42" value="50000" min="0" max="100000" oninput="valueID42.value = positionID42.value; id_value42.value = positionID42.value">



    <p>

         <td>43. Pay to travel to the moon and back even though ti would be expensive and there are possible health
             risks</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 ExpQ1_scales %}

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

     {% endfor %}

    </tr>

    <tr>

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

    {% for number in ExpQ2_scales %}

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

     {% endfor %}

    </tr>

    <tr>

                <td>How confident would you feel in doing this scenario?</td>

    {% for number in ExpQ3_scales %}

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

     {% endfor %}

    </tr>

</table>

    <p>
        {% formfield player.ExpQ4_43 %}

    <p>

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

       <input type="hidden" name="val43" value="50000" id="id_value43"/>

        <input type="range" name="position43" id="positionID43" value="50000" min="0" max="100000" oninput="valueID43.value = positionID43.value; id_value43.value = positionID43.value">



    <p>

         <td>44. Participate in a clinical trial that uses new, but potentially harmful, technology to edit your genes
             in order to prevent you from having a disease that is recurrent in your family</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 ExpQ1_scales %}

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

     {% endfor %}

    </tr>

    <tr>

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

    {% for number in ExpQ2_scales %}

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

     {% endfor %}

    </tr>

    <tr>

                <td>How confident would you feel in doing this scenario?</td>

    {% for number in ExpQ3_scales %}

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

     {% endfor %}

    </tr>

</table>

    <p>
        {% formfield player.ExpQ4_44 %}

    <p>

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

       <input type="hidden" name="val44" value="50000" id="id_value44"/>

        <input type="range" name="position44" id="positionID44" value="50000" min="0" max="100000" oninput="valueID44.value = positionID44.value; id_value44.value = positionID44.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 %}