Prueba versión ajax

estilos_prueba.css

  .table {
    width: 100%;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    display: table;
    border-color: grey;
    font-size: 0.9em;
  }

  .table th {
    font-weight: bold;
  }

  .table th,
  .table td {
    padding: 8px;
    line-height: 20px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #dddddd;
  }

  .table tbody>tr.incorrecta>td {
    background-color: #fadbd8;
  }

  .table tbody>tr.correcta>td {
    background-color: #d5f5e3;
  }

  #container {
    margin: 0 auto;
    height: 200px;
    width: 100%;
    max-width: 700px;
  }

  .container1 {
    width: 100px;
    float: left;
    padding: 0 20px;
    height: 100%;
  }

  #preguntas {
    margin: 0;
    padding: 0;
    margin-top: 10px;
    list-style: none;
  }

  .controles {
    text-align: center;
    margin: 0 auto 5px;
  }

  .controles a {
    padding: 5px 7px;
    margin: 0 5px;
    background-color: #5c76d8;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    cursor: pointer;
  }

  .controles a:hover {
    background-color: #6699ee;
  }

  #preguntas li {
    list-style: none;
    padding: 10px;
    float: left;
    background-color: #CCC;
    display: inline-block;
    border: 1px solid #999;
    cursor: pointer;
  }

  #preguntas li:hover {
    list-style: none;
    padding: 10px;
    float: left;
    background-color: #EEE;
    display: inline-block;
    border: 1px solid #999;
    cursor: pointer;
  }


  #preguntas li.current {
    padding: 9px;
    border: 2px solid #369;
  }

  #preguntas li.respondida {
    background-color: #CCC;
  }

  #preguntas li.respondida {
    background-color: #93e485;
  }

  #puntaje,
  #nombre {
    width: 300px;
    margin: 0 auto 10px;
    padding: 4px;
    border-radius: 3px;
    display: block;
  }

  .respuestas {
    float: left;
    height: 100%;
    width: 355px;
  }

  label {
    clear: left;
    display: block;
  }

  .respuesta {
    display: none;
  }

  .respuesta.actual {
    display: inline-block;
  }

  .respuesta>div {
    margin-bottom: 5px;
  }

  .invisible {
    display: none;
  }

evaluar_ajax.php

<?php
require_once 'preguntas_y_respuesta.php';

 $final=[];
// Hay que evaluar
if(isset($_POST['participante'])) {
    $participante = $_POST['participante'];
    
    $resultado=[];
    $puntaje = 0;
    $puntaje_maximo = sizeof($respuestas);

    foreach($respuestas as $index => $respuesta) {
        $resultado_pregunta=['index'=>$index]; 
        $resultado_pregunta['pregunta']=$respuesta['pregunta']; 
        $resultado_pregunta['tu_respuesta']=isset($_POST[$respuesta['name']])? $_POST[$respuesta['name']] : 'N/A';
        $resultado_pregunta['respuesta_correcta']= $respuesta['respuesta'];
        $resultado_pregunta['puntaje']=($resultado_pregunta['tu_respuesta']==$resultado_pregunta['respuesta_correcta'])? 1:0;

        $puntaje+=$resultado_pregunta['puntaje'];
        $resultado[]=$resultado_pregunta;

    }
    $final=[
        'participante'=>$participante,
        'resultado'=>$resultado,
        'puntaje'=>$puntaje.' / '.$puntaje_maximo
    ];

}
echo json_encode($final);

preguntas_y_respuesta.php

<?php

$respuestas = [
    [
        'name'         => 'respuesta_1',
        'pregunta'     => 'Cuanto es 2+2?',
        'alternativas' => [1, 2, 3, 4],
        'respuesta'    => 4,
    ],
    [
        'name'         => 'respuesta_2',
        'pregunta'     => 'Vive en una Piña debajo del mar',
        'alternativas' => ['Bob Esponja', 'Patricio Estrella', 'Calamardo', 'Aquaman'],
        'respuesta'    => 'Bob Esponja',
    ],
    [
        'name'         => 'respuesta_3',
        'pregunta'     => 'Cuanto es 3 x 6 ?',
        'alternativas' => [18, 36, '3x6', 4],
        'respuesta'    => 18,
    ],
    [
        'name'         => 'respuesta_4',
        'pregunta'     => 'Mejor sitio web de preguntas y respuestas?',
        'alternativas' => ['stackoverflow español', 'quora', 'answers.org', 'gmail'],
        'respuesta'    => 'stackoverflow español',
    ],
    [
        'name'         => 'respuesta_5',
        'pregunta'     => 'Cuanto es 3+3?',
        'alternativas' => [3, 12, 6, 33],
        'respuesta'    => 6,
    ],
    [
        'name'         => 'respuesta_6',
        'pregunta'     => 'Capital de USA?',
        'alternativas' => ['New York', 'Washington', 'Metropolis', 'Ciudad Gótica'],
        'respuesta'    => 'Washington',
    ],
];


$preguntas = [];

foreach($respuestas as $index => $respuesta) {
    $preguntas[]=$respuesta;
    $preguntas[$index]['respuesta']=null;
}

prueba_ajax.php

