I am fairly new to using Rshiny and am trying to use styled css to make a multiple choice looking test. This will connect with a backend to effectively track all submissions (think: google forms). When I run this code, the submission tracks the text input perfectly fine, but doesn’t save the submissions with the radio buttons. All I’ve seen online is that radios are best to be used without css as it can be finicky. How do I fix this application?
library(shiny)
# Define UI
ui <- fluidPage(
#Use CSS to style each button so that it looks like a scantron
tags$head(
tags$style(HTML("
.inline-radio-buttons .radio-inline input[type='radio'] {
opacity: 0;
position: absolute;
}
.inline-radio-buttons .radio-inline label {
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
margin-right: 10px;
border: 2px solid #ccc;
border-radius: 30%;
cursor: pointer;
font-size: 12px;
}
.inline-radio-buttons .radio-inline input[type='radio']:checked + label {
background-color: #007bff;
color: white;
border-color: #007bff;
}
"))
),
#Application Title
titlePanel("This is your test"),
#Sidebar with some test prep prelim questions and some actual questions
fluidRow(
column(12,
# textInput("firstname", "Name:"),
# textInput("email", "Email:"),
# textInput("date", "Date:"),
# textInput("testID", "Test ID:"),
# Question 1
div(class = "inline-radio-buttons",
# span("Q1:", style = "margin-right: 0px;"),
div(class = "radio-inline",
tags$input(type = "radio", id = "q1a", name = "question1", value = "A"),
tags$label(`for` = "q1a", "A")
),
div(class = "radio-inline",
tags$input(type = "radio", id = "q1b", name = "question1", value = "B"),
tags$label(`for` = "q1b", "B")
),
div(class = "radio-inline",
tags$input(type = "radio", id = "q1c", name = "question1", value = "C"),
tags$label(`for` = "q1c", "C")
),
div(class = "radio-inline",
tags$input(type = "radio", id = "q1d", name = "question1", value = "D"),
tags$label(`for` = "q1d", "D")
),
div(class = "radio-inline",
tags$input(type = "radio", id = "q1e", name = "question1", value = "E"),
tags$label(`for` = "q1e", "E")
)
),
# Question 2
div(class = "inline-radio-buttons",
# span("Q2:", style = "margin-right: 0px;"),
div(class = "radio-inline",
tags$input(type = "radio", id = "q2f", name = "question2", value = "F"),
tags$label(`for` = "q2f", "F")
),
div(class = "radio-inline",
tags$input(type = "radio", id = "q2g", name = "question2", value = "G"),
tags$label(`for` = "q2g", "G")
),
div(class = "radio-inline",
tags$input(type = "radio", id = "q2h", name = "question2", value = "H"),
tags$label(`for` = "q2h", "H")
),
div(class = "radio-inline",
tags$input(type = "radio", id = "q2j", name = "question2", value = "J"),
tags$label(`for` = "q2j", "J")
),
div(class = "radio-inline",
tags$input(type = "radio", id = "q2k", name = "question2", value = "K"),
tags$label(`for` = "q2k", "K")
)
),
# Question 3
div(class = "inline-radio-buttons",
# span("Q3:", style = "margin-right: 0px;"),
div(class = "radio-inline",
tags$input(type = "radio", id = "q3a", name = "question3", value = "A"),
tags$label(`for` = "q3a", "A")
),
div(class = "radio-inline",
tags$input(type = "radio", id = "q3b", name = "question3", value = "B"),
tags$label(`for` = "q3b", "B")
),
div(class = "radio-inline",
tags$input(type = "radio", id = "q3c", name = "question3", value = "C"),
tags$label(`for` = "q3c", "C")
),
div(class = "radio-inline",
tags$input(type = "radio", id = "q3d", name = "question3", value = "D"),
tags$label(`for` = "q3d", "D")
),
div(class = "radio-inline",
tags$input(type = "radio", id = "q3e", name = "question3", value = "E"),
tags$label(`for` = "q3e", "E")
)
),
actionButton("submit", "Submit")
)
),
fluidRow(
column(12,
div(class = "centered-content",
textOutput("confirmation")
)
)
)
)
#server logic
server <- function(input, output) {
#test submissions yield Null - issue!!!
observeEvent(input$submit, {
print(input$question1)
print(input$question2)
print(input$question3)
})
observeEvent(input$submit, {
# Gather responses with default values for missing inputs
response <- data.frame(
Name = ifelse(nchar(input$firstname) > 0, input$firstname, NA),
Email = ifelse(nchar(input$email) > 0, input$email, NA),
Date = ifelse(nchar(input$date) > 0, input$date, NA),
TestID = ifelse(nchar(input$testID) > 0, input$testID, NA),
question1 = ifelse(!is.null(input$question1) && input$question1 != "", input$question1, NA),
question2 = ifelse(!is.null(input$question2) && input$question2 != "", input$question2, NA),
question3 = ifelse(!is.null(input$question3) && input$question3 != "", input$question3, NA),
stringsAsFactors = FALSE
)
# Ensure the data.frame has at least one row
# if (nrow(response) > 0) {
# Determine if the CSV file exists
file_exists <- file.exists("responses.csv")
# Append responses to the CSV file
write.table(response, "responses.csv", sep = ",", append = file_exists,
col.names = !file_exists, row.names = FALSE, quote = TRUE)
output$confirmation <- renderText("Thank you for your submission!")
} else {
output$confirmation <- renderText("Please complete all questions.")
}
})
}
Every button input was null, even when testing pre-submission.
Gavin Green is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.