How to use datacamp's tutorial package to insert R exercises in xaringan slides?

Question

I recently came across DataCamp's tutorial package that makes code chunks within an R Markdown document interactive by opening the code chunks in DataCamp's learning interface. I used tutorial::build_example() to generate an example file and compiled it to see how the rendered html file looks. It works as expected. Since I wanted to use this feature in xaringan slides, I changed output: html_document to output: xaringan::moon_reader and now I see this:

I am wondering why this is failing in xaringan slides and how can I fix it?

Answer 1

tutorial is meant to work for the html_document format of rmarkdown which behaves differently than xaringan. I think it's not worth the hassle to go the detour and try to get it working via the tutorial package.

Ultimately, you just need to write some HTML and embed datacamp-light.js:

Set up an HTML file which includes the JS

dc.html

<script async='async' src='https://cdn.datacamp.com/dcl-react.js.gz'></script>

and include it in the YAML header of your xaringan project:

.Rmd

output:
  xaringan::moon_reader:
    css: ["customtheme.css"]
    includes:
      in_header: "dc.html"

You may then write interactive exercises using the same SCTs etc. but using HTML chunks:

---
## DC

<div data-datacamp-exercise data-lang='r' data-height = 320>
<code data-type="sample-code">
 set.seed(123)
 # draw the winning numbers for this week
</code>
<code data-type="solution">
 set.seed(123)
 # draw the winning numbers for this week
 sample(1:49, size = 6)
</code>
<code data-type="sct">
 test_function("sample", args = c("x","size"))
</code>
</div>

Note that typing code will interfere with xaringan keyboard shortcuts so you want to disable them.