Adding a checklist of sentences on a single trial screen

[dilayercelik]

Hi!

I'd like to have one trial screen with a checklist of sentences, i.e. a list of sentences, where each sentence has a corresponding checkbox next to it (see image). Participants would be asked to check the sentences they remember having seen more than once throughout the experiment. There are 60 of such sentences so it would be rather long list.

I have tried using the html-button-response plugin for this: instead of having a checklist, I thought about having 60 buttons, where the text of each button is one of the 60 sentences I have. The thing is, I don't think I can let the participant press as many buttons as they want (the trial stops after one press) and record all button answers. Also, that would make the screen look a bit different from what I had in mind (although this would be less of an issue, compared to not being able to record multiple button responses).

I thought about using the external-html plugin as well: here, I'd have an HTML page, kind of like what we would have for a consent form where participants can check blocks of texts ("I consent to..."). In this scenario, I'm not sure I can again actually record all the checked boxes (I think you can only put a condition so that the participant is forced to check before proceeding to the experiment). Also, 60 sentences may be too much for that type of stimuli presentation.

Does anyone know if there's a way to produce such a checklist and be able to record all checked boxes corresponding to my sentences? Or would you suggest to use the html-button-response for example, but with one sentence at a time being shown on screen (in which case, the "only a single button can be pressed and recorded per trial screen" rule would be satisfied)?

IMAGE BELOW

Thank you in advance!
Dilay

[wenbo-lin]

You can try using the survey-html-form plugin.

Maybe something like this?

var form_trial = {
		type: 'survey-html-form',
		preamble:'What is your favorite animal?',
		html:`<div style="text-align: left">
		
		<input type="checkbox" name="statement1" value="Red Panda"><label for="statement1">Red Panda</label> <br>
		<input type="checkbox" name="statement2" value="Arctic Fox"><label for="statement2">Arctic Fox </label> <br>
		<input type="checkbox" name="statement3" value="Giant Panda"><label for="statement3">Giant Panda</label> <br>
	
		</div>`
}

Instead of using single quotes to enclose things for the html: parameter, I used backticks because they allow me to write my code in multiple lines. I did this to increase readability.

Here are examples of single quotes vs. backticks for enclosing a multi-line string.

Single quotes

console.log('John\n' +
'Age: 24');
// "John
// Age: 24"

Backticks

console.log(`John
Age: 24`);
// "John
// Age: 24"

You can read more about using backticks (template literals) here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

[dilayercelik]

Thank you very much for your answer! This worked like a charm :)

Do you know how I can access the participant's response for each of these statements/checkboxes?

I tried adding this bit as a parameter to form_trial but I can't seem to access the data:

on_finish: function(data) { MemoryTest_response1 = JSON.parse(jsPsych.data.getLastTrialData().values()[0].responses).statement1 }

(I changed the "name" value to be statement1, statement2 etc.: I think I need to use those as keys to the responses dictionary, but I'm not sure)

I'd like to access the data for each statement, if possible: do you know how I can achieve that or what I'd need to change in the code above?

Thank you again for your help!

[becky-gilbert]

Hi @dilayercelik, does the survey-multi-select plugin work for this? It allows you to present a question along with a set of checkbox response options. To see what it does, you can run the example file in your jsPsych folder: /examples/jspsych-survey-multi-select.html