SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Apr 2001
    Location
    Michigan
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript/Form problem

    I am trying to make a trivia game for a project that i'm doing, and i'm having some troubles. I have 5 questions stored in arrays, the 5 answers stored in a different array and those 5 answers wrote out in another array. I have 5 text boxes, one displaying the questions and the other 4 displaying the multiple choices. I also have 4 submit buttons, one for a, b, c and d. Now i just need to make sure that the answer the user picks is the right one. I was thinking, if there was a way to tell which submit box is clicked, that i would do something along that line, but if any one has a better way to do it then cool. Here's my code:

    <html>
    <head>
    <title>Sustainable Forestry Trivia!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="JavaScript">

    var Q=new Array(5)
    Q[0]="About what percent of Michigan is covered with forest?"
    Q[1]="Shade from trees can cool the surrouding area by how many degrees?"
    Q[2]="Well managed forests provide..."
    Q[3]="The most common tree in Michigan is ..."
    Q[4]="How many jobs does Michigan's forest support?"

    var A=new Array(5)
    A[0]="B"
    A[1]="B"
    A[2]="D"
    A[3]="A"
    A[4]="C"

    var FA=new Array(5)
    FA[0]="30%"
    FA[1]="5"
    FA[2]="Higher Water Quality"
    FA[3]="Sugar Maple"
    FA[4]="100,000"

    var FB=new Array(5)
    FB[0]="50%"
    FB[1]="10 degrees"
    FB[2]="Wildlife Habitat"
    FB[3]="White Pine"
    FB[4]="125,000"

    var FC=new Array(5)
    FC[0]="70%"
    FC[1]="15"
    FC[2]="Cleaner Air"
    FC[3]="Red Oak"
    FC[4]="150,000"

    var FD=new Array(5)
    FD[0]="90%"
    FD[1]="20"
    FD[2]="All of the above"
    FD[3]="Cedar"
    FD[4]="175,000"


    function Question1() {
    var Ques = window.document.Trivia.Question.value=Q[0]
    var A = window.document.Trivia.A_Text.value=FA[0];
    var B = window.document.Trivia.B_Text.value=FB[0];
    var C = window.document.Trivia.C_Text.value=FC[0];
    var D = window.document.Trivia.D_Text.value=FD[0];
    }
    function Check() {

    </script>
    </head>

    <body bgcolor="#FFFFFF" text="#000000" onload="Question1()">
    <h1 align="center">Sustainable Forestry Trivia</h1>
    <form name="Trivia">
    <table border="0" align="center">
    <tr align="center">
    <td align="center"> <input type="text" name="Question" size="65"></td>
    </tr>
    <td>
    <td height="50">
    </td>
    </tr>
    <tr>
    <td><input type="submit" name="A" value="A"> <input type="text" name="A_Text"></td>
    </tr>
    <tr>
    <td><input type="submit" name="B" value="B"> <input type="text" name="B_Text"></td>
    </tr>
    <tr>
    <td><input type="submit" name="C" value="C"> <input type="text" name="C_Text"></td>
    </tr>
    <tr>
    <td><input type="submit" name="D" value="D"> <input type="text" name="D_Text"></td>
    </tr>
    </table>
    </form>
    </body>
    </html>

  2. #2
    Xbox why have you forsaken me? moospot's Avatar
    Join Date
    Feb 2001
    Location
    Clearwater, FL
    Posts
    3,615
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Couldn't you use something like

    Code:
    if document.trivia.submit.value == a
       alert(msgCorrect);
    else if document.trivia.submit.value != a
       alert(msgIncorrect);
    end if
    My JS coding skills are kinda rough, I hope that it's correct syntax!

  3. #3
    SitePoint Member doggi's Avatar
    Join Date
    Oct 2001
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In this case I would go for radio buttons in front of your answers. Give your radio button (HTML: <input type=radio>) the same name and id. Then put an onclick event on the radio button. When the user clicks on one of the radio buttons you can do a check. You would store the index of the correct answer in an array, in this way you can check whether the user clicked the correct answer.

    Try this (might contain errors, it has been a long time):
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
    <HTML>
    <HEAD>
    <TITLE></TITLE>
    
    <script language="javascript">
    <!--
    
    var correct = new Array(1);
    correct[0] = 2; //the 3th answer is the correct one
    
    function checkIt()
    {
    	for (var i=0; i < document.forms[0].myradio.length; i++)
    	{
    		if (document.forms[0].myradio[i].checked)
    		{
    			if (correct[0] == i) alert('correct!');
    			else alert('incorrect!');
    		}
    	}
    }
    
    //-->
    </script>
    </HEAD>
    
    <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#FF00FF" BACKGROUND="?">
    
    <form id="myform">
    <input type="radio" id="myradio" name="myradio" onclick="checkIt();">Answer 1<br>
    <input type="radio" id="myradio" name="myradio" onclick="checkIt();">Answer 2<br>
    <input type="radio" id="myradio" name="myradio" onclick="checkIt();">Answer 3<br>
    <input type="radio" id="myradio" name="myradio" onclick="checkIt();">Answer 4<br>
    
    </form>
    
    </BODY>
    </HTML>


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
  •