Skip to main content

Taller de uso del Controlador de Escenario

Este taller está dirigido a todos los exploradores desarrolladores frontend. Al completar la misión, cada explorador habrá adquirido el conocimiento necesario para utilizar de manera correcta las funcionalidades del controlador y SceneWrapper. De esta manera garantizando el funcionamiento correcto de Explorax®.

Misión: No hay mejor forma de conocer el controlador que utilizando sus props y childrenProps. Deberás

1. Desempaquetar childrenProps del Controlador de Intergaláctica​

En el caso de las childrenprops, estas son props que reciben el children del controlador. En este caso children se define como una función que recibe los childrenProps y devuelve un ReactNode. Esto permite que los elementos hijos del controlador puedan acceder a variables que se computan en el controlador. De la siguiente manera:

<GenericSceneGameController<Scene1Generator, CheckInteface>
    checkAnswer={checkAnswerHandler}
    generators={{
        easy: easyQuestionGenerator,
        medium: mediumQuestionGenerator,
        hard: hardQuestionGenerator,
    }}
    getInstruction={getInstruction}
>
    {({
        checkAnswerHandler,
        isCorrectAnswer,
        handleNext,
        totalQuestions,
        correctQuestions,
        incorrectQuestions,
        currentQuestion,
        answerSelectedIndex,
        customAnswers,
        correctInRow,
        scenePercentage,
        scenePercentageText,
        dots,
        dotsQuantity,
        playAnimation,
        setPlayAnimation,
    }) => (
        <View>
        </View>
    )}
</GenericSceneGameController>

Cada una de estas props son valores que se computan en el contralador y se pueden utilizar. Sin embargo, las más utilizadas son las siguientes:

  • CheckAnswerHandler: Esta función revisa si la respuesta del usuario es correcta o incorrecta. Luego de esto actualiza los estados para los reportes por usuario y la variable* “IsCorrectAnswer”.*
  • HandleNext: Esta función trae una nueva pregunta del generador y cambia de pregunta.
  • IsCorrectAnswer: Este estado puede ser: verdadero, falso o null. Este indica si la pregunta no ha sido contestada (null) o si fue respondida corerctamente o incorrectamente* (falso o verdadero).*

Ahora tendrás que desempaquetar CheckAnswerHandler y IsCorrectAnswer Deberás pasar CheckAnswerHandler y IsCorrectAnswer como prop a SimpleChoice para que este verifique las respuestas del usuario y pueda mostrar lo que sea necesario si dicha respuesta es correcta o incorrecta.

2. Desempaquetar childrenProps del Controlador de Bioaventura y Metrobot​

El controlador de Bioaventura y Metrobot funciona de manera similar a intergaláctica. Con la diferencia que contiene otros estados debido a la estructura diferente de dichos mundos. Los props más importantes son:

  • UseLevelConfig: Permite utilizar el prop LevelConfig para realizar los cálculos de los chgildrenProps. Sin esto, los children props se calculan con valores predeterminados. Sin embargo, es recomendable que siempre se utilie useLevelConfig.
  • DisableInBetweenTransitions: Desabilita las transiciones después de cada pregunta.
  • LevelConfig: Cantidad de preguntas fáciles, medias y difíciles en el escenario
  • mediumTransition: después de qué número de preguntas se muestra la primera pantalla de transición.
  • HardTransition: después de qué número de preguntas se muestra la segunda pantalla de transición.
<CienceSceneGameController<Scene1Generator, CheckInteface>
    checkAnswer={checkAnswer}
    getInstruction={getInstruction}
    generators={{
        easy: easyGenerator,
        medium: mediumGenerator,
        hard: hardGenerator,
    }}
    levelConfig={{
        easy: 4,
        medium: 3,
        hard: 3,
    }}
    mediumTransition={4}
    hardTransition={7}
    useLevelConfig
    disableInBetweenTransition
>
    {({
        checkAnswerHandler,
        currentQuestion,
        handleNext,
        isCorrectAnswer,
        dots,
        dotsQuantity,
        scenePercentage,
        scenePercentageText,
    }) => <View style={styles.container}></View>}
</CienceSceneGameController>