проблема с вставкой графика в пробную версию в JsPsych

Question

Я пытаюсь реализовать психологическую задачу в javascript. Мне нужно это: -отобразить диаграмму в течение 8 секунд; -спросить пользователя ответить на вопрос (я использовал готовый плагин). С помощью JsPsych я могу создать два испытания, и они вывести их sh на временной шкале.

Для реализации первого трейла я использовал плагин «вызов функции» и вызвал функцию, которая создает график с помощью диаграммы Js.

Проблема в том, что я не могу остановить функцию, которая показывает график, и go для следующей части эксперимента.

Я также пытался изменить порядок испытаний и фактически программа продолжает показывать только график, а не другую пробную версию.

Надеюсь, у кого-нибудь есть предложение, как решить эту проблему! Заранее спасибо! Вот код:

//create random values for market value
        var spareRandom = null;
                var marketValue1 = [0,
                normalRandomScaled(0,1)*50,
                normalRandomScaled(0,1)*50,
                normalRandomScaled(0,1)*50,
                normalRandomScaled(0,1)*50,
                normalRandomScaled(0,1)*50,
                normalRandomScaled(0,1)*50
                ];

                var marketValue = [0,
                normalRandomScaled(0,1)*50,
                normalRandomScaled(0,1)*50,
                normalRandomScaled(0,1)*50,
                normalRandomScaled(0,1)*50,
                normalRandomScaled(0,1)*50,
                normalRandomScaled(0,1)*50
                ];

// create timeline
var timeline = [];


//create the first trial
var trial2 = {
 type: 'image-slider-response',
 stimulus: 'img/port.png',
 stimulus_height: 200,
 stimulus_width:700,
 maintain_aspect_ration: true,
 labels: ['-99 (yes)', '99 (no)'],
 slider_width: 500,
 require_movement: false,
 trial_duration: 8000
}


timeline.push(trial2);


//create the second trial
        var trial3 = {
        type: 'call-function',
        func: displaychart(marketValue),
            trial_duration: 1000
         }



timeline.push(trial3);

// create the function which display a graph with random value generated before

    function displaychart(marketValue) {

     var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
     var config = {
         type: 'line',
         data: {
             labels: ['1', '2', '3', '4', '5', '6', '7'],
             datasets: [{
                 label: 'My First dataset',
                 backgroundColor: window.chartColors.red,
                 borderColor: window.chartColors.red,
                 data: marketValue,
                 fill: false,
             }, ]
         },
         options: {

             responsive: true,
             title: {
                 display: true,
                 text: 'Chart.js Line Chart'
             },
             tooltips: {
                 enabled: false,


             },
             hover: {
                 mode: 'nearest',
                 intersect: false
             },
             legend: {
                                    display: false
                            },
 elements: {
point:{
                                                radius: 0
                                        },
                line: {
                        tension: 0
                }
        },
             scales: {
                 xAxes: [{
                     display: true,
                     scaleLabel: {
                         display: false,
                         labelString: 'Month'
                     }
                 }],
                 yAxes: [{
                     display: true,
                     scaleLabel: {
                         display: false,
                         labelString: 'Value'
                     }
                 }]
             }
         }
     };

     window.onload = function() {
         var ctx = document.getElementById('canvas').getContext('2d');
         window.myLine = new Chart(ctx, config);
     };



     var colorNames = Object.keys(window.chartColors);
     document.getElementById('addDataset').addEventListener('click', function() {
         var colorName = colorNames[config.data.datasets.length % colorNames.length];
         var newColor = window.chartColors[colorName];
         var newDataset = {
             label: 'Dataset ' + config.data.datasets.length,
             backgroundColor: newColor,
             borderColor: newColor,
             data: [],
             fill: false
         };

         for (var index = 0; index < config.data.labels.length; ++index) {
             newDataset.data.push(randomScalingFactor());
         }

         config.data.datasets.push(newDataset);
         window.myLine.update();
     });


     done(config);

        }


//function which generate random values

function normalRandom()
{
    var val, u, v, s, mul;

    if(spareRandom !== null)
    {
        val = spareRandom;
        spareRandom = null;
    }
    else
    {
        do
        {
            u = Math.random()*2-1;
            v = Math.random()*2-1;

            s = u*u+v*v;
        } while(s === 0 || s >= 1);

        mul = Math.sqrt(-2 * Math.log(s) / s);

        val = u * mul;
        spareRandom = v * mul;
    }

    return val;
}

function normalRandomScaled(mean, stddev)
{
    var r = normalRandom();

    r = r * stddev + mean;

    return r;
}




  jsPsych.init({
    timeline: [trial2,trial3]

  });


    </script>