{% 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 6

{% 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 Liberal</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>. In particular, how do you <b>agree</b> or <b>disagree</b> with the following statements:

            </td>


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

                <b><i>"Incomes in society should be made more equal."</i></b>
                </td>
            </tr>
  <tr>
             <tr onclick="wasClicked2(6)">
    <td colspan="2" width="15%" align="center">Completely Disagree</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">Completely Agree</td>
  </tr>
 </tr>

         <tr height="50px">
              <tr>
                <td width="5%"><b>6.2.</b></td>
                <td colspan="3">
                <b><i>"We need larger income differences as incentives for individual effort."</i></b>
                </td>
            </tr>
             <tr onclick="wasClicked2(7)">
    <td colspan="2" width="15%" align="center">Completely Disagree</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">Completely Agree</td>
  </tr>

  </tr>
                <tr height="50px">
                     <tr>
                <td width="5%"><b>6.3.</b></td>
                <td colspan="3">
                <b><i>"Government ownership of business and industry should be increased."</i></b>
                </td>
            </tr>
             <tr onclick="wasClicked2(8)">
    <td colspan="2" width="15%" align="center">Completely Disagree</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">Completely Agree</td>
  </tr>
              <tr height="50px">
                   <tr>
                <td width="5%"><b>6.4.</b></td>
                <td colspan="3">
                <b><i>"People can get rich only at the expense of others."</i></b>
                </td>
            </tr>
             <tr onclick="wasClicked2(9)">
    <td colspan="2" width="15%" align="center">Completely Disagree</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">Completely Agree</td>
  </tr>
              <tr height="50px">
                   <tr>
                <td width="5%"><b>6.5.</b></td>
                <td colspan="3">
                <b><i>"Wealth can grow so there is enough for everyone"</i></b>
                </td>
            </tr>
             <tr onclick="wasClicked2(10)">
    <td colspan="2" width="15%" align="center">Completely Disagree</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">Completely Agree</td>
  </tr>

              </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>
var field1 = false;
var field2 = false;
var field3 = false;
var field4 = false;
var field5 = false;
var field6 = false;
var field7 = false;
var field8 = false;
var field9 = false;
var field10 = false;
var fields = [field1,field2,field3,field4,field5,field6,field7,field8,field9,field10]
function wasClicked2(i){
    fields[i-1]=true
}
function isTrue(currentField){
    return currentField == true;
}
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 %}