Primer commit: Solo se ve quiz de Clemente pero ya guarda las respuestas

package-lock.json

@@ -24,9 +24,11 @@
         "@types/react-dom": "^18.0.6",
         "@types/react-router": "^5.1.11",
         "@types/react-router-dom": "^5.1.7",
+        "bootstrap": "^5.2.3",
         "history": "^4.9.0",
         "ionicons": "^6.0.3",
         "react": "^18.2.0",
+        "react-bootstrap": "^2.7.0",
         "react-dom": "^18.2.0",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
@@ -3344,6 +3346,57 @@
         }
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.4.0.tgz",
+      "integrity": "sha512-qzuGk14/fUyUAoW/EBwgFcuMkVNXJVGlezTgZ1HovpCZ+p9844E7MUFHE7CuzFzPEIkVeqhBNIoIu+VJJ8YCOA==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
+      "integrity": "sha512-ZbjlEHcG+FQtpDPHd7i4FzNNvJf2enAwZfJbpM8CW7BhmOAbsHpZe3tsHwfQUrBuyrxWqPYp2x5UMnilWcY22A==",
+      "dependencies": {
+        "dequal": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.4.1.tgz",
+      "integrity": "sha512-J7wFOx2DcmkBqCqiZgDsggLO7faiNh4Nv1/v80FmbRgP+MYpwaVDKKXLC69DA4+ejgNIsBP5ORtC74EZqO1j8A==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@popperjs/core": "^2.11.5",
+        "@react-aria/ssr": "^3.2.0",
+        "@restart/hooks": "^0.4.7",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.2",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4132,6 +4185,14 @@
         "@types/react-router": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -4212,6 +4273,11 @@
       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==",
       "dev": true
     },
+    "node_modules/@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
+    },
     "node_modules/@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -5499,6 +5565,24 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
+    "node_modules/bootstrap": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.6"
+      }
+    },
     "node_modules/bplist-parser": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.3.2.tgz",
@@ -5803,6 +5887,11 @@
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==",
       "dev": true
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
@@ -6769,6 +6858,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -6919,6 +7016,15 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -9393,6 +9499,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ionicons": {
       "version": "6.0.4",
       "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.4.tgz",
@@ -13714,6 +13828,23 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/prop-types-extra/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -13910,6 +14041,35 @@
         "node": ">=14"
       }
     },
+    "node_modules/react-bootstrap": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.0.tgz",
+      "integrity": "sha512-Jcrn6aUuRVBeSB6dzKODKZU1TONOdhAxu0IDm4Sv74SJUm98dMdhSotF2SNvFEADANoR+stV+7TK6SNX1wWu5w==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@restart/hooks": "^0.4.6",
+        "@restart/ui": "^1.4.1",
+        "@types/react-transition-group": "^4.4.4",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -13977,6 +14137,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -14100,6 +14265,21 @@
         }
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -15981,6 +16161,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -16225,6 +16419,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

package.json

@@ -19,9 +19,11 @@
     "@types/react-dom": "^18.0.6",
     "@types/react-router": "^5.1.11",
     "@types/react-router-dom": "^5.1.7",
+    "bootstrap": "^5.2.3",
     "history": "^4.9.0",
     "ionicons": "^6.0.3",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.7.0",
     "react-dom": "^18.2.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

src/components/QuizForm.tsx

@@ -0,0 +1,15 @@
+import React, {useState} from 'react';
+import { IonRadioGroup, IonRadio, IonLabel } from '@ionic/react';
+
+const GenderForm: React.FC = () => {
+  const [gender, setGender] = useState('');
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    // Perform form submission here
+  };
+
+  return (
+    null
+  );
+};

src/data/Quizzes.json

