9 Revīzijas

Autors SHA1 Ziņojums Datums
  ryanbarreto1 e6552393de Segundo commit: Quiz funcional, despliega si aserto o no la respuesta y total de asertadas 2 gadus atpakaļ
  ryanbarreto1 00f67bfa7e Merge branch 'master' into UserStory6 2 gadus atpakaļ
  ryanbarreto1 986bf80219 US6 Commit 2: Cambios menores 2 gadus atpakaļ
  Alex Ortiz bad42eb9e6 Modified List Design 2 gadus atpakaļ
  Alex Ortiz b1ef5c96f3 Color Added 2 gadus atpakaļ
  Alex Ortiz b81be4905f Router fully functional 2 gadus atpakaļ
  Alex Ortiz 936d7e9d98 Router half functional 2 gadus atpakaļ
  Alex Ortiz 407f8e9f0e Modificacion Incompleta 2 gadus atpakaļ
  Alex Ortiz 25393999fc Last modification 2 gadus atpakaļ

+ 1179
- 576
package-lock.json
Failā izmaiņas netiks attēlotas, jo tās ir par lielu
Parādīt failu


+ 1
- 1
package.json Parādīt failu

@@ -69,7 +69,7 @@
69 69
   "devDependencies": {
70 70
     "@capacitor/cli": "4.5.0",
71 71
     "@ionic/lab": "3.2.15",
72
-    "react-scripts": "5.0.1"
72
+    "react-scripts": "^5.0.1"
73 73
   },
74 74
   "description": "An Ionic project"
75 75
 }

+ 41
- 2
src/App.tsx Parādīt failu

@@ -1,5 +1,13 @@
1
-import { IonNav, setupIonicReact } from '@ionic/react';
1
+import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
2
+import { Redirect, Route } from 'react-router-dom';
3
+import { IonReactRouter } from '@ionic/react-router';
2 4
 import HomePage from './pages/HomePage';
5
+import ListBiographies from './pages/ListBiographies';
6
+import Biography from './pages/Biography';
7
+import ListCapsules from './pages/ListCapsules';
8
+import Capsule from './pages/Capsule';
9
+import Questions from './pages/Questions';
10
+import AboutUs from './pages/AboutUs';
3 11
 
4 12
 /* Core CSS required for Ionic components to work properly */
5 13
 import '@ionic/react/css/core.css';
@@ -22,8 +30,39 @@ import './theme/variables.css';
22 30
 
23 31
 setupIonicReact();
24 32
 
33
+//<IonNav root={() => <HomePage />}></IonNav>
34
+
25 35
 const App: React.FC = () => (
26
-  <IonNav root={() => <HomePage />}></IonNav>
36
+  <IonApp>
37
+    <IonReactRouter>
38
+      <IonRouterOutlet>
39
+        <Route path="/" exact={true}>
40
+          <Redirect to="/home" />
41
+        </Route>
42
+        <Route path="/home" exact={true}>
43
+          <HomePage />
44
+        </Route>
45
+        <Route path="/ListBiographie">
46
+          <ListBiographies />
47
+        </Route>
48
+        <Route path="/Biographie/:id">
49
+          <Biography />
50
+        </Route>
51
+        <Route path="/ListCapsules">
52
+          <ListCapsules />
53
+        </Route>
54
+        <Route path="/Capsule">
55
+          <Capsule />
56
+        </Route>
57
+        <Route path="/Question/:id">
58
+          <Questions />
59
+        </Route>
60
+        <Route path="/About">
61
+          <AboutUs />
62
+        </Route>
63
+      </IonRouterOutlet>
64
+    </IonReactRouter>
65
+  </IonApp>
27 66
 );
28 67
 
29 68
 export default App;

+ 0
- 15
src/components/QuizForm.tsx Parādīt failu

@@ -1,15 +0,0 @@
1
-import React, {useState} from 'react';
2
-import { IonRadioGroup, IonRadio, IonLabel } from '@ionic/react';
3
-
4
-const GenderForm: React.FC = () => {
5
-  const [gender, setGender] = useState('');
6
-
7
-  const handleSubmit = (event: React.FormEvent) => {
8
-    event.preventDefault();
9
-    // Perform form submission here
10
-  };
11
-
12
-  return (
13
-    null
14
-  );
15
-};

+ 8
- 0
src/data/About.json Parādīt failu

@@ -0,0 +1,8 @@
1
+[
2
+    {
3
+        "title": "Enciclopedia PR",
4
+        "title2": "Más sobre nosotros:",
5
+        "content": "Para más información sobre EnciclopediaPR, visite la página ",
6
+        "url": "https://enciclopediapr.org/"
7
+    }
8
+]

+ 15
- 0
src/data/BioInfo.ts Parādīt failu

@@ -0,0 +1,15 @@
1
+import ListBio from '../data/Biograph.json';
2
+
3
+export interface BioInfo {
4
+    id: number;
5
+    title: string;
6
+    content: string;
7
+    Text1: string;
8
+    Text2: string;
9
+    tags: string;
10
+    photo: string;
11
+}
12
+
13
+export const getMessages = () => ListBio;
14
+
15
+export const getMessage = (id: number) => ListBio.find(m => m.id === id);

+ 7
- 1
src/data/Biograph.json Parādīt failu

@@ -3,6 +3,8 @@
3 3
         "id": 1,
4 4
         "title": "Roberto Clemente",
5 5
         "content": "Pelotero, Filántropo Fue un afamado pelotero puertorriqueño que formó parte de las Grandes Ligas de Estados Unidos...",
6
+        "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.",
7
+        "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.",
6 8
         "tags": "Deportista, Puertorriqueño",
7 9
         "photo": "require('../assets/RobertoClemente.jpg')"
8 10
     },
@@ -10,13 +12,17 @@
10 12
         "id": 2,
11 13
         "title": "Marian Villaronga Toro",
12 14
         "content": "Durante su incumbencia como secretario de Instrucción Pública se fundó la Editorial del Departamento, el servicio público de radio....",
15
+        "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.",
16
+        "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.",
13 17
         "tags": "Educador, Funcionario público, Puertorriqueño",
14 18
         "photo": "require('../assets/MarianoVillaronga.jpg')"
15 19
     },
16 20
     {
17 21
         "id": 3,
18
-        "title": "German Rieckhoff Sampoyo",
22
+        "title": "German Rieckhoff Sampayo",
19 23
         "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)....",
24
+        "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.",
25
+        "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.",
20 26
         "tags": "Líder deportivo, Abogado, Puertorriqueño",
21 27
         "photo": "require('../assets/DonGermán.jpg')"
22 28
     }

+ 27
- 0
src/data/QuizInfo.ts Parādīt failu

@@ -0,0 +1,27 @@
1
+import Quizzes from '../data/Quizzes.json';
2
+
3
+export interface QuizInfo {
4
+    id: number;
5
+    title: string;
6
+
7
+    pregunta1: string;
8
+    res1: string[];
9
+    correcta1: string;
10
+
11
+    pregunta2: string;
12
+    res2: string[];
13
+    correcta2: string;
14
+
15
+    pregunta3: string;
16
+    res3: string[];
17
+    correcta3: string;
18
+
19
+    pregunta4: string;
20
+    res4: string[];
21
+    correcta4: string;
22
+
23
+}
24
+
25
+export const getQuizzes = () => Quizzes;
26
+
27
+export const getQuiz = (id: number) => Quizzes.find(m => m.id === id);

+ 50
- 60
src/data/Quizzes.json Parādīt failu

