Insert image in choices? #2200
-
|
Hi! Part of my experiment consists of applying a short version of the raven test. I'm using the "image-button-response" plugin to place the images. What I did is add in "choices" a numeric value: 1, 2, 3 etc. for participants to choose the option they consider correct. I was wondering if there is any way to replace the numbers with the images of the different options so that the subjects touch directly on the image and not on the number that corresponds to the option. I hope I was clear! Thanks |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 6 replies
-
|
Hi @ler93, yes you can do that. You can set up the I hope that helps - let us know if you need any further guidance. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks Becky! Your answer helped me a lot. |
Beta Was this translation helpful? Give feedback.
-
|
Hello again, @becky-gilbert . Sorry to reopen this conversation. I tried the method you indicated but the problem is that when I position over any of the choices (now images), the cursor doesn't change from the "arrow" to the "hand". I'm afraid that participants may doubt about the place where they should click. Is there any way to change this? Just in case, I copy the code below. |
Beta Was this translation helpful? Give feedback.
-
|
Hmm, that's odd - I think there might be an error in the example code that I linked to. Try this: button_html: '<button class="jspsych-btn"><img src = "%choice%" /></button>' |
Beta Was this translation helpful? Give feedback.
-
|
It worked perfectly! Thank you very much, Becky! |
Beta Was this translation helpful? Give feedback.
-
|
Hi again, @becky-gilbert. Is there a way for choices to appear on two different lines, one below the other? (I would like the raven test options to appear as in the original test: 4 above and 4 below). Thanks and sorry for so many concerns! The code for this line is: ''' ''' |
Beta Was this translation helpful? Give feedback.
-
|
Hi @ler93, this is something you'll need to do using CSS. There are lots of ways to change the button position layout. I think one way to do this is by reducing the width of the div that holds all of the buttons/images to 50% of it's normal width, so that only half of the buttons/images will fit horizontally and the rest of the buttons/images will have to wrap down into a new row. If you do this, then you'll also need to re-center div container (because reducing it's width to 50% will make it appear on the left-side of the screen). The ID of the button container in the <head>
/* load the JavaScript files, etc */
<script src="..."></script>
/* add a style section here, if you don't have one already */
<style>
#jspsych-image-button-response-btngroup {
width: 50%;
transform: translate(50%,0);
}
</style>
</head>
<body></body>
<script>
// jsPsych experiment code ...Does that solution work for you? Also, you might find the jsPsych Controlling Visual Appearance documentation page useful for CSS stuff. The section Tips for working with CSS might be especially useful as it explains how to use the developer tools to identify the elements on the page and immediately see the results of changing their CSS rules. |
Beta Was this translation helpful? Give feedback.
-
|
Becky! I was able to do it with the code you send me. I wanted to comment what steps I followed, in case someone working in cognition.run face the same problem in the future. Done this, save the file in CSS format, and I just uploaded it to cognition.run as external JS/CSS. The changes were automatically applied to my experiment. |
Beta Was this translation helpful? Give feedback.
-
|
Great, thanks so much for the update, and for clarifying the steps! |
Beta Was this translation helpful? Give feedback.
Hi @ler93, yes you can do that. You can set up the
choicesarray so that it contains the image file paths. Then, use thebutton_htmlparameter to add animgelement into the button, which should have asrcattribute whose value is the file that comes from thechoicesarray. The second example on the documentation page for theaudio-button-responseplugin shows how to do this.I hope that helps - let us know if you need any further guidance.