How to reuse the same javascript code in a single blog?

Question

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?

Only way I see it is to dynamically generate the whole page. — iamdlm
– iamdlm, Commented Sep 2, 2021 at 9:07
@iamdlm like put each question in a division and show it only when clicked? I don't know much about javascript. — Sophile
– Sophile, Commented Sep 2, 2021 at 9:11
Will this be used for real? Because anyone can inspect the page and know which answer is the correct one by searching for onclick="showcorrect()". Ideally the correct answer should be checked server side. — iamdlm
– iamdlm, Commented Sep 2, 2021 at 9:14

Kumar Swapnil · Accepted Answer · 2021-09-02 09:16:01Z

1

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")

answered Sep 2, 2021 at 9:16

Kumar Swapnil

1908 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sophile Over a year ago

That isn't working. What am I doing wrong? fiddle:jsfiddle.net/fcgkdtLv

Kumar Swapnil Over a year ago

Your syntax for radio button itself is wrong, check this: jsfiddle.net/f4eav931/1

Collectives™ on Stack Overflow

How to reuse the same javascript code in a single blog?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related