Any JS expert here? Need help

I’m using JS for creating quizzes (it’s not a WP site), so I use same JS function with different names… for creating multiple questions…

<button class='button-show-ans' onclick="myFunction()">Show Answer</button>

<p class='answer' id="ans"></p>

<script>
function myFunction() {
  document.getElementById("ans").innerHTML = "b) The Answer";
}
</script>

The problem is that I have to paste this code below each mcq (multiple choice question) with diff function name and also have to change id of the answers. Is there any better way to create quizzes with Show Answer button for each MCQ?

Use can use querySelectorAll to select all the show answer buttons and then add click event listener to the elements instead of manually targeting each element

1 Like

I seen, earlier you were using a plugin for it. It was working fine.
Then why are shifting to this tough process? :thinking:

1 Like

Actually this is new site which is on Ghost, moved from WP… I just wanna write without worrying much about the plugins. I know there are trade offs… but gotta try new platforms…

Creating such quiz is the only problem that I’m facing rest is good :smiley:
I’ll dm you the link :pray:

Oh nooooo… you’re doing it totally wrong.
Apart from code copyinh, the more painful thing is that what happens if you need to change the answer. Nonetheless, this can be improved.

A little better way, you just need different ids for show answer button

<button id="ans1", onClick="printAnswer(this, 'b) my answer')">Show Answer</button>

<script>
   function printAnswer(el, value) {
     let question = document.getElementById(el.id);
     let answer = document.createElement('p');
     answer.innerHTML = value;

     if(question.nextSibling) {
       question.parentNode.insertBefore(answer, question.nextSibling);
     } else {
       question.parentNode.appendChild(answer);
     }
   }
</script>

See this bin.

2 Likes

Thank you so much. This is exactly what I was looking for :smiley::pray:

1 Like