{% extends "global/Page.html" %}
{% load otree %}
{% block styles %}
    <style>

        /* Sidebar um beim Chat die Materialien ausklappbr zu machen */
        .sidebar_clickable {
            margin-bottom: 0;
            border-bottom-right-radius: .25rem;
            border-bottom-left-radius: .25rem;
            border-top-left-radius: .25rem;
            border-top-right-radius: .25rem;

            position: relative;
            display: block;
            padding: .75rem 1.25rem;
            margin-bottom: -1px;
            background-color: #fff;
            border: 1px solid rgba(0,0,0,.125);

            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            flex-direction: column;

        }

        a:link {
            color:black;
        }
        a:hover {
            text-color:#D11222;
            background-color:rgba(0,0,0,.125);
            cursor:pointer;
        }
        a:active {
            color: #D11222;
        }

    </style>
{% endblock %}

{% block scripts %}

    <script type="text/javascript" language="javascript">

        window.onload=function()  //executes when the page finishes loading
        {setTimeout(showPopUp, 300000);  //sets a timer which calls function func1 after 300.000 milliseconds = 5:00 min.
        };

        function showPopUp() {
	        document.getElementById("pop-up").className="pop-up_show";
        }

        function hidePopUp() {
          var x = document.getElementById("pop-up");
            x.style.display = "none";
        }



        function showContent() {
            var x = document.getElementById("contentInSidebar");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    </script>

{% endblock %}


{% block title %}
Sozialpsychologie Heidelberg
{% endblock %}

{% block content %}
<div class="outerHeadDiv">

    <!-- Hier muss der Titel für die Seite rein (der dann groß und rot angezeigt wird) -->
    <span class="innerHeadDivText new-title">
        Gruppenchat
    </span>

    <div class="innerHeadDivLogo">
        <img src="{% static 'Simpson/unihei_color.jpg' %}" class="logo"/>
    </div>

</div>
<hr>


<h4>Tauschen Sie sich aus!</h4>

<p style="text-align:justify;">
    Bitte diskutieren Sie miteinander, welches der beiden Medikamente <b>Sie als Gruppe</b> empfehlen würden.
    <br>
    <b>Bitte treffen Sie unbedingt vor Ablauf der 6 Minuten eine gemeinsame Entscheidung und geben diese auf der nächsten Seite dann auch an, Sie
    werden danach keine Möglichkeit mehr haben, sich auszutauschen!</b>
    <br>
    Falls Sie nochmals die Artikel anschauen möchten klicken Sie unten auf "Die Artikel".
</p>

{% chat nickname=player.nickname %}
<style>
    .otree-chat {
        margin-bottom:5%;
    }
    .otree-chat__messages {
        height: 400px;
    }
    .otree-chat__nickname {
        color: #D11222;
        font-weight: bold;
    }
</style>

<p>
    Falls Sie sich bereits für eine gemeinsame Gruppenentscheidung entschieden haben, klicken Sie auf <b>"Weiter"</b>.
</p>


<!--------------------- Sidebar --------------------->

<a onclick="showContent()" class="sidebar_clickable">
    <b>Die Artikel</b> (durch klicken zeigen und verbergen)
</a>
<div id="contentInSidebar" class="" style="display:none; margin-top:10px;">
    <h3>Artikel 1</h3>
    <br>

    <img src="{% static 'Simpson/11.02.-Artikel1.png' %}" style="width:80% ;"/>
    <br>

    <p style="text-align:right">11.02.2019</p>
    <br>

    <p style="text-align:justify">
        Herzinfarkte zählen auch heute noch zu einem der häufig auftretenden gesundheitlichen Probleme.
        Hierbei spielen vor allem zwei Faktoren eine wichtige Rolle. Zum einen sollte eine mögliche
        familiäre Vorbelastung berücksichtigt werden, zum anderen ist der Blutdruck ein relevanter Faktor.
        <br>
        In einer aktuellen Studie wurden zwei Medikamente zur Herzinfarktprävention getestet, die über
        die Normalisierung des Blutdrucks wirken. Die Medikamente „Cyran“ und „Caldivon“ wurden von 84
        zufällig ausgewählten Teilnehmern getestet. Jedes Medikament wurde dabei von 42 Teilnehmern eingenommen
        (keine Einnahme beider Medikamente), wobei sich die beiden Gruppen jeweils hinsichtlich wichtiger Merkmale glichen.
        <br>
        Wie in der Grafik dargestellt, zeigt Caldivon eine bessere Wirkung, da es zu einem kleineren
        Anteil an Herzinfarkten bei den Teilnehmern kam, die Caldivon einnahmen im Vergleich zu den Teilnehmern, die Cyran einnahmen.
    </p>

    <br>
    <span style="display:block; height:20px;"></span>

    <h3>Artikel 2</h3>
    <br>

    <span style="display:block; height:15px;"></span>
    <p style="margin-bottom:0px"><b>Teilnehmer mit familiärer Vorbelastung</b></p>
    <img src="{% static 'Simpson/11.02.-Artikel2(1).png' %}" style="width:80% ; border-style:dashed; border-color:#0066ff"/>

    <br>

    <span style="display:block; height:15px;"></span>
    <p style="margin-bottom:0px"><b>Teilnehmer ohne familiäre Vorbelastung</b></p>
    <img src="{% static 'Simpson/11.02.-Artikel2(2).png' %}" style="width:80% ; border-style:dashed; border-color:#0066ff"/>

    <br>

    <p style="text-align:right">11.02.2019</p>
    <br>

    <p style="text-align:justify">
        Herzinfarkte sind nach wie vor ein weit verbreitetes gesundheitliches Problem.
        Es hat sich gezeigt, dass im Zusammenhang mit Herzinfarkten vor allem zwei Faktoren
        eine wichtige Rolle spielen – der Blutdruck, sowie eine mögliche familiäre Vorbelastung.
        <br>
        Eine aktuelle Studie testete die Wirksamkeit zweier Medikamente, die zur
        Herzinfarktprävention dienen, indem sie den Blutdruck normalisieren.
        Hierzu nahmen 84 zufällig ausgewählte Teilnehmer entweder das Medikament „Cyran“ oder „Caldivon“ ein.
        Die 42 Teilnehmer pro Medikament (keine Überschneidung der Gruppen) wurden so ausgewählt,
        dass sie sich auf allen wichtigen Merkmalen nicht unterschieden.
        <br>
        Unterteilt man die Teilnehmer jeweils danach, ob sie eine familiäre Vorbelastung
        aufwiesen bzw. nicht aufwiesen, zeigt sich, wie in der Grafik dargestellt, dass
        Cyran eine bessere Wirkung hat. Es kommt im Verhältnis zu einem geringeren Anteil
        an Herzinfarkten, sowohl bei Teilnehmern mit als auch ohne familiäre Vorbelastung,
        verglichen mit den Teilnehmern, die Caldivon einnahmen.
    </p>

</div>




<!-----------  POP-UP  ----------->
<div id="pop-up" class="pop-up_hide">
    <p style="text-align:center; font-size:1.7rem; color:#D11222">Achtung!</p>

    <p>Ihre Zeit ist fast abgelaufen, bitte einigen Sie sich auf eines der beiden Medikamente!</p>
    <button type="button" class="btn btn-primary" onclick="hidePopUp()" style="background-color:#D11222; border-color:#ffffff; color:#ffffff; float:right">Alles klar!</button>
</div>

<br>

<p style="text-align:justify;">
    <b>Achtung:</b> Wenn Sie auf "Weiter" klicken, haben Sie keine Möglichkeit mehr, sich mit den
    anderen Gruppenmitgliedern auszutauschen! Bitte einigen Sie sich zuerst auf eine Gruppenentscheidung,
    bevor Sie auf "Weiter" klicken.
</p>

<br>
<button class="otree-btn-next btn btn-primary" style="background-color:#D11222; border-color:#ffffff">Weiter</button>

<hr>
<p> <a href="mailto: lob@stud.uni-heidelberg.de" target="_blank" style="color:#D11222">Aaron Lob</a>, Universität Heidelberg  - 2020</p>

{% endblock %}