{{warning}}

Launching the Catalog (Question Information) View

In addition to the question, an item's full content package will include the item profile (the metadata associated with the item) and supporting materials that have been authored (e.g., a rubric). It is possible to load this content package in its entirety.

  1. Choose the options to pass to the player on launch (itemId is required at a minimum)
  2. Choose the content to be available when viewed (question, profile, and supportingMaterial). If left unspecified, all tabs will be shown.
  3. Create a player access token to grant access to the catalog on a browser.
  4. Load the catalog view javascript in the page, passing the player access token and API client id
  5. Launch the catalog view; in the user interface it is titled the Question Information.

Example

After an player access token is created, load the catalog view into a page with this url and these parameters:

http://platform.corespring.org/v2/player/catalog.js

Parameter Description
playerToken The player access token created for player access settings
apiClient The API client id. The system will use this to locate your client secret to decrypt the token
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://platform.corespring.org/v2/player/catalog.js?playerToken=[playerToken]&apiClient=[apiClient]"></script>
  <script type="text/javascript">

    var corespringCatalogOptions = {
      tabs: {
        question: true,
        profile: true,
        supportingMaterial: true
      },
      itemId: "5502e6a1d4c6917b3ba61055",
    };

    $(document).ready(function() {
      console.log("document.ready: launching catalog " + corespringCatalogOptions);
      window.corespringCatalog = new org.corespring.players.ItemCatalog(
        '.catalog-holder',
        corespringCatalogOptions,
        function onCatalogError(error) {
          console.error("error creating catalog " + error);
        });
      console.log("created corespringCatalog:", corespringCatalog);
    });

  </script>
</head>
<body>
  <div class="catalog-holder"></div>
</body>
</html>