{% 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 4 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 personality traits that may or may not apply to you. Please indicate to what extent you agree or disagree that these personality traits apply to you. </p>
<br>
        <b>1. Extraverted, enthusiastic (NOT reserved or shy)</b></p>

    <table style="width:100%">

            <tr>
            <td colspan="2" width="15%" align="center"/>Disagree strongly</td>
              <td width="70%"><center><input  onclick="wasClicked3(1)" type="range" name="bigfive1" id="bigfive1" 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. Agreeable, kind (NOT quarrelsome or critical)</b>
                </td>
        </tr>
    <tr onclick="wasClicked3(2)">
    <td colspan="2" width="15%" align="center">Disagree strongly</td>
      <td width="70%"><center><input type="range" name="bigfive2" id="bigfive2" 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. Dependable, self-disciplined (NOT careless or disorganized)</b>

            </td>
        </tr>
    <tr onclick="wasClicked3(3)">
    <td colspan="2" width="15%" align="center">Disagree strongly</td>
      <td width="70%"><center><input type="range" name="bigfive3" id="bigfive3" 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. Emotionally stable, calm (NOT anxious or easily upset/stressed)</b>

            </td>
        </tr>
    <tr onclick="wasClicked3(4)">
    <td colspan="2" width="15%" align="center">Disagree strongly</td>
      <td width="70%"><center><input type="range" name="bigfive4" id="bigfive4" 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. Open to new experiences, creative (NOT conventional)</b>

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