Add Page Breaks between prompts in survey-text?

[RachaelBryant]

I've tried CSS style, conditional if statements and adding a new variable for it and nothing has worked so far. But I'm sure that it's possible! Does anyone have any idea how to make it happen? This is the trial in which I would like each prompt to be shown on separate pages instead of in one line down the page:

var trial1= {
type:'survey-text',
questions: [
{prompt: "cow bill bat cap"},
{prompt: "cow bill bat cap"},
{prompt: "rib mess mad rag"},
{prompt: "rib mess mad rag"},
{prompt: "bond sum sat bag"},
{prompt: "bond sum sat bag"},
{prompt: "pry hem hat pan"},
{prompt: "pry hem hat pan"},
{prompt: "few bud ban fat"},
{prompt: "few bud ban fat"},
{prompt: "bun way wet bed"},
{prompt: "bun way wet bed"},
{prompt: "him rave rob hot"},
{prompt: "him rave rob hot"},
{prompt: "tank fed fig tip"},
{prompt: "tank fed fig tip"},
{prompt: "ray pull pet red"},
{prompt: "ray pull pet red"},
{prompt: "gas pro pen get"},
{prompt: "gas pro pen get"},
{prompt: "ten hill ham tab"},
{prompt: "ten hill ham tab"},
{prompt: "bird tuck tool boom"},
{prompt: "bird tuck tool boom"},
{prompt: "pit hung hood poor"},
{prompt: "pit hung hood poor"},
{prompt: "try long like time"},
{prompt: "try long like time"},
{prompt: "push bot bike pile"},
{prompt: "push bot bike pile"},
{prompt: "mug root rice mike"},
{prompt: "mug root rice mike"},
{prompt: "weep surf sole woke"},
{prompt: "sub toy tile sine"},
{prompt: "sub toy tile sine"},
{prompt: "weep surf sole woke"},
{prompt: "run mat mole rose"},
{prompt: "run mat mole rose"},
{prompt: "low rush rite lice"},
{prompt: "low rush rite lice"},
{prompt: "past rung rode poke"},
{prompt: "past rung rode poke"},
{prompt: "bull mix mode bone"},
{prompt: "bull mix mode bone"},
{prompt: "ball dorm deck bust"},
{prompt: "ball dorm deck bust"},
{prompt: "rum dock deck bust"},
{prompt: "rum dock deck bust"},
{prompt: "fun peg pack fist"},
{prompt: "fun peg pack fist"},
{prompt: "day meek mist dull"},
{prompt: "day meek mist dull"},
{prompt: "fry bang beet fool"},
{prompt: "fry bang beet fool"},
{prompt: "pig dawn deem pool"},
{prompt: "pig dawn deem pool"},
{prompt: "sip fax feed soon"},
{prompt: "sip fax feed soon"},
{prompt: "lump fawn feet look"},
{prompt: "lump fawn feet look"},
{prompt: "may rid reef moot"},
{prompt: "may rid reef moot"},
{prompt: "less bye bait loud"},
{prompt: "less bye bait loud"},
{prompt: "lush mitt mean loop"},
{prompt: "lush mitt mean loop"},
{prompt: "bad nip nut beg"},
{prompt: "bad nip nut beg"},
{prompt: "hold tug tin hap"},
{prompt: "hold tug tin hap"},
{prompt: "cut milk mop cab"},
{prompt: "cut milk mop cab"},
{prompt: "cry pug pod cat"},
{prompt: "cry pug pod cat"},
{prompt: "dew lap lot dig"},
{prompt: "dew lap lot dig"},
{prompt: "fuzz howl his fan"},
{prompt: "fuzz howl his fan"},
{prompt: "let curb con lag"},
{prompt: "let curb con lag"},
{prompt: "week fur fill wash"},
{prompt: "week fur fill wash"},
{prompt: "lid men moth lack"},
{prompt: "lid men moth lack"},
{prompt: "man set suck mill"},
{prompt: "man set suck mill"},
{prompt: "born leg lust back"},
{prompt: "born leg lust back"}
],
choices: "ALL_KEYS",
trial_duration: 2000,
data:"trial1",
style: 'pageBreakInside',
trial_type: 'first response',
on_trial_start:function(data){
if(questions == TRUE){
pageBreakInside == TRUE("")
}
}
};

[vijaymarupudi]

If you want each prompt to be on a different page, you're looking for different trials with one prompt each. I would recommend completing the jsPsych tutorial which guides you through that process: https://www.jspsych.org/tutorials/rt-task/

[RachaelBryant]

I've done that... and yes I understand that that's one way, but I was hoping that I could stylistically make them appear on separate pages but keep it as one variable because I have 4 sets of these and I would like to keep each set together that way. It should be possible to make page breaks, I've seen line breaks used and there is pageBreakInside used for variables, but somehow I haven't gotten it quite right,

[vijaymarupudi]

Well, it's possible, but I don't think that's the jsPsych way. I would recommend you to make each one a different trial and after the experiment is done get the csv / json and then combine the data using R, Excel, Javascript, etc.

Data parameters will help in this process: https://www.jspsych.org/overview/data/#adding-data-to-a-particular-trial-or-set-of-trials

[RachaelBryant]

I haven't gotten anything to work, so it's not intuitive, no. But I put my question on here because I think it should work and wanted to know if anyone's done it. With conditional statements it really should be possible, but I think my wording's been off. It's okay if you haven't done it before.

[vijaymarupudi]

It is possible, and I know how to do it, but the solution is much more complicated than what is currently in your code. Using conditional functions will not accomplish what you want to do (or at least what I think you want to do). You'll have to edit the plugin itself.

If you want to go down that path, I would recommend looking into viewport units, specifically 100vh. You'll want to insert a div element over here in the plugin. You'll also have to write some javascript to handle the click event to move to the next prompt within the same plugin trial. This will require you to have a substantial understanding of javascript, and I will defer to other contributors to provide support to this method if they would like to.

I've posted the solution I would recommend given the structure of jsPsych--let me know if you'd like to know how to do it that way. jsPsych is made to work this way, it provides tools to do so. Let me know if you have any further questions.