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

{% block title %}
    Отгадайте решение ИИ в игре общественное благо
{% endblock %}

{% block content %}
    <style>
        .question-box {
            background-color: #f8f9fa;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            padding: 25px;
            margin-bottom: 30px;
        }
        
        .question-title {
            font-size: 20px;
            font-weight: bold;
            color: #495057;
            margin-bottom: 15px;
        }
        
        .question-label {
            font-size: 16px;
            margin-bottom: 15px;
            line-height: 1.6;
        }
        
        .role-badge {
            display: inline-block;
            background-color: #007bff;
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .role-badge.gpt {
            background-color: #17a2b8;
        }
        
        .role-badge.variance {
            background-color: #6c757d;
        }
        
        .models-list {
            font-style: italic;
            color: #666;
            font-size: 14px;
            margin-top: 10px;
        }
    </style>

    <div class="card">
        <div class="card-body">
            <p class="lead">Ответьте на два вопроса о поведении моделей ИИ:</p>

<!-- ПРАВИЛА ИГРЫ -->
<div style="background-color: #fff3cd; border: 2px solid #ffc107; border-radius: 8px; padding: 20px; margin: 20px 0;">
    <h5 style="font-weight: bold; margin-bottom: 15px;">📌 Напоминание: Правила игры общественное благо</h5>
    
    <p><strong>В игре участвуют 10 игроков.</strong></p>
    
    <p>
        Каждый игрок получает первоначальный капитал в <strong>100 долларов</strong>. 
        Затем каждый игрок самостоятельно решает, какую сумму внести в общий фонд (от 0 до 100 долларов).
    </p>
    
    <p>
        Общий фонд формируется из взносов всех 10 игроков. После того как все сделали свой выбор, 
        сумма в общем фонде <strong>умножается на 2</strong> и <strong>делится поровну между всеми 10 игроками</strong>.
    </p>
</div>

<hr style="margin: 30px 0;">
            
            <!-- ВОПРОС 1: GPT - СРЕДНИЙ ВЗНОС -->
            <div class="question-box">
                <span class="role-badge gpt">ВОПРОС 1</span>
                <div class="question-title">Средний взнос GPT</div>
                <div class="question-label">
                    Мы провели 1000 независимых игр «Общественное благо» с моделью GPT в соответствии с правилами выше. 
                    Как вы думаете, сколько в среднем (в долларах) она вносила в общий фонд?.
                </div>
                {{ formfield 'question1_gpt' label='Ваш ответ (в долларах):' }}
            </div>
            
            <!-- ВОПРОС 2: ДИСПЕРСИЯ МЕЖДУ МОДЕЛЯМИ -->
            <div class="question-box">
                <span class="role-badge variance">ВОПРОС 2</span>
                <div class="question-title">Разброс между моделями</div>
                <div class="question-label">
                    Мы провели 8000 симуляций, по 1000 с разными моделями. 
                    Мы хотим узнать ваше мнение о том, насколько ответы моделей разнятся между собой. 
                    Укажите среднее отклонение среди ответов восьми моделей (в долларах).
                </div>
                <div class="models-list">
                    Модели: arcee_free, gpr_os, grok_4_1, llama_3, llama_3_2, gpt_2, deepseek_V3_2, L3_linarius
                </div>
                {{ formfield 'question2_variance' label='Ваш ответ (в долларах):' }}
            </div>
            
            <hr style="margin: 30px 0;">
            
            <div class="alert alert-info">
                <strong>💰 Вознаграждение:</strong><br>
                Компьютер случайным образом выберет одну из ситуаций.<br>
                Если ваш ответ окажется близким к решению модели (с отклонением не более $2), вы получите 300 рублей.
            </div>
            
            {% next_button %}
        </div>
    </div>
{% endblock %}