<?php
require_once 'preguntas_y_respuesta.php';
?>
<doctype html>
    <html>
    <meta charset="utf-8">

    <head>
        <link rel="stylesheet" href="estilos_prueba.css">
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        
        <script>
        var preguntas = <?php echo json_encode($preguntas); ?>,
            pregunta_actual = 0,
            intervalo;

    $(document).ready(() => {
        var getOpciones = function() {
            $('#preguntas li').removeClass('current').eq(pregunta_actual).addClass('current');
            var respuesta_actual = $('.respuesta').eq(pregunta_actual);
            $('.respuesta').removeClass('actual');
            respuesta_actual.addClass('actual');
        };

        function enviarRespuestas() {
            clearInterval(intervalo);
            console.log(preguntas);
            $('#enviado').removeClass('invisible');
            $('.prueba').addClass('invisible');


            jQuery.ajax({
                url:'evaluar_ajax.php',
                type:'POST',
                dataType:'json',
                data:jQuery('#formulario').serialize()
            }).then(function(final) {
               jQuery('#container').empty().append(jQuery('#resultado'));
               jQuery('#resultado').removeClass('invisible');
               jQuery('#nombre').html('Felicitaciones <b>'+final.participante+'</b>');
               jQuery('#puntaje').html('Obtuviste <b>'+final.puntaje+ '</b> puntos');
               final.resultado.forEach(function(detalle) {
                var tr = jQuery('<tr class="incorrecta">');
                tr.append(`<td>${detalle.pregunta}</td>`);
                tr.append(`<td>${detalle.tu_respuesta}</td>`);
                tr.append(`<td>${detalle.respuesta_correcta}</td>`);
                tr.append(`<td>${detalle.puntaje}</td>`);
                if(detalle.puntaje===1) {
                    tr.removeClass('incorrecta').addClass('correcta');
                }

                jQuery('#detalle tbody').append(tr);
               });
            });

        }

        function empezar() {

        var inicio = new Date(),
            segundos = 300; // tiempo para responder, en segundos


            intervalo = setInterval(() => {
                if (!segundos--) {
                    alert('Se acabó el tiempo!');
                    enviarRespuestas();
                }
                inicio.setTime(inicio.getTime() - 1000);
                $('#tiempo_restante').text(inicio.toTimeString().split(' ')[0]);
            }, 1000);

            jQuery('#ingresa_nombre').addClass('invisible');


        $('#enviar').on('click', enviarRespuestas);

        inicio.setHours(0, 0, segundos); // cuanto tiempo queda
        $('#tiempo_restante').text(inicio.toTimeString().split(' ')[0]);

        preguntas.forEach((elemento, index) => {
            $('#preguntas').append(`<li rel="${index}">${index+1}</li>`);

            var respuesta = $(`<span class="respuesta"><div>${elemento.pregunta}</div></span>`);

            $('.respuestas').append(respuesta);
            elemento.alternativas.forEach((alternativa) => {
                var option = jQuery(`
                    <label >
                        <input type="radio" name="${elemento.name}" value="${alternativa}" >
                            ${alternativa}
                    <label>`);
                respuesta.append(option);
              });
        });
        $('.respuesta').find('input').on('click', function() {
            preguntas[pregunta_actual].respuesta = $(this).val();
            $('#preguntas li').eq(pregunta_actual).addClass('respondida');
        });
        getOpciones();

        $('#preguntas li').on('click', function() {
            pregunta_actual = $(this).attr('rel');
            getOpciones();
        });

        $('#retroceder').on('click', () => {
            if (pregunta_actual === 0) {
                return;
            }
            pregunta_actual--;
            getOpciones();
        });

        $('#avanzar').on('click', () => {
            if (pregunta_actual === preguntas.length - 1) {
                return;
            }
            pregunta_actual++;
            getOpciones();
        });
    }
    jQuery('#ingresa_nombre').on('click',function() {
        if(jQuery('#nombre').val().trim().length===0) {
            jQuery('#nombre').focus();
            return false;
        }
        jQuery('#participante').val(jQuery('#nombre').val().trim());
        jQuery('#nombre').remove();
        jQuery('.controles a').removeClass('invisible');
        jQuery('#ingresa_nombre').addClass('invisible');
        empezar();
    })

    });
        </script>
    </head>

    <body>

        <div id="container">
            <h3>Prueba de conocimientos</h3>
            <div id="enviado" class="invisible">Respuestas Enviadas</div>
            <input type="text" id="nombre" placeholder="Ingresa tu nombre (obligatorio)">
            <div class="controles prueba" >
                <a id="ingresa_nombre">Ingresa tu nombre para iniciar la prueba</a>
                <a id="retroceder" class="invisible"> < retroceder </a>
                <a id="avanzar" class="invisible"> avanzar > </a>
                <a id="enviar" class="invisible"> enviar respuestas </a>
            </div>
            <hr>
            <div class="container1 prueba">
                <div id="tiempo_restante"></div>
                <ul id="preguntas">

                </ul>
            </div>

            <form id="formulario" class="respuestas prueba" method="POST" action="evaluar.php">
                <input type="hidden" name="participante" id="participante">

            </form>
        </div>
         <spam id="resultado" class="invisible">
            <h3>Resultados</h3>
            <div id="resultado">
                <div id="nombre"></div>
                <div id="puntaje"></div>
            </div>
            
            <div class="controles">
            <table id="detalle" class="table">
              <thead>
                <tr>
                  <th>Pregunta</th>
                  <th>Tu respuesta</th>
                  <th>Respuesta Correcta</th>
                  <th>Puntaje</th>
                </tr>
              </thead>
              <tbody>
                
              </tbody>
            </table>
            <br>
            <hr>
            <a href="prueba_ajax.php">Intentarlo de nuevo</a>
        </div>
        </span>
    </body>

</html>