Ejemplo #10 Aplicación de los ChoiceGroup

Realizar un programa para el celular que muestre una serie de cuatro preguntas con sus respectivas respuestas para que el usuario elija la correcta, al final el programa deberá mostrar el total de respuestas correctas. Las preguntas son las siguientes:

Pregunta 1: ¿Cuándo inicio la lucha por la independencia de México?

Respuestas:

• 16 de septiembre de 1910
• 16 de septiembre de 1810 -- Correcta
• 20 de noviembre de 1910

Pregunta 2: ¿Quién fue el cura que dio el grito para iniciar la independencia de México?

Respuestas:

• Miguel Hidalgo -- Correcta
• José María Morelos
• Ignacio Allende

Pregunta 3: ¿Cuándo fue consumada la independencia de México?

Respuestas:

• 20 de noviembre de 1910
• 16 de septiembre de 1821
• 27 de septiembre de 1821 -- Correcta

Pregunta 4: ¿Quién estaba al mando cuando fue consumada la independencia de México?

Respuestas:

• Agustín de Iturbide -- Correcta
• Benito Juárez
• Vicente Guerrero

Solución

Paso 1. Crear los Form necesarios (Interfaz de usuario)

Cada pregunta se va a colocar en un Form, en la vista de flujo (flow) de Netbeans agregamos los respectivas Form y Command, si no recuerdas como se hace repasa viendo el ejemplo #6. La figura siguiente muestra como se ven los cinco Form necesarios con sus respectivos Command (un Form para resultados y cuatro para las preguntas).

La idea es la siguiente:

El form es para la pregunta #1.

El form1 es para la pregunta #2.

El form2 es para la pregunta #3.

El form3 es para la pregunta #4.

El form4 es para resultados.

Se puede observar la navegación, cada okCommand va al siguiente Form excepto el form4 que al presionarlo se finaliza la ejecución del programa, también los exitCommand al presionarlos finalizan la ejecución del programa.

Paso #2 Agregar los ChoiceGroup a cada Form (interfaz de usuario)

También esta parte ya se vio en el ejemplo # 4, si no recuerdas como se hace, no dudes en repasar el ejemplo. La figura siguiente muestra al NetBeans con uno de los Form con su respectivo ChoiceGroup, para la pregunta 1.

Se procede de igual manera, agregando el ChoiceGroup a cada Form con su respectiva pregunta y sus respectivas respuestas.

Paso #3 Agregando el código de selección del ChoiceGroup a los form

En la vista de flujo, del programa se observa que el okCommand del form al presionarse, hace que se muestre el form1, y el okCommand1 del form1 hace que se muestre el Form2 y así sucesivamente, es posible como ya se vio en el ejemplo #8 y en el ejemplo #9 como agregar código al presionarse el okCommand, para hacerlo, como se vio en varios ejemplos, basta colocar el mouse en el OkCommand y dar clic derecho y en el menú contextual “Go To Source” dar clic tal y como se observa en la figura siguiente.

Al hacer lo anterior se abre la ventana de código, intutivamente NetBeans nos lleva al código que se ejecuta cuando se presiona el okCommand que está en el form la figura siguiente muestra este código.

Ahí hay un recuadro negro, ese es el if que me identifica que se presiono el okCommand, tiene código generado por NetBeans como se observa, ahí se muestra el método

switchDisplayable(null, getForm1());

