Skip to main content
All CollectionsContent WritingHow to Build Complex Step Types
Creating LinkListener Steps & Code!
Creating LinkListener Steps & Code!

What you need to do to create a successful LinkListener step

Alex Lemaire avatar
Written by Alex Lemaire
Updated over 3 years ago

Where the other LemonadeLXP Steps don't require developers - this one needs hands-on developer time. 

If you're a seasoned developer, you might just want to skip to the file download at the end of the article - its contents are very self-explanatory.

Leveraging 'unknown' external content is LinkListener's purpose, and it is incredibly flexible because of a loose 'data' contract.

Here's how you might use it:

  • you want to create a step that requires salespeople to create a deal in your web-based CRM, or

  • you've got a pre-built simulator that emulates sending money with an app. You want to build a step that asks learners to use this simulator.

Here's an example LinkListener step that we had built for a client - pretty cool right!
​http://demobox.launchfire.com/demo5_lf_phone_deposit/index.html

You can access it directly, and it'll work - but the magic lies in the events that it silently communicates in the background. When LemonadeLXP is connected, it does much more!

Let's build one together. To keep it simple, we're going to make a simple quiz: a single page with two questions, each with two answers.  
​

Step 1 - Business as Usual

Create some HTML with all the essential parts; here's my quick 5-minute sketch!
​
Sample Codepen, markup only:
​https://codepen.io/Saeven/pen/bGGqOoZ
​

Step 2 - Load the LemonadeLXP Link Listener into your Code

The link listener file will exist right within your installation, at:
​https://yourlemonadelxpurl.com/assets/lemonadelink.js

Link it in your code as a <script> include.
​

Step 3 - Implement Data Events

Data events are the 'payloads' that LemonadeLXP expects. At present there are three:

  • start, fired when your external code is loaded (automatic, by having included the lemonadelink.js file)

  • answer, which currently accepts a JSON structure that contains a single member, isCorrect {isCorrect: true}. The sum of answers, are what yield your grade.

  • stepComplete, which signals termination, and can optionally send a 'score' if you are crafting a game. {score: 10000}

Sample Codepen, with events:
​https://codepen.io/Saeven/pen/WNNpLWN
​

Step 4 - Load it Into LemonadeLXP

  1. Make sure your script is 'on the web' and ready to go.

  2. Create a new LinkListener step, go through the basic info, and head to the "Define Step Details" tab

  3. Load your script's URL into the URL box, and then click on "Check URL"

  4. If the check succeeds (you will see text appear, which reads "This URL has LInkListener included"), save the step.  

  5. Finished.

Here's what that final package code looks like!
​http://demobox.launchfire.com.s3.amazonaws.com/test/listenertest.html.zip


Here's a video of that exact code, in action!

Special Note - Grading

The grade calculation is very simple:
​round( correct answer signals / all answer signals * 100 )
​

Did this answer your question?