How to prevent students from skipping Thinkific multimedia lesson with an embedded Maze

Are students skipping multimedia lesson before completing your learning Maze?

How to:

Require completion / hide “Complete & continue” button until student passes their learning Maze.
Prevent your students from skipping the Thinkific multimedia lesson with an embedded Maze until they finish.

Requirements

Mazetec subscription plan on Mazetec. Plans start at $15/mo. Learn more
This feature is not available on the Mazetec free plan.
The Site Footer code is automatically added for new Thinkific users.

Troubleshooting Q: I have a free plan and Disabling/Enabling the "Complete and Continue" button isn't working. A: Upgrade your account to a paid plan to activate this feature.

Q: I upgraded my account to a paid plan and it still isn't working. What do I do? A: (1)Re-Publish your Maze link. (2) Paste the new link into your Thinkific Multimedia lesson.

Goal

Notice “Complete & continue” button is hidden:

Preview of an embedded learning Maze embedded in a multimedia lesson with “Complete & continue” button hidden from the student.

The “Complete & continue” button is visible when the student finishes the learning Maze:

Preview of an embedded learning Maze with “Complete & continue” button visible to the student.

Getting Started

The following steps walk through adding the code to your Thinkific site footer to hide “Complete & continue” button until student finishes their learning Maze.

Steps

Here's what it should look like.

2. Copy and Paste the following code into the text box and click "Save", then Preview your course.

<style>
  .maze__display--none {
    display: none !important;
  }
</style>
<script>
  /*************************************************************************
   *
   * MAZETEC CONFIDENTIAL
   * __________________
   *
   *  Copyright (c) 2021 MAZETEC LLC
   *  All Rights Reserved.
   *
   * NOTICE:  All information contained herein is, and remains
   * the property of MAZETEC LLC and its suppliers,
   * if any.  The intellectual and technical concepts contained
   * herein are proprietary to MAZETEC LLC
   * and its suppliers and may be covered by U.S. and Foreign Patents,
   * patents in process, and are protected by trade secret or copyright law.
   * Dissemination of this information or reproduction of this material
   * is strictly forbidden unless prior written permission is obtained
   * from MAZETEC LLC.
   *
   * This file is subject to additional terms and conditions defined
   * at mazetec.org.
   */
  $(function () {
    if (typeof CoursePlayerV2 !== "undefined") {
      // Global context variable used to track the global state between lessons
      const incompleteBtnSelector =
        "main#main-content footer#course-player-footer .btn--incomplete > button";
      const completeAndContinueBtnSelector =
        "main#main-content footer#course-player-footer > button";

      let __context = {};
      const isMazeLesson = (lesson) => {
        return (
          lesson.contentable_type &&
          lesson.contentable_type.toLowerCase() === "iframe" &&
          lesson.source_url &&
          lesson.source_url.toLowerCase().match(/mazetec\.[\w]+\/player/) !=
            null
        );
      };

      const isAlreadyComplete = () => {
        return document.querySelector(incompleteBtnSelector) != null;
      };

      const createContext = (lesson) => {
        return {
          isMazeLesson: isMazeLesson(lesson),
          isAlreadyComplete: isAlreadyComplete(),
          isContinueButtonDisabled: false,
        };
      };

      const disableCompleteAndContinueBtn = (ctx) => {
        const btn = document.querySelector(completeAndContinueBtnSelector);
        if (btn == null) {
          return;
        }

        btn.classList.add("maze__display--none");
        ctx.isContinueButtonDisabled = true;
      };

      const resetCompleteAndContinueBtn = (ctx) => {
        const btn = document.querySelector(completeAndContinueBtnSelector);
        if (btn == null) {
          return;
        }

        btn.classList.remove("maze__display--none");
        ctx.isContinueButtonDisabled = false;
      };

      const initSetup = (data) => {
        __context = createContext(data.lesson);
        // if it is maze lesson and it is not already complete then disable button
        if (
          __context.isMazeLesson === true &&
          __context.isAlreadyComplete !== true
        ) {
          disableCompleteAndContinueBtn(__context);
        }

        console.log(__context, "Context");
      };

      // Register mazetec iframe messages listener
      window.addEventListener("message", (e) => {
        if (!e.origin.includes("mazetec")) {
          return;
        }

        if (e.data.et === "finish") {
          console.log(e, "-----FINISH-----");
          resetCompleteAndContinueBtn(__context);
        }

        console.log(e, "Event from mazetec");
      });

      // Register lister to trigger event when user enter in the new lesson
      CoursePlayerV2.on("hooks:contentDidChange", function (data) {
        console.log(data, "on-content-did-change");
        initSetup(data);
      });

      CoursePlayerV2.on("hooks:contentWillChange", function (data) {
        // Cleanup
        console.log(data, "on-content-will-change");
      });

      CoursePlayerV2.on("hooks:contentWasCompleted", function (data) {
        // unregister the maze message listener
        console.log(data, "on-content-was-completed");
        if (__context.isContinueButtonDisabled) {
          // Reset, enable the complete and continue button
          resetCompleteAndContinueBtn(__context);
        }
      });

      CoursePlayerV2.on("hooks:contentWasMarkedIncomplete", function (data) {
        // Cleanup
        console.log(data, "on-content-was-marked-incomplete");
        initSetup(data);
        disableCompleteAndContinueBtn(__context)
      });
    }
  });
</script>

That's it. You're done.

Next, learn how to capture student info in Mazetec

Last modified on April 02, 2025