js-tasks/task18/js/main.js

const qBase = [
    {
        question: 'Какой сейчас год?',
        a: '1000',
        b: '2000',
        c: '2001',
        d: '2021',
        answer: 'a'
    },
    {
        question: 'Самый распространенный язык программирования?',
        a: 'java script',
        b: 'java',
        c: 'python',
        d: 'c++',
        answer: 'b'
    },
    {
        question: 'Как расшифровывается аббревиатура HTML?',
        a: 'hello to media line',
        b: 'hypertext media language',
        c: 'hypertext markup language',
        d: 'hydro throne mobile loft',
        answer: 'c'
    },
    {
        question: 'Когда приходит Дед Мороз?',
        a: 'никогда',
        b: 'он и не уходил',
        c: 'в ночь перед Рождеством',
        d: 'в Новогоднюю ночь',
        answer: 'd'
    },
];



// select
const question     = document.getElementById('question');
const questionA    = document.getElementById('guess_a');
const questionB    = document.getElementById('guess_b');
const questionC    = document.getElementById('guess_c');
const questionD    = document.getElementById('guess_d');
const submitBtn    = document.getElementById('submit');
const result       = document.getElementById('result');
const radioButtons = document.querySelectorAll("input[type='radio']");



// variables
let currentQuestion = 0;
let score = 0;



// initial load
loadQuestion();


// =========== Functions ===============


/**
 * set text from array
 * to corresponding HTML elements
 */
function loadQuestion()
{
    question.textContent = qBase[currentQuestion].question;
    questionA.textContent = qBase[currentQuestion].a;
    questionB.textContent = qBase[currentQuestion].b;
    questionC.textContent = qBase[currentQuestion].c;
    questionD.textContent = qBase[currentQuestion].d;
}



/**
 * for each radio button in collection
 *  if checked
 *  set id to variable answer
 *  returns variable answer
*/
function getSelectedRadioButtons()
{
    let answer_id;
    radioButtons.forEach((button) =>
    {
        if (button.checked)
            answer_id = button.id;
    });
    return answer_id;
}



/**
 * for each radio button in collection
 *  set checked state to false 
 */
function deselectRadioButtons()
{
    radioButtons.forEach((button) => { button.checked = false; });
}



// =========== Events ===============



submitBtn.addEventListener('click', () =>
{
    const answer_id = getSelectedRadioButtons();

    if (answer_id == qBase[currentQuestion].answer)
    {
        score++;
    }

    if (currentQuestion >= (qBase.length - 1))
    {
        currentQuestion = 0;
        result.innerHTML = `<h1 style="font-size: 24px">Your score is: ${score} of ${qBase.length}</h1>`;
    }
    else
    {
        currentQuestion++;
    }

    deselectRadioButtons();
    loadQuestion();
});