{{ extends "si_experiment/Page.html" }}
{{ block title }}
    {{ if player.participant.treatment == "both" }}
        {{ if player.participant.info_first == "dev" }}
            {{ if developer.gender == "weiblich" }}Entwicklerin{{ else }}Entwickler{{ endif }} und KI
        {{ else }}
            KI und  {{ if developer.gender == "weiblich" }}Entwicklerin{{ else }}Entwickler{{ endif }}
        {{ endif }}
    {{ elif player.participant.treatment == "dev" }}
    KI {{ if developer.gender == "weiblich" }}Entwicklerin{{ else }}Entwickler{{ endif }}
    {{ else }}
    KI zur Vorhersage
    {{ endif }}
{{ endblock }}

{{ block content }}
<script>
        $(document).ready(function() {
            var slider = document.getElementById('slider_wtp');
                // WTP slider
            function filterPipsWTP(value) {
                if (value == 80 || value == 20 || value == 50) {
                    return 1;
                } else {
                    return value % 10 == 0 ? 2 : -1;
                }
            }
                function toEncoderMoney(value) {
                    if (value == 50) {
                        return "-0€"
                    } else if (value == 40 || parseInt(value) == 60) {
                        return "-0.10€"
                    } else if (value == 30 || value == 70){
                        return "-0.20€"
                    } else {
                        return "-0.30€"
                    }
                }
            function createSliderWTP(slider) {
                noUiSlider.create(slider, {
                    start: [50],
                    step: 10,
                    // tooltips: true,
                    range: {
                        'min': [20],
                        'max': [80]
                    },
                    pips: {
                        mode: 'steps',
                        filter: filterPipsWTP,
                        format: {
                            from: fromDecoder,
                            to: toEncoderPercentage,
                        }
                    },
                    format: {
                        from: fromDecoder,
                        to: toEncoderMoney,
                    }
                });
            }
            createSliderWTP(slider)

            // show remaining budget and probability to see prediction
            var budget = document.getElementById("budget");
            var wtp_probab = document.getElementById("wtp_probab");

            slider.noUiSlider.on("update", function(){
                wtp_probab.innerHTML = parseInt(slider.noUiSlider.get(true)) + "%";
            })

            slider.noUiSlider.on("update", function(values, handle){
                budget.innerHTML = ((0.30 - values[handle].substring(1,values[handle].length-1)).toFixed(2) + "€").replace(".", ",")
            })


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

        })
</script>

Im <b>nächsten Schritt</b> werden Sie die Möglichkeit erhalten, Ihre <b>Schätzung noch einmal anzupassen</b>.
Dabei kann Ihnen die soeben <b>vorgestellte KI behilflich</b> sein. Beachten Sie, dass die angepasste Schätzung
final ist und damit potenziell Ihre variable Vergütung bestimmt.

<br>
<br>
{{ include "si_experiment/Treatment_t1.html" }}
<div>
    Sie erhalten jetzt <b>0,30€ als Budget</b>, mit der Möglichkeit, dieses <b>Geld einzusetzen</b>. <br><br>
    Sie können entweder die Wahrscheinlichkeit erhöhen, eine <b>KI-Vorhersage für
    {{ if player.participant.tasks_order }}
        den Preis der Wohnung
    {{ else }}
        das Kreditausfallrisiko
    {{ endif }}</b> zu sehen, oder Sie können diese Wahrscheinlichkeit verringern (Ausgangswahrscheinlichkeit ist 50%).
    Pro 10% Erhöhung oder Senkung der Wahrscheinlichkeit werden Ihrem Budget jeweils 0,10€ abgezogen.
    Ihr nicht genutztes Budget, um die KI zu sehen, wird der variablen Vergütung hinzugefügt und Ihnen am Schluss ausgezahlt.
    <br><br>
    <b>Beispiel:</b> Wenn Sie 70% wählen, besteht eine 70%ige Chance, dass Sie die KI-Vorhersage sehen.
    Wenn Sie 30% wählen, besteht eine 30%ige Chance, dass Sie die KI-Vorhersage sehen. In beiden Fällen bezahlen Sie 0,20€,
    sodass 0,10€ zu Ihrer variablen Vergütung hinzugefügt werden.
    <br><br>Zur Erinnerung: Am Ende erhalten Sie eine <b>variable Vergütung</b>, die von der <b>Genauigkeit Ihrer Schätzungen</b> abhängt.
        <br><br>
    Nutzen Sie den Schieberegler, um zu bestimmen, mit welcher Wahrscheinlichkeit Sie die KI-Vorhersage
    sehen möchten.
</div>
<br>
<div>
    <b>Ihr übriges Geld: <span id="budget"></span></b>
</div>
<br>
<br>
<div style="padding-left: 50px; padding-right: 50px" >
    <div id="slider_wtp" ></div>
</div>
<br>
<br>
<br>
<div>
    <b>Die Wahrscheinlichkeit, die KI-Vorhersage zu sehen: <span id="wtp_probab"></span></b>
</div>

<input type="hidden" name="wtp" id="wtp" />

<br>
<button id="next-button" class="otree-btn-next btn btn-primary">
    Weiter
</button>
{{ endblock }}