Uncaught TypeError: e.type is not a constructor and trial level node is missing the "type" parameter errors

Question

I'm pretty new to coding and I'm currently trying to display two graphs using chart.js. My hope is to have them display one after the other after some text appears on the screen. The text shows up fine, but once I move to where the graphs should be, I get these two errors. How do I solve this?

Here is my code:

var jsPsych = initJsPsych ({});
var timeline = [];
var welcome = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: "Hey there! Let's view some cool graphs. Press any key to continue."
};
timeline.push(welcome);

var firstGraph = {
  stimulus: function () {
    const ctx = document.getElementById('myChart');
    const myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Red', 'Green'],
        datasets: [{
          label: '# of Votes',
          data: [12, 5],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(75, 192, 192, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(75, 192, 192, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    })
  }
};
timeline.push(firstGraph);

var secondGraph = {
  stimulus: function() {
    var ctx = document.getElementById("twoChart").getContext('2d');
    var dataValues = [12, 19, 3, 5];
    var dataLabels = [0, 1, 2, 3, 4];
    var twoChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: dataLabels,
        datasets: [{
          label: 'Group A',
          data: dataValues,
          backgroundColor: 'rgba(255, 99, 132, 1)',
        }]
      },
      options: {
        scales: {
          xAxes: [{
            display: false,
            barPercentage: 1.3,
            ticks: {
              max: 3,
            }
          }, {
            display: true,
            ticks: {
              autoSkip: false,
              max: 4,
            }
          }],
          yAxes: [{
            ticks: {
              beginAtZero:true
            }
          }]
        }
      }
    })
  }
};

timeline.push(secondGraph);

jsPsych.run(timeline);

<div>
  <canvas id="myChart"></canvas>
  <canvas id="twoChart"></canvas>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<script src="https://unpkg.com/[email protected]" ></script>
<script src="https://unpkg.com/@jspsych/[email protected]" ></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/jspsych.css" type="text/css" >

Any suggestions are greatly appreciated!

Answer 1

Any object on a jsPsych timeline must have either a type property that specifies which plugin to use for that trial, or it must have a timeline property that contains a nested set of trials.

In your current code the firstGraph and secondGraph variables don't have a type parameter, so jsPsych doesn't know what plugin to use to display the trial.

Given that your stimulus parameter is a function that is accessing a <canvas> element, the canvas-keyboard-response plugin might be the right choice. You can see demos and example code of how to use it at the bottom of the documentation page.