Forum Discussion

NadineBergmann-'s avatar
NadineBergmann-
Community Member
9 months ago

Change HTML source language in Rise course

Dear community,  We developed an e-learning in Dutch using Articulate Rise and have gotten it tested on accessibility. One of the comments on the course was that in the HTML of the course the source...
accessibility
e-learning development
rise 360
peterkeijsers's avatar
peterkeijsers
Community Member
7 days ago

MarcinZarod​ We have the same issue. I've inspected the exported SCORM code from Rise and found the issue and I have a small script that can be added to the SCORM to override the Langue data property that is causing the <html> "lang" property from being set to "en".

  1. Decompress the exported SCORM zip.
  2. Open the file: scormcontent/index.html (SCORM 1.2 example)
  3. Change the <html lang=""> value to the right language code so when loading the html document the correct language is recognized by screenreader software for example upon loading the html document.
  4. The javascript method called "__fetchCourse" is responsible for loading all the course data. This course data is base64 encoded in the exported SCORM scormcontent/index.html. So one option is to decode this base64 encoded json object and adjust the property values for  "labelSet.iso639Code", "course.locale" and "course.defaultLocaleId".
  5. Another option (the one we use) is to add a script to the scormcontent/index.html that overrides this  iso639Code data property with the appropriate language value. To do this you need to add this script right before the closing <head> tag in the scormcontent/index.html file. 
  6. Set the javascript const named "preferredLanguage" to a value you need. In our case: "nl-NL".
  7. This script will execute after the course data is loaded and replaces the language Rise forced. Then the regular javacript will pick this new value and updates the <html lang=""> property on the index.html document with the new correct language value.

    <script>
        (function () {
            try {
                const preferredLanguage = "nl-NL";

                // Ensure the HTML lang is correct as early as possible
                if (document && document.documentElement) {
                    document.documentElement.lang = preferredLanguage;
                }

                // Monkey-patch __fetchCourse so Rise receives nl-NL
                var origFetch = window.__fetchCourse;
                if (typeof origFetch === 'function') {
                    window.__fetchCourse = async function () {
                        var data = await origFetch();
                        try {
                            if (data) {
                                if (data.labelSet && typeof data.labelSet === 'object') {
                                    data.labelSet.iso639Code = preferredLanguage;
                                }
                                if (data.course && typeof data.course === 'object') {
                                    data.course.locale = preferredLanguage;
                                    if (data.course.defaultLocaleId == null || data.course.defaultLocaleId === 'en') {
                                        data.course.defaultLocaleId = preferredLanguage;
                                    }
                                }
                            }
                        } catch (e) {
                            // ignore
                        }
                        return data;
                    }
                }
            } catch (e) {
                // ignore
            }
        })();
    </script>