Search code examples
rdynamictabsconditional-statementsrshiny

How to create a shiny App where tabs are only become visible if a condition is met


I would like to create a ShinyApp with two tabs and in each tab there is a question that needs to be answered. The user should only see the secend tab with the second question if the user has answered the first question correctly beforehand. Is there a possibility that the tab "Question2" will only be displayed if the user have previously answered the first question correctly in the tab "Question1"?
I created a minimal example, but i did not manage to hide tab two.

library(shiny)
ui <- shinyUI(pageWithSidebar(
    headerPanel("Header"),
    sidebarPanel(
        conditionalPanel(
            condition = "input.tabselected ==1",
            sliderInput(
                inputId = "slider1",
                label = "Slider 1",
                min = 0,
                max = 1,
                value = 0.5
                ),
            selectInput(
                inputId = "quiz1",
                label = " Right or wrong",
                selected = NULL,
                choices = c("Right",
                            "Wrong")
            ),
            conditionalPanel(
                    "input.quiz1 === 'Right'",
                    paste0("Feedback: Right"),
                    actionButton("Tab2", label = "Next Question")
                    ),
          conditionalPanel(
                    "input.quiz1 === 'Wrong'",
                    paste0("Feedback: Wrong")
         ),
        conditionalPanel(
            condition = "input.tabselected ==2",
            sliderInput(
                inputId = "slider2",
                label = "Slider 2",
                min = 0,
                max = 1,
                value = 0.5
                  ),
            selectInput(
                inputId = "quiz2",
                label = "True or false",
                selected = NULL,
                choices = c("false",
                            "true")
            ),
             conditionalPanel(
                    "input.quiz2 === 'true'",
                    paste0("Feedback: Right answer")         
            ),
           conditionalPanel(
                    "input.quiz2 === 'false'",
                    paste0("Feedback: Wrong answer")
) ) ),
    mainPanel(
             tabsetPanel(
            type = "tabs",
          tabPanel(
                "Question 1",
                titlePanel("Description question 1"),
                value = "1"
            ), 
    
          tabPanel(title = "Question  2" ,
                value = "2",
                conditionalPanel("input.quiz1 === 'Right'",
                    titlePanel("Description question 2")
                   ) 
            ), 
             id = "tabselected"
 ))))


server = function(input, output, session) {
    observeEvent(input$Tab2, {
       updateTabsetPanel(session, "tabselected",
                        selected = "2")
    })
 }
shinyApp(ui = ui, server = server)


Solution

  • you can find a solution to conditional tabsets in the link below, this is done on the server side with renderUI() and shown achieved with conditional panels

    Add dynamic tabs in shiny dashboard using conditional panel

    A closer example of adding tabs to an existing tab set can be achieved with the code below (derived from examples in the original link):

    library(shiny) 
    library(shinydashboard)
    ui <- dashboardPage(
        dashboardHeader(),
        dashboardSidebar(
            checkboxGroupInput("Tabs", label = h4("tabpanel"), choices = list("tabs" = "tabs"),selected = NULL),
            checkboxGroupInput("MoreTabs", label = h4("moretabpanel"), choices = list("moretabs" = "moretabs"),selected = NULL)
        ),
        dashboardBody(
           tabBox(id="x",tabPanel("panel","panel"))
        )
    )
    server <- function(input, output) { 
    
        observeEvent(input$Tabs,{
           
            check1 <- input$Tabs == "tabs"
            
            if(check1&!is.na(check1)){
               
            
                insertTab(inputId = "x",
                          tabPanel("Dynamic", "This a dynamically-added tab"),target="panel",position ="after")
            }
            
        })
        }
    shinyApp(ui, server)
    

    We use the function insertTab to append a tab to an existing tabset based on an event. (checking a box) if you want to subsequently remove this tab if the condition becomes unsatisfied again you can use removeTab more information on these functions can be found here:

    Shiny Insert Tab