SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Non-Member
    Join Date
    Nov 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript & jquery

    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
    Code:
    <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>
    Last edited by Paul O'B; Dec 10, 2013 at 06:38. Reason: code tags added

  2. #2
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    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:


    Code:
    <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>
    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •