Diminuir esse código JavaScript

Front-end
,
#1 
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>QUIZ</title>

<link href="stylePERG_1.css" rel="stylesheet" />

<div class="container">

    <div id="pontos">PONTOS: 0</div>

    <div class="content">

        <h1>Pergunta 1</h1>

        <p>Pergunta Pergunta Pergunta Pergunta Pergunta Pergunta Pergunta Pergunta Pergunta Pergunta Pergunta Pergunta </p>

        <div class="alternativas">

            <input type="button" id="alt1" name="altC" value="A" onclick="altCertas()"></input>

            <input type="button" id="alt2" name="altE" value="B" onclick="altErradaB()"></input>

            <input type="button" id="alt3" name="altE" value="C" onclick="altErradaC()"></input>

            <input type="button" id="alt4" name="altE" value="D" onclick="altErradaD()"></input>

        </div>

    </div>

</div>

<script>

    function altCertas() {

        document.getElementById('alt1').style.backgroundColor = "#00ff00"

        trocar()

    }

    function altErradaB() {

        var B = window.document.getElementById('alt2')

        var b = String(B.value)

        if (b == "B") {

            document.getElementById('alt2').style.backgroundColor = "#ff0000"

        }

        trocar()

    }

    function altErradaC() {

        var C = window.document.getElementById('alt3')

        var c = String(C.value)

        if (c == "C") {

            document.getElementById('alt3').style.backgroundColor = "#ff0000"

        }

        trocar()

    }

    function altErradaD() {

        var D = window.document.getElementById('alt4')

        var d = String(D.value)

        if (d == "D") {

            document.getElementById('alt4').style.backgroundColor = "#ff0000"

        }

        trocar()

    }

    setTimeout(function trocar() {

        window.location.href = "pergunta_2.html "

    }, 3000)

</script>
#2

Retira as linhas em branco, já vai diminuir bem.

#3 
<div class="container">
  <div id="pontos">PONTOS: 0</div>

  <div class="content">
    <h1>Pergunta 1</h1>
    <p>Pergunta Pergunta Pergunta Pergunta Pergunta Pergunta Pergunta Pergunta Pergunta Pergunta Pergunta Pergunta </p>

    <div class="alternativas">
      <input type="button" id="alt1" name="altC" value="A" onclick="altCertas()"></input>
      <input type="button" id="alt2" name="altE" value="B" onclick="altErrada(this)"></input>
      <input type="button" id="alt3" name="altE" value="C" onclick="altErrada(this)"></input>
      <input type="button" id="alt4" name="altE" value="D" onclick="altErrada(this)"></input>
    </div>
  </div>
</div>

<script>
function altCertas() {
  document.getElementById("alt1").style.backgroundColor = "#00ff00";
  trocar();
}

function altErrada(ctx) {
  ctx.style.backgroundColor = "#ff0000";
  trocar();
}

function trocar() {
  setTimeout(() => window.location.href = "pergunta_2.html ", 3000);
}
</script>
2 curtidas
#4 
<div class="container">
  <div id="pontos">PONTOS: 0</div>
  
  <div class="content">
    <h1>Pergunta 1</h1>
    <p>Pergunta Pergunta Pergunta Pergunta Pergunta Pergunta Pergunta Pergunta Pergunta Pergunta Pergunta Pergunta </p>

    <div class="alternativas">
      <input type="button" class="alt" value="A"></input>
      <input type="button" class="alt" value="B"></input>
      <input type="button" class="alt" value="C"></input>
      <input type="button" class="alt" value="D"></input>
    </div>
  </div>
</div>

<script>
  document.querySelectorAll('input.alt').forEach((el) => {
    el.onclick = () => {
      (el.value === 'A') ? el.style.backgroundColor = '#00ff00' : el.style.backgroundColor = '#ff0000';
      setTimeout(() => window.location.href = "pergunta_2.html ", 3000);
    };
  });
</script>

Me baseei na resposta do @wldomiciano

2 curtidas
#5

Esse código ta fazendo a página mudar automaticamente após os 3 segundos, mas não estou achando o erro que está causando isso

#6

Seu código também fazia isso, achei que estava correto.

Para parar este comportamento basta remover a chamada de trocar().

#7

Hummm… Mas como posso fazer para mudar somente quando eu clicar em uma das alternativas?

#8

Consegui mudar como eu queria, muito obrigado pela ajuda!!

1 curtida
#9

Agora estou a procura de como implementar o processo dos pontos aahaha