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:
<!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>
