Widgets

Your Turn

1. Open demos/widgets/mathjax/index.Rmd
2. Slidify and Open index.html

You can experiment by adding other equations.

Your Turn

Basic

1. Open demos/widgets/quiz/index.Rmd
2. Slidify and Open index.html

Intermediate

You can find more question types here. Press p on any slide to get the Rmd source, paste it in your index.Rmd file and see how it works.

Use the author function to initialize a slidify deck folder

author('interactive')

Let us start by creating a quiz question, the usual way we do.

---
## Question 1

What is 1 + 1?

1. 1
2. 2
3. 3
4. 4

hint

This is a hint

explanation

This is an explanation

First, we need to add the quiz widget and the bootstrap widget to the YAML front matter. This will allow the document to take advantage of the interactivity provided by the quiz widget, and the styling provided by the bootstrap widget.

widgets    : [bootstrap, quiz]

Second, we need to add some markup to the slide that will allow slidify to transform it into an interactive question.

--- &radio
## Question 1

What is 1 + 1?

1. 1
2. _2_
3. 3
4. 4

*** .hint
This is a hint

*** .explanation
This is an explanation

We will now add an interactive chart to the document using the package rCharts, and the javascript charting library nvd3. As before, we first need to add nvd3 as a widget in the YAML front matter. However, since nvd3 does not ship with slidifyLibraries, we will add it as an external widget.

ext_widgets: {rCharts: [libraries/nvd3]}

We now add the slide with a knitr code chunk that creates the plot.

---
## Interactive Chart

``{r echo = F, results = 'asis'}
require(rCharts)
haireye = as.data.frame(HairEyeColor)
n1 <- nPlot(Freq ~ Hair, group = 'Eye', type = 'multiBarChart',
  data = subset(haireye, Sex == 'Male')
)
n1show('inline')
```

Run slidify on the document, and you will see an interactive NVD3 plot with some nice controls.

Next, we will add an interactive console to our document. It allows the user to execute R code right inside the document, and see the resulting output. This is a very useful feature for pedagogical purposes, where you want to provide executable examples right inside a tutorial. Adding an interactive console is even easier than the quiz.

As before, we first add the shiny and interactive widgets to the list of widgets in the YAML front matter.

widgets    : [bootstrap, quiz, shiny, interactive]

We markup the slide and a knitr code chunk to instruct slidify to treat it as an interactive code chunk.

--- &interactive
## Interactive Console

``{r opts.label = 'interactive', results = 'asis'}
require(googleVis)
M1 <- gvisMotionChart(Fruits, idvar = 'Fruit', timevar = 'Year')
print(M1, tag = 'chart')
```

Finally, we will use Shiny to add interactive controls to the chart we created previously. Suppose that we want to control Sex and the type of plot. Let us first add the UI. slidifyUI behaves almost like shinyUI except that it outputs a character vector.

```{r opts.label = 'shiny'}
slidifyUI(
  sidebarPanel(
    selectInput('sex', 'Choose Sex', c('Male', 'Female')),
    selectInput('type', 'Choose Type',
      c('multiBarChart', 'multiBarHorizontalChart')
    )
  ),
  mainPanel(
    tags$div(id = 'nvd3plot', class='shiny-html-output nvd3 rChart')
  )
)
`` `

We now need to add a plotting function to the server side. runDeck is set up so that any R file in the apps directory that starts with app will be automatically sourced into shinyServer. Hence, let us create an apps directory and add the following code the app1.R.

Note that the code is almost identical to what we used previously, except that now the Sex and type of chart are not hardcoded, and instead being controlled by the UI.

require(rCharts)
output$nvd3plot <- renderChart({
  haireye = as.data.frame(HairEyeColor)
  n1 <- nPlot(Freq ~ Hair, group = 'Eye', type = input$type,
    data = subset(haireye, Sex == input$sex)
  )
  n1$set(dom = 'nvd3plot', width = 600)
  n1
})