In the exercise with chips RTL languages still show the chips from left to right

[szabgab]

In the exercises where you have chips and need to select the words to form a phrase the chips are always added from left to right.
In RTL languages they should be added from right to left. You can observe the behavior in the https://librelingo.app/course/ladino-from-hebrew course.

[kantord]

I created a new project for collecting the issues that are necessary to support languages that don't use the Latin alphabet. This is one of them.

It should be relatively easy to solve. Nevertheless the small and easy steps needed for this are scattered over many parts of the project, because this touches on many aspects.

Allow languages to be marked as RTL in course.yaml

This function needs to be changed:

LibreLingo/apps/librelingo_yaml_loader/librelingo_yaml_loader/yaml_loader.py

Lines 40 to 47 in e7719b1

	def _convert_language(raw_language):
	"""
	Convert a YAML langauge description to a Language() object
	"""
	return Language(
	name=raw_language["Name"],
	code=raw_language["IETF BCP 47"],
	)

It needs to support the optional property "Writing direction": "right-to-left". It needs to be optional for backwards compatibility, and default to "left-to-right" as all existing courses use that now.

We could rely on some database or library for this, but I feel like those will be limited. Since this is a one time thing to do when setting up a course it's probably more wise to let course authors customize it. Perhaps later we can also add heuristics in a second MR which makes the default be based on language code rather than simply defaulting to "left-to-right"

Pass on this data to chips challenges on the front-end

You need to simply add a new field here:

LibreLingo/apps/librelingo_json_export/librelingo_json_export/challenge_types.py

Lines 155 to 173 in e7719b1

	return [
	{
	"type": "chips",
	"translatesToSourceLanguage": reverse,
	"phrase": _define_words_in_sentence(
	course, get_phrase_text(phrase), reverse
	),
	"chips": get_chips_from_phrase(get_input_texts, phrase, course),
	"solutions": get_solutions_from_phrase(get_input_texts, phrase),
	"formattedSolution": remove_control_characters_for_display(
	get_input_text(phrase)
	),
	"id": get_dumb_opaque_id(
	"Chips", phrase, "reverse chips" if reverse else "chips"
	),
	"priority": 2,
	"group": get_dumb_opaque_id("Group", phrase),
	}
	]

Create a RTL test course

Basically create a copy of the test course. Name it test_rtl. Make sure to change the content and change the IDs. You can remove anything that's not needed from the test course in order to have a minimal example and not have to "translate" the test course.

Add visual testing for this scenario

In order to make sure the solution keeps working in the future we need to add visual testing. We currently have E2E tests with visual testing for chips challenges. This is the easiest part as we just need to add a simple case like this:

  Scenario: Getting a chips challenge with a RTL language
    Given I open "/course/test_rtl/skill/chips-test-0?testChallenge=23453245"  # <----- make sure to use correct ID
    And chips challenge with a RTL language looks correct

Change FE code to display them correctly

LibreLingo/apps/web/src/components/ChipsChallenge/index.svelte

Lines 127 to 146 in e7719b1

	<div>
	<div class="solution">
	<div id="answer" class="chips" bind:this={answerElement}>
	{#each answerToRender as chip, index}
	<span class="chip" data-id={chip} on:click="{handleChipClick}">
	<span class="tag is-medium">{chip}</span>
	</span>
	{/each}
	</div>
	</div>
	<p class="sub-instructions">Use these words:</p>
	<div id="chips" class="chips" bind:this={chipsElement}>
	{#each chipsToRender as chip, index}
	<span class="chip" data-id={chip} on:click="{handleChipClick}">
	<span class="tag is-medium">{chip}</span>
	</span>
	{/each}
	</div>
	</div>