DataCamp Light

With DataCamp Light, anyone can create an interactive learning platform for data science.

Features

Contents

Examples

Try out some exercises and check out the source code for a quick copy-paste.

R Exercise

# no pec # Calculate 3 + 4 3 + 4 # Calculate 6 + 12 # Calculate 3 + 4 3 + 4 # Calculate 6 + 12 6 + 12 test_output_contains("18", incorrect_msg = "Make sure to add `6 + 12` on a new line. Do not start the line with a `#`, otherwise your R code is not executed!") success_msg("Awesome! See how the console shows the result of the R code you submitted? Now that you're familiar with the interface, let's get down to R business!")
Source Code 
<div data-datacamp-exercise data-lang="r" data-height="500" id="r-exercise">
  <code data-type="pre-exercise-code"># no pec</code>
  <code data-type="sample-code">
    # Calculate 3 + 4
    3 + 4

    # Calculate 6 + 12
  </code>
  <code data-type="solution">
    # Calculate 3 + 4
    3 + 4

    # Calculate 6 + 12
    6 + 12
  </code>
  <code data-type="sct">
    test_output_contains(&quot;18&quot;, incorrect_msg = &quot;Make sure to add `6 + 12` on a new line. Do not start the line with a `#`, otherwise your R code is not executed!&quot;)
    success_msg(&quot;Awesome! See how the console shows the result of the R code you submitted? Now that you&#39;re familiar with the interface, let&#39;s get down to R business!&quot;)
  </code>
</div>

Shell Exercise

Type cd [directory] to go to [directory].
Ex() >> test_student_typed(r'\s*cd(\s+(\.\.|\~))?\s*', fixed=False, msg='Use `cd ..` to go up a level or `cd ~` to return home.')
Source Code 
<div data-datacamp-exercise data-lang="shell" data-height="500" id="shell-example">
  <div data-type="hint">Type <code>cd [directory]</code> to go to [directory].</div>
  <code data-type="sct">
    Ex() >> test_student_typed(r'\s*cd(\s+(\.\.|\~))?\s*',
                              fixed=False,
                              msg='Use `cd ..` to go up a level or `cd ~` to return home.')
  </code>
</div>

Python Exercise

# no pec # Create a variable a, equal to 5 # Print out a # Create a variable a, equal to 5 a = 5 # Print out a print(a) test_object("a") test_function("print") success_msg("Great job!")
Use the assignment operator (=) to create the variable a.
Source Code 
<div data-datacamp-exercise data-lang="python">
  <code data-type="pre-exercise-code">
    # no pec
  </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>

Tutorial

Installation

To install DataCamp Light into your website, just add the following script tag:

<script type="text/javascript" src="//cdn.datacamp.com/dcl-react.js.gz"></script>

Writing an Exercise

Create the Exercise Element

To create an exercise, add a <div> tag with the data-datacamp-exercise property to denote that DataCamp Light should parse this element, and a data-lang="python" property to denote the language of this exercise. Possible options are r, python and shell. 

<div data-datacamp-exercise data-lang="r">
  <!-- The exercise specification will go here -->
</div>

Learn about Exercise Blocks

An exercise consists of different blocks. You'll be familiar with these already if you've created a course on DataCamp.

When you start a DataCamp Light exercise, DataCamp prepares the workspace behind the scenes using the pre-exercise code. Then, the sample code is displayed to the student. The student can optionally request a hint if he or she is stuck, or request to see the solution. When the student clicks the “Submit” button, the sample correctness test is executed to verify the student's solution.

You don't have to specify all of these elements in every exercise. DataCamp Light will behave slightly differently based on what you specify. For example,

Create Exercise Blocks

To specify these blocks in your exercise, add a <code> element within the exercise <div> and specify the type by adding a data-type="_____" attribute. For example:

Pre-exercise code

This code will be run before any other code. This is useful if you want to load some packages or initialize some variables beforehand. 

<code data-type="pre-exercise-code">
	# This will get executed each time the exercise gets initialized
	b = 6
</code>
Sample code

This code will be present in the editor when your student opens the page. 

<code data-type="sample-code">
	# Create a variable a, equal to 5


	# Print out a

</code>
Solution

The code that you consider "correct". This will show up when the user presses the "Solution" button. 

<code data-type="solution">
	# Create a variable a, equal to 5
	a &lt;- 5

	# Print out a
	print(a)
</code>
Pre-exercise code

This is the code that will check if your student's code is correct or not. For more information, look at the documentation for R and the documentation for Python. 

<code data-type="sct">
	test_object("a")
	test_function("print")
	success_msg("Great job!")
</code>
Hint

This will be shown when the student presses the “Hint” button. 

<div data-type="hint">Use the assignment operator (<code>&lt;-</code>) to create the variable <code>a</code>.</div>

Customizing DataCamp Light

Exercise Options

Use these properties on your <div> to customize DataCamp Light's appearance:

data-datacamp-exercise
Required. Marks this block as an exercise.
data-lang="myLanguage"
Required. Replace myLanguage with the language of your exercise. Options are: r, python and shell.
data-height="300"
Specify the height of the exercise in pixels. The default and minimum value are both 300.
data-show-run-button
Add this property to always show the “Run” button, so the student can execute his code without submitting it.
data-no-lazy-load
Add this property to load all exercises immediately, without waiting for them to become visible on the page. This will reduce performance, but can fix compatibility issues with iFrame-based pages.

Initialize New Exercises

If you added new exercise after the page was loaded (for example, in single-page applications), you can manually ask DataCamp Light to find new exercises by executing the following JavaScript code: 

DCL.init();

Integrating with Your Own Application

If you want to keep track of your student's progress, DataCamp Light exposes a few events you can listen to.

First, be sure to manually specify an id for every exercise. If there is no id present, a random UUID will be chosen.

All the exercises are exposed in a global DCL.instances object, where the key is the id you specified. You can listen to their events by calling on(eventType, callback) to add a callback. For example, 

DCL.instances["my-exercise-1"].on("feedback", payload => {
  if (payload.correct) {
    alert("You rock!");
  }
});

The following events are currently supported:

start
Payload: undefined. Triggered when a session is started. This happens the first time a user clicks within the exercise and when the session is restarted.
submit
Payload: { code: string }. Triggered when the student submitted code.
feedback
Payload: { correct: boolean, content: string }. Triggered when feedback from the correctness test is received. The content is the feedback that is shown to the user.

More Examples

Python playground with a plot

If you omit the sct (sample correctness test), you can just use DataCamp Light to play with the code.

import numpy as np import matplotlib.pyplot as plt x = np.arange(0, 5, 0.1); y = np.sin(x) plt.plot(x, y) plt.show()
Just press 'Run'.

Exercise + Playground

Add data-show-run-button to the exercise tag to always show the "Run" button, so your visitors can try out the code without submitting it.

# no pec # An addition 5 + 5 # A subtraction 5 - 5 # A multiplication 3 * 5 # A division (5 + 5) / 2 # Exponentiation # Modulo # End # An addition 5 + 5 # A subtraction 5 - 5 # A multiplication 3 * 5 # A division (5 + 5) / 2 # Exponentiation 2 ^ 5 # Modulo 28 %% 6 msg = "Do not remove the other arithmetic examples!" test_output_contains("2^5", incorrect_msg = "The exponentiation example is not correct. Write `2 ^ 5` on a new line.") test_output_contains("28 %% 6", incorrect_msg = "There seems to be an issue with the modulo example. Write `28 %% 6` on a new line.") success_msg("Great! Head over to the next exercise.")

Another example of the modulo operator: 9 %% 2 equals 1.

Variable assignment

# no pec # Assign the value 42 to x x <- # Print out the value of the variable x x # Assign the value 42 to x x <- 42 # Print out the value of the variable x x test_object("x", undefined_msg = "Make sure to define a variable `x`.", incorrect_msg = "Make sure that you assign the correct value to `x`.") success_msg("Good job! Have you noticed that R does not print the value of a variable to the console when you did the assignment? `x <- 42` did not generate any output, because R assumes that you will be needing this variable in the future. Otherwise you wouldn't have stored the value in a variable in the first place, right? Proceed to the next exercise!")

Look at how the value 4 was assigned to my_variable in the exercise's assignment. Do the exact same thing in the editor, but now assign 42 to the variable x.

Variable assignment (2)

# no pec # Assign the value 5 to the variable my_apples # Print out the value of the variable my_apples # Assign the value 5 to the variable my_apples my_apples <- 5 # Print out the value of the variable my_apples my_apples test_object("my_apples", undefined_msg = "Please make sure to define a variable `my_apples`.", incorrect_msg = "Make sure that you assign the correct value to `my_apples`.") test_output_contains("my_apples", incorrect_msg = "Have you explicitly told R to print out the `my_apples` variable to the console?") success_msg("Great! Continue to the next exercise!")

Remember that if you want to assign a number or an object to a variable in R, you can make use of the assignment operator <-. Alternatively, you can use =, but <- is widely preferred in the R community.

Variable assignment (3)

# no pec # Assign a value to the variables my_apples and my_oranges my_apples <- 5 # Add these two variables together # Create the variable my_fruit # Assign a value to the variables my_apples and my_oranges my_apples <- 5 my_oranges <- 6 # Add these two variables together my_apples + my_oranges # Create the variable my_fruit my_fruit <- my_apples + my_oranges test_object("my_apples", incorrect_msg = "Keep the line that assigns 5 to `my_apples`.") test_object("my_oranges", incorrect_msg = "Keep the line that assigns 6 to `my_oranges`.") test_output_contains("my_apples + my_oranges", incorrect_msg = "Make sure to print out the result of adding `my_apples` and `my_oranges`. The code example in the description already gives away the answer to this instruction!") msg <- "Have you used `my_fruit <- my_apples + my_oranges` to create the `my_fruit` variable?" test_object("my_fruit", undefined_msg = msg, incorrect_msg = msg) success_msg("Nice one! The great advantage of doing calculations with variables is reusability. If you just change `my_apples` to equal 12 instead of 5 and rerun the script, `my_fruit` will automatically update as well. Continue to the next exercise.")

my_fruit is just the sum of my_apples and my_oranges. You can use the + operator to sum the two and <- to assign that value to the variable my_fruit.

Apples and oranges

# no pec # Assign a value to the variable my_apples my_apples <- 5 # Fix the assignment of my_oranges my_oranges <- "six" # Create the variable my_fruit and print it out my_fruit <- my_apples + my_oranges my_fruit # Assign a value to the variable my_apples my_apples <- 5 # Fix the assignment of my_oranges my_oranges <- 6 # Create the variable my_fruit and print it out my_fruit <- my_apples + my_oranges my_fruit test_error(incorrect_msg = "You can do this by setting the `my_oranges` variable to a numeric value, not a string!") test_object("my_apples", incorrect_msg = "Make sure that `my_apples` still contains `5`.") test_object("my_oranges", incorrect_msg = "Make sure that `my_oranges` is equal to `6`.") test_object("my_fruit", incorrect_msg = "The value of `my_fruit` is not correct. It should be 11, the sum of `my_apples` and `my_oranges`.") test_output_contains("my_fruit", incorrect_msg = "Don't remove the line that prints out `my_fruit`.") success_msg("Awesome, keep up the good work! Continue to the next exercise.")

You have to assign the numeric value 6 to the my_oranges variable instead of the character value "six". Note how the quotation marks are used to indicate that "six" is a character.

Basic data types in R

# no pec # Change my_numeric to be 42 my_numeric <- 42.5 # Change my_character to be "universe" my_character <- "some text" # Change my_logical to be FALSE my_logical <- TRUE # Change my_numeric to be 42 my_numeric <- 42 # Change my_character to be "universe" my_character <- "universe" # Change my_logical to be FALSE my_logical <- FALSE test_object("my_numeric", incorrect_msg = "Have you correctly changed the declaration of `my_numeric` so it contains the value 42?") test_object("my_character", incorrect_msg = "Have you correctly changed `my_character` to `\"universe\"`? Don't forget the quotes!") test_object("my_logical", incorrect_msg = "Have you correctly changed `my_logical` to `FALSE`? All letters of `FALSE` should be capitalized!") success_msg("Great work! Continue to the next exercise.")

Replace the values in the editor with the values that are provided in the exercise. For example: my_numeric <- 42 assigns the value 42 to the variable my_numeric.

What's that data type?

# no pec # Declare variables of different types my_numeric <- 42 my_character <- "universe" my_logical <- FALSE # Check class of my_numeric class(my_numeric) # Check class of my_character # Check class of my_logical # Declare variables of different types: my_numeric <- 42 my_character <- "universe" my_logical <- FALSE # Check class of my_numeric class(my_numeric) # Check class of my_character class(my_character) # Check class of my_logical class(my_logical) msg <- "Do not change the declaration of the variables!" lapply(c("my_numeric", "my_character", "my_logical"), test_object, undefined_msg = msg, incorrect_msg = msg) patt <- "Have you included `class(%1$s)` to print out the data type of `%1$s`?" test_output_contains("class(my_numeric)", incorrect_msg = "Do not remove the code that prints out the type of `my_numeric`.") test_output_contains("class(my_character)", incorrect_msg = sprintf(patt, "my_character")) test_output_contains("class(my_logical)", incorrect_msg = sprintf(patt, "my_logical")) success_msg("Congratulations! This was the last exercise for this chapter. Head over to the next chapter to get immersed in the world of vectors!")

The code that prints the data type of my_numeric is already included; do a similar things for my_character and my_logical.