Fullscreen Distraction-Free Learning

TLDR;

The whole code is available in a gist here: https://gist.github.com/actual-saurabh/a59beef775b61c33629aa0824061de9c

Requirements

Basic CSS and JS (jQuery) skills are needed to customise this recipe for some themes. Some basic understanding of WordPress APIs may be needed for additional customisation.

This has been tested successfully with many standard themes and should work well, as it is, for such themes.

The code here would work even if there’s no LifterLMS on your site, without any problems, to create a distraction free reading mode.

A note on Fullscreen API

Browsers don’t allow fullscreen without a user interaction. So, the fullscreen mode cannot persist between lessons. This means that a student would have to click a button on every screen to go into fullscreen mode. There is no way around it. See: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

Goal

  • Add a fullscreen button to content.
  • Clicking this button should make the content fullscreen.
  • All headers, footers and sidebars would be hidden.
  • If a course syllabus is present on the page, add a slidein/ slideout syllabus.

Here’s a preview of what to expect from this recipe

LifterLMS Focus Mode Preview