Allow LearnR tutorial windows in R Markdown

[davidkane9]

Desirée De Leon describes an approach for adding LearnR tutorial windows to R Markdown documents. It is super cool! But it is also a little overwhelming for those of us who are scared of Javascript. Any chance that this functionality might come "out of the box" for learnr users? I have a draft textbook to which I would love to add hundreds of tutorial windows, in the same spirit as Allison Horst's naniar tutorial, but without giving up the benefits of bookdown, the tufte format and so on.

Sadly, I have no idea if this is possible or how one might implement it.

[schloerke]

@davidkane9 I agree that the javascript approach is a little involved.

I don't believe there will be a "out of the box" solution, but I think I have done something using css flexbox with @andrie . We'll dig up the code and see if the solution we found is appropriate.

Note: Given the tutorial is displayed using an iframe, the bookdown css styling will not have any effect on the iframe'd tutorial.

[andrie]

Related to https://github.com/rstudio/learnr/issues/316

[davidkane9]

Thanks for taking a look! We are eager to be the testers for any approach you want to explore.

[schloerke]

Found the code that we used. It still relied on the iframe resizer. I think it would be helpful to include the iframe resizer by default (or opt in) in a learnr tutorial. This would solve half of the resizer hand-shake natively.

Could also make a function to generate the iframe in the parent document. This would add the css, parent div, and inner iframe pointing to the tutorial.

I'll add the code below that we used for our iframe resizing. It may not work as I'm only pulling particular parts, but it should get you close.

---

Parent Rmd document...

<style>
.responsive-container-learnr {
  position: relative;
}  
.responsive-container-learnr iframe {
  position: relative;
  z-index: 100;
  border: 0;
  width: 1px;
  min-width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/iframe-resizer/js/iframeResizer.min.js" type="text/javascript"></script>

<!-- for each tutorial... -->
<div class="responsive-container-learnr">
  <iframe id="learnr_iframe"
    src="URL_TO_TUTORIAL" 
    gesture="media"  allowfullscreen
    scrolling="yes">
  </iframe>
</div>
<script>
  iFrameResize({ checkOrigin: 'BASE_URL_TO_TUTORIAL' , log: false }, '#learnr_iframe')
</script>

Child Tutorial document...

<script src="https://cdn.jsdelivr.net/npm/iframe-resizer/js/iframeResizer.contentWindow.min.js" type="text/javascript"></script>