blogger me subscribe button add karne ke liye
ye code copy paste karen
code ................
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <a href="https://www.blogger.com/follow.g?blogID=YOUR BLOG ID HERE"><button class="b"><i class="fa fa-group"></i> Follow Us </button></a> <style> .b { width: 300px; height: 45px; font-family: 'Roboto', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 2.5px; font-weight: 700; color: #000; background-color: greenyellow; border: none; border-radius: 45px; border: 1px solid grey; }.b:hover { background-color: #2EE59D; /*background-color-On-Hover*/ box-shadow: 0px 5px 5px rgba(46, 229, 157, 0.4); /*shadow-color*/ color: #fff; cursor: pointer;} </style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1144917728745404"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-1144917728745404"
data-ad-slot="9426764658"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Below is a simple but stylish HTML + CSS + JavaScript multiple-choice quiz (MCQ) system that includes:
-
Colored answers for correct/incorrect selections
Smooth visual feedback
Responsive design
Easy to customize/add questions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>MCQ Quiz</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: #f4f6f9;
margin: 0;
padding: 20px;
color: #333;
}
.quiz-container {
max-width: 600px;
margin: auto;
background: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.question {
font-size: 1.3rem;
margin-bottom: 20px;
}
.options {
list-style-type: none;
padding: 0;
}
.options li {
margin: 10px 0;
}
.option {
width: 100%;
padding: 12px 16px;
background: #f0f0f0;
border: 2px solid transparent;
border-radius: 8px;
cursor: pointer;
transition: 0.3s;
font-size: 1rem;
}
.option:hover {
background: #e0e0e0;
}
.option.correct {
background-color: #d4edda;
border-color: #28a745;
color: #155724;
}
.option.wrong {
background-color: #f8d7da;
border-color: #dc3545;
color: #721c24;
}
.btn {
margin-top: 20px;
background: #007bff;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
}
.btn:hover {
background: #0056b3;
}
.result {
text-align: center;
font-size: 1.4rem;
font-weight: bold;
}
</style>
</head>
<body>
<div class="quiz-container">
<div id="quiz">
<!-- Quiz content loads here -->
</div>
<button class="btn" id="next-btn" onclick="loadNextQuestion()">Next</button>
</div>
<script>
const quizData = [
{
question: "What is the capital of France?",
options: ["Berlin", "Madrid", "Paris", "Lisbon"],
correct: 2
},
{
question: "Which planet is known as the Red Planet?",
options: ["Earth", "Venus", "Mars", "Jupiter"],
correct: 2
},
{
question: "Who wrote 'Hamlet'?",
options: ["Charles Dickens", "William Shakespeare", "Mark Twain", "Leo Tolstoy"],
correct: 1
}
];
let currentQuestion = 0;
let score = 0;
let answered = false;
function loadQuestion(index) {
const q = quizData[index];
const quiz = document.getElementById("quiz");
document.getElementById("next-btn").disabled = true;
answered = false;
quiz.innerHTML = `
<div class="question">${q.question}</div>
<ul class="options">
${q.options.map((opt, i) => `
<li>
<button class="option" onclick="selectOption(this, ${i}, ${q.correct})">${opt}</button>
</li>`).join('')}
</ul>
`;
}
function selectOption(button, selected, correct) {
if (answered) return;
answered = true;
const options = document.querySelectorAll('.option');
options.forEach(btn => btn.disabled = true);
if (selected === correct) {
button.classList.add("correct");
score++;
} else {
button.classList.add("wrong");
options[correct].classList.add("correct");
}
document.getElementById("next-btn").disabled = false;
}
function loadNextQuestion() {
currentQuestion++;
if (currentQuestion < quizData.length) {
loadQuestion(currentQuestion);
} else {
showResult();
}
}
function showResult() {
const quiz = document.getElementById("quiz");
const total = quizData.length;
quiz.innerHTML = `
<div class="result">
🎉 Quiz Completed!<br>
You scored <strong>${score}</strong> out of <strong>${total}</strong>.
</div>
`;
document.getElementById("next-btn").style.display = "none";
}
// Load the first question
loadQuestion(currentQuestion);
</script>
</body>
</html>
.jpg)
0 Comments