Showing or Hiding Subsequent Survey Pages Based Upon Answers in Previous Survey Pages #3143

wj-mitchell · 2023-09-28T00:53:06Z

wj-mitchell
Sep 28, 2023

Goal & Question

This simple demonstration should generate a survey using jsPsych that ideally displays one or two screens, depending upon the choices made by the participant. It calls just one plugin, Survey, and asks two questions: 1) Do you have a dog?, and, if so, 2) What is your dog's name? However, I am having trouble figuring out whether I can hide or show a page conditionally upon a response given within the same event. I'd recently asked a related but different question regarding dynamically adding new events to an active timeline. It seems to me that a solution to either of these questions could solve an issue that I'm running into, but I elected to open a new discussion rather than edit the old one since it seems to me that the solutions should be fairly different from one another.

Edit

A solution was found for the previously referenced related question using conditional functions, [as outlined in the Conditional Timelines portion of the 'Creating an Experiment' tutorial]{https://www.jspsych.org/7.0/overview/timeline/#conditional-timelines}. As such, in a pinch, a person could likely just generate multiple survey events and using conditional functions to skip as needed.

Example Code

I believe this example should be reproducible and demonstrate my issue. Thanks for your time and effort!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Experiment Title -->
  <title>Experiment</title>

  <!-- Loading in libraries  -->
  <script src="https://unpkg.com/[email protected]"></script>
  <script src="https://unpkg.com/@jspsych/[email protected]"></script>
  <link href="https://unpkg.com/[email protected]/css/jspsych.css" rel="stylesheet" type="text/css" />   
</head>

<!-- Determing general page style parameters -->
<body style="background-color: rgb(200, 200, 200);">
<script>
    

// | - - - - - - - - - - - - - - - - - - - - - - - - - - |
// | - - - - - - - - EXPERIMENT VARIABLES - - - - - - -  |
// | - - - - - - - - - - - - - - - - - - - - - - - - - - |   

// Initiating jsPsych
var jsPsych = initJsPsych({
  timeline: timeline,
});

// Creating a survey with two pages
  var Survey = {
    type: jsPsychSurvey, 
    pages: [
        [
            {
                type: 'multi-choice',
                prompt: 'Do you have a dog?',
                options: ['Yes', 'No'],
                option_reorder: "random",
                name: 'DogStatus',
                required: true,
            },
        ],
        // Ideally, if the participant indicates 'No', this page is skipped. 
        // If the participant indicates 'Yes', this page appears
        [
            {
                type: 'text',
                prompt: 'What is your dogs name?',
                name: 'DogName',
                required: false,
            },     
        ],        
    ],
    randomize_question_order: false,
  };

// | - - - - - - - - - - - - - - - - - - - - - - - - - - |
// | - - - - - - - - EXPERIMENT TIMELINE - - - - - - - - |
// | - - - - - - - - - - - - - - - - - - - - - - - - - - |    

  // Adding the Survey trial to the timeline
  timeline.push(Survey);

// | - - - - - - - - - - - - - - - - - - - - - - - - - - |
// | - - - - - - - - RUNNING EXPERIMENT  - - - - - - - - |
// | - - - - - - - - - - - - - - - - - - - - - - - - - - |   

  // Executing the timeline
  jsPsych.run(timeline);

</script>
</body>
</html>

Answered by wj-mitchell

Sep 28, 2023

This is one solution that seemed to work, instead using conditional functions and swapping out the survey functions for html button response and survey text:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Experiment Title -->
  <title>Experiment</title>

  <!-- Loading in libraries  -->
  <script src="https://unpkg.com/[email protected]"></script>
  <script src="https://unpkg.com/@jspsych/[email protected]"></script>
  <script src="https://unpkg.com/@jspsych/[email protected]"></script>
  <link href="https://unpkg.com/[email protected]/css/jspsych.css" rel="stylesheet" type="t…

View full answer

wj-mitchell · 2023-09-28T02:45:25Z

wj-mitchell
Sep 28, 2023
Author

This is one solution that seemed to work, instead using conditional functions and swapping out the survey functions for html button response and survey text:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Experiment Title -->
  <title>Experiment</title>

  <!-- Loading in libraries  -->
  <script src="https://unpkg.com/[email protected]"></script>
  <script src="https://unpkg.com/@jspsych/[email protected]"></script>
  <script src="https://unpkg.com/@jspsych/[email protected]"></script>
  <link href="https://unpkg.com/[email protected]/css/jspsych.css" rel="stylesheet" type="text/css" />   
</head>

<!-- Determing general page style parameters -->
<body style="background-color: rgb(200, 200, 200);">
<script>
    
// | - - - - - - - - - - - - - - - - - - - - - - - - - - |
// | - - - - - - - - EXPERIMENT VARIABLES - - - - - - -  |
// | - - - - - - - - - - - - - - - - - - - - - - - - - - |   

// Initiating jsPsych
var jsPsych = initJsPsych({
  timeline: timeline,
});

// Creating an array of choices
var choices = ['Yes', 'No']

// Creating an empty array which will act as our timeline
var timeline = [];

// Creating a survey with two pages
  var Survey_1 = {
    type: jsPsychHtmlButtonResponse, 
    stimulus: 'Do you have a dog?',
    choices: choices,
  };

  var Survey_2 = {
    type: jsPsychSurveyText, 
    questions: [
      {prompt: 'What is your dogs name?'}
    ]
  };

  
var if_node = {
  timeline: [Survey_2],
  conditional_function: function(){
    var dog_response = jsPsych.data.get().last(1).values()[0];

    console.log(dog_response)
    console.log(choices.indexOf('Yes'))
    console.log(choices.indexOf('No'))
      if (dog_response.response == choices.indexOf('Yes')) {
          return true;
      } 
      else {
          return false;
      }
  }
};

// | - - - - - - - - - - - - - - - - - - - - - - - - - - |
// | - - - - - - -  - RUNNING EXPERIMENT  - - - - - - - - |
// | - - - - - - - - - - - - - - - - - - - - - - - - - - |   

  // Executing the timeline
  jsPsych.run([Survey_1, if_node]);

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Showing or Hiding Subsequent Survey Pages Based Upon Answers in Previous Survey Pages #3143

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

Showing or Hiding Subsequent Survey Pages Based Upon Answers in Previous Survey Pages #3143

Uh oh!

Uh oh!

wj-mitchell Sep 28, 2023

Goal & Question

Edit

Example Code

Replies: 1 comment

Uh oh!

Uh oh!

wj-mitchell Sep 28, 2023 Author

wj-mitchell
Sep 28, 2023

wj-mitchell
Sep 28, 2023
Author