Building learnr tutorials using CSUCI theme!
ci_learnr.Rmd
This article provides a brief introduction on how to build
learnr
tutorials using a custom CSUCI theme (colors and
font). This article is still a work in progress and will have many
mistakes. If you find a mistake or bug, please feel free to email me to
fix it. Thank you! If you want me to add elements to the themes, please
let me know and I will see what I can do.
Installing and utilizing template
To begin, make sure you install and load the inqstools
package to access the template.
This will allow you to utilize the CI_learnr
template to
build your interactive tutorial.
To create a template of the CI_learnr RMD file, use the following command:
ci_learnr("NAME_OF_FILE")
where you place the name of the new file in the placholder. You do not need to add “.Rmd” to the file. It will automatically do it for you.
Contributing to csustats
R Package
These templates can be used for the csustats R package, an R package I am working on to provide students with R support. If you wish to contribute or revise tutorials, I’d be happy to collaborate. Once I learn how to collaborate with Github, I will write a set of instructions on how to contribute to the package.
Extra Elements
When I was creating certain tutorials for the csustats R package, I was
frustrated with the limitations of the learnr
tutorials
using visual effects, callouts at
the time. After googling around, I found Yanina Bellini Saibene1
modification and implementation or learnr
templates
utilizing css
to spruce up the tutorial. This inspired me
to create a template for tutorials with a CSUCI spin, thus the
ci_learnr
function was born that create a template and
incorporates a scss
file to control the elements. While
creating the template, I realized I can use the scss
file
to create classes that will create callouts fairly easily. The remainder
of this section will explore some of the extra elements for the
template
Callouts
The template is capable of create the following callouts2:
Note (info): A blue callout that you can use for information
Warning (warning): An orange callout that you can use to display a warning
Danger (danger): A red callout to express something important
Success (success): a green callout to express success
To utilize a callout, create a div
block, surround text
with :::
, and type the code in the parenthesis above to
indicate you want a callout. Afterwards, create a title for the callout
using 4 #
’s. This will create a callout. Lastly, type the
information you want to display. The code block below provides a
skeleton of the block:
::: info
#### Title
Information
:::
If you are using Visual Mode in RStudio, you will need to insert a
div
block and change the Classes option.
Table of Contents
I created a small class, that looks similar to the callouts, to create a custom table of contents using CI colors. You can implement this class with the following code:
::: contents
### Title
- Item 1
- Item 2
- Item 3
:::
Future Elements
As I continue to work on developing new tutorials, i am sure that I will need to utilize new classes or elements. Once I learn how to do it, I will update the template so anyone can use them.
If you have a specific idea for an element, please feel free to
contact me and I will see what I can do. I am not a CS programmer and
only dabble with css
. I will do my best to implement it,
but no promises.
If you want to contribute new elements or have better ideas to organize the template, I welcome the support. I would love to incorporate javascript, if it is possible, to these tutorials. But I do not have the time to learn it.