@@ -2,74 +2,64 @@
2 2
     {
3 3
         "id": 1,
4 4
         "title": "Roberto Clemente",
5
-        "pregunta-1": "¿En que año nació Roberto Clemente?",
6
-        "res-1-1":"1934",
7
-        "res-1-2":"1950",
8
-        "res-1-3":"1943",
9
-        "res-1-4":"2022",
10
-        "pregunta-2": "¿En que pueblo se crió?",
11
-        "res-2-1":"Caguas",
12
-        "res-2-2":"Cabo Rojo",
13
-        "res-2-3":"Luquillo",
14
-        "res-2-4":"Carolina",
15
-        "pregunta-3": "¿Para qué equipo de la liga de beisbol profesional de Puerto Rico jugó?",
16
-        "res-3-1":"Bacalaos de Fajardo",
17
-        "res-3-2":"Alcapurrias de Loiza",
18
-        "res-3-3":"Cangrejeros de Santurce",
19
-        "res-3-4":"Brujos de Guayama",
20
-        "pregunta-4": "¿Para que equipo de la MLB jugó?",
21
-        "res-4-1":"New York Yankees",
22
-        "res-4-2":"Houston Astros",
23
-        "res-4-3":"Chicago Cubs",
24
-        "res-4-4":"Pittsburgh Pirates"
5
+
6
+        "pregunta1": "¿En que año nació Roberto Clemente?",
7
+        "res1":["1934","1950","1943","2022"],
8
+        "correcta1":"1934",
9
+
10
+        "pregunta2": "¿En que pueblo se crió?",
11
+        "res2": ["Caguas","Cabo Rojo","Luquillo","Carolina"],
12
+        "correcta2":"Carolina",
13
+
14
+        "pregunta3": "¿Para qué equipo de la liga de beisbol profesional de Puerto Rico jugó?",
15
+        "res3": ["Bacalaos de Fajardo","Alcapurrias de Loiza","Cangrejeros de Santurce","Brujos de Guayama"],
16
+        "correcta3":"Cangrejeros de Santurce",
17
+
18
+        "pregunta4": "¿Para que equipo de la MLB jugó?",
19
+        "res4": ["New York Yankees","Houston Astros","Chicago Cubs","Pittsburgh Pirates"],
20
+        "correcta4":"Pittsburgh Pirates"
21
+
25 22
     },
26 23
     {
27 24
         "id":2,
28 25
         "title": "Marian Villaronga Toro",
29
-        "pregunta-1": "¿En que año nació Marian Villaronga Toro1?",
30
-        "res-1-1":"11",
31
-        "res-1-2":"12",
32
-        "res-1-3":"13",
33
-        "res-1-4":"14",
34
-        "pregunta-2": "¿En que año nació Marian Villaronga Toro2?",
35
-        "res-2-1":"21",
36
-        "res-2-2":"22",
37
-        "res-2-3":"23",
38
-        "res-2-4":"24",
39
-        "pregunta-3": "¿En que año nació Marian Villaronga Toro3",
40
-        "res-3-1":"31",
41
-        "res-3-2":"32",
42
-        "res-3-3":"33",
43
-        "res-3-4":"34",
44
-        "pregunta-4": "¿En que año nació Marian Villaronga Toro4",
45
-        "res-4-1":"41",
46
-        "res-4-2":"42",
47
-        "res-4-3":"43",
48
-        "res-4-4":"44"
26
+        
27
+        "pregunta1": "¿En que año nació Marian Villaronga Toro1?",
28
+        "res1": ["11","12","13","14"],
29
+        "correcta1":"11",
30
+
31
+        "pregunta2": "¿En que año nació Marian Villaronga Toro2?",
32
+        "res2": ["21","22","23","24"],
33
+        "correcta2":"22",
34
+
35
+        "pregunta3": "¿En que año nació Marian Villaronga Toro3",
36
+        "res3": ["31","32","33","34"],
37
+        "correcta3":"33",
38
+
39
+        "pregunta4": "¿En que año nació Marian Villaronga Toro4",
40
+        "res4": ["41","42","43","44"],
41
+        "correcta4":"44"
42
+
49 43
     }
50 44
     ,
51 45
     {
52 46
         "id":3,
53 47
         "title": "German Rieckhoff Sampoyo",
54
-        "pregunta-1": "¿En que año nació German Rieckhoff Sampoyo1?",
55
-        "res-1-1":"11",
56
-        "res-1-2":"12",
57
-        "res-1-3":"13",
58
-        "res-1-4":"14",
59
-        "pregunta-2": "¿En que año nació German Rieckhoff Sampoyo2?",
60
-        "res-2-1":"21",
61
-        "res-2-2":"22",
62
-        "res-2-3":"23",
63
-        "res-2-4":"24",
64
-        "pregunta-3": "¿En que año nació German Rieckhoff Sampoyo3?",
65
-        "res-3-1":"31",
66
-        "res-3-2":"32",
67
-        "res-3-3":"33",
68
-        "res-3-4":"34",
69
-        "pregunta-4": "¿En que año nació German Rieckhoff Sampoyo4?",
70
-        "res-4-1":"41",
71
-        "res-4-2":"42",
72
-        "res-4-3":"43",
73
-        "res-4-4":"44"
48
+
49
+        "pregunta1": "¿En que año nació German Rieckhoff Sampoyo1?",
50
+        "res1": ["11","12","13","14"],
51
+        "correcta1":"11",
52
+
53
+        "pregunta2": "¿En que año nació German Rieckhoff Sampoyo2?",
54
+        "res2": ["21","22","23","24"],
55
+        "correcta2":"22",
56
+
57
+        "pregunta3": "¿En que año nació German Rieckhoff Sampoyo3",
58
+        "res3": ["31","32","33","34"],
59
+        "correcta3":"33",
60
+
61
+        "pregunta4": "¿En que año nació German Rieckhoff Sampoyo4",
62
+        "res4": ["41","42","43","44"],
63
+        "correcta4":"44"
74 64
     }
75 65
 ]

+ 15
- 0
src/pages/AboutUs.css Parādīt failu

