{% 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 5 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> Here are a number of statements that may or may not apply to you. Please indicate to what extent you agree or disagree that these statements apply to you. </p>
<br>
        <b>1. When another person does better than I do, I get tense and aroused.</b></p>

    <table style="width:100%">

            <tr>
            <td colspan="2" width="15%" align="center"/>Disagree strongly</td>
              <td width="70%"><center><input  onclick="wasClicked4(1)" type="range" name="CultureOrientation1" id="CultureOrientation1" 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. I often do "my own thing."</b>
                </td>
        </tr>
    <tr onclick="wasClicked4(2)">
    <td colspan="2" width="15%" align="center">Disagree strongly</td>
      <td width="70%"><center><input type="range" name="CultureOrientation2" id="CultureOrientation2" 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. Parents and children must stay together as much as possible.</b>

            </td>
        </tr>
    <tr onclick="wasClicked4(3)">
    <td colspan="2" width="15%" align="center">Disagree strongly</td>
      <td width="70%"><center><input type="range" name="CultureOrientation3" id="CultureOrientation3" 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. It is my duty to take care of my family, even when I have to sacrifice what I want.</b>

            </td>
        </tr>
    <tr onclick="wasClicked4(4)">
    <td colspan="2" width="15%" align="center">Disagree strongly</td>
      <td width="70%"><center><input type="range" name="CultureOrientation4" id="CultureOrientation4" 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 well-being of my coworkers is important to me.</b>

            </td>
        </tr>
    <tr onclick="wasClicked4(5)">
    <td colspan="2" width="15%" align="center">Disagree strongly</td>
      <td width="70%"><center><input type="range" name="CultureOrientation5" id="CultureOrientation5" 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. Competition is the law of nature.</b></p>

    <table style="width:100%">

            <tr>
            <td colspan="2" width="15%" align="center"/>Disagree strongly</td>
              <td width="70%"><center><input  onclick="wasClicked4(6)" type="range" name="CultureOrientation6" id="CultureOrientation6" 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. It is important that I do my job better than others.</b>
                </td>
        </tr>
    <tr onclick="wasClicked4(7)">
    <td colspan="2" width="15%" align="center">Disagree strongly</td>
      <td width="70%"><center><input type="range" name="CultureOrientation7" id="CultureOrientation7" 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. I'd rather depend on myself than others.</b>

            </td>
        </tr>
    <tr onclick="wasClicked4(8)">
    <td colspan="2" width="15%" align="center">Disagree strongly</td>
      <td width="70%"><center><input type="range" name="CultureOrientation8" id="CultureOrientation8" 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 %}