function quiz_personalizado_shortcode() {
ob_start();
?>

.quiz-container { width: 100%; margin: 20px auto; background: white; padding: 20px; border-radius: 10px; text-align: left; }
.question { font-size: 18px; margin-bottom: 10px; }
.options label { display: block; margin: 5px 0; cursor: pointer; }
button { background-color: #007bff; color: white; padding: 10px 20px; border-radius: 5px; }
.result { font-size: 20px; font-weight: bold; margin-top: 20px; }

document.addEventListener("DOMContentLoaded", function() {
const quizData = [
{question: "Qual a velocidade máxima permitida em vias urbanas arteriais?", options: ["30 km/h", "50 km/h", "60 km/h", "80 km/h"], answer: "60 km/h"},
{question: "O que significa uma placa de trânsito com um triângulo vermelho e um símbolo de pedestres?", options: ["Proibido pedestres", "Área escolar", "Passagem de pedestres", "Parada obrigatória"], answer: "Passagem de pedestres"}
];

function loadQuiz() {
const quizContainer = document.getElementById("quiz");
quizContainer.innerHTML = "";
quizData.forEach((q, index) => {
const questionElement = document.createElement("div");
questionElement.classList.add("question");
questionElement.innerHTML = `

${index + 1}. ${q.question}

`;

const optionsContainer = document.createElement("div");
optionsContainer.classList.add("options");

q.options.forEach(option => {
const label = document.createElement("label");
label.innerHTML = ` ${option}`;
optionsContainer.appendChild(label);
});

questionElement.appendChild(optionsContainer);
quizContainer.appendChild(questionElement);
});
}

function submitQuiz() {
let score = 0;
quizData.forEach((q, index) => {
const selectedOption = document.querySelector(`input[name="question${index}"]:checked`);
if (selectedOption && selectedOption.value === q.answer) {
score++;
}
});
document.getElementById("result").innerText = `Você acertou ${score} de ${quizData.length} perguntas!`;
}

loadQuiz();
});

<?php
return ob_get_clean();
}
add_shortcode('quiz_personalizado', 'quiz_personalizado_shortcode');