zolihonig/chalkable_api_files

A look at an example HTML/CSS/Javascript interaction with the Chalkable platform

Chalkable Example Application Interaction

These files show an example of an html/css/javascript interaction between the Chalkable API and a web app. The chlk-post-message-api.js file is a necessary component for your web app to interact with Chalkable

Your app should include a link to our hosted version of this file (as it is subject to updates):

<script type="text/javascript" src="http://chalkable.com/Scripts/api/chlk-post-message-api.js"></script>

Feel free to check it out here to see exactly what we're doing behind the scenes.

Your JavaScript code should register a callback that will be called when the teacher clicks ATTACH. This will let Chalkable know which function of yours to call when the teacher clicks ATTACH.

This is handled by the showPlus method

function saveAndClose(){
        //Saving, finalizing and anything else your app might need to do before closing.
        //return true if your app is ready for the iframe to be closed and the app to be attached.
    return true;
}
CHLK_MESSENGER.addYourself(saveAndClose);

When the teacher has prepared your app for being attached your code should call the showplus function. showplus tells Chalkable to make the ATTACH button active.

Note: Your app should

return false

if the teacher, for example, deletes a required field after showplus is called and the ATTACH button is active.

CHLK_MESSENGER.showPlus();

After the teacher clicks ATTACH, Chalkable calls the callback you registered and your app has the ability to, for example, finish saving before your app returns true or false.

Return true

: if your app is ready for the iframe to be closed and the app to be attached.

Return false

: if your app is NOT ready for the iframe to be closed and the app to be attached.

The other interaction occurs with our URL Modes. They are appended to the url of your app as the user interacts with it in Chalkable.

• view: example -

  http://www.EdTechApp.com/mode=view

• edit example -

  http://www.EdTechApp.com/mode=edit

• myView example -

  http://www.EdTechApp.com/mode=myview

• gradingView example -

  http://www.EdTechApp.com/mode=gradingview

For advanced integration, you must prepare your app to handle this interaction. There are simple Javascript methods you can add to take care of this (check out the files)