Browse Source

First Version

Alex Ortiz 1 year ago
parent
commit
3f2190f633

BIN
src/assets/DonGermán.jpeg View File


BIN
src/assets/MarianoVillaronga.jpg View File


+ 23
- 0
src/data/Biograph.json View File

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

+ 14
- 0
src/pages/AboutUs.css View File

@@ -0,0 +1,14 @@
1
+ion-grid {
2
+    --ion-grid-width: 50%;
3
+
4
+    --ion-grid-width-xs: 50%;
5
+    --ion-grid-width-sm: 288px;
6
+    --ion-grid-width-md: 384px;
7
+    --ion-grid-width-lg: 480px;
8
+    --ion-grid-width-xl: 570px;
9
+}
10
+
11
+ion-col {
12
+    text-align: center;
13
+    align-items: center;
14
+}

+ 14
- 3
src/pages/AboutUs.tsx View File

@@ -8,7 +8,10 @@ import {
8 8
   IonFooter,
9 9
   IonNavLink,
10 10
   IonTabButton,
11
-  IonIcon
11
+  IonIcon,
12
+  IonGrid,
13
+  IonRow,
14
+  IonCol
12 15
 } from '@ionic/react';
13 16
 import { arrowBack } from 'ionicons/icons';
14 17
 import React from 'react';
