Come posso creare un componente Flex personalizzato per un esercizio di riempimento del gap?

Question

Lo scopo di questo componente è testare la conoscenza di uno studente su una determinata materia - nell'esempio che segue sarebbe la geografia. Lo studente riceve un pezzo di testo con parole mancanti. Deve riempire (digita in questo caso) le parole mancanti - quindi questo tipo di test / esercizio si chiama gap-fill. Ci potrebbero essere diverse frasi nell'esercizio con più spazi vuoti - qualcosa che assomiglia a questo:

Londra è la ________ e la più grande area urbana nel _____________. Un insediamento importante per due millenni, la storia di Londra risale alla sua fondazione da parte del ___________.

Il componente deve essere in grado di visualizzare il testo con spazi "mobili" all'interno del testo. Queste lacune avrebbero un comportamento simile al controllo TextInput. Una volta che lo studente ha inviato la risposta, il componente restituirà le parole digitate e queste verranno quindi confrontate con le risposte previste.

Il componente dovrebbe essere in grado di visualizzare il testo e gli spazi ricavano dinamicamente tutti i parametri richiesti dal testo. La posizione degli spazi potrebbe essere contrassegnata da un token speciale - come # 10 # - che segnerebbe la posizione dello spazio all'interno del testo e la dimensione dello spazio (numero di caratteri).

Pertanto il testo sopra potrebbe apparire così prima di essere caricato nel componente:

Londra è la # 10 # e la più grande area urbana nella # 15 #. Un insediamento importante per due millenni, la storia di Londra risale alla sua fondazione dal # 8 #.

Answer 1

È necessario un contenitore che supporti il ??layout del flusso. Non fa parte del framework Flex standard ma puoi trovare alcune implementazioni funzionanti qui (parte dell'eccellente FlexLib) e qui (implementazione indipendente) .

Answer 2

Suppongo che potresti avere un Canvas e aggiungere dinamicamente etichette & amp; TextInputs. Il problema qui sarebbe sapere dove vanno le interruzioni di linea; Non sono sicuro di come sia possibile calcolare facilmente la larghezza di un controllo basato sul testo dal testo impostato, ma deve essere possibile.

Mi chiedevo se esiste un controllo di layout che può fare questo per te, ma posso vedere solo HBox & amp; VBox troppo restrittivi. Sarebbe utile creare o trovare un controllo di layout di avvolgimento automatico generico.

Answer 3

FlowBox è la strada da percorrere. Puoi usare horizontalGap per controllare la spaziatura tra testo e spazi di input.

Quando si tratta di modi per codificarlo, ho avuto una versione in javascript che sei libero di guardare. Rendering , Codifica dei dati gapfill . Faceva parte del progetto per animali domestici per un generatore di attività di apprendimento generico .

Da allora mi sono trasferito su Flex. Ho reso disponibili esempi di attività di apprendimento in Flex . Non troverai un riempimento ma troverai un "tipo" in " la tua risposta abbastanza vicina.

Tutti open source. Attenzione però che l'ho scritto nel momento in cui stavo imparando Flex ... era una scusa per imparare tecniche diverse. Il codice quasi sicuramente migliorerà.

Se ti viene in mente qualcosa di elegante, prendi in considerazione la possibilità di iscriverti al progetto di allenamento su eduforge