Using datacamp light exercises in an ioslides presentation using the tutorial package

Question

The tutorial packages allows to include a datacamp interactive R window in an html document:

    ---
title: "Example Document"
output:
  html_document:
    self_contained: FALSE
---

```{r, include=FALSE}
tutorial::go_interactive()
```

By default, `tutorial` will convert all R chunks.

```{r}
a <- 2
b <- 3

a + b
```

I therefore thought it might be able to use it within an HTML5 presentation, for example like this:

---
title: "Example Document"
output:
  ioslides_presentation:
    self_contained: FALSE
---

```{r, include=FALSE}
tutorial::go_interactive()
```

By default, `tutorial` will convert all R chunks.

```{r}
a <- 2
b <- 3

a + b
```

However, that only created nonsense. Has anyone experience in getting this to work?

P.S.: The best result so far is a long alphanumeric string instead of a console in browser window (Google Chrome).

Answer 1

In the converting process, the HTML generated by the tutorial package gets encoded. An easy solution is to wrap your chunks like this:

<!--html_preserve-->
```{r}
a <- 2
b <- 3

a + b
```
<!--/html_preserve-->

leading to the HTML code generated being untouched.

To fix the glitches resulting from CSS conflicts you can add the following CSS right at the beginning of your document:

    <style>
/* Rearrange console label */
.datacamp-exercise ol li, .datacamp-exercise ul li {
  margin-bottom: 0em !important;
}

/* Remove bullet marker */
.datacamp-exercise ol li::before, .datacamp-exercise ul li::before {
  content: '' !important;
}
</style>