package.json

   "devDependencies": {
     "@capacitor/cli": "4.5.0",
     "@ionic/lab": "3.2.15",
-    "react-scripts": "5.0.1"
+    "react-scripts": "^5.0.1"
   },
   "description": "An Ionic project"
 }

src/App.tsx

-import { IonNav, setupIonicReact } from '@ionic/react';
+import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
+import { Redirect, Route } from 'react-router-dom';
+import { IonReactRouter } from '@ionic/react-router';
 import HomePage from './pages/HomePage';
+import ListBiographies from './pages/ListBiographies';
+import Biography from './pages/Biography';
+import ListCapsules from './pages/ListCapsules';
+import Capsule from './pages/Capsule';
+import Questions from './pages/Questions';
+import AboutUs from './pages/AboutUs';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
 
 setupIonicReact();
 
+//<IonNav root={() => <HomePage />}></IonNav>
+
 const App: React.FC = () => (
-  <IonNav root={() => <HomePage />}></IonNav>
+  <IonApp>
+    <IonReactRouter>
+      <IonRouterOutlet>
+        <Route path="/" exact={true}>
+          <Redirect to="/home" />
+        </Route>
+        <Route path="/home" exact={true}>
+          <HomePage />
+        </Route>
+        <Route path="/ListBiographie">
+          <ListBiographies />
+        </Route>
+        <Route path="/Biographie/:id">
+          <Biography />
+        </Route>
+        <Route path="/ListCapsules">
+          <ListCapsules />
+        </Route>
+        <Route path="/Capsule">
+          <Capsule />
+        </Route>
+        <Route path="/Question/:id">
+          <Questions />
+        </Route>
+        <Route path="/About">
+          <AboutUs />
+        </Route>
+      </IonRouterOutlet>
+    </IonReactRouter>
+  </IonApp>
 );
 
 export default App;

src/components/QuizForm.tsx

-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/About.json

+[
+    {
+        "title": "Enciclopedia PR",
+        "title2": "Más sobre nosotros:",
+        "content": "Para más información sobre EnciclopediaPR, visite la página ",
+        "url": "https://enciclopediapr.org/"
+    }
+]

src/data/BioInfo.ts

+import ListBio from '../data/Biograph.json';
+
+export interface BioInfo {
+    id: number;
+    title: string;
+    content: string;
+    Text1: string;
+    Text2: string;
+    tags: string;
+    photo: string;
+}
+
+export const getMessages = () => ListBio;
+
+export const getMessage = (id: number) => ListBio.find(m => m.id === id);

src/data/Biograph.json

         "id": 1,
         "title": "Roberto Clemente",
         "content": "Pelotero, Filántropo Fue un afamado pelotero puertorriqueño que formó parte de las Grandes Ligas de Estados Unidos...",
+        "Text1": "Fue un afamado pelotero puertorriqueño que formó parte de las Grandes Ligas de Estados Unidos. El notable jardinero derecho y bateador fue el primer latinoamericano en formar parte del Salón de la Fama del Béisbol de Estados Unidos. También fue conocido por su labor filantrópica.",
+        "Text2": "Nació el 18 de agosto de 1934 en San Antón, Carolina. Sus padres fueron Melchor Clemente y Luisa Walker. Desde los ocho años mostró habilidades deportivas con su participación en programas de pequeñas ligas y atletismo infantil. Se destacó en pista y campo, deporte en el que ganó varias medallas, específicamente en tiro de jabalina y distancias cortas. Con apenas 14 años, ya formaba parte del equipo de softball de Sello Rojo, compañía procesadora de arroz. Más adelante, formó parte del equipo de pelota aficionado de Juncos. En 1952, con 18 años de edad, ingresó a la liga de beisbol profesional de Puerto Rico, cuando fue contratado por los Cangrejeros de Santurce. El tiempo que formó parte de este equipo fue crucial para su carrera, ya que pudo pulir sus destrezas deportivas.",
         "tags": "Deportista, Puertorriqueño",
         "photo": "require('../assets/RobertoClemente.jpg')"
     },
         "id": 2,
         "title": "Marian Villaronga Toro",
         "content": "Durante su incumbencia como secretario de Instrucción Pública se fundó la Editorial del Departamento, el servicio público de radio....",
