Cómo crear una app de quiz/examen con React

Transcripción

hola chicos que está bienvenidos el día

de hoy aprenderemos cómo crear un quiz

una aplicación tipo quiz tipo examen y

como podrán ver tenemos distintas

preguntas cada una con opción múltiple y

estamos contestando contrarreloj de modo

que si se agota el tiempo no puedo

responder y debo pasar a la siguiente

pregunta aquí comenzamos con el tiempo a

través desde 10 y aquí ya no nos va a

elegir estaca

errónea pasamos a la tercera nada me

está acá errónea pasamos a la última 4

de 4 ya que elegiré está acá qué tal

parece que es la correcta y me llaman la

pantalla final donde veo mi resultado 1

de 4 puedo volver a jugar o poner las

respuestas veamos las respuestas la

primera era javascript no lo hubiera

imaginado la segunda era sin rellena la

tercera era 111 la siguiente de 95 y

volver a jugar y bueno si les interesa

aprender a crear algo como esto

acompáñenme en el vídeo de bill

[Música]

antes de comenzar recordarles tres cosas

la primera se encuentran el código de

esta aplicación en la descripción del

vídeo la segunda invitarlos a que se

suscriban a mi boletín y la tercera es

si sienten que el vídeo hablan muy lento

pueden utilizar los controles de youtube

para que vayan más rápido ok y habiendo

dicho esto vamos a comenzar hoy vamos a

ver una terminal y me dije al escritorio

conoce aquí usualmente yo trabajaría con

en piex reactive pero hay una

herramienta que es bastante popular la

cual podemos ejecutar corriendo en in it

beats ok y activas madero donde lo

llamaré quiz

elegimos durán jacques sencillo

accedemos a la carpeta que nos crea y

corremos en pie y esto nos darán que

instalar las dependencias es muchísimo

más rápido que con las que lo tienen

hemos terminado abramos todo desde

nuestro editor y cerramos la terminal y

aquí en esta carpeta bueno en este sí en

esta carpeta esos son los archivos que

nos crean fit lo que vamos a eliminar el

css vamos a minar el favicon

el index css

si bien quedamos únicamente app

ubs tap

es algo así como que el index desde

describe la capa que eliminamos es

también y aquí en up eliminamos todo

eliminamos este estado y este 10 va no

sea eliminarlo ok lo que nosotros

haremos es tener un main cuya clase sea

igual a up ok y antes de cuánto vamos a

poner aquí un hola y antes de continuar

vamos a correr en pie braun net para ver

que esté todo en orden debe aparecer un

hola que nos abre los ojos 3.000 mismo

puerto que club caiac tap tenemos hola y

podemos comenzar que lo primero que hay

que hacer es tener un archivo donde

tengamos contenidas las preguntas del

quiz y hay muchas maneras de hacer esto

pero lo que yo haré es crear una red de

objetos donde cada objeto contendrá la

información de las preguntas y para no

hacerles perder el tiempo no quieres

pegar unas preguntas que tenían

preparadas notarán que son objetos

tienen propiedad de título tiene una

propiedad opciones qué

tienes este una rey y a su vez este rey

de opciones es una red de objetos en

donde guardamos el texto de la respuesta

y si la respuesta es correcta o false

okey donde habiendo hecho esto este

array de preguntas hay que exportarlo no

se es por default preguntas y regresemos

a nuestra aplicación aquí vamos a

importar estas preguntas vamos a

importar preguntas

preguntas

ok y ahora vamos a trabajar nuestra

interfaz nuestro esqueleto vamos a tener

dos secciones hoy vamos a tener dos

secciones el lado izquierdo en donde va

a estar toda la información de la

pregunta y el lado derecho donde van a

estar las respuestas entonces aquí en

este primer día agreguémosle una clase

del lado izquierdo

y de momento tener dos apartados el

primer apartado

corresponde con el número de preguntas

en cual vamos entonces pondremos como

clase el número pregunta y aquí vamos a

