New web app. Form to HTML for Pavlovia

URL: https://moryscarter.com/vespr/formtohtml.php

Since forms don’t yet work well online, I am using embedded html forms as per my demographics demo.

I’ve therefore written a quick app to convert csv files created for the PsychoPy form component into html suitable for embedding.

Choice (= dropdown), radio and text are currently supported and I’m happy to add more functionality.

4 Likes

I found your embedded html very useful, thanks.
Although I’m not quite sure I understood how to use it.
I save it in local exp folder, but how I do recall it in my psychopy script to make it “load”?

Have you looked at the code components of my demographics psyexp file?

all set. Very intuitive, thanks

I’ve now added checkboxes and the inclusion of a text field if you use the word specify (as in please specify) in a radio or checkbox response option.

Hi! I’ve implemented your html form (it’s great, thank you so much by the way for making it). I’m trying to use the participant’s responses to gauge their eligibility for the study. Is there functionality for that? I’ll post the code I’m trying to use below, but it doesn’t seem to be working.

Here is some sample code I’m trying to use (it’s in the End Routine part of builder.) Basically, if the participant says they have been diagnosed with dyslexia for my word experiment, after the form is completed and the routine ends I want the experiment to quit.

expInfo[‘age’] = psychoJS.experiment._currentTrialData[‘age’];
expInfo[‘gender’] = psychoJS.experiment._currentTrialData[‘gender’];
expInfo[‘dyslexia’] = psychoJS.experiment._currentTrialData[‘dyslexia’];
if ((expInfo[‘dyslexia’] === “Yes”)) {
psychoJS.quit({message: ‘Unfortunately, you are not eligible for our study today. Thank you for your time!’});
}

I don’t have a ton of experience with JS so there may be some oversight there as well.

console.log is your friend.

You need to work out whether the issue is with the variable or the quit.

Try adding console.log(expInfo['dyslexia']); just before your if statement and console.log("Quitting?"); inside the if clause.

Thank you for your help! I was thinking about the console but the embedded html only works online right? I know how to use the Psychopy console but where does the console in Pavlovia print out to? (sorry for the newbie question!)

Please look at my crib sheet if you haven’t come across it before.

Developer Tools

Use Developer Tools (Ctl-Shift-I in Windows/Chrome, Cmd-Opt-J or Cmd-Opt-I in Mac/Chrome, F12 in IE/Edge, Ctrl-Shift-J in Windows/Safari, Ctrl-Opt-J in Mac/Safari) to view errors via the browser console if you aren’t getting sufficient information from PsychoPy. You can add print(var) (which translates to console.log(var); ) to check the value of a variable var at a particular point. N.B. If you need to stop your participants doing this and being able to view trial variables you may be loading from Excel, add log4javascript.setEnabled(false); to code_JS [sotiri]. This will prevent cheating on experiments with a performance based reward.

Tutorial: Thomas Pronk / tutorial_js_console_log · GitLab

See also Tech Support & Bug Report Guidelines

1 Like

Oh I haven’t seen that one! Thank you for your help.

Hi! I noticed that with the form, participants could hypothetically press submit and bypass the form without filling any of it out. Is there any functionality within the app to limit progression past the routine until everything has been answered? Thanks!

There’s probably a way of doing it within the html but the easiest way for a PsychoPy user would be to put a loop around the form with only ends when the appropriate responses have been given. The disadvantage would be that this would clear the form when re presenting it, unless you add additional URL variables when calling the form.

Actually for many browsers it should be sufficient to add the word required to your key inputs.

https://www.the-art-of-web.com/html/html5-form-validation/

Hi Wakefield - thanks as always for these useful tools!

I wonder if it would be easy to extend this to support slider responses here? Happy to help. Here’s a little demo for slider responses using html using the same iframe code from your demographics demo.

Thanks!
Becca

html_slider_gif

Hi @Becca .

Thanks for the suggestion. I’ve updated formtohtml.php to cope with slider, heading and description.

I’ve added the following as the default contents for the form

index	questionText	options	layout	type	questionWidth	responseWidth
0	Demographics			heading		
0	Thank you for agreeing to take part. In order to help me describe my participants, please could you answer the following questions?			description		
1	What gender are you?	Woman, Man, Non-binary, Different Gender Identity[specify], Prefer not to say	vert	radio	0.4	0.6
2	How old are you?	Under 17,18,19,20,21,Over 21	horiz	choice	0.4	0.6
3	Are you a student?	Yes, undergraduate,Yes, taught postgraduate,Yes, research postgraduate,No	vert	radio	0.4	0.6
4	How fluent are you in English?	1,2,3,4,5	horiz	slider	0.4	0.6

1 Like

Splendid - thanks @wakecarter - I suspect this will be a very useful tool, look forward to playing with it.

Becca

Wow it really is easy to use! Would it be ok for us to do a mini tutorial to feature it? I really like this as an alternative until online forms is out of beta mode

Becca

1 Like

Very happy for a tutorial.

Did you notice that you have to make a couple of edits to the html (and can’t simply save as in Chrome)? I disallow scrolling of the html itself but people will want to be able to scroll the preview.

I should also add a matrix table to the demo before you show it.

Honestly I actually didn’t edit the html, I just copied the source and saved it as a file in the same location as the demographics demo. (I think scrolling was still enabled as it was in the iframe?)

I’ve just sorted this by adding a preview function.

I’ve also added possibility of requiring radio and text responses.