test: rintrojs for displaying instructions

vusaverse · Dec 8, 2023 · 5ecc99f · 5ecc99f
1 parent f79b2d4
commit 5ecc99f
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 15 deletions.
diff --git a/DESCRIPTION b/DESCRIPTION
@@ -39,6 +39,7 @@ Imports:
     irr,
     magrittr,
     readxl,
+    rintrojs,
     shiny,
     shinyjs,
     shinyWidgets
diff --git a/R/server.R b/R/server.R
@@ -8,6 +8,27 @@
 app_server <- function(input, output, session) {
   data <- handle_file_upload(input, output, session)
 
+  steps <- shiny::reactive({
+    data.frame(
+      element = c(NA, "#file", "#sep", "#header", "#dependent_var_dropdown", "#independent_var_dropdown", "#input_mean", "#identifier_dropdown", "#statistical_test_dropdown"),
+      intro = c(
+        "Welcome to the Statistical Test App. Let's start by uploading a file.",
+        "This is where you upload your file.",
+        "Select the separator used in your file.",
+        "Check this if your file has a header.",
+        "Choose the dependent variable from this dropdown.",
+        "Choose the independent variable from this dropdown.",
+        "Enter the mean here.",
+        "Choose the identifier from this dropdown.",
+        "Choose the statistical test from this dropdown."
+      )
+    )
+  })
+
+  shiny::observeEvent(input$file, {
+    rintrojs::introjs(session, options = list(steps = steps()))
+  })
+
   # Display the uploaded data as a datatable
   output$dataTable <- DT::renderDataTable({
     shiny::req(data())

diff --git a/R/ui.R b/R/ui.R
@@ -4,6 +4,7 @@
 #'
 app_ui <- function() {
   shiny::fluidPage(
+    rintrojs::introjsUI(),
     # Application title
     shiny::titlePanel("Statistical Test App"),
 
@@ -13,39 +14,83 @@ app_ui <- function() {
     # Sidebar with a browse button for file upload
     shiny::sidebarLayout(
       shiny::sidebarPanel(
-        shiny::fileInput("file", "Upload a file"),
+        rintrojs::introBox(
+          shiny::fileInput("file", "Upload a file"),
+          data.step = 1,
+          data.intro = "This is where you upload your file."
+        ),
 
         # UI elements for separator and header
-        shiny::radioButtons("sep", "Separator",
-                     choices = c(Comma = ",",
-                                 Semicolon = ";",
-                                 Tab = "\t"),
-                     selected = ","),
-        shiny::checkboxInput("header", "Header", TRUE),
+        rintrojs::introBox(
+          shiny::radioButtons("sep", "Separator",
+                              choices = c(Comma = ",",
+                                          Semicolon = ";",
+                                          Tab = "\t"),
+                              selected = ","),
+          data.step = 2,
+          data.intro = "Select the separator used in your file."
+        ),
 
+        rintrojs::introBox(
+          shiny::checkboxInput("header", "Header", TRUE),
+          data.step = 3,
+          data.intro = "Check this if your file has a header."
+        ),
 
         # Dropdown for choosing the dependent variable
-        shiny::uiOutput("dependent_var_dropdown"),
+        rintrojs::introBox(
+          shiny::uiOutput("dependent_var_dropdown"),
+          data.step = 4,
+          data.intro = "Choose the dependent variable from this dropdown."
+        ),
 
         # Text below the dropdowns
-        shiny::textOutput("dependent_var_text"),
+        rintrojs::introBox(
+          shiny::textOutput("dependent_var_text"),
+          data.step = 5,
+          data.intro = "This is the dependent variable text."
+        ),
 
         # Dropdown for choosing the independent variable
-        shiny::uiOutput("independent_var_dropdown"),
+        rintrojs::introBox(
+          shiny::uiOutput("independent_var_dropdown"),
+          data.step = 6,
+          data.intro = "Choose the independent variable from this dropdown."
+        ),
 
-        shiny::textOutput("independent_var_text"),  # New output element for the independent variable text
+        rintrojs::introBox(
+          shiny::textOutput("independent_var_text"), # New output element for the independent variable text
+          data.step = 7,
+          data.intro = "This is the independent variable text."
+        ),
 
         # Input field for mean (hidden initially)
-        shiny::uiOutput("input_mean"),
+        rintrojs::introBox(
+          shiny::uiOutput("input_mean"),
+          data.step = 8,
+          data.intro = "Enter the mean here."
+        ),
 
         # Dropdown for choosing the independent variable
-        shiny::uiOutput("identifier_dropdown"),
+        rintrojs::introBox(
+          shiny::uiOutput("identifier_dropdown"),
+          data.step = 9,
+          data.intro = "Choose the identifier from this dropdown."
+        ),
 
         # New dropdown for selecting statistical test
-        shiny::uiOutput("statistical_test_dropdown"),
+        rintrojs::introBox(
+          shiny::uiOutput("statistical_test_dropdown"),
+          data.step = 10,
+          data.intro = "Choose the statistical test from this dropdown."
+        ),
 
         # Area to display the test report
-        shiny::verbatimTextOutput("test_report")
+        rintrojs::introBox(
+          shiny::verbatimTextOutput("test_report"),
+          data.step = 11,
+          data.intro = "This is the area to display the test report."
+        )
       ),
 
       # Show the datatable and histogram after submitting a file