{{ block title }}Belief Check - Round {{ round_num }}{{ endblock }}

{{ block content }}

<div class="card">
    <div class="card-body">
        <h4><i class="fas fa-question-circle"></i> Quick Question</h4>
        
        <p>Based on your experience in the first <strong>{{ round_num }}</strong> rounds:</p>
        
        <div class="card bg-light mb-3">
            <div class="card-body">
                {{ if framing == 'gain' }}
                <h5>What do you believe is the probability that <strong>heavy snow will occur<strong>?</h5>
                {{ else }}
                <h5>What do you believe is the probability that <strong>heavy rain will occur</strong>?</h5>
                {{ endif }}
            </div>
        </div>
        
        <div class="alert alert-info">
            <small>
                <strong>Note:</strong> This is just to help us understand how people learn. Your answer won't affect your payment; we just want your honest estimate.
            </small>
        </div>
        
        {{ formfield 'stated_belief' label="" }}
        
        <div class="form-group">
            <label>Your belief about the probability (0-100%):</label>
            <input type="range" class="custom-range" name="stated_belief" 
                   min="0" max="100" value="0" id="beliefSlider"
                   oninput="updateBeliefValue(this.value)">
			<div class="text-center mt-2">
                <h4><span id="beliefValue" class="badge badge-info">0</span></h4>
            </div>
        </div>
        
		{{ if framing == 'gain' }}
        <div class="text-muted">
            <small>
                <strong>For example:</strong><br>
                • 75 means you think heavy snow is more likely than not<br>
				• 50 means you think it is equally likely for heavy snow to fall or not<br>
                • 25 means you think NO heavy snow is more likely than heavy snow<br>
				You may choose any percentage probability between 0 and 100 that seems right to you.
            </small>
        </div>
		
		{{ else }}
		
		<div class="text-muted">
            <small>
                <strong>For example:</strong><br>
                • 75 means you think heavy rain is more likely than not<br>
				• 50 means you think it is equally likely for heavy rain to fall or not<br>
                • 25 means you think NO heavy rain is more likely than heavy rain<br>
            </small>
        </div>
		{{ endif }}
		
        
        {{ next_button }}
    </div>
</div>

<script>
function updateBeliefValue(val) {
    document.getElementById('beliefValue').textContent = val;
    document.getElementsByName('stated_belief')[0].value = val;
}
</script>

{{ endblock }}