Activate The ‘Mark Complete’ Process Using Content Launched In A New Browser Tab

The eLearning Magic Toolkit provides an additional feature which course developers can use to trigger the Mark Complete process on either a LearnDash lesson or topic page using eLearning content launched in a new browser tab.

This new ability is being classed as a ‘development feature’ of our plugin as it does require some configuration work to be performed on both the LearnDash lesson/topic page from which the eLearning content is being launched, as well as in Storyline/Captivate itself where a new JavaScript command is required to activate.

This feature is completely optional and will not impact on your ability to utilise any of the other methods available to activate the Mark Complete process in LearnDash using this plugin.

Step 1 – Choosing a Lesson or Topic page where you wish to hide the ‘Mark Complete’ Button

Using this feature requires the use of the standard metabox in your Edit Page area for lessons or topics. Simply use the checkbox in order to choose this page as a Lesson where you wish for the Mark Complete button to be hidden from the learner.

Step 2 – Create a button on the page to launch the eLearning content in a new tab

In order to have your eLearning content be launched in a new browser tab, you must create either a button or hyperlinked image/text on page which will open the activity (e.g. with an anchor tag target of “_blank”)

When you have created your button and have linked this to the launch HTML file of your activity (in Step 3), you then need to apply the following ID name to the button (which is case sensitive): launchActivity

If you are working with the standard Gutenberg block editor in WordPress then you might need to edit your button block as HTML in order to add the ID value to the div tag like so:

If your site theme uses a visual composer toolkit for designing page content, such as WP Bakery or Elementor, then these tools provide the ability to include element IDs very easily during the creation process. Just look out for the correct box as illustrated above, and enter launchActivity as the ID name:

Step 3 – Creating your Articulate Storyline content with the NEW Mark Complete trigger

In order to have your eLearning content mark either the lesson or topic as complete on the originating page, you must assign the following JavaScript trigger to whatever action needs to take place (ie. when timeline finishes on the last slide / when the learner presses a button).

The JavaScript that you must use is: localStorage.setItem(“completeElearn”, “yes”)

Typically, because the content has been launched in a new browser tab, you would also apply an Exit Course trigger (in Storyline) to the same interaction that triggers the JavaScript code. This will then automatically return the user to the original browser tab in order to continue their learning journey in LearnDash.

Make sure that the Exit Course trigger happens after the Execute JavaScript command in your trigger stack:

Step 4 – Upload your course content to your web server and link to your button / anchor text

The final step in this process is to publish your content from Storyline/Captivate and upload to your web server (e.g. in a dedicated ‘elearning’ folder contained in your site’s wp-upload directory.

Once the content is in place, you will then be able to link the button or anchor text/image that you created in Step 2 to the main launch HTML file of your eLearning activity (i.e. the story.html file for an activity produced in Articulate Storyline).

If you need further information on best practice for embedding Storyline content onto a web page, use this Articulate Storyline help guide.

Read the rest of our Knowledge Base pages to make the most of the eLearning Magic Toolkit.