How to add a disclaimer text to the translation panel?

[JulianeRoeder]

Dear all,

I am looking for a way to add text to the "Translation" panel. My university requests a disclaimer about personal data sent to Google when using Google translate.

So far, I tried to use "translation: " in the initial comment to add some text, but this did not work - it just doesn't show:

`<!--

language: en

translation: any other language - Please note that by using Google Translate, the Google Terms of Service apply.

...

-->`

The requested disclaimer is rather long, and it is supposed to contain a link to the Google Privacy Policy, so plain text would not be sufficient. It has to be visible each time when you access the language options. Just showing it once in the beginning of the course is not enough.

We already published the course on GitHub, but I would like to import a SCORM version to my university's LMS. However, this will only be accepted if I add this disclaimer.

I would be very grateful for any suggestions. I did not find any solutions in the LiaScript documentation, in the issues or in the discussions.

[andre-dietrich]

There are two mechanisms. When using translation you can link to already existing and translated courses:

<!--
translation: Deutsch  translations/German.md
translation: Français translations/French.md
-->

another option is to turn of the translation option via, as mentioned here:

<!--
translateWithGoogle: false
-->

If you are still interested, in adding a disclaimer, this requires a little hacky solution?

[andre-dietrich]

But maybe, we can also add a general one for all?

[JulianeRoeder]

Thank you for your swift reply, and for the options!

I would prefer to keep Google Translate as an option for translations, because this will help make our course more accessible. The course is about 80 pages of text, and we do not have the expertise to offer manually checked translations other than a German translation. There may be mistranslations of some technical terms, but the automatic translation is still a great feature to help learners.

So, may I ask about the hacky solution...?

[andre-dietrich]

Okay, I found two possible solutions that you might consider, the simple one uses the JavaScript confirm function, you can try this out here

<!--
@onload

setTimeout(function() {
  const checkbox = document.getElementById("lia-checkbox-google_translate")

  checkbox.addEventListener("click", function(event) {
    event.preventDefault();

    // Show your custom confirmation dialog
    const userConfirmed = confirm(
      "Here is the disclaimer text. Click OK to accept, or Cancel to abort."
    );

    if (!userConfirmed) {
      event.stopImmediatePropagation();
    }
  }, true);

}, 2000)

@end
-->

# Course Main Title

In this case the checkbox is overlayed with a new onclick function that blocks all other clicks until the user confirms by clicking on ok.

[andre-dietrich]

The second solution uses sweetAlert2 https://sweetalert2.github.io/ ... you can try this example here

<!--

script: https://cdn.jsdelivr.net/npm/sweetalert2@11

@onload

setTimeout(function() {
  const checkbox = document.getElementById("lia-checkbox-google_translate");
  let bypassConfirmation = false;

  checkbox.addEventListener("click", async function(event) {
    // If the event is a re-dispatched one after confirmation,
    // simply allow it to run normally.
    if (bypassConfirmation) {
      console.log("allow translation")
      return;
    }
  
    // Stop propagation immediately to prevent other handlers from firing.
    event.preventDefault();
    event.stopImmediatePropagation();

    // Await the confirmation dialog (asynchronously)
    const result = await Swal.fire({
      title: 'Are you sure?',
      html: 'This is a custom SweetAlert2 dialog with <strong>HTML</strong> content.',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel'
    });

    if (result.isConfirmed) {
      // User confirmed: set the bypass flag and re-dispatch the click event.
      bypassConfirmation = true;
      checkbox.click();
    }
  }, true);

}, 2000)

@end
-->

# Course Main Title

This does actually the same as before, but you have more control over the styling of the confirmation dialog, and you can add HTML and links to Google, etc.

[andre-dietrich]

The @online macro is a system macro, where you can add JavaScript code that is executed once after the course is loaded. This is a simple way of injecting code, that you want to use in your course, to initialize some JS.

[JulianeRoeder]

Thank you very much for these extremely helpful, tailored solutions!

I just suggested a version using your first solution and I hope this will be accepted :-)

Thank you again for your very quick and very helpful responses!

[andre-dietrich]

Gern geschehen ...

[andre-dietrich]

@JulianeRoeder I just wanted to ask if you are interested in linking your project at the

https://liascript.github.io/world-map/

[JulianeRoeder]

@andre-dietrich I will, thank you for this hint!