// Wait for the DOM to be fully loaded before running the script document.addEventListener('DOMContentLoaded', function() { // --- CSS STYLES --- // Create a style element and inject all CSS directly into the head. // This makes the component self-contained and avoids conflicts with theme/plugin styles. const styles = ` #dap-quiz-container { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; background-color: #ffffff; border-radius: 16px; padding: 24px; max-width: 600px; margin: 40px auto; text-align: center; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); overflow: hidden; } #dap-progress-bar-container { width: 100%; background-color: #e9ecef; border-radius: 20px; height: 12px; margin-bottom: 24px; overflow: hidden; } #dap-progress-bar { height: 100%; width: 20%; /* Initial progress to encourage engagement */ background-color: #6765E8; border-radius: 20px; transition: width 0.4s ease-in-out; } .dap-quiz-step { display: none; /* Hide all steps by default */ } .dap-quiz-step.active { display: block; /* Show only the active step */ animation: fadeIn 0.5s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .dap-quiz-step h3 { font-size: 22px; color: #333; margin: 0 0 20px 0; line-height: 1.4; } .dap-quiz-step p { font-size: 16px; color: #555; line-height: 1.6; margin: 0 0 24px 0; } .dap-answers { display: flex; flex-direction: column; gap: 12px; } .dap-answer-btn { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 12px; padding: 14px; font-size: 16px; font-weight: 500; color: #333; cursor: pointer; width: 100%; text-align: center; transition: background-color 0.2s, border-color 0.2s, transform 0.2s; } .dap-answer-btn:hover { background-color: #e9ecef; border-color: #ced4da; transform: translateY(-2px); } #dap-final-cta { background-color: #6765E8; color: #ffffff; border: none; border-radius: 12px; padding: 16px 24px; font-size: 18px; font-weight: 600; cursor: pointer; width: 100%; transition: background-color 0.2s, transform 0.2s; } #dap-final-cta:hover { background-color: #5553c8; transform: translateY(-2px); } `; // Create a