{{ block styles }}
<link rel="stylesheet" href="{{ static 'global/css/shipping.css' }}">
{{ endblock }}

{{ block scripts }}
<script src="{{ static 'global/js/comprehension.js' }}"></script>
{{ endblock }}

{{ block content }}
<div class="r-page">

    <div class="r-card">
        <h2>Quick check</h2>
        <p>Please answer this question before continuing.</p>

        <div class="r-field-group">
            <div class="cq-question">
                If you choose the shipping company that is, in fact, faster on average,
                how large is your bonus?
            </div>
            <div class="cq-options">
                <label class="cq-option">
                    <input type="radio" name="comprehension_bonus" value="0.00"> $0.00
                </label>
                <label class="cq-option">
                    <input type="radio" name="comprehension_bonus" value="0.20"> $0.20
                </label>
                <label class="cq-option">
                    <input type="radio" name="comprehension_bonus" value="2.00"> $2.00
                </label>
                <label class="cq-option">
                    <input type="radio" name="comprehension_bonus" value="5.00"> $5.00
                </label>
            </div>
        </div>
    </div>

    <div class="btn-center">
        {{ next_button }}
    </div>
</div>
{{ endblock }}