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

{{ block content }}

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

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

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

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

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

        slider1.noUiSlider.on("update", function (values, handle) {
            rangeSlider1Val.innerHTML = 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>



<br>
<p>
   <b>Die Nutzung des KI-Systems zur Filterung geeigneter Lotterien kostet Sie einen gewissen Punkte-Betrag.</b>
</p>
<p>
    <b>Sie erhalten nun einen Betrag in Höhe von {{ player.spec_endowment }} Punkten.</b>
    Sie können den Betrag (oder einen Teil davon) nutzen, um die Chance zu erhöhen, dass die KI die Lotterien für Sie filtert.
    <br>Alternativ können Sie diesen Betrag auch behalten. Dieser wird Ihnen dann am Ende des Experiments zusammen mit Ihren Gewinnen aus der Lotterie ausbezahlt.

 </p>
<p>
    <b>Geben Sie bitte mit dem unten stehenden Schieberegler an, wie viel Sie für die Nutzung des KI-Systems maximal bereit sind zu zahlen</b>.
 </p>
<p>
    <b>Nachdem Sie Ihr Gebot abgegeben haben, wird zufällig ein Schwellenwert zwischen 0 und {{ player.spec_endowment }} gezogen</b>.
</p>
 <p>
     Wenn Ihr Gebot <b>über</b> diesem Schwellenwert liegt, dürfen Sie das KI-System verwenden.
     Der zufällig gezogene Schwellenwert - nicht Ihr Gebot - wird Ihnen dann von Ihrem Extra-Betrag von 2500 Punkten abgezogen.
     Die restlichen Punkte des Extra-Betrages werden 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 von 2500 Punkten behalten.
</p>
 <p>
     <b>Sie werden also in jedem Fall maximal den Wert bezahlen, den Sie bereit waren zu zahlen.</b>
</p>
<div class="Grey_Background">

<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 1100 Punkte (2500 - 1400) 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 des Extra-Betrags werden Ihnen als Auszahlung angerechnet.
</p>
<br>
</div>
<br>



<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 maximale Zahlungsbereitschaft: <b><span id="slider1_value" > </span></b> Punkte
<br>
<br>


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

{{ endblock }}