{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}Part III: Instructions{% endblock %}

{% block styles %}
<style>
    .instruction-card {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        background-color: #ffffff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .instruction-title {
        font-size: 1.2rem;
        font-weight: 700;
        color: #333;
        margin-bottom: 15px;
        border-bottom: 2px solid #6c63ff;
        padding-bottom: 8px;
        display: inline-block;
    }
    .game-type-box {
        background-color: #f8f9fa;
        border-left: 4px solid #6c63ff;
        padding: 15px;
        margin-bottom: 15px;
    }
    .game-type-header {
        font-weight: bold;
        font-size: 1.1rem;
        color: #2c3e50;
        margin-bottom: 8px;
    }
    .highlight {
        color: #d63384;
        font-weight: bold;
    }
    .sub-point {
        margin-left: 20px;
        margin-bottom: 5px;
        color: #555;
    }
    .lottery-practice-box {
        margin-top: 15px !important;
        margin-bottom: 0 !important;
        background-color: #fff !important;
        border: 1px solid #ddd !important;
    }
</style>
{% endblock %}

{% block content %}

<div class="instruction-card">
    <p><strong>There is a total of 3 sections in this part; each section contains 3 choices (so there is a total of 9 choices). The decisions in any choices or sections will not have any impact on other choices or sections.</strong></p>
    <ul>
        <li>In each choice, a set of different "lottery" options is included.Please select the lottery that you consider the best based on your own preferences.</li>
        <li>There are no standard correct answers in these choices; please make your choices according to your genuine intuition and preferences.</li>
        <li>After the entire study is concluded, we will randomly select one out of the 9 choices and realize the payoff according to the lottery you selected in that specific choice.</li>
    </ul>
</div>

<div class="instruction-card">
    <div class="instruction-title">Presentation of Lotteries and Practice</div>
    <p>Lotteries may be presented in different formats. The presentation of each lottery is explained below.</p>
    <p>You may try the lotteries of each format by pressing the "play" button.</p>

    <div class="game-type-box">
        <div class="game-type-header">1. Slot Machine</div>
        <p>This format of lotteries presents probabilities using "stacked colored blocks."</p>
        <div class="sub-point">
            ● <strong>How to interpret winning probabilities:</strong> Please refer to the height of the colored blocks and the probability labels below. A taller colored block represents a higher winning probability for that specific amount.
        </div>
        <div class="sub-point">
            ● <strong>Game Rules:</strong> If the choice of this format is selected, the chosen slot machine will spin once. The amount on the colored block that ultimately stops in the center of the window will be your reward.
        </div>
        <div id="demo-slot-root"></div>
    </div>

    <div class="game-type-box">
        <div class="game-type-header">2. Drawing a Number</div>
        <p>This format of lotteries represents randomly drawing a number from "1 to 100."</p>
        <div class="sub-point">
            ● <strong>How to interpret winning probabilities:</strong> Please refer to the number of grids occupied by each color and the probability labels below. More grids of a certain color represent a higher winning probability.
        </div>
        <div class="sub-point">
            ● <strong>Game Rules:</strong> If the choice of this format is selected, the computer will randomly draw a number (1-100) with an even probability. If the drawn number falls in the number range corresponding to a specific prize (on the right side of your chosen chart), you will receive that prize.
        </div>
        <div id="demo-number-root"></div>
    </div>

    <div class="game-type-box">
        <div class="game-type-header">3. Spinner</div>
        <p>This format of lotteries presents probabilities using a "circular spinner."</p>
        <div class="sub-point">
            ● <strong>How to interpret winning probabilities:</strong> Please refer to the area size of each sector and the probability labels below. A larger area for a specific color represents a higher winning probability.
        </div>
        <div class="sub-point">
            ● <strong>Game Rules:</strong> If the choice of this format is selected, the chosen spinner will spin once. After the spinner stops, the colored area pointed to by the arrow (▼) at the top indicates your prize.
        </div>
        <div id="demo-wheel-root"></div>
    </div>
</div>

<div class="instruction-card" style="border: 3px solid #6c63ff; background-color: #ffffff; border-radius: 12px; padding: 20px;">
    <div class="instruction-title" style="color: #6c63ff; border-bottom: 2px solid #6c63ff; margin-bottom: 20px;">Comprehension Test</div>
    <p>Please carefully answer the following questions:</p>

    <div class="round-block" style="margin-bottom: 30px; border-left: 5px solid #8dd3c7; padding-left: 15px;">
        <p><strong>1. {{ form.quiz_num_prob.label }}</strong></p>
        <div class="ticket-grid" data-play-type="Drawing a Number" style="pointer-events: none; margin-bottom: 10px;">
            <label>
                $1.5: 10% | $3: 15% | $9: 50% | $15: 5% | $0: 20%
            </label>
        </div>
        {{ form.quiz_num_prob }}
        <div style="color: red; font-size: 0.9rem;">{{ formfield_errors 'quiz_num_prob' }}</div>
    </div>

    <div class="round-block" style="margin-bottom: 30px; border-left: 5px solid #ffffb3; padding-left: 15px;">
        <p><strong>2. {{ form.quiz_wheel_prob.label }}</strong></p>
        <div class="ticket-grid" data-play-type="Spinner" style="pointer-events: none; margin-bottom: 10px;">
            <label>
                $1.5: 10% | $3: 60% | $9: 10% | $15: 10% | $0: 10%
            </label>
        </div>
        {{ form.quiz_wheel_prob }}
        <div style="color: red; font-size: 0.9rem;">{{ formfield_errors 'quiz_wheel_prob' }}</div>
    </div>

    <div class="round-block" style="margin-bottom: 30px; border-left: 5px solid #fb8072; padding-left: 15px;">
        <p><strong>3. {{ form.quiz_slot_prob.label }}</strong></p>
        <div class="ticket-grid" data-play-type="Slot Machine" style="pointer-events: none; ">
            <label>
                $1.5: 40% | $3: 20% | $9: 10% | $15: 10% | $0: 20%
            </label>
        </div>
        {{ form.quiz_slot_prob }}
        <div style="color: red; font-size: 0.9rem;">{{ formfield_errors 'quiz_slot_prob' }}</div>
    </div>

    <div class="round-block" style="margin-bottom: 30px; border-left: 5px solid #80b1d3; padding-left: 15px;">
        <p><strong>4. Are the following statements regarding this part correct?</strong></p>
        <p style="margin: 8px 0 12px; color: #444;">Please select <strong>Yes</strong> or <strong>No</strong> for each statement.</p>

        <div style="margin-bottom: 12px;">
            <p style="margin: 0 0 6px;"><strong>4-1.</strong></p>
            {% formfield player.payrule_q1 %}
        </div>

        <div style="margin-bottom: 12px;">
            <p style="margin: 0 0 6px;"><strong>4-2.</strong></p>
            {% formfield player.payrule_q2 %}
        </div>

        <div>
            <p style="margin: 0 0 6px;"><strong>4-3.</strong></p>
            {% formfield player.payrule_q3 %}
        </div>
    </div>

    <input type="hidden" name="quiz_error_count" value="{{ player.quiz_error_count }}" id="id_quiz_error_count">
</div>

<div class="instruction-card">
    <p>If you have fully understood the above instructions and completed the practice sessions, please click the button below to begin this part.</p>
    <div class="btn-next" style="text-align: right;">
    <button class="otree-btn-next btn btn-primary">Start this part.</button>
</div>
</div>
{% endblock %}

{% block scripts %}
<script src="{% static 'lottery_app/game_vis.js' %}?v=20260314_v2"></script>
{% endblock %}