How to add a (MCQ) in Blogger? | MCQ ब्लॉगर वेबसाईट मध्ये कसं टाकायचे

How to add a (MCQ) in Blogger:- नमस्कार मित्रानो estartupidea मध्ये आपलं स्वागत आहे आज आपण बघणार आहोत How to add a multiple choice question (MCQ) in Blogger?

add-mcq-in-blogger

How to add a (MCQ) in Blogger?

मित्रानो MCQ ब्लॉगर वेबसाईट मध्ये टाकणे अगदी सोपे आहे, येथे आपण फक्त CSSआणि html व JavaScript च्या मदतीने आपण ब्लॉगर वेबसाईट मध्ये multiple choice question टाकणार आहोत,
आपण ब्लॉगर मध्ये multiple choice question एक quiz ची वेबसाईट बनवू शकता जेव्हा कोण्ही user उत्तर च्या बटण वर क्लिक करेल त्याला उत्तर दिसेल. तर चला सुरवात करूया.


MCQ add करायची पद्धती


१.आपल्या ब्लॉगर च्या डॅशबोर्ड मध्ये आल्या नंतर MCQ चे प्रश्न आणि उत्तर आपल्या टाकायचे
२.खाली दिलेला code हा आपल्याला आपल्या सिंगल पोस्ट च्या वरती दिसणाऱ्या HTML view ला क्लिक करून हा code तिथे टाकायचा. आपण अगोदर प्रश्न टाकून गया option सोबत आणि त्या नंतर आपण खाली दिलेला कोड टाकून उत्तर दाखवू शकता.

<button class="btn">Show Answer</button>
<div class="mcq">
  <p></p>
</div>

३. त्या नंतर आपल्याला जो paragraph नावाचा tag आहे त्यात आपल्या प्रश्न चे उत्तर हे टाकायचे.

४. आता आपल्या ज्या पोस्ट वर असाल त्या मध्ये आपल्याला html view करून CSS टाकावं लागेल.

<style>
.btn{
  background-color: #eee;
  color: #000000;
  cursor: pointer;
  padding: 18px;
  width: auto;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
.active, .btn:hover {
  background-color: #ccc; 
} 
.mcq {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
</style>

५. आता त्या नंतर त्या पोस्ट चा html view करून JavaScript टाकावी लागेल याने आपल्या प्रश्न च उत्तर हे त्या बटण मध्ये लपलेला असेल जेव्हा त्या बटण वर क्लिक केलं कि त्याला ते उत्तर दिसेल.

<script type='text/javascript'>
     
//<![CDATA[ 
     var acc = document.getElementsByClassName("btn");
     var i;
    for (i = 0; i < acc.length; i++) {
  btn[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var mcq = this.nextElementSibling;
    if (mcq.style.display === "block") {
      mcq.style.display = "none";
    } else {
      mcq.style.display = "block";
    }
  });
}
    //]]>
 
</script>

आपला ब्लॉगर च्या वेबसाईट मध्ये MCQ हा पूर्ण पने add झालेला असेल, जर आपल्या हे प्रत्येक पोस्ट मध्ये जावास्क्रिप्ट आणि CSS टाकावे लागेल.

जर हा code परत परत टाकायच नसेल तर आपण आपल्या डॅशबोर्ड मध्ये येऊन theme customize वर क्लिक करून त्या मध्ये आपल्या हा CSS आणि जावास्क्रिप्ट कोड टाकून द्यावा लागेल.

You may also like...

close