Adobe flex from a list componet to radio buttons - apache-flex

Question

I have tried to do this many ways but for the life of me cannot think how to. Basically I have a list. When an item on the list is selected the radio button labels change. However, I want a label and text area to appear saying once the user has clicked on the radio button if it is right or not.
Code so far: -
<s:VGroup x="103" y="130" width="123" height="125">
<s:RadioButton id="RadioButton1" label="{data.QuestionsRadioButton1}" groupName="QuestionsTestRadioButtons" click="RadioButton1_clickHandler(event)"/>
<s:RadioButton label="{data.QuestionsRadioButton2}" groupName="QuestionsTestRadioButtons" click="radiobutton1_clickHandler(event)" />
<s:RadioButton id="RadioButton3" label="{data.QuestionsRadioButton3}" groupName="QuestionsTestRadioButtons" click="radiobutton2_clickHandler(event)"/>
</s:VGroup>
I will not post all the code as we will be here forever. However, is there a way maybe an if function? To say if the radio button clicked actually is the right answer or not?
Any suggestions would be helpful
Thank You

Answer 1

My attempt to draft a complete example:
Questionaire.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:local="*">
<fx:Declarations>
<s:ArrayCollection id="questions">
<local:Question text="It is raining …">
<s:ArrayCollection>
<local:Answer text="Men"/>
<local:Answer text="Cats and dogs" correct="true"/>
<local:Answer text="Candy"/>
</s:ArrayCollection>
</local:Question>
<local:Question text="The sky is …">
<s:ArrayCollection>
<local:Answer text="Blue" correct="true"/>
<local:Answer text="Orange" correct="true"/>
<local:Answer text="Grey" correct="true"/>
<local:Answer text="Green"/>
</s:ArrayCollection>
</local:Question>
</s:ArrayCollection>
</fx:Declarations>
<s:DataGroup dataProvider="{questions}" itemRenderer="QuestionRenderer">
<s:layout>
<s:VerticalLayout gap="24"/>
</s:layout>
</s:DataGroup>
</s:Application>
QuestionRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:DataRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
[Bindable("dataChange")]
public function get question():Question {
return data as Question;
}
]]>
</fx:Script>
<fx:Declarations>
<s:RadioButtonGroup id="answerGroup"/>
</fx:Declarations>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Label fontWeight="bold" text="{question.text}"/>
<s:DataGroup dataProvider="{question.answers}">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:DataRenderer>
<fx:Script>
<![CDATA[
import spark.components.RadioButtonGroup;
public function get answerGroup():RadioButtonGroup {
return outerDocument.answerGroup;
}
]]>
</fx:Script>
<s:RadioButton groupName="answerGroup" label="{data.text}" value="{data}"/>
</s:DataRenderer>
</fx:Component>
</s:itemRenderer>
</s:DataGroup>
<s:Label visible="{answerGroup.selectedValue}" text="This is {answerGroup.selectedValue.correct ? 'correct' : 'incorrect'}."/>
</s:DataRenderer>
Question.as
package {
import mx.collections.ArrayCollection;
[Bindable]
[DefaultProperty("answers")]
public class Question {
public var text:String;
public var answers:ArrayCollection;
}
}
Answer.as
package {
[Bindable]
public class Answer {
public var text:String;
public var correct:Boolean = false;
}
}