How to Share Lessons To MOTAR

Lessons From Inside An App Can Be Shared Using Lesson Templates To MOTAR Hub

"Share To MOTAR"

About Lesson Templates

A MOTAR Lesson Template is a shareable object in the MOTAR Hub. Course creators using the Training dashboard can pull Lesson Templates into their courses to simplify course creation using prebuilt resources.

Lesson Templates are designed to work with 3rd party apps. A Lesson Template contains a predefined name and description, along with a link to an app on the MOTAR platform as well as any additional metadata that needs to be included when MOTAR launches the app. For example, if you need to deep-link to a certain lesson inside your application with a specific ID, you can include it in your template.

Adding a Template via Form

MOTAR Studio exposes an API for adding Lesson Templates to MOTAR that you can integrate directly with your authoring tools. The simplest method is via an HTML form that launches a popup window. Below is a code snippet that you can adapt as necessary. When the user clicks "Share to MOTAR", a popup window will be created that guides the user through the process of sharing their Lesson Template in MOTAR.

<form id="lessonTemplateForm" action="https://studio.motar.io/dxp/dxp-api/listing/lesson-template" _target="blank" method="post">

    <div class="form-group">
      <label for="name">Lesson Name</label>
      <input type="text" class="form-control" id="name" name="name" value="Test Lesson">
    </div>

    <div class="form-group">
      <label for="id">Launch Parameters</label>
      <input type="text" class="form-control" id="id" name="launchParameters" value="mxnlessonid=1345,mode=motar-training">
    </div>

    <div class="form-group">
      <label for="version">Lesson Version</label>
      <input type="text" class="form-control" id="version" name="version" value="1.0">
    </div>

    <div class="form-group">
      <label for="image">Lesson Image URL</label>
      <input type="text" class="form-control" id="image" name="imageUrl" value="https://static.tvtropes.org/pmwiki/pub/images/4a72e1aa9d653e88e65e7592e4230428.png">
    </div>

    <div class="form-group">
      <label for="client-id">Launching App's Client ID</label>
      <input type="text" class="form-control" id="client-id" name="clientId" value="iok-cid-7ba3b4af366bc28a21e04385fb7921eb419284aafc82fdb6">
    </div>

    <div class="form-group">
      <label for="description">Lesson Description</label>
      <textarea class="form-control" id="description" name="description">Just a test lesson experience, no need to worry.</textarea>
    </div>

    <input type="hidden" value="true" name="popup">

    <button type="submit" class="btn btn-primary">Share to MOTAR</button>
  </form>
  <script type="text/javascript">
    var f = document.getElementById('lessonTemplateForm');
    f.onsubmit = function() {
      window.open(
        'about:blank',
        'MOTAR Permissions Wizard',
        'scrollbars=no,status=no,location=no,toolbar=no,menubar=no,width=900,height=900,left=30,top=30'
      );
      this.target = 'MOTAR Permissions Wizard';
    }
  </script>

Authentication is not required for this API. When the user launches the content sharing popup they will be asked for their login credentials if they are not already logged in to MOTAR Studio.

If you're using an Authoring Tool to create lessons, be sure to use launching app's client ID when publishing lessons, not your Authoring Tool's client ID.

For more information on specific parameters, see the API Definition for this request.

Adding the Share to MOTAR Button

Learn how to properly implement the Share to MOTAR button while maintaining brand integrity.

Button Design Guidelines The Share to MOTAR button will share a lesson to the MOTAR platform. Using the branded versions of this button will create instant brand recognition for users of MOTAR. Download Files:

179KB

SHARETO_MOTAR_png.zip

archive

Recommended Usage

The “Share to MOTAR” verbiage and MOTAR M uniquely identifies the MOTAR platform amongst other providers you may support. Below are some best practices for incorporating the share to button onto your screen.

Color

Always consider the background color against the color of the actual button. Choose the button color that that stands out the most compared to your background color.

Clear Space and Padding

Always maintain the minimum amount of clear space around the button if needed. You can scale the button as needed for different devices and screen sizes, but you must preserve the aspect ratio.