How do I make a custom Flex component for a gap-fill exercise?

Question

The purpose of this component is to test knowledge of a student on a given subject - in the example below it would be geography. The student is given a piece of text with missing words in it. He/she has to fill in (type in this case) the missing words - hence this kind of test/exercise is called gap-fill.There could be several sentences in the exercise with multiple gaps - something that looks like this:

*London is the ______ and largest urban area in the _________. An important settlement for two millennia, London's history goes back to its founding by the _______.***

The component must be able to display text with 'floating' gaps within the text. These gaps would have similar behaviour to TextInput control. Once the student submits the answer the component will return the words that were typed in and these are then compared against the expected answers.

The component should be able to display the text and the gaps dynamically derive all required parameters from the text. The position of the gaps could be marked by a special token - such as #10# - which would mark the position of the gap within the text and the size of the gap (number of characters).

Therefore the above text could look like this before being loaded into the component:

London is the #10# and largest urban area in the #15#. An important settlement for two millennia, London's history goes back to its founding by the #8#.

Answer 1

I guess you could have a Canvas, and dynamically add Labels & TextInputs. The problem here would be knowing where the line-breaks go; I'm not sure how you can easily calculate the width of a text-based control from the set text but it must be possible.

I wondered if there is a layout control which can do this for you but I can only see HBox & VBox which are too restrictive. Creating or finding a generic auto-wrapping layout control would be useful.

Answer 2

You need a container that supports flow layout. It's not part of the standard Flex framework but you can find some working implementation here (part of the excellent FlexLib) and here (standalone implementation).

Answer 3

Thank you for the FlowBox tip - I think this component will be sufficient while prototyping. Hovewer I will have to think about implementing something a bit more specific for the purpose later on.

Answer 4

FlowBox is the way to go. You can use horizontalGap to control spacing between text and input gaps.

When it comes to ways of encoding it, I had a version in javascript you are free to look at. Rendering, Encoding of gapfill data. It was part of pet project for a generic learning activity generator.

I have since moved onto Flex. I have made available samples of learning activities in Flex. You won't find there a gapfill but you will find a "type in" your answer that is close enough.

All open source. Be warned however that I wrote this at the time where I was learning Flex... it was an excuse to learn diverse techniques. The code almost certainly gain to be improved.

If you come up with something nifty, consider constributing to the exercist project on eduforge