JoomlaLMS integration

Integrate a Maze with JoomlaLMS

Level of expertise: Easy

Purpose

In this article you'll learn how to quickly and easily integrate Mazetec with JoomlaLMS courses. The integration is simple and straightforward. Let's get started.

Overview

Add a snip it of code to better integrate Mazetec Mazes as a link in your JoomlaLMS training course to open as a SqueezeBox. We've added Javascript for a smoother experience with JoomlaLMS. Here, we also provide PHP code to prevent the learner from skipping the Maze until the user reaches the finish node in the maze.

User flow from the learner's perspective
  1. Learner starts the course in JoomlaLMS and once they hit the Mazetec link, the lightbox will open with the Maze.
  2. The learner is prevented from skipping the web object (if you add the PHP code).
  3. When the learner finishes the Maze, the SqueezeBox or lightbox automatically closes and the learner is moved forward to the next lesson in the course.

Integration Steps


Disable the "Restart" button on the Finish node before publishing the link. hide the restart button

Open the Maze you want to integrate and Click Publish.

Tag the link. We recommend adding "Integration", "JoomlaLMS", "Course name", as tags so you can identify it later and filter the analytics.

copy-new-link.jpg

Be sure to Copy the text below and Paste it at the end of your Maze link for the best experience.

&removemargin=true&removeheader=true
https://app.mazetec.org/player?uuid=a23a75c3-f083-4272-8644-1acf9128be12&removemargin=true&removeheader=true

Add a SqueezeBox link in your JoomlaLMS course



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

        // Event trigger fired when the user reaches the finish node in the LMS
        if (e.data.et === "finish") {
            // Closes the JoomlaLMS "SqueezeBox" aka Lightbox
            window.parent.jlmsSqueezeBox.close();
            window.parent.ajax_action('next_lpathstep');
        }
        console.log(e, "Event from Mazetec");
      });
</script>


That's it! The integration is complete.






Advanced: Prevent the Skip and Pass learner's name and email data into Mazetec

Trace each attempt back to the learner by directly passing data into Mazetec to capture the learner's name and email.

Name URL (GET) Variable Type Description
Name name Text (String), 80 Char Name of the learner saved with the learner's records in Mazetec analytics
Email email Email format. Validates "@" and "." This is the learner's email that is saved with the learner's record.


If you have integrated your Mazetec account with a Learning Repository Store (LRS), the learner's name and email will be captured in Mazetec analytics and be included in the learner's xAPI records that are passed to your LRS.




How is data passed into Mazetec using these variables?

Data is passed into Mazetec by setting the variables in the embed link.

  • When you publish your maze link require name and email.
  • Pass in the learner's name and email using GET variables in the link
  • The learner's name and email will auto-populate the modal.
Example link:
https://app.mazetec.org/player?uuid=a23a75c3-f083-4272-8644-1acf9128be12&removemargin=true&removeheader=true&name={{first_name}}%20{{last_name}}&email={{email}}
Base Maze URL Enable Responsiveness Minimize header Capture Learner Name Capture Learner Email
https://app.mazetec.org/player?uuid=e0e6242c-c6a3-46b5-9290-82c031d10a6f &removemargin=true &removeheader=true &name={{first_name}}%20{{last_name}} &email={{email}}

In PHP this might look like the following:

$name = JFactory::getUser()->name;
$email = JFactory::getUser()->email;

href="'.$link_href."&name=".$name."&email=".$email.'"






How does the javascript integration work?

The goal is to prevent the learners from skipping the Maze (web object) until the embedded Maze is completed.

Mazetec uses the JavaScript function PostMessage() to send data to the parent page (i.e. JoomlaLMS). This method ensures that browsers cannot block this communication and allows us to communicate back to the parent page when the user hits an exit node.

We also created custom variables so that the JS code updates the variable and execute certain actions based on their change in value.

However, to prevent the learner from skipping the activity, you must first hide the next button.

JoomlaLMS PHP Prevent the Learner from Skipping the Activity Code

Before making any of the following edits be sure you have backed up your files and be sure to make any of the following changes in a text environment.

We have a plugin coming soon, however, in the meantime we wanted to share

File: joomla_base/configuration.php

Add the following code to the end of the configuration code file

public $mazetec_api_url = '//app.mazetec.org';

File: joomla_base/components/com_joomlalms/joomla_lms.course_lpathstu.php

