Fix broken examples: replace jsPsych.timelineVariable with evaluateTimelineVariable in parameter functions

[Copilot]

Summary

This PR fixes two example files that were incorrectly using jsPsych.timelineVariable() inside parameter functions. According to jsPsych best practices, jsPsych.evaluateTimelineVariable() should be used when referencing timeline variables within functions, as it immediately evaluates the variable's current value, while jsPsych.timelineVariable() creates a placeholder for delayed evaluation.

Changes

examples/jspsych-canvas-keyboard-response.html

• Replaced 5 instances of jsPsych.timelineVariable() with jsPsych.evaluateTimelineVariable() inside the stimulus function
• Updated the comment to reflect the correct function name

Before:

stimulus: function(c) {
  var ctx = c.getContext('2d');
  ctx.beginPath();
  ctx.fillStyle = jsPsych.timelineVariable('color');
  ctx.fillRect(
    jsPsych.timelineVariable('upper_left_x'),
    jsPsych.timelineVariable('upper_left_y'),
    jsPsych.timelineVariable('width'),
    jsPsych.timelineVariable('height')
  );
  ctx.stroke();
}

After:

stimulus: function(c) {
  var ctx = c.getContext('2d');
  ctx.beginPath();
  ctx.fillStyle = jsPsych.evaluateTimelineVariable('color');
  ctx.fillRect(
    jsPsych.evaluateTimelineVariable('upper_left_x'),
    jsPsych.evaluateTimelineVariable('upper_left_y'),
    jsPsych.evaluateTimelineVariable('width'),
    jsPsych.evaluateTimelineVariable('height')
  );
  ctx.stroke();
}

examples/timeline-variables.html

• Replaced jsPsych.timelineVariable('v2', true) with jsPsych.evaluateTimelineVariable('v2') inside the prompt function
• Removed the deprecated second parameter

Before:

prompt: function() { 
  return '<p>Have you seen '+jsPsych.timelineVariable('v2', true)+ ' before? Press "y" or "n".</p>' 
}

After:

prompt: function() { 
  return '<p>Have you seen '+jsPsych.evaluateTimelineVariable('v2')+ ' before? Press "y" or "n".</p>' 
}

Verification

• All existing tests pass
• Comprehensive search confirmed no other similar issues exist in the repository
• Changes align with existing correct usage in jspsych-canvas-button-response.html

Fixes #[issue number]

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Broken example jspsych-canvas-keyboard-response.html</issue_title>
<issue_description>It looks like examples/jspsych-canvas-keyboard-response.html needs to be updated to work with the change to evaluateTimelineVariable inside parameter functions. Specifically, inside the stimulus function (below), jsPsych.timelineVariable should be jsPsych.evaluateTimelineVariable.

    var trial_procedure = {
      timeline: [{
        type: jsPsychCanvasKeyboardResponse,
        stimulus: function(c) {
          var ctx = c.getContext('2d');
          ctx.beginPath();
          ctx.fillStyle = jsPsych.timelineVariable('color');
          ctx.fillRect(
            jsPsych.timelineVariable('upper_left_x'),
            jsPsych.timelineVariable('upper_left_y'),
            jsPsych.timelineVariable('width'),
            jsPsych.timelineVariable('height')
          );
          ctx.stroke();
        },
        choices: ['r','b'],
        prompt: '<p>What color is the rectangle? Press "r" for red and "b" for blue.</p>',
        data: {color: jsPsych.timelineVariable('color')}
      }],
      timeline_variables: [
        {upper_left_x: 150, upper_left_y: 100, height: 100, width: 150, color: 'red'},
        {upper_left_x: 270, upper_left_y: 200, height: 300, width: 200, color: 'blue'},
        {upper_left_x: 150, upper_left_y: 130, height: 200, width: 50, color: 'blue'}
      ]
    };

It's probably also doing a global search for jsPsych.timelineVariable just to check that we haven't missed other similar cases that need to be changed.</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #3613

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[changeset-bot]

⚠️ No Changeset found

Latest commit: d11ea3e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[jodeleeuw]

@copilot can you check if there are any other examples in the documentation where jsPsych.timelineVariable() is used inside of a function? if so, please fix those to be jsPsych.evaluateTimelineVariable().

[Copilot]

@copilot can you check if there are any other examples in the documentation where jsPsych.timelineVariable() is used inside of a function? if so, please fix those to be `jsPsych.evaluateTimelineVari...

I've completed a comprehensive search of all documentation (.md files) and example files (.html files) in both the docs/ and examples/ directories. The search specifically looked for instances of jsPsych.timelineVariable() used inside function bodies.

The good news is that there are no other instances that need to be fixed. The two files I already corrected in commit d11ea3e were the only ones with this issue:

• examples/jspsych-canvas-keyboard-response.html
• examples/timeline-variables.html

All other uses of jsPsych.timelineVariable() in the documentation and examples are correct - they're used as direct parameter values (not inside functions), which is the appropriate usage. Files like docs/plugins/canvas-button-response.md and docs/demos/jspsych-canvas-button-response-demo3.html already correctly use jsPsych.evaluateTimelineVariable() inside their stimulus functions.