Forms need better styling

[vsoch]

The current survey has small radio buttons, and other styling details so that it doesn't compare well with "standard" offers (eg, survey monkey, qualtrics). For example, here is jspsych:

and if you browse something like codepen, there are so many ways to make forms with big input boxes, buttons, etc! I'd like to suggest beautifying the style of forms - even integration of bootstrap would do wonders! The reason is because we are getting a lot of feedback during our pilot about needing improvements, and instead of trying to hack something or use a different framework, I thought it would make sense to do this the open source way. Let me know your thoughts!

[vsoch]

Here are forms / idea to spur thinking:

• generating an entire form from json This would make Jspsych surveys an API akin to plotly.js - someone could specify questions / options in a json object, and the basic blocks for the entire survey would be generated based on the specification.
• http://codepen.io/terned/pen/jbRqoL
• blocks instead of radio: instead of radio, make the entire text clickable (nicer user experience)

Styling with pseudo selectors (download the example file to see this):

This seems like a really good option because it would just require tweaking the style sheet.

• input boxes The radio buttons are still small here, but the inputs are nicely done.

[jodeleeuw]

I'm completely on board with this. It's related to the broader goal of making the CSS and markup more friendly in general, #163.

My initial thought is that the markup generated by the plugins should be overhauled to use Bootstrap classes. A custom Bootstrap-friendly style sheet could be provided by default, but using Bootstrap as the base would let people use custom themes easily.

I love the JSON to form idea. That's a nice way to implement #135.

[vsoch]

Great! I might have some time this weekend to start working on this.

[vsoch]

It would be amazing to have something like this to design experimental paradigms:

http://pingendo.com/

[jodeleeuw]

I agree! We're in the early stages of building a GUI for jsPsych, but it won't have anything this sophisticated in the first release.

[vsoch]

Great! Maybe when the skeleton is done I could help as well. This is definitely an important need for the community.

[vsoch]

I think a good candidate instead of bootstrap would be material design light - for example look here:

http://www.getmdl.io/components/index.html#toggles-section/radio

The user still has the basic classes that could be over-ridden and customized, but the cool thing about material design light is that the entire color / feel is changed based on just changing the style sheet, for example:

  <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.blue-light_blue.min.css" />

would have a main color of blue with light blue accents

and you can generate a custom color scheme here:

http://www.getmdl.io/customize/index.html

I was looking at the code and I think you would be much faster to make these tweaks, let me know your thoughts!

[jodeleeuw]

I think you've identified the advantages of MDL. My concern is that it's not as flexible as Bootstrap, because it imposes a very particular kind of style. I'm not sure that style works for all experiments.

I don't have enough knowledge of either framework to make a well-informed decision. But, I lean towards Bootstrap for flexibility. My limited understanding is that Bootstrap supports more components at the moment. I could be convinced otherwise.

[vsoch]

I just put together an example to show some of the components - they are really beautiful:

http://vsoch.github.io/md_experiment/

I think given that both come with classes, etc, it's always possible to customize. Material design is a Google product - they use it for their sites and it's a really clean, nice design. My concern with bootstrap is that the standard radio / inputs aren't really that different from what is provided by the browser - I did some testing to add bootstrap to a current jspsych experiment and realized even with bootstrap classes, they would still need the user to add customization.

What material design offers is a really great user experience, off the bat. I think what can make or break a survey is that one detail. Most people probably don't want to do too much work to change or customize things, they just want them looking awesome from the get go. At the end of the day, what is easiest and most professional / awesome looking is going to be used, and more white bread ("needs work to be customized") will not be chosen.

[jodeleeuw]

I agree with you that it looks great and that it needs to look great out of the box. There are lots of nice Bootstrap themes that could be dropped in to achieve this.

Your demo shows that MDL clearly looks great for surveys. If MDL can work well for non-survey type experiments, then I'm on board with using it.

[vsoch]

Oh I see - you are looking for a style that could be applied to all experiment elements? What elements do you have in mind in particular?

For all of those themes, take a look at the form styles - checkboxes and radios are the standard / plain provided by the browser, so it doesn't add much.

[vsoch]

Here are components if you want to take a look.

[jodeleeuw]

Sorry, my goal wasn't clear.

I want to replace all of the CSS with a CSS framework, and have all the plugins generate markup that's consistent with the framework (plus have appropriate IDs or classes that are related to the plugin for ease of customization).

[vsoch]

ah, understood! Which components or elements are you concerned that bootstrap has that material design light does not?

[jodeleeuw]

After looking through more carefully, I think MDL has everything that the large majority of experiments will need. My only concern at this point whether the material design style will work for experiments. I think there is no way to know without trying it.

[vsoch]

+1 !

[vsoch]

Here is a way you could have css style properties as variables, and give the user control to select:

https://justmarkup.com/log/2016/02/theme-switcher-using-css-custom-properties/

[jodeleeuw]

That's neat. I didn't know about that feature yet.

Are you planning to take some portion of this on? I'm not expecting a firm commitment, but for planning purposes it would be good to know so that efforts aren't duplicated.

[vsoch]

I was planning on it, but looking at the code base over the weekend I don't think my JavaScript is up to chops to do this most efficiently. It would be a good learning experience for me and I could likely (slowly) contribute, but my thinking is that it would be less of a burden on you to just do it efficiently. My strong suite is python, so I am working on adding a simple survey module to the experiment factory as a workaround in the meantime.

[jodeleeuw]

I probably won't get to this for several months, so slow progress would still be welcome progress if you decide to take it on at some point.

[vsoch]

ok cool! Definitely will give a go if I have some free time! Thanks for all this discussion, it is very helpful.

[jodeleeuw]

Going to close this because it is covered by #244.