AlAlRy/src/pages/Questions.tsx

import {
    IonPage,
    IonContent,
    IonHeader,
    IonTitle,
    IonToolbar,
    IonFooter,
    IonImg,
    IonItem,
    IonLabel,
    IonList,
    IonCard,
    IonCardContent,
    IonCardHeader,
    IonCardSubtitle,
    IonCardTitle,
    IonButton,
    IonGrid,
    IonRow,
    IonCol,
    IonButtons,
    IonBackButton,
    useIonViewWillEnter,
    IonRadioGroup,
    IonRadio,
    IonIcon,
    IonChip
} from '@ionic/react';
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 { thumbsDown, thumbsUp } from 'ionicons/icons';


const Questions: React.FC = () => {
    // Estados para respuestas seleccionadas
    const [qres1, setQRes1] = useState();
    const [qres2, setQRes2] = useState();
    const [qres3, setQRes3] = useState();
    const [qres4, setQRes4] = useState();

    // Arreglos para saber cual radio se selecciono en cada pregunta
    const selected1:boolean[] = [false, false, false, false];
    const selected2:boolean[] = [false, false, false, false];
    const selected3:boolean[] = [false, false, false, false];
    const selected4:boolean[] = [false, false, false, false];

    // Estados para seleccionar iconos de las respuestas seleccionadas
    const [icon11, setIcon11] = useState<any>();
    const [icon12, setIcon12] = useState<any>();
    const [icon13, setIcon13] = useState<any>();
    const [icon14, setIcon14] = useState<any>();

    const [icon21, setIcon21] = useState<any>();
    const [icon22, setIcon22] = useState<any>();
    const [icon23, setIcon23] = useState<any>();
    const [icon24, setIcon24] = useState<any>();

    const [icon31, setIcon31] = useState<any>();
    const [icon32, setIcon32] = useState<any>();
    const [icon33, setIcon33] = useState<any>();
    const [icon34, setIcon34] = useState<any>();

    const [icon41, setIcon41] = useState<any>();
    const [icon42, setIcon42] = useState<any>();
    const [icon43, setIcon43] = useState<any>();
    const [icon44, setIcon44] = useState<any>();

    // Estado para contar cuantas preguntas correctas se obtuvieron
    const [countres, setCountRes] = useState<number>(0);

    const [verResPresionado, setVerResPresionado] = useState<boolean>(false);

    /* verificarRes()
        Funcion se encarga de verificar si las respuestas seleccionadas
        son correctas. Despliega ThumbsUp para seleccion correcta,
        ThumbsDowmn para seleccion incorrecta.
    */
    const verificarRes = () => {
        // borrar console logs para el release
        console.log([qres1, qres2, qres3, qres4]);
        console.log(countres);

        // reset a los icons, count por si hubo seleccion anterior
        let count = 0;
        setCountRes(count);
        setVerResPresionado(true); // buton verificar respuestas precionado

        setIcon11(null);
        setIcon12(null);
        setIcon13(null);
        setIcon14(null);

        setIcon21(null);
        setIcon22(null);
        setIcon23(null);
        setIcon24(null);

        setIcon31(null);
        setIcon32(null);
        setIcon33(null);
        setIcon34(null);

        setIcon41(null);
        setIcon42(null);
        setIcon43(null);
        setIcon44(null);


        // loop para saber que radio escogio el usuario en cada pregunta
        let num: number = 0;
        let i: number;
        for(i = num; i<4; i++){
            if(qres1 === quizInfo?.res1[i]){
                selected1[i] = true;
            }

            if(qres2 === quizInfo?.res2[i]){
                selected2[i] = true;
            }

            if(qres3 === quizInfo?.res3[i]){
                selected3[i] = true;
            }

            if(qres4 === quizInfo?.res4[i]){
                selected4[i] = true;
            }

        }

        // Para seleccionar si sale icono correccto o incorrecto en seleccion
        // de radio.

        // ======================= PREGUNTA 1 =========================================
        // SI usuario seleccionio el primer radio en la pregunta 1
        if(selected1[0] && quizInfo?.res1[0] === quizInfo?.correcta1){
            setIcon11(<IonIcon icon={thumbsUp} />);
            //setCountRes(countres + 1);
            count++;
        }
        else if (selected1[0] && quizInfo?.res1[0] !== quizInfo?.correcta1){
            setIcon11(<IonIcon icon={thumbsDown} />)
        }

        // SI usuario seleccionio el segundo radio en la pregunta 1
        if(selected1[1] && quizInfo?.res1[1] === quizInfo?.correcta1){
            setIcon12(<IonIcon icon={thumbsUp} />);
            //setCountRes(countres + 1);
            count++;
        }
        else if (selected1[1] && quizInfo?.res1[1] !== quizInfo?.correcta1){
            setIcon12(<IonIcon icon={thumbsDown} />)
        }

        // SI usuario seleccionio el tercer radio en la pregunta 1
        if(selected1[2] && quizInfo?.res1[2] === quizInfo?.correcta1){
            setIcon13(<IonIcon icon={thumbsUp} />);
            //setCountRes(countres + 1);
            count++;
        }
        else if (selected1[2] && quizInfo?.res1[2] !== quizInfo?.correcta1){
            setIcon13(<IonIcon icon={thumbsDown} />)
        }

        // SI usuario seleccionio el cuarto radio en la pregunta 1
        if(selected1[3] && quizInfo?.res1[3] === quizInfo?.correcta1){
            setIcon14(<IonIcon icon={thumbsUp} />);
            //setCountRes(countres + 1);
            count++;
        }
        else if (selected1[3] && quizInfo?.res1[3] !== quizInfo?.correcta1){
            setIcon14(<IonIcon icon={thumbsDown} />)
        }
        // ======================= PREGUNTA 1 =========================================

        // ======================= PREGUNTA 2 =========================================

        // SI usuario seleccionio el primer radio en la pregunta 2
        if(selected2[0] && quizInfo?.res2[0] === quizInfo?.correcta2){
            setIcon21(<IonIcon icon={thumbsUp} />);
            //setCountRes(countres + 1);
            count++;
        }
        else if (selected2[0] && quizInfo?.res2[0] !== quizInfo?.correcta2){
            setIcon21(<IonIcon icon={thumbsDown} />)
        }

        // SI usuario seleccionio el segundo radio en la pregunta 2
        if(selected2[1] && quizInfo?.res2[1] === quizInfo?.correcta2){
            setIcon22(<IonIcon icon={thumbsUp} />);
            //setCountRes(countres + 1);
            count++;
        }
        else if (selected2[1] && quizInfo?.res2[1] !== quizInfo?.correcta2){
            setIcon22(<IonIcon icon={thumbsDown} />)
        }

        // SI usuario seleccionio el tercer radio en la pregunta 2
        if(selected2[2] && quizInfo?.res2[2] === quizInfo?.correcta2){
            setIcon23(<IonIcon icon={thumbsUp} />);
            //setCountRes(countres + 1);
            count++;
        }
        else if (selected2[2] && quizInfo?.res2[2] !== quizInfo?.correcta2){
            setIcon23(<IonIcon icon={thumbsDown} />)
        }

        // SI usuario seleccionio el cuarto radio en la pregunta 2
        if(selected2[3] && quizInfo?.res2[3] === quizInfo?.correcta2){
            setIcon24(<IonIcon icon={thumbsUp} />);
            //setCountRes(countres + 1);
            count++;
        }
        else if (selected2[3] && quizInfo?.res2[3] !== quizInfo?.correcta2){
            setIcon24(<IonIcon icon={thumbsDown} />)
        }

        // ======================= PREGUNTA 2 =========================================

        // ======================= PREGUNTA 3 =========================================

        // SI usuario seleccionio el primer radio en la pregunta 3
        if(selected3[0] && quizInfo?.res3[0] === quizInfo?.correcta3){
            setIcon31(<IonIcon icon={thumbsUp} />);
            //setCountRes(countres + 1);
            count++;
        }
        else if (selected3[0] && quizInfo?.res3[0] !== quizInfo?.correcta3){
            setIcon31(<IonIcon icon={thumbsDown} />)
        }

        // SI usuario seleccionio el segundo radio en la pregunta 3
        if(selected3[1] && quizInfo?.res3[1] === quizInfo?.correcta3){
            setIcon32(<IonIcon icon={thumbsUp} />);
            //setCountRes(countres + 1);
            count++;
        }
        else if (selected3[1] && quizInfo?.res3[1] !== quizInfo?.correcta3){
            setIcon32(<IonIcon icon={thumbsDown} />)
        }

        // SI usuario seleccionio el tercer radio en la pregunta 3
        if(selected3[2] && quizInfo?.res3[2] === quizInfo?.correcta3){
            setIcon33(<IonIcon icon={thumbsUp} />);
            //setCountRes(countres + 1);
            count++;
        }
        else if (selected3[2] && quizInfo?.res3[2] !== quizInfo?.correcta3){
            setIcon33(<IonIcon icon={thumbsDown} />)
        }

        // SI usuario seleccionio el cuerto radio en la pregunta 3
        if(selected3[3] && quizInfo?.res3[3] === quizInfo?.correcta3){
            setIcon34(<IonIcon icon={thumbsUp} />);
            //setCountRes(countres + 1);
            count++;
        }
        else if (selected3[3] && quizInfo?.res3[3] !== quizInfo?.correcta3){
            setIcon34(<IonIcon icon={thumbsDown} />)
        }

        // ======================= PREGUNTA 3 =========================================

        // ======================= PREGUNTA 4 =========================================

        // SI usuario seleccionio el primer radio en la pregunta 4
        if(selected4[0] && quizInfo?.res4[0] === quizInfo?.correcta4){
            setIcon41(<IonIcon icon={thumbsUp} />);
            //setCountRes(countres + 1);
            count++;
        }
        else if (selected4[0] && quizInfo?.res4[0] !== quizInfo?.correcta4){
            setIcon41(<IonIcon icon={thumbsDown} />)
        }

        // SI usuario seleccionio el segundo radio en la pregunta 4
        if(selected4[1] && quizInfo?.res4[1] === quizInfo?.correcta4){
            setIcon42(<IonIcon icon={thumbsUp} />);
            //setCountRes(countres + 1);
            count++;
        }
        else if (selected4[1] && quizInfo?.res4[1] !== quizInfo?.correcta4){
            setIcon42(<IonIcon icon={thumbsDown} />)
        }

        // SI usuario seleccionio el tercer radio en la pregunta 4
        if(selected4[2] && quizInfo?.res4[2] === quizInfo?.correcta4){
            setIcon43(<IonIcon icon={thumbsUp} />);
            //setCountRes(countres + 1);
            count++;
        }
        else if (selected4[2] && quizInfo?.res4[2] !== quizInfo?.correcta4){
            setIcon43(<IonIcon icon={thumbsDown} />)
        }

        // SI usuario seleccionio el cuarto radio en la pregunta 4
        if(selected4[3] && quizInfo?.res4[3] === quizInfo?.correcta4){
            setIcon44(<IonIcon icon={thumbsUp} />);
            //setCountRes(countres + 1);
            count++;
        }
        else if (selected4[3] && quizInfo?.res4[3] !== quizInfo?.correcta4){
            setIcon44(<IonIcon icon={thumbsDown} />)
        }

        // ======================= PREGUNTA 4 =========================================

        // Para saber cueantas resspuestas acertó el usuario
        setCountRes(count);
    };
    
    // State para desplegar la info del quiz
    const [quizInfo, setQuiz] = useState<QuizInfo>();
    const params = useParams<{ id: string }>();

    useIonViewWillEnter(() => {
        const quiz = getQuiz(parseInt(params.id, 10));
        setQuiz(quiz);
    });
    
    return (
        <IonPage>
            <IonHeader>
                <IonToolbar className="Header-Color">
                    <IonGrid fixed={true}>
                        <IonRow>
                            <IonCol></IonCol>
                            <IonCol>
                                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
                                <IonTitle>Quiz</IonTitle>
                            </IonCol>
                            <IonCol></IonCol>
                        </IonRow>
                    </IonGrid>
                </IonToolbar>
            </IonHeader>
            
            <IonContent fullscreen className="ion-padding">
                <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>

                {
                    quizInfo ?
                    <>
                        <h1>Quiz sobre la biografia de {quizInfo.title}</h1>

                        <p>Marque una respuesta por pregunta</p>

                        <IonCard>
                            <IonCardHeader>
                                <IonCardTitle>{quizInfo.pregunta1}</IonCardTitle>
                                <IonCardSubtitle></IonCardSubtitle>
                            </IonCardHeader>
                            <IonCardContent>
                                <IonList>
                                    <IonRadioGroup value={qres1} onIonChange={(e) => setQRes1(e.detail.value)}>
                                        <IonItem>
                                            <IonLabel>{quizInfo.res1[0]}</IonLabel>
                                            <IonRadio slot="end" value={quizInfo.res1[0]}></IonRadio>
                                            {icon11}
                                        </IonItem>

                                        <IonItem>
                                            <IonLabel>{quizInfo.res1[1]}</IonLabel>
                                            <IonRadio slot="end" value={quizInfo.res1[1]}></IonRadio>
                                            {icon12}
                                        </IonItem>

                                        <IonItem>
                                            <IonLabel>{quizInfo.res1[2]}</IonLabel>
                                            <IonRadio slot="end" value={quizInfo.res1[2]}></IonRadio>
                                            {icon13}
                                        </IonItem>

                                        <IonItem>
                                            <IonLabel>{quizInfo.res1[3]}</IonLabel>
                                            <IonRadio slot="end" value={quizInfo.res1[3]}></IonRadio>
                                            {icon14}
                                        </IonItem>
                                    </IonRadioGroup>
                                </IonList>
                            </IonCardContent>
                        </IonCard>

                        <IonCard>
                            <IonCardHeader>
                                <IonCardTitle>{quizInfo.pregunta2}</IonCardTitle>
                                <IonCardSubtitle></IonCardSubtitle>
                            </IonCardHeader>
                            <IonCardContent>
                                <IonList>
                                    <IonRadioGroup value={qres2} onIonChange={(e) => setQRes2(e.detail.value)}>
                                        <IonItem>
                                            <IonLabel>{quizInfo.res2[0]}</IonLabel>
                                            <IonRadio slot="end" value={quizInfo.res2[0]}></IonRadio>
                                            {icon21}
                                        </IonItem>

                                        <IonItem>
                                            <IonLabel>{quizInfo.res2[1]}</IonLabel>
                                            <IonRadio slot="end" value={quizInfo.res2[1]}></IonRadio>
                                            {icon22}
                                        </IonItem>

                                        <IonItem>
                                            <IonLabel>{quizInfo.res2[2]}</IonLabel>
                                            <IonRadio slot="end" value={quizInfo.res2[2]}></IonRadio>
                                            {icon23}
                                        </IonItem>

                                        <IonItem>
                                            <IonLabel>{quizInfo.res2[3]}</IonLabel>
                                            <IonRadio slot="end" value={quizInfo.res2[3]}></IonRadio>
                                            {icon24}
                                        </IonItem>
                                    </IonRadioGroup>
                                </IonList>
                            </IonCardContent>
                        </IonCard>

                        <IonCard>
                            <IonCardHeader>
                                <IonCardTitle>{quizInfo.pregunta3}</IonCardTitle>
                                <IonCardSubtitle></IonCardSubtitle>
                            </IonCardHeader>
                            <IonCardContent>
                                <IonList>
                                    <IonRadioGroup value={qres3} onIonChange={(e) => setQRes3(e.detail.value)}>
                                        <IonItem>
                                            <IonLabel>{quizInfo.res3[0]}</IonLabel>
                                            <IonRadio slot="end" value={quizInfo.res3[0]}></IonRadio>
                                            {icon31}
                                        </IonItem>

                                        <IonItem>
                                            <IonLabel>{quizInfo.res3[1]}</IonLabel>
                                            <IonRadio slot="end" value={quizInfo.res3[1]}></IonRadio>
                                            {icon32}
                                        </IonItem>

                                        <IonItem>
                                            <IonLabel>{quizInfo.res3[2]}</IonLabel>
                                            <IonRadio slot="end" value={quizInfo.res3[2]}></IonRadio>
                                            {icon33}
                                        </IonItem>

                                        <IonItem>
                                            <IonLabel>{quizInfo.res3[3]}</IonLabel>
                                            <IonRadio slot="end" value={quizInfo.res3[3]}></IonRadio>
                                            {icon34}
                                        </IonItem>
                                    </IonRadioGroup>
                                </IonList>
                            </IonCardContent>
                        </IonCard>

                        <IonCard>
                            <IonCardHeader>
                                <IonCardTitle>{quizInfo.pregunta4}</IonCardTitle>
                                <IonCardSubtitle></IonCardSubtitle>
                            </IonCardHeader>
                            <IonCardContent>
                                <IonList>
                                    <IonRadioGroup value={qres4} onIonChange={(e) => setQRes4(e.detail.value)}>
                                        <IonItem>
                                            <IonLabel>{quizInfo.res4[0]}</IonLabel>
                                            <IonRadio slot="end" value={quizInfo.res4[0]}></IonRadio>
                                            {icon41}
                                        </IonItem>

                                        <IonItem>
                                            <IonLabel>{quizInfo.res4[1]}</IonLabel>
                                            <IonRadio slot="end" value={quizInfo.res4[1]}></IonRadio>
                                            {icon42}
                                        </IonItem>

                                        <IonItem>
                                            <IonLabel>{quizInfo.res4[2]}</IonLabel>
                                            <IonRadio slot="end" value={quizInfo.res4[2]}></IonRadio>
                                            {icon43}
                                        </IonItem>

                                        <IonItem>
                                            <IonLabel>{quizInfo.res4[3]}</IonLabel>
                                            <IonRadio slot="end" value={quizInfo.res4[3]}></IonRadio>
                                            {icon44}
                                        </IonItem>
                                    </IonRadioGroup>
                                </IonList>
                            </IonCardContent>
                        </IonCard>

                        <IonItem lines="none">
                            {verResPresionado ? (
                                <>
                                    <IonChip>{countres} / 4 respuestas correctas</IonChip>
                                </>
                            ) : null } 
                        </IonItem>
                        
                    </> : <div>Quiz not found</div>
                        
                }


                <IonButton onClick={verificarRes}>Verificar respuestas</IonButton>

            </IonContent>

            <IonFooter>
                <IonToolbar className="Footer-Color">
                    <div className='Item-Center'>
                        <IonButtons slot="start">
                            <IonBackButton defaultHref="/ListBiographie"></IonBackButton>
                        </IonButtons>
                    </div>
                </IonToolbar>
            </IonFooter>
        </IonPage>
    );
};

export default Questions;