let i = 0
let acertos = 0
let erros = 0

document.querySelector('.quiz').innerHTML = `
    <img src=${quiz[i].imagem} alt=${quiz[i].alt} />
    <p>${quiz[i].pergunta}</p>
    <div class="btn">
        <button id="btn-sim" onclick="onClick('não')">NÃO</button>
        <button id="btn-nao" onclick="onClick('sim')">SIM</button>
    </div>
`

function onClick(valor){

    if(valor === quiz[i].respostaNão) {
        erros++
    } else {
        acertos++
    }

    if (i < quiz.length) {
        document.querySelector('.quiz').innerHTML = `
            <img src=${quiz[i].imagem} alt=${quiz[i].alt} />
            <p>${quiz[i].pergunta}</p>
            <div class="btn">
            <button id="btn-sim" onclick="onClick('não')">NÃO</button>
            <button id="btn-nao" onclick="onClick('sim')">SIM</button>
        </div>
        `
        i++
    } else {
        let mensagem = ''
        if (acertos > erros){
            mensagem = 'Mana parabéns seu relacionamento é como tem que ser baseado no respeito onde um respeita o espaço do outro'
        } else {
            mensagem = 'Mana chuta que é a laço, relacionamente existe pra te fazer feliz se o boy é desse jeito, cai fora que o mundo é grande'
        }
        document.querySelector('.quiz').innerHTML = `
        <p>${mensagem}</p>
        <img src=${quiz[i].imagem} alt=${quiz[i].alt} />
        `
    }

}