Blogger पर क्विज post कैसे बनायें

Hello Friends Welcome to alltechinfo आज मैं आपको बताने वाला हूँ कि आप ब्लॉगर मे क्विज पोस्ट कैसे बना सकते है| यहाँ मैं आपको बहुत ही Simple तरीका बताने वाला हूँ| जिससे आप अपनी Quiz Post बना सकते है| और अपनी किसी भी वेबसाइट में ऐड कर सकते है |

चलिये तो मैं आपको स्टेप By स्टेप बताने वाला हूँ |

1. आपको अपने मोबाइल या कंप्यूटर में HTML एडिटर (या कोई सा भी प्रोग्रामिंग एडिटर ओपन करें |)

2. नीचे दिए गए index.html फाइल को कॉपी करें और एडिटर पर पेस्ट कर दें |

3. आप YouTube विडियो को देखकर आसानी से समझकर आप Quiz Post बना सकते है |

python

HTML (index.html)


  Source Code: 
<!DOCTYPE html>
<html>
<head>
	<title>Simple Javascript Quiz</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link href="https://fonts.googleapis.com/css?family=Lato|Montserrat" rel="stylesheet">
	<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
	<div id="container">
		<header>
			<h1>Hindi Quiz</h1>
			<p> <strong> </strong></p>
		</header>
		<section>
			<form name="quizForm" onsubmit="return submitAnswers()">
				<h3>1. </h3>
				<input type="radio" name="q1" value="a" id="q1a">a. <br>
				<input type="radio" name="q1" value="b" id="q1b">b. <br>
				<input type="radio" name="q1" value="c" id="q1c">c. <br>
				<input type="radio" name="q1" value="d" id="q1d">d. <br>

				<h3>2. </h3>
				<input type="radio" name="q2" value="a" id="q2a">a. <br>
				<input type="radio" name="q2" value="b" id="q2b">b. <br>
				<input type="radio" name="q2" value="c" id="q2c">c. <br>
				<input type="radio" name="q2" value="d" id="q2d">d. <br>

				<h3>3. </h3>
				<input type="radio" name="q3" value="a" id="q3a">a. <br>
				<input type="radio" name="q3" value="b" id="q3b">b. <br>

				<h3>4. </h3>
				<input type="radio" name="q4" value="a" id="q4a">a. <br>
				<input type="radio" name="q4" value="b" id="q4b">b. <br>
				<input type="radio" name="q4" value="c" id="q4c">c. <br>
				<input type="radio" name="q4" value="d" id="q4d">d. <br>

				<h3>5. </h3>
				<input type="radio" name="q5" value="a" id="q1a">a. <br>
				<input type="radio" name="q5" value="b" id="q5b">b. <br>
				<input type="radio" name="q5" value="c" id="q5c">c. <br>
				<input type="radio" name="q5" value="d" id="q5d">d. <br>
				<br><br>
				<input type="submit" value="Submit Answers">

			</form>
			<div id="results"></div>

		</section>
		<footer>
			<p>Copyright © EDuquizs.in 2020, All Rights Reserved</p>
		</footer>

	</div>

</body>
</html>

CSS Code


  Source Code: 
body{
	background: #D8C3A5;
	color: #E98074;
	font-family: 'Lato', sans-serif;
	font-size: 18px;
}

#container{
	width: 60%;
	background: #EAE7DC;
	margin: 20px auto;
	overflow: auto;
	padding: 25px;
}

header{
	text-align: center;
	border-bottom: #fff solid 3px;
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
}

header h1{
	padding: 0;
	margin: 0;
}

header p{
	padding: 0;
	margin-top: 5px;
	color: #8E8D8A;
}

section{
	min-height: 400px;
}

footer{
	text-align: center;
}

input[type='submit']{
	background: #D8C3A5;
	border: 0;
	color: #E98074;
	font-size: 20px;
	font-weight: bold;
	padding: 10px 15px;
	cursor: pointer;
}

#results h3{
	background: #D8C3A5;
	padding: 10px;
	margin: 10px 0;

}

#results span{
	color: #000;
	font-weight: bold;
}

JavaScript Code


  Source Code: 

function submitAnswers(){
	var total = 5;
	var score = 0;

	//Get User Input
	var q1 = document.forms["quizForm"]["q1"].value;
	var q2 = document.forms["quizForm"]["q2"].value;
	var q3 = document.forms["quizForm"]["q3"].value;
    var q4 = document.forms["quizForm"]["q4"].value;
    var q5 = document.forms["quizForm"]["q5"].value;

    //Validation

    for (var i = 1; i <= 5; i++) {
    	if(eval('q'+i) == null || eval('q'+i) == ''){
	    	alert('You missed question '+i);
	    	return false;
    	}
    }

    //Set Answer
    var answers = ["b","d","b","d","a"];

    //Check Answer
    for(var i=0;i<5;i++){
	    if(eval('q'+(i+1)) == answers[i]){
	    	score++;
	    }
	}

	//Display Results
	var results = document.getElementById('results');
	results.innerHTML = '<h3>Result: You scored <span>'+score+'</span> out of <span>'+total+'</span></h3>';

	alert('You scored '+score+' out of '+total);

	return false;

 }

Blogger पर क्विज post कैसे बनायें | How to make Quiz post in blogger

HTML (index.html)

CSS Code

JavaScript Code

Posted by AllTechInfo

Post a Comment

0 Comments

Search This Blog

Most Popular

Topaz Mask AI 1.3.9 free download

The Ultimate Pandas Bootcamp Advanced Python Data Analysis|alltechinfo|

Menu Footer Widget

Contact form

Blogger पर क्विज post कैसे बनायें | How to make Quiz post in blogger

HTML (index.html)

CSS Code

JavaScript Code

Posted by AllTechInfo

You may like these posts

Post a Comment

0 Comments

Search This Blog

Social Plugin

Most Popular

Topaz Mask AI 1.3.9 free download

The Ultimate Pandas Bootcamp Advanced Python Data Analysis|alltechinfo|

Menu Footer Widget

Contact form