{{ block title }}
Willingness to pay for using the Artificial Intelligence system
{{ 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() {

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

        var slider_BDM = document.getElementById('BDM_1');

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

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

        });
        // show slider value
        var rangeslider_BDMVal = document.getElementById("slider_BDM_value");

        slider_BDM.noUiSlider.on("update", function (values, handle) {
            rangeslider_BDMVal.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(slider_BDM.noUiSlider.get(true))
        });





            var slider_acc = document.getElementById('perceived_accuracy_slider');

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

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

            });

            // show slider value
        var rangeslider_accVal = document.getElementById("slider_acc_value");

        slider_acc.noUiSlider.on("update", function (values, handle) {
            rangeslider_accVal.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(slider_acc.noUiSlider.get(true))
            });




        slider_BDM.noUiSlider.on("slide", function () {
        moved_bdm = true;
        check_inputs();
        });

        var moved_bdm = false;



        slider_acc.noUiSlider.on("slide", function () {
        moved_accuracy = true;
        check_inputs();
        });

        var moved_accuracy = false;

        function check_inputs() {
            if ((moved_accuracy === true) && (moved_bdm === true)) {
                document.getElementById("next-button").disabled = false;
            }
        }

        });



        var clicks = 0;
    function show_BDM_explanation() {
      var x = document.getElementById("BDM_explanation");
      if (x.style.display === "none") {
        x.style.display = "block";
        clicks += 1;
      } else {
        x.style.display = "none";
      }
    }

            var clicks = 0;
    function show_accuracy_explanation() {
      var x = document.getElementById("accuracy_explanation");
      if (x.style.display === "none") {
        x.style.display = "block";
        clicks += 1;
      } else {
        x.style.display = "none";
      }
    }


</script>
<br>
  <div style="text-align: center">
      <hr>
      <hr>
    <p>
        <h1><b>Scenario 2</b></h1>
    </p>
    <p>
        <h3><b>You cannot influence the AI prediction</b></h3>
    </p>
      <hr>
      <hr>
</div>
<br>
<p>
   <b>Just like in scenario 1, please indicate how much your are willing to pay for the usage of the AI system.</b>
</p>
<p>
    <b>Remember: This scenario is about an AI system that uses all information you provided in the initial questionnaire! </b>
</p>
<p>
   If you want to read the instructions of this task again, please click on the gray button below.
</p>
<br>
<div style="text-align:center" >
<button class="btn btn-secondary" type="button" onclick="show_BDM_explanation()">Show explanation</button>
</div>

<p>
<div id="BDM_explanation" style="display:none">
<br>
<p>
   <b>To use the AI system to recommend suitable lotteries, you need to spend an amount of money.</b>
</p>
<p>
    You will now receive an amount of {{ player.spec_endowment_baseline }} points.
    You can use the amount (or part of it) to obtain access to the AI system.
    <br>Alternatively, you can also keep this amount. This amount will then be paid out to you at the end of the experiment together with your payouts from the lottery.
    But then, you have to go through all 200 lotteries by yourself, without AI support!
</p>
<p>
    <b>Using the slider below, please indicate the maximum amount you are willing to pay for the use of the AI system</b>.
 </p>
<p>
    After you place your bid, a threshold between 0 and {{ player.spec_endowment_baseline }} is drawn randomly.
</p>
 <p>
     If your bid is <i>above</i> this threshold, you may use the AI system.
     The randomly drawn threshold - not your bid - will then be subtracted from your extra amount of {{ player.spec_endowment_baseline }} points.
     The remaining points of the extra amount will be added to your final payout.
</p>
 <p>
     If your bid is <i>below</i> this threshold, you may <i>not</i> use the AI system.
     Consequently, you <i>do not</i> have to pay your stated bid; you can keep the full extra amount of {{ player.spec_endowment_baseline }} points.

</p>
 <p>
     <b>In any case, you will never pay more than what you were willing to pay.</b>
</p>
 <p>
     <b>You will not pay anything if you do not get the AI system.</b>
</p>
<div class="Grey_Background">

<br>
 <p>
     <b>Example 1:</b> Your willingness to pay is 180 points, the randomly drawn threshold is 140 points.
     Therefore, you can use the AI system and the remaining 110 points (250 - 140) of the extra amount will be added to your final payout.
</p>
 <p>
     <b>Example 2:</b> Your willingness to pay is 120 points, the randomly drawn threshold is 180 points.
     Therefore, you can <b>not</b> use the AI system. The full {{ player.spec_endowment_baseline }} points of the extra amount will be added to your final payout.
</p>
<br>
</div>
</div>
<br>

