Modification to List

package-lock.json

         "@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",
         }
       }
     },
+    "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",
         "@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",
       "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",
       "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",
       "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",
         "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",
         "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",
         "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",
         "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",
         "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",
       "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",
         "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",
         "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

     "@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/App.tsx

         <Route path="/Capsule/:id">
           <Capsule />
         </Route>
-        <Route path="/Question">
+        <Route path="/Question/:id">
           <Questions />
         </Route>
         <Route path="/About">

src/data/QuizInfo.ts

+import Quizzes from '../data/Quizzes.json';
+
+export interface QuizInfo {
+    id: number;
+    title: string;
+
+    pregunta1: string;
+    res1: string[];
+    correcta1: string;
+
+    pregunta2: string;
+    res2: string[];
+    correcta2: string;
+
+    pregunta3: string;
+    res3: string[];
+    correcta3: string;
+
+    pregunta4: string;
+    res4: string[];
+    correcta4: string;
+
+}
+
+export const getQuizzes = () => Quizzes;
+
+export const getQuiz = (id: number) => Quizzes.find(m => m.id === id);

src/data/Quizzes.json

+[
+    {
+        "id": 1,
+        "title": "Roberto Clemente",
+
+        "pregunta1": "¿En que año nació Roberto Clemente?",
+        "res1":["1934","1950","1943","2022"],
+        "correcta1":"1934",
+
+        "pregunta2": "¿En que pueblo se crió?",
+        "res2": ["Caguas","Cabo Rojo","Luquillo","Carolina"],
+        "correcta2":"Carolina",
+
+        "pregunta3": "¿Para qué equipo de la liga de beisbol profesional de Puerto Rico jugó?",
+        "res3": ["Bacalaos de Fajardo","Alcapurrias de Loiza","Cangrejeros de Santurce","Brujos de Guayama"],
+        "correcta3":"Cangrejeros de Santurce",
+
+        "pregunta4": "¿Para que equipo de la MLB jugó?",
+        "res4": ["New York Yankees","Houston Astros","Chicago Cubs","Pittsburgh Pirates"],
+        "correcta4":"Pittsburgh Pirates"
+
+    },
+    {
+        "id":2,
+        "title": "Rebekah Colberg Cabrera",
+        
+        "pregunta1": "¿En que año nació Rebekah Colberg Cabrera?",
+        "res1": ["11","12","13","14"],
+        "correcta1":"11",
+
+        "pregunta2": "¿En que año nació Rebekah Colberg Cabrera?",
+        "res2": ["21","22","23","24"],
+        "correcta2":"22",
+
+        "pregunta3": "¿En que año nació Rebekah Colberg Cabrera3",
+        "res3": ["31","32","33","34"],
+        "correcta3":"33",
+
+        "pregunta4": "¿En que año nació Rebekah Colberg Cabrera4",
+        "res4": ["41","42","43","44"],
+        "correcta4":"44"
+
+    }
+    ,
+    {
+        "id":3,
+        "title": "German Rieckhoff Sampoyo",
+
+        "pregunta1": "¿En que año nació German Rieckhoff Sampoyo1?",
+        "res1": ["11","12","13","14"],
+        "correcta1":"11",
+
+        "pregunta2": "¿En que año nació German Rieckhoff Sampoyo2?",
+        "res2": ["21","22","23","24"],
+        "correcta2":"22",
+
+        "pregunta3": "¿En que año nació German Rieckhoff Sampoyo3",
+        "res3": ["31","32","33","34"],
+        "correcta3":"33",
+
+        "pregunta4": "¿En que año nació German Rieckhoff Sampoyo4",
+        "res4": ["41","42","43","44"],
+        "correcta4":"44"
+    }
+    ,
+    {
+        "id":4,
+        "title": "Narciso Figueroa Sanabria",
+
+        "pregunta1": "Narciso1",
+        "res1": ["11","12","13","14"],
+        "correcta1":"11",
+
+        "pregunta2": "Narciso2",
+        "res2": ["21","22","23","24"],
+        "correcta2":"22",
+
+        "pregunta3": "Narciso3",
+        "res3": ["31","32","33","34"],
+        "correcta3":"33",
+
+        "pregunta4": "Narciso4",
+        "res4": ["41","42","43","44"],
+        "correcta4":"44"
+    }
+    ,
+    {
+        "id":5,
+        "title": "Angelina Figueroa Sanabria",
+
+        "pregunta1": "Angelina1",
+        "res1": ["11","12","13","14"],
+        "correcta1":"11",
+
+        "pregunta2": "Angelina2",
+        "res2": ["21","22","23","24"],
+        "correcta2":"22",
+
+        "pregunta3": "Angelina3",
+        "res3": ["31","32","33","34"],
+        "correcta3":"33",
+
+        "pregunta4": "Angelina4",
+        "res4": ["41","42","43","44"],
+        "correcta4":"44"
+    }
+    ,
+    {
+        "id":6,
+        "title": "Leonor Figueroa Sanabria",
+
+        "pregunta1": "Leonor1",
+        "res1": ["11","12","13","14"],
+        "correcta1":"11",
+
+        "pregunta2": "Leonor2",
+        "res2": ["21","22","23","24"],
+        "correcta2":"22",
+
+        "pregunta3": "Leonor3",
+        "res3": ["31","32","33","34"],
+        "correcta3":"33",
+
+        "pregunta4": "Leonor4",
+        "res4": ["41","42","43","44"],
+        "correcta4":"44"
+    }
+    ,
+    {
+        "id":7,
+        "title": "Ruth Fernández Cortada",
+
+        "pregunta1": "Ruth1",
+        "res1": ["11","12","13","14"],
+        "correcta1":"11",
+
+        "pregunta2": "Ruth2",
+        "res2": ["21","22","23","24"],
+        "correcta2":"22",
+
+        "pregunta3": "Ruth3",
+        "res3": ["31","32","33","34"],
+        "correcta3":"33",
+
+        "pregunta4": "Ruth4",
+        "res4": ["41","42","43","44"],
+        "correcta4":"44"
+    }
+    ,
+    {
+        "id":8,
+        "title": "Sylvia Rexach González",
+
+        "pregunta1": "Sylvia1",
+        "res1": ["11","12","13","14"],
+        "correcta1":"11",
+
+        "pregunta2": "Sylvia2",
+        "res2": ["21","22","23","24"],
+        "correcta2":"22",
+
+        "pregunta3": "Sylvia3",
+        "res3": ["31","32","33","34"],
+        "correcta3":"33",
+
+        "pregunta4": "Sylvia4",
+        "res4": ["41","42","43","44"],
+        "correcta4":"44"
+    }
+    ,
+    {
+        "id":9,
+        "title": "Luz Esther Benítez",
+
+        "pregunta1": "Luz1",
+        "res1": ["11","12","13","14"],
+        "correcta1":"11",
+
+        "pregunta2": "Luz2",
+        "res2": ["21","22","23","24"],
+        "correcta2":"22",
+
+        "pregunta3": "Luz3",
+        "res3": ["31","32","33","34"],
+        "correcta3":"33",
+
+        "pregunta4": "Luz4",
+        "res4": ["41","42","43","44"],
+        "correcta4":"44"
+    }
+]

