MCQs Generator Tool
Generated Code
How to Use the MCQs Generator
This tool helps you quickly create structured HTML for Multiple Choice Questions (MCQs) that can be easily integrated into your web pages or blog posts.
Add Your Questions
1. First Question: When the tool loads, you will see the first question input fields automatically.
Question Text: Enter your question in the "Question Text" field.
Options: For each option (A, B, C, D), enter the text in the corresponding input field.
Select Correct Answer: Click the radio button next to the option that is the correct answer.
Explanation: Provide a brief explanation for the correct answer in the "Explanation" textarea.
2. Add More Questions: To add another question, click the "ADD ANOTHER QUESTION" button. New question fields will appear below the existing ones.
3. Delete Questions (Optional): For any question after the first one, you will see a "DELETE" button in the top-right corner of that question's section. Click this button to remove the question if you no longer need it. The numbering of the remaining questions will automatically adjust in the final output.
Step 3: Generate the Code
1. Once you have entered all your questions, options, correct answers, and explanations, click the "GENERATE CODE" button.
2. The generated HTML code for your MCQs will appear in the textarea under the "Generated Code" section.
Step 4: Copy and Use the Code
1. Copy Code: Click the "COPY CODE" button next to the "Generated Code" textarea. A "Copied successfully!" toast message will briefly appear to confirm the copy.
2. Paste into your Post:
<style>.quiz-container{margin:0 auto;padding:20px;border:1px solid #ccc;border-radius:5px;min-height:300px}.question{font-weight:700;margin-bottom:10px;min-height:24px}.option{margin:5px 0;padding:10px;border:1px solid #ccc;border-radius:5px;cursor:pointer;display:block}.option:not(.selected):hover{background-color:#f0f0f0}.selected{background-color:#007acc;color:#fff}.correct{background-color:green;color:#fff}.wrong{background-color:red;color:#fff}.explanation{margin-top:10px;display:none;padding:10px;background:#fdf6e3;border-radius:4px}.progress-container{margin-top:10px;width:100%;height:20px;background-color:#eee;border-radius:5px;overflow:hidden;position:relative}.progress-bar{width:0;height:100%;background-color:green;transition:width .3s ease-in-out}.percentage{position:absolute;top:0;right:0;padding:0 5px;background-color:#007acc;color:#fff;font-size:12px;line-height:20px}.report-card{margin-top:20px;padding:20px;border:1px solid #ccc;border-radius:5px;background-color:#f8fafd;text-align:center;min-height:120px}.report-card span{font-size:16px;padding:2px;margin:1px!important;margin-bottom:8px!important;display:inline-block}.message{font-size:14px;font-weight:700;color:#007acc;margin-top:10px;min-height:20px}#resetButton{background-color:#f44336;color:#fff;padding:10px 20px;border:none;border-radius:5px;cursor:pointer;font-size:16px;margin-top:10px}#resetButton:hover{background-color:#d32f2f}</style>
<div class="quiz-container">
<div class="progress-container">
<div class="percentage">0%</div>
<div class="progress-bar" id="progressBar"></div></div>
<hr />
<!--Paste-below-to-generated-MCQs-Code-->
<!--Reset Button-->
<button id="resetButton">RESET</button>
<div class="report-card">
<h5>REPORT CARD</h5>
<span> ATTEMPTED QUESTIONS: <span id="attemptedCount">0</span></span><hr />
<span>CORRECT ANSWERS: <span id="correctCount">0</span></span><hr />
<span>WRONG ANSWERS: <span id="wrongCount">0</span></span><hr />
<span id="message">PRACTICE REGULARLY!</span>
</div>
</div>
<script>//<![CDATA[
const options=document.querySelectorAll('.option'),progressBar=document.getElementById('progressBar'),percentage=document.querySelector('.percentage'),attemptedCount=document.getElementById('attemptedCount'),correctCount=document.getElementById('correctCount'),wrongCount=document.getElementById('wrongCount'),message=document.getElementById('message'),resetButton=document.getElementById('resetButton'),totalQCount=new Set(Array.from(options).map(t=>t.getAttribute('data-question'))).size;let totalQuestions=0,correctAnswers=0;options.forEach(t=>{t.addEventListener('click',()=>{const e=t.getAttribute('data-question'),s="true"===t.getAttribute('data-correct');if(!document.querySelector(`.option.selected[data-question="${e}"]`)){totalQuestions++;if(s)correctAnswers++}options.forEach(o=>{o.getAttribute('data-question')===e&&(o.classList.remove('selected','correct','wrong'),o===t&&(o.classList.add('selected'),s?o.classList.add('correct'):(o.classList.add('wrong'),options.forEach(t=>{t.getAttribute('data-question')===e&&"true"===t.getAttribute('data-correct')&&t.classList.add('correct')}))))});const o=document.querySelector(`.explanation[data-question="${e}"]`);o&&(o.style.display="block"),attemptedCount.textContent=totalQuestions,correctCount.textContent=correctAnswers,wrongCount.textContent=totalQuestions-correctAnswers;const n=totalQuestions/totalQCount*100;if(progressBar.style.width=n+"%",percentage.textContent=n.toFixed(2)+"%",totalQuestions===totalQCount)if(correctAnswers===totalQCount)message.textContent="CONGRATULATIONS! YOU GOT ALL THE ANSWERS CORRECT!";else if(correctAnswers>=totalQCount/2)message.textContent="GREAT JOB! YOU'RE DOING WELL!";else message.textContent="KEEP PRACTICING. YOU CAN IMPROVE!"})}),resetButton.addEventListener("click",()=>{options.forEach(t=>{t.classList.remove('selected','correct','wrong')}),document.querySelectorAll(".explanation").forEach(t=>{t.style.display="none"}),totalQuestions=0,correctAnswers=0,attemptedCount.textContent=0,correctCount.textContent=0,wrongCount.textContent=0,progressBar.style.width="0%",percentage.textContent="0%",message.textContent="--"});
//]]>
</script>
Original Code Reference: Locate the section in your post's HTML file where the MCQs should appear (e.g., within a <body> tag or a specific div).
Replace/Insert: Paste the code you copied from the MCQs Generator Tool into this location. You would paste the generated code where is.
<!--Paste-below-to-MCQs-Code-->3. Publish Your Post: Save your updated HTML file or paste the code into your CMS's HTML editor and publish your post. Your MCQs will now be displayed on your page.
Step 5: Reset (Optional)
To clear all entered data and start fresh, click the "RESET" button. The form will be cleared, and only the first blank question will reappear.