@@ -11,4 +11,19 @@ ion-grid {
11 11
 ion-col {
12 12
     text-align: center;
13 13
     align-items: center;
14
+}
15
+
16
+.Item-Center {
17
+    width: 100%;
18
+    display: flex;
19
+    align-items: center;
20
+    justify-content: center;
21
+}
22
+
23
+.Header-Color {
24
+    --background: #4de9d9;
25
+}
26
+
27
+.Footer-Color {
28
+    --background: #d3d3d3;
14 29
 }

+ 22
- 16
src/pages/AboutUs.tsx Parādīt failu

@@ -6,24 +6,22 @@ import {
6 6
   IonPage,
7 7
   IonToolbar,
8 8
   IonFooter,
9
-  IonNavLink,
10
-  IonTabButton,
11
-  IonIcon,
12 9
   IonGrid,
13 10
   IonRow,
14
-  IonCol
11
+  IonCol,
12
+  IonButtons,
13
+  IonBackButton
15 14
 } from '@ionic/react';
16
-import { arrowBack } from 'ionicons/icons';
17 15
 import React from 'react';
18 16
 import './AboutUs.css';
19
-import HomePage from './HomePage';
20 17
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
18
+import About from '../data/About.json'
21 19
 
22 20
 const AboutUs: React.FC = () => {
23 21
   return (
24 22
     <IonPage>
25 23
       <IonHeader>
26
-        <IonToolbar>
24
+        <IonToolbar className="Header-Color">
27 25
           <IonGrid fixed={true}>
28 26
             <IonRow>
29 27
               <IonCol></IonCol>
@@ -37,17 +35,25 @@ const AboutUs: React.FC = () => {
37 35
         </IonToolbar>
38 36
       </IonHeader>
39 37
       <IonContent fullscreen className="ion-padding">
40
-        <h1>Enciclopedia PR</h1>
41
-        <h2>Más sobre nosotros:</h2>
42
-        <p>Para más información sobre EnciclopediaPR, visite la página href='https://enciclopediapr.org/'</p>
38
+        {
39
+          About && About.map(infoAb => {
40
+            return (
41
+              <>
42
+                <h1>{infoAb.title}</h1>
43
+                <h2>{infoAb.title2}</h2>
44
+                <p>{infoAb.content} {infoAb.url}</p>
45
+              </>
46
+            )
47
+          })
48
+        }
43 49
       </IonContent>
44 50
       <IonFooter>
45
-        <IonToolbar>
46
-          <IonNavLink routerDirection="forward" component={() => <HomePage />}>
47
-            <IonTabButton tab="HomePage" href="/HomePage">
48
-              <IonIcon icon={arrowBack} />
49
-            </IonTabButton>
50
-          </IonNavLink>
51
+        <IonToolbar className="Footer-Color">
52
+          <div className='Item-Center'>
53
+            <IonButtons slot="start">
54
+              <IonBackButton defaultHref="/home"></IonBackButton>
55
+            </IonButtons>
56
+          </div>
51 57
         </IonToolbar>
52 58
       </IonFooter>
53 59
     </IonPage>

+ 15
- 0
src/pages/Biography.css Parādīt failu

@@ -11,4 +11,19 @@ ion-grid {
11 11
 ion-col {
12 12
     text-align: center;
13 13
     align-items: center;
14
+}
15
+
16
+.Item-Center {
17
+    width: 100%;
18
+    display: flex;
19
+    align-items: center;
20
+    justify-content: center;
21
+}
22
+
23
+.Header-Color {
24
+    --background: #4de9d9;
25
+}
26
+
27
+.Footer-Color {
28
+    --background: #d3d3d3;
14 29
 }

+ 39
- 25
src/pages/Biography.tsx Parādīt failu

@@ -5,28 +5,37 @@ import {
5 5
     IonTitle,
6 6
     IonToolbar,
7 7
     IonFooter,
8
-    IonNavLink,
9
-    IonButton,
10
-    IonTabButton,
11
-    IonIcon,
12 8
     IonImg,
13 9
     IonGrid,
14 10
     IonRow,
15
-    IonCol
11
+    IonCol,
12
+    IonButtons,
13
+    IonBackButton,
14
+    useIonViewWillEnter,
15
+    IonItem,
16
+    IonIcon
16 17
 } from '@ionic/react';
17
-import { arrowBack } from 'ionicons/icons';
18
-import React from 'react';
18
+import { useParams } from 'react-router';
19
+import React, { useState } from 'react';
20
+import { BioInfo, getMessage } from '../data/BioInfo';
19 21
 import './Biography.css';
20
-import ListBiographies from './ListBiographies';
21
-import Questions from './Questions';
22 22
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
23 23
 import RobertoClemente from '../assets/RobertoClemente.jpg';
24
+import { clipboardOutline } from 'ionicons/icons';
24 25
 
25 26
 const Biography: React.FC = () => {
27
+    const [bioinfo, setMessage] = useState<BioInfo>();
28
+    const params = useParams<{ id: string }>();
29
+
30
+    useIonViewWillEnter(() => {
31
+        const msg = getMessage(parseInt(params.id, 10));
32
+        setMessage(msg);
33
+    });
34
+
26 35
     return (
27 36
         <IonPage>
28 37
             <IonHeader>
29
-                <IonToolbar>
38
+                <IonToolbar className="Header-Color">
30 39
                     <IonGrid fixed={true}>
31 40
                         <IonRow>
32 41
                             <IonCol></IonCol>
@@ -40,25 +49,30 @@ const Biography: React.FC = () => {
40 49
                 </IonToolbar>
41 50
             </IonHeader>
42 51
             <IonContent fullscreen className="ion-padding">
43
-                <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
44
-                <h1>Roberto Clemente</h1>
45
-
46
-                <p>Pelotero, Filántropo</p>
47
-                <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>
48
-                <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>
52
+                {bioinfo ? (
53
+                    <>
54
+                        <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
55
+                        <h1>{bioinfo.title}</h1>
49 56
 
50
-                <IonNavLink routerDirection="forward" component={() => <Questions />}>
51
-                    <IonButton>Tomar quiz</IonButton>
52
-                </IonNavLink>
57
+                        <p>{bioinfo.tags}</p>
58
+                        <p>{bioinfo.Text1}</p>
59
+                        <p>{bioinfo.Text2}</p>
60
+                        <IonItem routerLink={`/Question/${bioinfo.id}`} detail={true}>
61
+                            <IonIcon icon={clipboardOutline} />Tomar quiz
62
+                        </IonItem>
63
+                    </>
64
+                ) : (
65
+                    <div>Message not found</div>
66
+                )}
53 67
             </IonContent>
54 68
 
55 69
             <IonFooter>
56
-                <IonToolbar>
57
-                    <IonNavLink routerDirection="forward" component={() => <ListBiographies />}>
58
-                        <IonTabButton tab="ListBiographies" href="/ListBiographies">
59
-                            <IonIcon icon={arrowBack} />
60
-                        </IonTabButton>
61
-                    </IonNavLink>
70
+                <IonToolbar className="Footer-Color">
71
+                    <div className='Item-Center'>
72
+                        <IonButtons slot="start">
73
+                            <IonBackButton defaultHref="/home"></IonBackButton>
74
+                        </IonButtons>
75
+                    </div>
62 76
                 </IonToolbar>
63 77
             </IonFooter>
64 78
         </IonPage>

+ 15
- 0
src/pages/Capsule.css Parādīt failu

@@ -11,4 +11,19 @@ ion-grid {
11 11
 ion-col {
12 12
     text-align: center;
13 13
     align-items: center;
14
+}
15
+
16
+.Item-Center {
17
+    width: 100%;
18
+    display: flex;
19
+    align-items: center;
20
+    justify-content: center;
21
+}
22
+
23
+.Header-Color {
24
+    --background: #4de9d9;
25
+}
26
+
27
+.Footer-Color {
28
+    --background: #d3d3d3;
14 29
 }

+ 24
- 12
src/pages/Capsule.tsx Parādīt failu

@@ -6,25 +6,26 @@ import {
6 6
     IonToolbar,
7 7
     IonFooter,
8 8
     IonNavLink,
9
-    IonTabButton,
10
-    IonIcon,
11 9
     IonImg,
12 10
     IonGrid,
13 11
     IonRow,
14
-    IonCol
12
+    IonCol,
13
+    IonButton,
14
+    IonButtons,
15
+    IonBackButton
15 16
 } from '@ionic/react';
16
-import { arrowBack } from 'ionicons/icons';
17 17
 import React from 'react';
18 18
 import './Capsule.css';
19
-import ListCapsules from './ListCapsules';
19
+import Biography from './Biography';
20 20
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
21 21
 import Bomba from '../assets/BombaPuertorriquena.jpg';
22
+import RobertoClemente from '../assets/RobertoClemente.jpg';
22 23
 
23 24
 const Capsule: React.FC = () => {
24 25
     return (
25 26
         <IonPage>
26 27
             <IonHeader>
27
-                <IonToolbar>
28
+                <IonToolbar className="Header-Color">
28 29
                     <IonGrid fixed={true}>
29 30
                         <IonRow>
30 31
                             <IonCol></IonCol>
@@ -44,14 +45,25 @@ const Capsule: React.FC = () => {
44 45
                 <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>
45 46
                 <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>
46 47
                 <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>
48
+
49
+                <h2>Information about important figures</h2>
50
+                <IonGrid fixed={true}>
51
+                    <IonRow>
52
+                        <IonImg style={{ height: 150, width: 300 }} src={RobertoClemente} alt='Logo'></IonImg>
53
+                        <IonNavLink routerDirection="forward" component={() => <Biography />} >
54
+                            <IonButton color="light">Roberto Clemente</IonButton>
55
+                        </IonNavLink>
56
+                    </IonRow>
57
+                </IonGrid>
58
+
47 59
             </IonContent>
48 60
             <IonFooter>
49
-                <IonToolbar>
50
-                    <IonNavLink routerDirection="forward" component={() => <ListCapsules />}>
51
-                        <IonTabButton tab="ListCapsules" href="/ListCapsules">
52
-                            <IonIcon icon={arrowBack} />
53
-                        </IonTabButton>
54
-                    </IonNavLink>
61
+                <IonToolbar className="Footer-Color">
62
+                    <div className='Item-Center'>
63
+                        <IonButtons slot="start">
64
+                            <IonBackButton defaultHref="/ListCapsules"></IonBackButton>
65
+                        </IonButtons>
66
+                    </div>
55 67
                 </IonToolbar>
56 68
             </IonFooter>
57 69
         </IonPage>

+ 15
- 0
src/pages/HomePage.css Parādīt failu

@@ -16,4 +16,19 @@ ion-grid {
16 16
 ion-col {
17 17
     text-align: center;
18 18
     align-items: center;
19
+}
20
+
21
+.Header-Color {
22
+    --background: #4de9d9;
23
+}
24
+
25
+.Footer-Color {
26
+    --background: #d3d3d3;
27
+}
28
+
29
+.Item-Center {
30
+    width: 100%;
31
+    display: flex;
32
+    align-items: center;
33
+    justify-content: center;
19 34
 }

+ 32
- 36
src/pages/HomePage.tsx Parādīt failu

@@ -1,6 +1,5 @@
1 1
 import {
2 2
   IonContent,
3
-  IonButton,
4 3
   IonHeader,
5 4
   IonPage,
6 5
   IonTitle,
@@ -9,7 +8,6 @@ import {
9 8
   IonCardHeader,
10 9
   IonCardSubtitle,
11 10
   IonCardTitle,
12
-  IonNavLink,
13 11
   IonFooter,
14 12
   IonTabButton,
15 13
   IonIcon,
@@ -17,20 +15,18 @@ import {
17 15
   IonImg,
18 16
   IonCol,
19 17
   IonGrid,
20
-  IonRow
18
+  IonRow,
19
+  IonItem
21 20
 } from '@ionic/react';
22 21
 import { square } from 'ionicons/icons';
23 22
 import './HomePage.css';
24
-import ListBiographies from './ListBiographies';
25
-import ListCapsules from './ListCapsules';
26
-import AboutUs from './AboutUs';
27 23
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
28 24
 
29 25
 const HomePage: React.FC = () => {
30 26
   return (
31 27
     <IonPage>
32 28
       <IonHeader>
33
-        <IonToolbar>
29
+        <IonToolbar className="Header-Color">
34 30
           <IonGrid fixed={true}>
35 31
             <IonRow>
36 32
               <IonCol></IonCol>
@@ -44,37 +40,37 @@ const HomePage: React.FC = () => {
44 40
         </IonToolbar>
45 41
       </IonHeader>
46 42
       <IonContent fullscreen>
47
-        <IonCard>
48
-          <IonCardHeader>
49
-            <IonCardTitle>Biografías</IonCardTitle>
50
-            <IonCardSubtitle>Lista de todas las biografías</IonCardSubtitle>
51
-          </IonCardHeader>
52
-          <IonNavLink routerDirection="forward" component={() => <ListBiographies />}>
53
-            <IonButton size="default" expand="block" shape="round">
54
-              Buscar
55
-            </IonButton>
56
-          </IonNavLink>
57
-        </IonCard>
58
-        <IonCard>
59
-          <IonCardHeader>
60
-            <IonCardTitle>Cápsulas</IonCardTitle>
61
-            <IonCardSubtitle>Lista de todas las cápsulas</IonCardSubtitle>
62
-          </IonCardHeader>
63
-          <IonNavLink routerDirection="forward" component={() => <ListCapsules />}>
64
-            <IonButton size="default" expand="block" shape="round">
65
-              Buscar
66
-            </IonButton>
67
-          </IonNavLink>
68
-        </IonCard>
43
+        <div className='Item-Center'>
44
+          <IonItem routerLink={`/ListBiographie`} detail={true}>
45
+            <IonCard>
46
+              <IonCardHeader>
47
+                <IonCardTitle>Biografías</IonCardTitle>
48
+                <IonCardSubtitle>Lista de todas las biografías</IonCardSubtitle>
49
+              </IonCardHeader>
50
+            </IonCard>
51
+          </IonItem>
52
+        </div>
53
+        <div className='Item-Center'>
54
+          <IonItem routerLink={`/ListCapsules`} detail={true}>
55
+            <IonCard>
56
+              <IonCardHeader>
57
+                <IonCardTitle>Cápsulas</IonCardTitle>
58
+                <IonCardSubtitle>Lista de todas las cápsulas</IonCardSubtitle>
59
+              </IonCardHeader>
60
+            </IonCard>
61
+          </IonItem>
62
+        </div>
69 63
       </IonContent>
70 64
       <IonFooter>
71
-        <IonToolbar>
72
-          <IonNavLink routerDirection="forward" component={() => <AboutUs />}>
73
-            <IonTabButton tab="AboutUs" href="/AboutUs">
74
-              <IonIcon icon={square} />
75
-              <IonLabel>Sobre nosotros</IonLabel>
76
-            </IonTabButton>
77
-          </IonNavLink>
65
+        <IonToolbar className="Footer-Color">
66
+          <div className='Item-Center'>
67
+            <IonItem routerLink={`/About`}>
68
+              <IonTabButton tab="AboutUs" href="/AboutUs">
69
+                <IonIcon icon={square} />
70
+                <IonLabel>Sobre nosotros</IonLabel>
71
+              </IonTabButton>
72
+            </IonItem>
73
+          </div>
78 74
         </IonToolbar>
79 75
       </IonFooter>
80 76
     </IonPage>

+ 15
- 0
src/pages/ListBiographies.css Parādīt failu

@@ -11,4 +11,19 @@ ion-grid {
11 11
 ion-col {
12 12
     text-align: center;
13 13
     align-items: center;
14
+}
15
+
16
+.Item-Center {
17
+    width: 100%;
18
+    display: flex;
19
+    align-items: center;
20
+    justify-content: center;
21
+}
22
+
23
+.Header-Color {
24
+    --background: #4de9d9;
25
+}
26
+
27
+.Footer-Color {
28
+    --background: #d3d3d3;
14 29
 }

+ 25
- 34
src/pages/ListBiographies.tsx Parādīt failu

@@ -11,20 +11,17 @@ import {
11 11
   IonPage,
12 12
   IonTitle,
13 13
   IonToolbar,
14
-  IonButton,
15
-  IonNavLink,
16 14
   IonFooter,
17
-  IonTabButton,
18
-  IonIcon,
19 15
   IonGrid,
20 16
   IonRow,
21
-  IonCol
17
+  IonCol,
18
+  IonButtons,
19
+  IonBackButton,
20
+  IonItem,
21
+  IonIcon
22 22
 } from '@ionic/react';
23
-import { arrowBack } from 'ionicons/icons';
24 23
 import './ListBiographies.css';
25
-import Biography from './Biography';
26
-import Questions from './Questions';
27
-import HomePage from './HomePage';
24
+import { clipboardOutline } from 'ionicons/icons';
28 25
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
29 26
 import RobertoClemente from '../assets/RobertoClemente.jpg';
30 27
 import ListBio from '../data/Biograph.json';
@@ -33,7 +30,7 @@ const ListBiographies: React.FC = () => {
33 30
   return (
34 31
     <IonPage>
35 32
       <IonHeader>
36
-        <IonToolbar>
33
+        <IonToolbar className="Header-Color">
37 34
           <IonGrid fixed={true}>
38 35
             <IonRow>
39 36
               <IonCol></IonCol>
@@ -48,42 +45,36 @@ const ListBiographies: React.FC = () => {
48 45
       </IonHeader>
49 46
       <IonContent fullscreen>
50 47
         <IonSearchbar></IonSearchbar>
51
-
52 48
         {
53 49
           ListBio && ListBio.map(listbio => {
54 50
             return (
55 51
               <>
56 52
                 <IonCard>
57
-                  <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
58
-                  <IonCardHeader>
59
-                    <IonCardTitle>{listbio.title}</IonCardTitle>
60
-                    <IonCardSubtitle>{listbio.tags}</IonCardSubtitle>
61
-                  </IonCardHeader><IonCardContent>
62
-                    {listbio.content}
63
-                  </IonCardContent>
64
-                  <IonNavLink routerDirection="forward" component={() => <Biography />}>
65
-                    <IonButton>Go to</IonButton>
66
-                  </IonNavLink>
67
-
68
-                  <IonNavLink routerDirection="forward" component={() => <Questions />}>
69
-                    <IonButton>Tomar quiz</IonButton>
70
-                  </IonNavLink>
71
-
53
+                  <IonItem routerLink={`/Biographie/${listbio.id}`}>
54
+                    <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
55
+                    <IonCardHeader>
56
+                      <IonCardTitle>{listbio.title}</IonCardTitle>
57
+                      <IonCardSubtitle>{listbio.tags}</IonCardSubtitle>
58
+                    </IonCardHeader><IonCardContent>
59
+                      {listbio.content}
60
+                    </IonCardContent>
61
+                  </IonItem>
62
+                  <IonItem routerLink={`/Question/${listbio.id}`} detail={true}>
63
+                    <IonIcon icon={clipboardOutline} />Tomar quiz
64
+                  </IonItem>
72 65
                 </IonCard>
73 66
               </>
74 67
             )
75 68
           })
76 69
         }
77
-
78
-
79 70
       </IonContent>
80 71
       <IonFooter>
81
-        <IonToolbar>
82
-          <IonNavLink routerDirection="forward" component={() => <HomePage />}>
83
-            <IonTabButton tab="HomePage" href="/HomePage">
84
-              <IonIcon icon={arrowBack} />
85
-            </IonTabButton>
86
-          </IonNavLink>
72
+        <IonToolbar className="Footer-Color">
73
+          <div className='Item-Center'>
74
+            <IonButtons slot="start">
75
+              <IonBackButton defaultHref="/home"></IonBackButton>
76
+            </IonButtons>
77
+          </div>
87 78
         </IonToolbar>
88 79
       </IonFooter>
89 80
     </IonPage>

+ 15
- 0
src/pages/ListCapsules.css Parādīt failu

@@ -11,4 +11,19 @@ ion-grid {
11 11
 ion-col {
12 12
     text-align: center;
13 13
     align-items: center;
14
+}
15
+
16
+.Item-Center {
17
+    width: 100%;
18
+    display: flex;
19
+    align-items: center;
20
+    justify-content: center;
21
+}
22
+
23
+.Header-Color {
24
+    --background: #4de9d9;
25
+}
26
+
27
+.Footer-Color {
28
+    --background: #d3d3d3;
14 29
 }

+ 11
- 19
src/pages/ListCapsules.tsx Parādīt failu

@@ -9,26 +9,21 @@ import {
9 9
   IonPage,
10 10
   IonTitle,
11 11
   IonToolbar,
12
-  IonButton,
13
-  IonNavLink,
14 12
   IonFooter,
15
-  IonTabButton,
16
-  IonIcon,
17 13
   IonGrid,
18 14
   IonRow,
19
-  IonCol
15
+  IonCol,
16
+  IonButtons,
17
+  IonBackButton
20 18
 } from '@ionic/react';
21
-import { arrowBack } from 'ionicons/icons';
22 19
 import './ListCapsules.css';
23
-import HomePage from './HomePage';
24
-import Capsule from './Capsule'
25 20
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
26 21
 
27 22
 const ListCapsules: React.FC = () => {
28 23
   return (
29 24
     <IonPage>
30 25
       <IonHeader>
31
-        <IonToolbar>
26
+        <IonToolbar className="Header-Color">
32 27
           <IonGrid fixed={true}>
33 28
             <IonRow>
34 29
               <IonCol></IonCol>
@@ -44,11 +39,8 @@ const ListCapsules: React.FC = () => {
44 39
       <IonContent fullscreen>
45 40
         <IonSearchbar></IonSearchbar>
46 41
         <IonList inset={true}>
47
-          <IonItem>
42
+          <IonItem routerLink={`/Capsule`} detail={true}>
48 43
             <IonLabel>Breve Historia del baile en Puerto Rico</IonLabel>
49
-            <IonNavLink routerDirection="forward" component={() => <Capsule />}>
50
-              <IonButton>Visitar</IonButton>
51
-            </IonNavLink>
52 44
           </IonItem>
53 45
           <IonItem>
54 46
             <IonLabel>Cápsula#2</IonLabel>
@@ -59,12 +51,12 @@ const ListCapsules: React.FC = () => {
59 51
         </IonList>
60 52
       </IonContent>
61 53
       <IonFooter>
62
-        <IonToolbar>
63
-          <IonNavLink routerDirection="forward" component={() => <HomePage />}>
64
-            <IonTabButton tab="HomePage" href="/HomePage">
65
-              <IonIcon icon={arrowBack} />
66
-            </IonTabButton>
67
-          </IonNavLink>
54
+        <IonToolbar className="Footer-Color">
55
+          <div className='Item-Center'>
56
+            <IonButtons slot="start">
57
+              <IonBackButton defaultHref="/home"></IonBackButton>
58
+            </IonButtons>
59
+          </div>
68 60
         </IonToolbar>
69 61
       </IonFooter>
70 62
     </IonPage>

+ 15
- 0
src/pages/Questions.css Parādīt failu

@@ -13,6 +13,21 @@ ion-col {
13 13
     align-items: center;
14 14
 }
15 15
 
16
+.Item-Center {
17
+    width: 100%;
18
+    display: flex;
19
+    align-items: center;
20
+    justify-content: center;
21
+}
22
+
23
+.Header-Color {
24
+    --background: #4de9d9;
25
+}
26
+
27
+.Footer-Color {
28
+    --background: #d3d3d3;
29
+}
30
+
16 31
 ion-radio {
17 32
     --border-radius: 4px;
18 33
     --inner-border-radius: 4px;

+ 369
- 69
src/pages/Questions.tsx Parādīt failu

@@ -5,9 +5,6 @@ import {
5 5
     IonTitle,
6 6
     IonToolbar,
7 7
     IonFooter,
8
-    IonNavLink,
9
-    IonTabButton,
10
-    IonIcon,
11 8
     IonImg,
12 9
     IonItem,
13 10
     IonLabel,
@@ -21,34 +18,314 @@ import {
21 18
     IonGrid,
22 19
     IonRow,
23 20
     IonCol,
21
+    IonButtons,
22
+    IonBackButton,
23
+    useIonViewWillEnter,
24 24
     IonRadioGroup,
25
-    IonRadio
25
+    IonRadio,
26
+    IonIcon,
27
+    IonChip
26 28
 } from '@ionic/react';
27
-import { arrowBack } from 'ionicons/icons';
28
-import React, {useState} from 'react';
29
-//import { Form } from 'react-bootstrap';
29
+import { useParams } from 'react-router';
30
+import React, { useState } from 'react';
30 31
 import './Questions.css';
31
-import Biography from './Biography';
32 32
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
33 33
 import RobertoClemente from '../assets/RobertoClemente.jpg';
34
-import Quizzes from '../data/Quizzes.json';
34
+import { QuizInfo, getQuiz } from '../data/QuizInfo';
35
+import { thumbsDown, thumbsUp } from 'ionicons/icons';
35 36
 
36 37
 
37 38
 const Questions: React.FC = () => {
39
+    // Estados para respuestas seleccionadas
40
+    const [qres1, setQRes1] = useState();
41
+    const [qres2, setQRes2] = useState();
42
+    const [qres3, setQRes3] = useState();
43
+    const [qres4, setQRes4] = useState();
44
+
45
+    // Arreglos para saber cual radio se selecciono en cada pregunta
46
+    const selected1:boolean[] = [false, false, false, false];
47
+    const selected2:boolean[] = [false, false, false, false];
48
+    const selected3:boolean[] = [false, false, false, false];
49
+    const selected4:boolean[] = [false, false, false, false];
50
+
51
+    // Estados para seleccionar iconos de las respuestas seleccionadas
52
+    const [icon11, setIcon11] = useState<any>();
53
+    const [icon12, setIcon12] = useState<any>();
54
+    const [icon13, setIcon13] = useState<any>();
55
+    const [icon14, setIcon14] = useState<any>();
56
+
57
+    const [icon21, setIcon21] = useState<any>();
58
+    const [icon22, setIcon22] = useState<any>();
59
+    const [icon23, setIcon23] = useState<any>();
60
+    const [icon24, setIcon24] = useState<any>();
61
+
62
+    const [icon31, setIcon31] = useState<any>();
63
+    const [icon32, setIcon32] = useState<any>();
64
+    const [icon33, setIcon33] = useState<any>();
65
+    const [icon34, setIcon34] = useState<any>();
38 66
 
39
-    const [res1, setRes1] = useState();
40
-    const [res2, setRes2] = useState();
41
-    const [res3, setRes3] = useState();
42
-    const [res4, setRes4] = useState();
67
+    const [icon41, setIcon41] = useState<any>();
68
+    const [icon42, setIcon42] = useState<any>();
69
+    const [icon43, setIcon43] = useState<any>();
70
+    const [icon44, setIcon44] = useState<any>();
43 71
 
72
+    // Estado para contar cuantas preguntas correctas se obtuvieron
73
+    const [countres, setCountRes] = useState<number>(0);
74
+
75
+    const [verResPresionado, setVerResPresionado] = useState<boolean>(false);
76
+
77
+    /* verificarRes()
78
+        Funcion se encarga de verificar si las respuestas seleccionadas
79
+        son correctas. Despliega ThumbsUp para seleccion correcta,
80
+        ThumbsDowmn para seleccion incorrecta.
81
+    */
44 82
     const verificarRes = () => {
45
-        return console.log([res1, res2, res3, res4])
83
+        // borrar console logs para el release
84
+        console.log([qres1, qres2, qres3, qres4]);
85
+        console.log(countres);
86
+
87
+        // reset a los icons, count y acertadas por si hubo seleccion anterior
88
+        let count = 0;
89
+        setCountRes(count);
90
+        setVerResPresionado(true);
91
+
92
+        setIcon11(null);
93
+        setIcon12(null);
94
+        setIcon13(null);
95
+        setIcon14(null);
96
+
97
+        setIcon21(null);
98
+        setIcon22(null);
99
+        setIcon23(null);
100
+        setIcon24(null);
101
+
102
+        setIcon31(null);
103
+        setIcon32(null);
104
+        setIcon33(null);
105
+        setIcon34(null);
106
+
107
+        setIcon41(null);
108
+        setIcon42(null);
109
+        setIcon43(null);
110
+        setIcon44(null);
111
+
112
+
113
+        // loop para saber que radio escogio el usuario en cada pregunta
114
+        let num: number = 0;
115
+        let i: number;
116
+        for(i = num; i<4; i++){
117
+            if(qres1 === quizInfo?.res1[i]){
118
+                selected1[i] = true;
119
+            }
120
+
121
+            if(qres2 === quizInfo?.res2[i]){
122
+                selected2[i] = true;
123
+            }
124
+
125
+            if(qres3 === quizInfo?.res3[i]){
126
+                selected3[i] = true;
127
+            }
128
+
129
+            if(qres4 === quizInfo?.res4[i]){
130
+                selected4[i] = true;
131
+            }
132
+
133
+        }
134
+
135
+        // Para seleccionar si sale icono correccto o incorrecto en seleccion
136
+        // de radio.
137
+
138
+        // ======================= PREGUNTA 1 =========================================
139
+        // SI usuario seleccionio el primer radio en la pregunta 1
140
+        if(selected1[0] && quizInfo?.res1[0] === quizInfo?.correcta1){
141
+            setIcon11(<IonIcon icon={thumbsUp} />);
142
+            //setCountRes(countres + 1);
143
+            count++;
144
+        }
145
+        else if (selected1[0] && quizInfo?.res1[0] !== quizInfo?.correcta1){
146
+            setIcon11(<IonIcon icon={thumbsDown} />)
147
+        }
148
+
149
+        // SI usuario seleccionio el segundo radio en la pregunta 1
150
+        if(selected1[1] && quizInfo?.res1[1] === quizInfo?.correcta1){
151
+            setIcon12(<IonIcon icon={thumbsUp} />);
152
+            //setCountRes(countres + 1);
153
+            count++;
154
+        }
155
+        else if (selected1[1] && quizInfo?.res1[1] !== quizInfo?.correcta1){
156
+            setIcon12(<IonIcon icon={thumbsDown} />)
157
+        }
158
+
159
+        // SI usuario seleccionio el tercer radio en la pregunta 1
160
+        if(selected1[2] && quizInfo?.res1[2] === quizInfo?.correcta1){
161
+            setIcon13(<IonIcon icon={thumbsUp} />);
162
+            //setCountRes(countres + 1);
163
+            count++;
164
+        }
165
+        else if (selected1[2] && quizInfo?.res1[2] !== quizInfo?.correcta1){
166
+            setIcon13(<IonIcon icon={thumbsDown} />)
167
+        }
168
+
169
+        // SI usuario seleccionio el cuarto radio en la pregunta 1
170
+        if(selected1[3] && quizInfo?.res1[3] === quizInfo?.correcta1){
171
+            setIcon14(<IonIcon icon={thumbsUp} />);
172
+            //setCountRes(countres + 1);
173
+            count++;
174
+        }
175
+        else if (selected1[3] && quizInfo?.res1[3] !== quizInfo?.correcta1){
176
+            setIcon14(<IonIcon icon={thumbsDown} />)
177
+        }
178
+        // ======================= PREGUNTA 1 =========================================
179
+
180
+        // ======================= PREGUNTA 2 =========================================
181
+
182
+        // SI usuario seleccionio el primer radio en la pregunta 2
183
+        if(selected2[0] && quizInfo?.res2[0] === quizInfo?.correcta2){
184
+            setIcon21(<IonIcon icon={thumbsUp} />);
185
+            //setCountRes(countres + 1);
186
+            count++;
187
+        }
188
+        else if (selected2[0] && quizInfo?.res2[0] !== quizInfo?.correcta2){
189
+            setIcon21(<IonIcon icon={thumbsDown} />)
190
+        }
191
+
192
+        // SI usuario seleccionio el segundo radio en la pregunta 2
193
+        if(selected2[1] && quizInfo?.res2[1] === quizInfo?.correcta2){
194
+            setIcon22(<IonIcon icon={thumbsUp} />);
195
+            //setCountRes(countres + 1);
196
+            count++;
197
+        }
198
+        else if (selected2[1] && quizInfo?.res2[1] !== quizInfo?.correcta2){
199
+            setIcon22(<IonIcon icon={thumbsDown} />)
200
+        }
201
+
202
+        // SI usuario seleccionio el tercer radio en la pregunta 2
203
+        if(selected2[2] && quizInfo?.res2[2] === quizInfo?.correcta2){
204
+            setIcon23(<IonIcon icon={thumbsUp} />);
205
+            //setCountRes(countres + 1);
206
+            count++;
207
+        }
208
+        else if (selected2[2] && quizInfo?.res2[2] !== quizInfo?.correcta2){
209
+            setIcon23(<IonIcon icon={thumbsDown} />)
210
+        }
211
+
212
+        // SI usuario seleccionio el cuarto radio en la pregunta 2
213
+        if(selected2[3] && quizInfo?.res2[3] === quizInfo?.correcta2){
214
+            setIcon24(<IonIcon icon={thumbsUp} />);
215
+            //setCountRes(countres + 1);
216
+            count++;
217
+        }
218
+        else if (selected2[3] && quizInfo?.res2[3] !== quizInfo?.correcta2){
219
+            setIcon24(<IonIcon icon={thumbsDown} />)
220
+        }
221
+
222
+        // ======================= PREGUNTA 2 =========================================
223
+
224
+        // ======================= PREGUNTA 3 =========================================
225
+
226
+        // SI usuario seleccionio el primer radio en la pregunta 3
227
+        if(selected3[0] && quizInfo?.res3[0] === quizInfo?.correcta3){
228
+            setIcon31(<IonIcon icon={thumbsUp} />);
229
+            //setCountRes(countres + 1);
230
+            count++;
231
+        }
232
+        else if (selected3[0] && quizInfo?.res3[0] !== quizInfo?.correcta3){
233
+            setIcon31(<IonIcon icon={thumbsDown} />)
234
+        }
235
+
236
+        // SI usuario seleccionio el segundo radio en la pregunta 3
237
+        if(selected3[1] && quizInfo?.res3[1] === quizInfo?.correcta3){
238
+            setIcon32(<IonIcon icon={thumbsUp} />);
239
+            //setCountRes(countres + 1);
240
+            count++;
241
+        }
242
+        else if (selected3[1] && quizInfo?.res3[1] !== quizInfo?.correcta3){
243
+            setIcon32(<IonIcon icon={thumbsDown} />)
244
+        }
245
+
246
+        // SI usuario seleccionio el tercer radio en la pregunta 3
247
+        if(selected3[2] && quizInfo?.res3[2] === quizInfo?.correcta3){
248
+            setIcon33(<IonIcon icon={thumbsUp} />);
249
+            //setCountRes(countres + 1);
250
+            count++;
251
+        }
252
+        else if (selected3[2] && quizInfo?.res3[2] !== quizInfo?.correcta3){
253
+            setIcon33(<IonIcon icon={thumbsDown} />)
254
+        }
255
+
256
+        // SI usuario seleccionio el cuerto radio en la pregunta 3
257
+        if(selected3[3] && quizInfo?.res3[3] === quizInfo?.correcta3){
258
+            setIcon34(<IonIcon icon={thumbsUp} />);
259
+            //setCountRes(countres + 1);
260
+            count++;
261
+        }
262
+        else if (selected3[3] && quizInfo?.res3[3] !== quizInfo?.correcta3){
263
+            setIcon34(<IonIcon icon={thumbsDown} />)
264
+        }
265
+
266
+        // ======================= PREGUNTA 3 =========================================
267
+
268
+        // ======================= PREGUNTA 4 =========================================
269
+
270
+        // SI usuario seleccionio el primer radio en la pregunta 4
271
+        if(selected4[0] && quizInfo?.res4[0] === quizInfo?.correcta4){
272
+            setIcon41(<IonIcon icon={thumbsUp} />);
273
+            //setCountRes(countres + 1);
274
+            count++;
275
+        }
276
+        else if (selected4[0] && quizInfo?.res4[0] !== quizInfo?.correcta4){
277
+            setIcon41(<IonIcon icon={thumbsDown} />)
278
+        }
279
+
280
+        // SI usuario seleccionio el segundo radio en la pregunta 4
281
+        if(selected4[1] && quizInfo?.res4[1] === quizInfo?.correcta4){
282
+            setIcon42(<IonIcon icon={thumbsUp} />);
283
+            //setCountRes(countres + 1);
284
+            count++;
285
+        }
286
+        else if (selected4[1] && quizInfo?.res4[1] !== quizInfo?.correcta4){
287
+            setIcon42(<IonIcon icon={thumbsDown} />)
288
+        }
289
+
290
+        // SI usuario seleccionio el tercer radio en la pregunta 4
291
+        if(selected4[2] && quizInfo?.res4[2] === quizInfo?.correcta4){
292
+            setIcon43(<IonIcon icon={thumbsUp} />);
293
+            //setCountRes(countres + 1);
294
+            count++;
295
+        }
296
+        else if (selected4[2] && quizInfo?.res4[2] !== quizInfo?.correcta4){
297
+            setIcon43(<IonIcon icon={thumbsDown} />)
298
+        }
299
+
300
+        // SI usuario seleccionio el cuarto radio en la pregunta 4
301
+        if(selected4[3] && quizInfo?.res4[3] === quizInfo?.correcta4){
302
+            setIcon44(<IonIcon icon={thumbsUp} />);
303
+            //setCountRes(countres + 1);
304
+            count++;
305
+        }
306
+        else if (selected4[3] && quizInfo?.res4[3] !== quizInfo?.correcta4){
307
+            setIcon44(<IonIcon icon={thumbsDown} />)
308
+        }
309
+
310
+        // ======================= PREGUNTA 4 =========================================
311
+
312
+        // Para saber cueantas resspuestas acertó el usuario
313
+        setCountRes(count);
46 314
     };
315
+    
316
+    // State para desplegar la info del quiz
317
+    const [quizInfo, setQuiz] = useState<QuizInfo>();
318
+    const params = useParams<{ id: string }>();
47 319
 
320
+    useIonViewWillEnter(() => {
321
+        const quiz = getQuiz(parseInt(params.id, 10));
322
+        setQuiz(quiz);
323
+    });
324
+    
48 325
     return (
49 326
         <IonPage>
50 327
             <IonHeader>
51
-                <IonToolbar>
328
+                <IonToolbar className="Header-Color">
52 329
                     <IonGrid fixed={true}>
53 330
                         <IonRow>
54 331
                             <IonCol></IonCol>
@@ -61,44 +338,47 @@ const Questions: React.FC = () => {
61 338
                     </IonGrid>
62 339
                 </IonToolbar>
63 340
             </IonHeader>
64
-
341
+            
65 342
             <IonContent fullscreen className="ion-padding">
66 343
                 <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
67 344
 
68 345
                 {
69
-                    Quizzes && Quizzes.map(quizzes => {
70
-                        return (
71
-                        quizzes.id == 1 ? <>
72
-                        <h1>Quiz sobre la biografia de {quizzes.title}</h1>
346
+                    quizInfo ?
347
+                    <>
348
+                        <h1>Quiz sobre la biografia de {quizInfo.title}</h1>
73 349
 
74 350
                         <p>Marque una respuesta por pregunta</p>
75 351
 
76 352
                         <IonCard>
77 353
                             <IonCardHeader>
78
-                                <IonCardTitle>{quizzes['pregunta-1']}</IonCardTitle>
354
+                                <IonCardTitle>{quizInfo.pregunta1}</IonCardTitle>
79 355
                                 <IonCardSubtitle></IonCardSubtitle>
80 356
                             </IonCardHeader>
81 357
                             <IonCardContent>
82 358
                                 <IonList>
83
-                                    <IonRadioGroup value={res1} onIonChange={(e) => setRes1(e.detail.value)}>
359
+                                    <IonRadioGroup value={qres1} onIonChange={(e) => setQRes1(e.detail.value)}>
84 360
                                         <IonItem>
85
-                                            <IonLabel>{quizzes['res-1-1']}</IonLabel>
86
-                                            <IonRadio slot="end" value={quizzes['res-1-1']}></IonRadio>
361
+                                            <IonLabel>{quizInfo.res1[0]}</IonLabel>
362
+                                            <IonRadio slot="end" value={quizInfo.res1[0]}></IonRadio>
363
+                                            {icon11}
87 364
                                         </IonItem>
88 365
 
89 366
                                         <IonItem>
90
-                                            <IonLabel>{quizzes['res-1-2']}</IonLabel>
91
-                                            <IonRadio slot="end" value={quizzes['res-1-2']}></IonRadio>
367
+                                            <IonLabel>{quizInfo.res1[1]}</IonLabel>
368
+                                            <IonRadio slot="end" value={quizInfo.res1[1]}></IonRadio>
369
+                                            {icon12}
92 370
                                         </IonItem>
93 371
 
94 372
                                         <IonItem>
95
-                                            <IonLabel>{quizzes['res-1-3']}</IonLabel>
96
-                                            <IonRadio slot="end" value={quizzes['res-1-3']}></IonRadio>
373
+                                            <IonLabel>{quizInfo.res1[2]}</IonLabel>
374
+                                            <IonRadio slot="end" value={quizInfo.res1[2]}></IonRadio>
375
+                                            {icon13}
97 376
                                         </IonItem>
98 377
 
99 378
                                         <IonItem>
100
-                                            <IonLabel>{quizzes['res-1-4']}</IonLabel>
101
-                                            <IonRadio slot="end" value={quizzes['res-1-4']}></IonRadio>
379
+                                            <IonLabel>{quizInfo.res1[3]}</IonLabel>
380
+                                            <IonRadio slot="end" value={quizInfo.res1[3]}></IonRadio>
381
+                                            {icon14}
102 382
                                         </IonItem>
103 383
                                     </IonRadioGroup>
104 384
                                 </IonList>
@@ -107,30 +387,34 @@ const Questions: React.FC = () => {
107 387
 
108 388
                         <IonCard>
109 389
                             <IonCardHeader>
110
-                                <IonCardTitle>{quizzes['pregunta-2']}</IonCardTitle>
390
+                                <IonCardTitle>{quizInfo.pregunta2}</IonCardTitle>
111 391
                                 <IonCardSubtitle></IonCardSubtitle>
112 392
                             </IonCardHeader>
113 393
                             <IonCardContent>
114 394
                                 <IonList>
115
-                                    <IonRadioGroup value={res2} onIonChange={(e) => setRes2(e.detail.value)}>
395
+                                    <IonRadioGroup value={qres2} onIonChange={(e) => setQRes2(e.detail.value)}>
116 396
                                         <IonItem>
117
-                                            <IonLabel>{quizzes['res-2-1']}</IonLabel>
118
-                                            <IonRadio slot="end" value={quizzes['res-2-1']}></IonRadio>
397
+                                            <IonLabel>{quizInfo.res2[0]}</IonLabel>
398
+                                            <IonRadio slot="end" value={quizInfo.res2[0]}></IonRadio>
399
+                                            {icon21}
119 400
                                         </IonItem>
120 401
 
121 402
                                         <IonItem>
122
-                                            <IonLabel>{quizzes['res-2-2']}</IonLabel>
123
-                                            <IonRadio slot="end" value={quizzes['res-2-2']}></IonRadio>
403
+                                            <IonLabel>{quizInfo.res2[1]}</IonLabel>
404
+                                            <IonRadio slot="end" value={quizInfo.res2[1]}></IonRadio>
405
+                                            {icon22}
124 406
                                         </IonItem>
125 407
 
126 408
                                         <IonItem>
127
-                                            <IonLabel>{quizzes['res-2-3']}</IonLabel>
128
-                                            <IonRadio slot="end" value={quizzes['res-2-3']}></IonRadio>
409
+                                            <IonLabel>{quizInfo.res2[2]}</IonLabel>
410
+                                            <IonRadio slot="end" value={quizInfo.res2[2]}></IonRadio>
411
+                                            {icon23}
129 412
                                         </IonItem>
130 413
 
131 414
                                         <IonItem>
132
-                                            <IonLabel>{quizzes['res-2-4']}</IonLabel>
133
-                                            <IonRadio slot="end" value={quizzes['res-2-4']}></IonRadio>
415
+                                            <IonLabel>{quizInfo.res2[3]}</IonLabel>
416
+                                            <IonRadio slot="end" value={quizInfo.res2[3]}></IonRadio>
417
+                                            {icon24}
134 418
                                         </IonItem>
135 419
                                     </IonRadioGroup>
136 420
                                 </IonList>
@@ -139,30 +423,34 @@ const Questions: React.FC = () => {
139 423
 
140 424
                         <IonCard>
141 425
                             <IonCardHeader>
142
-                                <IonCardTitle>{quizzes['pregunta-3']}</IonCardTitle>
426
+                                <IonCardTitle>{quizInfo.pregunta3}</IonCardTitle>
143 427
                                 <IonCardSubtitle></IonCardSubtitle>
144 428
                             </IonCardHeader>
145 429
                             <IonCardContent>
146 430
                                 <IonList>
147
-                                    <IonRadioGroup value={res3} onIonChange={(e) => setRes3(e.detail.value)}>
431
+                                    <IonRadioGroup value={qres3} onIonChange={(e) => setQRes3(e.detail.value)}>
148 432
                                         <IonItem>
149
-                                            <IonLabel>{quizzes['res-3-1']}</IonLabel>
150
-                                            <IonRadio slot="end" value={quizzes['res-3-1']}></IonRadio>
433
+                                            <IonLabel>{quizInfo.res3[0]}</IonLabel>
434
+                                            <IonRadio slot="end" value={quizInfo.res3[0]}></IonRadio>
435
+                                            {icon31}
151 436
                                         </IonItem>
152 437
 
153 438
                                         <IonItem>
154
-                                            <IonLabel>{quizzes['res-3-2']}</IonLabel>
155
-                                            <IonRadio slot="end" value={quizzes['res-3-2']}></IonRadio>
439
+                                            <IonLabel>{quizInfo.res3[1]}</IonLabel>
440
+                                            <IonRadio slot="end" value={quizInfo.res3[1]}></IonRadio>
441
+                                            {icon32}
156 442
                                         </IonItem>
157 443
 
158 444
                                         <IonItem>
159
-                                            <IonLabel>{quizzes['res-3-3']}</IonLabel>
160
-                                            <IonRadio slot="end" value={quizzes['res-3-3']}></IonRadio>
445
+                                            <IonLabel>{quizInfo.res3[2]}</IonLabel>
446
+                                            <IonRadio slot="end" value={quizInfo.res3[2]}></IonRadio>
447
+                                            {icon33}
161 448
                                         </IonItem>
162 449
 
163 450
                                         <IonItem>
164
-                                            <IonLabel>{quizzes['res-3-4']}</IonLabel>
165
-                                            <IonRadio slot="end" value={quizzes['res-3-4']}></IonRadio>
451
+                                            <IonLabel>{quizInfo.res3[3]}</IonLabel>
452
+                                            <IonRadio slot="end" value={quizInfo.res3[3]}></IonRadio>
453
+                                            {icon34}
166 454
                                         </IonItem>
167 455
                                     </IonRadioGroup>
168 456
                                 </IonList>
@@ -171,38 +459,50 @@ const Questions: React.FC = () => {
171 459
 
172 460
                         <IonCard>
173 461
                             <IonCardHeader>
174
-                                <IonCardTitle>{quizzes['pregunta-4']}</IonCardTitle>
462
+                                <IonCardTitle>{quizInfo.pregunta4}</IonCardTitle>
175 463
                                 <IonCardSubtitle></IonCardSubtitle>
176 464
                             </IonCardHeader>
177 465
                             <IonCardContent>
178 466
                                 <IonList>
179
-                                    <IonRadioGroup value={res4} onIonChange={(e) => setRes4(e.detail.value)}>
467
+                                    <IonRadioGroup value={qres4} onIonChange={(e) => setQRes4(e.detail.value)}>
180 468
                                         <IonItem>
181
-                                            <IonLabel>{quizzes['res-4-1']}</IonLabel>
182
-                                            <IonRadio slot="end" value={quizzes['res-4-1']}></IonRadio>
469
+                                            <IonLabel>{quizInfo.res4[0]}</IonLabel>
470
+                                            <IonRadio slot="end" value={quizInfo.res4[0]}></IonRadio>
471
+                                            {icon41}
183 472
                                         </IonItem>
184 473
 
185 474
                                         <IonItem>
186
-                                            <IonLabel>{quizzes['res-4-2']}</IonLabel>
187
-                                            <IonRadio slot="end" value={quizzes['res-4-2']}></IonRadio>
475
+                                            <IonLabel>{quizInfo.res4[1]}</IonLabel>
476
+                                            <IonRadio slot="end" value={quizInfo.res4[1]}></IonRadio>
477
+                                            {icon42}
188 478
                                         </IonItem>
189 479
 
190 480
                                         <IonItem>
191
-                                            <IonLabel>{quizzes['res-4-3']}</IonLabel>
192
-                                            <IonRadio slot="end" value={quizzes['res-4-3']}></IonRadio>
481
+                                            <IonLabel>{quizInfo.res4[2]}</IonLabel>
482
+                                            <IonRadio slot="end" value={quizInfo.res4[2]}></IonRadio>
483
+                                            {icon43}
193 484
                                         </IonItem>
194 485
 
195 486
                                         <IonItem>
196
-                                            <IonLabel>{quizzes['res-4-4']}</IonLabel>
197
-                                            <IonRadio slot="end" value={quizzes['res-4-4']}></IonRadio>
487
+                                            <IonLabel>{quizInfo.res4[3]}</IonLabel>
488
+                                            <IonRadio slot="end" value={quizInfo.res4[3]}></IonRadio>
489
+                                            {icon44}
198 490
                                         </IonItem>
199 491
                                     </IonRadioGroup>
200 492
                                 </IonList>
201 493
                             </IonCardContent>
202 494
                         </IonCard>
203
-                    </> : null
204
-                        )
205
-                    })
495
+
496
+                        <IonItem lines="none">
497
+                            {verResPresionado ? (
498
+                                <>
499
+                                    <IonChip>{countres} / 4 respuestas correctas</IonChip>
500
+                                </>
501
+                            ) : null } 
502
+                        </IonItem>
503
+                        
504
+                    </> : <div>Quiz not found</div>
505
+                        
206 506
                 }
207 507
 
208 508
 
@@ -211,12 +511,12 @@ const Questions: React.FC = () => {
211 511
             </IonContent>
212 512
 
213 513
             <IonFooter>
214
-                <IonToolbar>
215
-                    <IonNavLink routerDirection="forward" component={() => <Biography />}>
216
-                        <IonTabButton tab="Biography" href="/Biography">
217
-                            <IonIcon icon={arrowBack} />
218
-                        </IonTabButton>
219
-                    </IonNavLink>
514
+                <IonToolbar className="Footer-Color">
515
+                    <div className='Item-Center'>
516
+                        <IonButtons slot="start">
517
+                            <IonBackButton defaultHref="/ListBiographie"></IonBackButton>
518
+                        </IonButtons>
519
+                    </div>
220 520
                 </IonToolbar>
221 521
             </IonFooter>
222 522
         </IonPage>