src/pages/Biography.tsx

 import './Biography.css';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import RobertoClemente from '../assets/RobertoClemente.jpg';
-import { square } from 'ionicons/icons';
+import { clipboardOutline } from 'ionicons/icons';
 
 const Biography: React.FC = () => {
     const [bioinfo, setMessage] = useState<BioInfo>();
                         </IonItem>
                         <p>{bioinfo.Text1}</p>
                         <p>{bioinfo.Text2}</p>
+<<<<<<< HEAD
                         <p>{bioinfo.Text3}</p>
                         <p>{bioinfo.Text4}</p>
                         <p>{bioinfo.Text5}</p>
                         <p> </p>
                         <IonItem routerLink={`/Question`} detail={true}>
                             <IonIcon icon={square} />Tomar quiz
+=======
+                        <IonItem routerLink={`/Question/${bioinfo.id}`} detail={true}>
+                            <IonIcon icon={clipboardOutline} />Tomar quiz
+>>>>>>> 649fe9bb4c20a7971dad4ef1f02ae2169dc8b438
                         </IonItem>
                     </>
                 ) : (

src/pages/ListBiographies.tsx

   IonIcon
 } from '@ionic/react';
 import './ListBiographies.css';
-import { square } from 'ionicons/icons';
+import { clipboardOutline } from 'ionicons/icons';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import RobertoClemente from '../assets/RobertoClemente.jpg';
 import ListBio from '../data/Biograph.json';
                       {listbio.content}
                     </IonCardContent>
                   </IonItem>
