{% extends "global/Page.html" %}
{% load staticfiles otree %}
{% block title %}
<style>
.center {
  padding: 200px 0;
}
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  background: #D3D3D3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
/*.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: black;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: black;
  cursor: pointer;
}*/

.slider:hover {
  opacity: 1;
}
.rangeslider {
font-size:10pt;
padding-bottom: 5em;
}


</style>

Questionnaire 2 of 9

{% endblock %}
{% block content %}
<div class="alert alert-danger" id="error_message">
              Please answer all questions!
            You can move the slider by clicking on it and moving your mouse (computers) or finger (mobile devices). If it is exactly at the position that matches your answer,
                please click on it to register your answer.
            </div>
<div class="card bg-light instructions">
<div class="card-body">


    <!------------------ AUTONOMY (JOB) ------------------------------------------------------------------------------->
    <div class="rangeslider">
        <p>1. How <b>interested</b> would you say you are in <b>politics?</b></p>
    <table style="width:100%">

            <tr>
            <td colspan="2" width="15%" align="center"/>Not interested at all</td>
              <td width="70%"><center><input  onclick="wasClicked2(1)" type="range" name="politics1" id="politics1" step="0.01" class="slider" min="0" max="1" ></center></td>
              <td width="15%" align="center">Very interested</td>
          </tr>
    </table>
    <br><br><br>
    <table style="width:100%">
        <tr height="50px">

                <td colspan="3">
                2. Which point on this scale best describes your <b>political views</b> when it comes to <b>social issues</b>? (like same-sex marriage and abortion)
                </td>
        </tr>
    <tr onclick="wasClicked2(2)">
    <td colspan="2" width="15%" align="center">Extremely Conservative</td>
      <td width="70%"><center><input type="range" name="politics2" id="politics2" step="0.01" class="slider" min="0" max="1"/></center></td>

      <td width="15%" align="center">Extremely Liberal</td>
    </tr>
          </tr>
    </table>
    <br><br><br>
        <table style="width:100%">
        <tr height="50px">

            <td colspan="3">
            3. Which point on this scale best describes your <b>political views</b> when it comes to <b>economic issues</b>? (Issues like taxes and the economy)

            </td>
        </tr>
    <tr onclick="wasClicked2(3)">
    <td colspan="2" width="15%" align="center">Extremely Conservative</td>
      <td width="70%"><center><input type="range" name="politics3" id="politics3" step="0.01" class="slider" min="0" max="1"/></center></td>
      <td width="15%" align="center">Extremely Left</td>
  </tr>
              </tr>


        </table>
           <br><br><br>
        <table style="width:100%">
        <tr height="50px">

            <td colspan="3">
            4. Generally speaking, how much do you <b>trust other people? </b>

            </td>
        </tr>
    <tr onclick="wasClicked2(4)">
    <td colspan="2" width="15%" align="center">Completely Distrust </td>
      <td width="70%"><center><input type="range" name="trust" id="trust" step="0.01" class="slider" min="0" max="1"/></center></td>
      <td width="15%" align="center">Completely Trust </td>
  </tr>
              </tr>


        </table>
           <br><br><br>
        <table style="width:100%">
        <tr height="50px">

            <td colspan="3">
            5. Indicate to what extent you think that <b>differences in income</b> are caused by differences in peoples’ <b>efforts</b> over their lifetime or rather by <b>luck? </b>

            </td>
        </tr>
    <tr onclick="wasClicked2(5)">
    <td colspan="2" width="15%" align="center">Only luck </td>
      <td width="70%"><center><input type="range" name="luck" id="luck" step="0.01" class="slider" min="0" max="1"/></center></td>
      <td width="15%" align="center">Only effort </td>
  </tr>
              </tr>


        </table>
         <br><br><br>
        <table style="width:100%">
        <tr height="50px">

            <td colspan="3">

            6. Now we would like you to tell us <b>your views</b> on various <b>issues</b>. How would you place your views on this scale?:

            </td>


        </tr>
    <tr height="50px">