+        "Text1": "Durante su incumbencia como secretario de Instrucción Pública se fundó la Editorial del Departamento, el servicio público de radio y televisión educativa, la Escuela Libre de Música y se adoptó el español como lengua oficial de la enseñanza en todos los niveles del sistema de educación pública en Puerto Rico.",
+        "Text2": "Mariano Villaronga Toro nació el 9 de noviembre de 1906 en el pueblo sureño de Ponce. Realizó sus estudios universitarios en la Universidad de Puerto Rico en Río Piedras, donde en 1929 completó un bachillerato en ciencias. Luego, se desempeñó como maestro en el sistema público del país y más adelante, como principal de escuela.",
         "tags": "Educador, Funcionario público, Puertorriqueño",
         "photo": "require('../assets/MarianoVillaronga.jpg')"
     },
     {
         "id": 3,
-        "title": "German Rieckhoff Sampoyo",
+        "title": "German Rieckhoff Sampayo",
         "content": "Germán Rieckehoff Sampayo fue un pilar del olimpismo y defensor de la soberanía deportiva puertorriqueña. Fue presidente del Comité Olímpico de Puerto Rico (COPUR)....",
+        "Text1": "Germán Rieckehoff Sampayo fue un pilar del olimpismo y defensor de la soberanía deportiva puertorriqueña. Fue presidente del Comité Olímpico de Puerto Rico (COPUR) de 1977 a 1989 y fue el primer puertorriqueño en ser miembro del Comité Olímpico Internacional. Durante su incumbencia, fundó el Albergue Olímpico ubicado en el pueblo de Salinas.",
+        "Text2": "Nació el 15 de febrero de 1915 en Vieques, hijo de la maestra Angelita Sampayo y del contador Germán Rieckehoff Morales, descendiente de emigrantes alemanes que fue electo a la Cámara de Representantes por el partido Alianza Puertorriqueña en el distrito electoral de Vieques, Fajardo y Culebra (1925-1928). Su educación primaria la realizó en su pueblo natal, en el Instituto Politécnico en San Germán y en la escuela Hawthorne en Río Piedras. Es para esta época que comienza su interés por los deportes; practicaba baloncesto, béisbol y formó parte de los niños escucha (boy scouts). Comenzó la escuela superior de la Universidad de Puerto Rico (UHS), en Río Piedras, pero abandonó los estudios en 1931.",
         "tags": "Líder deportivo, Abogado, Puertorriqueño",
         "photo": "require('../assets/DonGermán.jpg')"
     }

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",
-        "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"
+
+        "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": "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"
+        
+        "pregunta1": "¿En que año nació Marian Villaronga Toro1?",
+        "res1": ["11","12","13","14"],
+        "correcta1":"11",
+
+        "pregunta2": "¿En que año nació Marian Villaronga Toro2?",
+        "res2": ["21","22","23","24"],
+        "correcta2":"22",
+
+        "pregunta3": "¿En que año nació Marian Villaronga Toro3",
+        "res3": ["31","32","33","34"],
+        "correcta3":"33",
+
+        "pregunta4": "¿En que año nació Marian Villaronga Toro4",
+        "res4": ["41","42","43","44"],
+        "correcta4":"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"
+
+        "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"
     }
 ]

src/pages/AboutUs.css

 ion-col {
     text-align: center;
     align-items: center;
+}
+
+.Item-Center {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.Header-Color {
+    --background: #4de9d9;
+}
+
+.Footer-Color {
+    --background: #d3d3d3;
 }

src/pages/AboutUs.tsx

   IonPage,
   IonToolbar,
   IonFooter,
-  IonNavLink,
-  IonTabButton,
-  IonIcon,
   IonGrid,
   IonRow,
-  IonCol
+  IonCol,
+  IonButtons,
+  IonBackButton
 } from '@ionic/react';
-import { arrowBack } from 'ionicons/icons';
 import React from 'react';
 import './AboutUs.css';
