4 create food security forms

public/questions.json

@@ -0,0 +1,181 @@
+[
+  {
+    "id": "A1",
+    "question": "En algún momento durante los pasados 3 meses, ¿Le preocupó que se acabara la compra y no poder ir a comprar más alimentos, por falta de dinero?",
+    "type": "radio",
+    "options": [
+      "Ocurrió con frecuencia (muchas veces)",
+      "Ocurrió a veces",
+      "Nunca ocurrió",
+      "No recuerdo",
+      "Prefiero no contestar"
+    ]
+  },
+  {
+    "id": "A2",
+    "question": "En algún momento durante los pasados 3 meses, ¿Se acabó la compra antes del mes y no pudo comprar más alimentos por falta de dinero?",
+    "type": "radio",
+    "options": [
+      "Ocurrió con frecuencia (muchas veces)",
+      "Ocurrió a veces",
+      "Nunca ocurrió",
+      "No recuerdo",
+      "Prefiero no contestar"
+    ]
+  },
+  {
+    "id": "A3",
+    "question": "En algún momento durante los pasados 3 meses, ¿No pudo comer saludablemente/nutritivamente por falta de dinero?",
+    "type": "radio",
+    "options": [
+      "Ocurrió con frecuencia (muchas veces)",
+      "Ocurrió a veces",
+      "Nunca ocurrió",
+      "No recuerdo",
+      "Prefiero no contestar"
+    ]
+  },
+  {
+    "id": "A4",
+    "question": "¿En algún momento durante los pasados 3 meses, usted o algún otro adulto en la casa, se sirvió menos cantidad de alimentos de lo que debía comer, por falta de dinero para comprar más?",
+    "type": "radio",
+    "options": [
+      "Sí",
+      "No",
+      "No recuerdo"
+    ]
+  },
+  {
+    "id": "A5",
+    "question": "¿En algún momento durante los pasados 3 meses, usted o algún otro adulto en la casa, no pudo hacer o comer alguna de las comidas principales del día (desayuno, almuerzo o cena) por falta de dinero?",
+    "type": "radio",
+    "options": [
+      "Sí",
+      "No",
+      "No recuerdo"
+    ]
+  },
+  {
+    "id": "A6",
+    "question": "¿En algún momento durante los pasados 3 meses, usted o algún otro adulto en la casa, tuvo hambre pero no comió por falta de dinero para comprar alimentos/comida?",
+    "type": "radio",
+    "options": [
+      "Sí",
+      "No",
+      "No recuerdo"
+    ]
+  },
+  {
+    "id": "A7",
+    "question": "¿En algún momento durante los pasados 3 meses, usted o algún otro adulto en la casa, bajó de peso por falta de dinero para comprar alimentos/comida?",
+    "type": "radio",
+    "options": [
+      "Sí",
+      "No",
+      "No recuerdo"
+    ]
+  },
+  {
+    "id": "A8",
+    "question": "¿En algún momento durante los pasados 3 meses, usted o algún otro adulto en la casa, no comió durante todo un día por falta de dinero para comprar alimentos/comida?",
+    "type": "radio",
+    "options": [
+      "Sí",
+      "No",
+      "No recuerdo"
+    ]
+  },
+  {
+    "id": "A9",
+    "question": "¿En algún momento durante los pasados 3 meses, usted o algún otro adulto en la casa, tuvo que ir a comer a casa de algún familiar por falta de dinero para comprar alimentos/comida?",
+    "type": "radio",
+    "options": [
+      "Sí",
+      "No",
+      "No recuerdo"
+    ]
+  },
+  {
+    "id": "A10",
+    "question": "¿En su hogar viven niños o jóvenes menores de 18 años?",
+    "type": "radio",
+    "options": [
+      { "value": "Sí", "next": "Parte 3" },
+      { "value": "No", "next": "Parte 4" }
+    ]
+  },
+  {
+    "id": "N1",
+    "question": "¿En algún momento durante los pasados 3 meses, tuvo que darle a sus hijos un menú poco variado (el mismo tipo de comida) por falta de dinero?",
+    "type": "radio",
+    "options": [
+      "Ocurrió con frecuencia (muchas veces)",
+      "Ocurrió a veces",
+      "Nunca ocurrió",
+      "No recuerdo",
+      "Prefiero no contestar"
+    ]
+  },
+  {
+    "id": "N2",
+    "question": "¿En algún momento durante los pasados 3 meses, tuvo que prepararles a sus hijos comidas no balanceadas/no nutritivas por falta de dinero?",
+    "type": "radio",
+    "options": [
+      "Ocurrió con frecuencia",
+      "Ocurrió a veces",
+      "Nunca ocurrió",
+      "No recuerdo",
+      "Prefiero no contestar"
+    ]
+  },
+  {
+    "id": "N3",
+    "question": "¿En algún momento durante los pasados 3 meses, tuvo que servirle menos cantidad de comida a sus hijos porque no había suficiente comida en la casa y no había dinero para comprar más alimentos/comida?",
+    "type": "radio",
+    "options": [
+      "Sí",
+      "No",
+      "No recuerdo"
+    ]
+  },
+  {
+    "id": "N4",
+    "question": "¿En algún momento durante los pasados 3 meses, no le pudo dar alguna de las comidas principales del día (desayuno, almuerzo o cena) a sus hijos por falta de dinero?",
+    "type": "radio",
+    "options": [
+      { "value": "Sí", "next": "N4" },
+      { "value": "No", "next": "N5" },
+      { "value": "No recuerdo", "next": "N5" }
+    ]
+  },
+  {
+    "id": "N5",
+    "question": "¿En algún momento durante los pasados 3 meses, tuvo que llevar a sus hijos a comer a casa de algún familiar por falta de dinero?",
+    "type": "radio",
+    "options": [
+      "Sí",
+      "No",
+      "No recuerdo"
+    ]
+  },
+  {
+    "id": "N6",
+    "question": "¿En algún momento durante los pasados 3 meses, sus hijos tuvieron hambre y no tenía dinero para comprar algo de comer?",
+    "type": "radio",
+    "options": [
+      "Sí",
+      "No",
+      "No recuerdo"
+    ]
+  },
+  {
+    "id": "N7",
+    "question": "¿En algún momento durante los pasados 3 meses, sus hijos no comieron por todo un día porque no hubo dinero para comprar alimentos/comida?",
+    "type": "radio",
+    "options": [
+      "Sí",
+      "No",
+      "No recuerdo"
+    ]
+  }
+]

