initial commit

package.json

@@ -25,7 +25,6 @@
     "react-dom": "^18.2.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^5.0.1",
     "typescript": "^4.1.3",
     "web-vitals": "^0.2.4",
     "workbox-background-sync": "^5.1.4",
@@ -67,7 +66,8 @@
   },
   "devDependencies": {
     "@capacitor/cli": "4.5.0",
-    "@ionic/lab": "3.2.15"
+    "@ionic/lab": "3.2.15",
+    "react-scripts": "5.0.1"
   },
   "description": "An Ionic project"
 }

src/pages/Biography.tsx

@@ -6,6 +6,7 @@ import {
     IonToolbar,
     IonFooter,
     IonNavLink,
+    IonButton,
     IonTabButton,
     IonIcon,
     IonImg
@@ -14,6 +15,7 @@ import { arrowBack } from 'ionicons/icons';
 import React from 'react';
 import './Biography.css';
 import ListBiographies from './ListBiographies';
+import Questions from './Questions';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import RobertoClemente from '../assets/RobertoClemente.jpg';
 
@@ -33,7 +35,12 @@ const Biography: React.FC = () => {
                 <p>Pelotero, Filántropo</p>
                 <p>Fue un afamado pelotero puertorriqueño que formó parte de las Grandes Ligas de Estados Unidos. El notable jardinero derecho y bateador fue el primer latinoamericano en formar parte del Salón de la Fama del Béisbol de Estados Unidos. También fue conocido por su labor filantrópica.</p>
                 <p>Nació el 18 de agosto de 1934 en San Antón, Carolina. Sus padres fueron Melchor Clemente y Luisa Walker. Desde los ocho años mostró habilidades deportivas con su participación en programas de pequeñas ligas y atletismo infantil. Se destacó en pista y campo, deporte en el que ganó varias medallas, específicamente en tiro de jabalina y distancias cortas. Con apenas 14 años, ya formaba parte del equipo de softball de Sello Rojo, compañía procesadora de arroz. Más adelante, formó parte del equipo de pelota aficionado de Juncos. En 1952, con 18 años de edad, ingresó a la liga de beisbol profesional de Puerto Rico, cuando fue contratado por los Cangrejeros de Santurce. El tiempo que formó parte de este equipo fue crucial para su carrera, ya que pudo pulir sus destrezas deportivas.</p>
+            
+                <IonNavLink routerDirection="forward" component={() => <Questions />}>
+                <IonButton>Tomar quiz</IonButton>
+                </IonNavLink>
             </IonContent>
+            
             <IonFooter>
                 <IonToolbar>
                     <IonNavLink routerDirection="forward" component={() => <ListBiographies />}>

src/pages/ListBiographies.tsx

@@ -20,6 +20,7 @@ import {
 import { arrowBack } from 'ionicons/icons';
 import './ListBiographies.css';
 import Biography from './Biography';
+import Questions from './Questions';
 import HomePage from './HomePage';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import RobertoClemente from '../assets/RobertoClemente.jpg';
@@ -29,7 +30,7 @@ const ListBiographies: React.FC = () => {
     <IonPage>
       <IonHeader>
         <IonToolbar>
-          <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>\
+          <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
           <IonTitle>Lista de Biografías</IonTitle>
         </IonToolbar>
       </IonHeader>
@@ -49,6 +50,11 @@ const ListBiographies: React.FC = () => {
           <IonNavLink routerDirection="forward" component={() => <Biography />}>
             <IonButton>Go to</IonButton>
           </IonNavLink>
+
+          <IonNavLink routerDirection="forward" component={() => <Questions />}>
+            <IonButton>Tomar quiz</IonButton>
+          </IonNavLink>
+
         </IonCard>
       </IonContent>
       <IonFooter>

src/pages/Questions.tsx

@@ -0,0 +1,183 @@
+import {
+    IonPage,
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    IonFooter,
+    IonNavLink,
+    IonTabButton,
+    IonIcon,
+    IonImg,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonCheckbox,
+    IonCard,
+    IonCardContent,
+    IonCardHeader,
+    IonCardSubtitle,
+    IonCardTitle,
+    IonButton
+} from '@ionic/react';
+import { arrowBack } from 'ionicons/icons';
+import React from 'react';
+import './Questions.css';
+import Biography from './Biography';
+import EnciclopediaPR from '../assets/EnciclopediaPR.png';
+import RobertoClemente from '../assets/RobertoClemente.jpg';
+
+const Questions: React.FC = () => {
+    return (
+        <IonPage>
+            <IonHeader>
+                <IonToolbar>
+                    <IonTitle>Quiz</IonTitle>
+                    <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
+                </IonToolbar>
+            </IonHeader>
+
+            <IonContent fullscreen className="ion-padding">
+                <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
+                <h1>Quiz sobre la biografia de Roberto Clemente</h1>
+
+                <p>Marque una respuesta por pregunta</p>
+
+                <IonCard>
+                    <IonCardHeader>
+                        <IonCardTitle>¿En que año nació Roberto Clemente?</IonCardTitle>
+                        <IonCardSubtitle></IonCardSubtitle>
+                    </IonCardHeader>
+                    <IonCardContent>
+                        <IonList>
+                        <IonItem>
+                            <IonCheckbox slot="start"></IonCheckbox>
+                            <IonLabel>1934</IonLabel>
+                        </IonItem>
+
+                        <IonItem>
+                            <IonCheckbox slot="start"></IonCheckbox>
+                            <IonLabel>1950</IonLabel>
+                        </IonItem>
+
+                        <IonItem>
+                            <IonCheckbox slot="start"></IonCheckbox>
+                            <IonLabel>1943</IonLabel>
+                        </IonItem>
+
+                        <IonItem>
+                            <IonCheckbox slot="start"></IonCheckbox>
+                            <IonLabel>2022</IonLabel>
+                        </IonItem>
+                        </IonList>
+                    </IonCardContent>
+                </IonCard>
+
+                <IonCard>
+                    <IonCardHeader>
+                        <IonCardTitle>¿En que pueblo se crió?</IonCardTitle>
+                        
+                    </IonCardHeader>
+                    <IonCardContent>
+                        <IonList>
+                        <IonItem>
+                            <IonCheckbox slot="start"></IonCheckbox>
+                            <IonLabel>Caguas</IonLabel>
+                        </IonItem>
+
+                        <IonItem>
+                            <IonCheckbox slot="start"></IonCheckbox>
+                            <IonLabel>Cabo Rojo</IonLabel>
+                        </IonItem>
+
+                        <IonItem>
+                            <IonCheckbox slot="start"></IonCheckbox>
+                            <IonLabel>Luquillo</IonLabel>
+                        </IonItem>
+
+                        <IonItem>
+                            <IonCheckbox slot="start"></IonCheckbox>
+                            <IonLabel>Carolina</IonLabel>
+                        </IonItem>
+                        </IonList>
+                    </IonCardContent>
+                </IonCard>
+
+                <IonCard>
+                    <IonCardHeader>
+                        <IonCardTitle>¿Para qué equipo de la liga de beisbol profesional de Puerto Rico jugó?</IonCardTitle>
+                        
+                    </IonCardHeader>
+                    <IonCardContent>
+                        <IonList>
+                        <IonItem>
+                            <IonCheckbox slot="start"></IonCheckbox>
+                            <IonLabel>Bacalaos de Fajardo</IonLabel>
+                        </IonItem>
+
+                        <IonItem>
+                            <IonCheckbox slot="start"></IonCheckbox>
+                            <IonLabel>Alcapurrias de Loiza</IonLabel>
+                        </IonItem>
+
+                        <IonItem>
+                            <IonCheckbox slot="start"></IonCheckbox>
+                            <IonLabel>Cangrejeros de Santurce</IonLabel>
+                        </IonItem>
+
+                        <IonItem>
+                            <IonCheckbox slot="start"></IonCheckbox>
+                            <IonLabel>Brujos de Guayama</IonLabel>
+                        </IonItem>
+                        </IonList>
+                    </IonCardContent>
+                </IonCard>
+
+                <IonCard>
+                    <IonCardHeader>
+                        <IonCardTitle>¿Para que equipo de la MLB jugó?</IonCardTitle>
+                        
+                    </IonCardHeader>
+                    <IonCardContent>
+                        <IonList>
+                        <IonItem>
+                            <IonCheckbox slot="start"></IonCheckbox>
+                            <IonLabel>New York Yankees</IonLabel>
+                        </IonItem>
+
+                        <IonItem>
+                            <IonCheckbox slot="start"></IonCheckbox>
+                            <IonLabel>Houston Astros</IonLabel>
+                        </IonItem>
+
+                        <IonItem>
+                            <IonCheckbox slot="start"></IonCheckbox>
+                            <IonLabel>Chicago Cubs</IonLabel>
+                        </IonItem>
+
+                        <IonItem>
+                            <IonCheckbox slot="start"></IonCheckbox>
+                            <IonLabel>Pittsburgh Pirates</IonLabel>
+                        </IonItem>
+                        </IonList>
+                    </IonCardContent>
+                </IonCard>
+
+                <IonButton>Verificar respuestas</IonButton>
+
+            </IonContent>
+
+            <IonFooter>
+                <IonToolbar>
+                    <IonNavLink routerDirection="forward" component={() => <Biography />}>
+                        <IonTabButton tab="Biography" href="/Biography">
+                            <IonIcon icon={arrowBack} />
+                        </IonTabButton>
+                    </IonNavLink>
+                </IonToolbar>
+            </IonFooter>
+        </IonPage>
+    );
+};
+
+export default Questions;