Creating a simple multiple-choice quiz using the RadioButton and RadioButtonGroup controls

The following example shows how you can make a very simple multiple-choice type quiz using the RadioButton and RadioButtonGroup controls. Each time you make an incorrect choice and click the check answers button, the selected (incorrect) choice is removed from the Flex application. If you select the correct answer and click the check answers button, all the incorrect answers are removed.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/17/creating-a-simple-multiple-choice-quiz-using-the-radiobutton-and-radiobuttongroup-controls/ -->
<mx:Application name="Quiz_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        RadioButton {
            paddingLeft: 20;
            horizontalGap: 4;
        }

        .QuestionVBox {
            paddingBottom: 50;
        }

        .QuestionText {
            fontWeight: bold;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private function checkAnswers():void {
                var success:Boolean = true;

                success = checkGroup(q1_group) && success;
                success = checkGroup(q2_group) && success;

                Alert.show("SUCCESS = " + success);
            }

            private function checkGroup(rbg:RadioButtonGroup):Boolean {
                var rb:RadioButton;
                var valid:Boolean = true;
                var i:int;

                /* If the user got the answer wrong... */
                if (rbg.selectedValue != true) {
                    /* Set the 'valid' flag to false. */
                    valid = false;
                    /* Get the currently selected radio button, if any. */
                    rb = rbg.selection;
                    /* Actually, check if a radio button WAS selected... */
                    if (rb != null) {
                        /* If there was a selected radio button, and it
                           was the wrong answer, hide the answer. */
                        rb.includeInLayout = false;
                        rb.visible = false;
                    }
                /* Else the user selected the right answer. Hey, it was
                   bound to happen eventually! */
                } else {
                    /* Loop over all the radio buttons in this group. */
                    for (i = 0; i < rbg.numRadioButtons; i++) {
                        /* Create a reference to the current radio button. */
                        rb = rbg.getRadioButtonAt(i);
                        /* If the radio button is NOT selected... */
                        if (!rb.selected) {
                            /* Hide all wrong answers, they already got
                               the question right. */
                            rb.includeInLayout = false;
                            rb.visible = false;
                        }
                    }
                }

                /* Return the value of the 'valid' flag. */
                return valid;
            }
        ]]>
    </mx:Script>

    <mx:RadioButtonGroup id="q1_group" enabled="false" />
    <mx:RadioButtonGroup id="q2_group" enabled="false" />

    <mx:Panel title="Subject: Periodic Table" width="100%" height="100%">
        <mx:VBox styleName="QuestionVBox" width="100%">
            <mx:Text styleName="QuestionText"
                    selectable="false"
                    width="100%">
                <mx:text>1) Which three groups of the Periodic Table contain the most elements classified as metalloids (semimetals)?</mx:text>
            </mx:Text>

            <!-- Wrong -->
            <mx:RadioButton id="q1_a"
                    label="1, 2, and 13"
                    group="{q1_group}" />
            <!-- Wrong -->
            <mx:RadioButton id="q1_b"
                    label="2, 13, and 14"
                    group="{q1_group}" />
            <!-- RIGHT -->
            <mx:RadioButton id="q1_c"
                    label="14, 15, and 16"
                    group="{q1_group}"
                    value="true" />
            <!-- Wrong -->
            <mx:RadioButton id="q1_d"
                    label="16, 17, and 18"
                    group="{q1_group}" />
        </mx:VBox>

        <mx:VBox styleName="QuestionVBox" width="100%">
            <mx:Text styleName="QuestionText"
                    selectable="false"
                    width="100%">
                <mx:text>2) Which element has the highest first ionization energy?</mx:text>
            </mx:Text>

            <!-- Wrong -->
            <mx:RadioButton id="q2_a"
                    label="sodium"
                    group="{q2_group}" />
            <!-- Wrong -->
            <mx:RadioButton id="q2_b"
                    label="aluminum"
                    group="{q2_group}" />
            <!-- Wrong -->
            <mx:RadioButton id="q2_c"
                    label="calcium"
                    group="{q2_group}" />
            <!-- RIGHT -->
            <mx:RadioButton id="q2_d"
                    label="phosphorus"
                    group="{q2_group}"
                    value="true" />
        </mx:VBox>

        <mx:ControlBar horizontalAlign="right">
            <mx:Button label="Check answers"
                    click="checkAnswers();" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

Tagged as: group, selectedValue, selection