<tr>
                <td width="5%"><b>6.1.</b></td>
                <td colspan="3">


                </td>
            </tr>
  <tr>
             <tr onclick="wasClicked2(6)">
    <td colspan="2" width="15%" align="center">Incomes should be made more equal</td>
      <td width="70%"><center><input type="range" name="politics4" id="politics4" step="0.01" class="slider" min="0" max="1"/></center></td>
      <td width="15%" align="center">We need larger income differences as incentives for individual effort</td>
  </tr>
 </tr>

         <tr height="50px">
              <tr>
                <td width="5%"><b>6.2.</b></td>
                <td colspan="3">

                </td>
            </tr>
             <tr onclick="wasClicked2(7)">
    <td colspan="2" width="15%" align="center">Private ownership of business and industry should be increased.</td>
      <td width="70%"><center><input type="range" name="politics5" id="politics5" step="0.01" class="slider" min="0" max="1"/></center></td>
      <td width="15%" align="center">Government ownership of business and industry should be increased</td>
  </tr>

  </tr>
                <tr height="50px">
                     <tr>
                <td width="5%"><b>6.3.</b></td>
                <td colspan="3">

                </td>
            </tr>
             <tr onclick="wasClicked2(8)">
    <td colspan="2" width="15%" align="center">People can get rich only at the expense of others.</td>
      <td width="70%"><center><input type="range" name="politics6" id="politics6" step="0.01" class="slider" min="0" max="1"/></center></td>
      <td width="15%" align="center">Wealth can grow so there is enough for everyone</td>
  </tr>
       <table style="width:100%">
        <tr height="50px">

            <td colspan="3">

                <br><br><br><br>

            7. I am going to describe various <b>types of political systems</b> and ask what you think about each as a way of governing this country:

            </td>


        </tr>
    <tr height="50px">
<tr>
                <td width="5%"></td>
                <td colspan="3">

                <b><i>7.1. Having a strong leader who does not have to bother with parliament and elections.</i></b>
                </td>
            </tr>

  <tr>

             <tr onclick="wasClicked2(6)">
    <td colspan="2" width="15%" align="center">Very Bad</td>
      <td width="70%"><center><input type="range" name="politics7" id="politics7" step="0.01" class="slider" min="0" max="1"/></center></td>
      <td width="15%" align="center">Very Good</td>
  </tr>
<tr height="50px">
 </tr>

           <td></td>

<tr>
                <td width="5%"></td>
                <td colspan="3">

                <b><i>7.2. Having experts, not government, make decisions according to what they think is best for the country. </i></b>
                </td>
            </tr>
             <tr onclick="wasClicked2(7)">
    <td colspan="2" width="15%" align="center">Very Bad</td>
      <td width="70%"><center><input type="range" name="politics8" id="politics8" step="0.01" class="slider" min="0" max="1"/></center></td>
      <td width="15%" align="center">Very Good</td>
  </tr>
<tr height="50px">

   <tr>
<tr>
   </tr>

           <td width="5%"></td>
                <td colspan="3">

                <b><i>7.3. Having the army rule. </i></b>
                </td>
            </tr>
             <tr onclick="wasClicked2(8)">
    <td colspan="2" width="15%" align="center">Very Bad</td>
      <td width="70%"><center><input type="range" name="politics9" id="politics9" step="0.01" class="slider" min="0" max="1"/></center></td>
      <td width="15%" align="center">Very Good</td>
  </tr>
           <tr height="50px">

<tr>
                <td width="5%"></td>
                <td colspan="3">

                <b><i>7.4. Having a democratic political system. </i></b>
                </td>
            </tr>
             <tr onclick="wasClicked2(8)">
    <td colspan="2" width="15%" align="center">Very Bad</td>
      <td width="70%"><center><input type="range" name="politics10" id="politics10" step="0.01" class="slider" min="0" max="1"/></center></td>
      <td width="15%" align="center">Very Good</td>
  </tr>
<tr height="50px">

              </tr>


        </table>

    </div>



<br>
           <div align="right"><input type="submit" name="next" id="next" onclick="return submitForm();" class="btn btn-primary" value="Continue"/></div>

<script>

function submitForm() {
    var submit = false;

    if(getOS() == 'Android' || getOS() == 'iOS' || getOS == 'Mac OS'){
        submit=true;
    }

    if(fields.every(isTrue)==true){
        submit=true;
    }
    else{
        document.getElementById("error_message").style.display = "block";
        document.body.scrollTop = 0; // For Safari
        document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
        //setTimeout(function(){ document.getElementById("error_message").style.display = "none"; }, 10000);
    }
    return submit;
}
document.getElementById("error_message").style.display = "none";



        function getOS() {
        var userAgent = window.navigator.userAgent,
      platform = window.navigator.platform,
      macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
      windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
      iosPlatforms = ['iPhone', 'iPad', 'iPod'],
      os = null;

  if (macosPlatforms.indexOf(platform) !== -1) {
    os = 'Mac OS';
  } else if (iosPlatforms.indexOf(platform) !== -1) {
    os = 'iOS';
  } else if (windowsPlatforms.indexOf(platform) !== -1) {
    os = 'Windows';
  } else if (/Android/.test(userAgent)) {
    os = 'Android';
  } else if (!os && /Linux/.test(platform)) {
    os = 'Linux';
  }

  return os;
}

</script>




{% endblock %}