DataCamp Light

• Convert any website or blog to an interactive learning platform.
• Works for both R and Python.
• Easy to install.
• 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 package (GitHub wiki). For Python, there's the pythonwhat package (GitHub wiki).

Student flow

The user attempts to solve the exercise.

The user can play around in the interactive R or Python console on the right.

By giving automated feedback, the user is guided to the correct solution.

How to use?

Using the Wordpress plugin

Installation instructions can be found here.

Using the tutorial package

Convert existing .Rmd files to an interactive HTML by installing the tutorial R package.

Using the JavaScript library

You will first need to include the JavaScript library on your webpage. We recommend using the latest release on the DataCamp CDN (https://cdn.datacamp.com/datacamp-light-latest.min.js):

<script src="https://cdn.datacamp.com/datacamp-light-latest.min.js"></script>

You can also use the JavaScript library in a stackoverflow.com answer by including the exercise and script tag as a snippet.

Writing the HTML block

After including the JavaScript library, you can start writing HTML blocks in the format below. These will be dynamically converted to exercises.

<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>

This code chunk will be transformed to the following exercise:

As we can see in the example, the whole exercise is contained in a single <div> element with two data attributes data-datacamp-exercise and data-lang. The first attribute data-datacamp-exercise indicates that the <div> should be treated as a DataCamp Light exercise, while the other attribute data-lang specifies which programming language should be used. The accepted values for data-lang are r and python. There is also an optional attribute data-height which can sets the height in px of the div (minimum height is 300px) or set the size according to the amount of sample code lines: data-height="auto".

Pre-Exercise Code

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 the 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 6.

Sample Code

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 data-type 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>

Our example simply shows a couple of comments together with some newlines. The JavaScript library also takes care of stripping leading indentation so no need to worry about that.

Solution

To set the solution code, a <code> tag should be defined containing the solution code and the data-type attribute should be set to solution-code like this:

<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 the 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 a and whether its value matches that of the solution code. The second line checks whether the print function is called and lastly a success message is specified that will be shown to the user when the exercise is successfully completed.

Hint

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.

Load exercises added to DOM

To load datacamp-light exercises added to the DOM after the page loaded, call

window.initAddedDCLightExercises()

Examples

You can find more examples in the example folder in the repository. You can also test out the demo R and Python example.

Building

After you downloaded this repository, run npm install and bower install for all the necessary dependencies. You will probably want to test your own build so change DCL_URL in src/datacamp-light.js to http://localhost:3003/. Afterwards you can run gulp to build DataCamp Light and node web.js to serve random examples with the local build.