Reactivity

]

<br><br>
# .font150[.fancy[Reactivity]]

]

---

## Read the [chapter](https://mastering-shiny.org/basic-reactivity.html) in Mastering Shiny to<br>understand reactivity in general

<br>

## Read the surveydown [reactivity page](https://surveydown.org/docs/reactivity)<br>for reactivity in surveydown

---

# .fancy[Reactivity]

### 1. Reactivity basics
### 2. Reactive questions

---

# .fancy[Reactivity]

### 1. .orange[Reactivity basics]
### 2. Reactive questions

---

# Reactivity is about changing<br>something based on respondent input

---

---

## Same example in surveydown

In `survey.qmd`:

```` markdown
```{r}
sd_question(
  type  = "text",
  id    = "name",
  label = "What is your name?"
)

*textOutput("greeting")
```
````

]

In `app.R`:

``` r
server <- function(input, output, session) {

* output$greeting <- renderText({
*   paste0("Hello ", input$name, "!")
* })

sd_server()

}
```

]

---

## Simplified with `sd_output()` to display question values

In `survey.qmd`:

```` markdown
```{r}
sd_question(
  type  = "text",
  id    = "name",
  label = "What is your name?"
)
```

*Hello, `r sd_output(id = "name", type = "value")`!
````

]

In `app.R`:

``` r
server <- function(input, output, session) {

sd_server()

}
```

]

---

## Understanding `sd_output()`

Question in `survey.qmd`:

```` markdown
```{r}
sd_question(
  type  = "mc",
  id    = "penguins",
  label = "What's your favorite penguin?",
  option = c(
*   "Adélie"    = "adelie",
    "Chinstrap" = "chinstrap",
    "Gentoo"    = "gentoo"
  )
)
```
````

]

Display a question _value_:

``` r
sd_output("penguins", type = "value")
```

Example: `adelie`

<br>

Display a question _label_:

``` r
sd_output("penguins", type = "label_option")
```

Example: `Adélie`

]

---

## Understanding `sd_output()`

Question in `survey.qmd`:

```` markdown
```{r}
sd_question(
  type  = "mc",
  id    = "penguins",
* label = "What's your favorite penguin?",
  option = c(
    "Adélie"    = "adelie", 
    "Chinstrap" = "chinstrap",
    "Gentoo"    = "gentoo"
  )
)
```
````

]

Display a _question label_:

``` r
sd_output("penguins", type = "label_question")
```

Example:<br>`What's your favorite penguin?`

]

---

# Your turn

In your survey, display a question _value_ somewhere with:

``` markdown
`r sd_output("id", type = "value")` 
```

<br>

In your survey, display a question _option label_ somewhere with:

``` markdown
`r sd_output("id", type = "label_option")` 
```

---

# .fancy[Reactivity]

### 1. Reactivity basics
### 2. .orange[Reactive questions]

---

## Change the question text based on respondent choices

In `survey.qmd`:

```` markdown
```{r}
sd_question(
  id     = "pet_type",
  type   = "mc",
  label  = "Which do you prefer, dogs or cats?",
  option = c(
    "Dogs" = "dog", 
    "Cats" = "cat"
  )
)
```
````

]

Follow up question:

If `dog`:

Are you a **dog** owner?

<br>

If `cat`:

Are you a **cat** owner?

]

---

### **Solution**: Define the entire question in the server

``` r
library(glue)

server <- function(input, output, session) {

observe({
    # Trigger with any change to input$pet_type
    pet_type <- input$pet_type

# Make the question
    sd_question(
      type   = "mc",
      id     = "pet_owner",
      label  = glue("Are you a {pet_type} owner?"),
      option = c("Yes" = "yes", "No" = "no")
    )
  })
  
  # Only show the pet_owner question if pet_type is answered
  sd_show_if(
    sd_is_answered("pet_type") ~ "pet_owner"
  )
  
  sd_server()
}
```

]]

---

### **Solution**: Define the entire question in the server

``` r
library(glue)

server <- function(input, output, session) {

* observe({
*   # Trigger with any change to input$pet_type
*   pet_type <- input$pet_type

sd_server()
}
```

]]

<br>

Use `observe` to detect any change to `pet_type` question

]

---

### **Solution**: Define the entire question in the server

``` r
library(glue)

server <- function(input, output, session) {

observe({
    # Trigger with any change to input$pet_type
    pet_type <- input$pet_type

# Make the question
*   sd_question(
*     type   = "mc",
*     id     = "pet_owner",
*     label  = glue("Are you a {pet_type} owner?"),
*     option = c("Yes" = "yes", "No" = "no")
*   )
  })
  
  # Only show the pet_owner question if pet_type is answered
  sd_show_if(
    sd_is_answered("pet_type") ~ "pet_owner"
  )

sd_server()
}
```

]]

Use `sd_question` to define the question

]

---

### **Solution**: Define the entire question in the server

``` r
library(glue)

server <- function(input, output, session) {

observe({
    # Trigger with any change to input$pet_type
    pet_type <- input$pet_type

# Make the question
    sd_question(
      type   = "mc",
      id     = "pet_owner", 
      label  = glue("Are you a {pet_type} owner?"), 
      option = c("Yes" = "yes", "No" = "no") 
    )
  })
  
  # Only show the pet_owner question if pet_type is answered
* sd_show_if(
*   sd_is_answered("pet_type") ~ "pet_owner"
* )

sd_server()
}
```

]]

Hide the `pet_owner` question until the `pet_type` is answered

]

---

## Use `sd_output()` to display the reactive question

In `survey.qmd`:

```` markdown
```{r}
sd_question(
  id     = "pet_type",
  type   = "mc",
  label  = "Which do you prefer, dogs or cats?",
  option = c(
    "Dogs" = "dog", 
    "Cats" = "cat"
  )
)

*sd_output("pet_owner", type = "question")
```
````

]

Follow up question:

If `dog`:

Are you a **dog** owner?

<br>

If `cat`:

Are you a **cat** owner?

]

---

## Your turn

Define a question inside your server (`app.R` file):

``` r
server <- function(input, output, session) {

observe({
    sd_question( 
      type = "mc",
      id   = "id", 
      ...
    ) 
  })

sd_server()
}
```

Display the question inside your survey (`survey.qmd` file):

``` r
sd_output("id", type = "question")
```

]