<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Educación Médica Continua - Parto Pretérmino</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
line-height: 1.6;
}
.header {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white;
padding: 20px 0;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.header-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #64b5f6;
}
.user-info {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
.course-banner {
background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
color: white;
padding: 40px;
border-radius: 15px;
margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
position: relative;
overflow: hidden;
}
.course-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
opacity: 0.1;
}
.course-banner-content {
position: relative;
z-index: 1;
}
.course-title {
font-size: 32px;
font-weight: bold;
margin-bottom: 15px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.course-meta {
display: flex;
gap: 30px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.meta-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
opacity: 0.9;
}
.meta-icon {
width: 16px;
height: 16px;
background: #64b5f6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 10px;
}
.sponsor {
background: rgba(255,255,255,0.1);
padding: 15px 20px;
border-radius: 10px;
margin-top: 20px;
border-left: 4px solid #64b5f6;
}
.main-content {
display: grid;
grid-template-columns: 1fr 300px;
gap: 30px;
}
.quiz-section {
background: white;
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
position: relative;
}
.quiz-header {
background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
color: white;
padding: 20px;
border-radius: 10px;
margin-bottom: 30px;
text-align: center;
}
.question-counter {
background: rgba(255,255,255,0.2);
display: inline-block;
padding: 5px 15px;
border-radius: 20px;
font-size: 14px;
margin-bottom: 10px;
}
.question {
font-size: 18px;
font-weight: 600;
color: #2d3748;
margin-bottom: 25px;
line-height: 1.5;
}
.options {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 30px;
}
.option {
background: #f7fafc;
border: 2px solid #e2e8f0;
border-radius: 10px;
padding: 15px 20px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.option:hover {
background: #edf2f7;
border-color: #cbd5e0;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.option.selected {
background: #e6fffa;
border-color: #38b2ac;
color: #2d3748;
}
.option.correct {
background: #f0fff4;
border-color: #48bb78;
color: #22543d;
}
.option.incorrect {
background: #fed7d7;
border-color: #fc8181;
color: #742a2a;
}
.option-letter {
display: inline-block;
width: 24px;
height: 24px;
background: #4299e1;
color: white;
border-radius: 50%;
text-align: center;
line-height: 24px;
font-size: 12px;
font-weight: bold;
margin-right: 12px;
}
.feedback {
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 10px;
padding: 20px;
margin-top: 20px;
display: none;
}
.feedback.show {
display: block;
animation: fadeInUp 0.5s ease;
}
.feedback-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
font-weight: bold;
}
.feedback.correct .feedback-header {
color: #22543d;
}
.feedback.incorrect .feedback-header {
color: #742a2a;
}
.feedback-icon {
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
}
.feedback.correct .feedback-icon {
background: #48bb78;
}
.feedback.incorrect .feedback-icon {
background: #f56565;
}
.buttons {
display: flex;
gap: 15px;
justify-content: center;
}
.btn {
background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
color: white;
border: none;
padding: 12px 30px;
border-radius: 25px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(66, 153, 225, 0.3);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(66, 153, 225, 0.4);
}
.btn:disabled {
background: #a0aec0;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn-secondary {
background: linear-gradient(135deg, #718096 0%, #4a5568 100%);
box-shadow: 0 4px 15px rgba(113, 128, 150, 0.3);
}
.sidebar {
display: flex;
flex-direction: column;
gap: 20px;
}
.sidebar-card {
background: white;
border-radius: 15px;
padding: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.sidebar-title {
font-size: 18px;
font-weight: bold;
color: #2d3748;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.progress-bar {
background: #e2e8f0;
border-radius: 10px;
height: 8px;
overflow: hidden;
margin-bottom: 10px;
}
.progress-fill {
background: linear-gradient(90deg, #48bb78, #38a169);
height: 100%;
border-radius: 10px;
transition: width 0.5s ease;
}
.score-display {
text-align: center;
font-size: 24px;
font-weight: bold;
color: #2d3748;
}
.resources-list {
list-style: none;
}
.resources-list li {
padding: 10px 0;
border-bottom: 1px solid #e2e8f0;
color: #4a5568;
font-size: 14px;
}
.resources-list li:last-child {
border-bottom: none;
}
.completion-card {
background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
color: white;
text-align: center;
padding: 30px;
border-radius: 15px;
display: none;
}
.completion-card.show {
display: block;
animation: fadeInUp 0.5s ease;
}
.completion-icon {
font-size: 48px;
margin-bottom: 15px;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.main-content {
grid-template-columns: 1fr;
}
.course-meta {
flex-direction: column;
gap: 15px;
}
.course-title {
font-size: 24px;
}
.container {
padding: 20px 15px;
}
.course-banner {
padding: 25px;
}
}
</style>
</head>
<body>
<header class="header">
<div class="header-content">
<div class="logo">🏥 EduMed</div>
<div class="user-info">
<span>👩⚕️ Hola, Dr(a). Torres Medina</span>
<span>|</span>
<span>📚 Educación Continua</span>
</div>
</div>
</header>
<div class="container">
<div class="course-banner">
<div class="course-banner-content">
<h1 class="course-title">Predicción y Prevención del Parto Pretérmino Espontáneo</h1>
<div class="course-meta">
<div class="meta-item">
<div class="meta-icon">⏱️</div>
<span>Duración: 45 minutos</span>
</div>
<div class="meta-item">
<div class="meta-icon">🎯</div>
<span>4 Preguntas</span>
</div>
<div class="meta-item">
<div class="meta-icon">📋</div>
<span>ACOG Practice Bulletin No. 234</span>
</div>
<div class="meta-item">
<div class="meta-icon">✅</div>
<span>Créditos CME Disponibles</span>
</div>
</div>
<div class="sponsor">
<strong>📖 Fuente:</strong> American College of Obstetricians and Gynecologists (ACOG) Practice Bulletin No. 234, Agosto 2021
</div>
</div>
</div>
<div class="main-content">
<div class="quiz-section">
<div class="quiz-header">
<div class="question-counter">Pregunta <span id="current-question">1</span> de 4</div>
<h2>Evaluación de Conocimientos</h2>
<p>Responde las siguientes preguntas para autoevaluar tus conocimientos</p>
</div>
<div id="question-container">
<div class="question" id="question-text"></div>
<div class="options" id="options-container"></div>
<div class="feedback" id="feedback"></div>
</div>
<div class="buttons">
<button class="btn" id="submit-btn" onclick="submitAnswer()">Enviar Respuesta</button>
<button class="btn btn-secondary" id="next-btn" onclick="nextQuestion()" style="display: none;">Siguiente Pregunta</button>
</div>
<div class="completion-card" id="completion-card">
<div class="completion-icon">🎉</div>
<h3>¡Felicitaciones!</h3>
<p>Has completado exitosamente el cuestionario sobre Parto Pretérmino</p>
<div class="score-display" id="final-score"></div>
<button class="btn" onclick="restartQuiz()" style="margin-top: 20px;">Reiniciar Cuestionario</button>
</div>
</div>
<div class="sidebar">
<div class="sidebar-card">
<h3 class="sidebar-title">📊 Tu Progreso</h3>
<div class="progress-bar">
<div class="progress-fill" id="progress-fill" style="width: 25%"></div>
</div>
<p style="text-align: center; margin-top: 10px;"><span id="progress-text">25%</span> Completado</p>
<div class="score-display" id="current-score">0/4</div>
</div>
<div class="sidebar-card">
<h3 class="sidebar-title">📚 Recursos Adicionales</h3>
<ul class="resources-list">
<li>🔬 ACOG Practice Bulletin Original</li>
<li>📖 Guías de Manejo Clínico</li>
<li>🎥 Videos Educativos</li>
<li>📄 Material de Referencia</li>
<li>💬 Foro de Discusión</li>
</ul>
</div>
<div class="sidebar-card">
<h3 class="sidebar-title">ℹ️ Información del Curso</h3>
<p style="font-size: 14px; color: #4a5568;">
Este cuestionario está basado en la guía práctica de ACOG sobre predicción y prevención del parto pretérmino espontáneo. Incluye conceptos clave sobre factores de riesgo, métodos de screening y intervenciones preventivas.
</p>
</div>
</div>
</div>
</div>
<script>
const questions = [
{
question: "Según el ACOG Practice Bulletin, ¿cuál es la tasa de parto pretérmino en Estados Unidos en 2019?",
options: [
"8.5%",
"10.2%",
"12.1%",
"14.4%"
],
correct: 1,
explanation: "Según el documento, en 2019 la tasa de parto pretérmino en Estados Unidos fue del 10.2%. Esta cifra representa un aumento respecto a años anteriores, siendo impulsado principalmente por un incremento en los partos pretérmino tardíos (34-36 semanas)."
},
{
question: "¿Cuál es la recomendación del ACOG para el screening de longitud cervical en mujeres con antecedente de parto pretérmino espontáneo?",
options: [
"No se recomienda screening rutinario",
"Ultrasonido endovaginal seriado cada 1-4 semanas desde las 16 hasta las 24 semanas",
"Una sola medición a las 20 semanas",
"Solo si hay síntomas de trabajo de parto pretérmino"
],
correct: 1,
explanation: "El ACOG recomienda medición endovaginal seriada de la longitud cervical comenzando a las 16 semanas y repitiéndose cada 1-4 semanas hasta las 24 semanas de gestación en mujeres con antecedente de parto pretérmino espontáneo, debido a la alta tasa de detección y valor predictivo en este grupo de alto riesgo."
},
{
question: "Para mujeres con embarazo único, sin antecedente de parto pretérmino y cérvix corto (<25mm), ¿cuál es el tratamiento recomendado?",
options: [
"17-OHPC intramuscular",
"Progesterona vaginal",
"Cerclaje cervical",
"Reposo en cama"
],
correct: 1,
explanation: "La progesterona vaginal está recomendada para mujeres asintomáticas sin antecedente de parto pretérmino con embarazo único y cérvix corto. Los estudios han demostrado consistentemente que reduce el riesgo de parto pretérmino antes de las 34 semanas de gestación en este grupo específico."
},
{
question: "Según la evidencia presentada, ¿cuál es la recomendación del ACOG sobre el uso de progesterona para prevenir parto pretérmino en embarazos gemelares?",
options: [
"Se recomienda rutinariamente 17-OHPC",
"Se recomienda progesterona vaginal para todos los gemelos",
"No se recomienda el uso profiláctico rutinario",
"Solo se recomienda si hay cérvix corto"
],
correct: 2,
explanation: "El ACOG no recomienda el uso profiláctico rutinario de progesterona vaginal para prevenir parto pretérmino en embarazos gemelares. Los estudios, incluyendo revisiones Cochrane, no han demostrado beneficio significativo en términos de reducción de parto pretérmino o morbilidad neonatal en embarazos múltiples no seleccionados."
}
];
let currentQuestionIndex = 0;
let selectedAnswer = null;
let score = 0;
let answered = false;
function displayQuestion() {
const question = questions[currentQuestionIndex];
document.getElementById('current-question').textContent = currentQuestionIndex + 1;
document.getElementById('question-text').textContent = question.question;
const optionsContainer = document.getElementById('options-container');
optionsContainer.innerHTML = '';
question.options.forEach((option, index) => {
const optionElement = document.createElement('div');
optionElement.className = 'option';
optionElement.innerHTML = `<span class="option-letter">${String.fromCharCode(65 + index)}</span>${option}`;
optionElement.onclick = () => selectOption(index);
optionsContainer.appendChild(optionElement);
});
// Reset state
selectedAnswer = null;
answered = false;
document.getElementById('feedback').classList.remove('show');
document.getElementById('submit-btn').style.display = 'inline-block';
document.getElementById('next-btn').style.display = 'none';
// Update progress
const progress = ((currentQuestionIndex + 1) / questions.length) * 100;
document.getElementById('progress-fill').style.width = progress + '%';
document.getElementById('progress-text').textContent = Math.round(progress) + '%';
}
function selectOption(index) {
if (answered) return;
// Remove previous selection
document.querySelectorAll('.option').forEach(opt => opt.classList.remove('selected'));
// Add selection to clicked option
document.querySelectorAll('.option')[index].classList.add('selected');
selectedAnswer = index;
}
function submitAnswer() {
if (selectedAnswer === null) {
alert('Por favor selecciona una respuesta antes de continuar.');
return;
}
answered = true;
const question = questions[currentQuestionIndex];
const options = document.querySelectorAll('.option');
// Show correct/incorrect styling
options.forEach((option, index) => {
if (index === question.correct) {
option.classList.add('correct');
} else if (index === selectedAnswer && index !== question.correct) {
option.classList.add('incorrect');
}
});
// Update score
const isCorrect = selectedAnswer === question.correct;
if (isCorrect) {
score++;
}
// Show feedback
const feedback = document.getElementById('feedback');
feedback.className = `feedback show ${isCorrect ? 'correct' : 'incorrect'}`;
feedback.innerHTML = `
<div class="feedback-header">
<div class="feedback-icon">${isCorrect ? '✓' : '✗'}</div>
${isCorrect ? '¡Correcto!' : 'Incorrecto'}
</div>
<p><strong>Respuesta correcta:</strong> ${question.options[question.correct]}</p>
<p><strong>Explicación:</strong> ${question.explanation}</p>
`;
// Update score display
document.getElementById('current-score').textContent = `${score}/${currentQuestionIndex + 1}`;
// Show next button
document.getElementById('submit-btn').style.display = 'none';
document.getElementById('next-btn').style.display = 'inline-block';
}
function nextQuestion() {
if (currentQuestionIndex < questions.length - 1) {
currentQuestionIndex++;
displayQuestion();
} else {
showCompletion();
}
}
function showCompletion() {
document.getElementById('question-container').style.display = 'none';
document.querySelector('.buttons').style.display = 'none';
document.getElementById('completion-card').classList.add('show');
const percentage = Math.round((score / questions.length) * 100);
document.getElementById('final-score').innerHTML = `
<div style="font-size: 48px; margin-bottom: 10px;">${percentage}%</div>
<div style="font-size: 18px;">Puntuación: ${score}/${questions.length}</div>
`;
// Update progress to 100%
document.getElementById('progress-fill').style.width = '100%';
document.getElementById('progress-text').textContent = '100%';
document.getElementById('current-score').textContent = `${score}/${questions.length}`;
}
function restartQuiz() {
currentQuestionIndex = 0;
selectedAnswer = null;
score = 0;
answered = false;
document.getElementById('question-container').style.display = 'block';
document.querySelector('.buttons').style.display = 'flex';
document.getElementById('completion-card').classList.remove('show');
displayQuestion();
document.getElementById('current-score').textContent = '0/0';
}
// Initialize the quiz
displayQuestion();
</script>
</body>
</html>
