# Szablon: zadania - ankieta

# W katalogu

|--src/                           →  Pliki źródłowe
|  |--templates/                  →  Szablony: katalog główny
|  |  |--pages/                   →  Szablony: podstrony
|  |  |  |--zadania-content-ankieta.twig       

# HTML

{% extends '../layouts/default.twig' %}
{% set head_title = 'Zadania - content - ankieta' %}
{% set body_class = '' %}

{% block page %}
{% include '../../modules/top/top.twig' %}
<div class="container">
  <div class="row">
    <div class="col-12 col-lg-3 col-hd-2">
      {% include '../../modules/sidebar/sidebar.twig' %}
    </div>
    <div class="col-12 col-lg-9 col-hd-10">
      <div class="titleBar titleBar__button">
        <div>
          <div class="titleBar__title">Zadania</div>
        </div>
        <div>
          <a href="" class="btn btn-icon"><img src="./img/icon__arrow-left.svg" alt=""><span>Wróć do listy zadań</span></a>
        </div>
      </div>
      <div class="page-container">
        <div class="contentBar">
          <div class="contentBar__content">
            <div>
              <div class="contentBar__cat text-secondary">Quiz</div>
              <div class="contentBar__title contentBar__title__nmb">Najlepsze naturalne WEGE ubrania z ludzkiej skóry.</div>
            </div>
            <div>
              <div class="contentBar__points">
                <span class="text-secondary">zdobądź</span>
                <div class="points">600 <sup>pkt</sup></div>
              </div>
            </div>
          </div>    
        </div>     
        <form action="">
          <div class="q-question-details">
            <div>
              <div class="q-question-details__subtitle">Pytanie</div>
              <div class="q-question-details__title">2 z 5</div>
            </div>
          </div>
          <div class="bg bg-grey">
            <div class="m-titleBar">
              <div>
                <div class="titleBar__title">Co jest główną zaletą mikrokompetencji?</div>
              </div>
            </div> 
            <div class="q-answer-container q-answer-container__pr">
              <div class="q-placeholder">Możesz wybrać więcej niż jedną odpowiedź</div>
              <div class="q-answer">
                  <label class="input-checkbox">
                    <input type="checkbox" name="rules" />
                    <span class="q-answerItem q-answerItem__input">ATLAS Ultra Geoflex ATLAS Ultra GeoflexATLAS Ultra Geoflex</span>
                  </label>                  
              </div>
              <div class="q-answer">
                  <label class="input-checkbox">
                    <input type="checkbox" name="rules1" />
                    <span class="q-answerItem q-answerItem__input">ATLAS Ultra Geoflex</span>
                  </label>                  
              </div>
              <div class="q-answer">
                  <label class="input-checkbox">
                    <input type="checkbox" name="rules2" />
                    <span class="q-answerItem q-answerItem__input">ATLAS Ultra Geoflex</span>
                  </label>                  
              </div>
              <div class="q-answer">
                  <label class="input-checkbox">
                    <input type="checkbox" name="rules3" />
                    <span class="q-answerItem q-answerItem__input">ATLAS Ultra Geoflex</span>
                  </label>                  
              </div>
              <div class="q-answer">
                <label class="input-radio">
                  <input name="group1" type="radio">
                  <span  class="q-answerItem q-answerItem__input">ATLAS Ultra Geoflex</span>
                </label>                 
              </div>
              <div class="q-answer">
                <label class="input-radio">
                  <input class="full" name="group1" type="radio">
                  <span  class="q-answerItem q-answerItem__input">ATLAS Ultra Geoflex</span>
                </label>                 
              </div>

         </div>         
          </div>
          <div class="button-sets button-sets__space-between button-sets__pr">
            <div class="quarter order-1 order-md-0">
              <a href="" class="btn btn-block">WRÓĆ</a>
            </div>
            <div class="half order-0 order-md-1">
              <button type="submit" class="btn btn-block btn-primary">NASTĘPNE PYTANIE</button>
            </div>
          </div>          
        </form>
      </div>
      {% include '../components/footer.twig' with { 'container': false } %}
    </div>
  </div>
</div>


{% endblock %}

{% block pagejs %}

{% endblock %}

# Korzysta z: