{{ block title }}Wahrgenommene Genauigkeit des KI Systems{{ endblock }}

{{ 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 }}


{{ block content }}

<script>
    // When players click on table cell radio button gets selected
            $(document).on("click","td",function(){
                $(this).find("input:radio").prop("checked", true);
            })

        $(document).ready(function() {
            var slider1 = document.getElementById('perceived_accuracy_slider');

            var range = {
                'min': [0],
                'max': [100]
            };

            noUiSlider.create(slider1, {
                range: range,
                start: 50,
                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];
        });

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


        });


</script>
<br>
<p>
    <b>Im Folgenden möchten wir von Ihnen erfahren, für wie genau Sie die Vorhersage des Künstliche Intelligenz Systems halten.</b>
</p>
<p>
    Das KI-System sagt die Risikobereitschaft aller Experiment-Teilnehmer auf einer Skala zwischen 0 und 10 voraus.
    Der Wert 0 steht hierbei für "gar nicht risikobereit", während 10 für "sehr risikobereit steht":
</p>
<p>
<img src="{{ static 'global/Likert_10_screenshot.png' }}" style="width:100%;padding-right: 40px;padding-top: 5px">
</p>
<p>
     {{ if player.treatment == "treatment" }}
    <b>Für die Vorhersage nutzt das KI-System nur die von Ihnen freiwillig bereitgestellten Informationen.</b>
    {{ else }}
    <b>Für die Vorhersage nutzt das KI-System alle Informationen, die Sie zu Beginn des Experiments bereitgestellt haben.</b>
    {{ endif }}
</p>
<p>
    Wir möchten nun Ihre Einschätzung wissen, bei wie vielen von 100 Personen die Künstliche Intelligenz das Risikolevel (Level 0-10) korrekt vorhersagen würde.
    Hierbei zählt eine Vorhersage nur dann als korrekt, wenn Sie exakt das richtige Risikolevel trifft.
</p>
<p>
    <b>Beispiel:</b> Nehmen Sie an, ein Teilnehmer hat das Risikolevel 6. Eine KI-Vorhersage von Risikolevel 5 wäre hierbei ebenso falsch wie eine Vorhersage von 1.
</p>
<br>
<div class="KI">
    <table class="pic" style="text-align: left">
        <tr>
            <td>
            <div>
                <p>
                    Im Nachgang des Experiments werden wir den korrekten Wert auf Basis der anderen Experiment-Teilnehmer berechnen.
                    <b>Wenn Sie die Frage richtig beantwortet haben (erlaubte Abweichung: 5), erhalten Sie 2500 weitere Punkte.</b>
                </p>
            </div>

            </td>
        </tr>
    </table>
</div>
<br>
<p>
    <b>Geben Sie bitte nun mit dem Schieberegler an, wie viele korrekte Vorhersagen der Risikobereitschaft das KI-System bei 100 Personen erzieln würde:</b>
</p>
<br>
<p>
<div id='perceived_accuracy_slider'></div>
<input type="hidden" name="perceived_accuracy" id="perceived_accuracy"/>
</p>
<br>
<p></p>
Von 100 Personen würde die KI <b><span id="slider1_value" > </span></b> korrekt vorhersagen.
</p>

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

{{ endblock }}