How to create a online quiz website on Blogger

Hi, I am sayem tutorial. In this article, I will show you how you can create an online quiz website on blogger. Fast Download The Template.

Read Online Bro Blogger Template

Re-download

Template By Sayem Tutorial
File Size 20KB

The Template Password Is h809192st

How to write an article

Fast you need an HTML code

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="question">
<b>A. Question Here? </b></div>
<ul class="answers">

<input id="question1a" name="question1" type="radio" value="a" /> <label for="question1a">  Option 1 </label> <br />
<input id="question1b" name="question1" type="radio" value="b" /> <label for="question1b">  Option 2 </label> <br />
<input id="question1c" name="question1" type="radio" value="c" /> <label for="question1c">  Option 3 </label> <br />
<input id="question1d" name="question1" type="radio" value="d" /> <label for="question1d">  Option 4 </label> <br />

</ul>
<style>
#question1more {display: none;}
</style>

<span id="question1dots">...</span>
<span id="question1more">
Answer is B) <br />
    Option 2</span><br />
<button id="question1mybtn" onclick="question1function()"><b>Answer </b></button>

<script>
function question1function() {
var question1dots = document.getElementById("question1dots");
var question1moreText = document.getElementById("question1more");
var question1btnText = document.getElementById("question1mybtn");

if (question1dots.style.display === "none") {
question1dots.style.display = "inline";
question1btnText.innerHTML = "<b>Answer</b>";
question1moreText.style.display = "none";
}
else {
question1dots.style.display = "none";
question1btnText.innerHTML = "<b><b>Hide</b></b>";
question1moreText.style.display = "inline";
}
}
</script>


<br /><br>
<div class="question">
<b>B. Question Here?</b> </div>
<ul class="answers">

<input id="question2a" name="question2" type="radio" value="a" /> <label for="question2a">  Option 1 </label> <br />
<input id="question2b" name="question2" type="radio" value="b" /> <label for="question2b">  Option 2 </label> <br />
<input id="question2c" name="question2" type="radio" value="c" /> <label for="question2c">  Option 3 </label> <br />
<input id="question2d" name="question2" type="radio" value="d" /> <label for="question2d">  Option 4 </label> <br />

</ul>
<style>
#question2more {display: none;}
</style>

<span id="question2dots">...</span>
<span id="question2more">
Answer is C) <br />
Option 3</span><br />
<button id="question2mybtn" onclick="question2function()"><b>Answer</b> </button>

<script>
function question2function() {
var question2dots = document.getElementById("question2dots");
var question2moreText = document.getElementById("question2more");
var question2btnText = document.getElementById("question2mybtn");

if (question2dots.style.display === "none") {
question2dots.style.display = "inline";
question2btnText.innerHTML = "<b>Answer</b>";
question2moreText.style.display = "none";
}
else {
question2dots.style.display = "none";
question2btnText.innerHTML = "<b>Hide</b>";
question2moreText.style.display = "inline";
}
}
</script>



<br /><br>
<div class="question">
<b>C. Question Here? </b></div>
<ul class="answers">

<input id="question3a" name="question3" type="radio" value="a" /> <label for="question3a">  Option 1 </label> <br />
<input id="question3b" name="question3" type="radio" value="b" /> <label for="question3b">  Option 2 </label> <br />
<input id="question3c" name="question3" type="radio" value="c" /> <label for="question3c">  Option 3 </label> <br />
<input id="question3d" name="question3" type="radio" value="d" /> <label for="question3d">  Option 4 </label> <br />

</ul>
<style>
#question3more {display: none;}
</style>

<span id="question3dots">...</span>
<span id="question3more">
Answer is D) <br />
Option 4</span><br />
<button id="question3mybtn" onclick="question3function()"> <b>Answer</b> </button>

<script>
function question3function() {
var question3dots = document.getElementById("question3dots");
var question3moreText = document.getElementById("question3more");
var question3btnText = document.getElementById("question3mybtn");

if (question3dots.style.display === "none") {
question3dots.style.display = "inline";
question3btnText.innerHTML = "<b>Answer</b>";
question3moreText.style.display = "none";
}
else {
question3dots.style.display = "none";
question3btnText.innerHTML = "<b>Hide</b>";
question3moreText.style.display = "inline";
}
}
</script>

</div>

How to change the question

Change the Question Here? text with your question

How to change the option

Add your 1 option on Option 1
Add your 2 option on Option 2
Add your 3 option on Option 3
Add your 4 option on Option 4

How to change answer

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="question">
<b>A. Question Here? </b></div>
<ul class="answers">

How to more question

<br /><br>
<div class="question">
<b>C. Question Here? </b></div>
<ul class="answers">

<input id="question3a" name="question3" type="radio" value="a" /> <label for="question3a">  Option 1 </label> <br />
<input id="question3b" name="question3" type="radio" value="b" /> <label for="question3b">  Option 2 </label> <br />
<input id="question3c" name="question3" type="radio" value="c" /> <label for="question3c">  Option 3 </label> <br />
<input id="question3d" name="question3" type="radio" value="d" /> <label for="question3d">  Option 4 </label> <br />

</ul>
<style>
#question3more {display: none;}
</style>

<span id="question3dots">...</span>
<span id="question3more">
Answer is D) <br />
Option 4</span><br />
<button id="question3mybtn" onclick="question3function()"> <b>Answer</b> </button>

<script>
function question3function() {
var question3dots = document.getElementById("question3dots");
var question3moreText = document.getElementById("question3more");
var question3btnText = document.getElementById("question3mybtn");

if (question3dots.style.display === "none") {
question3dots.style.display = "inline";
question3btnText.innerHTML = "<b>Answer</b>";
question3moreText.style.display = "none";
}
else {
question3dots.style.display = "none";
question3btnText.innerHTML = "<b>Hide</b>";
question3moreText.style.display = "inline";
}
}
</script>

Add this code before </div>
PREVIEW

How to create video tutorial