<?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 xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white" viewSourceURL="srcview/index.html">

    <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>