poner un spam y vamos a poner como

pregunta uno de equipos o como cinco por

ejemplo y cerramos el dif y cerramos el

dif este es el primer día y la primera

sección el número de preguntas las

siguientes secciones

class name igual a título pregunta que

es en sí la pregunta que espero como

cómo te llamas que sería este es un

pequeño el relleno y esto va para el

lado izquierdo y ahora el segundo día

que va a contener el lado derecho de la

aplicación única y sencillamente va a

tener las respuestas a cada respuesta

hacer un botón entonces yo aquí pondrá

como opción 1 y un 2 opción 3 y opción 4

en el lado derecho cerramos en nuestra

aplicación debemos tener algo más o

menos así ok varón sale un poquito de

estilo y ojo que el objetivo de este

tutorial no es enfocarnos en los estilos

sino que es enfocarnos en la lógica

guiarlos como podrían hacer una

aplicación de este estilo web de este

objetivo una aplicación estilo quiz y

para ello lo que haré es copiar en los

estilos que yo tenía preparados vamos a

llamarlo global punto css y estos

estilos los se encuentran en el

repositorio el cual está en la

descripción del vídeo aunque ya que

están no es nada fascinada elaborado

letras márgenes mucho flex medidas

colores en la parte de preguntas

distribuyó el juego botones que si es

correcta o incorrecta

covers focus y ya está ok ahora si me

vengo para acá notarán que no pasa nada

porque estos estilos hay que importarlos

vamos a importarlos desde min

en que vamos a colocar algo como

no importa me diste aquí mismo en el

global punto css y ahí está pregunta uno

de cinco cómo te llamas y los botones ok

ahora la pregunta es estos textos riendo

preguntes cómo mostramos el continuo de

las preguntas que ya tenemos elaboradas

es muy muy muy sencillo vengamos de

vuelta para acá en nuestro lado

izquierdo recuerde que estamos

importando preguntas el archivo que

habíamos preparado comenzamos aquí en el

número de pregunta bueno antes de

continuar mejor dicho vamos a vamos a

importar a state

effects desde riad ok y antes de

continuar tenemos que crear tres estados

muy fino muy sencillos primer estado va

a revisar en qué pregunta estamos en

segundo estado va a revisar la

puntuación

y el tercer estado va a revisar si hemos

terminado el juego o no

6 finish y naturalmente desde un

principio no hemos terminado pregunta

actual puntuación y si hemos terminado

ahora queremos aquí y es lo siguiente

pasamos unas llaves y diremos con lo que

la pregunta actual + 1 y es más 1 porque

aquí vamos a estar trabajando con índice

o buenos y con índices 0 porque así es

como funcionan los arrays pero que en

idiomas no vendría siendo un +1 para que

tenga sitio porque no es normal decir

pregunta cero sino que comenzamos

haciendo pregunta número uno la primera

y aquí para saber cuántos son en total

pasamos son preguntas punto plena que

fácil ahora para mostrar la pregunta en

sí haremos algo como accedemos a este

rey recuerden que esto de aquí es una

rey

y entonces a la rey accedemos a la

posición en la cual vamos actualmente es

decir la pregunta actual y luego

accedemos a la propiedad de título

porque recuerden que así lo hemos hecho

aunque esto ya lo podemos cerrar y por

último el lado derecho en lugar de tener

botones manuales vamos a agarrar

preguntas accedemos a la pregunta actual

y accedemos a la propiedad de opciones

que recuerden que esto es un array

entonces agarramos

opciones lo mate amos

no requerimos el index lo matemos y lo

que haremos es devolver

vamos a devolver un botón cuyo contenido

sea la respuesta apuntó texto respuesta

y el texto respuesta porque así lo hemos

llamado aquí y es respuesta porque así

lo hemos puesto aquí en la función

último que me falta un paréntesis y

hemos terminado aquí esta pregunta 1 de

4 porque son 4 este es el título y las

opciones ahora para que no se queje lo

