What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How can I make the images stick to the radio button field when adding the Shuffle widget?

    Asked by mopacki on April 12, 2017 at 06:13 AM

    Hi,

     

    I'm working on a test fora class that I'm teaching. The test uses images as crucial elicitation material/visual aids. This means the images must be paired with their specific questions.

     

    I would like to use the shuffle widget to randomize my questions; however, when I do this the images are shuffled around independently from the questions themselves.

     

    My question is: is there a way to group the questions and images somehow to make them get shuffled as indivisible constructs? Or, alternately, is there a way to upload images into the questions?

     

    Best regards,

     

    Marcin

     

     

  • Profile Image
    JotForm Support

    Answered by Welvin on April 12, 2017 at 09:06 AM

    The images are considered fields, so that's why the widget include it when shuffling. A workaround would be to add the images as a background image by custom CSS codes.

    For example, the following custom CSS codes for the first field:

    li#id_35:before {

        position: absolute;

        content: " ";

        background: url(https://www.jotform.com/uploads/mopacki/form_files/machine_tree.165.jpg);

        background-size: 100% 100%;

        width: 287px;

        height: 307px;

        top: -334px;

    }

     

    To inject: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

    The "id_35" is the field ID of the first field. You can get the field ID by following the steps on this guide: https://www.jotform.com/help/146-How-to-find-Field-IDs-Names

    You just need to change the background URL for the other fields. The rest are the same. We can help you do this, just please let us know.

  • Profile Image

    Answered by mopacki on April 12, 2017 at 11:45 AM
    Thanks, I've tested this in a cloned form and it works.
    ...
  • Profile Image
    JotForm Support

    Answered by Welvin on April 12, 2017 at 12:59 PM

    Are you all set now? If you need help with it, let us know here and share with us the form you want to add the background method.

  • Profile Image

    Answered by mopacki on April 12, 2017 at 01:45 PM
    I'm set (as in I know what to do now). I can handle things from here.
    Thanks.
    Marcin
    ...