Question

I have the following XML file:

<?xml version='1.0' encoding='utf-8'?>
<Answers>
    <Question1  q="What is your favourite colour?&lt;br /&gt;">
        <a1>Blue</a1>
        <a2>purple</a2>
        <a3>Green</a3>
        <a4>Red</a4>
        <a value="0">0</a>
        <b value="0">0</b>
        <c value="1">0</c>
        <d value="0">0</d>
    </Question1>
    <Question2  q="What is the colour of the grass?&lt;br /&gt;">
        <a1>Blue</a1>
        <a2>Green</a2>
        <a3>Purple</a3>
        <a4>Red</a4>
        <a value="0">0</a>
        <b value="1">0</b>
        <c value="0">0</c>
        <d value="0">0</d>
    </Question2>
    <Question3  q="What is the average air speed of an unladen swallow?&lt;br /&gt;">
        <a1>10mph</a1>
        <a2>15mph</a2>
        <a3>30mph</a3>
        <a4>European or African swallow?</a4>
        <a value="0">0</a>
        <b value="0">0</b>
        <c value="0">0</c>
        <d value="1">0</d>
    </Question3>
</Answers>

And I am parsing it with the following code:

function runQuiz(whichQ) {
            if (window.XMLHttpRequest) { 
                xmlhttp = new XMLHttpRequest(); 
            } else { 
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //If browser == IE, get ActiveX object
            } 
            xmlhttp.open("GET", whichQ, false);  //Open the file using the GET routine
            xmlhttp.send();  //Send request
            xmlDoc = xmlhttp.responseXML;  //xmlDoc holds the document information now

            var atext,btext,ctext,dtext = 0;

            $(xmlDoc).find("Question1").each(function() {           
                var a = xmlDoc.childNodes[0].children[0];

                $('#form').prepend( $(xmlDoc).find("Question1").attr('q') ); //Append Question

                $(a).find("a1").each(function() {
                    $('#form').append('<input type="radio" name="answer1" class="a1" value="15mph"> 15mph<br />');
                    atext = $(this).parent().children('a').text();
                });
                var a = xmlDoc.childNodes[0].children[0];
                $(a).find("a2").each(function() {
                    $('#form').append('<input type="radio" name="answer2" class="a2" value="20mph"> 20mph<br />');
                    btext = $(this).parent().children('b').text();
                });
                var a = xmlDoc.childNodes[0].children[0];
                $(a).find("a3").each(function() {
                    $('#form').append('<input type="radio" name="answer3" class="a3" value="15mph"> 30mph<br />');
                    ctext = $(this).parent().children('c').text();
                });
                var a = xmlDoc.childNodes[0].children[0];
                $(a).find("a4").each(function() {
                    $('#form').append('<input type="radio" name="answer4" class="a4" value="eurofrican"> European or African Swallow?<br />');
                    dtext = $(this).parent().children('d').text();
                });

                $('.label, .cu-mid p').fadeOut(150); //Fade out the letters on the bars and the overhead labels
                $('.cu-mid','.cuboid.'+'green1').animate({ height: atext*2 }, 550,'easeOutBounce'); //animate 1
                $('.cu-mid','.cuboid.'+'green2').animate({ height: btext*2 }, 550,'easeOutBounce'); //animate 2
                $('.cu-mid','.cuboid.'+'green3').animate({ height: ctext*2 }, 550,'easeOutBounce'); //animate 3
                $('.cu-mid','.cuboid.'+'green4').animate({ height: dtext*2 }, 550,'easeOutBounce', function() { //animate 4 then...
                    $('.label1').html(atext+'%'); //Set all four labels
                    $('.label2').html(btext+'%');
                    $('.label3').html(ctext+'%');
                    $('.label4').html(dtext+'%');
                    $('.label, .cu-mid p').fadeIn(150); //Fade it all back in
                });
            });
        }

So my question is: Is there a better/more efficient/elegant way of doing this?

I am iterating through the XML document and retrieving the child nodes of other elements.

Any and all ideas welcome! 😀

Answer 1

1. $(a), $('#form') is called multiple times – use variables.
2. var a = xmlDoc.childNodes[0].children[0] called multiple times – why?
3. Do you need these animations?!
4. Generally you append some info as input tags with hardcoded text. Why you don’t use text from XML?
5. This code is binded to data too much. What if there are 5 questions? If you have control over this XML I would suggest redesign.