Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make bullets incrementally appear in flexdashboard storyboard for RMarkdown?

I'd like to make the bullet items on a flexdashboard/storyboard appear incrementally when the right arrow is clicked (presentation-style). How could this be achieved? I'm guessing a little Javascript but I don't know where to start. Ioslides export from Rmd has an option for incremental bullets, but I'd like to be able to do this on a per slide basis and I like the greater flexibility of flexdashboard/storyboard anyway.

See this MWE:

---
title: "How to increment?"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
---

### Slide 1

```{r}
hist(rnorm(100))
```

***

- I want these bullets
- to appear
- incrementally

### Slide 2

```{r}
hist(runif(100))
```

***

- I want these bullets
- to appear
- all at once
- when this slide
- comes up
like image 941
haff Avatar asked Oct 29 '19 22:10

haff


1 Answers

The solution that worked for me was to drop down to the knitr and to use the directive for raw html output. Rest was a bit of an ugly javascript. (Not that javascript is ugly. Just that I used ugly way of achieving the desired outcome. There is most certainly a cleaner way of doing the same thing.)

Note that this is the minimal example - the solution currently handles the onclick event on the whole document without regard to anything else. So if you decide to go this way, you will have to handle cases like returning from the second slide etc.

---
title: "How to increment?"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
---

### Slide 1

```{r}
hist(rnorm(100))
```


***
```{r}
knitr::raw_html("<ul>")
knitr::raw_html("<li id='test1' style='display:none'> I want these bullets </li>")
knitr::raw_html("<li id='test2' style='display:none'> to appear </li>")
knitr::raw_html("<li id='test3' style='display:none'> incrementally </li>")

knitr::raw_html("</ul>")
```


```{js}
displayed = 0;
display = function() {
  displayed++;
  id = "test" + displayed;
  el = document.getElementById(id);
  el.style.display = "list-item";
}
document.onclick=display
```

### Slide 2

```{r}
hist(runif(100))
```

***

- I want these bullets
- to appear
- all at once
- when this slide
- comes up
like image 162
Shamis Avatar answered Nov 05 '22 11:11

Shamis