Intro to surveydown

]

# Week 4: .fancy[Intro to surveydown]

### <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:white;overflow:visible;position:relative;"><path d="M243.4 2.6l-224 96c-14 6-21.8 21-18.7 35.8S16.8 160 32 160v8c0 13.3 10.7 24 24 24H456c13.3 0 24-10.7 24-24v-8c15.2 0 28.3-10.7 31.3-25.6s-4.8-29.9-18.7-35.8l-224-96c-8-3.4-17.2-3.4-25.2 0zM128 224H64V420.3c-.6 .3-1.2 .7-1.8 1.1l-48 32c-11.7 7.8-17 22.4-12.9 35.9S17.9 512 32 512H480c14.1 0 26.5-9.2 30.6-22.7s-1.1-28.1-12.9-35.9l-48-32c-.6-.4-1.2-.7-1.8-1.1V224H384V416H344V224H280V416H232V224H168V416H128V224zM256 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg> EMSE 6035: Marketing Analytics for Design Decisions
### <svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:white;overflow:visible;position:relative;"><path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z"/></svg> John Paul Helveston
### <svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:white;overflow:visible;position:relative;"><path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192H400V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192z"/></svg> September 18, 2024

]

---

# .center[**Reminders**]

# Proposals due Sunday, 9/22 by midnight

<br>

# Next week project workshop:<br>team meetings & proposal feedback

---

# Week 4: .fancy[Intro to surveydown]

### 1. surveydown basics
### 2. Connect a database
### 3. Make it live

### BREAK

### 4. Conjoint survey components

---

# Week 4: .fancy[Intro to surveydown]

### 1. .orange[surveydown basics]
### 2. Connect a database
### 3. Make it live

### BREAK

### 4. Conjoint survey components

---

# 1. Open `demoSurvey.Rproj`

# 2. Open `demoSurvey.qmd`

# 3. Click "Run Document"

---

# Four parts to a surveydown survey

1. The YAML header
2. The setup code chunk
3. The survey body
4. The server code chunk

]

]

---

## 1. YAML Header

The YAML header is at the top of the `.qmd` file.

**Must contain at least the following**:

``` yaml
---
server: shiny
filters: [surveydown]
---
```

Update / install the extension:

``` r
surveydown::sd_update_extension()
```

---

## Change the survey theme

Pick a different [bootswatch theme](https://bootswatch.com) with the `theme` key:

``` yaml
---
theme: united 
---
```

]

Make a custom theme with a `custom.scss` file

``` yaml
---
theme: [united, custom.scss]
---
```

]

---

## Progress bar

You can modify the survey progress bar with the `barcolor` and `barposition` keys:

Change to any color with `barcolor`:

``` yaml
---
barcolor: #768692 
---
```

]

Change position: `top`, `bottom`, or `none`

``` yaml
---
barposition: bottom
---
```

]

---

## 2. Setup code chunk

First chunk:

- Load libraries 
- Connect to database

Ignore this for now:

`ignore = TRUE`

]

````markdown
```{r}
#| echo: fenced
#| context: setup
#| warning: false
#| message: false

# Load the package
library(surveydown)

# Load an other packages here

# Run initial setup function (essential - do not delete)
sd_setup()

# Setup database connection
db <- sd_database(
  host   = "",
  dbname = "",
  port   = "",
  user   = "",
  table  = "",
  ignore = TRUE
)
```
````

]

---

## 3. Survey body

This is where you insert pages, text, images, questions, etc.

---

# Inserting pages

Insert new pages with `:::` symbols, like this

``` r
::: {#page_name .sd-page}

Page content here

:::
```

Insert next buttons with the `sd_next()` function, like this

````markdown
```{r}
sd_next('next_page_name')
```
````

---

# Inserting questions

Insert questions using the `sd_question()` function, like this:

**Code**

``` r
sd_question(
  type   = 'mc',
  id     = 'fruit',
  label  = "1. Do you like fruit?",
  option = c(
    'Yes!'    = 'yes',
    'Kind of' = 'kind_of',
    'No :('   = 'no'
  )
)
```

]

**Output**

<div id="container- fruit" data-question-id="fruit" class="question-container" oninput="Shiny.setInputValue('fruit_interacted', true, {priority: 'event'});">
<div id="fruit" style="width:100%;" class="form-group shiny-input-radiogroup shiny-input-container" role="radiogroup" aria-labelledby="fruit-label">
<label class="control-label" id="fruit-label" for="fruit"><ol>
<li>Do you like fruit? <span class='required-asterisk' style='display:none; color: red; font-size: 1.5em; vertical-align: middle; position: relative; top: 0.1em;'>*</span></li>
</ol>
</label>
<div class="shiny-options-group">
<div class="radio">
<label>
<input type="radio" name="fruit" value="yes"/>
<span>Yes!</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="fruit" value="kind_of"/>
<span>Kind of</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="fruit" value="no"/>
<span>No :(</span>
</label>
</div>
</div>
</div>
</div>

]

---

## surveydown supports lots of [question types](https://surveydown.org/question-types)

Some common types you may want to use:

Type | Description
-----|---------------------
`mc` | Multiple choice question (single choice) 
`mc_multiple` | Multiple choice question (multiple choices) 
`mc_buttons` | Multiple choice question (large buttons)
`select` | Drop down menu (choose one)
`text` | Open text, single row
`textarea` | Open text, block

---

# Embedding images

I recommend just writing html code, like this

``` html
<img src="https://github.com/emse-madd-gwu/2024-Fall/blob/main/images/logo.png?raw=true" width=250>
```

---

# Centered image

I recommend just writing html code, like this

``` html
<center>
<img src="https://github.com/emse-madd-gwu/2024-Fall/blob/main/images/logo.png?raw=true" width=250>
</center>
```

---

# The server code chunk

- Set up custom configurations, like skip logic.
- Launch the main server (`sd_server()` function).

---

# Enabling conditional actions

Use the `sd_config()` function to add conditional actions, like conditionally _showing_ something or conditionally _skipping_ to a page.

This is in the server code chunk of `demoSurvey.qmd`

``` r
config <- sd_config(
  skip_if = tibble::tribble(
    ~question_id, ~question_value, ~target, 
    'pill_color', 'blue',          'end'
  ), 
  show_if = tibble::tribble(
    ~question_id, ~question_value, ~target, 
    'fruit',      'yes',          'fav_fruit', 
    'fruit',      'kind_of',      'fav_fruit'
  ), 
)
```

---

## Conditional skipping

If they choose "Blue", skip to the end page

``` r
config <- sd_config(
* skip_if = tibble::tribble(
*   ~question_id, ~question_value, ~target,
*   'pill_color', 'blue',          'end'
* ),
  show_if = tibble::tribble(
    ~question_id, ~question_value, ~target, 
    'fruit',      'yes',          'fav_fruit', 
    'fruit',      'kind_of',      'fav_fruit'
  ), 
)
```

---

## Conditional showing

The "What's your favorite fruit" question will only be shown if they choose "Yes" or "Kind of" for the "Do you like fruit" question

``` r
config <- sd_config(
  skip_if = tibble::tribble(
    ~question_id, ~question_value, ~target, 
    'pill_color', 'blue',          'end'
  ), 
* show_if = tibble::tribble(
*   ~question_id, ~question_value, ~target,
*   'fruit',      'yes',          'fav_fruit',
*   'fruit',      'kind_of',      'fav_fruit'
* ),
)
```

---

## Your turn

- Open and edit the `practiceSurvey.qmd` file.
- Pick a topic for your survey (a food, an animal, a sports team...whatever).
- Draft a survey about that topic. Include the following:
    - Page 1: A welcome message in large font ("Welcome to a survey about [topic]") and an image about the topic (find an image somewhere).
    - Page 2: Add one simple multiple choice question about the topic and another that will only display depending on a specific choice in the first question
    - Pages 3 & 4: These pages should be two different "end" conditions. Respondents should be sent to either page based on their choices in the multiple choice question on page 2.
    
