{{ block title }}
Zahlungsbereitschaft für die Nutzung der KI-Unterstützung
{{ endblock }}

{{ block content }}

{{ block global_styles  }}
    <link href= "{{static 'global/noUiSlider/dist/nouislider.css'}}" rel="stylesheet">
    <script src="{{static 'global/noUiSlider/dist/nouislider.js'}}"></script>
{{ endblock  }}
    <!-- ------------------------------------------ -->

{{ if player.treatment == 'baseline'}}

<script>
    $(document).ready(function() {
        var slider1 = document.getElementById('BDM_1');

        var range = {
            'min': 0,
            'max': 2500
        };

        noUiSlider.create(slider1, {
            range: range,
            start: 0,
            step: 1,
            format:{
                    to: (v) => v | 0,
                    from: (v) => v | 0
                    },
            tooltips: true,
            pips: {
                mode: 'count',
                values: 7,
                density: 1
            }

        });
        // show slider value
        var rangeSlider1Val = document.getElementById("slider1_value");

        slider1.noUiSlider.on("update", function (values, handle) {
            rangeSlider1Val.innerHTML = values[handle];
        });

        // show special endowment
        var specialEndowment1 = document.getElementById("specialEndowment1");

        slider1.noUiSlider.on("update", function (values, handle) {
            specialEndowment1.innerHTML = 2500 - values[handle];
        });

        // write slider result into form field for data export
        document.getElementById("next-button").addEventListener("click", function () {
            document.getElementById("BDM_full").value = parseInt(slider1.noUiSlider.get(true))
        });
    });
</script>


{{ else }}

<script>
    $(document).ready(function() {
        var slider2 = document.getElementById('BDM_2');
        var range = {
            'min': [0],
            'max': [2500]
        };

        noUiSlider.create(slider2, {
            range: range,
            start: 0,
            step: 1,
            tooltips: true,
            pips: {
                mode: 'count',
                values: 7,
                density: 1
            }

        });
        // show slider value
        var rangeSlider2Val = document.getElementById("slider2_value");

        slider2.noUiSlider.on("update", function (values, handle) {
            rangeSlider2Val.innerHTML = values[handle];
        });

        // show special endowment
        var specialEndowment2 = document.getElementById("specialEndowment2");

        slider2.noUiSlider.on("update", function (values, handle) {
            specialEndowment2.innerHTML = 2500 - values[handle];
        });

        // write slider result into form field for data export
        document.getElementById("next-button").addEventListener("click", function () {
            document.getElementById("BDM_dec_fs").value = parseInt(slider2.noUiSlider.get(true))
        });

    });
</script>

{{ endif }}


<br>
<p>
   <b>Die Nutzung des KI-Systems zur Filterung geeigneter Lotterien kostet Sie einen gewissen Punkte-Betrag.</b>
</p>
<p>
    Sie erhalten nun einen <b>Extra-Betrag in Höhe von {{ player.spec_endowment }} Punkten.</b>
    Diesen Betrag können Sie entweder behalten, oder Sie verwenden den Betrag (oder einen Teil davon), um sich die KI-Nutzung zu erkaufen.
 </p>
<p>
    Geben Sie bitte mit dem unten stehenden Schieberegler an, wie viel Sie für die Nutzung des KI-Systems <b>bereit sind zu zahlen</b>.
     Nachdem Sie Ihr Gebot abgegeben haben, wird <b>zufällig</b> ein Schwellenwert zwischen 0 und {{ player.spec_endowment }} gezogen.
 </p>
 <p>
     Wenn Ihr Gebot <b>über</b> diesem Schwellenwert liegt, dürfen Sie das KI-System verwenden.
     Der Wert, den Sie als Zahlungsbereitschaft angegeben hatten, wird Ihnen abgezogen.
     Die restlichen Punkte des Extra-Betrages wird Ihnen als Auszahlung angerechnet.
</p>
 <p>
     Wenn Ihr Gebot <b>unter</b> diesem Schwellenwert liegt, dürfen Sie das KI-System <b>nicht</b> verwenden.
     Folglich müssen Sie Ihren angegeben Wert <b>nicht</b> bezahlen; Sie können den kompletten Extra-Betrag behalten.
</p>

<hr>

<br>
 <p>
     <b>Beispiel 1:</b> Ihre Zahlungsbereitschaft ist 1800 Punkte, der Schwellenwert beträgt nach zufälliger Ziehung 1400 Punkte.
     Sie können das KI-System also nutzen und die restlichen 700 Punkte des Extra-Betrags werden Ihnen als Auszahlung angerechnet.
</p>
 <p>
     <b>Beispiel 2:</b> Ihre Zahlungsbereitschaft ist 1200 Punkte, der Schwellenwert beträgt nach zufälliger Ziehung 1800 Punkte.
     Sie können das KI-System also <b>nicht</b> nutzen. Die vollen {{ player.spec_endowment }} Punkte Extra-Betrags werden Ihnen als Auszahlung angerechnet.
</p>
<br>
<hr>
<br>


{{ if player.treatment == 'baseline' }}

<br>
<p><b>Geben Sie bitte an, wie viele Punkte des Extra-Betrages von {{ player.spec_endowment }} Punkten Sie bereit sind für das KI-System zu bezahlen:</b></p>
<br>
<div id='BDM_1' ></div>
<input type="hidden" name="BDM" id="BDM_full" />
<br>
<br>
<br>
    Ihre Zahlungsbereitschaft: <b><span id="slider1_value" > </span></b> Punkte
<br>
<br>
Verbleibendes Budget: <b><span id="specialEndowment1" ></span></b> Punkte
<br>
<br>

{{ else }}

<br>
<p><b>Geben Sie bitte an, wie viele Punkte des Extra-Betrages von 10{{ player.spec_endowment }}00 Punkten Sie bereit sind für das KI-System zu bezahlen:</b></p>
<br>
<div id='BDM_2' ></div>
<input type="hidden" name="BDM" id="BDM_dec_fs" />
<br>
<br>
<br>
    Ihre Zahlungsbereitschaft: <b><span id="slider2_value" ></span></b> Punkte
<br>
    <br>
Verbleibendes Budget: <b><span id="specialEndowment2" ></span> Punkte</b>

<br>
<br>

{{ endif }}

<button id="next-button" class="otree-btn-next btn btn-primary">
    Weiter
</button>

{{ endblock }}