Javascript & jquery

JavaScript
1

Hello, could anyone modify my html/css/javascript/jquery? Everything is working, but I dont want all three question to appear at once, but one by one. For example, you can see only one question, click next, you can see the second question and so on. I know it is possible with javascript or jquery, maybe modify my css file, but I dont know how to do it. Any help is appreciated, Alexandra


<html>

<head>
    <title>JavaScriptKit.com Multiple Choice Quiz Script</title>
    <link rel="stylesheet" href="my.css" type="text/css">
    <script src="quizconfig.js">
    </script>

    <script>
        var actualchoices = [];
        document.cookie="ready=yes"
    </script>

</head>

<body>

<form method="POST" name="myquiz">



    <div class="gheader">
        1)Variables declared outside a function, become </div>
    <div class="gselections">
        <label><input type="radio" value="a" name="question1">a) International variables</label><br>
        <label><input type="radio" value="b" name="question1"> b) Universal variables </label><br>
        <label><input type="radio" value="c" name="question1"> c) Global variables </label><br>
        <label> <input type="radio" value="d" name="question1"> d) Local variables </label><br>
    </div>    <br>
    <div class="gheader">
        2)If you add a number and a string, the result will be? </div>
    <div class="gselections">

        <label><input type="radio" value="a" name="question2"> a) Number</label><br>
        <label> <input type="radio" value="b" name="question2"> b) Error</label><br>
        <label><input type="radio" value="c" name="question2"> c) String + number </label><br>
        <label> <input type="radio" value="d" name="question2"> d) String</label><br>
    </div>

    <br>

    <div class="gheader">
        3) In JavaScript, different kinds of Loop are</div>
    <div class="gselections">
        <label> <input type="radio" value="a" name="question3">a) for</label><br>
        <label> <input type="radio" value="b" name="question3"> b) for/in </label><br>
        <label> <input type="radio" value="c" name="question3"> c) while</label><br>
        <label> <input type="radio" value="d" name="question3"> d) for/out </label><br>
    </div>
    <input type="button" value="Grade Me!" name="B1" onClick="gradeit()"> <input type="button" value="Reset" name="B2" onClick="document.myquiz.reset()"></div>

</form>


</body>
</html>
2

[FONT=Georgia]I don’t know if this is sloppy code, but it could be done pretty easily with Javascript if you gave each of those divs an id.

Then you could style them as display:none; and use document.getElementById(‘whatever’).style.display = ‘block’; to turn them on as needed.

Something like:[/FONT]

<div id="Question01">
   <label>Question 01</label>
   <input type="button" value="Click to Show Question 02" onclick="document.getElementById('Question02').style.display = 'block';">
</div>

<div id="Question02" style="display:none;">
   <label>Question 02</label>
</div>