Блог

У меня есть простое приложение Django, похожее на приложение для викторины. Я сохранил все вопросы с ответами в базе данных. Затем я извлекаю все вопросы из шаблона, используя Django ListView. Каждый вопрос имеет 4 варианта и одно поле ответа. Изначально я хочу скрыть ответ и использовать всплывающее окно Bootstrap 4. Когда пользователь нажимает на кнопку всплывающего окна, отобразится ответ. Я сделал все, но всплывающее окно не показывает ответ, когда я нажимаю кнопку. Ниже приведен мой код —

 <div class="col-md-12 card border-0 mb-2 mt-3 ml-1">
      <div class="card-body pl-0 pt-3">
        {% for topic in topic_list %}
          <h2 class="mt-0 mb-0">{{ topic.name }}</h2>
          
          {% for question in topic.question_set.all %}
            <h6 class="mb-4">{{ question.serial_no }}. {{ question.name }}</h6>
            <div class="form-check ml-3">
              <label class="form-check-label">
                <input type="radio" class="form-check-input" name="optradio">(A) {{ question.option1 | safe }}
              </label>
            </div>
            <div class="form-check ml-3">
              <label class="form-check-label">
                <input type="radio" class="form-check-input" name="optradio">(B) {{ question.option2 | safe }}
              </label>
            </div>
            <div class="form-check ml-3">
              <label class="form-check-label">
                <input type="radio" class="form-check-input" name="optradio">(C) {{ question.option3 | safe }}
              </label>
            </div>
            <div class="form-check ml-3 mb-4">
              <label class="form-check-label">
                <input type="radio" class="form-check-input" name="optradio">(D) {{ question.option4 | safe }}
              </label>
            </div>
            <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="{{ question.answer }}">
              Show Answer
            </button>      
          {% endfor %}              
        {% endfor %}
      </div>
    </div>