R – How to make a custom Flex component for a gap-fill exercise

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