0

Bold Text Here

The included file is a code to make a quiz using javascript and radio buttons .
When you finally submit , it shoudl print the question numbers for the correct answer in green and the wrong answers in red .
But the code is not working properly.
NEED HELP!

Attachments
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<link href="buttonstyle.css" rel="stylesheet" type="text/css" media="screen" />
<div id="#1" class="s1" style=display:none> 
Q1.

<INPUT TYPE="radio" NAME="quiz" id="true" VALUE="Wrong answer" class="qqq" onClick="correct()">4<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong1" VALUE="Wrong answer" onClick="wrong()" >7<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong2" VALUE="Wrong answer" onClick="wrong()" >3<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong3" VALUE="Wrong answer" onClick="wrong()" >5<P>

</div>
<div id="#2" class="s1" style=display:none>
Q2.

<INPUT TYPE="radio" NAME="quiz" id="true" VALUE="Wrong answer" class="qqq" onClick="correct()">4<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong1" VALUE="Wrong answer" onClick="wrong()" >7<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong2" VALUE="Wrong answer" onClick="wrong()" >3<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong3" VALUE="Wrong answer" onClick="wrong()" >5<P>

</div>
<div id="#3" class="s1" style=display:none>
Q3.

<INPUT TYPE="radio" NAME="quiz" id="true" VALUE="Wrong answer" class="qqq" onClick="correct()">4<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong1" VALUE="Wrong answer" onClick="wrong()" >7<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong2" VALUE="Wrong answer" onClick="wrong()" >3<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong3" VALUE="Wrong answer" onClick="wrong()" >5<P>
</div>
<div id="#4" class="s1" style=display:none>
Q4.
<INPUT TYPE="radio" NAME="quiz" id="true" VALUE="Wrong answer" class="qqq" onClick="correct()">4<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong1" VALUE="Wrong answer" onClick="wrong()" >7<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong2" VALUE="Wrong answer" onClick="wrong()" >3<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong3" VALUE="Wrong answer" onClick="wrong()" >5<P>

</div>
<div id="#5" class="s1" style=display:none>
Q5.

<INPUT TYPE="radio" NAME="quiz" id="true" VALUE="Wrong answer" class="qqq" onClick="correct()">4<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong1" VALUE="Wrong answer" onClick="wrong()" >7<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong2" VALUE="Wrong answer" onClick="wrong()" >3<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong3" VALUE="Wrong answer" onClick="wrong()" >5<P>

</div>
<div id="#6" class="s1" style=display:none>
Q6.

<INPUT TYPE="radio" NAME="quiz" id="true" VALUE="5" class="qqq" onClick="True()">4<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong1" VALUE="5" onClick="False()" >7<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong2" VALUE="5" onClick="False()" >3<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong3" VALUE="5" onClick="False()" >5<P>

</div>
<div id="#7" class="s1" style=display:none>
Q7.

<INPUT TYPE="radio" NAME="quiz" id="true" VALUE="5" class="qqq" onClick="True()">4<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong1" VALUE="5" onClick="False()" >7<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong2" VALUE="5" onClick="False()" >3<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong3" VALUE="5" onClick="False()" >5<P>

</div>
<div id="#8" class="s1" style=display:none>
Q8.

<INPUT TYPE="radio" NAME="quiz" id="true" VALUE="5" class="qqq" onClick="True()">4<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong1" VALUE="5" onClick="False()" >7<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong2" VALUE="5" onClick="False()" >3<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong3" VALUE="5" onClick="False()" >5<P>

</div>
<div id="#9" class="s1" style=display:none>
Q9.
<INPUT TYPE="radio" NAME="quiz" id="true" VALUE="5" class="qqq" onClick="True()">4<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong1" VALUE="5" onClick="False()" >7<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong2" VALUE="5" onClick="False()" >3<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong3" VALUE="5" onClick="False()" >5<P>

</div>
<div id="#10" class="s1" style=display:none>
Q10.

