Hide everything in shiny page and replace it with text after pressing any actionButton()

Question

I have the shiny app below with 3 actionButtons. Εvery time a user presses any of them a different pair of images should be displayed. The images are already saved in a folder named www inside my working directory. And they are named like:

"1betA_green.jpg"
"1betA_green.jpg"

Default case when the user opens the app.

"2betA_green.jpg"
"2betA_green.jpg"

for 1st time the user press any actionButton().

etc..

This can happen up to 6 times then it stops. After the 6th press the images disappear but I also want to hide everything (and the actionButtons) and have a totally blank page with text in the place of images. I might could do it using tabs but I do not want the tabs to be visible at all so I guess this is not the best solution.

library(shiny)
  library(shinyjs)

  ui <- fluidPage(
    id="main",
    title="Risk and ambiguity",
    useShinyjs(),

    #when you press on of the 3 actionbuttons for first-example
    fluidRow(wellPanel(
      splitLayout(cellWidths = c("50%", "50%"), column(6,uiOutput("image1")), column(6,uiOutput("image2"))
                  # column(12,img(src="1betA_green.jpg", height="80%", width="80%", align="left")),
                  # column(12,img(src="1betB_green.jpg", height="80%", width="80%", align="right"))
                  ))),

    #when you press on of the 3 actionbuttons for second time-example
    #fluidRow(wellPanel(
    # splitLayout(cellWidths = c("50%", "50%"),
    #            column(12,img(src="2betA_green.jpg", height="80%", width="80%", align="left")),
    #           column(12,img(src="2betB_green.jpg", height="80%", width="80%", align="right"))))),

    ####
    fluidRow(wellPanel(
      splitLayout(cellWidths = c("33%", "33%", "33%"),
                  #uiOutput("myactions")
                  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"))
      )))
  )

  server <- function(input, output, session){
    rv <- reactiveValues(img11=NULL, img12=NULL)

    myimage1 <- c("YBS.png", "mouse.png","EC.jpg", "man_log.png", "cube.png", "hotdog.png")
    myimage2 <- c("man_log.png", "cube.png", "hotdog.png", "YBS.png", "mouse.png","EC.jpg")

    output$image1 <- renderUI({tags$img(src=rv$img11, height = "50px")})
    output$image2 <- renderUI({tags$img(src=rv$img12, height = "50px")})
    
    observe({
      nclick <- sum(as.numeric(input$action11) + as.numeric(input$action12) + as.numeric(input$action13))
     
  

    if (nclick==0) { ###  initial display
    rv$img11=myimage1[1]
    rv$img12=myimage2[1]  
  }else if (nclick>0 & nclick<6){
    rv$img11 <- myimage1[nclick+1]
    rv$img12 <- myimage2[nclick+1]
  }else{
    rv$img11 <- NULL
    rv$img12 <- NULL
  }
    })
  }

  shinyApp(ui = ui, server = server)

Answer 1

Is this what you are looking for?

  library(shiny)
  library(shinyjs)
  
  ui <- fluidPage(
    id="main",
    title="Risk and ambiguity",
    useShinyjs(),
    
    #when you press on of the 3 actionbuttons for first-example
    fluidRow(wellPanel(
      splitLayout(cellWidths = c("50%", "50%"), column(6,uiOutput("image1")), column(6,uiOutput("image2"))
                  # column(12,img(src="1betA_green.jpg", height="80%", width="80%", align="left")),
                  # column(12,img(src="1betB_green.jpg", height="80%", width="80%", align="right"))
      ))),
    
    #when you press on of the 3 actionbuttons for second time-example
    #fluidRow(wellPanel(
    # splitLayout(cellWidths = c("50%", "50%"),
    #            column(12,img(src="2betA_green.jpg", height="80%", width="80%", align="left")),
    #           column(12,img(src="2betB_green.jpg", height="80%", width="80%", align="right"))))),
    
    ####
    fluidRow(wellPanel(
      splitLayout(cellWidths = c("33%", "33%", "33%"),
                  #uiOutput("myactions")
                  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")),
                  
      ),column(12,align="center",hidden(verbatimTextOutput("mytext")))
      ))
  )
  
  server <- function(input, output, session){
    rv <- reactiveValues(img11=NULL, img12=NULL)
    
    myimage1 <- c("YBS.png", "mouse.png","EC.jpg", "man_log.png", "cube.png", "hotdog.png")
    myimage2 <- c("man_log.png", "cube.png", "hotdog.png", "YBS.png", "mouse.png","EC.jpg")
    
    output$image1 <- renderUI({tags$img(src=rv$img11, height = "50px")})
    output$image2 <- renderUI({tags$img(src=rv$img12, height = "50px")})
    output$mytext <- renderText({paste("This is hidden for 6 clicks")})
    
    observe({
      nclick <- sum(as.numeric(input$action11) + as.numeric(input$action12) + as.numeric(input$action13))
      
      if (nclick==0) { ###  initial display
        rv$img11=myimage1[1]
        rv$img12=myimage2[1]  
      }else if (nclick>0 & nclick<6){
        rv$img11 <- myimage1[nclick+1]
        rv$img12 <- myimage2[nclick+1]
      }else{
        rv$img11 <- NULL
        rv$img12 <- NULL
        shinyjs::hide("action11")
        shinyjs::hide("action12")
        shinyjs::hide("action13")
        shinyjs::show("mytext")
      }
    })
  }
  
  shinyApp(ui = ui, server = server)