const preguntas = [
{
tipo: 'Escolla múltiple',
texto: 'En que século comezou a Idade Media?',
opcionA: 'Século V',
opcionB: 'Século XV',
opcionC: 'Século X'
},
{
tipo: 'Completar',
texto: 'Os reis e raíñas vivían nos __________.'
},
{
tipo: 'Verdadeiro ou falso',
texto: 'Os castelos servían para defender as cidades.'
},
{
tipo: 'Relacionar',
texto: 'Relaciona cada grupo social coa súa función.'
},
{
tipo: 'Resposta curta',
texto: 'Como se chamaba o camiño de peregrinación máis importante de España?'
},
{
tipo: 'Observación',
texto: 'Debuxa un elemento típico dunha catedral gótica.'
},
{
tipo: 'Escolla múltiple',
texto: 'Que pobo musulmán chegou á Península Ibérica no ano 711?',
opcionA: 'Romanos',
opcionB: 'Visigodos',
opcionC: 'Árabes'
},
{
tipo: 'Completar',
texto: 'Os artesáns traballaban nos __________.'
},
{
tipo: 'Resposta curta',
texto: 'Escribe o nome dun rei ou raíña importante da Idade Media en España.'
},
{
tipo: 'Creativa',
texto: 'Imagina que vives nun castelo medieval. Que oficio terías?'
}
];
return (
<div className="bg-gray-100 min-h-screen flex justify-center p-4">
<div
className="bg-white shadow-2xl rounded-3xl p-8 w-[210mm] min-h-[297mm] text-gray-800"
style={{ fontFamily: 'Arial, sans-serif' }}
>
<header className="border-b-4 border-amber-600 pb-4 mb-6">
<div className="flex justify-between items-center">
<div>
<h1 className="text-4xl font-bold text-amber-700 mb-2">
A IDADE MEDIA EN ESPAÑA
</h1>
<p className="text-lg">
Ficha interactiva · 5º de Primaria
</p>
</div>
<div className="bg-amber-100 rounded-2xl p-4 text-center border-2 border-amber-400 w-40">
<div className="text-5xl">🏰</div>
<p className="font-bold mt-2">Visual Thinking</p>
</div>
</div>
<div className="mt-4 flex gap-6 text-sm">
<div>
<strong>Nome:</strong> ___________________
</div>
<div>
<strong>Data:</strong> ___________________
</div>
</div>
</header>
<section className="grid grid-cols-3 gap-4 mb-8">
<div className="bg-blue-50 border-2 border-blue-300 rounded-2xl p-4 text-center">
<div className="text-5xl mb-2">⚔️</div>
<h2 className="font-bold text-lg">Cabaleiros</h2>
<p className="text-sm">Defendían os castelos e ao rei.</p>
</div>
<div className="bg-green-50 border-2 border-green-300 rounded-2xl p-4 text-center">
<div className="text-5xl mb-2">⛪</div>
<h2 className="font-bold text-lg">Catedrais</h2>
<p className="text-sm">Grandes edificios relixiosos medievais.</p>
</div>
<div className="bg-red-50 border-2 border-red-300 rounded-2xl p-4 text-center">
<div className="text-5xl mb-2">👑</div>
<h2 className="font-bold text-lg">Reis e raíñas</h2>
<p className="text-sm">Gobernaban os reinos medievais.</p>
</div>
</section>
<section>
<h2 className="text-2xl font-bold text-amber-700 mb-4">
Responde ás preguntas
</h2>
<div className="space-y-5">
{preguntas.map((pregunta, index) => (
<div
key={index}
className="border-2 border-gray-300 rounded-2xl p-4 bg-gray-50"
>
<div className="flex items-center gap-3 mb-2">
<div className="bg-amber-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold">
{index + 1}
</div>
<div>
<span className="text-sm bg-amber-100 text-amber-800 px-2 py-1 rounded-full font-semibold">
{pregunta.tipo}
</span>
</div>
</div>
<p className="text-lg font-medium mb-3">{pregunta.texto}</p>
{pregunta.opcionA && (
<div className="space-y-2 ml-3 text-base">
<div>⬜ {pregunta.opcionA}</div>
<div>⬜ {pregunta.opcionB}</div>
<div>⬜ {pregunta.opcionC}</div>
</div>
)}
{pregunta.tipo === 'Verdadeiro ou falso' && (
<div className="flex gap-8 ml-3 text-base">
<div>⬜ Verdadeiro</div>
<div>⬜ Falso</div>
</div>
)}
{pregunta.tipo === 'Relacionar' && (
<div className="grid grid-cols-2 gap-4 mt-3 text-base">
<div className="bg-white p-3 rounded-xl border">
<p>👑 Nobreza</p>
<p>🙏 Clero</p>
<p>🌾 Campesiños</p>
</div>
<div className="bg-white p-3 rounded-xl border">
<p>___ Traballaban no campo</p>
<p>___ Rezaban e ensinaban</p>
<p>___ Gobernaban e loitaban</p>
</div>
</div>
)}
{(pregunta.tipo === 'Resposta curta' ||
pregunta.tipo === 'Completar' ||
pregunta.tipo === 'Creativa') && (
<div className="mt-3 space-y-2">
<div className="border-b border-gray-500 h-6"></div>
<div className="border-b border-gray-300 h-6"></div>
</div>
)}
{pregunta.tipo === 'Observación' && (
<div className="mt-4 border-2 border-dashed border-gray-400 rounded-2xl h-32 flex items-center justify-center bg-white">
<div className="text-center text-gray-500">
<div className="text-4xl">✏️</div>
<p>Espazo para debuxar</p>
</div>
</div>
)}
</div>
))}
</div>
</section>
<footer className="mt-8 border-t-4 border-amber-600 pt-4 flex justify-between items-center">
<div>
<h3 className="font-bold text-lg text-amber-700">
Sabías que...?
</h3>
<p className="text-sm max-w-xl">
Durante a Idade Media construíronse moitos castelos e catedrais
que aínda podemos visitar hoxe en España.
</p>
</div>
<div className="text-6xl">📜</div>
</footer>
</div>
</div>
);
}