src/App.tsx

@@ -1,35 +1,36 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import { useState } from "react";
+import Questionnaire from "./components/Questionnaire";
+import "./App.css";
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [startQuiz, setStartQuiz] = useState(false);
 
   return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
+    <div className="flex flex-col items-center justify-center h-screen bg-gray-100 p-6">
+      {!startQuiz ? (
+        <div className="text-center">
+          <h1 className="text-3xl font-bold mb-2">Escala de Seguridad Alimentaria</h1>
+          <h2 className="text-xl text-gray-700 mb-4">para Puerto Rico</h2>
+
+          <p className="text-lg text-gray-600 mb-4">
+            📝 Responda las siguientes preguntas sobre su seguridad alimentaria.
+          </p>
+          <p className="text-md text-gray-500 mb-6">
+            📌 Lea cada pregunta y seleccione la opción que mejor refleje su situación.
+          </p>
+
+          <button
+            className="bg-blue-600 hover:bg-blue-800 text-white font-bold py-3 px-6 rounded-lg text-lg"
+            onClick={() => setStartQuiz(true)}
+          >
+            Comenzar Cuestionario
+          </button>
+        </div>
+      ) : (
+        <Questionnaire />
+      )}
+    </div>
+  );
 }
 
-export default App
+export default App;

src/components/Footer.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+const Footer: React.FC = () => {
+  return (
+    <footer className="footer">
+      <p className="adaptation">Adaptación Cultural del <i>U.S. Household Food Security Survey Module</i></p>
+      <p className="dept">del Departamento de Agricultura de Estados Unidos.</p>
+      <p className="authors">Por Rivera-Soto W. y Facultad y Estudiantes del Programa de Maestría en Nutrición</p>
+      <p className="school">Escuela Graduada de Salud Pública, Recinto de Ciencias Médicas, Universidad de Puerto Rico.</p>
+      <p className="year">2014</p>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/Header.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+
+
+const Header: React.FC = () => {
+  return (
+    <header className="header">
+      <div className="header-container">
+        {/* Left Logo */}
+        <div className="logo-container">
+        <img src="/CienciasMedicasUPR.png" alt="University Logo 1" className="logo" />
+        </div>
+
+        {/* Centered Title & Subtitle */}
+        <div className="header-text">
+          <h1 className="subtitle">Universidad de Puerto Rico</h1>
+          <h2 className="subtitle">
+            Recinto de Ciencias Médicas<br />
+            Escuela Graduada de Salud Pública
+          </h2>
+        </div>
+
+        {/* Right Logo */}
+        <div className="logo-container">
+        <img src="/UCienciasPublicas.png" alt="University Logo 2" className="logo" />
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;