The Take Learning Path interface may contain different elements depending on your client platform setup. In this section, we describe the standard interface layout as implemented in our learner area. To construct the interface, we use the following query:
query learningPathTakeInterface {
 getLearningPathContentData(edgeRid: 481, lpAttemptContextId: 2396) {
    title
    cta {
      title
      actionId
      arguments {
        key
        value
      }
      metadata {
        key
        value
      }
    }
    embeddedUrl
  }
  getLearningPath(lpId: 40) {
    modulesNumber
    cta {
      title
      actionId
      arguments {
        key
        value
      }
      metadata {
        key
        value
      }
    }
    navigation(navigationType: STEP_NAVIGATION, currentStepEdgeRid: 481) {
      edgeId
      edgeRid
      title
      navigationPath
      locked
      attempt {
        metrics {
          status
        }
      }
      learningContentType
      learningContentStepsNumber
      contentType
      learningContentTypeName
      sequence
      cta {
        title
        actionId
        arguments {
          key
          value
        }
        metadata {
          key
          value
        }
      }
    }
    training {
      title
      attempt {
        metrics {
          progress
        }
      }
    }
  }
}
Using the data returned from the API, you can build the interface to match what is shown in our learner area: Image 20250508 102532 Pn As shown in the screenshot above, the interface is divided into three main sections:
  • Navigation
  • Training title, description and attempt progress
  • Embedded activity iframe
The first two sections are built using data from the getLearningPath query. The embedded activity iframe is constructed using data from the getLearningPathContentData query. Since the embedded activity iframe is the main element of the Take Learning Path interface, letโ€™s focus on it next.

๐Ÿ“Œ Display Embedded Activity

The getLearningPathContentData query provides the key data needed to render the embedded activity section of the Take Learning Path interface. It returns two primary elements:
  • CTA list โ€“ A list of available actions, such as SAVE_ANSWER or TAKE_EDGE, which primarily act as form controls and enable interaction with the Take Training interface.
  • embeddedUrl โ€“ The URL used to load the learning activity inside an iframe.
The embeddedUrl seen in the response is the main gateway to let the user perform an activity.
<iframe src="{{ getLearningPathContentData.embeddedUrl }}"></iframe>

๐Ÿ“ Submitting an Activity Answer

Submitting a training step involves the following sequence:
  • Rendering the activity iframe
  • Subscribing to the message event on the document
  • Submitting user answers via the saveAnswer mutation
Once the iframe is rendered, you must subscribe to the message event. When the user completes the activity inside the iframe, a message is sent to the parent window. The activity completion message contains a type, which can be one of the following:
  • activityAttemptResult
  • activityAttemptFeedback
The activityAttemptFeedback type is specific and only used in certain configurations for limited activities. For more details, see the Submitting an Activity Answer with Display results and feedback option enabled section. In most cases, you will receive the activityAttemptResult message type โ€” this will be the focus of the following example. Below is an example of how this process might look (the JavaScript code snippet is available below the video):
We strongly recommend delaying the execution of the saveAnswermutation until the complete result message is received from the iframe.
This means the Next (Save Answer) button should remain disabled until the completion message is received, ensuring that the userโ€™s activity is fully processed before submission.
Within the message received from the iframe, the following information is included:
  • answer โ€” the userโ€™s answer.
  • order โ€” internal metadata, specific to some activity types.
  • activityType โ€” the activity type.
The information received from the iframe must not be modified. It should be passed back unchanged within the answerData payload.
Once the completion message is received, you need to construct the answerData payload required for the saveAnswer mutation.
This payload is typically unified across all activity types and should include:
  • answer โ€” the answer value from the iframe message.
  • order โ€” the order value from the iframe message.
  • lpAttemptContextId โ€” the Learning Path Attempt Context ID (provided by the client routing system).
  • edgeRid โ€” the Edge Revision ID (provided by the client routing system).
  • attemptStatus โ€” usually it should be COMPLETED. Since the triggering of the save action occurs on the client side, this value should also be provided by the client.
  • activityType โ€” the activityType value from the iframe message.
Typically, the saveAnswer mutation should be triggered when the user clicks the Next button (associated with the SAVE_ANSWER CTA). Below is an example of the saveAnswer mutation:
mutation saveAnswer {
  saveAnswer(answerData: {
    answer: "{\"score\":\"100\",\"scaled_score\":\"1\",\"min_score\":\"0\",\"max_score\":\"100\",\"completion_status\":\"completed\",\"type\":\"scormAttemptResult\"}",
    order: NULL,
    lpAttemptContextId: 2396,
    edgeRid: 481,
    attemptStatus: COMPLETED,
    activityType: SCORM
  }) {
    errors
    response {
      cta {
        actionId
        arguments {
          key
          value
        }
        metadata {
          key
          value
        }
      }
    }
  }  
}
In the example above, the mutation response includes a TAKE_EDGE CTA, which indicates that the user should be redirected to the next activity.
If the current activity is the last one in the module, the system will return a VIEW_RESULTS CTA, indicating that the next step is the edge result screen (typically the module results page).If there is no next stepโ€”meaning the activity is the last within the Learning Pathโ€”the system will return a VIEW_LP CTA, indicating that the user should be redirected to the Learning Path homepage.

๐Ÿ“Š Submitting an Activity Answer with Display results and feedback option enabled

Some activities, such as TRUE/FALSE, MULTIPLE_CHOICE, and others, support displaying results and feedback immediately after the answer is saved.
To enable this functionality, the Display results and feedback setting for the activity must be enabled, as shown in the screenshot below:
Image 20250613 102718 Pn
The activityAttemptFeedback message type indicates that the Display results and feedback option is enabled for this activity. When this message type is received, the system should display the attempt results and feedback to the learner as part of the activity flow.
For these types of activities, the saveAnswer process works the same way as for other activities. The difference lies in the iframe message type โ€” which in this case will be activityAttemptFeedback โ€” and in the available CTAs returned by the API. See the saveAnswer mutation example below:
mutation saveAnswer {
    saveAnswer(answerData: {
        answer: "[\"0\"]",
        order: "[\"0\",\"1\",\"2\"]",
        lpAttemptContextId: 529,
        edgeRid: 884,
        attemptStatus: COMPLETED,
        activityType: MULTIPLE_CHOICE
    }) {
        errors
        response {
        cta {
            actionId
            arguments {
            key
            value
            }
            metadata {
            key
            value
            }
        }
        }
    }
}
As you can see in the Query result tab, you will receive the REVIEW_EDGE_EMBED CTA in the saveAnswer response. This means that you need to reload the iframe using the URL provided in the src key of the REVIEW_EDGE_EMBED CTA, in order to display the attempt results and feedback. The Next button should no longer trigger the saveAnswer mutation, as the answer has already been saved. Instead, it should be replaced with a simple link to the next step. The URL for the next step should be constructed using the data available from one of the CTAs in the saveAnswer response โ€” either VIEW_RESULTS or TAKE_EDGE, depending on the current activityโ€™s position within the module.