Problema con XML

The_Marshmallow · #1 (**permalink**) 14/04/2011, 15:16

Hola, muy buenas a todos.
Vereis, tengo un problemilla xD.

Hace poco que he empezado a programar en javascript, y me gustaria hacer una pagina web que sea un test de autoescuela, pero que lea las preguntas desde un XML. He conseguido que me muestre las preguntas por pantalla, pero lo hace sin formato, es decir, como si de un bloc de notas se tratara.

No se como hacer para poner el formato a las preguntas XML, para que me salgan en una tabla con inputs radio y todo esas cosas, asi como hacer las funciones para que me hagan la cuenta de las preguntas.

He mirado ejemplos por internet, pero estoy demasiado perdido.
Si me ayudarais, os estaría muy agradecidos.

Este es el codigo que he hecho hasta ahora.

-- CODIGO XHTML --

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Autoescuela BMG</title>
    <link href="CodigoCSS.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">

        alert("Bienvenido a Autoescuela BMG");
        var name = prompt("Por favor, antes de empezar introduce tu nombre:", " ");

        function cargar() {
            var DocumentoXml = new ActiveXObject("Microsoft.XMLDOM");
            DocumentoXml.async = false;                                                 // Sólo sirve para trabajar con Internet Explorer.

            DocumentoXml.load("Preguntas.xml");                                         // Carga del archivo XML.

            var estado = DocumentoXml.readyState;
            var errorcin = DocumentoXml.parseError;

            if (errorcin.errorCode == 0) {
                raiz = DocumentoXml.documentElement;

                for (i = 0; i < raiz.childNodes.length; i++) {
                    var dato = raiz.childNodes.item(i).text
                    document.write("Pregunta: " + dato);
                    document.write("</br>")
                }
            }
        }

    </script>

</head>
<body>

<div id="container">

    <div id="cabecera">

        <h1>Autoescuela BMG</h1>
    
    </div>

<div class="contenido">

<div id="imagen_cabecera"></div>

<p>Esta página web ha sido realizada en lenguaje JavaScript, XHTML, CSS y XML. Su funcionamiento es el siguiente:</p>

<p>Las preguntas contenidas en el test se muestran a partir de un archivo externo XML, especializado en la gestión de información para web.
Una vez contestadas todas las preguntas, mediante el botón situado al final del test se puede realizar una autocorrección usando el lenguaje
JavaScript. Además de esto, el código presenta dos particularidades:</p>

<p>Por un lado, el mismo código presenta, una vez realizada la corrección, un listado de las preguntas y las respuestas seleccionadas por
el usuario seguidas de las respuestas correctas.<br />
Por otro lado, se muestra el número de preguntas acertadas.</p>

<p>Para terminar, mencionar que para dar estética a la página, se han usado hojas de estilo CSS, todo sobre XHTML, dedicado exclusivamente
a la presentación de información.</p>

<br />

    <input id="Button1" type="button" value="Realizar Test" onclick="cargar()"; style="font-family: 'Copperplate Gothic Bold';
        font-size: large; color: #0c6387; text-transform: capitalize; font-variant: normal; font-style: normal; font-weight: normal;
        background-color: #012d3f; margin:0px 0px 0px 280px;"
    />

<hr align="center" />

</div>

</div>


</body>
</html>

Código:

-- CODIGO XML --

<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/css" href="CodigoCSS.css"?>


<Titulo>

  <Pregunta>
    <OpcionA></OpcionA>
    <OpcionB></OpcionB>
    <OpcionC></OpcionC>
  </Pregunta>

  <Pregunta>
    <OpcionA></OpcionA>
    <OpcionB></OpcionB>
    <OpcionC></OpcionC>
  </Pregunta>

</Titulo>

zerokilled · #2 (**permalink**) 14/04/2011, 15:40

buenas,
fijate que estas trabajando a nivel de DOM y no deberias mezclar tecnicas antiguas. me refiero especificamente a la siguiente porcion.

Código:

 for (i = 0; i < raiz.childNodes.length; i++) {
                    var dato = raiz.childNodes.item(i).text
                    document.write("Pregunta: " + dato);
                    document.write("</br>")
                }

una forma de agregar el contenido es creando los elementos con funciones DOM como document.ceateElement y appendChild. es probablemente la forma mas larga y facil. la forma mas corta seria utilizar la propiedad innerHTML para pasar un string html y el navegador lo analiza. o sea, algo parecido a document.write pero a nivel de elementos.

hay otra forma, creo que mas facil aun, pero no se como hacerlo. incluir el documento xml en el xhtml. sin embargo, se requiere de unos cuidados. como por ejemplo que el documento sea servido con mime type application/xhtml+xml para que el navegador lo interprete como xhtml. de modo que -de nuevo, no estoy muy seguro- puedes cargar un xml en un namespace. pero la verdad, no se bien como trabaja. lo menciono por si quieres investigar por ese lado.