search

priism-center / shinyquiz

R package for creating quizzes within R Shiny
https://priism-center.github.io/shinyquiz/
Other
3 stars 2 forks source link

Plot an image #2

Closed gabrielgraciano closed 6 months ago

gabrielgraciano commented 7 months ago

Hello. I am trying to plot an image as part of my quiz but it is not working. I am using htmltools library. Could you help me, please? Thanks in advance

joemarlo commented 7 months ago

Hi @gabrielgraciano - Can you share an example of your code? Also, take a look at this article and see if that helps you in including a plot in your quiz.

gabrielgraciano commented 7 months ago

` library(htmltools) library(shinyquiz)

q1 <- create_question(

HTML('

'), add_choice('choice1'), add_choice('choice2', correct = TRUE), label = 'Select the correct choice'

)

quiz <- create_quiz(q1)

quiz ` It is just a simple example. I would like to add a png image to the quiz. Thanks for providing the link!

joemarlo commented 7 months ago

For an image, it is recommended to follow the standard Shiny approach of including the image file in the www directory of the shiny app and then using htmltools::img(src = {path to your image}) in the quiz question. Here is a reproducible example so you can see the code and directory structure.

If you already have the image hosted somewhere, you can simple use htmltools::img(src = {url to your image}) and forgo the www directory.

gabrielgraciano commented 6 months ago

Hey, Joe!

Sorry for the delay. Thanks for the response and effort in sending me an example. I am still coding the quiz I want to make and you helped me a lot.

Thanks again!

BriceonWiley commented 5 months ago

In the reproducible example here, the quiz grows long-wise due to the image. Is it possible to have, for instance, the question and image in a column to the left while the answer choices are put in a column to the right? This way, the overall quiz can remain compact? I've been running into an issue where I have to scroll up and down to see all of the quiz within the HTML document where I'm utilizing the package.

joemarlo commented 5 months ago

Unfortunately it's not flexible enough right now to place the answer area to the right. Since the prompt argument can take arbitrary HTML, you could leverage shiny/bootstrap to put the prompt contents side-by-side. E.g. Have the question text on the left, the image on the right, and the answer below.

create_question(
  shiny::fluidRow(
    shiny::column(
      width = 6,
      htmltools::p("My question text")
    ),
    shiny::column(
      width = 6,
      htmltools::img(src = "test-image.png"),
    )
  ),
  add_choice('choice1'),
  add_choice('choice2', correct = TRUE),
  label = 'Select the correct choice'
)
BriceonWiley commented 5 months ago

That'll work, then. Thanks for the follow-up!