Survey-Multi-Choice: Show one question per page

[steventmartinez]

Hi, apologies if this is a trivial question, I'm a bit new to jsPsych!

I am trying to figure out the best way to use the survey-multi-choice plug-in to show one question per page, rather than list all the questions on one page.

Here is an example of a block of questions that I am working with. I have similar sets of questions for 7 other videos.

Are there any helpful hints for modifying the survey-multi-choice plug-in or is there an easier solution using the current parameters as they are that I am not seeing? Thanks so much in advance!

var video1_questions = {
    type: jsPsychSurveyMultiChoice,
    questions: [
          {prompt: "<p><div style ='font-size:30px;'>What time did the fire start?</div></p>",
              name: 'Question1',
              options: ['2:30AM', '4:00AM', '8:30PM', '2:00PM'], 
              required: true,
          },
          {prompt: "<p><div style ='font-size:30px;'>Where in Baltimore County did this fire take place?</div></p>",
              name: 'Question2',
              options: ['Owings Mills', 'Hampton', 'Overlea', 'Crofton'], 
              required: true,
          },
          {prompt: "<p><div style ='font-size:30px;'>Where in the house did the fire start?</div></p>",
              name: 'Question4',
              options: ['Basement', '1st floor', '2nd floor', 'Living room'], 
              required: true,
          },
          {prompt: "<p><div style ='font-size:30px;'>How many firefighters were on the ladder?</div></p>",
              name: 'Question9',
              options: ['1', '4', '3', '2'], 
              required: true,
          }
    ],
  }

[jodeleeuw]

Hi @steventmartinez,

To get the questions on separate pages the simplest thing is just to split it up into multiple trials.

var video1_questions_1 = {
    type: jsPsychSurveyMultiChoice,
    questions: [
          {prompt: "<p><div style ='font-size:30px;'>What time did the fire start?</div></p>",
              name: 'Question1',
              options: ['2:30AM', '4:00AM', '8:30PM', '2:00PM'], 
              required: true,
          },
    ]
}

var video1_questions_2 = {
    type: jsPsychSurveyMultiChoice,
    questions: [
        {prompt: "<p><div style ='font-size:30px;'>Where in Baltimore County did this fire take place?</div></p>",
              name: 'Question2',
              options: ['Owings Mills', 'Hampton', 'Overlea', 'Crofton'], 
              required: true,
          },
    ]
  }

// ... etc ...

If you want to group these questions together for developer organization then you can use a nested timeline.

[steventmartinez]

Thanks so much! I've tried splitting the questions into separate trials, but I think what I am missing is using the nested timeline to group the questions together.

Thanks again for all your help and for passing along the documentation!

[eran3006]

Can you please give an example of how to write the nested timeline?
Does each question inside the timeline array has to be an object "questions" which is another array of objects?

thank you!

[jodeleeuw]

Yes, something like this should work:

var questions = {
  type: jsPsychSurveyMultiChoice,
  timeline: [
    {
      questions: [ {
        prompt: "<p><div style ='font-size:30px;'>What time did the fire start?</div></p>",
        name: 'Question1',
        options: ['2:30AM', '4:00AM', '8:30PM', '2:00PM'], 
        required: true,
     }]
   },
   {
      questions: [ {
        prompt: "<p><div style ='font-size:30px;'>What time did the fire start?</div></p>",
        name: 'Question2',
        options: ['Owings Mills', 'Hampton', 'Overlea', 'Crofton'], 
        required: true,
     }]
    },
  ]
}

[eran3006]

Thank you so much! this is great