Austin Austin - 5 months ago 19
jQuery Question

AJAX and XML mutiple choice quiz - choices loading to same var

I'm having trouble getting the choices getting separated on different lines and I am not sure why and have not been able to figure out why

XML:

<q>
<qNum>1</qNum>
<qText>What is the side of a hammer called?</qText>
<choice>Hammer</choice>
<choice>Face</choice>
<choice>Side of the hammer</choice>
<choice>The check</choice>
</q>


AJAX:

$(document).ready(function(e) {

$.get('quiz.xml', function (d){

var html;

var title = $(d).find('title').text();
var desc = $(d).find('description').text();
html = '<div><h1>'+title+'</h1><br><h3>'+desc+'</h3><br></div>';
$('#1').append(html);

$(d).find('q').each(function(index, element) {

var $q = $(this);
var qNum = $q.find('qNum').text();
var qText = $q.find('qText').text();
var html2 = '<div><p>'+qText+'</p>';

$q.find('choice').each(function(index, element) {
var choice = $q.find('choice').text();
html2 += '<input type="radio" name="q'+qNum+'" class="choice" value="'+choice+'" /><label class="choice">'+choice+'</label><br>';
});

$('#1').append($(html2));

});

});


});

All the choices will be added to the var every time and i cant figure out how to break them up with keeping the same tag name

Answer

Please change it to

    var choice = element.textContent;