{{ block styles }}
<link rel="stylesheet" href="{{ static 'global/css/shipping_pre.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">
                How many points do you start with in your budget for this task?
            </div>
            <div class="cq-options">
                <label class="cq-option">
                    <input type="radio" name="comprehension_budget" value="0"> 0 points
                </label>
                <label class="cq-option">
                    <input type="radio" name="comprehension_budget" value="1"> 1 point
                </label>
                <label class="cq-option">
                    <input type="radio" name="comprehension_budget" value="10"> 10 points
                </label>
                <label class="cq-option">
                    <input type="radio" name="comprehension_budget" value="25"> 25 points
                </label>
            </div>
        </div>
    </div>

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