Este método se encarga de mostrar el form1 (la pregunta #2), recuerde cuando se presiona el okCommand, del form (la pregunta #1) el programa tiene que mostrar el form1 (pregunta #2). bueno pues esa es la instrucción que lo hace, al ejecutarse esa instrucción se observará en el celular el form1 (con la pregunta #2).

No es la intención de este post explicar todavía estos métodos y todo el código generado por NetBeans, aun no es tiempo de explicarlo quizá más adelante, ahora me interesa que se entienda lo otro, el if, los ChoiceGroup, para así poder realizar aplicaciones como esta del cuestionario.

Bueno, analicemos el código un poquito, justo en la imagen anterior en el recuadro negro se puede observar dos cosas, al iniciar el if dice en ingles “//write pre-action user code here” después viene la instrucción switchDisplayable y finalmente viene “//write post action code here” vea la figura anterior para más claridad, los enunciados yo los visualizo así: “escriba el código antes de que aparezca el form1 “ y el otro enunciado es “escriba el código después de que ya apareció el form1”.

Entonces ¿Dónde debo colocar el código para saber cuál fue la respuesta del usuario para la pregunta #1? ¿Antes o después de la instrucción switchDisplayable?.

La respuesta es sencilla, para saber cúal fue la respuesta seleccionada para la pregunta #1 que esta en el form hay que colocar el código antes de que aparezca la pregunta #2 (por que esta pregunta esta en el form1) es decir antes del switchDisplayable().

El código para saber si se selecciona un choiceGroup es el siguiente y ya fue analizado en el post anterior a este un código similar.

indice = choiceGroup.getSelectedIndex();
if (indice == 1)
total++;

Vemos varias cosas, primero vea el código anterior, se supone que se ha declarado la variable índice de tipo int, para poder saber que elemento del ChoiceGroup fue seleccionado usando el método getSelectIndex(), que regresa un valor entero, bueno pues la siguiente figura muestra exactamente donde se declara la variable índice.

Se recomienda la declaración de variables justo al iniciar el método, el método fue generado por NetBeans y sirve para procesar todos lo okCommand y los exitCommand.

Por cierto este tipo de variables declaradas dentro de un método, se llaman variables locales, solo se usan en ese método y no se pueden usar en otro lado del código.

Ahora veamos otra vez el código para saber cuando un ChoiceGroup esta seleccionado

 indice = choiceGroup.getSelectedIndex();
if (indice == 1)
total++;

Notese como la variable índice se compara solo con el valor de 1 ¿Por qué? Sencillo por que el índice 1 contiene la respuesta correcta para la pregunta #1. Las respuestas incorrectas no nos interesan por eso no se comparan con nada.

Por otro lado hay una instrucción que no se había manejado nunca en el blog:

total++;

la palabra total es una variable que va almacenando el total de respuestas correctas que va acumulando el usuario, el operador ++ significa incremento, es decir total inicia con 0 y si se obtiene una respuesta buena se incrementa una unidad, si se elige la respuesta correcta para la pregunta #1 la variable total almacena ahora el 1.

La variable se declara casi al iniciar el código de todo el programa, se debe recorrer todo el código generado por NetBeans para colocar la declaración de esta variable como se observa en la figura:

Las variables declaradas ahí se les llama variables globales y mantienen el valor que se va almacenando desde el inicio y hasta el final del programa, esto es contrario a las variables locales, ya que estas, cada que inicia el método donde son declaradas se reinicia el valor a 0, este es el caso de la variable índice, cada vez que se va navegando entre los form, y se presiona un okCommand, esta variable se reinicia a 0, y si se desea acumular el total de respuestas correctas no funcionaria si la variable total se declara como variable local, ese es la razón del por que se declara la variable global.

De igual manera que lo explicado en pasos anteriores se agrega casi el mismo código a los form1, form2 y form3 para las preguntas 2, 3 y 4 respectivamente, simplemente hay que comparar el índice con la respuesta correcta e incrementar la variable total.

Al final se deben mostrar los resultados en en el form4, recuerde que cuando se presiona el okCommand del form 3 nos muestre el form4, pues justo ahi despues de la instrucción switchDisplayable() hay que colocar el código para mostrar los resultados obtenidos, simplemente basta con agregar al stringItem una sentencia como la siguiente:

stringItem.setText(“Usted tuvo “ + total + “aciertos de 4 posibles”);

Si la variable total tiene 2, escribiría el programa en el form4 así “Usted tuvo 2 aciertos de 4 posibles”.

Video-Tutorial

Espero que me haya explicado siento que fue mucha la información pero el siguiente video muestra la solución exacta del ejemplo #10, analícelo y compleméntelo con lo que se ha expuesto aquí y quizá le quede más claro todo.

Código Fuente

Dando clic aquí puedes bajar el código fuente completo para el ejemplo #10, esta comprimido es la carpeta que genera el NetBeans.