coding_club.Rmd

---
title: "Coding Club"
---

Coding club is meant to build coding skills in R, HTML, CSS, and JavaScript. You don't need to have any experience apart from basic R. If you can complete the [intro shiny tutorial](01-first-app.html) then you should be fine.

## Database App

In autumn 2021, we'll be making a custom web app for searching, visualising and updating a list of anything you're interested in. The focus will be learning by doing, but the sessions will be supported by material from [Building Web Apps with R Shiny](https://debruine.github.io/shinyintro/).

### 1. Setting Up the Framework 

2021-10-06 14:00 (Europe/London)

Before the session:

1. Check out the [demo app](https://shiny.psy.gla.ac.uk/debruine/seen/)
2. Bookmark the [book](https://debruine.github.io/shinyintro/)
3. Install the {shinyintro} package

```{r, eval = FALSE}
# you may have to install devtools first with 
# install.packages("devtools")

devtools::install_github("debruine/shinyintro")
```

In this first session, we:

* created a project with the demo shiny app
* discussed the structure of a shiny app 
* added a new sliderInput widget for binwidth and changed the plot to a ggplot

Resources:

* [session recording](https://uofglasgow.zoom.us/rec/share/uaZUUUVZfDRK-frdddapJ1ISfZcLSQa9ycRmU_6xVaA9h_A_orkqgayH8nHexNPD.0WQv5U5sm5Zpt3dp?startTime=1633524211000) (contact Lisa for the password)
* zip file with the [code for our  progress](files/demoapp.zip)


### 2. Reading Data from a GoogleSheet

2021-10-20 14:00 (Europe/London)

Before the session:

* make sure you have the R packages shiny, shinydashboard, and tidyverse (these will already be installed if you installed the shinyintro package as mentioned in week 1)

In this second session, we will:

* make a Google form to collect data about something fun
* set up the UI (user interface) for our app

### 3. Visualising Data

2021-11-03 14:00 (Europe/London)

In this third session, we ill:

* create an interactive plot that visualises the form data

### 4. Writing Data to a GoogleSheet

2021-11-17 14:00 (Europe/London)

### 5. Filtering Data

2021-12-01 14:00 (Europe/London)

### 6. Make it Pretty

2021-12-15 14:00 (Europe/London)

---------

# Past Sessions

## Distribution Simulation App

### 1. Setting Up the Framework 

2021-05-12 14:00 (Europe/London)

1. Check out the [demo app](https://shiny.psy.gla.ac.uk/debruine/simulate/)
1. Download the [template](https://github.com/debruine/shiny_template)
1. You can access the code for the final app at <https://github.com/debruine/shiny_apps/tree/master/simulate>

In this first session, we:

* discussed the structure of a shiny app 
* created inputs for a random uniform distribution (`runif()`)
* generated random data with the input parameters and created a plot
* output the plot

To prep for the next meeting, I'd like you to:

* create another tab with inputs and a plot for the normal distribution
* make your ggplot prettier (e.g., set colour and fill for the histogram)

Resources:

* [session recording](https://uofglasgow.zoom.us/rec/share/9xNKJg3banlJUPXMZ_aNwMdfnGl1bnkUUjiWEpShdzLhaybDHbUDVxZGcC8w3drC.SqVu7wB77G2fQAqR) (contact Lisa for the password)
* zip file with the [code for our  progress](files/sim1.zip)

### 2. Input checking

2021-05-26 14:00 (Europe/London)

In this second session, we added the normal distribution tab, used a fluidRow to put the plot next to the input, and learned how to check the user input for errors, such as impossible values, and handle these without crashing.

To prep for the next meeting, I'd like you to:

* add error checking for the normal distribution tab
* create another tab with inputs and a plot for the binomial distribution

Resources:

* [session recording](https://uofglasgow.zoom.us/rec/share/9e33zZ_xdL9vaqrD1pMBxb7ENKW0H3VldCo2WU5u6weNZ1VTVDMawQecMaKcS2S8.z1TCqr0zV1Ab-ofy) (contact Lisa for the password)
* zip file with the [code for our  progress](files/sim2.zip)

### 3. Distribution comparisons

2021-06-09 14:00 (Europe/London) [Zoom link](https://uofglasgow.zoom.us/j/93838448011)

In this third session, we restructured the simulation functions to keep a record of previously simulated data to make faceted plots for comparison. We learned a lot about debugging. 

The video ends with an unresolved bug. The resolution is to make sure that `input$unif_submit` is definitely an integer when you add it to the data table. I really don't know why this fixes it. So the relevant code in the `observeEvent()` function for `unif_submit` should be:

```{r, eval = FALSE}
data <- data.frame(
    x = x,
    sample = as.integer(input$unif_submit),
    n = input$unif_n,
    min = input$unif_min,
    max = input$unif_max
)
```

To do:

* Update the norm and binomial functions to display multiple plots
* Make your ggplots prettier
* Make it handle plots with different parameters well. You can either give all facets the same values, or set the axes to vary by facet (or you can give users the option to choose which)
* Think about how you'd want to visualise these distributions and create your own interface options

Resources:

* [session recording](https://uofglasgow.zoom.us/rec/share/oQJCmOuAx4TJkZMiEWH6V0Q66921trhkgLMoB0bkIHUnuFgL-_DZrGnAaWvtKW3W.lpgRRxeV6B4wRmrs) (contact Lisa for the password)
* zip file with the [code for our  progress](files/sim3.zip)

## Buzzfeed-style App

### 1. Setting Up the Framework 

2021-03-17 14:00 (Europe/London)

1. Check out the [demo app](https://shiny.psy.gla.ac.uk/debruine/coding_club/)
1. Download the [template](https://github.com/debruine/shiny_template)
1. You can access the code for the final app at <https://github.com/PsyTeachR/shiny-tutorials/tree/master/coding_club>

In this first session, we:

* discussed the structure of a shiny app 
* edited the main tab to have a collapsible box for each question 
* added six custom image buttons for the first question
* wrote a function to more easily set up a custom image button
* edited the www/custom.css file to remove the background and padding from the custom image buttons

To prep for the next meeting, I'd like you to:

* decide what your quiz theme and questions will be
* find images for each question ([Pixabay](https://pixabay.com) is a good site for open-access images)
* set up a few questions with image buttons
* Edit the info tab to include image citation information

The password for the [session recording](https://uofglasgow.zoom.us/rec/share/lTH8SniBrkm3PilcTG0I0_KlSNqVnWNelq_4A5vE-VQ9h9_IECoNHjfdo30of_q9.0UOkISRJLtYCX0wA) is on the coding club channel of the Methods and MetaScience Team. Contact Lisa to be added if you're at Glasgow, or to ask for the password if you're not.

You can download a zip file with the [code for our current progress](files/quiz1.zip).

### 2. Button Actions

2021-03-31 14:00 (Europe/London)

In this second session, we:

* used CSS to set the style of selected and unselected buttons
* used `observeEvent()` to change the style of buttons when clicking on them
* wrote a custom function to do this for all image buttons, using their question number and colour name

To prep for the next meeting, I'd just like you to:

* get your app caught up to the same place we left off (all image buttons displaying the correct outlines when you click on them)
* try out a few other input options for the final question, like [`selectInput()`](https://shiny.rstudio.com/reference/shiny/1.6.0/selectInput.html), 
[`radioButtons()`](https://shiny.rstudio.com/reference/shiny/1.6.0/radioButtons.html), 
[`textInput()`](https://shiny.rstudio.com/reference/shiny/1.6.0/textInput.html), or
[`sliderInput()`](https://shiny.rstudio.com/reference/shiny/1.6.0/sliderInput.html).

Resources:

* [session recording](https://uofglasgow.zoom.us/rec/share/PAjIgwcdRBVNATStImFEeLQzmg3m6YGxjYZ8_Y3kjh1bYGPoeDVQvBDrOc4vzi3q.sHHPrI5czz3904RM)
* zip file with the [code for our current progress](files/quiz2.zip)

### 3. Outputs

2021-04-14 14:00 (Europe/London)

In this third session, we:

* updated the custom function `Q()` to close the current question box and open the next one
* created a new feedback tab and added it to the UI
* used `observeEvent()` to respond to clicking the submit button
* used `reactiveValues()` to create values for saving the image button answers and plot
* made a feedback plot with `outputPlot()` and `renderPlot()` that creates a plot from the quiz answers

To prep for the next meeting, I'd like you to:

* make your feedback plot nicer, especially thinking about font sizes
* if you want further challenge, add feedback text in addition to the plot using `textOutput()` and `renderText()`

Resources:

* [session recording](https://uofglasgow.zoom.us/rec/share/hFnvznxyycp41nc6vCjGNXFA0W39s2yLQ3AikPlyXXCJP3LorWtzsE1jW90COms.4D1tvi9ZqlnX25wf)
* zip file with the [code for our current progress](files/quiz3.zip)

### 4. Saving Data

2021-04-28 14:00 (Europe/London)

In this fourth session, we:

* Added a button to allow participants to save their data
* added conditional properties so the button could only be used once, after the quiz was completed
* Learned to save data in a CSV file
* Read the full data from the saved file and created a feedback visualisation
* Discussed pros and cons of local storage of saved data

Resources:

* [session recording](https://uofglasgow.zoom.us/rec/share/gNGYoC65CziY_pcmEi03PXCwbu30bLueCKkJOuiK5qzqdgNxQGQmMhFGbPUyItJR.Rkivv76FW8oDwR7a)
* [persistent data storage in Shiny](https://shiny.rstudio.com/articles/persistent-data-storage.html)
* zip file with the [code for our final progress](files/quiz4.zip)