Hola, he hecho algunas pruebas y lo he conseguido
Esta basado en xhtml, css y javascript (muy sencilla la funcion
).
Se estructura en un div contenedor que aloja 3 div con float left (izq, centro y der).
En el los divs izq y der estan las preguntas con las opciones en lista y cada opcion tiene una etiqueta <a> que hace referencia a una funcion de javascript a la cual le pasa como parametro el id de esta para que muestre la respuesta correcta.
El div centro tiene la propiedad css de visibility en "hidden", y dentro tienes otro div donde aparecera la información cuyo id es "info", así como tambien el botón de resultados.
La función de javascript showText(opcID) lo que hace es una selección (switch) en función del parametro opcID que es el que indica que opción fue marcada. De acuerdo a cada caso, establece en la propiedad "innerHTML" del div "info" el valor (texto) que debe mostrar y luego cambia la propiedad css visibility del div "centro" a visible.
No te dejo el código completo en esta ocasión porque prefiero que a partir de la explicación busques la forma de hacerlo.
Sólo te dejare la función javascript (porque me dijiste que no lo manejas mucho) y la forma de ejecutarla desde una etiqueta <a>
Código :
<script language="javascript" type="text/javascript">
function showText(opcID){
switch (opcID) {
//Pregunta 1
case 11:
document.getElementById("info").innerHTML = "<p><strong>Explicación: </strong>Esto es la opción 1 de la pregunta 1</p>";
document.getElementById("centro").style.visibility = "visible";
break
case 12:
document.getElementById("info").innerHTML = "<p><strong>Explicación: </strong>Esto es la opción 2 de la pregunta 1</p>";
document.getElementById("centro").style.visibility = "visible";
break
case 13:
document.getElementById("info").innerHTML = "<p><strong>Explicación: </strong>Esto es la opción 3 de la pregunta 1</p>";
document.getElementById("centro").style.visibility = "visible";
break
//Pregunta 2
case 21:
document.getElementById("info").innerHTML = "<p><strong>Explicación: </strong>Esto es la opción 1 de la pregunta 2</p>";
document.getElementById("centro").style.visibility = "visible";
break
case 22:
document.getElementById("info").innerHTML = "<p><strong>Explicación: </strong>Esto es la opción 2 de la pregunta 2</p>";
document.getElementById("centro").style.visibility = "visible";
break
case 23:
document.getElementById("info").innerHTML = "<p><strong>Explicación: </strong>Esto es la opción 3 de la pregunta 2</p>";
document.getElementById("centro").style.visibility = "visible";
break
//Pregunta 3
case 31:
document.getElementById("info").innerHTML = "<p><strong>Explicación: </strong>Esto es la opción 1 de la pregunta 3</p>";
document.getElementById("centro").style.visibility = "visible";
break
case 32:
document.getElementById("info").innerHTML = "<p><strong>Explicación: </strong>Esto es la opción 2 de la pregunta 3</p>";
document.getElementById("centro").style.visibility = "visible";
break
case 33:
document.getElementById("info").innerHTML = "<p><strong>Explicación: </strong>Esto es la opción 3 de la pregunta 3</p>";
document.getElementById("centro").style.visibility = "visible";
break
//Pregunta 4
case 41:
document.getElementById("info").innerHTML = "<p><strong>Explicación: </strong>Esto es la opción 1 de la pregunta 4</p>";
document.getElementById("centro").style.visibility = "visible";
break
case 42:
document.getElementById("info").innerHTML = "<p><strong>Explicación: </strong>Esto es la opción 2 de la pregunta 4</p>";
document.getElementById("centro").style.visibility = "visible";
break
case 43:
document.getElementById("info").innerHTML = "<p><strong>Explicación: </strong>Esto es la opción 3 de la pregunta 4</p>";
document.getElementById("centro").style.visibility = "visible";
break
//Pregunta 5
case 51:
document.getElementById("info").innerHTML = "<p><strong>Explicación: </strong>Esto es la opción 1 de la pregunta 5</p>";
document.getElementById("centro").style.visibility = "visible";
break
case 52:
document.getElementById("info").innerHTML = "<p><strong>Explicación: </strong>Esto es la opción 2 de la pregunta 5</p>";
document.getElementById("centro").style.visibility = "visible";
break
case 53:
document.getElementById("info").innerHTML = "<p><strong>Explicación: </strong>Esto es la opción 3 de la pregunta 5</p>";
document.getElementById("centro").style.visibility = "visible";
break
//Pregunta 6
case 61:
document.getElementById("info").innerHTML = "<p><strong>Explicación: </strong>Esto es la opción 1 de la pregunta 6</p>";
document.getElementById("centro").style.visibility = "visible";
break
case 62:
document.getElementById("info").innerHTML = "<p><strong>Explicación: </strong>Esto es la opción 2 de la pregunta 6</p>";
document.getElementById("centro").style.visibility = "visible";
break
case 63:
document.getElementById("info").innerHTML = "<p><strong>Explicación: </strong>Esto es la opción 3 de la pregunta 6</p>";
document.getElementById("centro").style.visibility = "visible";
break
default:
document.getElementById("centro").style.visibility = "hidden";
break
}
}
</script>
Para usarlo con <a> es:
Código :
<a href:"javascript:showText(52);">Opción 2</a>
En este caso se trata de la pregunta 5, opción 2. Para la 2 pregunta, opción 3 el parametro de la función sería 23
Jejeje... El código la función se ve largo pero es por la cantidad de preguntas y opciones.
Avísame cualquier cosa, espero te sirva...
Saludos