A basic demonstration of the `tutorial` package to add DataCamp Light widgets to R Markdown files.
This project is maintained by DS4PS
This example uses the DataCamp Light widgets in a chapter explaining functions() in R.
The DataCamp Light javascript library allows you to add R widgets to your HTML files so that students can do interactive examples using code.
DataCamp has created an R package called tutorial
to integrate the DataCamp Light widget into R Markdown documents.
devtools::install_github( "datacamp/tutorial" )
To see it in action, check out the tutorial
vignette.
---
title: "Example Document"
author: "Your name here"
output:
html_document:
self_contained: false
---
```{r, include=FALSE}
tutorial::go_interactive()
```
```{r ex="create_a", type="pre-exercise-code"}
b <- 5
```
```{r ex="create_a", type="sample-code"}
# Create a variable a, equal to 5
# Print out a
```
```{r ex="create_a", type="solution"}
# Create a variable a, equal to 5
a <- 5
# Print out a
a
```
```{r ex="create_a", type="sct"}
test_object("a")
test_output_contains("a", incorrect_msg = "Make sure to print out `a`.")
success_msg("Great!")
```
Allows the most recent version of DataCamp light to be fetched each time the webpage opens.
Turns R chunks into interactive widgets.
go_interactive( greedy = TRUE, height = 300 )
With the greedy argument, you can control which elements of your R Markdown document are converted into DataCamp Light chunks.
By default greedy is TRUE, leading to all R code chunks to be converted to interactive frames. Only chunks for which you specify the option tut = FALSE
are not converted.
If ‘greedy‘ is FALSE, only chunks for which you specify tut = TRUE
are converted.
R chunk option for specifying the type of chunk in the tutorial window.
Test your code before launching tutorials using testwhat.
This GitHub repo contains a demo DataCamp Light interactive R console HERE.
Here is the RMD file.
This example uses the DataCamp Light widgets in a chapter explaining functions() in R.
FUNCTIONS CHAPTER [ RMD file ]
We have customized elements of the tutorial using a custom CSS embedded in the RMD file.
div.powered-by-datacamp{
margin-bottom:40px;
display: none;
}
div.datacamp-exercise{
margin-bottom:40px;
}
.datacamp-exercise .dcl-btn-primary {
background-color: LightSteelBlue;
color: white;
}
And we have added question cues that are highlighted by placing them inside a questions div:
<div class="question">
* What arguments do you need?
* How many decimals do you need (consider the `round()` function.
* Don't forget a return statement!
</div>
CSS:
div.question{
background-color: LightSteelBlue;
border-radius: 10px;
border: 1px solid lightgray;
padding-top:10px;
padding-bottom:10px;
font-size: 85%;
font-family: Verdana;
/* font-weight: bold; */
color: white;
padding-left:05%;
margin-bottom:40px;
}