@@ -0,0 +1,75 @@
+[
+    {
+        "id": 1,
+        "title": "Roberto Clemente",
+        "pregunta-1": "¿En que año nació Roberto Clemente?",
+        "res-1-1":"1934",
+        "res-1-2":"1950",
+        "res-1-3":"1943",
+        "res-1-4":"2022",
+        "pregunta-2": "¿En que pueblo se crió?",
+        "res-2-1":"Caguas",
+        "res-2-2":"Cabo Rojo",
+        "res-2-3":"Luquillo",
+        "res-2-4":"Carolina",
+        "pregunta-3": "¿Para qué equipo de la liga de beisbol profesional de Puerto Rico jugó?",
+        "res-3-1":"Bacalaos de Fajardo",
+        "res-3-2":"Alcapurrias de Loiza",
+        "res-3-3":"Cangrejeros de Santurce",
+        "res-3-4":"Brujos de Guayama",
+        "pregunta-4": "¿Para que equipo de la MLB jugó?",
+        "res-4-1":"New York Yankees",
+        "res-4-2":"Houston Astros",
+        "res-4-3":"Chicago Cubs",
+        "res-4-4":"Pittsburgh Pirates"
+    },
+    {
+        "id":2,
+        "title": "Marian Villaronga Toro",
+        "pregunta-1": "¿En que año nació Marian Villaronga Toro1?",
+        "res-1-1":"11",
+        "res-1-2":"12",
+        "res-1-3":"13",
+        "res-1-4":"14",
+        "pregunta-2": "¿En que año nació Marian Villaronga Toro2?",
+        "res-2-1":"21",
+        "res-2-2":"22",
+        "res-2-3":"23",
+        "res-2-4":"24",
+        "pregunta-3": "¿En que año nació Marian Villaronga Toro3",
+        "res-3-1":"31",
+        "res-3-2":"32",
+        "res-3-3":"33",
+        "res-3-4":"34",
+        "pregunta-4": "¿En que año nació Marian Villaronga Toro4",
+        "res-4-1":"41",
+        "res-4-2":"42",
+        "res-4-3":"43",
+        "res-4-4":"44"
+    }
+    ,
+    {
+        "id":3,
+        "title": "German Rieckhoff Sampoyo",
+        "pregunta-1": "¿En que año nació German Rieckhoff Sampoyo1?",
+        "res-1-1":"11",
+        "res-1-2":"12",
+        "res-1-3":"13",
+        "res-1-4":"14",
+        "pregunta-2": "¿En que año nació German Rieckhoff Sampoyo2?",
+        "res-2-1":"21",
+        "res-2-2":"22",
+        "res-2-3":"23",
+        "res-2-4":"24",
+        "pregunta-3": "¿En que año nació German Rieckhoff Sampoyo3?",
+        "res-3-1":"31",
+        "res-3-2":"32",
+        "res-3-3":"33",
+        "res-3-4":"34",
+        "pregunta-4": "¿En que año nació German Rieckhoff Sampoyo4?",
+        "res-4-1":"41",
+        "res-4-2":"42",
+        "res-4-3":"43",
+        "res-4-4":"44"
+    }
+]

src/pages/Questions.css