que vemos aquí en botón es pasarle una

llave que será igual a

y lo mismo aquí para que sea único

así

y

ahora lo que sigue es cuando ya da clic

acá cambio de respuesta a cambio de

pregunta entonces aquí a este botón

además de haberle asignado y una llave

vamos a agregarle un con clic y vamos

pasar le vamos a pasarle una función que

queremos que se ejecute y se funciona

llamaremos cuando answer submit ok y no

existe vamos a crearla aquí diremos

quejando

cuando esto va a ser lo siguiente

primero queremos añadir puntaje

cuando añadí puntuación que no queremos

hacer es añadir estilos para saber si es

correcta o incorrecta la respuesta y por

último queremos cambiar a la siguiente

pregunta ok como hacemos esto añade

puntuaciones y está vamos a ver si la

respuesta era correcta o incorrecta y

adivinen que eso lo tenemos aquí en cada

opción nos indica si es correcta o

incorrecta entonces lo que haremos aquí

cuando estamos mapeando las opciones

estas reducciones lo estamos mapeando lo

que haremos es que vamos a pasarle a la

función que tiene acceso a cada

respuesta que es cada uno de estos vamos

a pasarle este dato

entonces que diremos que le vamos a

pasar respuesta a punto es correcto ok y

adicional le vamos a pasar el el evento

lo cual vamos a atrapar desde aquí lo

atrapamos y lo enviamos para que y ahora

esta función lo que tiene que hacer es

recibirlos correctamente y vamos a

ponerle el script y el evento para

añadir puntuación simple y sencillamente

diremos que sí es pues verdadero que se

descubre que estamos pensando es

verdadero entonces una puntuación lo que

tiene que hacer es cambiarme la la que

sea que tenga más uno luego los estilos

de pregunta esto les muestra recuerden

que tenemos unos estilos de correcto e

incorrecto y para aplicarlos dependiendo

de si era correcta o no este este evento

nos da acceso al botón que estábamos

clicando y con ellos acceso a todas sus

propiedades y datos es lo que haremos

diremos si es correcto entonces no

mentira le damos a como más sencillo y

haremos el target

todas list punto at y le vamos a pasar

una clase y clase le pasaremos pues si

la respuesta era correcta entonces la

pasaremos la clase de correcta es caso

contraer sea incorrecta le pasamos esta

clase la que aunque vamos a poner la

prueba estará correcta en correcta

incorrecta e incorrecta pero lo que

sigue es que cambie a la siguiente

pregunta y para cambiar a siguiente

pregunta primero tenemos que

revisar que no hayamos llegado al final

del cuestionario para ello vamos a hacer

lo común

if

it’s pregunta

actual es igual a preguntas line manos 1

entonces lo que haremos es terminar el

juego

caso contrario lo que haremos es cambiar

la pregunta actual a más 1 que vamos a

ponerlo prueba que vamos a refrescar me

lleva lados media bala tres me llevará

cuatro y aquí se termina el juego de que

los problemas fíjense que en los estilos

no los alcanzó a apreciar porque me

pasan la siguiente inmediatamente y

cuando termina el juego no está pasando

nada vamos a ver esta parte de terminar

el juego esto se resuelve muy

sencillamente

lo siguiente

aquí estamos en esta función estamos

regresando nuestra aplicación por lo que

podemos hacer revisar si el juego ha

terminado de ser así entonces podemos

regresarnos antes de realizar la

aplicación aquí lo que regresaremos será

el mismo mail con la clase de app

el cual al interior tendrá un disco y la

clase sea un juego terminado por ejemplo

aquí vamos a pasarle un spam sito

obtuviste

y quienes pasamos puntuación

de no obtuviste tantos puntos de

preguntas juntos

vale

y además del spam vamos a pasarle un

botoncito que diga volver a jugar y para

volver a jugar que tenemos que hacer

actualizar la página así que le pasamos

un click que al hacer clic en esta cosa

nos cambie la ubicación de la ventana

