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.
Also try the reverse order!
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
)
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
)
)