Skip to content

Conversation

@gadenbuie
Copy link
Member

This provides a small visual improvement to the radio and checkmark question styles.

Before

Previously, ✓ and ✗ marks were added directly to the shiny component so they would appear at the end of the question answer. The were unstyled and because they were added directly to the label, their location depends on the label content.

learnr-qs-before

After

With this PR, the correct/incorrect marks live in the tutorial.css and are now dependent on the .correct and .incorrect classes. When the question is "final", the shiny component adds a .question-final class to the top-level element and the checkbox or radio inputs are hidden and replaced with the ✓ or ✗ in a ::before pseudo-element.

learnr-qs-after-unstyled

I chose not to put additional classes on the .correct or .incorrect elements, but with a little bit of CSS a user could add the equivalent of .text-success and .text-danger to these items for even more visual distinction.

.question-final .correct {
  color: #468847; /* .text-success */
}
.question-final .incorrect {
  color: #b94a48; /* .text-danger */
}

learnr-qs-after-styled

Notes

I exported finalize_question(), since disable_all_tags() was also exported and under the assumption that we want to export the helper functions we use in the default question methods.

Reprex doc
---
title: "Tutorial"
output: learnr::tutorial
runtime: shiny_prerendered
---

```{r setup, include=FALSE}
library(learnr)
knitr::opts_chunk$set(echo = FALSE)
```

```{css eval=TRUE, echo=FALSE}
.question-final .correct {
  color: #468847; /* .text-success */
}
.question-final .incorrect {
  color: #b94a48; /* .text-danger */
}
```

## Topic 1

### Exercise 

```{r q-radio, echo=FALSE}
question(
  "Radio question, which one is right?",
  answer("this one", correct = TRUE),
  answer("not this one"),
  answer("not this one either"),
  allow_retry = TRUE,
  random_answer_order = FALSE
)
```

```{r q-check, echo=FALSE}
question(
  "Checkbox question, which one is right?",
  answer("this one", correct = TRUE),
  answer("not this one"),
  answer("not this one either"),
  answer("but this one is", correct = TRUE),
  allow_retry = TRUE,
  random_answer_order = FALSE
)
```

```{r q-radio-code, echo=FALSE}
question(
  "Radio code question, which one is right?",
  answer("<pre><code>ggplot(mpg) +\n  aes(cty, hwy)</code></pre>", correct = TRUE),
  answer("<pre><code>ggplot(mpg) %>%\n  aes(cty, hwy)</code></pre>", correct = FALSE),
  allow_retry = TRUE,
  random_answer_order = FALSE
)
```


Adds finalize_question() helper and moves correct/incorrect marker into CSS
@gadenbuie gadenbuie requested a review from schloerke May 27, 2021 21:44
Copy link
Collaborator

@schloerke schloerke left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

Should we also soft deprecate disable_all_tags() in favor of finalize_question()? I'm ok either way.

@gadenbuie
Copy link
Member Author

Should we also soft deprecate disable_all_tags() in favor of finalize_question()? I'm ok either way.

I think maybe we should wait on that until the next htmltools release. We'll probably want to revisit that section of the code then.

@gadenbuie gadenbuie merged commit b4e9fb2 into rstudio:master Jun 8, 2021
@gadenbuie gadenbuie deleted the pretty-question-marks branch June 8, 2021 01:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants