Embedding the website in Canvas

[L1792]

Is there a way for us to use the website in Canvas (LMS)? This will make it easier for students to access your content!

[SethClydesdale]

Hello @L1792,

While I am unfamiliar with Canvas, it should be possible via HTML or internal settings. I did do a quick search on Google however, and found this guide. Perhaps it will work?

If not, another solution, if available, is to use the HTML <iframe> tag to embed an external website.

<iframe src="https://sethclydesdale.github.io/genki-study-resources/" style="height:300px; width:300px;" id="GSR"></iframe>

Dimensions of the frame can be managed inline with the style attribute or externally with CSS by using the identifier #GSR. Values, such as "300px", lack flexibility, so you can use percentile values instead, like "100%" to fill the entire page, if necessary.

If none of these solutions work, feel free to let me know and I'll see if I can figure something out.

Have a good day.

[L1792]

Hello @SethClydesdale

Thank you for your response. I was able to integrate it easily. Everything works. However, when I go to a specific lesson, it only keeps loading. Is there a way to fix this?

[SethClydesdale]

Hmm.. It sounds similar to an issue that can occur when third-party cookies are blocked. Just to confirm: Do any errors show in the developer tools console when this occurs?

For reference: DevTools can be accessed via F12, CTRL+SHIFT+I, or right click > inspect. Navigating to the console tab should list any errors that have occurred.

In the mean time, I'll also perform some tests on my end to see if I can replicate and in turn rectify the issue.

[L1792]

Hi,

Is this the issue?

<div id="exercise" class="content-block">
        <div id="quiz-result"></div>
        <div id="quiz-zone" class="clear"></div>
        <div id="quiz-timer" class="center"></div>
      </div>

[SethClydesdale]

Ah, no, that would be the framework for the exercises. It should be fine, however, the fact it's stuck loading would mean that it's a JavaScript related problem. The error in question would look something like this.

Regardless, after performing some tests, I believe the issue may be related to the blocking of third-party cookies. As such, I've pushed an update which should allow the website to run in limited mode when cookies are unavailable. When you get the chance, let me know if the issue is still persisting on your end.

[L1792]

It seems to be working fine now. Thank you so much for creating this website and for your dedication. This will prove useful for the students. I will make sure to credit you. Have a great day!

[SethClydesdale]

That's great, you're welcome!

Since the issue is the blocking of third-party cookies, the website will most likely run in limited mode via the embedded frame. Limited mode will have the following restrictions:

• Settings will not be remembered, such as furigana preference.
• Some features will be unavailable, such as dark mode.

Overall, it shouldn't be too impactful to your students studies, as the site functions normally otherwise.

Since it's most likely a browser related setting, limited mode can probably be disabled by allowing third-party cookies. It's actually quite similar to this issue which occurred on local file systems and provides some solutions for bypassing it. I didn't see it as ideal to ask everyone to do this however, which is why limited mode was added, so it'll still function regardless of browser settings.

Anyway, thank you for helping me get to the bottom of this issue. If you ever have anymore questions, feel free to contact me.

I hope you have a good day as well!