Как увеличить индикатор выполнения при каждой проверке input=type['radio'] с помощью javascript?

Я делаю приложение для викторины, используя django, но я застрял на javascript.

Я хочу, чтобы индикатор выполнения увеличивался каждый раз, когда отмечается какая-либо радиокнопка, в соответствии с процентом ответов на вопросы от общего числа вопросов.

Проблема в том, что он увеличивается только один раз, т.е. только для первого вопроса. Например, если есть три вопроса, индикатор прогресса застрянет на отметке 33%, независимо от того, ответили ли на другие вопросы или нет.

Вот соответствующий код:

HTML:-

<!--progress bar-->
        <div id="progress-bar-display">0%</div>

{% for q in questions %}
                    <h3> {{ q.id }}.  {{ q.question }}</h3>
                    <input type = "radio" name = "q{{ q.id }}" value = "a" id = "q1a" >   a. {{ q.option1 }}<br><br>
                    <input type = "radio" name = "q{{ q.id }}" value = "b" id = "q1b" >   b. {{ q.option2 }}<br><br>       
                    <input type = "radio" name = "q{{ q.id }}" value = "c" id = "q1c" >   c. {{ q.option3 }}<br><br>
                    <input type = "radio" name = "q{{ q.id }}" value = "d" id = "q1d"  >   d. {{ q.option4 }}<br><br>
                    
                {% endfor %}

JavaScript :-

    //progress_bar_count-->
    var radio = document.querySelectorAll("input[type='radio']");
    answered = 0;
    var size = 0;
    function animate(){
    answered += (1 / questionCount * 100).toFixed(0)
    var progressBar = document.getElementById("progress-bar-display");
    var animation = size;
    var id = setInterval(move, 10);
    var increment = answered;
    
    size = animation + increment;
    
    function move() {
        if (animation >= size || size > 100) {
        clearInterval(id);
        } else {
        animation++;
        progressBar.style.width = animation + '%';
        progressBar.innerHTML = animation * 1 + '%';
        }
    }
    }
    for (var i = 0 ; i < radio.length; i++) {
        radio[i].addEventListener('click' , animate) ; 
    }

Вернуться на верх