Cannot resize stimuli using image-keyboard-response #726

Cluster-Bomb · 2020-05-28T04:38:13Z

Cluster-Bomb
May 28, 2020

Hi there,

This parameter was working when I was building on my local machine however when I uploaded it to Pavlovia then it stopped working. Images remain in native format. Code below. Please note Pavlovia seems to only have copies of jspsych-6.0.0 in its library - tried to use 6.1.0 and it would not run on their platform.

`

<!doctype html>
<html lang="en">

<head>
	<title>Simple Reaction Time [jsPsych]</title>
	<meta charset="UTF-8">

	<script type="text/javascript" src="lib/vendors/jspsych-6.0.0/jspsych.js"></script>
	<link href="lib/vendors/jspsych-6.0.0/css/jspsych.css" rel="stylesheet" type="text/css" />
	<link href="jspsych.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="lib/vendors/jspsych-6.0.0/plugins/jspsych-html-keyboard-response.js"></script>
	<script type="text/javascript" src="lib/vendors/jspsych-6.0.0/plugins/jspsych-image-keyboard-response.js"></script>
	<script type="text/javascript" src="lib/vendors/jspsych-6.0.0/plugins/jspsych-reconstruction.js"></script>

	<script type="text/javascript" src="lib/vendors/jquery-2.2.0.min.js"></script>
	<script type="text/javascript" src="lib/jspsych-pavlovia-3.0.6.js"></script>
</head>

<body>
	<script type='text/javascript'>

		/* create timeline */
		var timeline = [];


		/* init connection with pavlovia.org */
		var pavlovia_init = {
			type: "pavlovia",
			command: "init"
		};
		timeline.push(pavlovia_init);
		
		/* create rotation function */
		function generateRotationStyle (rotation) {
        return "transform: rotate(" + rotation + "deg);"
      }

      var stim_function = function(param) {
        console.log(param)
        var rotation = 0 + param * 360;
        var style = generateRotationStyle(rotation)
        var html =
        '<br><br><br><br><br><br><br><br><br><img src="img/White_48px.png" width="208" height="12" style="' +
          style +
          '"></div></div><br><br><br><br><p>Press H to rotate line clockwise. Press G to rotate anticlockwise.</p>' +
          "<p>When when you have matched rotation, click Continue.</p>";
        return html;
      };

		/* define welcome message trial */
		var welcome = {
			type: "html-keyboard-response",
			stimulus: "Welcome to the experiment. Press any key to begin."
		};
		timeline.push(welcome);

		var instructions = {
      type: "html-keyboard-response",
        stimulus: "<br><br><p>In this experiment, an image like this one will appear in the center " +
        "of the screen.</p> <img src='img/stimuli/gabor-gaussian-10.00-96-30.00-0.03-0.00-128-128-128-160-160-160-96-96-96.png' width='208' height='208'></img><p>The image will remian" +
        " on screen for a short length of time. Immediately after a paddle will appear.</p>" +
        "<p>Your task is to orientate the paddle to match the orientation of the lines.</p>" +
        "<p>Press any key to begin.</p>"
     
        };
        timeline.push(instructions);

		var test_stimuli = [
          { stimulus: "img/stimuli/gabor-gaussian-10.00-96-30.00-0.03-0.00-128-128-128-160-160-160-96-96-96.png", data: {angle: 10}},
          { stimulus: "img/stimuli/gabor-gaussian-20.00-96-30.00-0.03-0.00-128-128-128-160-160-160-96-96-96.png", data: {angle: 20}},
          { stimulus: "img/stimuli/gabor-gaussian-30.00-96-30.00-0.03-0.00-128-128-128-160-160-160-96-96-96.png", data: {angle: 30}},
          { stimulus: "img/stimuli/gabor-gaussian-40.00-96-30.00-0.03-0.00-128-128-128-160-160-160-96-96-96.png", data: {angle: 40}},
          { stimulus: "img/stimuli/gabor-gaussian-50.00-96-30.00-0.03-0.00-128-128-128-160-160-160-96-96-96.png", data: {angle: 50}},
          { stimulus: "img/stimuli/gabor-gaussian-60.00-96-30.00-0.03-0.00-128-128-128-160-160-160-96-96-96.png", data: {angle: 60}},
          { stimulus: "img/stimuli/gabor-gaussian-70.00-96-30.00-0.03-0.00-128-128-128-160-160-160-96-96-96.png", data: {angle: 70}},
          { stimulus: "img/stimuli/gabor-gaussian-80.00-96-30.00-0.03-0.00-128-128-128-160-160-160-96-96-96.png", data: {angle: 80}},
          { stimulus: "img/stimuli/gabor-gaussian-90.00-96-30.00-0.03-0.00-128-128-128-160-160-160-96-96-96.png", data: {angle: 90}},
          { stimulus: "img/stimuli/gabor-gaussian-100.00-96-30.00-0.03-0.00-128-128-128-160-160-160-96-96-96.png", data: {angle: 100}},
          { stimulus: "img/stimuli/gabor-gaussian-110.00-96-30.00-0.03-0.00-128-128-128-160-160-160-96-96-96.png", data: {angle: 110}},
          { stimulus: "img/stimuli/gabor-gaussian-120.00-96-30.00-0.03-0.00-128-128-128-160-160-160-96-96-96.png", data: {angle: 120}},
          { stimulus: "img/stimuli/gabor-gaussian-130.00-96-30.00-0.03-0.00-128-128-128-160-160-160-96-96-96.png", data: {angle: 130}},
          { stimulus: "img/stimuli/gabor-gaussian-140.00-96-30.00-0.03-0.00-128-128-128-160-160-160-96-96-96.png", data: {angle: 140}},
          { stimulus: "img/stimuli/gabor-gaussian-150.00-96-30.00-0.03-0.00-128-128-128-160-160-160-96-96-96.png", data: {angle: 150}},
          { stimulus: "img/stimuli/gabor-gaussian-160.00-96-30.00-0.03-0.00-128-128-128-160-160-160-96-96-96.png", data: {angle: 160}},
          { stimulus: "img/stimuli/gabor-gaussian-170.00-96-30.00-0.03-0.00-128-128-128-160-160-160-96-96-96.png", data: {angle: 170}},
          { stimulus: "img/stimuli/gabor-gaussian-180.00-96-30.00-0.03-0.00-128-128-128-160-160-160-96-96-96.png", data: {angle: 180}}
      
        ];

		var fixation = {
			type: 'html-keyboard-response',
			stimulus: '<div style="font-size:60px;">+</div>',
			choices: jsPsych.NO_KEYS,
			trial_duration: 1000
		}
		
		var mask = {
          type: 'image-keyboard-response',
          stimulus: "img/mask_patch1.png",
          choices: jsPsych.NO_KEYS,
          trial_duration: 1000,
          stimulus_height: 208,
          maintain_aspect_ration: true,
        }

		var test = {
          type: "image-keyboard-response",
          stimulus: jsPsych.timelineVariable('stimulus'),
          choices: jsPsych.NO_KEYS,
          trial_duration: 500,
          stimulus_height: 208,
          maintain_aspect_ration: true,
        }
        
        var capture = {
        type: "reconstruction",
        stim_function: stim_function,
        starting_value: 0.5,
        step_size: 0.025
        }

		var test_procedure = {
			timeline: [fixation, test, mask, capture],
			timeline_variables: test_stimuli,
			repetitions: 1,
			randomize_order: true
		}
		timeline.push(test_procedure);

		/* define debrief */
		var debrief_block = {
			type: "html-keyboard-response",
			stimulus: function () {

				var trials = jsPsych.data.get().filter({ test_part: 'test' });
				var correct_trials = trials.filter({ correct: true });
				var accuracy = Math.round(correct_trials.count() / trials.count() * 100);
				var rt = Math.round(correct_trials.select('rt').mean());

				return "<p>You responded correctly on " + accuracy + "% of the trials.</p>" +
					"<p>Your average response time was " + rt + "ms.</p>" +
					"<p>Press any key to complete the experiment. Thank you!</p>";

			}
		};
		timeline.push(debrief_block);

		/* finish connection with pavlovia.org */
		var pavlovia_finish = {
			type: "pavlovia",
			command: "finish",
			participantId: "JSPSYCH-DEMO"
		};
		timeline.push(pavlovia_finish);


		/* start the experiment */
		jsPsych.init({
			timeline: timeline,

			on_finish: function (data) {
				jsPsych.data.displayData();
			}
		});

	</script>
</body>

</html>

`

Cluster-Bomb · 2020-05-28T05:27:09Z

Cluster-Bomb
May 28, 2020
Author

Disregard - was just some difference between 6.0 and 6.1.0.

1 reply

inesmtc Jun 18, 2020

Hi Cluster-Bomb,
I'm using 6.1.0 and I saw that Pavlovia only have 6.0 just as you said. I thought putting my jsPsych plugins folder in my project. Is it what you finally did? I saw a project like this on Pavlovia's Gitlab but I don't know if it works.
Thanks,
I.M.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot resize stimuli using image-keyboard-response #726

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Cannot resize stimuli using image-keyboard-response #726

Cluster-Bomb May 28, 2020

Replies: 1 comment · 1 reply

Cluster-Bomb May 28, 2020 Author

inesmtc Jun 18, 2020

Cluster-Bomb
May 28, 2020

Replies: 1 comment 1 reply

Cluster-Bomb
May 28, 2020
Author