survey.qmd

---
# The YAML header specifies several settings for the survey but is not required.
# A full list of settings can be found under _survey/settings.yml directory.

theme-settings:
  theme: default
  barposition: top
  footer-left: "Made with [surveydown](https://surveydown.org)"
  footer-right: '[<i class="bi bi-github"></i> Source Code](https://github.com/surveydown-dev/template_question_types)'

survey-settings:
  show-previous: false
  use-cookies: false
  auto-scroll: false
  rate-survey: false
  system-language: en
  highlight-unanswered: true
  highlight-color: blue
  capture-metadata: true
  all-required: false
  required:
    - skip_to_page
---

```{r}
library(surveydown)
```

--- welcome

# Template - Question Types

Hi! This is a showcase of different question types and question formatting that surveydown supports.

Please make your choice below.

```{r}
sd_question(
  id    = 'skip_to_page',
  type  = 'mc',
  label = "Where do you want to go to?",
  option = c(
    'Take me to the page on Question Types (the next page)' = 'question_types',
    'Take me to the page on Question Formatting' = 'question_formatting',
    'Skip to the end' = 'end'
  )
)
```

--- question_types

# Question types

This page showcases the different types of question supported by `{surveydown}`. Each question requires the user to define the following arguments to the `sd_question()` function:

- `id`: A unique identifier for the question, which will be used as the variable name in the resulting survey data.
- `label`: The label that will be displayed on the question in the survey.
- `type`: The type of question, options include:
    - `text`: Single line open text input.
    - `textarea`: Multiple line open text input.
    - `numeric`: Single line numeric text input.
    - `mc`: Multiple choice with a single select option (radio buttons).
    - `mc_buttons`: Same as `mc` but as a "button" style instead of radio buttons.
    - `mc_multiple`: Multiple choice with mutliple select options (check boxes).
    - `mc_multiple_buttons`: Same as `mc_multiple` but as a "button" style instead of check boxes.
    - `select`: Select a choice from a dropdown menu.
    - `slider`: Slider to select discrete categories or continuous numbers.
    - `date`: Select a date from a calendar widget.
    - `daterange`: Select two dates from calendar widgets (e.g. begin and end dates).
    - `matrix`: Several questions with same list of options. Each question is in fact an `mc` question.

#### Use `type = 'text'` to specify a text input type question:

```{r}
sd_question(
  id    = "silly_word",
  type  = "text",
  label = "Write a silly word:"
)
```

#### Use `type = 'textarea'` to specify a textarea input type question:

```{r}
sd_question(
  id    = "silly_paragraph",
  type  = "textarea",
  label = "Write a silly paragraph:"
)
```

#### Use `type = 'numeric'` to specify a numeric input type:

```{r}
sd_question(
  id    = 'age',
  type  = 'numeric',
  label = "What's your age?"
)
```

#### Use `type = 'mc'` to specify a multiple choice type question with a single choice option:

```{r}
sd_question(
  id     = 'artist',
  type   = 'mc',
  label  = "Which artist do you prefer most from this list?",
  option = c(
    "Taylor Swift" = "taylor_swift",
    "Beyoncé"      = "beyonce",
    "Adele"        = "adele",
    "Rihanna"      = "rihanna",
    "Lady Gaga"    = "ladygaga",
    "Ed Sheeran"   = "ed_sheeran",
    "Drake"        = "drake"
  )
)
```

#### Use `type = 'mc_buttons'` to generate the button version of `mc`:

```{r}
sd_question(
  id     = 'fruit',
  type   = 'mc_buttons',
  label  = "Which fruit do you prefer most from this list?",
  option = c(
    "Apple"      = "apple",
    "Banana"     = "banana",
    "Pear"       = "pear",
    "Strawberry" = "strawberry",
    "Grape"      = "grape",
    "Mango"      = "mango",
    "Watermelon" = "watermelon"
  )
)
```

#### Use `type = 'mc_multiple'` to specify a multiple choice type question with multiple selection enabled:

```{r}
sd_question(
  id    = 'swift',
  type  = 'mc_multiple',
  label = "What are your favorite Taylor Swift albums (select all that apply)?",
  option = c(
    "Taylor Swift (2006)" = "taylor_swift",
    "Fearless (2008)"     = "fearless",
    "Speak Now (2010)"    = "speak_now",
    "Red (2012)"          = "red",
    "1989 (2014)"         = "1989",
    "Reputation (2017)"   = "reputation",
    "Lover (2019)"        = "lover",
    "Folklore (2020)"     = "folklore",
    "Evermore (2020)"     = "evermore",
    "Midnights (2022)"    = "midnights"
  )
)
```

#### Use `type = 'mc_multiple_buttons'` to generate the button version of `mc_multiple`:

```{r}
sd_question(
  id    = 'michael_jackson',
  type  = 'mc_multiple_buttons',
  label = "Which are your favorite Michael Jackson songs (select all that apply)?",
  option = c(
    "Thriller (1982)"          = "thriller",
    "Billie Jean (1982)"       = "billie_jean",
    "Beat It (1982)"           = "beat_it",
    "Man in the Mirror (1987)" = "man_in_the_mirror",
    "Smooth Criminal (1987)"   = "smooth_criminal",
    "Black or White (1991)"    = "black_or_white",
    "Bad (1987)"               = "bad",
    "Human Nature (1982)"      = "human_nature"
  )
)
```

#### Use `type = 'select'` to specify a drop down select type question:

