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

Visual Studio Code all shortcuts keys for window users.

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

Visual Studio Code all shortcuts keys for window users.

Menu Footer Widget

Contact form