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

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

 

 

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.

Thanks, I've tested this in a cloned form and it works.
...

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.

I'm set (as in I know what to do now). I can handle things from here.
Thanks.
Marcin
...