```{r}
sd_question(
  id    = 'education',
  type  = 'select',
  label = "What is the highest level of education you have attained?",
  option = c(
    "Did not attend high school" = "hs_no",
    "Some high school"           = "hs_some",
    "High school graduate"       = "hs_grad",
    "Some college"               = "college_some",
    "College"                    = "college_grad",
    "Graduate Work"              = "grad",
    "Prefer not to say"          = "no_response"
  )
)
```

#### Use `type = 'slider'` to specify a slider input type:

```{r}
sd_question(
  id    = 'climate_care',
  type  = 'slider',
  label = "To what extent do you believe human-caused climate change is real?",
  option = c(
    "Don't Believe"    = "dont_believe",
    "Somewhat Believe" = "somewhat",
    "Neutral"          = "neutral",
    "Believe"          = "believe",
    "Strongly Believe" = "strongly_believe"
  )
)
```

#### Use `type = 'slider_numeric'` to specify a numeric slider input type:

```{r}
sd_question(
  id = 'slider_single_val',
  type = "slider_numeric",
  label = 'Single value example',
  option = seq(0, 10, 1)
)
```

#### `type = 'slider_numeric'` can also be used for range selection (2 numerics):

```{r}
sd_question(
  id = 'slider_range',
  type = "slider_numeric",
  label = 'Range example',
  option = seq(0, 10, 1),
  default = c(3, 7)
)
```

#### Use `type = 'date'` to specify a date input type:

```{r}
sd_question(
  id    = 'dob',
  type  = 'date',
  label = "What is your date of birth?"
)
```

#### Use `type = 'daterange'` to specify a daterange input type:

```{r}
sd_question(
  id    = 'hs_date',
  type  = 'daterange',
  label = "When did you start and finish high school?"
)
```

#### Use `type = 'matrix'` to specify a matrix input type:

```{r}
sd_question(
  id     = "car_preference",
  type   = "matrix",
  label  = "Please indicate your agreement with the following statements.",
  row    = c(
    "I'd like to buy a gasoline car." = "buy_gasoline",
    "I'd like to buy an EV." = "buy_ev"
  ),
  option = c(
    "Disagree" = "disagree",
    "Neutral"  = "neutral",
    "Agree"    = "agree"
  )
)
```

--- question_formatting

# Question formatting

> On this page, we'll demonstrate some of the formatting options for displaying questions.

#### Markdown is supported for question labels and options

The `label` for all question types and the `option` for all **multiple choice** types accept markdown formatting.

Here's an example of `mc` with markdown formatting:

```{r}
sd_question(
  id     = 'markdown_1',
  type   = 'mc',
  label  = "**This** is a question *label* supporting ***markdown***:",
  option = c(
    "*Italic option*" = "italic",
    "**Bold option**" = "bold",
    "***Bold italic option***" = "bold_italic"
  )
)
```

Here's an example of `mc_multiple` with markdown formatting:

```{r}
sd_question(
  id     = 'markdown_2',
  type   = 'mc_multiple',
  label  = "**This** is a question *label* supporting ***markdown***:",
  option = c(
    "*Italic option*" = "italic",
    "**Bold option**" = "bold",
    "***Bold italic option***" = "bold_italic"
  )
)
```

Here's an example of `mc_buttons` with markdown formatting:

```{r}
sd_question(
  id     = 'markdown_3',
  type   = 'mc_buttons',
  label  = "**This** is a question *label* supporting ***markdown***:",
  option = c(
    "*Italic option*" = "italic",
    "**Bold option**" = "bold",
    "***Bold italic option***" = "bold_italic"
  )
)
```

Here's an example of `mc_multiple_buttons` with markdown formatting:

```{r}
sd_question(
  id     = 'markdown_4',
  type   = 'mc_multiple_buttons',
  label  = "**This** is a question *label* supporting ***markdown***:",
  option = c(
    "*Italic option*" = "italic",
    "**Bold option**" = "bold",
    "***Bold italic option***" = "bold_italic"
  )
)
```

#### HTML is supported in `mc_buttons` and `mc_multiple_buttons`

HTML is also supported for options of `mc_buttons` and `mc_multiple_buttons`, so that you can insert mixed content including plain text, markdown, and HTML images. For example, here is a question with some complex labels for a choice question:

```{r}
# Define the option vector
html_buttons_option <- c("option_1", "option_2", "option_3")

# Change the names of each element to display markdown-formatted text 
# and an embedded image using html
names(html_buttons_option)[1] <- "**Option 1**<br>
    <img src='https://raw.githubusercontent.com/jhelvy/formr4conjoint/master/survey/images/fuji.jpg' width=100><br>
    **Type**: Fuji<br>
    **Price**: $ 2 / lb<br>
    **Freshness**: Average"
names(html_buttons_option)[2] <- "**Option 2**<br>
    <img src='https://raw.githubusercontent.com/jhelvy/formr4conjoint/master/survey/images/pinkLady.jpg' width=100><br>
    **Type**: Pink Lady<br>
    **Price**: $ 1.5 / lb<br>
    **Freshness**: Excellent"
names(html_buttons_option)[3] <- "**Option 3**<br>
    <img src='https://raw.githubusercontent.com/jhelvy/formr4conjoint/master/survey/images/honeycrisp.jpg' width=100><br>
    **Type**: Honeycrisp<br>
    **Price**: $ 2 / lb<br>
    **Freshness**: Poor"

sd_question(
  id     = 'html_buttons',
  type   = 'mc_buttons',
  label  = "A sample survey question using `mc_buttons`",
  option = html_buttons_option
)
```

#### Use the `width` argument to change the width for the question:

```{r}
sd_question(
  id    = "change_width",
  type  = "textarea",
  label = "This text area has width set as 40%:",
  width = "40%"
)
```

--- end

## Thanks for taking our survey!

```{r}
sd_close()
```