Script for interactivity in bookdown::bs4_book vs bookdown::gitbook - r

Question

I am interested in incorporating a simple, radio button-style quiz in a bookdown::bs4_book environment. I have a minimal example below that works when I specify bookdown::gitbook in the header, but stops working when I choose bookdown::bs4_book. Does anyone have any ideas how to get this working with the bookdown::bs4_book option?
(note: the .Rmd code below needs to be saved as "index.Rmd" in order to be knitted using bs4_book.)
Thank you,
Luke
---
title: "formative_test"
site: bookdown::bookdown_site
output:
# bookdown::gitbook:
bookdown::bs4_book:
css: [style.css, font-awesome.min.css]
repo: https://github.com/rstudio/bookdown-demo
---
# Chapter 1
```{r results = "asis", echo = FALSE}
question <- function(question, distractors, correct, no, fb = "", print_question = TRUE){
allanswers <- c(distractors, correct)[sample.int(length(distractors)+1)]
correctanswer <- which(allanswers == correct)
answercode <- paste0(sapply(1:length(allanswers), function(i){
x <- allanswers[i]
paste0('<div class="radio">\n <label>\n <input type="radio" name="question', no, '" id="opt', i,'" value="', i, '" onchange="check_answer', no, '()">\n ', x, '\n </label>\n</div>')
}), collapse = "\n\n")
out <- paste0(question, "\n\n", answercode,
'<div class="collapse" id="collapseExample', no,'">
<div class="card card-body" id="answerFeedback', no, '">
</div>
</div>',
paste0('<script type="text/javascript">
function check_answer', no, '()
{
var radioButtons', no, ' = document.getElementsByName("question', no, '");
document.getElementById("answerFeedback', no, '").innerHTML = "Try selecting an answer!!";
for(var i = 0; i < radioButtons', no, '.length; i++)
{
if(radioButtons', no, '[i].checked == true)
{
var feedback', no, ' = "<p style=\'color:red\'>Wrong', ifelse(fb == "", ".", paste0("; ", fb)), '</p>";
if(radioButtons', no, '[i].value == "', correctanswer, '") {
feedback', no, ' = "<p style=\'color:green\'>Correct!</p>"
}
document.getElementById("answerFeedback', no, '").innerHTML = feedback', no, ';
return true;
}
}
}
</script>
'))
if(print_question){
cat(out)
} else {
return(out)
}
}
questionnaire <- function(x, shuffle = TRUE, print_question = TRUE){
if(inherits(x, "character")) x <- read.csv(x, stringsAsFactors = FALSE, fileEncoding="UTF-8-BOM")
if(!all(names(x) == c("question", "distractors", "correct", "fb"))){
stop("Incorrect column names")
}
if(shuffle){
x <- x[sample.int(nrow(x)), ]
}
out <- ""
for(i in 1:nrow(x)){
out <- paste0(out,
"**Question ",
i,
":**\n",
question(question = x$question[i],
distractors = eval(parse(text = x$distractors[i])),
correct = x$correct[i],
no = i,
fb = ifelse(is.na(x$fb[i]), "", x$fb[i]),
print_question = FALSE),
"\n\n"
)
}
if(print_question){
cat(out)
} else {
return(out)
}
}
questionnaire(
x = data.frame(
question = "True or False?",
distractors = "\"FALSE\"",
correct = TRUE,
fb = "here is some example feedback"
)
)