Input type to allow rankings

[priyankagagneja]

I am needing to create a survey which asks users to rank a couple of options on a scale of 1-4.

[jdtrat]

Would something like Shiny's sliderInput work?

library(shiny)
ui <- fluidPage(
  shiny::sliderInput("skillA", "How would you rate skill A?",
                     min = 0, max = 4, value = 2)
)
server <- function(input, output, session) {}
shinyApp(ui, server)

[priyankagagneja]

It could be a workaround but not a preferred method IMO. Especially for people working with surveys a lot. Based on my attached visual, its more like a radio button for each row. I hope this helps.

…

On Sat, Feb 6, 2021, 10:09 PM Jonathan D. Trattner ***@***.***> wrote: Would something like Shiny's sliderInput work? library(shiny)ui <- fluidPage( shiny::sliderInput("skillA", "How would you rate skill A?", min = 0, max = 4, value = 2) )server <- function(input, output, session) {} shinyApp(ui, server) [image: Screen Shot 2021-02-06 at 10 09 12 PM] <https://user-images.githubusercontent.com/51417262/107135362-f26de100-68c7-11eb-88b3-4421978e4c3e.png> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#6 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AF2IZSV5E5FY6ZCPSA7SVQTS5X77ZANCNFSM4XG6K3OQ> .

[jdtrat]

Should users be allowed to select multiple buttons per row, or no?

[priyankagagneja]

No, just 1 value per row.

…

On Mon, Feb 8, 2021, 1:04 PM Jonathan D. Trattner ***@***.***> wrote: Should users be allowed to select multiple buttons per row, or no? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#6 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AF2IZSXGEG5WRVYRYABGKC3S6ARTTANCNFSM4XG6K3OQ> .

[mayeulk]

Hi,
Thanks a lot for this package!
From the tests I made, it is possible to select only one radio button for the entire matrix of buttons.
Here is a reproducible example:

#remotes::install_github("jdtrat/shinysurveys", ref = "26837fbb3365a56b861feca40502eeaa721e303c") # 5 May 2021
library(shiny)
library(shinysurveys)

df <- data.frame(question = c("What is your favorite food?", "Rank the software according to your preference:", "Rank the software according to your preference:"),
                 option = c("Your Answer",  "R", "S+"),
                 input_type = c("text", "rank_{{2}}", "rank_{{2}}"), 
                 input_id = c("favorite_food", "software", "software"),
                 dependence = rep(NA, 3),
                 dependence_value = rep(NA, 3),
                 required = rep(F, 3)
                 )

ui <- fluidPage(
  surveyOutput(df = df,
               survey_title = "Hello, World!",
               survey_description = "Welcome! This is a demo survey showing off the {shinysurveys} package.")
)

server <- function(input, output, session) {
  renderSurvey(df = df)
  
  observeEvent(input$submit, {
    showModal(modalDialog(
      title = "Congrats, you completed your first shinysurvey!",
      "You can customize what actions happen when a user finishes a survey using input$submit."
    ))
  })
}

shinyApp(ui, server)

(with R 4.0.3, shiny_1.6.0, shinysurveys_0.1.2-dev, on Ubuntu and Firefox)
With the example above, when I select 1 for R then 2 for S+, the 1 for R gets unselected.
Maybe I'm doing it the wrong way? If so, an working example would help.
Below is the DOM in Firefox:

<div class="ranking">
              <div class="ranking-title">Rank the software according to your preference:</div>
              <div id="software" class="form-group shiny-input-radiogroup shiny-input-container shiny-input-container-inline shiny-bound-input" role="radiogroup" aria-labelledby="software-label">
                <label class="control-label" id="software-label" for="software">R</label>
                <div class="shiny-options-group">
                  <label class="radio-inline">
                    <input type="radio" name="software" value="1">
                    <span>1</span>
                  </label>
                  <label class="radio-inline">
                    <input type="radio" name="software" value="2">
                    <span>2</span>
                  </label>
                </div>
              </div>
              <div id="software" class="form-group shiny-input-radiogroup shiny-input-container shiny-input-container-inline" role="radiogroup" aria-labelledby="software-label">
                <label class="control-label" id="software-label" for="software">S+</label>
                <div class="shiny-options-group">
                  <label class="radio-inline">
                    <input type="radio" name="software" value="1">
                    <span>1</span>
                  </label>
                  <label class="radio-inline">
                    <input type="radio" name="software" value="2">
                    <span>2</span>
                  </label>
                </div>
              </div>
            </div>

