Question

Hello I am newbie in HTML5 and j query. I have to parse data from XML that i have done successfully. After parsing data now I want to display it randomly using j query.Please suggest me how do I do this.

The code snippet is

 // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET","xml/multiquestions1.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;     

    var x=xmlDoc.getElementsByTagName("question");
    $(document).ready(function (){
        for(var j=0;j<x.length;j++)
        {
            if(j==0)
            {
                $("#navigationlist").append('<li><a href="#" id="selected_link"  class="navg" onClick="display_nav('+j+',this);">'+(j+1)+'</a></li>');   
                display_nav(j,$("#selected_link"))
            }
            else
                $("#navigationlist").append('<li><a href="#" class="navg" onClick="display_nav('+j+',this);">'+(j+1)+'</a></li>');   
        }               
    });

function display()
    {
        // for fetch question
        Description=(x[i].getElementsByTagName("questionTxt")[0].childNodes[0].nodeValue);
        Answer =(x[j].getElementsByTagName("image")[0].childNodes[0].nodeValue);

        document.getElementById('options').style.backgroundImage = 'url('+Answer+')';

        // Assign the value
        document.getElementById("question").innerHTML= Description; 

    }   

function display_nav(j,obj)
    {
       i=j;
       $("#feedback").html(""); 
        $(".navg").each(function(){

           $(this).removeAttr("id");                         
        });

        $(obj).attr("id","selected_link");
        Description=(x[j].getElementsByTagName("questionTxt")[0].childNodes[0].nodeValue);
        Answer =(x[j].getElementsByTagName("image")[0].childNodes[0].nodeValue);
        answermin=(x[j].getElementsByTagName("answermin")[0].childNodes[0].nodeValue);
        answermax=(x[j].getElementsByTagName("answermax")[0].childNodes[0].nodeValue);

        $("#bob").attr("min",answermin);
        $("#bob").attr("max",answermax);
        $("#bob").attr("value",0);
        $("#out").html(0);
        $("#out").css({left:0});

        // Assign the value
        document.getElementById("question").innerHTML= Description;
        //document.getElementById("options").style.backgroundImage = url(Answer);
        document.getElementById('options').style.backgroundImage = 'url('+Answer+')';       
    }   

and xml is

<?xml version="1.0" encoding="utf-8"?>
<FlashCards>
  <question id="1">
    <questionTxt type="text"><![CDATA[Hello!]]></questionTxt>
<image visible="true"><![CDATA[img/smiley1.png]]></image>
    </question>  
 <question id="2">
    <questionTxt type="text"><![CDATA[Hi]]></questionTxt>
<image visible="true"><![CDATA[img/smiley2.png]]></image>

</question> 
</FlashCards>

Answer 1

jQuery comes with its own parsing function jQuery.parseXML() -> parseXML

Then you can do searches ontop of the parsed xml more easier.

var xml = $.parseXML(xmlString),
    // find and count all questions
    questionCount = xml.find('question').length();
// find a random question out of the pool
xml.find('question#'+ Math.floor(Math.random() * (questionCount + 1))):

I didn’t test it, but I hope you get the point.