Please how to use radio buttons not Select

Discussion in 'Javascript' started by Dave, Mar 6, 2004.

  1. Dave

    Dave Guest

    Hi,
    there used to be a simple javascript quiz builder in builder.com, with
    which I made the page whose code is given below.
    I would like to tweak this so that there are only three (not 4) answer
    options, and that they are presented alongside radio buttons (not in a
    selectable list). I would be grateful if someone knows how to do this
    for me. It would be nice if the student doing the quiz selects the
    right answer with the radio button, then clicks a button (that I could
    jazz up with a css style) that results in that answer being displayed
    either in a single-line text area, or on the surface of another
    button, perhaps like "Empty - Correct, well done!"

    I don't know what the options are for the outputting of the answer -
    can a text area (such as the code currently has) be styled with css
    just as a button can be? I assume that in basic html the javascript
    can't actively insert the answer with feedback into the html page into
    which the quiz code was inserted...??

    <html>
    <head>
    <title>Quiz</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <meta name="description" content="A quiz for students">
    <script language="JavaScript">
    <!--

    var numQues = 1;

    var answers = new Array(1);
    answers[0] = "empty";

    function getScore(form) {
    var score = 0;
    var currElt;
    var currSelection;

    for (i=0; i<numQues; i++) {
    currElt = form.elements;
    currSelection = currElt.selectedIndex;
    if (currElt.options[currSelection].value == answers) {
    score++;
    }
    }

    score = Math.round(score/numQues*100);
    form.percentage.value = score + "%";

    var correctAnswers = "";
    for (i=1; i<=numQues; i++) {
    correctAnswers += i + ". " + answers[i-1] + "\r\n";
    }
    form.solutions.value = correctAnswers;

    }

    // -->
    </script>

    </head>

    <body>


    <form name="quiz">

    <select name="q1">
    <option value="">Choose word...
    <option value="hungry">hungry
    <option value="empty">empty
    <option value="late">late
    <option value="sad">sad
    </select>
    <p>

    <input type="button" value="Get score" onClick="getScore(this.form)">
    <input type="reset" value="Clear">
    <p> <font face="Comic Sans MS">Score / <font
    color="#993300">Ergebnis</font>
    =</font>
    <input type=text size=15 name="percentage"><br>
    <font face="Comic Sans MS">Correct answer / <font
    color="#993300">Richtige
    Antwort</font>:</font><br>
    <textarea name="solutions" wrap="virtual" rows="4"
    cols="40"></textarea>
    </form>

    </body>
    </html>

    Thanks,
    Dave
     
    Dave, Mar 6, 2004
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. tshad

    Radio buttons select

    tshad, May 18, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    618
    tshad
    May 19, 2005
  2. Scott D Johnson
    Replies:
    1
    Views:
    1,131
    Scott D Johnson
    Sep 27, 2006
  3. Stuart Welsh

    Radio Buttons to select A Style Sheet

    Stuart Welsh, Jan 25, 2004, in forum: Javascript
    Replies:
    0
    Views:
    78
    Stuart Welsh
    Jan 25, 2004
  4. Dr. Leff
    Replies:
    3
    Views:
    330
    David Mark
    Oct 15, 2007
  5. Dr. Leff
    Replies:
    3
    Views:
    251
    David Mark
    Oct 15, 2007
Loading...

Share This Page