갭 필 운동을 위해 맞춤형 플렉스 구성 요소를 만드는 방법은 무엇입니까?

Question

이 구성 요소의 목적은 주어진 주제에 대한 학생의 지식을 테스트하는 것입니다. 아래의 예에서는 지리입니다. 학생에게는 말이없는 텍스트가 주어집니다. 누락 된 단어를 채워야합니다 (이 경우 입력) - 이런 종류의 테스트/운동을 갭 필이라고합니다. 여러 차례의 틈새가있는 연습에 여러 문장이있을 수 있습니다.

런던은 _____________에서 ________이자 가장 큰 도시 지역입니다. 런던의 역사는 2 천년 동안의 중요한 정착지 ___________의 창립으로 거슬러 올라갑니다.

구성 요소는 텍스트 내에 '플로팅'간격으로 텍스트를 표시 할 수 있어야합니다. 이러한 격차는 TextInput 제어와 비슷한 동작을 가질 것입니다. 학생이 답변을 제출하면 구성 요소는 입력 된 단어를 반환 한 다음 예상 답변과 비교됩니다.

구성 요소는 텍스트를 표시 할 수 있어야하며 간격은 텍스트에서 필요한 모든 매개 변수를 동적으로 도출합니다. 간격의 위치는 # 10 #과 같은 특수 토큰으로 표시 될 수 있으며, 이는 텍스트 내의 간격의 위치와 갭의 크기 (문자 수)를 표시합니다.

따라서 위의 텍스트는 구성 요소에로드되기 전에 다음과 같이 보일 수 있습니다.

런던은 #10 #이자 15 #에서 가장 큰 도시 지역입니다. 런던의 역사는 2 천년 동안의 중요한 정착지가 #8 #의 창립으로 거슬러 올라갑니다.

Answer 1

흐름 레이아웃을 지원하는 컨테이너가 필요합니다. 표준 Flex 프레임 워크의 일부는 아니지만 일부 작업 구현을 찾을 수 있습니다. 여기 (우수한 flexlib의 일부) 및 여기 (독립형 구현).

Answer 2

캔버스를 가질 수 있고 레이블 및 텍스트를 동적으로 추가 할 수 있다고 생각합니다. 여기서 문제는 라인 브레이크가 어디로 가는지 아는 것입니다. 세트 텍스트에서 텍스트 기반 컨트롤의 너비를 쉽게 계산할 수있는 방법을 잘 모르겠지만 가능해야합니다.

나는 당신을 위해 이것을 할 수있는 레이아웃 컨트롤이 있는지 궁금했지만 너무 제한적인 hbox & vbox 만 볼 수 있습니다. 일반 자동 포장 레이아웃 제어를 작성하거나 찾는 것이 유용합니다.

Answer 3

Flowbox는 갈 길입니다. HorizontalGap을 사용하여 텍스트와 입력 간격 사이의 간격을 제어 할 수 있습니다.

그것을 인코딩하는 방법과 관련하여, 나는 당신이 자유롭게 볼 수있는 JavaScript 버전을 가지고있었습니다. 표현, 갭 필 데이터의 인코딩. 그것은 애완 동물 프로젝트의 일부였습니다 일반 학습 활동 생성기.

나는 이후 플렉스로 옮겼다. 나는 이용 가능한 샘플을 만들었다 Flex에서 학습 활동. 당신은 갭 필을 찾을 수 없지만 충분히 가까운 "입력"을 찾을 수 있습니다.

모든 오픈 소스. 그러나 내가 Flex를 배우고있는 당시에 이것을 썼다는 경고를받습니다 ... 다양한 기술을 배우는 것은 변명이었습니다. 코드는 거의 확실하게 개선 될 것입니다.

당신이 멋진 것을 생각해 내면, Eduforge의 연습 프로젝트