Forum Discussion

TalalParvaiz's avatar
TalalParvaiz
Community Member
4 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!

  • Thanks to Talal and all the other heroes for these pieces of advice!

    I was able to solve the bullet point issue by changing the block to a simple text and then applying the bullet list. The font size needs to be enlarged.

    The issue that I can't solve is with the timeline, as all pictures are moved to the left despite the orientation selected in Rise.

    Can anyone help? Thank you!

  • Thank you, Talal and others for this useful chat!

    Patti, could you please share how you reformatted the bulleted or numbered list blocks? 

  • Thanks a lot for your information, but sadly I could use only the first part

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

    because the other extra information didn't allowed me to change the "side" of the list bulletpoints or list numbers (maybe because the last Articulate updates?)

    If you have another idea to be used, I would be very happy.

    Have a great day

  • TalalParvaiz's avatar
    TalalParvaiz
    Community Member

    Hey fellas, Im terribly sorry for not replying earlier. Its been a busy year and havent checked the forums since this post. I am glad that this worked for some of you and if anyone still needs help figuring this out, feel free to contact me directly. Have an awesome 2022!

  • KarynBailey's avatar
    KarynBailey
    Community Member

    Does anyone have the steps when publishing to WEB instead of LMS? The zip file for publishing to Web does not have the same content as when publishing to LMS.

    • hazelB's avatar
      hazelB
      Staff

      Hi Karyn! You can find the steps on how to publish to web here. The file output when publishing to web isn't the same as publishing to LMS  - each of them has a different purpose. Would you be able to provide more information on what you are trying to accomplish?

  • When i tried to do this on xAPI and Scorm 1.2 my index.html file was blank when i opened it in text edit and if i just pasted it into the blank text edit and saved when i opened the html file to check all that came up was the code.

    • JenniferKnott-4's avatar
      JenniferKnott-4
      Community Member

      It has to be between the <head>  [goes here]  </head> tags. The screen shot looks like it's right after <html>

  • PattiCaswell's avatar
    PattiCaswell
    Community Member

    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. 

    • MohammedSinan's avatar
      MohammedSinan
      Community Member

      I had the same issue, can you please support me with this? 

  • PattiCaswell's avatar
    PattiCaswell
    Community Member

    Hi! Talal! How would we need to modify this fix for Hebrew? I assume we change "ar" to "he," bur are there other edits?

    Also, you are a TRUE E-learning HERO!!!! Thank you. 

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

  • 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.