Skip to content

GitLab

H
HTMLInstructionsDemo
Switch branch/tag
History Find file
Clone
data: DEMO_HTMLinstructions_04-08-2023_15h22.49.553.csv
Pavlovia Commiter authored
cf1b156c
Name Last commit Last update
data data: DEMO_HTMLinstructions_04-08-2023_15h22.49.553.csv
.gitignore Init HTML Instructions WIP Repository
HTMLinstructions-legacy-browsers.js Remove Border
HTMLinstructions.js Remove Border
HTMLinstructions.psyexp Remove Border
LICENSE Add LICENSE
README.md Update README.md
addJSScript.PNG linting and readme
convertTextStimToHTML.PNG Additional Readme Instructions
index.html Update to new psychopy verison
instructionPreview.PNG Additional Readme Instructions
textBoxcontent.PNG Adding Implicit Iframe Removal after Routine
textStimToHTML.js Remove Border
textTarget.html linting and readme
README.md

textStimToHTML-Component-Converter

Using HTML/CSS/JavaScript in Online-Text-Instruction by Converting Builder TextComponent

NOTE This Code is highly experimental. If you can not edit the htmlText-TextComponent in this code (Python Error "text") try to use "Left Click"-"Edit" to enter TextComponent-Editor

Description

A "simple way" to use HTML/CSS/JavaScript in TextStim in Online Experiments on Pavlovia. This is still a WIP but for Standard Desktop-targeted Experiments

Installation and Usage

Move textStimToHTML.js and textTarget.html to your experiment root.

textStimToHTML.js can be added in the Builder like this (globally): BuilderImage-Code to Add JS

Create a TextStim (here: htmlText) with HTML Markup BuilderImage-TextStim with HTML

Use textToHTML(htmlText) to convert the textStim: BuilderImage-Convert in Routine

Example result: Experiment-Fullscreen- Preview HTML-Instruction

Additional (possible) Feature List

  • Basic Dynamic Resizing Features (Responsive Layout) (not mobile ready and a little messy)
  • TextStim-Position of the Builder Component is used
  • Implicit Removal of Iframe after Routine
  • Safe/Dynamic Size and Position Adjustments for complex HTML-Instructions and all Screen-Sizes
  • Automatic Removal of HTML Tags in TextComponent if Python is used
  • Callback for In-Routine Text Manipulation to Update Text during the Routine from Builder Code (explicit Option using "refreshHTMLText()" )

Author: Luke Bölling

This repository is based on and inspired by: Morys-Carter, W. L. & Weinberg, A. (2021, August 10). Demographics [Computer software]. Pavlovia. https://doi.org/10.17605/OSF.IO/S8V3K, especially the font-size calculation was reused.