{% include '_static/global/next_button.html' %}
{{ block title }}
    Regeln
{{ 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> 
    <b><u>Ungültige Hinweise:</u></b>
</p>
</div>
    
<div class="info">
<ul>
    <li> Ein Hinweis enthält mehr als ein <b>einzelnes Wort.</b></li>
        <ul>
            <li> <font color=#DF013A>Beispiel: Der Hinweis <i>sehr gefährlich</i> ist nicht erlaubt, da er insgesamt mehr als zwei Wörter enthält.</font></li>
        </ul>
    <li> Ein Hinweis ist das geheime Wort in <b>anderer Schreibweise.</b></li>
        <ul>
            <li> <font color=#DF013A>Beispiel: Der Hinweis <i>Fussball</i> ist nicht erlaubt, wenn das geheime Wort <i>Fußball</i> ist.</font></li>
        </ul> 
</ul>   
</div>

<div class="info">
<ul>
    <li> Ein Hinweis ist das geheime Wort in einer <b>anderen Sprache.</b> </li>
        <ul>
            <li> <font color=#DF013A>Beispiel: Der Hinweis <i>Black</i> ist nicht erlaubt, wenn das geheime Wort <i>Schwarz</i> ist.</font></li>
        </ul>
    <li> Ein Hinweis ist ein Wort mit demselben <b>Wortstamm wie das geheime Wort.</b> </li>
        <ul>
            <li> <font color=#DF013A>Beispiel: Der Hinweis <i>Prinzessin</i> ist nicht erlaubt, wenn das geheime Wort <i>Prinz</i> ist.</font></li>
        </ul>
</ul>
</div>

<div class="info">
<ul>
    <li> Ein Hinweis ist ein <b>erfundenes Wort</b>.</li>
    <ul>
        <li> <font color=#DF013A>Beispiel: Der Hinweis <i>Süßding</i> ist nicht erlaubt, wenn das geheime Wort <i>Torte</i> ist.</font> </li>
    </ul> 
    <li> Ein Hinweis enthält <b>Sonderzeichen oder Zahlen.</b></li>
    <ul>
        <li> <font color=#DF013A>Beispiel: Der Hinweis <i>#süß*</i> ist nicht erlaubt, wenn das geheime Wort <i>Schokolade</i> ist.</font> </li>
    </ul>
</ul>
</br>
<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 }}