كيف يمكنني إعطاء معرف للزر في حلقة for في اطار عمل django

يمكنك استخدام jQuery لتغيير لون الزر بعد الحصول على الرد من الطلب AJAX. يجب عليك تضمين jQuery في قالب HTML الخاص بك.

يمكنك تغيير لون الزر باستخدام jQuery عن طريق addClass و removeClass وتعيين فئات CSS تمثل الألوان الخاصة بك.

اليك بعض الاكواد التي يمكنك إضافتها إلى قالب HTML الخاص بك:

HTML:

<!-- add a class to the answer button to select it in jQuery -->
<button type="button" class="btn btn-primary display: inline-block width: auto; answer-btn" name="answer" id="submit" value="{{answer}}">{{ answer|safe }}</button>

JavaScript:
 

<script type="text/javascript">
    // add a click event listener to all answer buttons
    $('.answer-btn').click(function() {
        var clickedBtn = $(this);
        var answer = $(this).val();
        var questionCounter = $(this).closest('.card').attr('value');
        $.ajax({
            type: "POST",
            url: "check_answer",
            data: {'answer': answer, 'question_counter': questionCounter},
            dataType: "json",
            success: function(data) {
                if (data.is_correct) {
                    clickedBtn.addClass('btn-success');
                    clickedBtn.removeClass('btn-primary');
                } else {
                    clickedBtn.addClass('btn-danger');
                    clickedBtn.removeClass('btn-primary');
                }
            },
            error: function(xhr, textStatus, errorThrown) {
                console.log('Error:', errorThrown);
            }
        });
    });
</script>

في هذا المثال، يتم إضافة كلاس "btn-success" أو "btn-danger" إلى الزر الذي تم النقر عليه، حسبما يكون الجواب الذي تم إرجاعه صحيحًا أو خاطئًا. يتم إزالة فئة "btn-primary" من الزر أيضًا.

تأكد من تغيير اسم مسار url في الطلب AJAX "url: 'check_answer'" ليتوافق مع مسار url الخاص بوظيفة Django الخاصة بالتحقق من الإجابة.