This is is the all-new DataCamp Light. To access the old version, click here
Table of Contents
- How to run the app
- How does it work?
- Convert any website or blog to an interactive learning platform.
- Works for both R and Python. Sessions are maintained on DataCamp's servers.
- Convert existing markdown documents to an interactive course using the tutorial package.
- Check out a demo R and Python example.
- Leverage the same Submission Correctness Tests (SCT) DataCamp uses for all their courses. For R, there's the testwhat (GitHub wiki); for Python, there's pythonwhat (GitHub wiki).
How to run the app
Add the script to your HTML page (there is an example in
That's it! If your app adds DataCamp Light exercises after the initial page load (for example, in React apps), call the following function to initialize those new exercises:
Writing the HTML block
<div data-datacamp-exercise data-lang="r"> <code data-type="pre-exercise-code"> # This will get executed each time the exercise gets initialized b = 6 </code> <code data-type="sample-code"> # Create a variable a, equal to 5 # Print out a </code> <code data-type="solution"> # Create a variable a, equal to 5 a <- 5 # Print out a print(a) </code> <code data-type="sct"> test_object("a") test_function("print") success_msg("Great job!") </code> <div data-type="hint">Use the assignment operator (<code><-</code>) to create the variable <code>a</code>.</div> </div>
As we can see in the example, the whole exercise is contained in a single
<div> element with two data attributes
data-lang. The first attribute
data-datacamp-exercise indicates that the
<div> should be treated as a DataCamp Light exercise, while the other
data-lang specifies which programming language should be used. The
accepted values for
python. There is also an optional
data-height which can sets the height in
px of the div (minimum
300px) or set the size according to the amount of sample code lines:
Pre-exercise code is executed when the R/Python session is initialized. You can
use it to pre-load datasets, packages, etc. for students. The way to specify
this is by defining a
<code> tag containing your initialization code and set
data-type attribute to
pre-exercise-code like this:
<code data-type="pre-exercise-code"> # This will get executed each time the exercise gets initialized b = 6 </code>
In our example we initialize the (rather useless) variable
b with value
To set the sample code that will be present initially in the code editor, a
<code> tag should be defined containing the sample code and the
attribute should be set to
sample-code like this:
<code data-type="sample-code"> # Create a variable a, equal to 5 # Print out a </code>
To set the solution code, a
<code> tag should be defined containing the
solution code and the
data-type attribute should be set to
<code data-type="solution"> # Create a variable a, equal to 5 a <- 5 # Print out a print(a) </code>
Submission Correctness Test (SCT)
A Submission Correctness Test is used to check whether the code submitted by the
user properly solves the exercise. For detailed information on this you can look
at the documentation for R and at the
documentation for Python. The way to
specify the SCT is by defining a
<code> tag containing your SCT code and set
data-type attribute to
sct like this:
<code data-type="sct"> test_object("a") test_function("print") success_msg("Great job!") </code>
In our example the first line checks whether the user declared the variable
and whether its value matches that of the solution code. The second line checks
To specify a hint, a tag should be defined containing the hint and the
data-type attribute should be set to
hint like this:
<div data-type="hint"> Use the assignment operator (<code><-</code>) to create the variable <code>a</code>. </div>
It is possible for the hint to contain for instance
<code> tags as is the case in our example.
How does it work?
divs with the
data-datacamp-exercise attribute are converted into a minimal
version of DataCamp's learning interface (for the real deal, you can visit
It contains a session manager that connects to DataCamp's servers to provide an
R or Python session as if you're working on your local system. The R and Python
computing environments feature the most popular packages:
If you want to use a package that is not available, create an issue and we can install it (it's not possible to install packages at runtime).
If you'd like to contribute, awesome! You can start by reading this section of the readme to get an idea of the technical details of this project. For the most part, it's structured as a standard React/Redux project (written in TypeScript) so if you're not familiar with one of those, you might want to read up a bit.
To develop DataCamp Light, you'll need to run the app locally. This repository includes some example exercises to test it on.
Get started by cloning this repostory, installing the dependencies and starting the development server. As you make changes, the page will reload with your new code.
git clone https://github.com/datacamp/datacamp-light.git cd datacamp-light git checkout beta npm i npm start
vendor/ folder includes minified code of some internal DataCamp packages
that are not hosted publicly right now.
Please read these two documents before starting to implement any tests:
Test files are named as
Since a reducer is a pure function, it's not that complicated to test it. You have to use a seed to create a mock state. Then you can pass it to the reducer as argument along with the action you want to test.
Use snapshot testing to make sure components don't change by accident (see
src/components/Footer.spec.ts for an example). Other tests can be done for
components that have logic inside them.
Testing middleware is a bit more involved since they have side effects. You can
test Epics with the
rxjs-marbles framework since they transform Observable
src/autocomplete.spec.ts for an example.
Formatting with Prettier
We use Prettier to keep formatting
consistent. This will format your files (JS, TS, CSS, JSON) on a pre-commit
hook. If you want, you can also call
prettier --write filename to update a
There are also plugins for editors, like
that can auto-format on save.
Code Quality: ESLint, TSLint, Stylelint
I recommend installing plugins for these checkers in your editor. TSLint and Stylelint are also run in the development command, so you'll see their warnings pop up there as well.
We've been using this commit message
convention because it
has emoji and emoji are
Development is primarily done on the
Commits to the
development branch trigger a build on the DataCamp development
environment and produce a build here:
Next, commits to the
push a release to the staging environment:
Finally, when we create a release, an update is pushed to the production environment. This should be a stable version of DataCamp Light:
Commits to this
branch trigger a build that is deployed on the DataCamp Dev environment. Commits
to the main branch,
beta, are built and deployed to staging. When a release is
created, that build is deployed to production.