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

To help facilitate internationalization of the authoring environment for languages that rely on right-to-left (RTL) script, Author API can be configured to display content right-to-left (RTL).

Steps required:

  1. Configure Author API for RTL mode
  2. Internationalization of UI via label bundles
  3. Internationalization and Question Editor API template customization

Configure Author API for RTL Mode

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

It requires that a data-lrn-dir="rtl" attribute is applied to the script tag used to include Learnosity's Author API, on the page where Author API is being initialized.

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

 

<body>
    <span id="learnosity-author"></span>
    <script src="https://authorapi.learnosity.com/?latest" data-lrn-dir="rtl"></script>
    <script>
        var initOptions = {
            ...
            "config": {
                ...
                "label_bundle": {
                    // Here is where we can replace UI labels for Author API
                    // with key-value pairs (referenced below)
                    ...
                },
                "dependencies": {
                    "question_editor_api": {
                        "init_options": {
                            ...
                            "label_bundle": {
                                // Here is where we can replace UI labels for Question Editor API
                                // with key-value pairs (referenced below)
                                ...
                            },
                            "question_type_groups": {
                                // Here is where we can replace UI names of question type groups
                                // for Question Editor API (referenced below)
                                ...
                            },
                            "question_types": {
                                // Here is where we can customize question types themselves
                                // including placeholder text for the question stimulus,
                                // and placeholder text for question options (referenced below)
                                ...
                            },
                            "question_type_templates": {
                                // Here is where we can replace the UI labels and descriptions
                                // of question type templates in Question Editor API (referenced below)
                                ...
                            }
                        }
                    },
                    "questions_api": {
                        "init_options": {
                            "labelBundle": {
                                // Here is where we can replace UI labels for Questions API
                                // with key-value pairs (referenced below)
                                ...
                            }
                        }
                    }
                }
            }
        };

        var authorApp = LearnosityAuthor.init(initOptions);
    </script>
</body>

All requisite APIs support internationalization (i18n) via label bundles.

The following guides detail the label lists, or, as with Question Editor API, a manner in which to discover labels and their placements dynamically:

All label bundles are included during initialisation as objects containing the relevant key-value pairs.
Author API can include label bundles (as well as relevant initialization attributes) for both Question Editor API and Questions API via the dependencies attribute.

Sample label bundles can be found here:

(Please note, these are demo label bundles which have been automatically translated)

 

// Example initialization object for Author API containing label bundles reference
// for Author API, Question Editor API and Questions API
var initOptions = {
    ...
    "config": {
        ...
        label_bundle: {
            "hours": "ساعات",
            "minutes": "الدقائق",
            "saveButton": "حفظ",
            ...
        },
        "dependencies": {
            "question_editor_api": {
                "init_options": {
                    label_bundle: {
                        "default.yesText": "نعم فعلا",
                        "default.noText": "لا",
                        ...
                    },
                }
            },
            "questions_api": {
                "init_options": {
                    labelBundle: {
                        "calculator": "آلة حاسبة",
                        "checkAnswer": "تحقق من الجواب",
                        "checkAnswers": "تحقق من الإجابات",
                        ...
                    },
                }
            }
        }
    }
};

var authorApp = LearnosityAuthor.init(initOptions);

Code example 2: Author API label bundle example

 

 

The following guide details how to change attributes when initializing Question Editor API - specifically for internationalization, labels and descriptions can be changed:

This customization is included for Question Editor API specifically via the dependencies attribute.

// Example initialization object for Author API containing placement reference
// for custom display of question types in Question Editor API
var initOptions = {
    ...
    "config": {
        ...
        "dependencies": {
            "question_editor_api": {
                "init_options": {
                    ...
                    "question_type_groups": {
                        {
                            // This is a replacement label for a MCQ question type group
                            "name": "متعدد الخيارات",
                            "reference": "mcq",
                            "template_references": [
                                [REFERENCES TO QUESTION TEMPLATES (BELOW)]
                            ]
                        },
                        ...
                    },
                    "question_types": {
                        "mcq": {
                            "defaults": {
                                // Here we can replace the placeholder stimulus
                                // as well as the placeholder option text for
                                // authoring a new MCQ question type
                                "stimulus": "<p>[هذا هو الجذع.]</p>",
                                "options": [
                                    {
                                        "label": "[الاختيار أ]",
                                        "value": "0"
                                    },
                                    {
                                        "label": "[الاختيار ب]",
                                        "value": "1"
                                    },
                                    {
                                        "label": "[الاختيار ب]",
                                        "value": "2"
                                    },
                                    {
                                        "label": "[الاختيار د]",
                                        "value": "3"
                                    }
                                ],
                                "type": "mcq"
                            }
                        },
                        ...
                    },
                    "question_type_templates": {
                        "mcq": [
                            {
                                // When defining an MCQ question type template
                                // (e.g. Standard, True/False, Choice Matrix)
                                // here is where we can replace the name of the template
                                // as well as the description text.
                                // The reference allows it to be assigned to a group
                                "description": "سؤال متعدد الخيارات القياسية.",
                                "name": "الاختيار من متعدد - قياسي",
                                "reference": "[REFERENCE ABLE TO BE ASSIGNED TO A GROUP (ABOVE)]"
                            },
                            ...
                        ],
                        ...
                    }
                }
            }
        }
    }
};

var authorApp = LearnosityAuthor.init(initOptions);

Code example 3: Question Editor API label bundle example

Next steps

For more information, see the article about Configuring Items API in RTL mode for assessments. 

Was this article helpful?

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