CODEWITHSUNDEEP
rknitrr-markdown
Daniel Falbel
Daniel Falbel

Reputation: 1713

insert html code before and after a chunk in rmarkdown/knitr

I'm creating some R exercises in an rmarkdown document, but I don`t want the answers to be shown, unless the person clicks in a button.

I managed to do that using the following code:

---
title: "Aula 01 - Exercícios"
date : 2016-01-18
layout: post
comments: true
tags: exercicio
category: exercicio
---

<script>
  var toggle = function(i) {
  var mydiv = document.getElementById('q' + i);
  if (mydiv.style.display === 'block' || mydiv.style.display === '')
    mydiv.style.display = 'none';
  else
    mydiv.style.display = 'block'
  }
</script>



1) Calcule o número de ouro no R.

$$ \frac{1 + \sqrt{5}}{2} $$

<div id="q1"  style="display:none;" >
```{r}
(1 + sqrt(5))/2
```
</div>

<button type = "button" onclick="toggle(1);" class = "btn btn-success">+</button>

This works great, but I think I'm repeating a lot of code. And when I have 100 questions and I decide to change the button name I'll be very sad.

Is there anyway I can do something like:

---
title: "Aula 01 - Exercícios"
date : 2016-01-18
layout: post
comments: true
tags: exercicio
category: exercicio
---

<script>
  var toggle = function(i) {
  var mydiv = document.getElementById('q' + i);
  if (mydiv.style.display === 'block' || mydiv.style.display === '')
    mydiv.style.display = 'none';
  else
    mydiv.style.display = 'block'
  }
</script>



1) Calcule o número de ouro no R.

$$ \frac{1 + \sqrt{5}}{2} $$

```{r, option_to_include_code}
(1 + sqrt(5))/2
```

So knitr includes the necessary div and input before converting to markdown?

Upvotes: 3

Views: 4562

Answers (1)

hrbrmstr
hrbrmstr

Reputation: 78792

Here's one way. This:

  • creates a global question # counter, and
  • has a function that:

    • takes an R expression as input
    • spits out a <div> with the expression & answer & button (formatting is up to you)
    • uses some R markdown code chunk options to make it all work

You don't get R code formatting this way, but that's actually doable if you want to work at it.

RPubs example output

---
title: "Aula 01 - Exercícios"
date : 2016-01-18
layout: post
comments: true
tags: exercicio
category: exercicio
---
```{r echo=FALSE}
library(htmltools)

q_num <- 1
q_inc <- function(q_exp) {
  q_num <<- q_num + 1
  return(div(div(id=sprintf("q%d", q_num-1), 
                 style="display:none;", 
                 pre(deparse(substitute(q_exp)), q_exp)),
              HTML(sprintf('<button type="button" onclick="toggle(%d);" class="btn btn-success">+</button>', 
                           q_num-1))))
}
```
<script>
  var toggle = function(i) {
  var mydiv = document.getElementById('q' + i);
  if (mydiv.style.display === 'block' || mydiv.style.display === '')
    mydiv.style.display = 'none';
  else
    mydiv.style.display = 'block'
  }
</script>



1) Calcule o número de ouro no R.

$$ \frac{1 + \sqrt{5}}{2} $$

```{r, echo=FALSE, results="markup"}
q_inc((1 + sqrt(5))/2)
```

2) Calcule o número de ouro no R again.

$$ \frac{2 + \sqrt{5}}{2} $$

```{r, echo=FALSE, results="markup"}
q_inc((2 + sqrt(5))/2)
```

Upvotes: 6

Related Questions