Quiz app boilerplate

index.js

const STORE = {
    score: 0,
    currentQuestionIndex: 0,
    questions: [
        {
            title: 'How many players in a team, y\'all?',
            answers: [
                '12',
                '11',
                '9',
            ]
        },
        {
            title: 'How many meters does the gate has?',
            answers: [
                '15',
                '11',
                '8',
            ]
        },
    ]
}

function checkAnswer() {
    //TODO check the actual answer
    if (STORE.currentQuestionIndex === STORE.questions.length - 1) {
        alert('results screen!')
        return
    }
    STORE.currentQuestionIndex++
    displayCurrentQuestionScreen()
}

function displayCurrentQuestionScreen() {
    const { currentQuestionIndex, questions } = STORE
    const question = questions[currentQuestionIndex]
    const qHTML = `
    <h1>${question.title}</h1>
            <form>
                <input type="radio" id="o1" name="answer" value="11">
                <label for="o1">11</label><br>
                <input type="radio" id="o2" name="answer" value="12">
                <label for="o2">Twelve</label><br>
                <input type="radio" id="o3" name="answer" value="10">
                <label for="o3">9+1</label>
                <button id="js-checkAnswer">
                    Submit answer
                </button>
            </form>
    `
    $('main').html(qHTML)
}

function init() {
    $('body').on('click', '#js-start-button', ev => {
        console.log('Should move to the first question!')
        STORE.currentQuestionIndex = 0
        displayCurrentQuestionScreen()
    })
    $('body').on('click', '#js-checkAnswer', ev => {
        ev.preventDefault()
        checkAnswer()
    })
}

//run init when the DOM is ready
$(init)