{% set questions = [{
  id: 1,
  title: "What is a prop in Angular?"
},{
  id: 2,
  title: "How you define something?"
},{
  id: 3,
  title: "Can you deploy to production?"
}]
%}

{% for question in questions %}
  <div class="card mb-4"  data-position="1" data-question-id="1">
    <div class="card-header d-flex justify-content-between">
      <div class="d-flex align-items-center ">
        
        <span class="question_handle btn btn-sm btn-secondary">
          <i class="material-icons">menu</i>
        </span>
        <div class="h4 m-0 ml-4">Q: {{ question.title }}</div>
      </div>
      <div>
        <a href="#" class="btn btn-danger btn-sm">Delete</a>
      </div>
    </div>
    <div class="card-body">
      {% if question.id == 1 %}
      <div id="answerWrapper_1" class="mb-4">
        {% include 'pages/_instructor.quiz-answers_1.html' %}
      </div>
      {% endif %}
      {% if question.id == 2 %}
      <div id="answerWrapper_2" class="mb-4">
        {% include 'pages/_instructor.quiz-answers_2.html' %}
      </div>
      {% endif %}
      {% if question.id == 3 %}
      <div id="answerWrapper_3" class="mb-4">
        {% include 'pages/_instructor.quiz-answers_3.html' %}
      </div>
      {% endif %}
      
      <div class="">
        <form action="#">
          <div class="form-group mb-0">
            <button class="btn btn-success">New Answer</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  {% endfor %}