@test-cats

Как сделать счетчик ответов?

Сделал небольшой тест на js. Подскажите как добавить счетчик правильных ответов? Я попытался добавить let counter = 0; и потом в цикле добавить counter++;, но счетчик не считается, а просто выводит правильный ли ответ или нет. Как это исправить. Всем большое спасибо за ответы
<div id="test"></div>
    <button id="button">Check</button>

let test = document.querySelector('#test');

let questions = [
    {
        text: 'Question 1',
        right: 0,
        answers: ['answer1', 'answer2', 'answer3']
    },
    {
        text: 'Question 2',
        right: 1,
        answers: ['answer1', 'answer2', 'answer3']
    },
    {
        text: 'Question 3',
        right: 2,
        answers: ['answer1', 'answer2', 'answer3']
    },
    {
        text: 'Question 4',
        right: 3,
        answers: ['answer1', 'answer2', 'answer3', 'answer4']
    },
];

let i = 1;

for (let question of questions) {
    let div = document.createElement('div');
    test.appendChild(div);

    let p = document.createElement('p');
    p.innerHTML = question.text;
    div.appendChild(p);

    let form = document.createElement('form');
    test.appendChild(form);
    form.dataset.right = question.right;

    let j = 0;
    for (let answer of question.answers) {
        let input = document.createElement('input');
        input.type = 'radio';
        input.name = i;
        input.dataset.answerNum = j++;
        form.appendChild(input);
    }
    i++;
}

let button = document.querySelector('#button');

button.addEventListener('click', function () {
    let forms = document.querySelectorAll('#test form');

    for (let form of forms) {

        form.classList.remove('correct');
        form.classList.remove('incorrect');

        let inputs = form.querySelectorAll('input');

        for (let input of inputs) {
            let counter = 0;
            if (input.checked) {
                if (input.dataset.answerNum == form.dataset.right) {
                    form.classList.add('correct');
                    counter++;
                } else {
                    form.classList.add('incorrect');
                }
                // break;

            }
            console.log(counter);
        }
    }
});
<code lang="css">
.correct {
    border: 1px solid green;
}

.incorrect {
    border: 1px solid red;
}
</code>
  • Вопрос задан
  • 321 просмотр
Решения вопроса 1
hzzzzl
@hzzzzl
let counter = 0; вынести в самое начало обработчика клика, иначе ты каждый раз в цикле делаешь новый счетчик = 0, console.log вынести в конец обработчика, иначе опять же в цикле много раз выводишь

Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы