Shiny应用累计点击actionButton达6次后隐藏全部元素替换为文本的实现

你可以直接使用修改后的如下代码，已经完全匹配你的需求：

library(shiny)
library(shinyjs)

ui <- fluidPage(
  id="main",
  title="Risk and ambiguity",
  useShinyjs(),
  
  # 图片展示面板
  fluidRow(wellPanel(
    id = "img_panel",
    splitLayout(cellWidths = c("50%", "50%"), 
                column(6,uiOutput("image1"), align = "center"), 
                column(6,uiOutput("image2"), align = "center")
    ))),
  
  # 按钮面板
  fluidRow(wellPanel(
    id = "btn_panel",
    splitLayout(cellWidths = c("33%", "33%", "33%"),
                column(12,align="center",actionButton("action11", label = "Je choisis option A")),
                column(12,align="center",actionButton("action12", label = "Je choisis le sac avec A et B")),
                column(12,align="center",actionButton("action13", label = "Je choisis option B"))
    ))),
  
  # 结束页面文本，默认隐藏
  hidden(
    div(id = "end_page", style = "width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center;",
        h2("所有试验已完成，感谢你的参与") # 此处可修改为你需要的指定文本
    )
  )
)

server <- function(input, output, session){
  rv <- reactiveValues(img11=NULL, img12=NULL)
  
  # 按照你的命名规则生成图片路径，如果你有其他命名需求直接修改这两个数组即可
  myimage1 <- paste0(1:6, "betA_green.jpg")
  myimage2 <- paste0(1:6, "betB_green.jpg")
  
  # 图片渲染，可自行调整height、width参数适配你的页面尺寸
  output$image1 <- renderUI({tags$img(src=rv$img11, height = "80%", width = "80%")})
  output$image2 <- renderUI({tags$img(src=rv$img12, height = "80%", width = "80%")})
  
  observe({
    # 统计所有按钮的总点击次数
    nclick <- sum(as.numeric(input$action11) + as.numeric(input$action12) + as.numeric(input$action13))
    
    if (nclick==0) { 
      # 初始加载展示第一组图片
      rv$img11=myimage1[1]
      rv$img12=myimage2[1]  
    }else if (nclick>0 & nclick<6){
      # 点击次数1-5次时，切换对应组的图片
      rv$img11 <- myimage1[nclick+1]
      rv$img12 <- myimage2[nclick+1]
    }else{
      # 第6次点击完成后，隐藏所有原有元素，展示结束文本
      rv$img11 <- NULL
      rv$img12 <- NULL
      hide("img_panel")
      hide("btn_panel")
      show("end_page")
    }
  })
}

shinyApp(ui = ui, server = server)

修改说明 #

• 给图片、按钮两个核心面板新增了独立id，通过shinyjs的hide/show方法控制显隐，不需要使用标签页组件
• 新增了全屏的结束文本容器，默认隐藏，6次点击后自动显示，你可以直接修改容器内的文本内容、样式满足需求
• 图片路径数组已按照你说明的[组号]betA_green.jpg、[组号]betB_green.jpg规则生成，无需手动录入6组路径
• 保留了原有三个按钮的全部配置，任意按钮点击都会触发计数更新和图片组切换
• 调整了图片渲染的尺寸参数，和你注释里的80%宽高配置对齐，你可以根据实际需求调整数值

内容的提问来源于stack exchange，提问作者firmo23