-import HomePage from './HomePage';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
+import About from '../data/About.json'
 
 const AboutUs: React.FC = () => {
   return (
     <IonPage>
       <IonHeader>
-        <IonToolbar>
+        <IonToolbar className="Header-Color">
           <IonGrid fixed={true}>
             <IonRow>
               <IonCol></IonCol>
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen className="ion-padding">
-        <h1>Enciclopedia PR</h1>
-        <h2>Más sobre nosotros:</h2>
-        <p>Para más información sobre EnciclopediaPR, visite la página href='https://enciclopediapr.org/'</p>
+        {
+          About && About.map(infoAb => {
+            return (
+              <>
+                <h1>{infoAb.title}</h1>
+                <h2>{infoAb.title2}</h2>
+                <p>{infoAb.content} {infoAb.url}</p>
+              </>
+            )
+          })
+        }
       </IonContent>
       <IonFooter>
-        <IonToolbar>
-          <IonNavLink routerDirection="forward" component={() => <HomePage />}>
-            <IonTabButton tab="HomePage" href="/HomePage">
-              <IonIcon icon={arrowBack} />
-            </IonTabButton>
-          </IonNavLink>
+        <IonToolbar className="Footer-Color">
+          <div className='Item-Center'>
+            <IonButtons slot="start">
+              <IonBackButton defaultHref="/home"></IonBackButton>
+            </IonButtons>
+          </div>
         </IonToolbar>
       </IonFooter>
     </IonPage>

src/pages/Biography.css

 ion-col {
     text-align: center;
     align-items: center;
+}
+
+.Item-Center {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.Header-Color {
+    --background: #4de9d9;
+}
+
+.Footer-Color {
+    --background: #d3d3d3;
 }

src/pages/Biography.tsx

     IonTitle,
     IonToolbar,
     IonFooter,
-    IonNavLink,
-    IonButton,
-    IonTabButton,
-    IonIcon,
     IonImg,
     IonGrid,
     IonRow,
-    IonCol
+    IonCol,
+    IonButtons,
+    IonBackButton,
+    useIonViewWillEnter,
+    IonItem,
+    IonIcon
 } from '@ionic/react';
-import { arrowBack } from 'ionicons/icons';
-import React from 'react';
+import { useParams } from 'react-router';
+import React, { useState } from 'react';
+import { BioInfo, getMessage } from '../data/BioInfo';
 import './Biography.css';
-import ListBiographies from './ListBiographies';
-import Questions from './Questions';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import RobertoClemente from '../assets/RobertoClemente.jpg';
+import { clipboardOutline } from 'ionicons/icons';
 
 const Biography: React.FC = () => {
+    const [bioinfo, setMessage] = useState<BioInfo>();
+    const params = useParams<{ id: string }>();
+
+    useIonViewWillEnter(() => {
+        const msg = getMessage(parseInt(params.id, 10));
+        setMessage(msg);
+    });
+
     return (
         <IonPage>
             <IonHeader>
-                <IonToolbar>
+                <IonToolbar className="Header-Color">
                     <IonGrid fixed={true}>
                         <IonRow>
                             <IonCol></IonCol>
                 </IonToolbar>
             </IonHeader>
             <IonContent fullscreen className="ion-padding">
-                <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
-                <h1>Roberto Clemente</h1>
-
-                <p>Pelotero, Filántropo</p>
-                <p>Fue un afamado pelotero puertorriqueño que formó parte de las Grandes Ligas de Estados Unidos. El notable jardinero derecho y bateador fue el primer latinoamericano en formar parte del Salón de la Fama del Béisbol de Estados Unidos. También fue conocido por su labor filantrópica.</p>
-                <p>Nació el 18 de agosto de 1934 en San Antón, Carolina. Sus padres fueron Melchor Clemente y Luisa Walker. Desde los ocho años mostró habilidades deportivas con su participación en programas de pequeñas ligas y atletismo infantil. Se destacó en pista y campo, deporte en el que ganó varias medallas, específicamente en tiro de jabalina y distancias cortas. Con apenas 14 años, ya formaba parte del equipo de softball de Sello Rojo, compañía procesadora de arroz. Más adelante, formó parte del equipo de pelota aficionado de Juncos. En 1952, con 18 años de edad, ingresó a la liga de beisbol profesional de Puerto Rico, cuando fue contratado por los Cangrejeros de Santurce. El tiempo que formó parte de este equipo fue crucial para su carrera, ya que pudo pulir sus destrezas deportivas.</p>
+                {bioinfo ? (
+                    <>
+                        <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
+                        <h1>{bioinfo.title}</h1>
 
-                <IonNavLink routerDirection="forward" component={() => <Questions />}>
-                    <IonButton>Tomar quiz</IonButton>
-                </IonNavLink>
+                        <p>{bioinfo.tags}</p>
+                        <p>{bioinfo.Text1}</p>
+                        <p>{bioinfo.Text2}</p>
+                        <IonItem routerLink={`/Question/${bioinfo.id}`} detail={true}>
+                            <IonIcon icon={clipboardOutline} />Tomar quiz
+                        </IonItem>
+                    </>
+                ) : (
+                    <div>Message not found</div>
+                )}
             </IonContent>
 
             <IonFooter>
-                <IonToolbar>
-                    <IonNavLink routerDirection="forward" component={() => <ListBiographies />}>
-                        <IonTabButton tab="ListBiographies" href="/ListBiographies">
-                            <IonIcon icon={arrowBack} />
-                        </IonTabButton>
-                    </IonNavLink>
+                <IonToolbar className="Footer-Color">
+                    <div className='Item-Center'>
+                        <IonButtons slot="start">
+                            <IonBackButton defaultHref="/home"></IonBackButton>
+                        </IonButtons>
+                    </div>
                 </IonToolbar>
             </IonFooter>
         </IonPage>

src/pages/Capsule.css

 ion-col {
     text-align: center;
     align-items: center;
+}
+
+.Item-Center {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.Header-Color {
+    --background: #4de9d9;
+}
+
+.Footer-Color {
+    --background: #d3d3d3;
 }

src/pages/Capsule.tsx

     IonToolbar,
     IonFooter,
     IonNavLink,
-    IonTabButton,
-    IonIcon,
     IonImg,
     IonGrid,
     IonRow,
-    IonCol
+    IonCol,
+    IonButton,
+    IonButtons,
+    IonBackButton
 } from '@ionic/react';
-import { arrowBack } from 'ionicons/icons';
 import React from 'react';
 import './Capsule.css';
-import ListCapsules from './ListCapsules';
+import Biography from './Biography';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import Bomba from '../assets/BombaPuertorriquena.jpg';
+import RobertoClemente from '../assets/RobertoClemente.jpg';
 
 const Capsule: React.FC = () => {
     return (
         <IonPage>
             <IonHeader>
-                <IonToolbar>
+                <IonToolbar className="Header-Color">
                     <IonGrid fixed={true}>
                         <IonRow>
                             <IonCol></IonCol>
                 <p>Han existido distintas formas de danzar o bailar desde la historia muy antigua de la humanidad. En Puerto Rico el primer baile documentado por los cronistas de Indias es el llamado areito, con las variantes de escritura areyto y areíto. Era un baile coreado y musicalizado, dirigido por un guía. Esta manifestación de movimiento corporal, que Gonzalo Fernández de Oviedo llamó “bailar cantando”, fue común en los grupos indígenas de la región caribeña.</p>
                 <p>Se ejecutaba en hileras, con los participantes cogidos de las manos, de los brazos o, según Bartolomé de las Casas, “los brazos de los unos puestos sobre los hombros de los otros”. Según Pedro Mártir de Anglería, los participantes llevaban caracoles en los brazos y piernas, con los que producían “un ruido agradable”. Narraban una historia y el guía indicaba qué pasos y cantos se repetirían hasta que ésta culminara.</p>
                 <p>Aunque la llegada de los conquistadores españoles produjo una rápida desaparición de la población indígena y de cualquier expresión autóctona que las autoridades consideraran pagana, Fray Iñigo Abbad y Lasierra afirmaba en 1789 que “la diversión más apreciable para estos isleños son los bailes; los tienen sin más motivo que el de pasar el tiempo y rara vez faltan en una cosa u otra”.</p>
+
+                <h2>Information about important figures</h2>
+                <IonGrid fixed={true}>
+                    <IonRow>
+                        <IonImg style={{ height: 150, width: 300 }} src={RobertoClemente} alt='Logo'></IonImg>
+                        <IonNavLink routerDirection="forward" component={() => <Biography />} >
+                            <IonButton color="light">Roberto Clemente</IonButton>
+                        </IonNavLink>
+                    </IonRow>
+                </IonGrid>
+
             </IonContent>
             <IonFooter>
-                <IonToolbar>
-                    <IonNavLink routerDirection="forward" component={() => <ListCapsules />}>
-                        <IonTabButton tab="ListCapsules" href="/ListCapsules">
-                            <IonIcon icon={arrowBack} />
-                        </IonTabButton>
-                    </IonNavLink>
+                <IonToolbar className="Footer-Color">
+                    <div className='Item-Center'>
+                        <IonButtons slot="start">
+                            <IonBackButton defaultHref="/ListCapsules"></IonBackButton>
+                        </IonButtons>
+                    </div>
                 </IonToolbar>
             </IonFooter>
         </IonPage>

src/pages/HomePage.css

 ion-col {
     text-align: center;
     align-items: center;
+}
+
+.Header-Color {
+    --background: #4de9d9;
+}
+
+.Footer-Color {
+    --background: #d3d3d3;
+}
+
+.Item-Center {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }

src/pages/HomePage.tsx

 import {
   IonContent,
-  IonButton,
   IonHeader,
   IonPage,
   IonTitle,
   IonCardHeader,
   IonCardSubtitle,
   IonCardTitle,
-  IonNavLink,
   IonFooter,
   IonTabButton,
   IonIcon,
   IonImg,
   IonCol,
   IonGrid,
-  IonRow
+  IonRow,
+  IonItem
 } from '@ionic/react';
 import { square } from 'ionicons/icons';
 import './HomePage.css';
-import ListBiographies from './ListBiographies';
-import ListCapsules from './ListCapsules';
-import AboutUs from './AboutUs';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 
 const HomePage: React.FC = () => {
   return (
     <IonPage>
       <IonHeader>
-        <IonToolbar>
+        <IonToolbar className="Header-Color">
           <IonGrid fixed={true}>
             <IonRow>
               <IonCol></IonCol>
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
-        <IonCard>
-          <IonCardHeader>
-            <IonCardTitle>Biografías</IonCardTitle>
-            <IonCardSubtitle>Lista de todas las biografías</IonCardSubtitle>
-          </IonCardHeader>
-          <IonNavLink routerDirection="forward" component={() => <ListBiographies />}>
-            <IonButton size="default" expand="block" shape="round">
-              Buscar
-            </IonButton>
-          </IonNavLink>
-        </IonCard>
-        <IonCard>
-          <IonCardHeader>
-            <IonCardTitle>Cápsulas</IonCardTitle>
-            <IonCardSubtitle>Lista de todas las cápsulas</IonCardSubtitle>
-          </IonCardHeader>
-          <IonNavLink routerDirection="forward" component={() => <ListCapsules />}>
-            <IonButton size="default" expand="block" shape="round">
-              Buscar
-            </IonButton>
-          </IonNavLink>
-        </IonCard>
+        <div className='Item-Center'>
+          <IonItem routerLink={`/ListBiographie`} detail={true}>
+            <IonCard>
+              <IonCardHeader>
+                <IonCardTitle>Biografías</IonCardTitle>
+                <IonCardSubtitle>Lista de todas las biografías</IonCardSubtitle>
+              </IonCardHeader>
+            </IonCard>
+          </IonItem>
+        </div>
+        <div className='Item-Center'>
+          <IonItem routerLink={`/ListCapsules`} detail={true}>
+            <IonCard>
+              <IonCardHeader>
+                <IonCardTitle>Cápsulas</IonCardTitle>
+                <IonCardSubtitle>Lista de todas las cápsulas</IonCardSubtitle>
+              </IonCardHeader>
+            </IonCard>
+          </IonItem>
+        </div>
       </IonContent>
       <IonFooter>
-        <IonToolbar>
-          <IonNavLink routerDirection="forward" component={() => <AboutUs />}>
-            <IonTabButton tab="AboutUs" href="/AboutUs">
-              <IonIcon icon={square} />
-              <IonLabel>Sobre nosotros</IonLabel>
-            </IonTabButton>
-          </IonNavLink>
+        <IonToolbar className="Footer-Color">
+          <div className='Item-Center'>
+            <IonItem routerLink={`/About`}>
+              <IonTabButton tab="AboutUs" href="/AboutUs">
+                <IonIcon icon={square} />
+                <IonLabel>Sobre nosotros</IonLabel>
+              </IonTabButton>
+            </IonItem>
+          </div>
         </IonToolbar>
       </IonFooter>
     </IonPage>

src/pages/ListBiographies.css

 ion-col {
     text-align: center;
     align-items: center;
+}
+
+.Item-Center {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.Header-Color {
+    --background: #4de9d9;
+}
+
+.Footer-Color {
+    --background: #d3d3d3;
 }

src/pages/ListBiographies.tsx

   IonPage,
   IonTitle,
   IonToolbar,
-  IonButton,
-  IonNavLink,
   IonFooter,
-  IonTabButton,
-  IonIcon,
   IonGrid,
   IonRow,
-  IonCol
+  IonCol,
+  IonButtons,
+  IonBackButton,
+  IonItem,
+  IonIcon
 } from '@ionic/react';
-import { arrowBack } from 'ionicons/icons';
 import './ListBiographies.css';
-import Biography from './Biography';
-import Questions from './Questions';
-import HomePage from './HomePage';
+import { clipboardOutline } from 'ionicons/icons';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import RobertoClemente from '../assets/RobertoClemente.jpg';
 import ListBio from '../data/Biograph.json';
   return (
     <IonPage>
       <IonHeader>
-        <IonToolbar>
+        <IonToolbar className="Header-Color">
           <IonGrid fixed={true}>
             <IonRow>
               <IonCol></IonCol>
       </IonHeader>
       <IonContent fullscreen>
         <IonSearchbar></IonSearchbar>
-
         {
           ListBio && ListBio.map(listbio => {
             return (
               <>
                 <IonCard>
-                  <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
-                  <IonCardHeader>
-                    <IonCardTitle>{listbio.title}</IonCardTitle>
-                    <IonCardSubtitle>{listbio.tags}</IonCardSubtitle>
-                  </IonCardHeader><IonCardContent>
-                    {listbio.content}
-                  </IonCardContent>
-                  <IonNavLink routerDirection="forward" component={() => <Biography />}>
-                    <IonButton>Go to</IonButton>
-                  </IonNavLink>
-
-                  <IonNavLink routerDirection="forward" component={() => <Questions />}>
-                    <IonButton>Tomar quiz</IonButton>
-                  </IonNavLink>
-
+                  <IonItem routerLink={`/Biographie/${listbio.id}`}>
+                    <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
+                    <IonCardHeader>
+                      <IonCardTitle>{listbio.title}</IonCardTitle>
+                      <IonCardSubtitle>{listbio.tags}</IonCardSubtitle>
+                    </IonCardHeader><IonCardContent>
+                      {listbio.content}
+                    </IonCardContent>
+                  </IonItem>
+                  <IonItem routerLink={`/Question/${listbio.id}`} detail={true}>
+                    <IonIcon icon={clipboardOutline} />Tomar quiz
+                  </IonItem>
                 </IonCard>
               </>
             )
           })
         }
-
-
       </IonContent>
       <IonFooter>
-        <IonToolbar>
-          <IonNavLink routerDirection="forward" component={() => <HomePage />}>
-            <IonTabButton tab="HomePage" href="/HomePage">
-              <IonIcon icon={arrowBack} />
-            </IonTabButton>
-          </IonNavLink>
+        <IonToolbar className="Footer-Color">
+          <div className='Item-Center'>
+            <IonButtons slot="start">
+              <IonBackButton defaultHref="/home"></IonBackButton>
+            </IonButtons>
+          </div>
         </IonToolbar>
       </IonFooter>
     </IonPage>

src/pages/ListCapsules.css

 ion-col {
     text-align: center;
     align-items: center;
+}
+
+.Item-Center {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.Header-Color {
+    --background: #4de9d9;
+}
+
+.Footer-Color {
+    --background: #d3d3d3;
 }

src/pages/ListCapsules.tsx

   IonPage,
   IonTitle,
   IonToolbar,
-  IonButton,
-  IonNavLink,
   IonFooter,
-  IonTabButton,
-  IonIcon,
   IonGrid,
   IonRow,
-  IonCol
+  IonCol,
+  IonButtons,
+  IonBackButton
 } from '@ionic/react';
-import { arrowBack } from 'ionicons/icons';
 import './ListCapsules.css';
-import HomePage from './HomePage';
-import Capsule from './Capsule'
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 
 const ListCapsules: React.FC = () => {
   return (
     <IonPage>
       <IonHeader>
-        <IonToolbar>
+        <IonToolbar className="Header-Color">
           <IonGrid fixed={true}>
             <IonRow>
               <IonCol></IonCol>
       <IonContent fullscreen>
         <IonSearchbar></IonSearchbar>
         <IonList inset={true}>
-          <IonItem>
+          <IonItem routerLink={`/Capsule`} detail={true}>
             <IonLabel>Breve Historia del baile en Puerto Rico</IonLabel>
-            <IonNavLink routerDirection="forward" component={() => <Capsule />}>
-              <IonButton>Visitar</IonButton>
-            </IonNavLink>
           </IonItem>
           <IonItem>
             <IonLabel>Cápsula#2</IonLabel>
         </IonList>
       </IonContent>
       <IonFooter>
-        <IonToolbar>
-          <IonNavLink routerDirection="forward" component={() => <HomePage />}>
-            <IonTabButton tab="HomePage" href="/HomePage">
-              <IonIcon icon={arrowBack} />
-            </IonTabButton>
-          </IonNavLink>
+        <IonToolbar className="Footer-Color">
+          <div className='Item-Center'>
+            <IonButtons slot="start">
+              <IonBackButton defaultHref="/home"></IonBackButton>
+            </IonButtons>
+          </div>
         </IonToolbar>
       </IonFooter>
     </IonPage>

src/pages/Questions.css

     align-items: center;
 }
 
+.Item-Center {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.Header-Color {
+    --background: #4de9d9;
+}
+
+.Footer-Color {
+    --background: #d3d3d3;
+}
+
 ion-radio {
     --border-radius: 4px;
     --inner-border-radius: 4px;

src/pages/Questions.tsx

     IonTitle,
     IonToolbar,
     IonFooter,
-    IonNavLink,
-    IonTabButton,
-    IonIcon,
     IonImg,
     IonItem,
     IonLabel,
     IonGrid,
     IonRow,
     IonCol,
+    IonButtons,
+    IonBackButton,
+    useIonViewWillEnter,
     IonRadioGroup,
-    IonRadio
+    IonRadio,
+    IonIcon,
+    IonChip
 } from '@ionic/react';
-import { arrowBack } from 'ionicons/icons';
-import React, {useState} from 'react';
-//import { Form } from 'react-bootstrap';
+import { useParams } from 'react-router';
+import React, { useState } from 'react';
 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';
+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 [res1, setRes1] = useState();
-    const [res2, setRes2] = useState();
-    const [res3, setRes3] = useState();
-    const [res4, setRes4] = useState();
+    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 = () => {
-        return console.log([res1, res2, res3, res4])
+        // borrar console logs para el release
+        console.log([qres1, qres2, qres3, qres4]);
+        console.log(countres);
+
+        // reset a los icons, count y acertadas por si hubo seleccion anterior
+        let count = 0;
+        setCountRes(count);
+        setVerResPresionado(true);
+
+        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>
-                <IonToolbar>
+                <IonToolbar className="Header-Color">
                     <IonGrid fixed={true}>
                         <IonRow>
                             <IonCol></IonCol>
                     </IonGrid>
                 </IonToolbar>
             </IonHeader>
-
+            
             <IonContent fullscreen className="ion-padding">
                 <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
 
                 {
-                    Quizzes && Quizzes.map(quizzes => {
-                        return (
-                        quizzes.id == 1 ? <>
-                        <h1>Quiz sobre la biografia de {quizzes.title}</h1>
+                    quizInfo ?
+                    <>
+                        <h1>Quiz sobre la biografia de {quizInfo.title}</h1>
 
                         <p>Marque una respuesta por pregunta</p>
 
                         <IonCard>
                             <IonCardHeader>
-                                <IonCardTitle>{quizzes['pregunta-1']}</IonCardTitle>
+                                <IonCardTitle>{quizInfo.pregunta1}</IonCardTitle>
                                 <IonCardSubtitle></IonCardSubtitle>
                             </IonCardHeader>
                             <IonCardContent>
                                 <IonList>
-                                    <IonRadioGroup value={res1} onIonChange={(e) => setRes1(e.detail.value)}>
+                                    <IonRadioGroup value={qres1} onIonChange={(e) => setQRes1(e.detail.value)}>
                                         <IonItem>
-                                            <IonLabel>{quizzes['res-1-1']}</IonLabel>
-                                            <IonRadio slot="end" value={quizzes['res-1-1']}></IonRadio>
+                                            <IonLabel>{quizInfo.res1[0]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res1[0]}></IonRadio>
+                                            {icon11}
                                         </IonItem>
 
                                         <IonItem>
-                                            <IonLabel>{quizzes['res-1-2']}</IonLabel>
-                                            <IonRadio slot="end" value={quizzes['res-1-2']}></IonRadio>
+                                            <IonLabel>{quizInfo.res1[1]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res1[1]}></IonRadio>
+                                            {icon12}
                                         </IonItem>
 
                                         <IonItem>
-                                            <IonLabel>{quizzes['res-1-3']}</IonLabel>
-                                            <IonRadio slot="end" value={quizzes['res-1-3']}></IonRadio>
+                                            <IonLabel>{quizInfo.res1[2]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res1[2]}></IonRadio>
+                                            {icon13}
                                         </IonItem>
 
                                         <IonItem>
-                                            <IonLabel>{quizzes['res-1-4']}</IonLabel>
-                                            <IonRadio slot="end" value={quizzes['res-1-4']}></IonRadio>
+                                            <IonLabel>{quizInfo.res1[3]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res1[3]}></IonRadio>
+                                            {icon14}
                                         </IonItem>
                                     </IonRadioGroup>
                                 </IonList>
 
                         <IonCard>
                             <IonCardHeader>
-                                <IonCardTitle>{quizzes['pregunta-2']}</IonCardTitle>
+                                <IonCardTitle>{quizInfo.pregunta2}</IonCardTitle>
                                 <IonCardSubtitle></IonCardSubtitle>
                             </IonCardHeader>
                             <IonCardContent>
                                 <IonList>
-                                    <IonRadioGroup value={res2} onIonChange={(e) => setRes2(e.detail.value)}>
+                                    <IonRadioGroup value={qres2} onIonChange={(e) => setQRes2(e.detail.value)}>
                                         <IonItem>
-                                            <IonLabel>{quizzes['res-2-1']}</IonLabel>
-                                            <IonRadio slot="end" value={quizzes['res-2-1']}></IonRadio>
+                                            <IonLabel>{quizInfo.res2[0]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res2[0]}></IonRadio>
+                                            {icon21}
                                         </IonItem>
 
                                         <IonItem>
-                                            <IonLabel>{quizzes['res-2-2']}</IonLabel>
-                                            <IonRadio slot="end" value={quizzes['res-2-2']}></IonRadio>
+                                            <IonLabel>{quizInfo.res2[1]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res2[1]}></IonRadio>
+                                            {icon22}
                                         </IonItem>
 
                                         <IonItem>
-                                            <IonLabel>{quizzes['res-2-3']}</IonLabel>
-                                            <IonRadio slot="end" value={quizzes['res-2-3']}></IonRadio>
+                                            <IonLabel>{quizInfo.res2[2]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res2[2]}></IonRadio>
+                                            {icon23}
                                         </IonItem>
 
                                         <IonItem>
-                                            <IonLabel>{quizzes['res-2-4']}</IonLabel>
-                                            <IonRadio slot="end" value={quizzes['res-2-4']}></IonRadio>
+                                            <IonLabel>{quizInfo.res2[3]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res2[3]}></IonRadio>
+                                            {icon24}
                                         </IonItem>
                                     </IonRadioGroup>
                                 </IonList>
 
                         <IonCard>
                             <IonCardHeader>
-                                <IonCardTitle>{quizzes['pregunta-3']}</IonCardTitle>
+                                <IonCardTitle>{quizInfo.pregunta3}</IonCardTitle>
                                 <IonCardSubtitle></IonCardSubtitle>
                             </IonCardHeader>
                             <IonCardContent>
                                 <IonList>
-                                    <IonRadioGroup value={res3} onIonChange={(e) => setRes3(e.detail.value)}>
+                                    <IonRadioGroup value={qres3} onIonChange={(e) => setQRes3(e.detail.value)}>
                                         <IonItem>
-                                            <IonLabel>{quizzes['res-3-1']}</IonLabel>
-                                            <IonRadio slot="end" value={quizzes['res-3-1']}></IonRadio>
+                                            <IonLabel>{quizInfo.res3[0]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res3[0]}></IonRadio>
+                                            {icon31}
                                         </IonItem>
 
                                         <IonItem>
-                                            <IonLabel>{quizzes['res-3-2']}</IonLabel>
-                                            <IonRadio slot="end" value={quizzes['res-3-2']}></IonRadio>
+                                            <IonLabel>{quizInfo.res3[1]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res3[1]}></IonRadio>
+                                            {icon32}
                                         </IonItem>
 
                                         <IonItem>
-                                            <IonLabel>{quizzes['res-3-3']}</IonLabel>
-                                            <IonRadio slot="end" value={quizzes['res-3-3']}></IonRadio>
+                                            <IonLabel>{quizInfo.res3[2]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res3[2]}></IonRadio>
+                                            {icon33}
                                         </IonItem>
 
                                         <IonItem>
-                                            <IonLabel>{quizzes['res-3-4']}</IonLabel>
-                                            <IonRadio slot="end" value={quizzes['res-3-4']}></IonRadio>
+                                            <IonLabel>{quizInfo.res3[3]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res3[3]}></IonRadio>
+                                            {icon34}
                                         </IonItem>
                                     </IonRadioGroup>
                                 </IonList>
 
                         <IonCard>
                             <IonCardHeader>
-                                <IonCardTitle>{quizzes['pregunta-4']}</IonCardTitle>
+                                <IonCardTitle>{quizInfo.pregunta4}</IonCardTitle>
                                 <IonCardSubtitle></IonCardSubtitle>
                             </IonCardHeader>
                             <IonCardContent>
                                 <IonList>
-                                    <IonRadioGroup value={res4} onIonChange={(e) => setRes4(e.detail.value)}>
+                                    <IonRadioGroup value={qres4} onIonChange={(e) => setQRes4(e.detail.value)}>
                                         <IonItem>
-                                            <IonLabel>{quizzes['res-4-1']}</IonLabel>
-                                            <IonRadio slot="end" value={quizzes['res-4-1']}></IonRadio>
+                                            <IonLabel>{quizInfo.res4[0]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res4[0]}></IonRadio>
+                                            {icon41}
                                         </IonItem>
 
                                         <IonItem>
-                                            <IonLabel>{quizzes['res-4-2']}</IonLabel>
-                                            <IonRadio slot="end" value={quizzes['res-4-2']}></IonRadio>
+                                            <IonLabel>{quizInfo.res4[1]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res4[1]}></IonRadio>
+                                            {icon42}
                                         </IonItem>
 
                                         <IonItem>
-                                            <IonLabel>{quizzes['res-4-3']}</IonLabel>
-                                            <IonRadio slot="end" value={quizzes['res-4-3']}></IonRadio>
+                                            <IonLabel>{quizInfo.res4[2]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res4[2]}></IonRadio>
+                                            {icon43}
                                         </IonItem>
 
                                         <IonItem>
-                                            <IonLabel>{quizzes['res-4-4']}</IonLabel>
-                                            <IonRadio slot="end" value={quizzes['res-4-4']}></IonRadio>
+                                            <IonLabel>{quizInfo.res4[3]}</IonLabel>
+                                            <IonRadio slot="end" value={quizInfo.res4[3]}></IonRadio>
+                                            {icon44}
                                         </IonItem>
                                     </IonRadioGroup>
                                 </IonList>
                             </IonCardContent>
                         </IonCard>
-                    </> : null
-                        )
-                    })
+
+                        <IonItem lines="none">
+                            {verResPresionado ? (
+                                <>
+                                    <IonChip>{countres} / 4 respuestas correctas</IonChip>
+                                </>
+                            ) : null } 
+                        </IonItem>
+                        
+                    </> : <div>Quiz not found</div>
+                        
                 }
 
 
             </IonContent>
 
             <IonFooter>
-                <IonToolbar>
-                    <IonNavLink routerDirection="forward" component={() => <Biography />}>
-                        <IonTabButton tab="Biography" href="/Biography">
-                            <IonIcon icon={arrowBack} />
-                        </IonTabButton>
-                    </IonNavLink>
+                <IonToolbar className="Footer-Color">
+                    <div className='Item-Center'>
+                        <IonButtons slot="start">
+                            <IonBackButton defaultHref="/ListBiographie"></IonBackButton>
+                        </IonButtons>
+                    </div>
                 </IonToolbar>
             </IonFooter>
         </IonPage>