Subscribe Us

Merit-Based Scholarship And Fee Discount

keep visiting for FREE Offers

Advertisement

computer knowledge benifits

blogger info

beerendra lucky sir April 22, 2025

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>



REMOVE FOOTER CREDIT


CAMERA BLOGGER TEMPLATE


For Setting Opacity to 0:

<div class='ty-copy-container row' style='font-size:1px; opacity:0;'>



Code for adding your Footer Copyright:


Copyright © 2025 All Right Reserved
<a href='https://yourblogurl.blogspot.com/' rel='dofollow' style='color:#000000;' >
SITENAME</a>


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>



follow us for more information comment your feed back also.






beerendra lucky sir

Posted by beerendra lucky sir

Post a Comment

9 Comments