Question: How to implement a lastButton() that goes to a final screen, 1 screen prior

[preacterik]

I am building a survey app that would require a submit survey button on the final screen but to maintain continuity, have built a thank you/submission screen for a user to create an account or view historic responses.

I'm currently attempting to apply a "last-screen" class to the n-1 screen (final question of the survey) that says 'Submit Survey' and when a user clicks, their responses our submitted to the back end and they are progressed to the submission success screen. I can't for the life of me seem to get the final survey screen to show a Submit Survey button - it just keeps the normal "Next" button.

Screen creation for each survey question:

question_screen <- shinyglide::screen( div( id = ns(paste0('slide_', id)), header, input ) )

Loop to create all screen programmatically

screen_ui <- apply(survey_questions, 1, function(row) { create_question_ui(row, ns, max_key) })

Create thank you screen

thank_you_ui <- shinyglide::screen(
    div(
      style = "max-width: 600px; margin: 0 auto; padding: 20px;",
      
      h2("Thank You!", 
         class = "mb-5",
         style = "text-align: left;"),
      
      p("Thank you for completing the Preact Health Project survey.", 
        class = "mb-5",
        style = "text-align: left;"),
      
      p("To track your progress over time and access additional features, 
      consider creating an account.", 
        class = "mb-5",
        style = "text-align: left;"),
      
      div(
        class = "d-flex justify-content-end align-items-center gap-3",
        style = "margin: 0 auto;",
        
        actionButton(
          ns("showLoginModal"),
          "Create Account / Login",
          class = "btn btn-primary"
        ),
        
        actionButton(
          ns("goToProfile"),
          "View Profile",
          class = "btn btn-outline-primary"
        )
      )
    )
  )

Combine Screens

all_screens <- c(screen_ui, list(thank_you_ui))

Custom controls

custom_controls <- shinyglide::glideControls(
    list(
      shinyglide::prevButton()
    ),
    list(
      shinyglide::nextButton(),
      div(
        `data-glide-el` = "controls",
        tags$a(
          class = "btn btn-primary last-screen",
          `data-glide-dir` = sprintf("=%d", length(all_screens) - 1),  # Point to thank you screen
          "Submit Survey"
        )
      )
    )
  )

Create glide within fullPage container

fullPage::fullSection(
    menu = "survey",
    fullPage::fullContainer(
      center = TRUE,
      shinyglide::glide(
        id = ns('sur'),
        height = '780px',
        controls_position = "bottom",
        keyboard = TRUE,
        custom_controls = custom_controls,
        all_screens
      )
    )
  )

[juba]

Hi, did you try to add the last-screen class to the parent div instead of your tags$a element ?

[preacterik]

Thanks for the reply @juba - and for your package! I assume you mean on the controls, putting in the div? I think I tried this but will give it another shot and update.

[preacterik]

Ok so I've amended the code and tried but still not seeing any Submit Survey button.

Final question

if(id == 'x') {
      input <- div(
        style = "max-width: 800px;",
        class = 'last-screen',
        p(class = "mb-4", 
          "This is the final question of the survey!"),
        
        # Initial selectize input
        selectizeInput(
          inputId = ns("finalquestion"),
          label = "final question selectize",
          choices = values,
          multiple = TRUE,
          options = list(
            plugins = list('remove_button'),
            placeholder = 'Choose...'
          )
        )...

### Controls
custom_controls <- shinyglide::glideControls(
    list(
      shinyglide::prevButton()
    ),
    list(
      shinyglide::nextButton(),
      div(
        `data-glide-el` = "controls",
        class = "btn btn-primary last-screen",
        tags$a(
          `data-glide-dir` = sprintf("=%d", length(all_screens) - 1),  # Point to thank you screen
          "Submit Survey"
        )
      )
    )
  )

The HTML when I look on my browser for the last slide is as follows:

<li class="glide__slide" style="width: 1140px; margin-left: 5px; margin-right: 5px;">
  <div id="app-survey-slide_finalquestion">
    <h3>q47. Final Question</h3>
     <script>
            function toggleFamilyCard(contentId) {
              const content = document.getElementById(contentId);
              if (content.style.display === 'none') {
                content.style.display = 'block';
              } else {
                content.style.display = 'none';
              }
            }
    </script>
    <div style="max-width: 800px; display: none;" class="last-screen">
      <p class="mb-4">This is the final question of the survey!</p>
      <div class="form-group shiny-input-container">
        <label class="control-label" id="app-survey-finalquestion-label" for="app-survey-finalquestion">final question selectize</label>
          <div>
            <select class="shiny-input-select form-control shinyjs-resettable selectized shiny-bound-input" id="app-survey-finalquestion" multiple="multiple" data-shinyjs-resettable-id="app-survey-finalquestion" data-shinyjs-resettable-type="Select" data-shinyjs-resettable-value="[]" tabindex="-1" style="display: none;">
</select><div class="shiny-input-select form-control shinyjs-resettable selectize-control multi plugin-remove_button plugin-selectize-plugin-a11y"><div class="selectize-input items not-full has-options"><input type="text" autocomplete="new-password" autofill="no" tabindex="-1" id="app-survey-finalquestion-selectized" placeholder="Choose..." role="combobox" aria-expanded="false" haspopup="listbox" aria-owns="rf8lndonlp" style="width: 171.65625px;"></div><div class="multi selectize-dropdown shiny-input-select form-control shinyjs-resettable plugin-remove_button plugin-selectize-plugin-a11y" style="display: none;"><div class="selectize-dropdown-content" tabindex="-1" role="listbox" id="rf8lndonlp"></div></div></div>
            <script type="application/json" data-for="app-survey-finalquestion">{"plugins":["remove_button","selectize-plugin-a11y"],"placeholder":"Choose..."}</script>
          </div>
        </div>
        <div id="app-survey-relative_cards" class="shiny-html-output shiny-bound-output recalculating" aria-live="polite"></div>
      </div>
    </div>
  </li>

[juba]

And what if you replace:

div(
        `data-glide-el` = "controls",
        tags$a(
          class = "btn btn-primary last-screen",
          `data-glide-dir` = sprintf("=%d", length(all_screens) - 1),  # Point to thank you screen
          "Submit Survey"
        )
      )

with something like:

shinyglide::lastButton(
      class = "btn btn-primary", 
      `data-glide-dir` = sprintf("=%d", length(all_screens) - 1), 
      "Submit survey"
    )

Not sure at all it will work unfortunately, it's been a while since I last used this package...