Como posso fazer um componente Flex personalizado para um exercício gap-suficiência?

Question

O objetivo deste componente é o conhecimento de teste de um estudante sobre um determinado assunto - no exemplo abaixo seria geografia. O estudante é dado um pedaço de texto com palavras faltando nele. Ele / ela tem de preencher (tipo neste caso) as palavras que faltam - daí este tipo de teste / exercício é chamado gap-fill.There poderia ser várias frases no exercício com várias lacunas - algo que parece com isso:

Londres é o ________ e maior área urbana no _____________. Um pagamento importante por dois milênios, a história de Londres volta a sua fundação pela ___________.

O componente deve ser capaz de exibir texto com 'flutuante' lacunas dentro do texto. Essas lacunas teria comportamento semelhante ao controle TextInput. Uma vez que o estudante envia a resposta do componente retornará as palavras que foram digitadas em e estes são então comparadas com as respostas esperadas.

O componente deve ser capaz de exibir o texto e as lacunas derivam de forma dinâmica todos os parâmetros necessários do texto. A posição das lacunas poderia ser marcado por um símbolo especial - como # 10 # -. Que marcaria a posição do gap dentro do texto e o tamanho da lacuna (número de caracteres)

Por isso, o texto acima poderia ser semelhante a este, antes de ser carregado para o componente:

Londres é o # 10 # e maior área urbana no # 15 #. Um pagamento importante por dois milênios, a história de Londres volta a sua fundação pela # 8 #.

Answer 1

Você precisa de um recipiente que suporta um fluxo layout. Não é parte da estrutura do Flex padrão, mas você pode encontrar alguns implementação de trabalho aqui (parte do excelente FlexLib) e aqui (aplicação standalone) .

Answer 2

Eu acho que você poderia ter um Canvas, e dinamicamente adicionar Labels & TextInputs. O problema aqui seria saber onde as quebras de linha ir; Eu não sei como você pode facilmente calcular a largura de um controle baseado em texto do texto conjunto, mas deve ser possível.

Gostaria de saber se existe um controle de layout que podem fazer isso para você, mas eu só posso ver HBox & VBox que são muito restritivas. Criando ou encontrar um controle genérico esquema auto-wrapping seria útil.

Answer 3

FlowBox é o caminho a percorrer. Você pode usar horizontalGap para controlar o espaçamento entre as lacunas de texto e de entrada.

Quando se trata de formas de codificação-lo, eu tinha uma versão em javascript você é livre para olhar. Rendering , codificação de dados gapfill. Era parte do projeto de estimação para uma href="http://widged.com/wiki/doku.php?id=en:projects:exercist:exercist" rel="nofollow noreferrer"> atividade de aprendizagem genérica .

Tenho visto que se mudou para Flex. Fiz amostras disponíveis de actividades de aprendizagem em Flex . Você não vai encontrar lá um gapfill mas você vai encontrar um "tipo em" sua resposta que está perto o suficiente.

Todos código aberto. Esteja avisado, porém, que eu escrevi isso no momento em que eu estava aprendendo Flex ... foi uma desculpa para aprender diversas técnicas. O código quase certamente ganhar de ser melhorado.

Se você vir com algo bacana, considere constributing ao href="https://eduforge.org/projects/exercist/" rel="nofollow projeto exercist em eduforge