Waldir Leoncio
Waldir Leoncio

Reputation: 11341

R markdown PDF: Temporarily hide spoiler code for quiz takers

I am using R markdown to create a PDF R course. I want to insert a quiz like the following:

---
output: pdf_document
---

What is the class of the following R object?

1. `pi`

```{r}
class(pi)
```

Which, as expected, creates a PDF with this content:

enter image description here

However, I would like the reader to not have such an easy access to the answer. These are the ideas I've had so far to achieve this:

  1. Paint the answer and code white, so the reader would have to select the text to see the answer;
  2. Include a tooltip that would work on mouse over question.
  3. Flush the answer to the end of the document;
  4. Setting the answer upside down, in a smaller font;
  5. Use something similar to the >! code of stackoverflow to hide spoilers (no idea if there is such a feature on R markdown, though);

To me, the third idea seems like the most elegant way to do this, but I don't know how to implement it. I've taken a look at How to hide code in RMarkdown, with option to see it, http://yihui.name/knitr/options/ and https://www.ctan.org/pkg/exam?lang=en, but found nothing I could use.

As you can see, I don't mind if the solution requires the user to read the document on a computer, but if I can find a solution that would also work on printed versions of the document, that would be great.

Upvotes: 9

Views: 1258

Answers (1)

rawr
rawr

Reputation: 20811

I wasn't thinking of a full shiny app, but something like this .Rmd

---
output: html_document
---

## q1 what is `class(pi)?`

<div id="spoiler" style="display:none">

```{r}
class(pi)
```

</div>

<button title="Click to show answer" type="button"
   onclick="if(document.getElementById('spoiler') .style.display=='none')
              {document.getElementById('spoiler') .style.display=''}
            else{document.getElementById('spoiler') .style.display='none'}">
  Show/hide
</button>

enter image description here

And then to click

enter image description here

Upvotes: 8

Related Questions