CODEWITHSUNDEEP
javascriptjqueryxml
user1334858
user1334858

Reputation: 1945

Reading in XML with jQuery

I am trying to make a questionnaire where the next question depends on how they answered the previous question. I am trying to do this using an XML that will have all of my questions and the jQuery will create a form each time you go to a new question.

My issue is only showing one question at a time. Here is my XML file. The idea is to create folders and each folder will have a question object with x amount of answers and then x amount of folders depending on the question they answer. Here is an example XML file:

<folder>
   <question>
       <ask>Which do you want to go?</ask>
       <answer go='folder1'>Go to Left</answer>
       <answer go='folder2'>Go to Right</answer>
   </question>



   <folder1>
       <question>
           <ask>You went left.</ask>
           <answer go='finish1'>Go to Finish</answer>
           <answer go='finish2'>Go to Finish</answer>
       </question>


       <finish1>
           <role>
               <name>Hello World</name>
               <description>COOL THING</description>
           </role>
       </finish1>


       <finish2>
           <role>
               <name>FINISH2</name>
               <description>COOL THING 2</description>
           </role>
       </finish2>
   </folder1>



   <folder2>
       <question>
           <ask>You went right.</ask>
           <answer go='finish1'>Go to Finish</answer>
           <answer go='finish2'>Go to Finish</answer>
       </question>


       <finish1>
           <role>
               <name>Hello World</name>
               <description>COOL THING</description>
           </role>
       </finish1>


       <finish2>
           <role>
               <name>FINISH2</name>
               <description>COOL THING 2</description>
           </role>
       </finish2>
   </folder2>

</folder>

So the first question they see will be "Which do you want to go?" and depending on which one they answer a different question will show up.

Now for my jQuery code I am attempting this:

$.ajax({
url:"includes/xml/questions.xml",
dataType:"xml",
success:function(data){
    // Clear out the form
    $('#quizQuestions').children().remove();
    $('#quizTitle').children().remove();

    $(data).find('folder').each( function(){
        $(data).find('question').each( function(){

            var infoTitle = "<b>" + $(this).find("ask").text()+ "</b>";
            var infoForm = "<input type='submit'>";

            $(data).find('answer').each( function(){

                // Will add in a radio button

            });

            $('#quizTitle').append(infoTitle);
            $('#quizQuestions').append(infoForm);

        });


    });
}

The issue I am having is it finds all questions at all levels. So it will show:

Which do you want to go? You went left. You went right.

All at once instead of the first level question and then the next time though it will show the second question. Is there a way to read in an xml file so it knows what level the questions are on so it hides the first two?

Ideally the ajax should read in the first question and not see any of the other questions since they are in a sub-folder.

I do realize the jQuery code is not correct to completely implement what I am intending to do, but I need to first figure out this issue before I move on.

Upvotes: 0

Views: 46

Answers (1)

Lawrence Johnson
Lawrence Johnson

Reputation: 4043

There are a couple of things here, largely for XML you're going to have to realize that proper XML is organized by a structure of node types. These types and their consistency is defined by the name of the node, so having a different node name for what are essentially the same type, is wrong. Consider this XML:

<DocumentElement>
    <Folders>
        <Direction Key="folder0">
            <question>
                <ask>Which do you want to go?</ask>
                <answer go='folder1'>Go to Left</answer>
                <answer go='folder2'>Go to Right</answer>
            </question>
        </Direction>
        <Direction Key="folder1">
            <question>
                <ask>You went left.</ask>
                <answer go='finish1'>Go to Finish</answer>
                <answer go='finish2'>Go to Finish</answer>
            </question>
        </Direction>
    </Folders>
    <Finishers>
        <finish key="finish1">
            <role>
                <name>Hello World</name>
                <description>COOL THING</description>
            </role>
        </finish>
        <finish key="finish2">
            <role>
                <name>FINISH2</name>
                <description>COOL THING 2</description>
            </role>
        </finish>
    </Finishers>
</DocumentElement>

Now, I don't fully understand what you are trying to do, so this probably isn't an accurate solution in terms of your specific needs, but my goal is to give you an understanding of how Xml works in terms of organizing your data.

Your jQuery when using this structure can now be better organized by searching for Keys as attritbutes and node types by their name.

Upvotes: 1

Related Questions