update survey demo 5, switched from timeline variables to constructin…

…g trials in a loop
jspsych · Jan 5, 2024 · ebd14f2 · ebd14f2
1 parent 12b13d5
commit ebd14f2
Showing 1 changed file with 40 additions and 27 deletions.
diff --git a/docs/demos/jspsych-survey-demo5.html b/docs/demos/jspsych-survey-demo5.html
@@ -5,63 +5,76 @@
     <script src="docs-demo-timeline.js"></script>
     <script src="https://unpkg.com/[email protected]"></script>
     <script src="https://unpkg.com/@jspsych/[email protected]"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-survey@0.2.2"></script>
+    <script src="../../packages/plugin-survey/dist/index.browser.js"></script>
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/jspsych.css" />
-    <link rel="stylesheet" href="https://unpkg.com/@jspsych/plugin-survey@0.2.2/css/survey.css">
+    <link rel="stylesheet" href="../../packages/plugin-survey/css/survey.css">
     <link rel="stylesheet" href="docs-demo.css" type="text/css">
   </head>
   <body></body>
   <script>
 
     const jsPsych = initJsPsych();
 
-    const question_info = [
+    // values that change across survey trials - each object represents a single trial
+    const question_variables = [
       {
         'fruit': 'apples',
         'Q1_prompt': 'Do you like apples?', 
         'Q1_type': 'regular'
       },
+      {
+        'fruit': 'pears',
+        'Q1_prompt': 'Do you like pears?', 
+        'Q1_type': 'regular'
+      },
       {
         'fruit': 'bananas',
         'Q1_prompt': 'Do you NOT like bananas?', 
         'Q1_type': 'reverse'
       },
     ];
 
-    const survey = {
-      type: jsPsychSurvey,
-      pages:[
-        [
+    // create an array to store all of our survey trials so that we can easily randomize their order
+    survey_trials = [];
+
+    // construct the survey trials dynamically using an array of question-specific information
+    for (let i=0; i<question_variables.length; i++) {
+
+      // set up the survey JSON for this trial
+      // any question-specific variables come from the appropriate object in the question_variables array
+      let survey_json = {
+        showQuestionNumbers: false,
+        title: 'Dynamically constructing survey trials.',
+        elements: [
           {
-            type: 'multi-choice',
-            prompt: jsPsych.timelineVariable('Q1_prompt'),
-            options: ['Yes', 'No'],
+            type: 'radiogroup',
+            title: question_variables[i].Q1_prompt,
+            choices: ['Yes', 'No'],
             name: 'Q1'
           },
           {
             type: 'text',
-            prompt: function() {
-              return `What's your favorite thing about ${jsPsych.timelineVariable('fruit')}?`;
-            },
+            title: 'What is your favorite thing about ' + question_variables[i].fruit + '?',
             name: 'Q2'
           }
         ]
-      ],
-      data: {
-        'Q1_prompt': jsPsych.timelineVariable('Q1_prompt'),
-        'Q1_type': jsPsych.timelineVariable('Q1_type'),
-        'fruit': jsPsych.timelineVariable('fruit')                                                        
-      },
-      button_label_finish: 'Continue'                
-    };
+      };
+
+      // set up a survey trial object using the JSON we've just created for this question, 
+      // and add the trial object to the survey trials array
+      survey_trials.push({
+        type: jsPsychSurvey,
+        survey_json: JSON.stringify(survey_json),
+        data: {
+          'Q1_prompt': question_variables[i].Q1_prompt,
+          'Q1_type': question_variables[i].Q1_type,
+          'fruit': question_variables[i].fruit                                                        
+        }  
+      });
 
-    const survey_procedure = {
-      timeline: [survey],
-      timeline_variables: question_info,
-      randomize_order: true
-    };
+    }
 
-    const timeline = [survey_procedure];
+    const timeline = jsPsych.randomization.shuffle(survey_trials);
 
     if (typeof jsPsych !== "undefined") {
       jsPsych.run(generateDocsDemoTimeline(timeline));