If, with Firefox webdeveloper tools, I replace the 'name' of the two input values for a single line (say, "S+"), as below, the behaviour is different:

                <label class="control-label" id="software-label" for="software">S+</label>
                <div class="shiny-options-group">
                  <label class="radio-inline">
                    <input type="radio" value="1" name="software2">
                    <span>1</span>
                  </label>
                  <label class="radio-inline">
                    <input type="radio" value="2" name="software2">
                    <span>2</span>
                  </label>

With the above, at least I can select a value for R, and a value for S+. Nothing prevents the user to select R as 1st and S+ as 1st (which can make sense: ties). Some control could be implemented later in a way similar to shinyFeedback (see https://cran.r-project.org/web/packages/shinyFeedback/vignettes/shinyFeedback-intro.html ).
Thanks.
Mayeul

[mayeulk]

Also, it might be interesting to have a look at the shinyRadioMatrix package (https://github.com/szelepke/shinyRadioMatrix ).

[jdtrat]

Hi @mayeulk! Thanks for the looking into this. I believe this happens because the input ID for both rows of the ranking input are the same, so when you interact with it one overrides the other. Does the following fix it for you?

library(shiny)
library(shinysurveys)

df <- data.frame(question = c("What is your favorite food?", "Rank the software according to your preference:", "Rank the software according to your preference:"),
                 option = c("Your Answer",  "R", "S+"),
                 input_type = c("text", "rank_{{2}}", "rank_{{2}}"), 
                 # Note the input IDs are specific for the language option
                 input_id = c("favorite_food", "software_R", "software_S+"),
                 dependence = rep(NA, 3),
                 dependence_value = rep(NA, 3),
                 required = rep(F, 3)
)

ui <- fluidPage(
  surveyOutput(df = df,
               survey_title = "Hello, World!",
               survey_description = "Welcome! This is a demo survey showing off the {shinysurveys} package.")
)

server <- function(input, output, session) {
  renderSurvey(df = df)
  
  observeEvent(input$submit, {
    showModal(modalDialog(
      title = "Congrats, you completed your first shinysurvey!",
      "You can customize what actions happen when a user finishes a survey using input$submit."
    ))
  })
}

shinyApp(ui, server)

[mayeulk]

Hello,
yes, it works fine now, thanks a lot!
Mayeul Kauffmann

[jdtrat]

Note that in the development version, I have superseded the rank input type in favor of a matrix one. @mayeulk, see your example reproduced below:

library(shiny)
#remotes::install_github("jdtrat/shinysurveys@extend-shinysurveys")
library(shinysurveys)
df <- data.frame(question = c("What is your favorite food?", rep("R",2), rep("S+",2)),
                 option = c("Your Answer",  rep(c("Least Favorite", "Favorite"), 2)),
                 input_type = c("text", rep("matrix",4)), 
                 # Note the input IDs are specific for the language option
                 input_id = c("favorite_food", rep("rankLanguage",4)),
                 dependence = rep(NA, 5),
                 dependence_value = rep(NA, 5),
                 required = rep(F, 5)
)

ui <- fluidPage(
  surveyOutput(df = df,
               survey_title = "Hello, World!",
               survey_description = "Welcome! This is a demo survey showing off the {shinysurveys} package.")
)

server <- function(input, output, session) {
  renderSurvey(df = df)
  
  observeEvent(input$submit, {
    showModal(modalDialog(
      title = "Congrats, you completed your first shinysurvey!",
      "You can customize what actions happen when a user finishes a survey using input$submit."
    ))
    print(input$rankLanguage)
  })
}

# When printed in console:
# question_id question_type       response
#           r        matrix                       Favorite
#           s        matrix.                Least Favorite