el inicio así de fácil y sencillo y

convertiste 4 de 4 volver a jugar

javascript sin gracia sin tag cd robert

1 de 4 volver a jugar con libia bla bla

bla bla será de 4 para los estilos que

está pasando que está pasando otra

gracia lo que está pasando es que la

agrega el estilo me cambia a la

siguiente y a cambiar a la siguiente

bien qué es lo que ocurre me vuelve a

renderizar los botones por lo tanto

pierden el estilo que les habíamos ha

creado lo cual es correcto pero yo no

alcancé a ver si era correcta o mala o

incorrecta lo que tenemos que hacer es

que esto de aquí no me lo curré

inmediatamente para ello para ello vamos

a utilizar un set time al el cual se

recibe una función que queremos que

ejecute lo pasamos el tiempo dentro del

cual queremos que se ejecute ok entonces

queremos que se deje que se espere un

segundo y medio y mientras espera que lo

haga que ejecute extra quiere cambiar

entonces si yo hago clic acá pasa

segundo y medio y ya cambia segundo y

medio y cambia porque lo que está aquí

adentro no me lo va a ejecutar sino

hasta que haya pasado este tiempo de

aquí que le indica ok y es así como

tenemos nuestra función para

administrar esto y ahora lo que sigue es

agregarle aquí un temporizador que sea

contrarreloj y que cuando el tiempo

llegue a cero yo ya no pueda responder

por haberme tardado y para eso vamos a

crear dos estados más vamos a crear un

estado que diga el tiempo restante

set tiempo restante el cual vamos a

comenzar con 10 segundos le vamos a dar

una una

un estado xxi que vigile si no hacemos

caso sin tiempo y que por lo tanto nos

desactiven los botones y haremos algo

como

ahora estamos en precisamente los

mejores nombres de variables chicos pero

es lo que hay aquí en el tutorial de

rápido ok ahora como como como aquí en

return

tenemos el número de pregunta tenemos

vamos a destacar dentro del lado

izquierdo tenemos el número de preguntas

entre toda la pregunta y ahora vamos a

agregar

com

un tiempo restante ok y que vamos a

pasarle tiempo restante y aquí como

clase vamos a ponerle class name

adivinaron tiempo restante ok ya vengo

para acá piense que tengo 10 segundos de

tiempo restante ahora como que se vaya

reduciendo desde 1 en 1

pues muy sencillo

podrían tomar como referencia este set

time que se ejecuta dentro de cierto

tiempo pero hay algo muy parecido que se

llama set interfaz ok y para ello

utilizaremos ius effect ahora antes de

este retorno previo y antes de esto de

acá

no esperen

vamos a pasarle nuestro y un efecto

y a quienes efecto vamos a correr una

función cuya dependencia se ejecuta con

el tiempo restante

y ahora que queremos ejecutar desde un

principio y cada que tiempo restante

cambie no queremos ejecutar es crear una

función que se ejecute en cada segundo

y esta función la vamos a crear con el

intervalo la cual vamos a guardar aquí

en una constante y ya les diré para qué

vamos a crear intervalo el cual es igual

a set interfaz y aquí al igual que con

time out vamos a pensar una función y

vamos pasarle cada cuánto tiempo

queremos que se esté ejecutando ok

entonces qué es lo que queremos que

ocurra cada un segundo bueno pues cada

segundo queremos revisar si el tiempo

restante es mayor que 0 entonces

queremos que haga que el tiempo restante

me lo cambie a menos 1

y adicional si el tiempo restante es

igual a cero

entonces queremos que les habilite que

esto no lo ponga como desactivado igual

ok y ahora lo que sigue es para cancelar

esta función que se va a estar

ejecutando cada segundo para cancelarlo

y use fernanda nos da una opción de

limpiar con un return lo que haremos es

limpiarme el intervalo que se llama

intervalo que hemos guardado y ahora si

yo guardo y vengo para acá notarán que

