# Szablon: zadania - quiz

# W katalogu

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

# HTML

{% extends '../layouts/default.twig' %}
{% set head_title = 'Zadania - content - quiz' %}
{% 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="q-question-details__subtitle">Punkty</div>
              <div class="q-question-details__title">94</div>
            </div>
            <div>
              <div class="q-question-details__subtitle">Czas <span class="d-none d-lg-inline-block">na odpowiedź</span></div>
              <div class="q-question-details__title">0:45</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-answer"><button class="q-answerItem is-right"><span>więcej obowiązków</span></button></div>
              <div class="q-answer"><button class="q-answerItem is-wrong"><span>duże zarobki</span></button></div>
              <div class="q-answer"><button class="q-answerItem is-active"><span>mogą być wykorzystane w różnych obszarach, niezależnie od głównego kierunku wykształcenia</span></button></div>
              <div class="q-answer"><button class="q-answerItem "><span>uzupełnienie wykształcenia</span></button></div>
            </div>   
            <div class="q-answer-container q-answer-container__points q-answer-container__pr">
              <div class="q-answer"><button class="q-answerItem is-right"><span>więcej obowiązków</span></button></div>
              <div class="q-answer"><div class="points is-right">+<span>64</span> <sup>pkt</sup></div></div>
            </div>    
            <div class="q-answer-container q-answer-container__points q-answer-container__pr">
              <div class="q-answer"><button class="q-answerItem is-wrong"><span>więcej obowiązków</span></button></div>
              <div class="q-answer"><div class="points is-wrong"><span>0</span> <sup>pkt</sup></div></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: