Demo-Code - Converting TextComponent To HTML - textStimToHTML - Highly Experimental

Online experiments
1

Dear all,

Our lab was frequently running into problems regarding the design and readibility of online-instructions. Especially, colored highlighting inline words were problematic using several independent textComponents, styling them depending on condition etc… One Option is often to use Images of e.g. PPTX to display instructions but this does not really work for instructions that need to be partially edited depending on conditions/experiment block.

After another long fight with TextComponents and TextBoxes I decided to use HTML for simple instruction routines yesterday. Inspired by @wakecarter 's “Demographics - Code”, Ive built a small conversion “addin” (js/html-file combination), that can be used to write HTML/CSS/JavaScript directly in a TextComponent and use a single JS-function to convert it to a routine-integrated iframe.

That escalated quickly to: HTMLinstructions [PsychoPy] (Not Mobile-Ready, may be sensitive to different screen resolutions)

This code is still highly experimental and I have major concerns regarding responsive layout/ some JS code and unforseen experiment breaking behaviour. But for now it works and using it in instruction-only routines seems fine.

I am not a CSS expert, so I decided to share the code in an early phase (I started 24h ago) and If someone is interested, the code can be adapted and extended (feel free to fork and make pull requests (or share another repository)). I will continue adding changes in the future, after some small-scale testing “in the wild”. A stable version of this or similar code may help a lot.

Code: Luke Boelling / HTMLInstructionsDemo · GitLab
You can find a minimal documentation in the readme.

Best,
Luke

1 Like
2

Hello Luke,

thanks a lot for sharing your code. I switched to formr for demographics, instructions and info screens and link from there to Pavlovia and back to formr. This approach can be used best for instructions at the beginning and the end of the experiment.

Best wishes Jens

3

Hi Jens,

Yes, for start and end instructions using external linkage is the go to solution for us as well.

This html- instruction solves problems with changing in block instructions during/ within varying conditions.

Especially , highlighting changing target stimuli or predefined template instructions for multiple experiments may be an interesting use case for html instructions in psychopy.

Best,
Luke

1 Like