ésta ha vuelto hecho loca al loco que y

lo que ha pasado es que lo que ha pasado

es que aquí cuando su estado dependa del

estado anterior lo que tienen que hacer

es en lugar de ponerlo así recuperar el

estado anterior con una función de

flecha decimos el valor previo tomalo y

ese valor previo cualquiera que sea

restarle

y guardamos volvemos para acá y sigue

vuelto loco

sólo requería una pequeña refrescada

para que entraran en vigor los cambios

ok y ahí está llega a ser fíjense

actualizamos 19 8 7 6 5 4 3 2 muy bien

muy bien muy bien llega a 0 y se detiene

tal como lo hemos hecho pero ahora que

está deshabitado lo que hay que hacer es

que a estos botones en quien la aquí en

el lado derecho y nosotros que estamos

retornando con el mapa diremos que están

deshabilitados cuando este estado sea

verdadero y si llega será como pueden

ver ya no puedo hacer nada ya lo que

tendría que pasar que ya que se agote el

tiempo aquí tendría que salir un botón

que dijera bueno no alcanza hasta

contestar vamos a continuar con esta

como respuesta incompleta entonces para

eso aquí en el lado izquierdo en la

parte en este día de tiempo restante lo

que haremos es condicionar

lo que queremos renderizar y diremos

mientras

cómo se llama disabled

mientras no esté desactivado

lo que haremos es

regresar espérenme

mientras no esté desactivado lo queremos

regresar esto de aquí

y una vez que esté desactivado pues

ponemos este dos puntos vamos a regresar

un botoncito que diga

continua y ahora este botón de continuar

cuando hagamos clic en él lo que haremos

es correr una función que haga dos cosas

la primera nos regresa el tiempo a 10

segundos y la segunda es que

desactiva el desactivado es decir que

esté hardy se voló regrese a falso que

conocer cómo funciona fíjense aquí está

desactivado porque llegó a cero lo de

continuar 10 98 debí haberlo puesto en

tres para este para esta prueba pero

bueno 4 32

11 desactivado y ya no puedo responder y

no vamos a continuar pero fíjense que me

da continuar pero me quedo en la misma

pregunta y aquí me faltó entonces me

faltó cambiar la pregunta se pregunta

actual

pregunta actual claramente + 1 y ahora

si ya no alcanza a contestar la 1 de

continuar nada chance de contestar más

de un jockey supongamos que no alcanzo a

contestar la segunda porque soy muy

lento y hold es que terrible un tercer

que contestó la tercera es la tuve mal

la cuarta está también la tuve mal y

habrá sacado 0 d-4d

como cuando ya está bastante funcional

lo que sigue es que podamos ver las

respuestas y para eso para eso vamos a

regresar aquí

y vamos a cerrar esto acá y vamos a

crear otro estado más que lo llamaremos

[Música]

además la anses son

hoy sed

ok respuestas visibles sí o no de

momento es tan falso y aquí lo queremos

es tener

otro condicional donde si las respuestas

son vistas o están mostrándose vamos a

regresar un un mail con la clase de app

como digo sea de juego no

vamos a regresar

vamos a cerrar esto de aquí y de momento

estoy acá con respuestas

solo para poner a prueba los

de vuelta aquí vamos a tener el juego

terminó

déjenme lo termino

y aquí al terminar además de volver a

jugar debiera de haber un ver respuestas

entonces en el si ya terminó

además de volver a jugar vamos a poner

un

de respuestas

y ahora al hacer clic en ven las

respuestas lo que queremos es

en lugar de recargar la página queremos

hacer dos cosas la primera

regresar el finish falls y la segunda en

poner el

en él

como se llama en serio

en surf para qué sirve hoy en ver

respuestas esto se ponga en surf y por

lo tanto se active estar acá y me

muestre está aquí

respuestas a lo tiene para respuestas no

vamos a romper nos mucho la cabeza vamos

a reutilizar este código de acá la parte

de el lado izquierdo copiamos