<INPUT TYPE="radio" NAME="quiz" id="true" VALUE="5" class="qqq" onClick="True()">4<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong1" VALUE="5" onClick="False()" >7<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong2" VALUE="5" onClick="False()" >3<P>
<INPUT TYPE="radio" NAME="quiz" id="wrong3" VALUE="5" onClick="False()" >5<P>

</div>
<div id="31" class="s1" style=display:none>
Q1.
</div>
<div id="32" class="s1" style=display:none>
Q2.
</div>
<div id="33" class="s1" style=display:none>
Q3.
</div>
<div id="34" class="s1" style=display:none>
Q4.
</div>
<div id="35" class="s1" style=display:none>
Q5.
</div>
<div id="36" class="s1" style=display:none>
Q6.
</div>
<div id="37" class="s1" style=display:none>
Q7.
</div>
<div id="38" class="s1" style=display:none>
Q8.
</div>
<div id="39" class="s1" style=display:none>
Q9.
</div>
<div id="40" class="s1" style=display:none>
Q10.
</div>
<input type="button" value="Start" onClick="Init()" />
<input type="button" id="#btnSubmit"  value="submit" onClick="DisplayDiv()" />
<input type="button" value="Next" class="btn" onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'"/>
<script type="text/javascript">
function Init()
{

var arrDivs = new Array('1','2','3','4','5','6','7','8','9','10');
for(var j=0;j<10;j++)
{
var chosenDiv=document.getElementById(arrDivs[j]);
chosenDiv.style.display='block';
}
}

function DisplayDiv()
{
$("#btnSubmit").click(function() { 
var arrcolor = new Array();

for(var j=0;j<10;j++)
{
if($("'#'+arrDivs[j] input:radio:checked").val()==document.getElementById("true"))
arrcolor[j]=1;
else
arrcolor[j]=0;

}
var arrnewDiv = new Array('31','32','33','34','35','36','37','38','39','40');
for(var k=31;k<41;k++)
{

if(arrcolor[k-31]==0)
{
document.getElementById(arrnewDiv[k-31]).style.color="red";
document.getElementById(arrnewDiv[k-31]).style.display='block';
}
else
{
document.getElementById(arrnewDiv[k-31]).style.color="green";
document.getElementById(arrnewDiv[k-31]).style.display='block;
}
}
}
});
</script>
</head>
</html>
2
Contributors
2
Replies
4
Views
5 Years
Discussion Span
Last Post by rapidwein
0

Hi rapidwein,

your code has a lot of errors, in the javascript and also in the html.

On the html:

  • There's a lot of

<

p> tags that has no closing tag. You shold remove all of those, because they are not used and might will cause problem because the syntax is invalid.
* Some divs have # on the ID, remove them.
* All radio buttons have the same name, this means that you can only select of radio button. The names should be equal per question, so you can select one radio for each question.

The javascript i already fixed the syntax, use this:

function Init()
{
    var arrDivs = new Array('1','2','3','4','5','6','7','8','9','10');
    for(var j=0;j<10;j++)
    {
        var chosenDiv=document.getElementById(arrDivs[j]);
        chosenDiv.style.display='block';
    }
}

function DisplayDiv()
{
    $("#btnSubmit").click(function() { 
        var arrcolor = new Array();

        for(var j=0;j<10;j++)
        {
            if($("'#'+arrDivs[j] input:radio:checked").val()==document.getElementById("true"))
                arrcolor[j]=1;
            else
                arrcolor[j]=0;
        }

        var arrnewDiv = new Array('31','32','33','34','35','36','37','38','39','40');
        for(var k=31;k<41;k++)
        {
            if(arrcolor[k-31]==0)
            {
                document.getElementById(arrnewDiv[k-31]).style.color="red";
                document.getElementById(arrnewDiv[k-31]).style.display='block';
            }
            else
            {
                document.getElementById(arrnewDiv[k-31]).style.color="green";
                document.getElementById(arrnewDiv[k-31]).style.display='block';
            }
        }
    });
}

Hope this helps.

0

If i am gonna give different names to each group , then the code gets too big . i have to manually access each group to get selected value . This is too cumbersome . Is there an easier method?

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.