SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Javascript Newbie Help Please!!

    Hi. I am need of assistance regarding dynamic form validation with Javascript. I am trying to create a quiz using Javascript. I have three questions with three radio button answer choices each. I have made it so that each question appears individually with their corresponding radio button answer choices at random times, when clicked on a display button. I have created the radio buttons with HTML, but I am having a hard time trying to make them not appear on the main page, because they are being displayed in a different position (when I click on a button that displays them). The case consists of random numbers 1 to 3. Each case shows a different question and its answer choices. I now need to validate these radio buttons to see if the user has submitted the form without selecting the answer, and then check to see if the answer they have chosen is the correct. I also want to replace the show Quiz button with the question and its choices.

    I am new to programming, so can anyone please suggest what I should do?
    Here is a copy of my code. If you run it, the problems are pretty self-evident:


    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Abbasid Muslims</title>
     
     
    <script type="text/javascript">
    function textValidation()
    {
     
    	if ( !document.studentInfo.studentName.value )
    	{
    		alert("Please type in your NAME");
    		document.forms.studentInfo.studentName.focus();
    		return false;
    	}
    	if ( !document.studentInfo.studentEmail.value )
    	{
    		alert("Please type in your WEBB EMAIL ADDRESS");
    		document.forms.studentInfo.studentEmail.focus();
    		return false;
    	}
    }
    </script>
    <script type="text/javascript">
     
    </script>
    <script type="text/javascript">
    	function quizQuestion1()
    	{
    		var answer1 = document.getElementById("answerQuiz1").innerHTML;
    		document.write("<b><i><big>" + "The library has one main book on the Abbasid Muslims.  What chapter is focused on the Abbasid Court Culture?" + "</big></i></b>");
    		document.write(answer1);
    		document.write(submit);
    	}
    	function quizQuestion2()
    	{
    		var answer2 = document.getElementById("answerQuiz2").innerHTML;
    		document.write("<b><i><big>" + "Where did the Abbasid capital move after it left Baghdad?" + "</big></i></b>");
    		document.write(answer2);
    	}
    	function quizQuestion3()
    	{
    		var answer3 = document.getElementById("answerQuiz3").innerHTML;
    		document.write("<b><i><big>" + "An Abbasid mechanical horseman that could raise and lower a lance was on top of the ______ Dome in Baghdad." + "</big></i></b>");
    		document.write(answer3);
    	}
    function showQuiz()
    {
    	var random = Math.ceil(Math.random() * 3);
    	switch (random)
    	{
    		case 1:
    			document.getElementById("showAllQuestions").innerHTML=quizQuestion1();
    			break;
    		case 2:
    			document.getElementById("showAllQuestions").innerHTML=quizQuestion2();
    			break;
    		default:
    			document.getElementById("showAllQuestions").innerHTML=quizQuestion3();
    	}
    }
    </script>
     
     
    </head>
     
     
    <body>
    <!--Heading of Web page//-->
    <div id="AbbasidMuslims" style="width:1225px;height:600px;background-color:#FFCC33">
    <h1 style="text-align:center;font-size:24px;color:navy;">The Abbasid Muslims</h1>
     
     
     
    <!--Student information box: student name and webb email address//-->
    <div id="studentinfo">
    <fieldset>
    <legend>Student Information</legend>
    <form name="studentInfo">
    	Student Name<input type="text" name="studentName"/><br/>
    	Student Webb Email<input type="text" name="studentEmail"/><br/>
    </form>
    </fieldset>
    </div>
     
    <div id="showAllQuestions">
    <form name="all_questions" >
    	<input type="submit" value="Show Question" onfocus="textValidation()" onclick="showQuiz()"/>
    </form>
    </div>
     
    <br /><br /><br /><br /><br /><br /><br />
     
    <div id="answerQuiz1">
    <form name="quiz1">
    	<input type="radio" name="answer1" value="a" />a) Nine<br/>
    	<input type="radio" name="answer1" value="b" />b) Six<br/>
    	<input type="radio" name="answer1" value="c" />c) Eight<br/>
    </form>
    </div>
     
    <br/>
     
    <div id="answerQuiz2">
    <form name="quiz2">
    	<input type="radio" name="answer2" value="a" />a) Damascus<br/>
    	<input type="radio" name="answer2" value="b" />b) Samarra<br/>
    	<input type="radio" name="answer2" value="c" />c) Trick Question. The Abbasid never left Baghdad.<br/>
    </form>
    </div>
     
    <br/>
     
    <div id="answerQuiz3">
    <form name="quiz3">
    	<input type="radio" name="answer3" value="a" />a) Bronze<br/>
    	<input type="radio" name="answer3" value="b" />b) Green<br/>
    	<input type="radio" name="answer3" value="c" />c) Rock<br/>
    </form>
    </div>
     
     
    </div>
    </body>
     
    </html>
    Last edited by Mittineague; Jul 27, 2011 at 17:57. Reason: reformatting bbcode tags

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,157
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    Which problem would you like to tackle first?

  3. #3
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have actually been able to solve my problem, but thanks for replying. I am designing some new things so if I run into any problems, I will definitely post them onto the forum. But thanks for asking


Tags for this Thread

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
  •