Configuring Items API to Initialize in RTL (Right-to-Left) Mode (Arabic and Hebrew Language Support)

The Items API (with assessment player) can be initialized to display content from right-to-left (RTL), to support languages such as Arabic.

This feature helps facilitate internationalization of the assessment player and assessments for languages that rely on RTL script.

Initializing Items API in RTL mode

Right-To-Left script mode has only minimal additional criteria on top of the regular initialization of Items API.

It requires a data attribute data-lrn-dir="rtl" to be added to the API script element:

<script src="[version]" 

In conjunction with the internationalization configurations available (compiled below), Items API with assessment player can be flexibly localized.

<div id="learnosity_assess"></div>
<script src="[version]" data-lrn-dir="rtl"></script>
var initOptions = {
"rendering_type": "assess",
"config": {
"labelBundle": {
// Here is where we can replace UI labels
// for the Assess player with key-value pairs
// (referenced below)
"questions_api_init_options": {
"labelBundle": {
// Here is where we can replace
// UI labels for Questions with
// key-value pairs (referenced below)
var itemsApp = LearnosityItems.init(initOptions);

Code Example 1: Items API Internationalization Configurations 

Supported Question types

The following Question types are supported in RTL:


You can see the Learnosity RTL implementation on our demo site. 

Mixed usage

Cases, where you want to render the assessment player in one direction and have the Item contents rendered in another, are also supported. The list of supported combinations for the data-lrn-dir data attribute are listed below.

For example, this can be useful when you want to render the assessment player in Arabic and want to display an Activity that is related to learning English.

data-lrn-dir Assessment player Item content
ltr Left-to-right Left-to-right
rtl Right-to-left Right-to-left
ltr-rtl Left-to-right Right-to-left
rtl-ltr Right-to-left Left-to-right

Next steps

For more information, see the article about Configuring Author API in RTL mode, or Translating the Learnosity UI with Label Bundles

To get up and running, consider looking at the internationalization repo that contains label bundles, Question Editor templates and thumbnails. You can see these in action via our authoring RTL demo.

Was this article helpful?

Did you arrive here by accident? If so, learn more about Learnosity.