Routing de quizzes dentro de la pagina de biografia arreglado. Color de header modifiacado

src/components/BiographySearchBar.tsx

@@ -12,7 +12,7 @@ import {
   IonIcon,
 } from '@ionic/react';
 import biographies from '../data/Biograph.json'
-import { square } from 'ionicons/icons';
+import { clipboardOutline } from 'ionicons/icons';
 
 function SearchBar() {
 
@@ -47,7 +47,7 @@ function SearchBar() {
               </IonCardContent>
             </IonItem>
             <IonItem routerLink={`/Question/${result.id}`} detail={true}>
-              <IonIcon icon={square} />Tomar quiz
+              <IonIcon icon={clipboardOutline} />Tomar quiz
             </IonItem>
           </IonCard>
         </>

src/data/Quizzes.json

@@ -19,48 +19,49 @@
         "res4": ["New York Yankees","Houston Astros","Chicago Cubs","Pittsburgh Pirates"],
         "correcta4":"Pittsburgh Pirates"
 
-    },
+    }
+    ,
     {
         "id":2,
-        "title": "Rebekah Colberg Cabrera",
-        
-        "pregunta1": "¿En que año nació Rebekah Colberg Cabrera?",
+        "title": "German Rieckhoff Sampoyo",
+
+        "pregunta1": "¿En que año nació German Rieckhoff Sampoyo1?",
         "res1": ["11","12","13","14"],
         "correcta1":"11",
 
-        "pregunta2": "¿En que año nació Rebekah Colberg Cabrera?",
+        "pregunta2": "¿En que año nació German Rieckhoff Sampoyo2?",
         "res2": ["21","22","23","24"],
         "correcta2":"22",
 
-        "pregunta3": "¿En que año nació Rebekah Colberg Cabrera3",
+        "pregunta3": "¿En que año nació German Rieckhoff Sampoyo3",
         "res3": ["31","32","33","34"],
         "correcta3":"33",
 
-        "pregunta4": "¿En que año nació Rebekah Colberg Cabrera4",
+        "pregunta4": "¿En que año nació German Rieckhoff Sampoyo4",
         "res4": ["41","42","43","44"],
         "correcta4":"44"
-
     }
     ,
     {
         "id":3,
-        "title": "German Rieckhoff Sampoyo",
-
-        "pregunta1": "¿En que año nació German Rieckhoff Sampoyo1?",
+        "title": "Rebekah Colberg Cabrera",
+        
+        "pregunta1": "¿En que año nació Rebekah Colberg Cabrera?",
         "res1": ["11","12","13","14"],
         "correcta1":"11",
 
-        "pregunta2": "¿En que año nació German Rieckhoff Sampoyo2?",
+        "pregunta2": "¿En que año nació Rebekah Colberg Cabrera?",
         "res2": ["21","22","23","24"],
         "correcta2":"22",
 
-        "pregunta3": "¿En que año nació German Rieckhoff Sampoyo3",
+        "pregunta3": "¿En que año nació Rebekah Colberg Cabrera3",
         "res3": ["31","32","33","34"],
         "correcta3":"33",
 
-        "pregunta4": "¿En que año nació German Rieckhoff Sampoyo4",
+        "pregunta4": "¿En que año nació Rebekah Colberg Cabrera4",
         "res4": ["41","42","43","44"],
         "correcta4":"44"
+
     }
     ,
     {

src/pages/AboutUs.css

@@ -21,7 +21,7 @@ ion-col {
 }
 
 .Header-Color {
-    --background: #4de9d9;
+    --background: #59b8bb;
 }
 
 .Footer-Color {

src/pages/Biography.css

@@ -21,7 +21,7 @@ ion-col {
 }
 
 .Header-Color {
-    --background: #4de9d9;
+    --background: #59b8bb;
 }
 
 .Footer-Color {

src/pages/Biography.tsx

@@ -21,7 +21,7 @@ import { BioInfo, getMessage } from '../data/BioInfo';
 import './Biography.css';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import RobertoClemente from '../assets/RobertoClemente.jpg';
-import { square } from 'ionicons/icons';
+import { clipboardOutline } from 'ionicons/icons';
 
 const Biography: React.FC = () => {
     const [bioinfo, setMessage] = useState<BioInfo>();
@@ -74,8 +74,8 @@ const Biography: React.FC = () => {
                         <p>{bioinfo.Text10}</p>
                         <a href={bioinfo.url} target="_blank" rel="noreferrer">For more information press here</a>
                         <p> </p>
-                        <IonItem routerLink={`/Question`} detail={true}>
-                            <IonIcon icon={square} />Tomar quiz
+                        <IonItem routerLink={`/Question/${bioinfo.id}`} detail={true}>
+                            <IonIcon icon={clipboardOutline} />Tomar quiz
                         </IonItem>
                     </>
                 ) : (

src/pages/Capsule.css

@@ -21,7 +21,7 @@ ion-col {
 }
 
 .Header-Color {
-    --background: #4de9d9;
+    --background: #59b8bb;
 }
 
 .Footer-Color {

src/pages/HomePage.css

@@ -19,7 +19,7 @@ ion-col {
 }
 
 .Header-Color {
-    --background: #4de9d9;
+    --background: #59b8bb;
 }
 
 .Footer-Color {

src/pages/HomePage.tsx

@@ -18,7 +18,7 @@ import {
   IonRow,
   IonItem
 } from '@ionic/react';
-import { square } from 'ionicons/icons';
+import { informationCircleOutline } from 'ionicons/icons';
 import './HomePage.css';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 
@@ -69,7 +69,7 @@ const HomePage: React.FC = () => {
           <div className='Item-Center'>
             <IonItem routerLink={`/About`} className="Footer-Color">
               <IonTabButton tab="AboutUs" href="/AboutUs">
-                <IonIcon icon={square} />
+                <IonIcon icon={informationCircleOutline} />
                 <IonLabel>Sobre nosotros</IonLabel>
               </IonTabButton>
             </IonItem>

src/pages/ListBiographies.css

@@ -21,7 +21,7 @@ ion-col {
 }
 
 .Header-Color {
-    --background: #4de9d9;
+    --background: #59b8bb;
 }
 
 .Footer-Color {

src/pages/ListBiographies.tsx

@@ -13,7 +13,6 @@ import {
   IonBackButton,
 } from '@ionic/react';
 import './ListBiographies.css';
-import { clipboardOutline } from 'ionicons/icons';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import SearchBar from '../components/BiographySearchBar';
 

src/pages/ListCapsules.css

@@ -21,7 +21,7 @@ ion-col {
 }
 
 .Header-Color {
-    --background: #4de9d9;
+    --background: #59b8bb;
 }
 
 .Footer-Color {

src/pages/Questions.css

@@ -21,7 +21,7 @@ ion-col {
 }
 
 .Header-Color {
-    --background: #4de9d9;
+    --background: #59b8bb;
 }
 
 .Footer-Color {

src/pages/Questions.tsx

@@ -132,10 +132,10 @@ const Questions: React.FC = () => {
 
         }
 
-        // Para seleccionar si sale icono correccto o incorrecto en seleccion
+        // Para seleccionar si sale ícono correcto o incorrecto en selección
         // de radio.
 
-        // ======================= PREGUNTA 1 =========================================
+// =================================== PREGUNTA 1 =========================================
         // SI usuario seleccionio el primer radio en la pregunta 1
         if(selected1[0] && quizInfo?.res1[0] === quizInfo?.correcta1){
             setIcon11(<IonIcon icon={thumbsUp} />);
@@ -175,9 +175,9 @@ const Questions: React.FC = () => {
         else if (selected1[3] && quizInfo?.res1[3] !== quizInfo?.correcta1){
             setIcon14(<IonIcon icon={thumbsDown} />)
         }
-        // ======================= PREGUNTA 1 =========================================
+// =================================== PREGUNTA 1 =========================================
 
-        // ======================= PREGUNTA 2 =========================================
+// =================================== PREGUNTA 2 =========================================
 
         // SI usuario seleccionio el primer radio en la pregunta 2
         if(selected2[0] && quizInfo?.res2[0] === quizInfo?.correcta2){
@@ -219,9 +219,9 @@ const Questions: React.FC = () => {
             setIcon24(<IonIcon icon={thumbsDown} />)
         }
 
-        // ======================= PREGUNTA 2 =========================================
+// =================================== PREGUNTA 2 =========================================
 
-        // ======================= PREGUNTA 3 =========================================
+// =================================== PREGUNTA 3 =========================================
 
         // SI usuario seleccionio el primer radio en la pregunta 3
         if(selected3[0] && quizInfo?.res3[0] === quizInfo?.correcta3){
@@ -263,9 +263,9 @@ const Questions: React.FC = () => {
             setIcon34(<IonIcon icon={thumbsDown} />)
         }
 
-        // ======================= PREGUNTA 3 =========================================
+// =================================== PREGUNTA 3 =========================================
 
-        // ======================= PREGUNTA 4 =========================================
+// =================================== PREGUNTA 4 =========================================
 
         // SI usuario seleccionio el primer radio en la pregunta 4
         if(selected4[0] && quizInfo?.res4[0] === quizInfo?.correcta4){
@@ -307,7 +307,7 @@ const Questions: React.FC = () => {
             setIcon44(<IonIcon icon={thumbsDown} />)
         }
 
-        // ======================= PREGUNTA 4 =========================================
+// =================================== PREGUNTA 4 =========================================
 
         // Para saber cueantas resspuestas acertó el usuario
         setCountRes(count);