17
Oct
07

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.


2 Responses to “Creating a simple multiple-choice quiz using the RadioButton and RadioButtonGroup controls”


  1. 1 Anonymous Jun 2nd, 2008 at 4:56 am

    2) Which element has the highest first ionization energy?

  2. 2 Anonymous Aug 15th, 2008 at 4:52 am

    Haha…uuh Phosphorus??

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".




Badge Farm

  • Firefox 2
  • Powered by Redoable 1.2
  • Feeds burnt by Feedburner
  • Feed