Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve appearance of correct/incorrect questions #531

Merged
merged 6 commits into from
Jun 8, 2021

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