"""
instructions_text.py — Single source of truth for all instruction text.

Both the instruction pages and the collapsible review panels on the
comprehension pages import from here, so any edit only needs to happen once.

Each variable holds a plain HTML fragment (no <html>/<body> wrapper).
Templates render it with:   {{ general_instructions_html|safe }}
                            {{ dictator_instructions_html|safe }}
                            {{ risk_instructions_html|safe }}
"""

# ---------------------------------------------------------------------------
# General Instructions
# ---------------------------------------------------------------------------

GENERAL_INSTRUCTIONS_HTML = """
<p>Thank you for taking part in our study. Please read these instructions carefully before you begin. The study consists of a few tasks and a questionnaire.</p>

<h3>Overview of the Tasks</h3>
<p>In the tasks you will face a series of <strong>situations</strong>. In each situation there are <strong>two options</strong> — one on the left and one on the right — and you will have to decide between them or provide your perception of the situation. Before each task starts, the task will be explained in more detail.</p>
<p>In general, there are <strong>two types</strong> of situations, <strong>allocation situations</strong> and <strong>lottery situations</strong>. The allocation situations have options that differ in how a sum of money is divided between you and someone else. The lottery situations have options that differ in the lotteries that they represent. More information will be provided shortly.</p>

<h3>Payment</h3>
<p>Your earnings will consist of a participation fee of <strong>EUR 6.00</strong> and a bonus payment of up to <strong>EUR 18.00</strong>. The amount of your bonus payment depends on your decisions in the tasks and can also depend on chance or the decisions of others.</p>
<p>Earnings in the study are expressed in <strong>Monetary Units (MU)</strong>. At the end of the session, your MU earnings will be converted to EUR at the rate <strong>1 MU = EUR 1.00</strong>.</p>

<p>The bonus payment that you will receive will be determined as follows:</p>
<ul>
    <li>At the end of the session, <strong>one situation will be randomly selected</strong> from all the situations.</li>
    <li>Your decision in that situation will determine your bonus.</li>
</ul>
<div style="background:#e8f4f7; border-left:4px solid #2a6e7c; padding:12px 16px; border-radius:0 6px 6px 0; margin:14px 0;">
    <strong>Important:</strong> Because any situation could be the one that determines your bonus payment, you should consider every decision carefully.
</div>
<p>In the following you will first receive instructions about the two different types of situations you will see throughout the session. These instructions explain the situations for the different tasks. Before each task, there are more specific instructions on what kind of decisions you will be asked to make in that task.</p>
<p>If anything is unclear to you at any point, please raise your hand and an experimenter will come to you to answer your questions in private.</p>
<p>Throughout the different tasks, the situations may look similar but not identical. Therefore, consider each situation equally and respond in each situation in line with your preferences.</p>
"""

# ---------------------------------------------------------------------------
# Allocation Situations Instructions
# ---------------------------------------------------------------------------

DICTATOR_INSTRUCTIONS_HTML = """
<h3>Overview</h3>
<p>In the allocation situations, the options differ in how you allocate Monetary Units (MU) between yourself and another person. The amount that you send to the other person will be multiplied by a given factor — called the <strong>multiplier</strong>.</p>
<p>The other person is not otherwise involved in this study. You will not learn the identity of the other person, and the other person will not learn about your identity, and will not make any decision that can affect your payment in any way.</p>

<h3>How Each Situation Is Displayed</h3>
<p>Each situation presents two options side by side. The visualization for each option shows:</p>
<ul>
    <li>The <strong>split</strong>: how many of the 10 MU you keep and how many MU are sent to the other person.</li>
    <li>The <strong>multiplier</strong> applied to the amount sent to the other person.</li>
    <li>The <strong>final payouts</strong>: how many MU you and the other person ultimately receive.</li>
</ul>
<div style="text-align:center; margin:20px 0;">
    <img src="/static/Allocation_example.png"
         alt="Allocation example"
         style="max-width:70%; border:1px solid #ddd; border-radius:8px;">
</div>
"""

# ---------------------------------------------------------------------------
# Lottery Situations Instructions
# ---------------------------------------------------------------------------

