Create Quiz website and start earnings from Google Adsense
In this article, I will tell you how to create a quiz website and how to start earning a substantial amount from Google AdSense. There are two methods available for creating a quiz website in WordPress. In the first method, you create quiz questions and answers using plugins, while in the second method, you write the questions and answers directly on webpages, not using a plugin. So, let’s start building the MCQ quiz webpage from scratch using the first method. This method is relatively much better than the first one because in this method you will easily approved your site from Google adsense.
For creating Quiz webpage in wordpress you need two things which are
- Plugin for collapse
- Code for showing correct answer
- CSS script for styling the button which shows answer
Plugin:
First of all, you need a plugin that functions properly to display your correct answer when user clicks on the show answer button.
Go to the WordPress dashboard, click on the Plugins then click on add a new plugin, and search for a ‘Collapse-O-Matic.’ plugin. Install and activate the plugin. You can also download this plugin from WordPress.org. Visit the website, search for ‘Collapse-O-Matic’ in the plugin section, and download it to your computer. Then, go to the WordPress dashboard, add a new plugin, click on ‘Upload,’ and activate the plugin after installing it. After installation you dont need to change any settings in the plugin leave all settings as default.
Code for showing correct answer
Paste this code at the end of each MCQ question to hide the correct answer. The correct answer will be shown when the user clicks on the ‘Reveal Correct Answer’ button.
view AnswerCSS script for styling the button which shows answer
Copy this CSS code and paste it into the CSS section. Click on the ‘Appearance’ section, then click on ‘Customize.’ Now, scroll down, and at the end, click on ‘Additional CSS’ and paste the following code and save it and publish it.
.collapseomatic, .colomat_trigger, .collapseall, .expandall, .setall
{
-moz-box-shadow: inset 0px 1px 0px 0px #fff6af;
-webkit-box-shadow: inset 0px 1px 0px 0px #fff6af;
box-shadow: inset 0px 1px 0px 0px #fff6af;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
background: -moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background: -webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background: -o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background: -ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
background-color: #ffec64;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #ffaa22;
display: inline-block;
cursor: pointer;
color: #333333;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #ffee66;
text-transform: none;
letter-spacing: normal;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
After publish the post you will successfully created the Quiz webpage in wordpress like this
