{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Part 1
{% endblock %}

{% block content %}
<div class="row">
           <div class="column" style="background-color:#aaa;border:10px solid white; padding:30px;">
       <h5> For your convenience, we have included the text from previous page, in this box:</h5>
    <br>
    <p>The feminine side is based on a value that you place on others. If you have a strong feminine side and place a high value on others, you are often giving and unselfish. You usually know what is good for people, and you tend to operate in ways that helps others get what they want out of life. You happily let people operate their own life without interference from you, but when asked, you are also willing to help by supporting, cooperating, and giving advice. People feel comfortable with you because you give of who you are without pushing yourself on others. If you have a strong feminine side, people also feel comfortable being around you because there is no selfishness for them to detect.</p>
    <p>If you have a strong feminine side, you do things that you have to be giving and unselfish in order to do. This includes recognizing people's basic human rights and allowing them to operate their life without interfering with those rights.  For example, allowing them the freedom to operate independently, and the freedom to fit into society wherever and however they want, even the freedom to let people choose when to face up to reality and when to be in denial.  Allowing people their basic rights includes letting them control their own life, letting them choose what to believe without being manipulated by you, and letting them choose their own path or direction in life without hindrance from you. The feminine side also includes having an enthusiasm and zest for life, and recognizing what things are worth getting enthusiastic about. And it includes having the persistence and tenacity to stay with something until it is finished, while still knowing when to give up on it if your energy is better used elsewhere.</p>
           </div>
          <div class="column" style="background-color:#ddd;border:10px solid white; padding:30px;">
              <strong>Your responses to the following questions are confidential and anonymous. <br>Please answer the following questions within 5 minutes. Your screen will start a countdown when you have 1 minute left. The timer will appear at the top of the screen. </br></strong>

         {% formfield group.relateF %}
        {% formfield group.reflectF %}
              Once you have answered these two questions, please click on the 'Next' button to proceed.
           </div>
</div>
<style>
    .otree-timer {
        display: none;
    }
</style>

<script>
    $(function () {
        $('.otree-timer__time-left').on('update.countdown', function (event) {
            if (event.offset.totalSeconds === 60) {
                $('.otree-timer').show();
            }
        });
    });
</script>
    {% next_button %}

{% endblock %}