How to add Show Answer button for MCQ website without using plugin?

how to add show answer button

In this article, I am going to tell you that how you can add the Show Answer button in WordPress without using any plugin.

When you start a new MCQ website, you don’t understand anything like how to get started with it. MCQ posting is much different than regular posting. There are many plugins available on the internet which can make this task so easy for you. But have you thought that what will happen if there is some error in this theme even by mistake, then all the MCQs that you had added automatically get deleted. So we have a solution to keep your hard work secure. If you still want to use the plugin, then I am not stopping you.

Alternatively, I have found a simple method by implementing which you can make a simple structured MCQ website. So let see how to make it happen.

How to add the Show Answer button?

Here we have to do some changes to our theme coding. And don’t worry, you will not lose anything by doing this on your website.

1. Copy the below code

<style>
    .acc {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 7px;
  width: 110px;
  border: 1px;
  text-align: center;
  outline: 1px;
  font-size: 15px;
  transition: 0.4s;
}
 
.active, .acc:hover {
  background-color: #ccc; 
}
 
.pnl {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
</style>

2. And go to your WordPress dashboard >> Appearance >> Theme Editor

how to add show answer button

3. Paste the copied code exactly between <head> and </head> tag (as shown in the image)

<script>
var acc = document.getElementsByClassName("acc");
var i;
 
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var pnl = this.nextElementSibling;
    if (pnl.style.display === "block") {
      pnl.style.display = "none";
    } else {
      pnl.style.display = "block";
    }
  });
}
</script>

4. Copy the above code
5. Again go to WordPress Dashboard >> Appearance >> Theme Editor

how to add show answer button

6. Paste the copied code exactly between <body> and </body> tag (as shown in image)
7. Now save this task using the Update File button in Theme Editor

Now you are all set to add MCQ with its hidden answer on your website.

1. Go to the Dashboard of your WordPress
2. Go to that post where you want to add MCQ
3. Enter your question there with multiple options (like I have added a question in the below image)

how to add show answer button

4. Go to the new Block by pressing Enter button
5. Click the button at the extreme right of the block
6. Select the Custom HTML option

<button class="acc">Show Answer</button>
<div class="pnl">
  <p></p>
</div>

7. Copy the above code and paste it into that Custom HTML section as shown in the above image

This button will look like , not exactly like this. I have given a bit of padding and radius to this button. If you want to change the text on the button, you just need to replace your text with Show Answer. And the answer which you want to show to the users should be placed exactly between <p> and </p> tag.

Also checkout –

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top