RISK_INSTRUCTIONS_HTML = """
<h3>Overview</h3>
<p>In the Lottery situations, <strong>the options differ in the lottery that they represent</strong>. Each option is a lottery with up to two possible outcomes.</p>

<h3>How Each Situation Is Displayed</h3>
<p>Each option is shown as a colored wheel. The size of each colored segment corresponds to the probability of that outcome. The MU amount for each outcome is shown inside the wheel, and the probabilities are displayed below it. If one outcome is certain (100% probability), the wheel will be a single color showing that amount.</p>
<div style="text-align:center; margin:20px 0;">
    <img src="/static/Lottery_example.png"
         alt="Lottery example"
         style="max-width:100%; border:1px solid #ddd; border-radius:8px;">
</div>
"""

# ---------------------------------------------------------------------------
# Decision Task Instructions
# (shown before the unconditional decision pages)
# ---------------------------------------------------------------------------

PREFERENCE_INSTRUCTIONS_HTML = """
<h3>Overview</h3>
<p>In this task, you will see a series of lottery and allocation situations. 
For each situation, <strong>please choose the option which you prefer most</strong>. 
In addition, <strong>please indicate how strong your preference is</strong>. 
You can also indicate that you are indifferent between the two options. </p>
<p>If one of your decisions from this task is selected as the payoff-relevant situation, 
<strong>the option which you chose will be the one that determines your bonus payment</strong>. 
If you indicated that you are indifferent between the two options, 
then one of the two options will be chosen at random with equal probability. </p>

<h3>How Each Situation Is Displayed</h3>
<p>Each situation shows two options side by side. After you make a choice, a slider will appear below the two options, with which you should indicate how strong your preference for one option over the other is. You can use the full range of the slider.  If you are indifferent between the two options, you can click on the “Indifferent” button between the two options. </p>
"""

# ---------------------------------------------------------------------------
# Threshold Instructions
# ---------------------------------------------------------------------------
THRESHOLD_INSTRUCTIONS_HTML= """
<p>This is a new task. Before you start, please read the following instructions carefully — they explain how you make your decisions in this task.</p>

<h3>The earlier group</h3>
<p>For each of the situations you just saw, <strong>a separate group of 10 people already made decisions</strong>. In the following, these people will be referred to as <strong>'the earlier group'</strong>. This earlier group of people was selected from participants very similar to you and therefore is on average quite <strong>similar to you with regards to demographic characteristics</strong>.</p>

<h3>Description of the decision situation</h3>
<p>In this study, <strong>you make decisions that can depend on how many people in the earlier group chose which of the two options</strong>. We will call this the <strong>split</strong> in the earlier group. We ask you to set your <strong>personal threshold</strong>, which is <strong>the <em>minimum</em> number</strong> of people from the earlier group <strong>who would need to have chosen the <u>left option</u> for you to also choose the <u>left option</u>.</strong></p>

<h3>How You Set Your Personal Threshold</h3>
<p>You will set your personal threshold using a <strong>slider</strong> below the two options. As you move the slider, person icons below the options will update automatically to show the corresponding split that represents your personal threshold. The slider ranges from you choosing "Always left" to "Always right" with intermediate settings in between. You should set the slider so that it reflects your true personal threshold, which can be any number of people, between 0 and 10, in the earlier group who have chosen the left option.</p>
<ul>
    <li>Move the slider <strong>all the way to the left ("Always Left")</strong> if you would
    <em>always</em> choose the <em>left option</em> — regardless of how many people in the earlier group chose the left option, including if
    none of them did.</li>
    <li>Move the slider <strong>all the way to the right ("Always Right")</strong> if you would
    <em>always</em> choose the <em>right option</em> — regardless of how many people in the earlier group chose the left option, including if
    all of them did.</li>
</ul>
<p>Here is an example of how the slider looks:</p>
<div style="text-align:center; margin:20px 0;">
    <img src="/static/Slider_example.png"
         alt="Slider example"
         style="max-width:100%; border:1px solid #ddd; border-radius:8px;">
</div>
<p>By setting the slider you are indicating the
<em>minimum</em> number of people from the earlier group who would need to have chosen the
left option for you to also choose the left option. Recall that <em>the earlier group consisted of 10 people</em>.</p>
<ul>
    <li>For example, set the slider to 3 if you would only choose the left option if <em>at least 3</em> people in the earlier group
    also chose the left option. This also means that if less than 3 chose the left option you would choose the right option.</li>
    <li>For example, set the slider to 10 if you would choose the left option only if <em>all 10</em> people in the earlier group
    also chose the left option and else you would choose the right option.</li>
</ul>

<p>The <strong>option that determines your payoff</strong> therefore <strong>depends on your personal threshold and
the actual behavior of the earlier group:</strong> if the number of people who chose
the left option is equal to or larger than your personal threshold, the left option will be selected for you —
otherwise it will be the right option.</p>

<div style="background:#e8f4f7; border-left:4px solid #2a6e7c; padding:12px 16px; border-radius:0 6px 6px 0; margin:14px 0;">
    <p style="margin:0;"><strong>Example:</strong> If your slider is set to 4, 
    you choose the right option if 3 or less people in the earlier group chose the left option, 
    and the left option if 4 or more people in the earlier group chose the left option.</p>
</div>

<p>There are no right or wrong answers. Please respond according to your preferences.</p>
"""

