Initializing the API & Requesting Content

Overview

The Content API provides integration of CK-12 content for your web site.  You can consume our content in two ways:

Widget Mode

Using "widget mode," you can render a modal containing the requested content on your site.  The modal is rendered as an iframe containing an embedded URL. You can specify a DOM element as the parent for the modal, or use the APIs default placement.

JSON Mode

This mode provides a raw data in JSON format, which you can parse and render as needed.  You must provide a callback function to use this mode.

Requesting an API Key and Partner ID

To request an API key and partner ID, please email dev-partners@ck12.org

Initializing the API

Call ck12.content.modalities() with the api key and partner key to initialize the widget. Multiple widgets may then be called and placed separately on a single page. Alternatively, if you will only need one widget at a time, you can initialize the API at the same time you make your widget request, as demonstrated below.

 <script src="http://www.ck12.org/content_api/js/partner.js"></script>
<script>
   ck12.content.modalities({apiKey: 'YourAPIKey')};
</script>

Requesting Content

Example

Requests take the following form:

ck12.content.modalities({
    apiKey: 'YourAPIKey',
    conceptName: 'Photosynthesis'
});


Putting all of these pieces together, implementing this on your site might look something like this:

<script src="http://www.ck12.org/content_api/js/partner.js"></script>
        
<script>        
  function getContent(){
    ck12.content.modalities({
        apiKey:'YourAPIKey',
        conceptName: 'Photosynthesis'
    });
    }
<script>

<button onclick="javascript:getContent();">
Click here to launch a widget using the API.</button>

Try it!

Positioning the widget

By default, the widget will append to the body element in your page. If you want to place it at a certain location on the page, use the parent attribute to specify a parent element. Since the plugin is positioned fixed by default, you may need to change the positioning when inserting the widget into a parent.

You can use the zIndex attribute to specify the z-index of the widget when it is appearing above or below other elements on the page.

The coords object is used to position the widget within its container. By default it is positioned 20px from the top and 20px from the right in the body, while being a fixed position. 

Available Request Parameters

The parameters used in the example above are the only required parameters, however there are optional arguments as follows.

Parameter Description
apiKey The api key provided by CK-12
mode Specifies how content should be requested.  Possible values:

Specified

- Specifies the content to display using an EID from our website. An EID is a string identifying a given concept in the CK-12 content taxonomy. For example, this is the EID for Einstein's Concept of Gravity: SCI.PSC.216.7 Upon initializing, this content related to this EID will load into the widget. (Need guide on how this can be found)

content  Specifies which DOM element the API should use to request content when mode is set to auto. <body> is the default element.
conceptName  The concept name to retrieve
difficultyLevel  Specifies the difficulty level of the content to be retrieved. Possible values:
  • Basic (default)
  • AtGrade
  • Advanced
format  Specifies whether to retrieve a widget, or raw JSON payload.
callback  User-defined function for processing JSON payload.  A callback function is required if format is set to json.
maxModalities Specifies the maximum number of modalities to return for the requested concept. Default is 5.
id  User-defined ID for the requested widget.
class  Specifies a CSS class for the widget.
parent  Specifies the parent element for the widget.  This may be a CSS selector or DOM node. Default is  body
position  Specifies a CSS positioning attribute for the widget.  Default is fixed.
zIndex  Specifies a z-index for the widget.  Default is 999.
align  Specifies offset for the widget's x,y coordinates, relative to the parent element. Example - align: top, right;
Specifies offset for the widget's x coordinate, relative to the right or left of the parent element. 
Specifies offset for the widget's y coordinate, relative to the top or bottom of the parent element. 
Have more questions? Submit a request
Powered by Zendesk