I am trying to create a (pseudo) Implicit Association Test as a practice using Shiny - given that it is difficult to measure accurate response latency, I will probably use the number of correct/incorrect answers here to compute the IAT scores.
However, it seems to be a little more difficult to create the program than I expected it to be. Though, admittedly , I am very new to Shiny (&R programming in general). I would appreciate your help.
My questions are:
- is there a way to create multiple pages - so for instance, participant needs to press a key on the keyboard to proceed into the next page/trial/block - I have tried it (codes attached below), but I think there might be better/more efficient way to do this.
- how do I randomly display one of the imported images on the GUI per trial..? Would there be a way to do so??
ui <- fluidPage(
useShinyjs(),
div(
id = "introduction",
titlePanel("Welcome"),
br(),
mainPanel(
fluidRow(
align = "center",
h2("Introduction"),
p("In this study you will complete an Implicit Association Test (IAT)
in which you will be asked to sort images into groups as fast as you can.
In addition to the IAT, there are some questions about your beliefs,
attitudes, and opinions, and some standard demographic questions.
This study should take about 10 minutes to complete."),
br(),
p("We thank you for being here!"),
br(),
actionButton("Continue", label = "Continue")
)
),
hidden(
div(
id = "general instruction",
h3("Implicit Association Test"),
p("In this experiment, you will use the 'E' or 'I' computer keys to categorize
items into groups as fast as you can. These are the four groups and the items that belong to each:"),
br(),
em("Caucasian"),
img(src = "caucasian1.png", height = 100, width = 100),
img(src = "caucasian2.png", height = 100, width = 100),
img(src = "caucasian3.png", height = 100, width = 100),
img(src = "caucasian4.png", height = 100, width = 100),
img(src = "caucasian5.png", height = 100, width = 100),
img(src = "caucasian6.png", height = 100, width = 100),
br(),
em("Asian"),
img(src = "asian1.png", height = 100, width = 100),
img(src = "asian2.png", height = 100, width = 100),
img(src = "asian3.png", height = 100, width = 100),
img(src = "asian4.png", height = 100, width = 100),
img(src = "asian5.png", height = 100, width = 100),
img(src = "asian6.png", height = 100, width = 100),
br(),
em("Math"),
list("Geometry", "Algebra", "Computation", "Calculus", "Biology", "Statistics"),
em("Non-Math"),
list("History", "Arts", "Humanities", "Music", "Philosophy", "Literature"),
br(),
p("there are five parts. The instructions change for most of the parts.
Pay attention!"),
br(),
actionButton("Continue2", label = "Continue"))
)
)
)
server <- function(input, output) {
formData <- reactive({
data <- sapply(fields, function(x) input[[x]])
data
})
observeEvent(input$Continue, {
hide("introduction")
show("general instruction")
})
observeEvent(input$Continue2, {
hide("general instruction")
show("block1")})
}
# Run the application
shinyApp(ui = ui, server = server)