We are going to add the following code to case 3 in the above code file starting around line 2400. See the next code block for more instructions.

// Mazetec: edit start
        	$config = JFactory::getConfig();
					$config_mazetec_url = $config->get('mazetec_api_url');

					if(stristr($link_href, $config_mazetec_url) === true) {
						//Mazetec

            ///
						// Capture name and email
            ///
						$name = JFactory::getUser()->name;
						$email = JFactory::getUser()->email;

            ///
            // Set up the Mazetec link to capture the name and email
            ///
						$add_descr = '<center><a id="jlms_modal_link'.$link_data->id.'" class="jlms_modal" rel="{closable:false,handler:\'iframe\', size:{x:0}}" href="'.$link_href."&name=".$name."&email=".$email.'" title="'.str_replace('"','&quot;',$link_name).'">'.$link_name.'</a></center><br />';

					} 

// Mazetec: edit end

Here is what the code looks like when it is implemented.

Replace "case 3:" to "break;" which starts on around Line: 2496 with the following code:

case 3:
			$query = "SELECT * FROM #__lms_links WHERE id = '".$elem->item_id."' AND course_id = '".$elem->course_id."'";// AND published = 1";
			$JLMS_DB->SetQuery( $query );
			$link_data = $JLMS_DB->LoadObject();
			if ( is_object( $link_data ) ) {
				$link_href = $link_data->link_href;
				$link_name = $link_data->link_name;
				//TODO: review
				/*
				$_JLMS_PLUGINS->loadBotGroup('content');
				$plugin_result_array = $_JLMS_PLUGINS->trigger('onContentProcess', array(&$link_href));
				$plugin_result_array = $_JLMS_PLUGINS->trigger('onContentProcess', array(&$link_name));
				*/
				if ($link_data->link_type == 2) {
					if ($link_data->params) {
						$params = new JLMSParameters($link_data->params);
					} else {
						$params = new JLMSParameters('display_width=720'."\n".'display_height=540');
					}
					$add_descr = '<iframe id="jlms_inline_link" name="jlms_inline_link" height="'.$params->get('display_height', 540).'px" width="100%" frameborder="0" scrolling="auto" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" src="'.$link_href.'">'._JLMS_IFRAMES_REQUIRES.'</iframe>';
				} elseif ($link_data->link_type == 3) {
					if ($link_data->params) {
						$tmp_params = new JLMSParameters($link_data->params);
					} else {
						$tmp_params = new JLMSParameters('display_width=0'."\n".'display_height=0');
					}
					$x_size = 0;
					$y_size = 0;
					if ( is_object($tmp_params) && method_exists($tmp_params, 'get') && $tmp_params->get('display_width') ) {
						$x_size = $tmp_params->get('display_width');
					}
					if ( is_object($tmp_params) && method_exists($tmp_params, 'get') && $tmp_params->get('display_height') ) {
						$y_size = $tmp_params->get('display_height');
					}

// Mazetec: edit start
        	$config = JFactory::getConfig();
					$config_mazetec_url = $config->get('mazetec_api_url');

					if(stristr($link_href, $config_mazetec_url) === true) {
						//Mazetec

						//Capture name and email
						$name = JFactory::getUser()->name;
						$email = JFactory::getUser()->email;
						$add_descr = '<center><a id="jlms_modal_link'.$link_data->id.'" class="jlms_modal" rel="{closable:false,handler:\'iframe\', size:{x:0}}" href="'.$link_href."&name=".$name."&email=".$email.'" title="'.str_replace('"','&quot;',$link_name).'">'.$link_name.'</a></center><br />';

					} else {
						$add_descr = '<center><a id="jlms_modal_link'.$link_data->id.'" class="jlms_modal" rel="{handler:\'iframe\', size:{x:'.$x_size.',y:'.$y_size.'}}" href="'.$link_href.'" title="'.str_replace('"','&quot;',$link_name).'">'.$link_name.'</a></center><br />';
					}
// Mazetec: edit end

					$step_script = JLMS_SqueezeBox_getDomreadyFire(false);
					$is_show_step_descr = false;
				} else {
					$add_descr = "<center><a target='_blank' href='".$link_href."' title='".$link_name."'>".$link_name."</a></center><br />";
				}
			}
		break;

Additional Details

Error handling

If the values that are passed are not a valid type or are of null value, the Name and Email modal popup will display so the user can manually enter in their information.

Last modified on May 10, 2021