UPDATE: EVEN EASIER. DOWNLOAD THE ATTACHED ZIP FILE AND PASTE THE 4 FILES ENCLOSED WITHIN INTO THE "LIB" FOLDER (OVERWRITE OLD FILES) Hey all. I work for a college here in Qatar and wanted to share my experience of how to overcome the limitation of right to left (RTL) languages (specifically Arabic) and show you my workaround in the hopes that someone may benefit from it. Unfortunately it does require you to be a bit tech savvy and will not work if your audience is viewing your course directly through Rise 360. In our case, we are using Blackboard Learn and if you export the course before making it available to your audience then this "hack" might work for you. The idea is to fix the problem through code. We can't modify the code directly within rise so this has to be done in between the authoring and publishing phase when we export the course. If you export to LMS, you will most likely get a zip file. Extract the zip file so you can see its contents and modify a file called index.html open up notepad on windows or TextEdit on Mac > File > Open Navigate to the extracted course and go into these folders Your Course Name > scormcontent > index.html Once you open it with the text editor, you will see some scary code. Dont worry, you dont need to understand it, but you do need to observe a few elements. Right at the top of the file (2nd line i guess), you will see: <html lang="en" class=""> Replace this whole line with <html lang="ar" dir="ltr" class=""> Not so hard right? Now just below that line is a code that is <head>, just below it, paste the following: <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> You are doing well, now the last bit of code. Just below that, paste the following chunk of code. <script type = "text/javascript"> var arabicFix = function(){ $('p,h1,h2,h3,h4,h5,li,ol,ul,strong,a,span,.brand--ui,.lesson-header__top-wrap,.page-header-container,.overview-sidebar__title,.fr-view').attr('dir','rtl').attr('align','right'); $('blocks-tabs__container').children().attr('dir','rtl').attr('align','right'); $('.block-flashcards-slider__progress-text').attr('dir','ltr').attr('align','center'); } setInterval(arabicFix,500);</script> Save to overwrite the default index.html file. Test it out by launching index.html in your browser. To repack the file properly, navigate to the folder where "scormcontent" is, select all the files and zip them using your zip application (I use 7-Zip on windows and Archiver on Mac). Your course is now ready for Arabic including layout of bullets, accordions, tabs, carousels etc. Drop me a line if you need help, id be more than happy to walk you through any stage of the process. Have a lovely day!

We have confirmed that this works for Hebrew with "he," and for Arabic, of course. Thank you, Talal. We really couldn't be more grateful. One note: The bulleted list block (not the bullets in a text block) still had the bullets/numbers on the wrong side, but we just reformatted those.

Thank you Talal for the valuable information and practice! I have applied it to my lesson, and the result was not as expected. All texts, even those that were supposed to be middle aligned were aligned to the right. Do you we can fix this?

This is so helpful! Thank you. Do you know if we need to do this for every PAGE independently? From I see, this will work for each zipped course. Do you also know if there's limitations on the interactions that will be supported (e.g. card sorting etc.). It's really unfortunate Articulate doesn't better support Arabic. Thank you for your initiative.

Thanks Talal, very helpful. Do you know how to apply the fixes for a numbered list?

Forum Discussion

TalalParvaiz

Community Member

5 years ago

How to format your Rise 360 course for Arabic

UPDATE: EVEN EASIER. DOWNLOAD THE ATTACHED ZIP FILE AND PASTE THE 4 FILES ENCLOSED WITHIN INTO THE "LIB" FOLDER (OVERWRITE OLD FILES)

Hey all. I work for a college here in Qatar and wanted to share my experience of how to overcome the limitation of right to left (RTL) languages (specifically Arabic) and show you my workaround in the hopes that someone may benefit from it.

Unfortunately it does require you to be a bit tech savvy and will not work if your audience is viewing your course directly through Rise 360. In our case, we are using Blackboard Learn and if you export the course before making it available to your audience then this "hack" might work for you.

The idea is to fix the problem through code. We can't modify the code directly within rise so this has to be done in between the authoring and publishing phase when we export the course. If you export to LMS, you will most likely get a zip file.

Extract the zip file so you can see its contents and modify a file called index.html

open up notepad on windows or TextEdit on Mac > File > Open

Navigate to the extracted course and go into these folders

Your Course Name > scormcontent > index.html

Once you open it with the text editor, you will see some scary code. Dont worry, you dont need to understand it, but you do need to observe a few elements.

Right at the top of the file (2nd line i guess), you will see:

<html lang="en" class="">

Replace this whole line with

<html lang="ar" dir="ltr" class="">

Not so hard right?

Now just below that line is a code that is <head>, just below it, paste the following:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>

You are doing well, now the last bit of code. Just below that, paste the following chunk of code.

