Comment créer un composant Flex personnalisé pour un exercice de remplissage de trou?

Question

L'objectif de cette composante est de tester les connaissances d'un élève sur un sujet donné. Dans l'exemple ci-dessous, il s'agirait de la géographie. L'élève reçoit un morceau de texte contenant des mots manquants. Il / elle doit remplir (tapez dans ce cas) les mots manquants - par conséquent, ce type de test / exercice est appelé remplissage de lacunes. Il pourrait y avoir plusieurs phrases dans l'exercice avec plusieurs lacunes - quelque chose qui ressemble à ceci:

Londres est la ________ et la plus grande agglomération urbaine de la _____________. Établissement important depuis deux millénaires, l'histoire de Londres remonte à sa fondation par le ___________.

Le composant doit pouvoir afficher du texte avec des espaces "flottants" dans le texte. Ces lacunes auraient un comportement similaire au contrôle TextInput. Une fois que l'étudiant a soumis sa réponse, le composant renverra les mots saisis et ceux-ci seront comparés aux réponses attendues.

Le composant doit pouvoir afficher le texte et les espaces vides déduisent dynamiquement tous les paramètres requis à partir du texte. La position des espaces peut être marquée par un jeton spécial, tel que # 10 #, qui marquerait la position de l’espace dans le texte et la taille de cet espace (nombre de caractères).

Par conséquent, le texte ci-dessus pourrait ressembler à ceci avant d'être chargé dans le composant:

Londres est le n ° 10 et la plus grande agglomération urbaine du n ° 15. Établissement important depuis deux millénaires, l'histoire de Londres remonte à sa fondation par le # 8 #.

Answer 1

Vous avez besoin d'un conteneur prenant en charge la disposition des flux. Cela ne fait pas partie du framework Flex standard, mais vous pouvez trouver une implémentation fonctionnelle ici (faisant partie de l'excellent FlexLib) et ici (implémentation autonome) .

Answer 2

Je suppose que vous pourriez avoir un canevas et ajouter dynamiquement des étiquettes & amp; TextInputs. Le problème ici serait de savoir où vont les sauts de ligne; Je ne sais pas comment vous pouvez facilement calculer la largeur d'un contrôle textuel à partir du texte défini, mais cela doit être possible.

Je me demandais s’il existait un contrôle de présentation qui pouvait le faire pour vous, mais je ne peux voir que HBox & amp; VBox qui sont trop restrictives. Il serait utile de créer ou de trouver un contrôle de présentation générique à habillage automatique.

Answer 3

FlowBox est la voie à suivre. Vous pouvez utiliser horizontalGap pour contrôler l’espacement entre le texte et les espaces vides.

En ce qui concerne les moyens de l’encoder, j’avais une version en javascript que vous êtes libre de regarder. Rendu , Encodage des données gapfill . Cela faisait partie d'un projet animalier pour un générateur d'activités d'apprentissage générique .

Depuis, je suis passé à Flex. J'ai mis à votre disposition des exemples de activités d'apprentissage dans Flex . Vous ne trouverez pas d’espace vide, mais vous trouverez un " type in " votre réponse est assez proche.

Toutes les sources ouvertes. Soyez averti cependant que j'ai écrit ceci à l'époque où j'apprenais Flex ... c'était une excuse pour apprendre diverses techniques. Le code gagnerait presque certainement à être amélioré.

Si vous trouvez quelque chose d'intéressant, envisagez de faire partie du projet exerciste sur eduforge