Modifications to Learnr User-Interface

[kgranillo10]

I have a few questions about the Learnr package, which I hope someone might be able to answer. Let me provide some context first. I recently have been using the Learnr package to conduct an experiment and obtain survey data. I understand that that was not the original intention of the package; however, it has really served well for this purpose. However, there are few things I would like to modify, and I could not seem to find any sources indicated if these modifications are possible. The following are the modification I would like to implement:

• Remove the Menu Bar displayed to the left of the interface.
• Remove the 'Run Code" button and only leave the "Submit Answer" button.
• Remove the option to continue to the next page without first submitting answers to the previous "survey items" (i.e., submitting answers to the exercises).

I really would appreciate any help. Thank you for taking the time to respond to my inquiry!

[gadenbuie]

Thanks @kgranillo10! I'll answer each one individually:

Remove the Menu Bar to the left of the interface

If you want to hide the navigation menu but still use learnr's content paging via the Continue button, you can use a little bit of CSS:

.topicsList .nav {
	display: none;
}

Or to completely remove the sidebar and make the content panel "full-width", use these rules:

.topicsContainer {
  display: none;
}

.topics {
  width: 100%;
}

Remove the "Run Code" button and only leave the "Submit Answer" button

Similarly, you can use a small CSS rule to achieve this.

.btn-tutorial-run:not(:last-child) {
	display: none;
}

This rule will actually only hide the "Run Code" button if the "Submit Answer" button is present. So if an exercise doesn't have a solution, the "Run Code" button will still show and users will always have a way to evaluate the code.

Remove the option to continue to the next page without first submitting answers

You can use progressive: true and allow_skip: false in the options for learnr::tutorial to achieve this (but just for exercises; there's an open issue to extend this to questions as well).

---
output:
  learnr::tutorial:
    progressive: true
    allow_skip: false
runtime: shinyrmd
---

How to include custom CSS

1. Create a file called custom.css (or something similar) in a css/ folder next to your tutorial .Rmd.

2. Add those two rules to the CSS file:

   /* css/custom.css */
   .topicsList .nav {
   	display: none;
   }
   
   .btn-tutorial-run:not(:last-child) {
   	display: none;
   }

3. Then tell learnr to use this CSS file in your YAML options:

   output: 
     learnr::tutorial:
        css: css/custom.css

[kgranillo10]

[gadenbuie]

Good question! I meant to include that in my answer 😄

1. Create a file called custom.css (or something similar) in a www/ folder next to your tutorial .Rmd.

2. Add those two rules to the CSS file:

   /* www/custom.css */
   .topicsList .nav {
   	display: none;
   }
   
   .btn-tutorial-run:not(:last-child) {
   	display: none;
   }

3. Then tell learnr to use this CSS file in your YAML options:

   output: 
     learnr::tutorial:
        css: www/custom.css

[gadenbuie]

Actually, figured it out! However, I tried using the .topicsList .nav code and it doesn't appear to remove the left navigation pane. The "submit answer" only option did work.

Yeah, I think you may run into some weird behavior if you completely remove the left panel. But you could try this and see if it works for you:

.topicsContainer {
  display: none;
}

.topics {
  width: 100%;
}

[kgranillo10]

AMAZING! Worked fantastically. Thank you!

[gadenbuie]

Great, thanks! And oops, I just realized that the canonical approach would be to use css/ instead of www/ (they'll both work fine, but I'm going to edit my answer above...)