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



    <div class="rangeslider">
         <p> Which of the following objects, events, or statements do you have a positive or negative feeling towards? </p>
<br>
        <b>1. Our country would be better off if inferior groups stayed in their place.</b></p>

    <table style="width:100%">

            <tr>
            <td colspan="2" width="15%" align="center"/>Disagree strongly</td>
              <td width="70%"><center><input  onclick="wasClicked6(1)" type="range" name="SocialDominance1" id="SocialDominance1" step="0.01" class="slider" min="0" max="1" ></center></td>
              <td width="15%" align="center">Agree strongly</td>
          </tr>

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

                <td colspan="3">
               <b> 2. We should try to treat one another as equals as much as possible.</b>
                </td>
        </tr>
    <tr onclick="wasClicked6(2)">
    <td colspan="2" width="15%" align="center">Disagree strongly</td>
      <td width="70%"><center><input type="range" name="SocialDominance2" id="SocialDominance2" step="0.01" class="slider" min="0" max="1"/></center></td>

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

            <td colspan="3">
           <b> 3. It’s OK if some groups have more of a chance in life than others.</b>

            </td>
        </tr>
    <tr onclick="wasClicked6(3)">
    <td colspan="2" width="15%" align="center">Disagree strongly</td>
      <td width="70%"><center><input type="range" name="SocialDominance3" id="SocialDominance3" step="0.01" class="slider" min="0" max="1"/></center></td>
      <td width="15%" align="center">Agree strongly</td>
  </tr>
              </tr>


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

            <td colspan="3">
            <b>4. There should be much more equal opportunity for everyone from birth, regardless of who their parents are.</b>

            </td>
        </tr>
    <tr onclick="wasClicked6(4)">
    <td colspan="2" width="15%" align="center">Disagree strongly</td>
      <td width="70%"><center><input type="range" name="SocialDominance4" id="SocialDominance4" step="0.01" class="slider" min="0" max="1"/></center></td>
      <td width="15%" align="center">Agree strongly</td>
  </tr>
              </tr>


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

            <td colspan="3">
           <b> 5. The best people should not be expected to accept others as “equals.”</b>

            </td>
        </tr>
    <tr onclick="wasClicked6(5)">
    <td colspan="2" width="15%" align="center">Disagree strongly</td>
      <td width="70%"><center><input type="range" name="SocialDominance5" id="SocialDominance5" step="0.01" class="slider" min="0" max="1"/></center></td>
      <td width="15%" align="center">Agree strongly</td>
  </tr>
              </tr>


        </table>
 <br><br><br>
        <b>6. We would have fewer problems if we treated people more equally.</b></p>

    <table style="width:100%">

            <tr>
            <td colspan="2" width="15%" align="center"/>Disagree strongly</td>
              <td width="70%"><center><input  onclick="wasClicked6(6)" type="range" name="SocialDominance6" id="SocialDominance6" step="0.01" class="slider" min="0" max="1" ></center></td>
              <td width="15%" align="center">Agree strongly</td>
          </tr>

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

                <td colspan="3">
               <b> 7. Some people are just much better than everyone else and deserve to have power and control over others.</b>
                </td>
        </tr>
    <tr onclick="wasClicked6(7)">
    <td colspan="2" width="15%" align="center">Disagree strongly</td>
      <td width="70%"><center><input type="range" name="SocialDominance7" id="SocialDominance7" step="0.01" class="slider" min="0" max="1"/></center></td>

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

            <td colspan="3">
           <b> 8. No one group should dominate in society.</b>

            </td>
        </tr>
    <tr onclick="wasClicked6(8)">
    <td colspan="2" width="15%" align="center">Disagree strongly</td>
      <td width="70%"><center><input type="range" name="SocialDominance8" id="SocialDominance8" step="0.01" class="slider" min="0" max="1"/></center></td>
      <td width="15%" align="center">Agree strongly</td>
  </tr>
              </tr>


        </table>

 <br><br><br>
<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 %}