{% include '_static/global/next_button.html' %}
{{ block title }}
    Worträtsel
{{ endblock }}
{{ block content }}

<style>
    .otree-timer {
        display: none;
    }
</style>
<script>
    document.addEventListener("DOMContentLoaded", function (event) {
        $('.otree-timer__time-left').on('update.countdown', function (event) {
            if (event.offset.totalSeconds === 20) {
                $('.otree-timer').show();
            }
        });
    });
</script>
</br>

<div class="info active">
    <p> Jede Runde ist in <b>sechs Phasen</b> unterteilt:</p>
</div>
<div class="info">
        <p><b>1.</b> Allen Spielenden außer <i>dem Ratenden</i> wird mitgeteilt, für welches geheime Wort sie ein Hinweispaar geben müssen.</p>
</div>
<div class="info">
        <p><b>2.</b> Ohne miteinander zu kommunizieren, generiert zunächst jede <i>Hinweisgebende</i> für sich Hinweispaare.</p>
</div>
<div class="info">
        <p><b>3.</b> Danach kommen die <i>Hinweisgebenden</i> zusammen und <b>kommentieren</b> ihre bisher geschriebenen Hinweispaare. </p>
</div>
<div class="info">
        <p><b>4.</b> Danach hat jede <i>Hinweisgebende</i> nochmals Zeit, ihre Hinweispaare zu überarbeiten. </p>
</div>
<div class="info">
        <p><b>5.</b> Nun bestimmen die <i>Hinweisgebenden</i> gemeinsam, welches <b>eine</b> Hinweispaar sie <i>an den Ratenden</i> weitergeben wollen. </p>
</div>
<div class="info">
        <p><b>6.</b> Bevor <i>der Ratende </i> sie sieht, werden identische Hinweispaare entfernt. <i>Der Ratende</i> hat nur <b> einen Versuch,</b> das geheime Wort zu erraten.</p>  
</div>
<div class="info">   
        <p>Der Gruppe wird nach der Runde mitgeteilt, ob <i>der Ratende </i> das geheime Wort korrekt erraten hat. Die nächste Runde beginnt, und ein anderes Gruppenmitglied wird <i>der Ratende.</i></p>
    </br>
    {{ formfields }}
    <button class= "otree-btn btn btn-info">Weiter</button>
</div>
</br>
<p style="text-align: left">
    <button class="otree-btn btn btn-info" type="button" id="next">Weiter</button>
</p>
    
    {{ endblock }}