-                  <IonItem routerLink={`/Question`} detail={true}>
-                    <IonIcon icon={square} />Tomar quiz
+                  <IonItem routerLink={`/Question/${listbio.id}`} detail={true}>
+                    <IonIcon icon={clipboardOutline} />Tomar quiz
                   </IonItem>
                 </IonCard>
               </>

src/pages/Questions.css

 
 .Footer-Color {
     --background: #d3d3d3;
+}
+
+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

     IonItem,
     IonLabel,
     IonList,
-    IonCheckbox,
     IonCard,
     IonCardContent,
     IonCardHeader,
     IonRow,
     IonCol,
     IonButtons,
-    IonBackButton
+    IonBackButton,
+    useIonViewWillEnter,
+    IonRadioGroup,
+    IonRadio,
+    IonIcon,
+    IonChip
 } from '@ionic/react';
-import React from 'react';
+import { useParams } from 'react-router';
+import React, { useState } from 'react';
 import './Questions.css';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import RobertoClemente from '../assets/RobertoClemente.jpg';
+import { QuizInfo, getQuiz } from '../data/QuizInfo';
+import { thumbsDown, thumbsUp } from 'ionicons/icons';
+
 
 const Questions: React.FC = () => {
+    // Estados para respuestas seleccionadas
+    const [qres1, setQRes1] = useState();
+    const [qres2, setQRes2] = useState();
+    const [qres3, setQRes3] = useState();
+    const [qres4, setQRes4] = useState();
+
+    // Arreglos para saber cual radio se selecciono en cada pregunta
+    const selected1:boolean[] = [false, false, false, false];
+    const selected2:boolean[] = [false, false, false, false];
+    const selected3:boolean[] = [false, false, false, false];
+    const selected4:boolean[] = [false, false, false, false];
+
+    // Estados para seleccionar iconos de las respuestas seleccionadas
+    const [icon11, setIcon11] = useState<any>();
+    const [icon12, setIcon12] = useState<any>();
+    const [icon13, setIcon13] = useState<any>();
+    const [icon14, setIcon14] = useState<any>();
+
+    const [icon21, setIcon21] = useState<any>();
+    const [icon22, setIcon22] = useState<any>();
+    const [icon23, setIcon23] = useState<any>();
+    const [icon24, setIcon24] = useState<any>();
+
+    const [icon31, setIcon31] = useState<any>();
+    const [icon32, setIcon32] = useState<any>();
+    const [icon33, setIcon33] = useState<any>();
+    const [icon34, setIcon34] = useState<any>();
+
+    const [icon41, setIcon41] = useState<any>();
+    const [icon42, setIcon42] = useState<any>();
+    const [icon43, setIcon43] = useState<any>();
+    const [icon44, setIcon44] = useState<any>();
+
+    // Estado para contar cuantas preguntas correctas se obtuvieron
+    const [countres, setCountRes] = useState<number>(0);
+
+    const [verResPresionado, setVerResPresionado] = useState<boolean>(false);
+
+    /* verificarRes()
+        Funcion se encarga de verificar si las respuestas seleccionadas
+        son correctas. Despliega ThumbsUp para seleccion correcta,
+        ThumbsDowmn para seleccion incorrecta.
+    */
+    const verificarRes = () => {
+        // borrar console logs para el release
+        console.log([qres1, qres2, qres3, qres4]);
+        console.log(countres);
+
+        // reset a los icons, count por si hubo seleccion anterior
+        let count = 0;
+        setCountRes(count);
+        setVerResPresionado(true); // buton verificar respuestas precionado
+
+        setIcon11(null);
+        setIcon12(null);
+        setIcon13(null);
+        setIcon14(null);
+
+        setIcon21(null);
+        setIcon22(null);
+        setIcon23(null);
+        setIcon24(null);
+
+        setIcon31(null);
+        setIcon32(null);
+        setIcon33(null);
+        setIcon34(null);
+
+        setIcon41(null);
+        setIcon42(null);
+        setIcon43(null);
+        setIcon44(null);
+
+
+        // loop para saber que radio escogio el usuario en cada pregunta
+        let num: number = 0;
+        let i: number;
+        for(i = num; i<4; i++){
+            if(qres1 === quizInfo?.res1[i]){
+                selected1[i] = true;
+            }
+
+            if(qres2 === quizInfo?.res2[i]){
+                selected2[i] = true;
+            }
+
+            if(qres3 === quizInfo?.res3[i]){
+                selected3[i] = true;
+            }
+
+            if(qres4 === quizInfo?.res4[i]){
+                selected4[i] = true;
+            }
+
+        }
+
+        // Para seleccionar si sale icono correccto o incorrecto en seleccion
+        // de radio.
+
+        // ======================= PREGUNTA 1 =========================================
+        // SI usuario seleccionio el primer radio en la pregunta 1
+        if(selected1[0] && quizInfo?.res1[0] === quizInfo?.correcta1){
+            setIcon11(<IonIcon icon={thumbsUp} />);
+            //setCountRes(countres + 1);
+            count++;
+        }
+        else if (selected1[0] && quizInfo?.res1[0] !== quizInfo?.correcta1){
+            setIcon11(<IonIcon icon={thumbsDown} />)
+        }
+
+        // SI usuario seleccionio el segundo radio en la pregunta 1
+        if(selected1[1] && quizInfo?.res1[1] === quizInfo?.correcta1){
+            setIcon12(<IonIcon icon={thumbsUp} />);
+            //setCountRes(countres + 1);
+            count++;
+        }
+        else if (selected1[1] && quizInfo?.res1[1] !== quizInfo?.correcta1){
+            setIcon12(<IonIcon icon={thumbsDown} />)
+        }
+
+        // SI usuario seleccionio el tercer radio en la pregunta 1
+        if(selected1[2] && quizInfo?.res1[2] === quizInfo?.correcta1){
+            setIcon13(<IonIcon icon={thumbsUp} />);
+            //setCountRes(countres + 1);
+            count++;
+        }
+        else if (selected1[2] && quizInfo?.res1[2] !== quizInfo?.correcta1){
+            setIcon13(<IonIcon icon={thumbsDown} />)
+        }
+
+        // SI usuario seleccionio el cuarto radio en la pregunta 1
+        if(selected1[3] && quizInfo?.res1[3] === quizInfo?.correcta1){
+            setIcon14(<IonIcon icon={thumbsUp} />);
+            //setCountRes(countres + 1);
+            count++;
+        }
+        else if (selected1[3] && quizInfo?.res1[3] !== quizInfo?.correcta1){
+            setIcon14(<IonIcon icon={thumbsDown} />)
+        }
+        // ======================= PREGUNTA 1 =========================================
+
+        // ======================= PREGUNTA 2 =========================================
+
+        // SI usuario seleccionio el primer radio en la pregunta 2
+        if(selected2[0] && quizInfo?.res2[0] === quizInfo?.correcta2){
+            setIcon21(<IonIcon icon={thumbsUp} />);
+            //setCountRes(countres + 1);
+            count++;
+        }
+        else if (selected2[0] && quizInfo?.res2[0] !== quizInfo?.correcta2){
+            setIcon21(<IonIcon icon={thumbsDown} />)
+        }
+
+        // SI usuario seleccionio el segundo radio en la pregunta 2
+        if(selected2[1] && quizInfo?.res2[1] === quizInfo?.correcta2){
+            setIcon22(<IonIcon icon={thumbsUp} />);
+            //setCountRes(countres + 1);
+            count++;
+        }
+        else if (selected2[1] && quizInfo?.res2[1] !== quizInfo?.correcta2){
+            setIcon22(<IonIcon icon={thumbsDown} />)
+        }
+
+        // SI usuario seleccionio el tercer radio en la pregunta 2
+        if(selected2[2] && quizInfo?.res2[2] === quizInfo?.correcta2){
+            setIcon23(<IonIcon icon={thumbsUp} />);
+            //setCountRes(countres + 1);
+            count++;
+        }
+        else if (selected2[2] && quizInfo?.res2[2] !== quizInfo?.correcta2){
+            setIcon23(<IonIcon icon={thumbsDown} />)
+        }
+
+        // SI usuario seleccionio el cuarto radio en la pregunta 2
+        if(selected2[3] && quizInfo?.res2[3] === quizInfo?.correcta2){
+            setIcon24(<IonIcon icon={thumbsUp} />);
+            //setCountRes(countres + 1);
+            count++;
+        }
+        else if (selected2[3] && quizInfo?.res2[3] !== quizInfo?.correcta2){
+            setIcon24(<IonIcon icon={thumbsDown} />)
+        }
+
+        // ======================= PREGUNTA 2 =========================================
+
+        // ======================= PREGUNTA 3 =========================================
+
+        // SI usuario seleccionio el primer radio en la pregunta 3
+        if(selected3[0] && quizInfo?.res3[0] === quizInfo?.correcta3){
+            setIcon31(<IonIcon icon={thumbsUp} />);
+            //setCountRes(countres + 1);
+            count++;
+        }
+        else if (selected3[0] && quizInfo?.res3[0] !== quizInfo?.correcta3){
+            setIcon31(<IonIcon icon={thumbsDown} />)
+        }
+
+        // SI usuario seleccionio el segundo radio en la pregunta 3
+        if(selected3[1] && quizInfo?.res3[1] === quizInfo?.correcta3){
+            setIcon32(<IonIcon icon={thumbsUp} />);
+            //setCountRes(countres + 1);
+            count++;
+        }
+        else if (selected3[1] && quizInfo?.res3[1] !== quizInfo?.correcta3){
+            setIcon32(<IonIcon icon={thumbsDown} />)
+        }
+
+        // SI usuario seleccionio el tercer radio en la pregunta 3
+        if(selected3[2] && quizInfo?.res3[2] === quizInfo?.correcta3){
+            setIcon33(<IonIcon icon={thumbsUp} />);
+            //setCountRes(countres + 1);
+            count++;
+        }
+        else if (selected3[2] && quizInfo?.res3[2] !== quizInfo?.correcta3){
+            setIcon33(<IonIcon icon={thumbsDown} />)
+        }
+
+        // SI usuario seleccionio el cuerto radio en la pregunta 3
+        if(selected3[3] && quizInfo?.res3[3] === quizInfo?.correcta3){
+            setIcon34(<IonIcon icon={thumbsUp} />);
+            //setCountRes(countres + 1);
+            count++;
+        }
+        else if (selected3[3] && quizInfo?.res3[3] !== quizInfo?.correcta3){
+            setIcon34(<IonIcon icon={thumbsDown} />)
+        }
+
+        // ======================= PREGUNTA 3 =========================================
+
+        // ======================= PREGUNTA 4 =========================================
+
+        // SI usuario seleccionio el primer radio en la pregunta 4
+        if(selected4[0] && quizInfo?.res4[0] === quizInfo?.correcta4){
+            setIcon41(<IonIcon icon={thumbsUp} />);
+            //setCountRes(countres + 1);
+            count++;
+        }
+        else if (selected4[0] && quizInfo?.res4[0] !== quizInfo?.correcta4){
+            setIcon41(<IonIcon icon={thumbsDown} />)
+        }
+
+        // SI usuario seleccionio el segundo radio en la pregunta 4
+        if(selected4[1] && quizInfo?.res4[1] === quizInfo?.correcta4){
+            setIcon42(<IonIcon icon={thumbsUp} />);
+            //setCountRes(countres + 1);
+            count++;
+        }
+        else if (selected4[1] && quizInfo?.res4[1] !== quizInfo?.correcta4){
+            setIcon42(<IonIcon icon={thumbsDown} />)
+        }
+
+        // SI usuario seleccionio el tercer radio en la pregunta 4
+        if(selected4[2] && quizInfo?.res4[2] === quizInfo?.correcta4){
+            setIcon43(<IonIcon icon={thumbsUp} />);
+            //setCountRes(countres + 1);
+            count++;
+        }
+        else if (selected4[2] && quizInfo?.res4[2] !== quizInfo?.correcta4){
+            setIcon43(<IonIcon icon={thumbsDown} />)
+        }
+
+        // SI usuario seleccionio el cuarto radio en la pregunta 4
+        if(selected4[3] && quizInfo?.res4[3] === quizInfo?.correcta4){
+            setIcon44(<IonIcon icon={thumbsUp} />);
+            //setCountRes(countres + 1);
+            count++;
+        }
+        else if (selected4[3] && quizInfo?.res4[3] !== quizInfo?.correcta4){
+            setIcon44(<IonIcon icon={thumbsDown} />)
+        }
+
+        // ======================= PREGUNTA 4 =========================================
+
+        // Para saber cueantas resspuestas acertó el usuario
+        setCountRes(count);
+    };
+    
+    // State para desplegar la info del quiz
+    const [quizInfo, setQuiz] = useState<QuizInfo>();
+    const params = useParams<{ id: string }>();
+
+    useIonViewWillEnter(() => {
+        const quiz = getQuiz(parseInt(params.id, 10));
+        setQuiz(quiz);
+    });
+    
     return (
         <IonPage>
             <IonHeader>
                     </IonGrid>
                 </IonToolbar>
             </IonHeader>
-
+            
             <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>
+
+                {
+                    quizInfo ?
+                    <>
+                        <h1>Quiz sobre la biografia de {quizInfo.title}</h1>
+
+                        <p>Marque una respuesta por pregunta</p>
+
+                        <IonCard>
+                            <IonCardHeader>
+                                <IonCardTitle>{quizInfo.pregunta1}</IonCardTitle>
+                                <IonCardSubtitle></IonCardSubtitle>
+                            </IonCardHeader>
+                            <IonCardContent>
+                                <IonList>
+                                    <IonRadioGroup value={qres1} onIonChange={(e) => setQRes1(e.detail.value)}>
+                                        <IonItem>
+                                            <IonLabel>{quizInfo.res1[0]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res1[0]}></IonRadio>
+                                            {icon11}
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizInfo.res1[1]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res1[1]}></IonRadio>
+                                            {icon12}
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizInfo.res1[2]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res1[2]}></IonRadio>
+                                            {icon13}
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizInfo.res1[3]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res1[3]}></IonRadio>
+                                            {icon14}
+                                        </IonItem>
+                                    </IonRadioGroup>
+                                </IonList>
+                            </IonCardContent>
+                        </IonCard>
+
+                        <IonCard>
+                            <IonCardHeader>
+                                <IonCardTitle>{quizInfo.pregunta2}</IonCardTitle>
+                                <IonCardSubtitle></IonCardSubtitle>
+                            </IonCardHeader>
+                            <IonCardContent>
+                                <IonList>
+                                    <IonRadioGroup value={qres2} onIonChange={(e) => setQRes2(e.detail.value)}>
+                                        <IonItem>
+                                            <IonLabel>{quizInfo.res2[0]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res2[0]}></IonRadio>
+                                            {icon21}
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizInfo.res2[1]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res2[1]}></IonRadio>
+                                            {icon22}
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizInfo.res2[2]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res2[2]}></IonRadio>
+                                            {icon23}
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizInfo.res2[3]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res2[3]}></IonRadio>
+                                            {icon24}
+                                        </IonItem>
+                                    </IonRadioGroup>
+                                </IonList>
+                            </IonCardContent>
+                        </IonCard>
+
+                        <IonCard>
+                            <IonCardHeader>
+                                <IonCardTitle>{quizInfo.pregunta3}</IonCardTitle>
+                                <IonCardSubtitle></IonCardSubtitle>
+                            </IonCardHeader>
+                            <IonCardContent>
+                                <IonList>
+                                    <IonRadioGroup value={qres3} onIonChange={(e) => setQRes3(e.detail.value)}>
+                                        <IonItem>
+                                            <IonLabel>{quizInfo.res3[0]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res3[0]}></IonRadio>
+                                            {icon31}
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizInfo.res3[1]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res3[1]}></IonRadio>
+                                            {icon32}
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizInfo.res3[2]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res3[2]}></IonRadio>
+                                            {icon33}
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizInfo.res3[3]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res3[3]}></IonRadio>
+                                            {icon34}
+                                        </IonItem>
+                                    </IonRadioGroup>
+                                </IonList>
+                            </IonCardContent>
+                        </IonCard>
+
+                        <IonCard>
+                            <IonCardHeader>
+                                <IonCardTitle>{quizInfo.pregunta4}</IonCardTitle>
+                                <IonCardSubtitle></IonCardSubtitle>
+                            </IonCardHeader>
+                            <IonCardContent>
+                                <IonList>
+                                    <IonRadioGroup value={qres4} onIonChange={(e) => setQRes4(e.detail.value)}>
+                                        <IonItem>
+                                            <IonLabel>{quizInfo.res4[0]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res4[0]}></IonRadio>
+                                            {icon41}
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizInfo.res4[1]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res4[1]}></IonRadio>
+                                            {icon42}
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizInfo.res4[2]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res4[2]}></IonRadio>
+                                            {icon43}
+                                        </IonItem>
+
+                                        <IonItem>
+                                            <IonLabel>{quizInfo.res4[3]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res4[3]}></IonRadio>
+                                            {icon44}
+                                        </IonItem>
+                                    </IonRadioGroup>
+                                </IonList>
+                            </IonCardContent>
+                        </IonCard>
+
+                        <IonItem lines="none">
+                            {verResPresionado ? (
+                                <>
+                                    <IonChip>{countres} / 4 respuestas correctas</IonChip>
+                                </>
+                            ) : null } 
+                        </IonItem>
+                        
+                    </> : <div>Quiz not found</div>
+                        
+                }
+
+
+                <IonButton onClick={verificarRes}>Verificar respuestas</IonButton>
 
             </IonContent>