I am creating an application called h8tally that will be used by people to report acts of hate against them or other people. Hateful acts are motivated by someone because of another person's race, gender, sexual orientation, beliefs, ethnicity, or political affiliation.
I am creating a form where I want users to choose from a list of options based on images and not words. Currently, the only way to insert images into a form using Knack* is to add a Rich Text view to the interface. This would work fine for a header or a footer image special to the particular form.
It does not suit my needs because I want the multiple choice field to come in the middle of the form. Also there is an issue of the image only spanning about 2/3 of the screen on my mobile device. I'd like it to take up 100% of the available space.
Here's the workaround image I created that would go at the top of the form:
Ideally, I would use the "one selection" layout in the field. Each option would be accompanied by a single square tile image, without the numbers, and the user would be instructed to select which tile most closely matches their skin color.
It is based on the Fitzpatrick Scale and provides a more universal way to categorize people than loaded and problematic race names. The term Affrican American does not accurately apply to someone in the U.K. whose grandparents immigrated there 40 years prior from Gana.
I was directed by the most helpful Knack team to search stackOverflow and to look into CSS and jQuery as possible ways to achieve this solution. Images as multiple choice options would be a perfect solution for my application. Sometimes words get in the way and images are more direct.
Thank you