---
title: "Using ranking questions in learnr"
author: Andrie de Vries
date: "`r Sys.Date()`"
output: learnr::tutorial
runtime: shiny_prerendered
---

```{r setup, include=FALSE}
library(learnr)
library(sortable)
library(magrittr)
```

## Introduction

The `sortable` package allows you to create custom HTML widgets with drag-and-drop capability. As a motivating example, the package exports a function `question_rank()` that lets you design `learnr` quizzes with drag-and-drop questions.

### Example

**Also try the reverse order!**

```{r insects-demo, echo=FALSE}
# Define the answer options
insects <- c(
    "ant",
    "bumble bee",
    "cricket",
    "dragonfly"
  )

# Initialize the question
question_rank(
  "Sort these insects in alpabetical order:",
  answer(insects, correct = TRUE),
  answer(rev(insects), correct = FALSE,
         message = "You sorted in reverse order!"
         ),
  allow_retry = TRUE
)
```

## Creating a ranking question

To insert a ranking question into a `learnr` quiz, use `question_rank()`. Note that, unlike standard `learnr` questions, ranking questions will by default randomize the order of the answer options.

You must provide at least one correct answer, using the `learnr` `answer()` function:

```{r insects-code}
# Define the answer options
insects <- c(
    "ant",
    "bumble bee",
    "cricket",
    "dragonfly"
  )

# Initialize the question
question_rank(
  "Sort these insects in alpabetical order:",
  answer(insects, correct = TRUE),
  answer(rev(insects), correct = FALSE, message = "Other direction!"),
  allow_retry = TRUE
)
```

## Changing the 'SortableJS' options

You can change the behaviour of the HTML widget by sending different options to the `SortableJS` library. For example, to change the duration of animation, set `sortable_options(animation = ...)`:

```{r insects-code-options}
# Define the answer options
insects <- c(
    "ant",
    "bumble bee",
    "cricket",
    "dragonfly"
  )

# Initialize the question
question_rank(
  "Sort these insects in alpabetical order:",
  answer(insects, correct = TRUE),
  answer(rev(insects), correct = FALSE, message = "Other direction!"),
  allow_retry = TRUE,
  options = sortable_options(
    animation = 150
  )
)
```
