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

{% block scripts %}
<script>

function displayBasedOnDummy() {
    // Get the output element by id
    var output_dummy = document.getElementById("dummy");

    // Check the value of the "dummy" variable
    if (output_dummy === 1) {
        // If "dummy" is 1, display the output text
        output_dummy.style.display = "block";
    } else {
        // Otherwise, hide the output text
        output_dummy.style.display = "none";
    }
}

</script>
{% endblock %}

{% block styles %}
<style>

.otree-title{
background: white;
text-align: center;
}

</style>
{% endblock %}

{% block title %}
Student Survey November 2023
{% endblock %}

{% block content %}

<br>
<h2> Student Survey November 2023 </h2>

    <hr>
<p> Herzlichen Dank für Ihre Teilnahme an dieser Befragung!</p>
<p><em>   Thank you for participating in this survey! </em></p>

<div class="mb-3 bg-light border pt-2 pb-2 px-2 ">
<p class="mb-0">Bitte wählen Sie ihre präferierte Sprache aus.</p>
<p><em> Please select your preferred language for the survey.</em></p>

<div class="german"><input type="radio" name="dummy" value="1" id="dummybutton" onclick="displayBasedOnDummy()"> Ja</div>
<div class="english"><input type="radio" name="dummy" value="1" id="dummybutton" onclick="displayBasedOnDummy()"> Yes</div>
<div class="german"><input type="radio" name="dummy" value="0" id="dummybutton" onclick="displayBasedOnDummy()"> Nein</div>
<div  class="english"><input type="radio" name="dummy" value="0" id="dummybutton"onclick="displayBasedOnDummy()"> No</div>

<p>Bitte klicken Sie nun auf den "Weiter/Next"-Button, um Ihr Einverständnis mit der Teilnahme an dieser Umfrage zu signalisieren und die Umfrage zu beginnen. </p>
 <p> <em> Please click the "Weiter/Next" button to consent to participating in this survey and to start the survey.   </em></p>
<br>
   <button class="otree-btn-next btn btn-primary next-button otree-next-button">
    Weiter / Next
</button>

{% endblock %}