html – How do I display Queryset objects one at a time?

Question:

The idea is to use a filter to select several elements from the database (questions for the test). Next, you need to display these elements one at a time. First, we display the first question of the test, when the user answered the second, and so on. And so that it happens without refreshing the page. I can't figure out how to implement this. How to track which question is displayed and how to choose the next one after the answer. It seems like ajax is needed. If so, what to write in the view. And in the request?

def index(request, course_id, test_task_id):
    test = Test_task.objects.get(id = test_task_id)
    test_question_list = Test_question.objects.filter(test_task = test_task_id)
    for t in test_question:
        answer_test_list = Answer_test.objects.filter(test_question = t.id)
   if request.user.is_authenticated():
        if request.method == "POST" and request.is_ajax():
         #что делать если на вопрос ответили
        else:
         #как вывести первый вопрос
            context = {'test': test,'test_question' : test_question, 'answer_test' : answer_test, 'course_id':course_id}
            return render(request, 'test_task/test_task.html', context)
else:
    return redirect("user_profile:login_view")

All questions are displayed like this:

    <h3>Тест. {{ test.name_test }}</h3>
    <div class="question-panel">
        {% for t in test_question %}
        <div class="question_text" data-num="{{t.id}}">
            {{t.question_text|linebreaksbr}}
        </div>
        <div class="list-group"><div>
            {% for answer in answer_test %}
             <a id="v_1" class="list-group-item questvariant" data-num="{{answer.id}}"> {{ answer.answer }}</a>
            {% endfor %}
        </div></div>
    {% endfor %}
    </div>

I tried to make a request somehow like this:

$(" .questvariant").click( function(e){

    e.preventDefault();
    var quest_id = $(".question_text").data("num");
    var var_id = $(this).data("num");
    var data = {
        'quest_id' : quest_id,
        'var_id' : var_id,
    };
     alert(data);
    $.ajax({
        type: "POST",
        url: "/test/1/1/",
        data: data,
        cache: false,
        success: function(data){

        }
   });
});

Answer:

To know which question should be next, you need to know which one is current. It is recommended to use an offset by a pre-sorted queryset, i.e. For example

Test_question.objects.all().order_by('id')[offset:] # Вместо id можно поставить поле position для солртировки по порядку

But here you need to check that offset does not go beyond the boundaries

You can also indicate in the model which question will be next / previous by adding fields

class TestQuestion(models.Model):
    ....
    next = models.OneToOneField('TestQuestion', related_name='prev', blank=True, null=True)

In this case, you can find out the id of the next question by referring to the old

In general, there are many options for solving this issue …)

About AJAX – it is better to send to an url like / test / (? P \ d +) with a GET / POST response parameter and return a block that should replace the block of the previous question

Scroll to Top
AllEscort