[0:00]Hola. En este tutorial vamos a crear un aplicativo de preguntas y respuestas. Las preguntas se mostrarán de forma aleatoria y la respuesta se moverá de botón para evitar que memoricen su ubicación. Bien. Vamos a empezar. Creamos un nuevo proyecto.
[0:22]Ingresamos un nombre.
[0:30]Pantalla uno. Vamos a usar un botón.
[0:37]Modificamos las propiedades de la pantalla: centrar y centrar. Le damos color al fondo.
[0:47]Quitamos los dos últimos checks para que el aplicativo pueda ocupar toda la pantalla. Modificamos el texto del botón. El texto será iniciar. Bien, esta es la pantalla uno.
[1:08]Necesitamos crear otra pantalla.
[1:14]Excelente. Volvemos a la pantalla uno. Vamos a los bloques.
[1:23]El bloque del botón. Cuando el botón sea presionado, se abrirá la pantalla dos. La pantalla dos será el juego. La pantalla uno es la pantalla de inicio que se encargará de reiniciar el juego.
[1:45]Recuerda que debes de escribir exactamente igual el nombre. Bien. Vamos a la pantalla dos. Necesitamos dos etiquetas. Un contenedor.
[2:04]Tres botones.
[2:09]Un notificador de mensajes. Modificamos las propiedades de la pantalla: centrar y centrar. Le damos color al fondo. Quitamos los dos últimos checks. Excelente. Primera etiqueta. En esta etiqueta irá la pregunta del juego. Aumentamos el tamaño del texto.
[2:37]El texto lo dejamos en cero.
[2:42]Y ubicación centro. Modificamos el nombre de la etiqueta uno.
[2:51]Segunda etiqueta. Esta etiqueta mostrará la cantidad de preguntas contestadas y las que quedan por contestar. Aumentamos el tamaño del texto. El texto será cero.
[3:09]Modificamos el nombre de la etiqueta dos.
[3:19]El contenedor. Este contenedor será para crear espacio entre las etiquetas y los botones. Quitamos el fondo. Vamos por los botones. Modificamos su tamaño. Los tres botones deben de tener la misma configuración. Recuerda, la respuesta correcta estará en uno de estos tres botones.
[3:55]Excelente. Así debería de quedar el diseño. Vamos a los bloques. Primero, las preguntas. Necesitamos una variable global que tendrá una lista con nuestras preguntas. Creamos la variable. Si necesitamos ubicar una pregunta, debemos de llamar a esta variable. Hacemos la lista.
[4:22]Agregamos las preguntas. En este rectángulo debes de agregar las preguntas. Por ejemplo:
[4:38]Esa sería una pregunta. Podemos agregar otra.
[4:45]Si quieres agregar más de dos preguntas, solo debes de aumentar los espacios en la lista. Puedes agregar la cantidad de preguntas que quieras. En este caso haré cinco preguntas.
[5:00]Bien. Estas serían mis cinco preguntas. Necesitamos las respuestas. Creamos otra variable con la lista de las respuestas.
[5:19]En este caso necesitamos crear una lista de otra lista. Porque son tres botones por pregunta.
[5:35]En total son tres posibles respuestas. Una correcta y dos incorrectas. Este primer bloque de respuesta será para la pregunta uno. Necesitamos crear en total cinco.
[5:54]Excelente. Faltaría la otra lista.
[6:05]Bien. En la primera fila deberá de estar la respuesta correcta y en las otras dos las respuestas incorrectas. La respuesta correcta de la pregunta uno es 60. Completamos con respuestas incorrectas.
[6:23]Siguiente bloque. Primero la respuesta correcta. Luego las respuestas incorrectas. Tercera pregunta. La respuesta es blanco.
[6:44]Cuarta pregunta. La respuesta es Vaidrol Team.
[7:00]Vamos con la última pregunta.
[7:18]Listo. Ya tenemos nuestra lista de preguntas y respuestas. Creamos otra variable. Esta variable será útil para informar al jugador la cantidad de preguntas que le queda por contestar.
[7:36]Su valor será la misma cantidad de preguntas que hay en nuestra lista. Hay cinco preguntas, entonces su valor será cinco.
[7:51]Necesitamos otra variable.
[7:58]Este será el índice. Se encargará de ubicar la pregunta con sus posibles respuestas.
[8:14]Necesitamos otra variable. Este será contador. El contador nos avisará cuando ya no quede más preguntas por responder.
[8:33]Otra variable. Esta variable almacenará temporalmente las preguntas seleccionadas al azar.
[8:49]Creamos un procedimiento.
[8:54]Este procedimiento cambiará el orden de las preguntas de forma aleatoria. Creamos una variable que solo funcionará en este procedimiento.
[9:15]Necesitamos seleccionar de forma aleatoria una pregunta de nuestra lista de preguntas.
[9:32]Excelente. Ahora, la pregunta seleccionada de forma aleatoria, lo vamos a pasar a la variable global que tendrá de forma temporal la pregunta.
[9:51]La etiqueta pregunta mostrará la pregunta que se encuentra guardada de forma temporal.
[10:10]Ya tenemos nuestra pregunta, pero no sabemos su ubicación en la lista. Necesitamos saber su ubicación para poder eliminarlo y evitar que vuelva a aparecer por segunda vez. Usamos la variable índice. Buscamos por el índice la pregunta seleccionada en nuestra lista de preguntas.
[10:41]Excelente. Ya sabemos la ubicación exacta de la pregunta seleccionada. Ahora debemos de eliminar esa pregunta. Aquí pide el índice de la pregunta a eliminar y de dónde lo quieres eliminar. Lo quiero eliminar de mi lista de preguntas. Ahora pide la ubicación de esa pregunta. Ya tenemos su índice. Perfecto. Agregamos la variable del contador. El contador aumentará cada vez que se realiza el llamado de este procedimiento.
[11:30]Listo. Ya tenemos las preguntas. Faltarían los botones.
[11:38]Creamos una variable con una lista nueva. En esta lista vamos a agregar los botones que tenemos en nuestro juego.
[11:56]A diferencia de las otras variables y listas que se mantienen activos y cambiando durante el juego, la variable lista de componentes solo se activará una vez y será al abrir la pantalla del juego. Esto será útil para poder ubicar la respuesta en cualquiera de los tres botones.
[12:40]Creamos otro procedimiento.
[12:57]Este procedimiento se activará cuando se abra la pantalla del juego.
[13:05]Agregamos una condición.
[13:16]Si la variable de cantidad de preguntas es mayor a la variable contador, entonces el juego sigue. Caso contrario, se acaba el juego.
[15:07]Listo. Debemos de activar el procedimiento de generar preguntas, antes de empezar con los botones. Creamos una variable local.
[16:59]Este se encargará de guardar un número entre el uno y la cantidad de elementos que está guardado en la variable respuestas backup. Para que tengas una idea. Si el número aleatorio sale dos, entonces el texto que se encuentra en ese índice se mostrará en el primer botón. Luego pasamos al segundo botón y solo quedaría el texto con índice uno y tres. Bien. Ya tenemos almacenado y mezclado el texto de los botones. Faltaría mostrar los nuevos botones. Hacemos uso del bloque, cualquier botón.
[17:50]Este bloque se encargará de mostrar el texto con las posibles respuestas en los diferentes botones de nuestro juego.
[18:13]Cada bloque de las posibles respuestas tiene que ir exactamente en un botón. Por lo que necesitamos eliminar. Bloque de respuesta que ya tiene su propio botón, se elimina. Listo. Los botones ya está. Tenemos la pregunta generada de forma aleatoria. Los botones que cambian la ubicación de la respuesta de forma aleatoria. Faltaría detectar cuando se presione el botón con la respuesta correcta. Creamos una nueva variable y una lista.
[18:56]Lo que haremos ahora es, detectar si el botón que hemos presionado tiene el texto de la respuesta correcta. Usamos el bloque, cuando cualquier botón sea presionado. Agregamos una condición.
[19:17]En la lista que acabamos de crear, se va a almacenar el texto del botón que acabamos de presionar. Me refiero a la variable, lista texto botones.
[19:31]Y se agrega el texto del botón presionado.
[19:52]Excelente. Necesitamos una variable local. Este se encargará de comparar tu respuesta, con las respuestas del bloque lista de respuestas.
[21:02]Respuesta marcada, bloque de respuestas de esa pregunta que se elimina. Comparamos las respuestas.
[21:31]Si las respuestas son iguales, eso quiere decir que has presionado el botón con la respuesta correcta. Mostrará un mensaje.
[22:06]Por último. Luego de presionar una respuesta, deberá de cambiar a la siguiente pregunta.
[22:14]Perfecto. Hay que verificar.
[22:20]Recuerda, debes de seguir el orden de los bloques, tal y como acabas de ver en este tutorial.
[22:39]Vamos a probar.
[22:53]El juego inicia de esta manera. Presionamos iniciar. Aparecerá la primera pregunta con sus posibles respuestas. Voy a presionar una respuesta incorrecta. Segunda pregunta. La respuesta es Lima. Excelente. Tercera pregunta. Recuerda, no hay un orden exacto para las preguntas. Todo es aleatorio. Las preguntas que ya has respondido, no vuelve a aparecer hasta que inicies con un nuevo juego. Probemos si es cierto lo de las preguntas y botones aleatorios. Cuando son preguntas aleatorias. Al iniciar un nuevo juego, se mostrará cualquiera de las cinco preguntas de nuestra lista. Pueden ver que para uno la primera pregunta es, cuántos minutos tiene una hora. Mientras que para el otro la pregunta es, cuál es la capital de Perú. Marcamos una respuesta. Siguiente pregunta. Pueden observar que la segunda pregunta es diferente. Tercera pregunta. Si la pregunta te vuelve a salir en la misma posición que anteriormente te salió, no hay problema. Recuerda, que todo es aleatorio. Si te fijas en los botones, puedes notar que en un móvil la respuesta está en el segundo botón. Mientras que en el otro, la respuesta está en el primer botón. De esta manera evitamos que se memorice la posición del botón con la respuesta. La respuesta puede estar en el primer botón, segundo o tercer botón. Última pregunta. Terminan con diferentes preguntas. Entonces, podemos asegurar que las preguntas se generan de forma aleatoria de acuerdo a nuestra lista de preguntas creada en los bloques. Y la respuesta cambia de botón en cada nueva ronda de preguntas. Este proyecto tiene mucho para mejorar. Podemos agregar un contador de monedas por responder bien las preguntas, un reloj para que tengas un tiempo límite, una tabla de ganadores, categorías de preguntas, crear el autoguardado, etcétera. Así que, regálame un like y comenta qué te gustaría que agregue a este proyecto. Espero que esta información te haya sido útil. Conmigo hasta la próxima. Chao chao. Vaidrol Team.
