Add MCQs to Wordpress

Add MCQs in WordPress Posts or Pages

Posted on by Engr. Hamid Ali

Hi everyone welcome to our first blog post on how to add MCQs in WordPress posts or pages. When I started my first MCQs based website I searched a lot on this topic. I watched a lot of videos on YouTube and searched topics like How can we post MCQs on WordPress, How to make MCQs website on WordPress and How to auto show and hide answers in MCQs but i couldn’t found the solution.

Finally I found an easy way to Post MCQs on WordPress site. If you want to make your own MCQs website using WordPress and auto show and hide answers of MCQs just follow these simple steps.

1. Select Header

The first step to add MCQs to your WordPress post is to select a header. When the Heading as shown in Fig. 1 is selected the Copy your MCQs question and Past in the heading. It will be better if you select H4 heading as shown in Fig. 2.

Fig. 1
Fig. 2

2. Copy your MCQs with Options

After you Past your MCQs question in heading area, press enter and past your MCQs options. Your Post will then look like as shown in Fig. 3.

Fig. 3

3. Choose block named Custom HTML

This is the important step to make your answer auto show and hide. Now select the block named custom html as shown in Fig.4 below.

Fig. 4

4. Copy below code to custom HTML file

After you select the custom html block the block will appear as shown in Figure 5.

Fig. 5

Next Copy the html code as shown below to the block custom html.

    <p style="display: none; margin: inherit;" id="B61">  Answer: Option b) two full converters connected back to back</p>
    <p style="display: none;" id="C61">Full converter is operated in two quadrants. 
        Hence in order to obtain four quadrants the drive requires another two quadrants,
         this will obtained by reversal of current. Reversal of current can be done by connecting two full converters in back to back
    </p>
<script type="text/javascript">
    function showans(Clickedid) {
        var x = Clickedid
        var y = x + '1';
        var Z = document.getElementById(y)
        if (Z.style.display == "none") {
            Z.style.display = "block";
            Z.style.border = "2px solid green ";
            Z.style.width = "fit-content"
            Z.style.padding = "4px"
        }           else {
            Z.style.display = "none" }
    }
</script>

5. Change the Button IDs

This is the important step change the button id and the id in the paragraph such that if the button id is B2 the paragraph id is B21, similary if the button id is B3 then the para id is B31 and so on as shown in below figures

Fig. 6
Fig. 7

6. Add answer and explanation in the custom HTML

Now Add answer and explanation in the custom HTML as shown in below figures

Fig. 8
Fig. 9
Congratulations you have made your first MCQs. Now repeat the process for each MCQs. For step by step procedure watch video. Your MCQs will look like as
Fig. 10