{% extends "timeline-page.html" %}

{% block stylesheets %}
    <link rel="stylesheet" href="/static/css/consent.css"/>
{% endblock %}

{% block main_body %}
  <div class="main-div" style="padding-bottom: 100px;">
    <noscript>
        <h1>{{ pgettext("consent-javascript", "Warning: Javascript is not working on your browser") }}</h1>
        <p>{{ pgettext("consent-javascript", "The study will not work unless Javascript is enabled on your browser.") }}</p>
        <p>{{ pgettext("consent-javascript", "Please enable Javascript then refresh this page.") }}</p>
    </noscript>
    <h1>{{ pgettext("consent-title", "Research Participant Consent Form for Image/Sound Recordings") }}</h1>
    <hr>
    <div class="text-justify">
        <div class="text-left" style="font-size:18px">
          <h2>{{ pgettext("consent", "Title of study:") }} {{experiment_title}}</h2>
          <p>
              {{pgettext("consent-audiovisual", "I have received oral and written information about the fact that <i>audiovisual</i> recordings will be made in this study.") }}
          </p>
          <p>
              {{ pgettext("consent-audiovisual", "The recording serves the purpose of understanding how humans perceive and process information from sound and visual.") }}
              {{ pgettext("consent-audiovisual", "For example, we would like to understand how predictive mechanisms in perception rely on experience, learning, and memory.") }}
              {{ pgettext("consent-audiovisual", "By making recording people while moving, singing, tapping to rhythms, or speaking, we can infer the mechanisms of the auditory and visual systems.") }}
          </p>
          <p>
              {{ pgettext("consent-audiovisual", "I have been informed that the storage and processing of the <i>audiovisual</i> recording will be carried out in pseudonymized form, i.e., using a number and without containing my name, and that there is a coding list that links my name to the number.") }}
              {{ pgettext("consent-audiovisual", "The investigators are the only persons who have access to this coding list, which will be destroyed after completion of the research project.") }}
              {{ pgettext("consent-audiovisual", "Researchers associated with this project will have access to my <i>audiovisual</i> data during the recording and the analysis of the material.") }}
          </p>
          <p>
              {{ pgettext("consent-audiovisual", "I understand that I am free to withdraw my consent to the collection and storage of my personal data without negative consequences.") }}
          </p>
          <p>
              {{ pgettext("consent-audiovisual", "I agree to the handling of the recordings as described above.") }}
          </p>

          <p>
              <span style="font-weight: bold;">{{ pgettext("consent", "Addendum for demonstrations.") }}</span> {{ pgettext("consent", "I agree that my <i>audiovisual</i> recordings can be used for demonstration purposes in presentations with a limited number of participants (e.g., teaching courses or scientific presentations).") }}
          </p>
          <p>
            {{ pgettext("consent", "(Please tick where applicable)") }}
            <label style="margin-left: 35px; cursor: pointer;">
              <input
                  type="checkbox"
                  id="demonstration-purposes-consent-yes"
                  class="demonstration-purposes-consent"
                  style="cursor: pointer;"/>
              <span>{{ pgettext("consent", "YES") }}</span>
            </label>
            <label style="margin-left: 25px; cursor: pointer;">
              <input
                  type="checkbox"
                  class="demonstration-purposes-consent"
                  style="cursor: pointer;"/>
              <span>{{ pgettext("consent", "NO") }}</span>
            </label>
  ​        </p>

          <p>
              {{ pgettext("consent-audiovisual", "The declaration of consent for <i>audiovisual</i> recordings is voluntary.") }}
              {{ pgettext("consent-audiovisual", "I may withdraw my consent at any time.") }}
              {{ pgettext("consent-audiovisual", "In case of refusal or withdrawal, no costs will be incurred nor will there be other negative consequences; however, in this case, participation in the study will not be possible.") }}
          </p>

          <p>
              {{ pgettext("consent-audiovisual", "I had sufficient time for this decision.") }}
              {{ pgettext("consent-audiovisual", "I have read and understood everything and hereby agree that <i>audiovisual</i> recordings of me may be taken.") }}
              {{ pgettext("consent-audiovisual", "I have received a copy of this consent form.") }}
          </p>

          <h4>{{ pgettext("consent", "Investigator") }}</h4>
          <p>
              Harin Lee,
              Max Planck Institut for Empirical Aesthetics,
              Grüneburgweg 14,
              60322 Frankfurt am Main,
              harin.lee@ae.mpg.de
          </p>
  ​
          <h4>{{ pgettext("consent", "Principal Investigator") }}</h4>
          <p>
              Dr. Nori Jacoby,
              Max Planck Institut for Empirical Aesthetics,
              Grüneburgweg 14,
              60322 Frankfurt am Main,
              nori.jacoby@ae.mpg.de
          </p>
  ​
          <h4>{{ pgettext("consent-consent", "Consent") }}</h4>
          <p>
              {{ pgettext("consent-consent", "By consenting to participate, you acknowledge that you are 18 years or older, have read this consent form, agree to its contents, and agree to take part in this research.") }}
              {{ pgettext("consent-consent", "If you do not wish to consent, please close this page.") }}
          </p>
        </div>
        <hr>
        <h4>{{ gettext("Do you understand and consent to these terms?") }}</h4>
        <br>
        <script>
          psynet.response.staged.metadata = {};
          psynet.response.staged.metadata["demonstration_purposes_consent"] = false;
          function setDemonstrationPurposesConsent() {
            psynet.response.staged.metadata["demonstration_purposes_consent"] = $('#demonstration-purposes-consent-yes').is(':checked');
          }

          $('.demonstration-purposes-consent').click(function() {
            $('.demonstration-purposes-consent').prop('checked', false);
            $(this).prop('checked', true);
            setDemonstrationPurposesConsent();
          });
        </script>
        <button type="button" class="btn btn-primary btn-lg" id="consent" onClick="psynet.nextPage(true);" style="float: left;">
          {{ pgettext("consent", "I agree") }}
        </button>
        <button type="button" class="btn btn-danger btn-lg" onClick="psynet.nextPage(false);" style="float: right;">
          {{ pgettext("consent", "No, thank you (return task)") }}
        </button>
      </div>
  </div>
{% endblock %}