<script type = "text/javascript">
 
 var arabicFix = function(){
 $('p,h1,h2,h3,h4,h5,li,ol,ul,strong,a,span,.brand--ui,.lesson-header__top-wrap,.page-header-container,.overview-sidebar__title,.fr-view').attr('dir','rtl').attr('align','right');
 $('blocks-tabs__container').children().attr('dir','rtl').attr('align','right');
 $('.block-flashcards-slider__progress-text').attr('dir','ltr').attr('align','center');
 }
 
 setInterval(arabicFix,500);
</script>

Save to overwrite the default index.html file. Test it out by launching index.html in your browser.

To repack the file properly, navigate to the folder where "scormcontent" is, select all the files and zip them using your zip application (I use 7-Zip on windows and Archiver on Mac).

Your course is now ready for Arabic including layout of bullets, accordions, tabs, carousels etc. Drop me a line if you need help, id be more than happy to walk you through any stage of the process.

Have a lovely day!

Rise_-_Arabic_Fix_Content.zip1.8 MB

rise 360

eLearningRev495

Community Member

5 months ago

I want to thank Talala for this great thread! I am sure quite a lot of people found this helpful while they were working on Arabic and Hebrew courses.

When I applied this code, I had an issue with flip cards, where the instructional text "X of Y" was written in the format "X Y of".

To fix that, I altered the code in the last step of this tutorial, like this:

 var arabicFix = function(){
 $('p,h1,h2,h3,h4,h5,li,ol,ul,strong,a,span,.brand--ui,.lesson-header__top-wrap,.page-header-container,.overview-sidebar__title,.fr-view').attr('dir','rtl').attr('align','right');
 $('blocks-tabs__container').children().attr('dir','rtl').attr('align','right');
 $('.block-flashcards-slider__progress-text').attr('dir','rtl').attr('align','center');
 $('.bubble__controls').attr('dir','ltr').attr('align','center');
 }
 
 setInterval(arabicFix,500);

I just added this line:

$('.block-flashcards-slider__progress-text').attr('dir','rtl').attr('align','center');

Hope we will keep this thread alive while we wait for the official support for RTL languages. 😀

Best,
Nikola ĆLV

MohammedSinan
Community Member
12 months ago
Thank you Talal for the valuable information and practice!

I have applied it to my lesson, and the result was not as expected. All texts, even those that were supposed to be middle aligned were aligned to the right. Do you we can fix this?
GracieLi-e2bd69
Community Member
2 years ago
@shayne Hall,

I found a solution to the issue for Docebo LMS. You will need to use 7 zip and right click Open Archive, then find the ScormContent folder, then find the Index file, hen right click Edit, then copy and paste the code, then save back.

This is crucial! Please do not extract, but right click Open archive. Please see my attachment.
MartinTuttle-a7
Community Member
3 years ago
Hi,

I am so grateful for Talal for providing these files and explanation. This is by far the best solution I have found for RTL Rise modules. The only issue I am having is that my brand colors are being converted to white, so the hyperlinks, buttons, and bullets look like they are not appearing. Does anyone know how I can fix that?

Thanks!
JenniferKnott-4
Community Member
3 years ago
Hello, and thank you for this solution for Rise courses. After applying the steps exactly, I am not seeing the numbered and bulleted list blocks responding to the right-to-left formatting. Is there a solution for this?
JenniferKnott-4
Community Member
3 years ago
Hello, recommend instead of "right after <head>" that we add the script references "right before </head>" That way the resize hack and other default script references can load first. Will that work?
ragadevi-6c64e7
Community Member
3 years ago
Hi,

I've started working on Arabic version of Rise 360 and its sad to see that Rise 360 doesn't support RTL. I'm facing issues in quiz development where the radio button should be in the right. Unfortunately, this feature is not there.

Can anyone help me in this scenario?
JasminaTisovic-
Community Member
3 years ago
Thanks for sharing this solution, This is very helpful! I already implemented in one of the courses in Arabic. I uploaded it on our LMS and it works well. However, scrolling is not working in the mobile version. Any idea how to solve it?
ShayneHall1
Community Member
3 years ago
Has anyone managed to get this working in Docebo LMS?

When I try the above steps, it works ok HTML, but when trying to upload the re-zipped scorm file I get the attached error message.
- AmandaRosche611
  Community Member
  3 years ago
  Hi Shayne-
  
  Any luck with Docebo? I am just starting this process of translating to Arabic and looking for all potential pitfalls and solutions.
  - ShayneHall1
    Community Member
    3 years ago
    Sorry Amanda, no joy yet, still waiting for further advice
AbdullahHamm625
Community Member
3 years ago
Salam Talal,

I have been trying to follow your steps, but in Blackboard LMS I seem to be getting loading/content issue. Can you please help?