Reputation: 307
I have a simple javascript question and answer section on my blog. When the user selects an option, if the option is correct, it turns green , else the selected answer turns red and the answer is revealed by making it green. Finally the explanation division is shown
<h2>Questions</h2>
<div id="Q&A" style="background:white;">
<p>1. If we increase the frequency of oscillation, the velocity of the wave... </p>
<div id="W1box" style="background:white; font-size:20px;padding:10px;border: 2px solid black;" >
<input id="W1input" name="option" type=radio value="wrong" onclick="showwrong1()">
Increases </input>
</div>
<div id="W2box" style="background:white; font-size:20px;padding:10px;border: 2px solid black;" >
<input id="W2input" name="option" type=radio value="wrong" onclick="showwrong2()">
Decreases </input>
</div>
<div id="C1box" style="background:white; font-size:20px;padding:10px;border: 2px solid black;" >
<input id="C1input" name="option" type=radio value="optionA" onclick="showcorrect()">
Does not change </input>
</div>
<div id="correctexp" style="background:white; display:none; " >
Correct!<br>
$v=f\lambda$ does not mean that velocity is directly proportional to frequency.<br>
When we increase frequency($f$), waves are closer-hence the wavelength($\lambda$) decreases keeping the velocity unchanged ($v=f\lambda$).<br>
Velocity only depends upon the material property of the medium of propagation.<br>
For example sound waves in water moves faster than in air because water has higher density.
<br>But the speed of sound waves does not change if we speak in higher frequency.
</div>
<div id="wrongexp" style="background:white; display:none; " >
$v=f\lambda$ does not mean that velocity is directly proportional to frequency.<br>
When we increase frequency($f$), waves are closer-hence the wavelength($\lambda$) decreases keeping the velocity unchanged ($v=f\lambda$).<br>
Velocity only depends upon the material property of the medium of propagation.<br>
For example sound waves in water moves faster than in air because water has higher density.
<br>But the speed of sound waves does not change if we speak in higher frequency.
</div>
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
function showcorrect()
{
var correct = document.getElementById("C1input");
var x = document.getElementById("correctexp");
if(correct.checked==true)
document.getElementById("C1box").style.backgroundColor="PaleGreen";
if (x.style.display === "none") {
x.style.display = "block";}
}
function showwrong1()
{
var wrong = document.getElementById("W1input");
var x = document.getElementById("wrongexp");
if(wrong.checked==true)
document.getElementById("W1box").style.backgroundColor="#FAA0A0";
document.getElementById("C1box").style.backgroundColor="PaleGreen";
if (x.style.display === "none") {
x.style.display = "block";}
}
function showwrong2()
{
var wrong = document.getElementById("W2input");
if(wrong.checked==true)
document.getElementById("W2box").style.backgroundColor="#FAA0A0";
document.getElementById("C1box").style.backgroundColor="PaleGreen";
var x = document.getElementById("wrongexp");
if (x.style.display === "none") {
x.style.display = "block";}
}
</script>
But i want to add another question below this. But when i copy and paste this code, it gives errors like when I click the option in the second question, the box in the first question turns red and so on.
I know that I can change the id and name of the functions, But is there a more efficient way to do this because I might have to include many questions like this?
Upvotes: 0
Views: 63
Reputation: 190
Write reusable function something like:
function showwrong(v1, v2, v3)
{
var wrong = document.getElementById(v1);
var x = document.getElementById("wrongexp");
if(wrong.checked==true)
document.getElementById(v2).style.backgroundColor="#FAA0A0";
document.getElementById(v3).style.backgroundColor="PaleGreen";
if (x.style.display === "none") {
x.style.display = "block";}
}
and then you can simply call it with appropriate arguments, like:
showwrong("W1input", "W1box", "C1box")
Upvotes: 1