Custom shiny input (radio buttons) - help with .js file

[rbcavanaugh]

I've been reading on custom shiny inputs (e.g., Shiny - How to create custom input bindings) and I think I get the general principle but Its still not exactly clear to me how to implement this with radio buttons.

I want to overlay radio buttons on specific areas of an image, so I've written the reprex below.

What does the customRadio.js file look like so that I can access the selected radio button via input$likert1 (or whatever the input would be)?

Thanks!

library(shiny)
library(shinyjs)
# Define UI for application that draws a histogram
ui <- navbarPage(title = "ACOM test app",
  header = 
    div(
    inlineCSS('.container {position: relative;}.container input[type="radio"] {position: absolute;}'),
    tags$script(src = "www/customRadio.js")
  ),
  tabPanel("Fixed position",
    
    # Application title
    shiny::fluidRow(
      column(width = 10, offset = 1, align = "center",
      uiOutput("questionText")
      )
    ),
    shiny::fluidRow(
      shiny::column(width = 9, offset = 3, 
        uiOutput("scale")
        )
    )
  )
)

# Define server logic required to draw a histogram
server <- function(input, output) {
  
  observeEvent(input$radiooption1,{
    print("radio1 change")
  })
  
  output$questionText <- renderUI({
    tags$p("How effectively do you ask for information from store employees?", style="font-size:3rem;margin-top:15px;")
  })

    output$scale <- renderUI({
      HTML('
      <div class="container">
        <img src="https://github.com/rbcavanaugh/acom-test/blob/master/www/acom_scale.png?raw=true" style="height:550px;position:absolute;">
          <input type="radio" class = "customradio" name="option1" style="top:21px;left:280px;">
            <input type="radio" class = "customradio" name="option1" style="top:115px;left:280px;">
              <input type="radio" class = "customradio" name="option1" style="top:250px;left:280px;">
                <input type="radio" class = "customradio" name="option1" style="top:399px;left:280px;">
                  <input type="radio" class = "customradio" name="option1" style="top:512px;left:280px;">
                            </div>
      ')
    })
 
}

# Run the application 
shinyApp(ui = ui, server = server)

Edit: If there is a way to do this using radioButton() and without custom inputs, I'm all ears.