CodePlayer is a javascript library which allows playing educational code scenarios in the web browser. Scenarios look and feel like videos except that everything is executed over real web editor with a real code.

A picture is worth a thousand words, so try the demo.

Scenarios

Scenario is a set of actions such as typing, text selection, moving cursor, tooltips and others. Actions are either auto-played or triggered by user.

By the way, scenarios and interface can be translated and played in other languages.

Usage

Requirements

CodePlayer has a decent list of requirements. Here they are:

• CodeMirror (the backbone of the plugin)
• jQuery
• Underscore
• Twitter Boostrap 3 (CodePlayer relies on its styling by default. The tooltips also won't work without it.)
• FontAwesome (Used to insert icons into player controls)

Inside HTML code

1. Download the plugin and include the required css and js files into the html page (see demo page source for example).
2. Here's the code you need to display a player on a page:

<div id="codeplayer"></div>
<script>
    var div = document.getElementById('codeplayer');
    var scenario = { ... } // Scenario JSON file.
    var options = { ... } // CodePlayer options + all standard CodeMirror options.
    CodeMirror.player.create(div, scenario, options);
</script>

Options

locale : string (default: 'en')

If your scenario is multilingual, this parameter will pick the language. Note that local can not be changed during playback, so you will need to re-render a player instance.

translation : object (default: empty)

Here you can pass a simple JSON object to override standard controls captions and titles. Example:

{
    "Play": "Начать",
    "Replay": "Начать заново",
    "Next": "Вперед",
    "Back": "Назад",
    "Stop": "Стоп",
    "Click on these blue things to continue.": "Кликайте на эти синие штуки для продолжения.",
    "Show difference": "Показать разницу",
    "Compile and test": "Компиляция и тестирование"
}

merge : boolean (default: false)

Whether or not show the diff viewer after scenario is finished. This option requires Merge addon for Codemirror.

Acknowledgment

This library was created for www.refactoring.guru by @neochief.

If you need a similar library, but simpler, take a look at CodeMirror Movie.