@@ -21,8 +24,16 @@ const AboutUs: React.FC = () => {
21 24
     <IonPage>
22 25
       <IonHeader>
23 26
         <IonToolbar>
24
-          <IonTitle>Más sobre nosotros</IonTitle>
25
-          <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
27
+          <IonGrid fixed={true}>
28
+            <IonRow>
29
+              <IonCol></IonCol>
30
+              <IonCol>
31
+                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
32
+                <IonTitle>Más sobre nosotros</IonTitle>
33
+              </IonCol>
34
+              <IonCol></IonCol>
35
+            </IonRow>
36
+          </IonGrid>
26 37
         </IonToolbar>
27 38
       </IonHeader>
28 39
       <IonContent fullscreen className="ion-padding">

+ 14
- 0
src/pages/Biography.css View File

@@ -0,0 +1,14 @@
1
+ion-grid {
2
+    --ion-grid-width: 50%;
3
+
4
+    --ion-grid-width-xs: 50%;
5
+    --ion-grid-width-sm: 288px;
6
+    --ion-grid-width-md: 384px;
7
+    --ion-grid-width-lg: 480px;
8
+    --ion-grid-width-xl: 570px;
9
+}
10
+
11
+ion-col {
12
+    text-align: center;
13
+    align-items: center;
14
+}

+ 17
- 6
src/pages/Biography.tsx View File

@@ -9,7 +9,10 @@ import {
9 9
     IonButton,
10 10
     IonTabButton,
11 11
     IonIcon,
12
-    IonImg
12
+    IonImg,
13
+    IonGrid,
14
+    IonRow,
15
+    IonCol
13 16
 } from '@ionic/react';
14 17
 import { arrowBack } from 'ionicons/icons';
15 18
 import React from 'react';
@@ -24,8 +27,16 @@ const Biography: React.FC = () => {
24 27
         <IonPage>
25 28
             <IonHeader>
26 29
                 <IonToolbar>
27
-                    <IonTitle>Biografía</IonTitle>
28
-                    <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
30
+                    <IonGrid fixed={true}>
31
+                        <IonRow>
32
+                            <IonCol></IonCol>
33
+                            <IonCol>
34
+                                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
35
+                                <IonTitle>Biografía</IonTitle>
36
+                            </IonCol>
37
+                            <IonCol></IonCol>
38
+                        </IonRow>
39
+                    </IonGrid>
29 40
                 </IonToolbar>
30 41
             </IonHeader>
31 42
             <IonContent fullscreen className="ion-padding">
@@ -35,12 +46,12 @@ const Biography: React.FC = () => {
35 46
                 <p>Pelotero, Filántropo</p>
36 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>
37 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>
38
-            
49
+
39 50
                 <IonNavLink routerDirection="forward" component={() => <Questions />}>
40
-                <IonButton>Tomar quiz</IonButton>
51
+                    <IonButton>Tomar quiz</IonButton>
41 52
                 </IonNavLink>
42 53
             </IonContent>
43
-            
54
+
44 55
             <IonFooter>
45 56
                 <IonToolbar>
46 57
                     <IonNavLink routerDirection="forward" component={() => <ListBiographies />}>

+ 14
- 0
src/pages/Capsule.css View File

@@ -0,0 +1,14 @@
1
+ion-grid {
2
+    --ion-grid-width: 50%;
3
+
4
+    --ion-grid-width-xs: 50%;
5
+    --ion-grid-width-sm: 288px;
6
+    --ion-grid-width-md: 384px;
7
+    --ion-grid-width-lg: 480px;
8
+    --ion-grid-width-xl: 570px;
9
+}
10
+
11
+ion-col {
12
+    text-align: center;
13
+    align-items: center;
14
+}

+ 14
- 3
src/pages/Capsule.tsx View File

@@ -8,7 +8,10 @@ import {
8 8
     IonNavLink,
9 9
     IonTabButton,
10 10
     IonIcon,
11
-    IonImg
11
+    IonImg,
12
+    IonGrid,
13
+    IonRow,
14
+    IonCol
12 15
 } from '@ionic/react';
13 16
 import { arrowBack } from 'ionicons/icons';
14 17
 import React from 'react';
@@ -22,8 +25,16 @@ const Capsule: React.FC = () => {
22 25
         <IonPage>
23 26
             <IonHeader>
24 27
                 <IonToolbar>
25
-                    <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
26
-                    <IonTitle>Cápsula</IonTitle>
28
+                    <IonGrid fixed={true}>
29
+                        <IonRow>
30
+                            <IonCol></IonCol>
31
+                            <IonCol>
32
+                                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
33
+                                <IonTitle>Cápsula</IonTitle>
34
+                            </IonCol>
35
+                            <IonCol></IonCol>
36
+                        </IonRow>
37
+                    </IonGrid>
27 38
                 </IonToolbar>
28 39
             </IonHeader>
29 40
             <IonContent fullscreen className="ion-padding">

+ 15
- 0
src/pages/HomePage.css View File

@@ -1,4 +1,19 @@
1 1
 ion-card-header.ios {
2 2
     display: flex;
3 3
     flex-flow: column-reverse;
4
+}
5
+
6
+ion-grid {
7
+    --ion-grid-width: 50%;
8
+
9
+    --ion-grid-width-xs: 50%;
10
+    --ion-grid-width-sm: 288px;
11
+    --ion-grid-width-md: 384px;
12
+    --ion-grid-width-lg: 480px;
13
+    --ion-grid-width-xl: 570px;
14
+}
15
+
16
+ion-col {
17
+    text-align: center;
18
+    align-items: center;
4 19
 }

+ 14
- 3
src/pages/HomePage.tsx View File

@@ -14,7 +14,10 @@ import {
14 14
   IonTabButton,
15 15
   IonIcon,
16 16
   IonLabel,
17
-  IonImg
17
+  IonImg,
18
+  IonCol,
19
+  IonGrid,
20
+  IonRow
18 21
 } from '@ionic/react';
19 22
 import { square } from 'ionicons/icons';
20 23
 import './HomePage.css';
@@ -28,8 +31,16 @@ const HomePage: React.FC = () => {
28 31
     <IonPage>
29 32
       <IonHeader>
30 33
         <IonToolbar>
31
-          <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
32
-          <IonTitle>Hogar</IonTitle>
34
+          <IonGrid fixed={true}>
35
+            <IonRow>
36
+              <IonCol></IonCol>
37
+              <IonCol>
38
+                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
39
+                <IonTitle>Hogar</IonTitle>
40
+              </IonCol>
41
+              <IonCol></IonCol>
42
+            </IonRow>
43
+          </IonGrid>
33 44
         </IonToolbar>
34 45
       </IonHeader>
35 46
       <IonContent fullscreen>

+ 14
- 0
src/pages/ListBiographies.css View File

@@ -0,0 +1,14 @@
1
+ion-grid {
2
+    --ion-grid-width: 50%;
3
+
4
+    --ion-grid-width-xs: 50%;
5
+    --ion-grid-width-sm: 288px;
6
+    --ion-grid-width-md: 384px;
7
+    --ion-grid-width-lg: 480px;
8
+    --ion-grid-width-xl: 570px;
9
+}
10
+
11
+ion-col {
12
+    text-align: center;
13
+    align-items: center;
14
+}

+ 39
- 19
src/pages/ListBiographies.tsx View File

@@ -15,7 +15,10 @@ import {
15 15
   IonNavLink,
16 16
   IonFooter,
17 17
   IonTabButton,
18
-  IonIcon
18
+  IonIcon,
19
+  IonGrid,
20
+  IonRow,
21
+  IonCol
19 22
 } from '@ionic/react';
20 23
 import { arrowBack } from 'ionicons/icons';
21 24
 import './ListBiographies.css';
@@ -24,38 +27,55 @@ import Questions from './Questions';
24 27
 import HomePage from './HomePage';
25 28
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
26 29
 import RobertoClemente from '../assets/RobertoClemente.jpg';
30
+import ListBio from '../data/Biograph.json';
27 31
 
28 32
 const ListBiographies: React.FC = () => {
29 33
   return (
30 34
     <IonPage>
31 35
       <IonHeader>
32 36
         <IonToolbar>
33
-          <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
34
-          <IonTitle>Lista de Biografías</IonTitle>
37
+          <IonGrid fixed={true}>
38
+            <IonRow>
39
+              <IonCol></IonCol>
40
+              <IonCol>
41
+                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
42
+                <IonTitle>Lista de Biografías</IonTitle>
43
+              </IonCol>
44
+              <IonCol></IonCol>
45
+            </IonRow>
46
+          </IonGrid>
35 47
         </IonToolbar>
36 48
       </IonHeader>
37 49
       <IonContent fullscreen>
38 50
         <IonSearchbar></IonSearchbar>
39
-        <IonCard>
40
-          <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
41
-          <IonCardHeader>
42
-            <IonCardTitle>Roberto Clemente</IonCardTitle>
43
-            <IonCardSubtitle>Tabs: Deportista</IonCardSubtitle>
44
-          </IonCardHeader>
45 51
 
46
-          <IonCardContent>
47
-            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.
48
-          </IonCardContent>
52
+        {
53
+          ListBio && ListBio.map(listbio => {
54
+            return (
55
+              <>
56
+                <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>
49 67
 
50
-          <IonNavLink routerDirection="forward" component={() => <Biography />}>
51
-            <IonButton>Go to</IonButton>
52
-          </IonNavLink>
68
+                  <IonNavLink routerDirection="forward" component={() => <Questions />}>
69
+                    <IonButton>Tomar quiz</IonButton>
70
+                  </IonNavLink>
71
+
72
+                </IonCard>
73
+              </>
74
+            )
75
+          })
76
+        }
53 77
 
54
-          <IonNavLink routerDirection="forward" component={() => <Questions />}>
55
-            <IonButton>Tomar quiz</IonButton>
56
-          </IonNavLink>
57 78
 
58
-        </IonCard>
59 79
       </IonContent>
60 80
       <IonFooter>
61 81
         <IonToolbar>

+ 14
- 0
src/pages/ListCapsules.css View File

@@ -0,0 +1,14 @@
1
+ion-grid {
2
+    --ion-grid-width: 50%;
3
+
4
+    --ion-grid-width-xs: 50%;
5
+    --ion-grid-width-sm: 288px;
6
+    --ion-grid-width-md: 384px;
7
+    --ion-grid-width-lg: 480px;
8
+    --ion-grid-width-xl: 570px;
9
+}
10
+
11
+ion-col {
12
+    text-align: center;
13
+    align-items: center;
14
+}

+ 71
- 61
src/pages/ListCapsules.tsx View File

@@ -1,64 +1,74 @@
1 1
 import {
2
-    IonList,
3
-    IonItem,
4
-    IonLabel,
5
-    IonImg,
6
-    IonSearchbar,
7
-    IonContent,
8
-    IonHeader,
9
-    IonPage,
10
-    IonTitle,
11
-    IonToolbar,
12
-    IonButton,
13
-    IonNavLink,
14
-    IonFooter,
15
-    IonTabButton,
16
-    IonIcon
17
-  } from '@ionic/react';
18
-  import { arrowBack } from 'ionicons/icons';
19
-  import './ListCapsules.css';
20
-  import HomePage from './HomePage';
21
-  import Capsule from './Capsule'
22
-  import EnciclopediaPR from '../assets/EnciclopediaPR.png';
2
+  IonList,
3
+  IonItem,
4
+  IonLabel,
5
+  IonImg,
6
+  IonSearchbar,
7
+  IonContent,
8
+  IonHeader,
9
+  IonPage,
10
+  IonTitle,
11
+  IonToolbar,
12
+  IonButton,
13
+  IonNavLink,
14
+  IonFooter,
15
+  IonTabButton,
16
+  IonIcon,
17
+  IonGrid,
18
+  IonRow,
19
+  IonCol
20
+} from '@ionic/react';
21
+import { arrowBack } from 'ionicons/icons';
22
+import './ListCapsules.css';
23
+import HomePage from './HomePage';
24
+import Capsule from './Capsule'
25
+import EnciclopediaPR from '../assets/EnciclopediaPR.png';
23 26
 
24
-  const ListCapsules: React.FC = () => {
25
-    return (
26
-      <IonPage>
27
-        <IonHeader>
28
-          <IonToolbar>
29
-            <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
30
-            <IonTitle>Lista de Cápsulas de Contenido</IonTitle>
31
-          </IonToolbar>
32
-        </IonHeader>
33
-        <IonContent fullscreen>
34
-            <IonSearchbar></IonSearchbar>
35
-            <IonList inset={true}>
36
-                <IonItem>
37
-                    <IonLabel>Breve Historia del baile en Puerto Rico</IonLabel>
38
-                    <IonNavLink routerDirection="forward" component={() => <Capsule />}>
39
-                    <IonButton>Visitar</IonButton>
40
-          </IonNavLink>
41
-                </IonItem>
42
-                <IonItem>
43
-                    <IonLabel>Cápsula#2</IonLabel>
44
-                </IonItem>
45
-                <IonItem>
46
-                    <IonLabel>Cápsula#3</IonLabel>
47
-                </IonItem>
48
-            </IonList>
49
-        </IonContent>
50
-        <IonFooter>
51
-          <IonToolbar>
52
-            <IonNavLink routerDirection="forward" component={() => <HomePage />}>
53
-                <IonTabButton tab="HomePage" href="/HomePage">
54
-                <IonIcon icon={arrowBack} />
55
-              </IonTabButton>
27
+const ListCapsules: React.FC = () => {
28
+  return (
29
+    <IonPage>
30
+      <IonHeader>
31
+        <IonToolbar>
32
+          <IonGrid fixed={true}>
33
+            <IonRow>
34
+              <IonCol></IonCol>
35
+              <IonCol>
36
+                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
37
+                <IonTitle>Lista de Cápsulas de Contenido</IonTitle>
38
+              </IonCol>
39
+              <IonCol></IonCol>
40
+            </IonRow>
41
+          </IonGrid>
42
+        </IonToolbar>
43
+      </IonHeader>
44
+      <IonContent fullscreen>
45
+        <IonSearchbar></IonSearchbar>
46
+        <IonList inset={true}>
47
+          <IonItem>
48
+            <IonLabel>Breve Historia del baile en Puerto Rico</IonLabel>
49
+            <IonNavLink routerDirection="forward" component={() => <Capsule />}>
50
+              <IonButton>Visitar</IonButton>
56 51
             </IonNavLink>
57
-          </IonToolbar>
58
-        </IonFooter>
59
-      </IonPage>
60
-    );
61
-  };
62
-  
63
-  export default ListCapsules;
64
-  
52
+          </IonItem>
53
+          <IonItem>
54
+            <IonLabel>Cápsula#2</IonLabel>
55
+          </IonItem>
56
+          <IonItem>
57
+            <IonLabel>Cápsula#3</IonLabel>
58
+          </IonItem>
59
+        </IonList>
60
+      </IonContent>
61
+      <IonFooter>
62
+        <IonToolbar>
63
+          <IonNavLink routerDirection="forward" component={() => <HomePage />}>
64
+            <IonTabButton tab="HomePage" href="/HomePage">
65
+              <IonIcon icon={arrowBack} />
66
+            </IonTabButton>
67
+          </IonNavLink>
68
+        </IonToolbar>
69
+      </IonFooter>
70
+    </IonPage>
71
+  );
72
+};
73
+
74
+export default ListCapsules;

+ 14
- 0
src/pages/Questions.css View File

@@ -0,0 +1,14 @@
1
+ion-grid {
2
+    --ion-grid-width: 50%;
3
+
4
+    --ion-grid-width-xs: 50%;
5
+    --ion-grid-width-sm: 288px;
6
+    --ion-grid-width-md: 384px;
7
+    --ion-grid-width-lg: 480px;
8
+    --ion-grid-width-xl: 570px;
9
+}
10
+
11
+ion-col {
12
+    text-align: center;
13
+    align-items: center;
14
+}

+ 93
- 82
src/pages/Questions.tsx View File

@@ -18,7 +18,10 @@ import {
18 18
     IonCardHeader,
19 19
     IonCardSubtitle,
20 20
     IonCardTitle,
21
-    IonButton
21
+    IonButton,
22
+    IonGrid,
23
+    IonRow,
24
+    IonCol
22 25
 } from '@ionic/react';
23 26
 import { arrowBack } from 'ionicons/icons';
24 27
 import React from 'react';
@@ -32,8 +35,16 @@ const Questions: React.FC = () => {
32 35
         <IonPage>
33 36
             <IonHeader>
34 37
                 <IonToolbar>
35
-                    <IonTitle>Quiz</IonTitle>
36
-                    <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
38
+                    <IonGrid fixed={true}>
39
+                        <IonRow>
40
+                            <IonCol></IonCol>
41
+                            <IonCol>
42
+                                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
43
+                                <IonTitle>Quiz</IonTitle>
44
+                            </IonCol>
45
+                            <IonCol></IonCol>
46
+                        </IonRow>
47
+                    </IonGrid>
37 48
                 </IonToolbar>
38 49
             </IonHeader>
39 50
 
@@ -50,25 +61,25 @@ const Questions: React.FC = () => {
50 61
                     </IonCardHeader>
51 62
                     <IonCardContent>
52 63
                         <IonList>
53
-                        <IonItem>
54
-                            <IonCheckbox slot="start"></IonCheckbox>
55
-                            <IonLabel>1934</IonLabel>
56
-                        </IonItem>
57
-
58
-                        <IonItem>
59
-                            <IonCheckbox slot="start"></IonCheckbox>
60
-                            <IonLabel>1950</IonLabel>
61
-                        </IonItem>
62
-
63
-                        <IonItem>
64
-                            <IonCheckbox slot="start"></IonCheckbox>
65
-                            <IonLabel>1943</IonLabel>
66
-                        </IonItem>
67
-
68
-                        <IonItem>
69
-                            <IonCheckbox slot="start"></IonCheckbox>
70
-                            <IonLabel>2022</IonLabel>
71
-                        </IonItem>
64
+                            <IonItem>
65
+                                <IonCheckbox slot="start"></IonCheckbox>
66
+                                <IonLabel>1934</IonLabel>
67
+                            </IonItem>
68
+
69
+                            <IonItem>
70
+                                <IonCheckbox slot="start"></IonCheckbox>
71
+                                <IonLabel>1950</IonLabel>
72
+                            </IonItem>
73
+
74
+                            <IonItem>
75
+                                <IonCheckbox slot="start"></IonCheckbox>
76
+                                <IonLabel>1943</IonLabel>
77
+                            </IonItem>
78
+
79
+                            <IonItem>
80
+                                <IonCheckbox slot="start"></IonCheckbox>
81
+                                <IonLabel>2022</IonLabel>
82
+                            </IonItem>
72 83
                         </IonList>
73 84
                     </IonCardContent>
74 85
                 </IonCard>
@@ -76,29 +87,29 @@ const Questions: React.FC = () => {
76 87
                 <IonCard>
77 88
                     <IonCardHeader>
78 89
                         <IonCardTitle>¿En que pueblo se crió?</IonCardTitle>
79
-                        
90
+
80 91
                     </IonCardHeader>
81 92
                     <IonCardContent>
82 93
                         <IonList>
83
-                        <IonItem>
84
-                            <IonCheckbox slot="start"></IonCheckbox>
85
-                            <IonLabel>Caguas</IonLabel>
86
-                        </IonItem>
87
-
88
-                        <IonItem>
89
-                            <IonCheckbox slot="start"></IonCheckbox>
90
-                            <IonLabel>Cabo Rojo</IonLabel>
91
-                        </IonItem>
92
-
93
-                        <IonItem>
94
-                            <IonCheckbox slot="start"></IonCheckbox>
95
-                            <IonLabel>Luquillo</IonLabel>
96
-                        </IonItem>
97
-
98
-                        <IonItem>
99
-                            <IonCheckbox slot="start"></IonCheckbox>
100
-                            <IonLabel>Carolina</IonLabel>
101
-                        </IonItem>
94
+                            <IonItem>
95
+                                <IonCheckbox slot="start"></IonCheckbox>
96
+                                <IonLabel>Caguas</IonLabel>
97
+                            </IonItem>
98
+
99
+                            <IonItem>
100
+                                <IonCheckbox slot="start"></IonCheckbox>
101
+                                <IonLabel>Cabo Rojo</IonLabel>
102
+                            </IonItem>
103
+
104
+                            <IonItem>
105
+                                <IonCheckbox slot="start"></IonCheckbox>
106
+                                <IonLabel>Luquillo</IonLabel>
107
+                            </IonItem>
108
+
109
+                            <IonItem>
110
+                                <IonCheckbox slot="start"></IonCheckbox>
111
+                                <IonLabel>Carolina</IonLabel>
112
+                            </IonItem>
102 113
                         </IonList>
103 114
                     </IonCardContent>
104 115
                 </IonCard>
@@ -106,29 +117,29 @@ const Questions: React.FC = () => {
106 117
                 <IonCard>
107 118
                     <IonCardHeader>
108 119
                         <IonCardTitle>¿Para qué equipo de la liga de beisbol profesional de Puerto Rico jugó?</IonCardTitle>
109
-                        
120
+
110 121
                     </IonCardHeader>
111 122
                     <IonCardContent>
112 123
                         <IonList>
113
-                        <IonItem>
114
-                            <IonCheckbox slot="start"></IonCheckbox>
115
-                            <IonLabel>Bacalaos de Fajardo</IonLabel>
116
-                        </IonItem>
117
-
118
-                        <IonItem>
119
-                            <IonCheckbox slot="start"></IonCheckbox>
120
-                            <IonLabel>Alcapurrias de Loiza</IonLabel>
121
-                        </IonItem>
122
-
123
-                        <IonItem>
124
-                            <IonCheckbox slot="start"></IonCheckbox>
125
-                            <IonLabel>Cangrejeros de Santurce</IonLabel>
126
-                        </IonItem>
127
-
128
-                        <IonItem>
129
-                            <IonCheckbox slot="start"></IonCheckbox>
130
-                            <IonLabel>Brujos de Guayama</IonLabel>
131
-                        </IonItem>
124
+                            <IonItem>
125
+                                <IonCheckbox slot="start"></IonCheckbox>
126
+                                <IonLabel>Bacalaos de Fajardo</IonLabel>
127
+                            </IonItem>
128
+
129
+                            <IonItem>
130
+                                <IonCheckbox slot="start"></IonCheckbox>
131
+                                <IonLabel>Alcapurrias de Loiza</IonLabel>
132
+                            </IonItem>
133
+
134
+                            <IonItem>
135
+                                <IonCheckbox slot="start"></IonCheckbox>
136
+                                <IonLabel>Cangrejeros de Santurce</IonLabel>
137
+                            </IonItem>
138
+
139
+                            <IonItem>
140
+                                <IonCheckbox slot="start"></IonCheckbox>
141
+                                <IonLabel>Brujos de Guayama</IonLabel>
142
+                            </IonItem>
132 143
                         </IonList>
133 144
                     </IonCardContent>
134 145
                 </IonCard>
@@ -136,29 +147,29 @@ const Questions: React.FC = () => {
136 147
                 <IonCard>
137 148
                     <IonCardHeader>
138 149
                         <IonCardTitle>¿Para que equipo de la MLB jugó?</IonCardTitle>
139
-                        
150
+
140 151
                     </IonCardHeader>
141 152
                     <IonCardContent>
142 153
                         <IonList>
143
-                        <IonItem>
144
-                            <IonCheckbox slot="start"></IonCheckbox>
145
-                            <IonLabel>New York Yankees</IonLabel>
146
-                        </IonItem>
147
-
148
-                        <IonItem>
149
-                            <IonCheckbox slot="start"></IonCheckbox>
150
-                            <IonLabel>Houston Astros</IonLabel>
151
-                        </IonItem>
152
-
153
-                        <IonItem>
154
-                            <IonCheckbox slot="start"></IonCheckbox>
155
-                            <IonLabel>Chicago Cubs</IonLabel>
156
-                        </IonItem>
157
-
158
-                        <IonItem>
159
-                            <IonCheckbox slot="start"></IonCheckbox>
160
-                            <IonLabel>Pittsburgh Pirates</IonLabel>
161
-                        </IonItem>
154
+                            <IonItem>
155
+                                <IonCheckbox slot="start"></IonCheckbox>
156
+                                <IonLabel>New York Yankees</IonLabel>
157
+                            </IonItem>
158
+
159
+                            <IonItem>
160
+                                <IonCheckbox slot="start"></IonCheckbox>
161
+                                <IonLabel>Houston Astros</IonLabel>
162
+                            </IonItem>
163
+
164
+                            <IonItem>
165
+                                <IonCheckbox slot="start"></IonCheckbox>
166
+                                <IonLabel>Chicago Cubs</IonLabel>
167
+                            </IonItem>
168
+
169
+                            <IonItem>
170
+                                <IonCheckbox slot="start"></IonCheckbox>
171
+                                <IonLabel>Pittsburgh Pirates</IonLabel>
172
+                            </IonItem>
162 173
                         </IonList>
163 174
                     </IonCardContent>
164 175
                 </IonCard>