About the instructions plugin and on_load() function

[jxwb125646]

I want to reload the instructions plugin for each page and thus can show the button after 1s when the text shows. However, after I use the on_load() function, I found that only the first page can reach this goal, and in the other pages, the button shows together with the text at the same time. How can I solve this problem?

[ChristopheBossens]

The on_load() function is executed when the instructions trial (the collection of pages) is loaded and not for each individual page.

I found that you can mimick what you need using css by playing around with some transitions and animation frames: You can add this to the style section of your page:

    <style>
     .jspsych-instructions-nav {
          opacity: 0;
          visibility: hidden;
          animation: fadeIn 1s ease-out forwards;
        }

    @keyframes fadeIn {
      0% { opacity: 0; visibility: hidden }
      99% { opacity: 0; visibility: hidden}
      100% { opacity: 1; visibility: visible}
    }
    </style>