In reference to a persistent issue after this question Hide/Show in shinyjs not working when videos are randomized was answered.
Basically, I need to randomize whether one of three videos plays in a multi-page app. The end of the video will trigger a radioButton to appear, which allows the user to move to the next page.
Here's a working example of what I need to do:
library(shiny)library(shinyjs)library(shinyWidgets)library(htmlTable)#install.packages("remotes")library(remotes)#remotes::install_github("limnotrack/rdrop2")library(rdrop2)library(DT)library(dplyr)###UIui <- fluidPage( tags$head( #tags$script(jscode), tags$style("p{font-family:Arial;font-size:14px;width:95%;margin:auto;}"), ## Makes text in tables narrow so they fit the page. "Fixed" forces each ## each cell to have constant width so 100% doesn't take up more space. tags$style(HTML('table {font-family:Arial Narrow;table-layout:fixed;}' # td {width: 2.9em;overflow: hidden;} ))), br(), uiOutput("MainAction"), br(), uiOutput("previousbutton", inline = TRUE), uiOutput("nextbutton", inline = TRUE), useShinyjs())server <- function(input, output, session) { b=2 question <- reactiveValues(i = -b) vec2 <- c(1,2) arm_condition <- sample(vec2,1) if (arm_condition == 1){ output$video <- renderUI({ HTML('<html><body><iframe id="my-iframe" width="560" height="315" src="https://www.youtube.com/embed/-CrOeCzMFSQ?si=3pKfFn_AnvVXKASX?&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><script type="text/javascript"> var tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName("script")[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { player = new YT.Player("my-iframe"); player.addEventListener("onStateChange", function(state){ if (state.data === 0) { document.getElementById("instructions").classList.remove("shinyjs-hide"); } }); } </script></body></html>' ) }) } if (arm_condition == 2){ output$video <- renderUI({HTML('<html><body><iframe id="my-iframe" width="560" height="315" src="https://www.youtube.com/embed/HlYFfFUdPcw?si=JjH8nwsKw07zkbkk?&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><script type="text/javascript"> var tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName("script")[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { player = new YT.Player("my-iframe"); player.addEventListener("onStateChange", function(state){ if (state.data === 0) { document.getElementById("instructions").classList.remove("shinyjs-hide"); } }); } </script></body></html>' )})} if (arm_condition == 3){ output$video <- renderUI({HTML('<html><body><iframe id="my-iframe" width="560" height="315" src="https://www.youtube.com/embed/KRf7KD1f_E8?si=YdlEhKaISIcnwXcw?&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><script type="text/javascript"> var tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName("script")[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { player = new YT.Player("my-iframe"); player.addEventListener("onStateChange", function(state){ if (state.data === 0) { document.getElementById("instructions").classList.remove("shinyjs-hide"); } }); } </script></body></html>' )})} ## Next and previous buttons #### observeEvent(input$previousquestion, {question$i <- ifelse( question$i < b & question$i != 1,max(question$i - 1, -b), question$i)}) ##now: conditions for when people can hit "next" observeEvent(input$nextquestion, {if( (question$i == -b & length(input$first_page) > 0) | (question$i == (-b + 1) & length(input$instructions) > 0)) question$i <- min(question$i+1, b) }) ## Previous button: Grayed out on first page, first q, and after submission output$previousbutton <- renderUI({ actionButton("previousquestion", icon=icon("angle-left"), label="Previous", style = if (question$i > -b & question$i <= b & question$i != 1)"color: #000" else "color: #aaa") }) output$nextbutton <- renderUI({ actionButton("nextquestion", icon=icon("angle-right"), label="Next", style=if ( (question$i == -b & length(input$party) > 0) | (question$i == (-b + 1) & length(input$instructions) > 0))"color: #000" else "color: #aaa") }) ##APP output$MainAction <- renderUI({ dynamicUi() }) dynamicUi <- reactive({ if (question$i==-b) { return(list( radioButtons("first_page", "This is the first page.", choices = list("Okay, cool" = 'ok'), width = '100%', selected = character(0)) )) } if (question$i==-b+1){ return(div(fluidPage( # HTML('<iframe width="560" height="315" src="https://www.youtube.com/embed/-CrOeCzMFSQ?si=3pKfFn_AnvVXKASX" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'), useShinyjs(), #uiOutput("video1"), br(), # p("."), useShinyjs(), uiOutput("video"), hidden( radioButtons("instructions","Have you finished watching the instructions?", choices = list("Yes" = 'finished_instructions' ), width = '100%', selected = character(0) ) ) ))) }})}shinyApp(ui, server)However, I've discovered that when I attempt to store ANY survey data via rdrop2, the radioButtons no longer appear at the end of the video. The code I've been debugging that produces this error is below.
The video plays and is randomized, but the radioButton does not populate at the end of the video.
library(shiny)library(shinyjs)library(shinyWidgets)#library(htmlTable)#install.packages("remotes")library(remotes)#remotes::install_github("limnotrack/rdrop2")library(rdrop2)library(DT)library(dplyr)token <- drop_auth() # only to be runlocallysaveRDS(token, "droptoken.rds") # only to be runlocally###UIui <- fluidPage( tags$head( #tags$script(jscode), tags$style("p{font-family:Arial;font-size:14px;width:95%;margin:auto;}"), ## Makes text in tables narrow so they fit the page. "Fixed" forces each ## each cell to have constant width so 100% doesn't take up more space. tags$style(HTML('table {font-family:Arial Narrow;table-layout:fixed;}' # td {width: 2.9em;overflow: hidden;} ))), br(), uiOutput("MainAction"), br(), uiOutput("previousbutton", inline = TRUE), uiOutput("nextbutton", inline = TRUE), useShinyjs())server <- function(input, output, session) { b=2 question <- reactiveValues(i = -b) vec2 <- c(1,2) arm_condition <- sample(vec2,1) if (arm_condition == 1){ output$video <- renderUI({ HTML('<html><body><iframe id="my-iframe" width="560" height="315" src="https://www.youtube.com/embed/-CrOeCzMFSQ?si=3pKfFn_AnvVXKASX?&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><script type="text/javascript"> var tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName("script")[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { player = new YT.Player("my-iframe"); player.addEventListener("onStateChange", function(state){ if (state.data === 0) { document.getElementById("instructions").classList.remove("shinyjs-hide"); } }); } </script></body></html>' ) }) } if (arm_condition == 2){ output$video <- renderUI({HTML('<html><body><iframe id="my-iframe" width="560" height="315" src="https://www.youtube.com/embed/HlYFfFUdPcw?si=JjH8nwsKw07zkbkk?&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><script type="text/javascript"> var tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName("script")[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { player = new YT.Player("my-iframe"); player.addEventListener("onStateChange", function(state){ if (state.data === 0) { document.getElementById("instructions").classList.remove("shinyjs-hide"); } }); } </script></body></html>' )})} if (arm_condition == 3){ output$video <- renderUI({HTML('<html><body><iframe id="my-iframe" width="560" height="315" src="https://www.youtube.com/embed/KRf7KD1f_E8?si=YdlEhKaISIcnwXcw?&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><script type="text/javascript"> var tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName("script")[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { player = new YT.Player("my-iframe"); player.addEventListener("onStateChange", function(state){ if (state.data === 0) { document.getElementById("instructions").classList.remove("shinyjs-hide"); } }); } </script></body></html>' )})} ## Next and previous buttons #### observeEvent(input$previousquestion, {question$i <- ifelse( question$i < b & question$i != 1,max(question$i - 1, -b), question$i)}) ##now: conditions for when people can hit "next" observeEvent(input$nextquestion, {if( (question$i == -b & length(input$first_page) > 0) | (question$i == (-b + 1) & length(input$instructions) > 0)) question$i <- min(question$i+1, b) }) ## Previous button: Grayed out on first page, first q, and after submission output$previousbutton <- renderUI({ actionButton("previousquestion", icon=icon("angle-left"), label="Previous", style = if (question$i > -b & question$i <= b & question$i != 1)"color: #000" else "color: #aaa") }) output$nextbutton <- renderUI({ actionButton("nextquestion", icon=icon("angle-right"), label="Next", style=if ( (question$i == -b & length(input$party) > 0) | (question$i == (-b + 1) & length(input$instructions) > 0))"color: #000" else "color: #aaa") }) ##APP output$MainAction <- renderUI({ dynamicUi() }) dynamicUi <- reactive({ if (question$i==-b) { return(list( radioButtons("first_page", "This is the first page.", choices = list("Okay, cool" = 'ok'), width = '100%', selected = character(0)) )) } if (question$i==-b+1){ return(div(fluidPage( # HTML('<iframe width="560" height="315" src="https://www.youtube.com/embed/-CrOeCzMFSQ?si=3pKfFn_AnvVXKASX" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'), useShinyjs(), #uiOutput("video1"), br(), # p("."), useShinyjs(), uiOutput("video"), hidden( radioButtons("instructions","Have you finished watching the instructions?", choices = list("Yes" = 'finished_instructions' ), width = '100%', selected = character(0) ) ) ))) } if (question$i > -b+1){ results[[2]] <<- arm_condition Sys.sleep(.5) userID <- randstring() fn <- paste(userID, ".RData", sep="") filePath <- file.path(tempdir(), fn) save(results, file=filePath) drop_upload(filePath, path = "Your/Filepath/here") p("Thank you!") return(list( h4(tagList(paste0("You are all finished. Thank you for completing this survey! Here's your code: ", userID))))) } } )}shinyApp(ui, server)I'd welcome any and all suggestions for how to get this working - or any alternative ways hide then show the radio buttons.