# ---------------------------------------------------------------------------
# Appropriateness task (Injunctive Norm Perception) Instructions
# ---------------------------------------------------------------------------

APPROPRIATENESS_INSTRUCTIONS_HTML = """
<p>In the following task, you will again be presented with a series of situations. <strong>For each of the options</strong>, please indicate whether in your opinion, <strong>given the other possible option</strong>, <strong>choosing the option</strong> would be:</p>
<ul>
    <li>very socially inappropriate</li>
    <li>somewhat socially inappropriate</li>
    <li>somewhat socially appropriate</li>
    <li>or very socially appropriate</li>
</ul>
<p>By socially appropriate, we mean behavior that most people agree is the "correct" or "ethical" thing to do.</p>
<p>If one of your decisions from this task is selected as the one that determines your bonus payment, <strong>you receive a bonus payment of 10 MU if your rating matches the mode of the ratings of the members of the earlier group</strong>.</p>
<p>Note: The mode is the most frequently selected rating by the members of the earlier group. That is, if you indicate a specific appropriateness rating for one of the choices and this choice is selected, you receive the bonus payment if your indicated appropriateness rating was the most frequently selected rating by the other participants.</p>
"""

# ---------------------------------------------------------------------------
# Additional decisions (DN info task) Instructions
# ---------------------------------------------------------------------------

ADDITIONAL_DECISIONS_INSTRUCTIONS_HTML = """
<p>You will now be presented with a series of additional situations. Each situation shows a <strong>person split</strong> below it.</p>
<p><strong>The person splits shown are the <em>actual</em> choices made by the earlier group.</strong> That is, the person icons below each option reflect <strong>the actual behavior of the people from the earlier group</strong> — not a potential split or your personal threshold.</p>
<p>For each situation, simply click the option that you choose given the shown actual decisions of the earlier group. There are no right or wrong answers. Choose according to your preferences.</p>
<p>If one situation from this task will be selected as the payoff-relevant situation, <strong>the option which you chose will be selected for your bonus payment</strong>.</p>
"""
# ---------------------------------------------------------------------------
# Rule following task Instructions
# ---------------------------------------------------------------------------

RULE_FOLLOWING_INSTRUCTIONS_HTML = """
<p>In this task you will decide how to allocate 20 balls between two urns of different colors.</p>
<p>Your task is to put each of the balls, one-by-one, into one of the two urns: the blue urn or the yellow urn. The balls are presented in the center of your screen, and you can allocate each ball by clicking and dragging it to the urn of your choice. <strong>For each ball you put in the blue urn, you will earn 0.25 MU</strong>, and <strong>for each ball you put in the yellow urn, you will earn 0.50 MU</strong>.</p>
<p><strong>The rule is to put the balls in the blue urn.</strong></p>
<p>If this task is selected as the one that determines your bonus payment, <strong>you receive a bonus payment equivalent to your earnings in this task.</strong></p>
"""