radio button loosing it's look

radio button loosing it's look

Hi guys

I am trying to create a simple quiz app which is turning out to be not so simple.. I am setting the contents of the radio buttons for the multiple choice questions dynamically by changing the labels text, which seems to be working fine till I hit the next question button (actually can just call the method by any means to have it crash and die). The questions that appear afterwards appear as if in a regular list..

Heres the code, I'm new to jquery so I'm sure it's something stupid :/

<!DOCTYPE html>
<html>
<head>
    <title>Quiz</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="qq">
    <script>
        $( document ).delegate("#qq", "pagecreate", function() { //Set first question after page has been created       
            qnum = 0;
            questions = new Array();
            questions[0] = ["Option1A","Option2A","Option3A","Option4A"];
            questions[1] = ["Option1B","Option2B","Option3B","Option4B"];
            questions[2] = ["Option1C","Option2C","Option3C","Option4C"];
            questions[3] = ["Option1D","Option2D","Option3D","Option4D"];
            // ...
            questions[16] = ["Option1A","Option2A","Option3A","Option4A"];
            questions[17] = ["Option1A","Option2A","Option3A","Option4A"];
            setQuestion();   
        });
       
        function setQuestion()
        {
            try {
                document.getElementById('qu').innerHTML = (qnum + 1); //Set question number
               
                //Set question choices
                $(label1).text(questions[qnum][0]);
                $(label2).text(questions[qnum][1]);
                $(label3).text(questions[qnum][2]);
                $(label4).text(questions[qnum][3]);
                //Clear radio controls
               
                qnum += 1;               
            }
            catch (err)
            {
                txt="There was an error on this page.\n\n";
                txt+="Error description: " + err.message + "\n\n";
                txt+="Click OK to continue.\n\n";
                alert(txt);
            }
        }

    </script>
   
    <div data-role="header">
        <h1>Question <span id="qu"></span></h1>
    </div><!-- /header -->

    <div data-role="content">
        <form>
            <label for="rbQ1" id="label1"></label>
            <input type="radio" name="rgQ" id="rbQ1" value="1" />
           
            <label for="rbQ2" id="label2"></label>
            <input type="radio" name="rgQ" id="rbQ2" value="2" />
           
            <label for="rbQ3" id="label3"></label>
            <input type="radio" name="rgQ" id="rbQ3" value="3" />
       
            <label for="rbQ4" id="label4"></label>
            <input type="radio" name="rgQ" id="rbQ4" value="4" />
           
           
        </form>
        <a data-role="button" data-theme="b" onclick="setQuestion()">Next Question</a>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Copyright &copy; Quiz 2013 DD</h4>
    </div><!-- /footer -->
</div><!-- /page -->
</body>
</html>