<br>
<p><b>Please indicate how many points of the extra amount of {{ player.spec_endowment_baseline }} points you are willing to pay for the AI system to recommend five lotteries:</b></p>
<br>
<div id='BDM_1' ></div>
<input type="hidden" name="BDM_baseline" id="BDM_full" />
<br>
<br>
<br>
    Your maximum willingness to pay: <b><span id="slider_BDM_value" > </span></b> points.
<br>
<br>
<p>
    <i style="color: red;">Please move the slider, before proceeding</i>
</p>

<br>
<br>

<hr>
<hr>

<br>
<br>
<h2>Perceived accuracy of the AI system</h2>
<br>
<p>
    <b>In the following, we would like to understand how accurate you believe the prediction of the AI system to be.</b>
</p>
<p>
    <b>Remember: for the prediction, the AI system uses all information participants provided in the initial questionnaire!</b>
</p>
<p>
   If you want to read the instructions of this task again, please click on the gray button below.
</p>
<br>
<div style="text-align:center" >
<button class="btn btn-secondary" type="button" onclick="show_accuracy_explanation()">Show explanation</button>
</div>
<br>
<p>
<div id="accuracy_explanation" style="display:none">

<p>
    The AI system predicts the risk tolerance of all experiment participants on a scale between 0 and 10.
    The value 0 stands for "not at all willing to take risks", while 10 stands for "very willing to take risks":
</p>
<p>
<img src="{{ static 'global/Likert_10_screenshot_en.PNG' }}" style="width:100%;padding-right: 40px;padding-top: 5px">
</p>
<p>
    We would like to know your estimate: For how many of all participants, other than yourself, will the AI correctly predict the risk level (level 0-10)?
    A prediction only counts as correct if it hits exactly the right risk level.
</p>

<p>
    <b>Example:</b> Suppose a participant has risk level 6. An AI prediction of risk level 5 would be as wrong as a prediction of 1.
</p>

</div>
<br>

<div class="KI">
    <table class="pic" style="text-align: left">
        <tr>
            <td>
            <div>
                <p>
                    After the experiment, we will calculate the real accuracy of the AI based on the other experiment participants.
                    <b>If you answered the question correctly (allowed deviation: +/- 5%), you will receive 250 more points.</b>
                </p>
            </div>

            </td>
        </tr>
    </table>
</div>
<br>
<p>
    <b>Now, please use the slider to indicate the percentage of other participants in the study (other than yourself) for whom the AI will correctly predict the risk tolerance:</b>
</p>
<br>
<p>
<div id='perceived_accuracy_slider'></div>
<input type="hidden" name="perceived_accuracy_baseline" id="perceived_accuracy"/>
</p>
<br>
<p></p>
 <b>The AI will predict the risk tolerance of <span id="slider_acc_value" > </span>% of the participants correctly</b>
</p>
<p>
    <i style="color: red;">Please move the slider before proceeding.</i>
</p>

<br>
<hr>
<hr>

<br>

<h2>Your attitude towards the AI system</h2>
<br>
    <p>
        <b>Please answer some questions about the AI system truthfully.</b>
    </p>
    <p>
        Now, please give your personal assessment of the following questions.
        There is no 'right' or 'wrong' in these questions, it is just about your personal assessment.
    </p>
<br>


<div>
    <table class="likert">
        <col span="1" class="wide">
        <tr>
            <th></th>
            <th>Strongly disagree</th>
            <th>Disagree</th>
            <th>Rather disagree</th>
            <th>Neutral</th>
            <th>Rather agree</th>
            <th>Agree</th>
            <th>Strongly agree</th>
        </tr>
        <tr>
            <td class="likert_label">{{ form.transparency_baseline.label }}</td>
            {{ for choice in form.transparency_baseline }}
            <td class="likert_choice">{{ choice }}</td>
            {{ endfor }}
        </tr>
        <tr>
            <td class="likert_label">{{ form.power_baseline.label }}</td>
            {{ for choice in form.power_baseline }}
            <td class="likert_choice">{{ choice }}</td>
            {{ endfor }}
        </tr>
        <tr>
            <td class="likert_label">{{ form.privacy_1_baseline.label }}</td>
            {{ for choice in form.privacy_1_baseline }}
            <td class="likert_choice">{{ choice }}</td>
            {{ endfor }}
        </tr>
        <tr>
            <td class="likert_label">{{ form.privacy_2_baseline.label }}</td>
            {{ for choice in form.privacy_2_baseline }}
            <td class="likert_choice">{{ choice }}</td>
            {{ endfor }}
        </tr>
        <tr>
            <td class="likert_label">{{ form.curiosity_baseline.label }}</td>
            {{ for choice in form.curiosity_baseline }}
            <td class="likert_choice">{{ choice }}</td>
            {{ endfor }}
        </tr>

    </table>
</div>

<br>



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

{{ endblock }}