animation plugin but with text #2620

TomerMalovani · 2022-05-09T08:15:07Z

TomerMalovani
May 9, 2022

Hey!
I am currently using jsPsych for work and it's very useful!
I need to create an experiment that displays a sequence of numbers with different duration for each number and sometimes at the same time.
the closet plugin I have found for my use case is the animation plugin, but it can only show images.
for now, I added some hard-coded code (HTML and CSS) for my experiment to work, but I am looking for a better way,
is there a way to use the animation plugin with strings (text) and not only with images?
or is there another way for me to achieve my needed result?
I am adding the hard-coded code I wrote here in case it'll help
thanks in advance


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
		    <script src="https://unpkg.com/[email protected]"></script>
		<script src="https://unpkg.com/@jspsych/[email protected]"></script>
	<title>Document</title>
	    <link href="https://unpkg.com/[email protected]/css/jspsych.css" rel="stylesheet" type="text/css" />

	<style>
		@keyframes faded-nums {
  			from {opacity: 1;}
  			to {opacity: 0;}
			}

		@keyframes first {
  		0%{opacity: 0;}
  		100% {opacity: 1;}
		/* 100%{opacity: 0;} */
		}


		

		.con > span:nth-child(1){
			animation:first 1s ; 
			opacity: 0;
		}
		.con > span:nth-child(2){
			animation:first 1s ;
			animation-delay: 1s;
			opacity: 0;
			
		}
		.con > span:nth-child(3){
			animation:first 1s ;
			animation-delay: 1.5s;
			opacity: 0;
	 }
		.con > span:nth-child(4){
			animation:first 1s ;
			animation-delay: 2.5s;
			opacity: 0;
		} 
		.con > span:nth-child(5){
			animation:first 1s ;
			animation-delay: 3.5s;
			opacity: 0;
		}

		.con{
			width: 100%;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		
	</style>
</head>
<body>


<script>
    const jsPsych = initJsPsych();
	   const hello_trial = {
	  cohices:["k"],
      type: jsPsychHtmlKeyboardResponse,
      stimulus:"<div class='con'><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>"
    }

    jsPsych.run([hello_trial]);
</script>
</body>
</html>

jodeleeuw · 2022-05-09T19:35:25Z

jodeleeuw
May 9, 2022
Maintainer

Hi @TomerMalovani,

What about just a sequence of trials using the jsPsychHtmlKeyboardResponse plugin? You could nest them in their own timeline for clarity. This is how I would personally do it.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

animation plugin but with text #2620

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

animation plugin but with text #2620

Uh oh!

TomerMalovani May 9, 2022

Replies: 1 comment

Uh oh!

jodeleeuw May 9, 2022 Maintainer

TomerMalovani
May 9, 2022

jodeleeuw
May 9, 2022
Maintainer