y aquí en respuestas vamos a pegar

en el answer son

y la misma lógica pregunta actual el

título y en lugar de ponerle un tiempo

porque ya no tiene sentido

vamos a pasarle

un 10 que es tenga la respuesta y para

dar con la respuesta actual tenemos que

mapear las

digamos en la pregunta actual esto sin

opciones sí sí más opciones sí en

opciones mate a mí cuando me pega menos

va a utilizar filtra

y aquí vamos a filtrar

vamos a recibir la respuesta

vamos a recibir cada una opción perdón y

va a regresar la única en donde la

opción is correct sea verdadero

qué ha pasado

y ahí está

aquí me estoy comiendo

[Música]

paréntesis

a ver en preguntas

o si me comía un paréntesis aquí

ahí está ok y de aquí nos interesa él

[Música]

el texto respuesta

entonces siempre vengo para acá

y finalizó el juego

y le doy en ver respuestas

en qué año fue creado javascript y aquí

no me lo está pintando y es que y es que

yasky es que cuando ustedes filtran con

ustedes filtran un arreglo que obtienen

de vuelta es un rey por lo tanto tenemos

que acceder a este rey y ahora si ya

podemos tener acceso a la respuesta

entonces porque voy a buscar y 1995

y ahora nos haría falta un botón

vamos a poner un botoncito

que diga continuar o bueno que diga

continuar o volver inicia y para este

botón vamos a ponerle un click y vamos

vamos a hacer exactamente lo mismo que

hicimos aquí arriba tenemos que revisar

que no nos estemos acabando las

preguntas entonces aquí en continuar

haremos lo siguiente

revisamos si la pregunta actual sigue

siendo menor

y todas las que hay pasamos a la

siguiente y si no terminamos

pero aquí en lugar de terminar lo que

haremos es refrescar con un windows

punto location punto red es igual a esto

de aquí vale y adicional adicional

porque quiero que vean algo que yo

cuando le doy en ver respuestas me envía

automáticamente a la 4 porque es donde

me quedé adicional lo que tendría que

hacer aquí en ver respuestas es que la

pregunta actual sea la 0 para que desde

la 0 comienza a ver las respuestas

entonces aquí vamos a darle continuar se

reinician vamos a terminar terminar

terminada y terminar

3 de 4 para volver a jugar o para ver

las respuestas y empieza desde la 1

javascript sin relleno 111 y listo si

acaso aquí en continuar

en la inserción aquí podríamos decirle

si la pregunta actual es igual

a esto volver a jugar sino siguiente

ok

y ahora fíjense que cuando yo termine

si no había respuesta siguiente

siguiente el siguiente volver a jugar y

empezamos de cero y si el temporizador

llega a cero no puedo responder y si el

respondió es correcta está verde si

respondería es incorrecta es tan roja y

si se me acaba el tiempo pues deben

continuar y es así como funciona este

quiz relativamente básico pueden ustedes

volverlo más complejo pueden meterle

este puntajes máximos pueden guardar

información en una base de datos find

race por ejemplo por ellas que tengan

una idea una noción básica de cómo es

que suelen hacerse este tipo de

aplicaciones con ryan y ya a partir de

ahí ustedes pueden elaborar y

profundizar tanto como desee si os ha

gustado vídeo regalen un me gusta y en

los comentarios como siempre pueden

indicar me qué tipo de tutoriales

gustaría ver por aquí y además en planta

encuentran dos vídeos más de mi canal

entonces los invito a que sigan

explorando y contenidos chicos nos vemos

en la próxima

Acerca del autor

¡Hola! Me llamo Adrián, pero todos me conocen como Lasfito. Soy desarrollador front-end y escribo artículos y tutoriales sobre JavaScript, desarrollo web y diseño.

¿Dudas o comentarios?

Únete al Discord oficial

¿Alguna errata?

Si encuentras alguna errata en este artículo, por favor, no dudes en levantar un pull request en el repositorio de GitHub.