---

# Week 4: .fancy[Intro to surveydown]

### 1. surveydown basics
### 2. .orange[Connect a database]
### 3. Make it live

### BREAK

### 4. Conjoint survey components

---

## Store data in [Supabase](https://supabase.com/)

Steps to connect a database via Supabase:

1. Create a Supabase account
2. Create a Supabase project
3. Copy your credentials

---

## Creating a project

]

- Choose a project name (this is your "database")
- Each database can have multiple tables
- Choose a strong password

]

---

## Set a password with `sd_set_password()`

To access your database from R, you need to securely store your Supabase password.

Do this in your R console like this:

``` r
sd_set_password("my_password")
```

This creates a `.Renvion` file in your project directory where your password lives. **Don't modify this file!**

```
SURVEYDOWN_PASSWORD=my_password
```

---

## Copy your credentials

Go to **Project Settings** in bottom-left corner, then click **Database** under **Configuration**

Get your **Connection parameters**:

]

- Put them in your server code chunk.
- Choose any table name you want to store your data.

``` r
db <- sd_database(
  host   = "",
  dbname = "",
  port   = "",
  user   = "",
  table  = "any_table_name"
)
```

]

---

## Your turn

- Create a Supabase account and database
- Copy your parameters into your `practiceSurvey.qmd` file.
- Click "Run Document" and check that the database table is updating in your Supabase table.

---

# .fancy[Break]

---

# Week 4: .fancy[Intro to surveydown]

### 1. surveydown basics
### 2. Connect a database
### 3. .orange[Make it live]

### BREAK

### 4. Conjoint survey components

---

# Follow [instructions](https://surveydown.org/deployment) on surveydown.org

---

# Week 4: .fancy[Intro to surveydown]

### 1. surveydown basics
### 2. Connect a database
### 3. Make it live

### BREAK

### 4. .orange[Conjoint survey components]

---

# 3 Parts

<br>

- ### **Part 1**: Intro
- ### **Part 2**: Conjoint questions
- ### **Part 3**: Other / demographic questions

---

# 3 Parts

<br>

- ### **Part 1**: Intro --> .red[screen for target population]
- ### **Part 2**: Conjoint questions --> .red[screen for random answers]
- ### **Part 3**: Other / demographic questions

---

# .center[Think of your survey as a _conversation_]

<br>

- Include "transition" pages (e.g. Great job! Now we'll ask you about...)

---

# **Part 1**: Intro

---

# Start with a welcome page

---

# Consent form

]

]

---

## **Eligibility questions**: who is your target population?

### .red[_Filter out respondents here_]

---

# **Part 2**: Conjoint questions

---

# Education information

---

# Education information

]

]

---

## .center[Can be helpful to provide relative comparisons]

Weight:

- 1/2 lbs (similar to 1 cup water)
- 8 lbs (similar to 1 gallon of milk)

---

# Conjoint intro

---

## Practice conjoint (also attention check)

### .red[_May also filter out respondents here_]

---

# Transition to actual conjoint questions

---

# Conjoint questions

### .red[_May also filter out respondents at the end_]

(e.g. chose all same answers)

]

]

---

# **Part 3**: Other / demographic questions

---

# Transition

---

# Critical respondent information

---

class: center
 
# Demographic / other questions
 
<center>
<img src="images/11demo.png" width=500>
</center>

---

# Finale

---

# [Blog post on conjoint in surveydown](https://surveydown.org/blog/2024-08-28-choice-based-conjoint-surveys-with-surveydown/)

# [Project survey plan](https://madd.seas.gwu.edu/2024-Fall/project/2-survey-plan.html)

# Sign up for meeting slot next week<br>(link in #project channel)