In timelyportfolio/sortableR: Drag-and-Drop in 'shiny' Apps with 'SortableJS'

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!

# 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:

# 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 = ...):

# 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
  )
)