Eliminacion de los titulos en el header, imagenes correspondientes en pagina de Quiz

src/data/BioInfo.ts

@@ -16,4 +16,13 @@ export interface BioInfo {
 
 export const getMessages = () => ListBio;
 
-export const getMessage = (id: number) => ListBio.find(m => m.id === id);
+export const getMessage = (id: number) => ListBio.find(m => m.id === id);
+
+export function getBioInfoPhoto (id: number) {
+    const bio = ListBio.find(bio => bio.id === id);
+
+    if (bio) {
+        return bio.photo;
+    }
+    return undefined;
+}

src/data/Biograph.json

@@ -1,7 +1,7 @@
 [
     {
         "id": 1,
-        "title": "Roberto Clemente",
+        "title": "Roberto Clemente Walker",
         "tags": "Pelotero, Filántropo",
         "birth": "Nació: 1934",
         "place": "Lugar: San Antón, Carolina",
@@ -118,7 +118,7 @@
     },
     {
         "id": 10,
-        "title": "Marian Villaronga Toro",
+        "title": "Mariano Villaronga Toro",
         "tags": "Educador, Funcionario público",
         "birth": "Nació: ",
         "place": "Lugar: ",

src/data/Quizzes.json

@@ -1,7 +1,7 @@
 [
     {
         "id": 1,
-        "title": "Roberto Clemente",
+        "title": "Roberto Clemente Walker",
 
         "pregunta1": "¿En que año nació Roberto Clemente?",
         "res1":["1934","1950","1943","2022"],
@@ -189,4 +189,25 @@
         "res4": ["41","42","43","44"],
         "correcta4":"44"
     }
+    ,
+    {
+        "id":10,
+        "title": "Mariano Villaronga Toro",
+
+        "pregunta1": "Mariano1",
+        "res1": ["11","12","13","14"],
+        "correcta1":"11",
+
+        "pregunta2": "Mariano2",
+        "res2": ["21","22","23","24"],
+        "correcta2":"22",
+
+        "pregunta3": "Mariano3",
+        "res3": ["31","32","33","34"],
+        "correcta3":"33",
+
+        "pregunta4": "Mariano4",
+        "res4": ["41","42","43","44"],
+        "correcta4":"44"
+    }
 ]

src/pages/AboutUs.tsx

@@ -2,7 +2,6 @@ import {
   IonImg,
   IonContent,
   IonHeader,
-  IonTitle,
   IonPage,
   IonToolbar,
   IonFooter,
@@ -27,7 +26,7 @@ const AboutUs: React.FC = () => {
               <IonCol></IonCol>
               <IonCol>
                 <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
-                <IonTitle>Más sobre nosotros</IonTitle>
+                
               </IonCol>
               <IonCol></IonCol>
             </IonRow>

src/pages/Biography.tsx

@@ -2,7 +2,6 @@ import {
     IonPage,
     IonContent,
     IonHeader,
-    IonTitle,
     IonToolbar,
     IonFooter,
     IonImg,
@@ -40,7 +39,7 @@ const Biography: React.FC = () => {
                             <IonCol></IonCol>
                             <IonCol>
                                 <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
-                                <IonTitle>Biografía</IonTitle>
+                                
                             </IonCol>
                             <IonCol></IonCol>
                         </IonRow>

src/pages/Capsule.tsx

@@ -2,7 +2,6 @@ import {
     IonPage,
     IonContent,
     IonHeader,
-    IonTitle,
     IonToolbar,
     IonFooter,
     IonImg,
@@ -41,7 +40,7 @@ const Capsule: React.FC = () => {
                             <IonCol></IonCol>
                             <IonCol>
                                 <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
-                                <IonTitle>Cápsula</IonTitle>
+                                
                             </IonCol>
                             <IonCol></IonCol>
                         </IonRow>

src/pages/HomePage.tsx

@@ -2,7 +2,6 @@ import {
   IonContent,
   IonHeader,
   IonPage,
-  IonTitle,
   IonToolbar,
   IonCard,
   IonCardHeader,
@@ -33,7 +32,7 @@ const HomePage: React.FC = () => {
               <IonCol></IonCol>
               <IonCol>
                 <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
-                <IonTitle>Hogar</IonTitle>
+                
               </IonCol>
               <IonCol></IonCol>
             </IonRow>

src/pages/ListBiographies.tsx

@@ -3,7 +3,6 @@ import {
   IonContent,
   IonHeader,
   IonPage,
-  IonTitle,
   IonToolbar,
   IonFooter,
   IonGrid,
@@ -26,7 +25,7 @@ const ListBiographies: React.FC = () => {
               <IonCol></IonCol>
               <IonCol>
                 <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
-                <IonTitle>Lista de Biografías</IonTitle>
+                
               </IonCol>
               <IonCol></IonCol>
             </IonRow>

src/pages/ListCapsules.tsx

@@ -3,7 +3,6 @@ import {
   IonContent,
   IonHeader,
   IonPage,
-  IonTitle,
   IonToolbar,
   IonFooter,
   IonGrid,
@@ -26,7 +25,7 @@ const ListCapsules: React.FC = () => {
               <IonCol></IonCol>
               <IonCol>
                 <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
-                <IonTitle>Lista de Cápsulas de Contenido</IonTitle>
+                
               </IonCol>
               <IonCol></IonCol>
             </IonRow>

src/pages/Questions.tsx

@@ -2,7 +2,6 @@ import {
     IonPage,
     IonContent,
     IonHeader,
-    IonTitle,
     IonToolbar,
     IonFooter,
     IonImg,
@@ -30,8 +29,8 @@ import { useParams } from 'react-router';
 import React, { useState } from 'react';
 import './Questions.css';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
-import RobertoClemente from '../assets/RobertoClemente.jpg';
 import { QuizInfo, getQuiz } from '../data/QuizInfo';
+import { getBioInfoPhoto } from '../data/BioInfo';
 import { thumbsDown, thumbsUp } from 'ionicons/icons';
 
 
@@ -80,9 +79,9 @@ const Questions: React.FC = () => {
         ThumbsDowmn para seleccion incorrecta.
     */
     const verificarRes = () => {
-        // borrar console logs para el release
+        /* borrar console logs para el release
         console.log([qres1, qres2, qres3, qres4]);
-        console.log(countres);
+        console.log(countres);*/
 
         // reset a los icons, count por si hubo seleccion anterior
         let count = 0;
@@ -317,6 +316,9 @@ const Questions: React.FC = () => {
     const [quizInfo, setQuiz] = useState<QuizInfo>();
     const params = useParams<{ id: string }>();
 
+    // Foto a ser desplegada en el tope del quiz
+    const photo = getBioInfoPhoto(parseInt(params.id, 10));
+
     useIonViewWillEnter(() => {
         const quiz = getQuiz(parseInt(params.id, 10));
         setQuiz(quiz);
@@ -331,7 +333,7 @@ const Questions: React.FC = () => {
                             <IonCol></IonCol>
                             <IonCol>
                                 <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
-                                <IonTitle>Quiz</IonTitle>
+                                
                             </IonCol>
                             <IonCol></IonCol>
                         </IonRow>
@@ -340,7 +342,7 @@ const Questions: React.FC = () => {
             </IonHeader>
             
             <IonContent fullscreen className="ion-padding">
-                <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
+                <IonImg style={{ height: 300, width: 300 }} src={photo} alt='Foto de Personaje'></IonImg>
 
                 {
                     quizInfo ?