{% extends "global/SimplePage.html" %}
{% load staticfiles otree_tags %}
{% load static %}



{% block title %}

Additional Reward Opportunity (Example)
{% endblock %}
    <style>

    .number-box {
        width: 10px; /* Adjust the width value as needed */
    }

    </style>

{% block content %}
<div class="card bg-light instructions">
    <p style="padding-left: 5pt">
         In the Task 1 of today's experiment, you have the chance to earn an extra £1 as a bonus reward per question. This reward will be added to your participation fee at the end of the experiment.<br><br>
        Below is an example of Mr. X to demonstrate how you can earn the additional reward. <br><br>



        <p style="padding-left: 5pt">
            <strong> 1. Mr X answer the question below:</strong> <br>
        On a scale from 0 to 100 percent, what are the chances that most people believe it will rain tomorrow?  <input type="number" id="Example" name="example" value="65" readonly size="5"></p>


             <br>
    <p style="padding-left:5pt;color: red"><i><b> Mr. X thinks that most people believe there is a 65% chance of rain tomorrow.</b></i> <br>
        </p>

        <p style="padding-left: 5pt">
            <strong> 2. Other participants submit responses: </strong> <br> Other participants reported the chances that it will rain tomorrow.<br><br></p>
    <p style="padding-left:5pt;color: red"><i><b>Most people believe there is a {{avg_response}}% chance of rain tomorrow</b></i></p><br>


    <p style="padding-left: 5pt">
    <strong> 3. Comparison:</strong> If the difference between Mr. X's response and the average is smaller than a randomly chosen number,
        Mr X qualify for the £1 bonus reward. Otherwise, Mr X earn 0 points.<br><br><br><br>
       <div style="width: 100%; height: 50px; position: relative;">
        <div style="position: absolute; top: 0; left: 0; right: 0; height: 10px; background-color: #0056b3;"></div>
        <div style="position: absolute; top: -5px; left: calc(6% - 5px); width: 20px; height: 20px; border-radius: 50%; background-color: #f00;"></div>
        <div style="position: absolute; top: -5px; left: calc(82% - 5px); width: 20px; height: 20px; border-radius: 50%; background-color: #f00;"></div>
        <div style="position: absolute; top: -70px; left: calc(3% - 5px); font-size: 16px;">65% </div>
         <div style="position: absolute; top: -40px; left: calc(3% - 5px); font-size: 16px;">(Mr. X's belief about most people's prediction )</div>
        <div style="position: absolute; top: -60px; left: calc(62% - 5px); font-size: 16px;">(Most people's actual prediction of rain tomorrow) </div>
        <div style="position: absolute; top: -80px; left: calc(82% - 5px); font-size: 16px;">{{ avg_response }}% </div>

        <div style="position: absolute; top: 5px; left: calc(6% + 82% / 2 - 5px); font-size: 20px; color: #f00;">&darr;</div>
        <div style="position: absolute; top: 40px; left: calc(6% - 2px); width: calc(82% + 4px); height: 5px; background-color: #f00;"></div>
        <div style="position: absolute; top: 50px; left: calc(34% - 10px); font-size: 16px; color: #f00;">Difference ({{difference}}%)</div>
      </div>

     <br><br>

    <p style="padding-left: 5pt"><i> <b> Randomly chosen number is <span style="color: red"> {{random_number}}</span></b></i></p><br>

       <p style="padding-left: 5pt">
           {% if difference < random_number %}
           <span style="color: red"> <b>Difference ({{difference}}) is smaller than the randomly chosen number. Mr. X wins</b> </span> <b>100 points</b>.
           {% else %}
           <span style="color: red"><b> Difference ({{difference}}) is smaller than the randomly chosen number. Mr. X wins</b> </span>
           <b>0 points</b>.

           {% endif %}<br><br>

           Remember, the closer Mr X's belief aligns with the average belief, the higher Mr X's chances of earning the additional £2 reward.</p>

        </p>
    </p>
</div>

     <p><b>Click the ‘Next’ button to proceed.</b></p>



{% include "global/ButtonNext.html" with button_text="Next" %}



{% endblock %}