@@ -11,4 +11,24 @@ ion-grid {
 ion-col {
     text-align: center;
     align-items: center;
+}
+
+ion-radio {
+    --border-radius: 4px;
+    --inner-border-radius: 4px;
+  
+    --color: rgb(110, 110, 110);
+    --color-checked: #5abae0;
+}
+
+ion-radio.ios {
+    width: 20px;
+    height: 20px;
+
+    border: 2px solid rgb(110, 110, 110);
+    border-radius: 4px;
+}
+
+.radio-checked.ios {
+    border-color: #5abae0;
 }

src/pages/Questions.tsx

@@ -12,7 +12,6 @@ import {
     IonItem,
     IonLabel,
     IonList,
-    IonCheckbox,
     IonCard,
     IonCardContent,
     IonCardHeader,
@@ -21,16 +20,31 @@ import {
     IonButton,
     IonGrid,
     IonRow,
-    IonCol
+    IonCol,
+    IonRadioGroup,
+    IonRadio
 } from '@ionic/react';
 import { arrowBack } from 'ionicons/icons';
-import React from 'react';
+import React, {useState} from 'react';
+//import { Form } from 'react-bootstrap';
 import './Questions.css';
 import Biography from './Biography';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import RobertoClemente from '../assets/RobertoClemente.jpg';
+import Quizzes from '../data/Quizzes.json';
+
 
 const Questions: React.FC = () => {
+
+    const [res1, setRes1] = useState();
+    const [res2, setRes2] = useState();
+    const [res3, setRes3] = useState();
+    const [res4, setRes4] = useState();
+
+    const verificarRes = () => {
+        return console.log([res1, res2, res3, res4])
+    };
+
     return (
         <IonPage>
             <IonHeader>
@@ -50,131 +64,149 @@ const Questions: React.FC = () => {
 
             <IonContent fullscreen className="ion-padding">
                 <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
-                <h1>Quiz sobre la biografia de Roberto Clemente</h1>
-
-                <p>Marque una respuesta por pregunta</p>
-
-                <IonCard>
-                    <IonCardHeader>
-                        <IonCardTitle>¿En que año nació Roberto Clemente?</IonCardTitle>
-                        <IonCardSubtitle></IonCardSubtitle>
-                    </IonCardHeader>
-                    <IonCardContent>
-                        <IonList>
-                            <IonItem>
-                                <IonCheckbox slot="start"></IonCheckbox>
-                                <IonLabel>1934</IonLabel>
-                            </IonItem>
-
-                            <IonItem>
-                                <IonCheckbox slot="start"></IonCheckbox>
-                                <IonLabel>1950</IonLabel>
-                            </IonItem>
-
-                            <IonItem>
-                                <IonCheckbox slot="start"></IonCheckbox>
-                                <IonLabel>1943</IonLabel>
-                            </IonItem>
-
-                            <IonItem>
-                                <IonCheckbox slot="start"></IonCheckbox>
-                                <IonLabel>2022</IonLabel>
-                            </IonItem>
-                        </IonList>
-                    </IonCardContent>
-                </IonCard>
-
-                <IonCard>
-                    <IonCardHeader>
-                        <IonCardTitle>¿En que pueblo se crió?</IonCardTitle>
-
-                    </IonCardHeader>
-                    <IonCardContent>
-                        <IonList>
-                            <IonItem>
-                                <IonCheckbox slot="start"></IonCheckbox>
-                                <IonLabel>Caguas</IonLabel>
-                            </IonItem>
-
-                            <IonItem>
-                                <IonCheckbox slot="start"></IonCheckbox>
-                                <IonLabel>Cabo Rojo</IonLabel>
-                            </IonItem>
-
-                            <IonItem>
-                                <IonCheckbox slot="start"></IonCheckbox>
-                                <IonLabel>Luquillo</IonLabel>
-                            </IonItem>
-
-                            <IonItem>
-                                <IonCheckbox slot="start"></IonCheckbox>
-                                <IonLabel>Carolina</IonLabel>
-                            </IonItem>
-                        </IonList>
-                    </IonCardContent>
-                </IonCard>
-
-                <IonCard>
-                    <IonCardHeader>
-                        <IonCardTitle>¿Para qué equipo de la liga de beisbol profesional de Puerto Rico jugó?</IonCardTitle>
-
-                    </IonCardHeader>
-                    <IonCardContent>
-                        <IonList>
-                            <IonItem>
-                                <IonCheckbox slot="start"></IonCheckbox>
-                                <IonLabel>Bacalaos de Fajardo</IonLabel>
-                            </IonItem>
-
-                            <IonItem>
-                                <IonCheckbox slot="start"></IonCheckbox>
-                                <IonLabel>Alcapurrias de Loiza</IonLabel>
-                            </IonItem>
-
-                            <IonItem>
-                                <IonCheckbox slot="start"></IonCheckbox>
-                                <IonLabel>Cangrejeros de Santurce</IonLabel>
-                            </IonItem>
-
-                            <IonItem>
-                                <IonCheckbox slot="start"></IonCheckbox>
-                                <IonLabel>Brujos de Guayama</IonLabel>
-                            </IonItem>
-                        </IonList>
-                    </IonCardContent>
-                </IonCard>
-
-                <IonCard>
-                    <IonCardHeader>
-                        <IonCardTitle>¿Para que equipo de la MLB jugó?</IonCardTitle>
-
-                    </IonCardHeader>
-                    <IonCardContent>
-                        <IonList>
-                            <IonItem>
-                                <IonCheckbox slot="start"></IonCheckbox>
-                                <IonLabel>New York Yankees</IonLabel>
-                            </IonItem>
-
-                            <IonItem>
-                                <IonCheckbox slot="start"></IonCheckbox>
-                                <IonLabel>Houston Astros</IonLabel>
-                            </IonItem>
-
-                            <IonItem>
-                                <IonCheckbox slot="start"></IonCheckbox>
-                                <IonLabel>Chicago Cubs</IonLabel>
-                            </IonItem>
-
-                            <IonItem>
-                                <IonCheckbox slot="start"></IonCheckbox>
-                                <IonLabel>Pittsburgh Pirates</IonLabel>
-                            </IonItem>
-                        </IonList>
-                    </IonCardContent>
-                </IonCard>
-
-                <IonButton>Verificar respuestas</IonButton>
+
+                {
+                    Quizzes && Quizzes.map(quizzes => {
+                        return (
+                        quizzes.id == 1 ? <>
+                        <h1>Quiz sobre la biografia de {quizzes.title}</h1>
+
+                        <p>Marque una respuesta por pregunta</p>
+
+                        <IonCard>
+                            <IonCardHeader>
+                                <IonCardTitle>{quizzes['pregunta-1']}</IonCardTitle>
+                                <IonCardSubtitle></IonCardSubtitle>
+                            </IonCardHeader>
+                            <IonCardContent>
+                                <IonList>
+                                    <IonRadioGroup value={res1} onIonChange={(e) => setRes1(e.detail.value)}>
+                                        <IonItem>
+                                            <IonLabel>{quizzes['res-1-1']}</IonLabel>
+                                            <IonRadio slot="end" value={quizzes['res-1-1']}></IonRadio>
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizzes['res-1-2']}</IonLabel>
+                                            <IonRadio slot="end" value={quizzes['res-1-2']}></IonRadio>
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizzes['res-1-3']}</IonLabel>
+                                            <IonRadio slot="end" value={quizzes['res-1-3']}></IonRadio>
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizzes['res-1-4']}</IonLabel>
+                                            <IonRadio slot="end" value={quizzes['res-1-4']}></IonRadio>
+                                        </IonItem>
+                                    </IonRadioGroup>
+                                </IonList>
+                            </IonCardContent>
+                        </IonCard>
+
+                        <IonCard>
+                            <IonCardHeader>
+                                <IonCardTitle>{quizzes['pregunta-2']}</IonCardTitle>
+                                <IonCardSubtitle></IonCardSubtitle>
+                            </IonCardHeader>
+                            <IonCardContent>
+                                <IonList>
+                                    <IonRadioGroup value={res2} onIonChange={(e) => setRes2(e.detail.value)}>
+                                        <IonItem>
+                                            <IonLabel>{quizzes['res-2-1']}</IonLabel>
+                                            <IonRadio slot="end" value={quizzes['res-2-1']}></IonRadio>
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizzes['res-2-2']}</IonLabel>
+                                            <IonRadio slot="end" value={quizzes['res-2-2']}></IonRadio>
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizzes['res-2-3']}</IonLabel>
+                                            <IonRadio slot="end" value={quizzes['res-2-3']}></IonRadio>
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizzes['res-2-4']}</IonLabel>
+                                            <IonRadio slot="end" value={quizzes['res-2-4']}></IonRadio>
+                                        </IonItem>
+                                    </IonRadioGroup>
+                                </IonList>
+                            </IonCardContent>
+                        </IonCard>
+
+                        <IonCard>
+                            <IonCardHeader>
+                                <IonCardTitle>{quizzes['pregunta-3']}</IonCardTitle>
+                                <IonCardSubtitle></IonCardSubtitle>
+                            </IonCardHeader>
+                            <IonCardContent>
+                                <IonList>
+                                    <IonRadioGroup value={res3} onIonChange={(e) => setRes3(e.detail.value)}>
+                                        <IonItem>
+                                            <IonLabel>{quizzes['res-3-1']}</IonLabel>
+                                            <IonRadio slot="end" value={quizzes['res-3-1']}></IonRadio>
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizzes['res-3-2']}</IonLabel>
+                                            <IonRadio slot="end" value={quizzes['res-3-2']}></IonRadio>
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizzes['res-3-3']}</IonLabel>
+                                            <IonRadio slot="end" value={quizzes['res-3-3']}></IonRadio>
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizzes['res-3-4']}</IonLabel>
+                                            <IonRadio slot="end" value={quizzes['res-3-4']}></IonRadio>
+                                        </IonItem>
+                                    </IonRadioGroup>
+                                </IonList>
+                            </IonCardContent>
+                        </IonCard>
+
+                        <IonCard>
+                            <IonCardHeader>
+                                <IonCardTitle>{quizzes['pregunta-4']}</IonCardTitle>
+                                <IonCardSubtitle></IonCardSubtitle>
+                            </IonCardHeader>
+                            <IonCardContent>
+                                <IonList>
+                                    <IonRadioGroup value={res4} onIonChange={(e) => setRes4(e.detail.value)}>
+                                        <IonItem>
+                                            <IonLabel>{quizzes['res-4-1']}</IonLabel>
+                                            <IonRadio slot="end" value={quizzes['res-4-1']}></IonRadio>
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizzes['res-4-2']}</IonLabel>
+                                            <IonRadio slot="end" value={quizzes['res-4-2']}></IonRadio>
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizzes['res-4-3']}</IonLabel>
+                                            <IonRadio slot="end" value={quizzes['res-4-3']}></IonRadio>
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizzes['res-4-4']}</IonLabel>
+                                            <IonRadio slot="end" value={quizzes['res-4-4']}></IonRadio>
+                                        </IonItem>
+                                    </IonRadioGroup>
+                                </IonList>
+                            </IonCardContent>
+                        </IonCard>
+                    </> : null
+                        )
+                    })
+                }
+
+
+                <IonButton onClick={verificarRes}>Verificar respuestas</IonButton>
 
             </IonContent>