Multiple-Choice using HTML, CSS, JavaScript

Here’s my project: having multiple-choice questions (with or without a HTML form) and doing something with the user input using JavaScript.

I thought the JavaScript methods for a select box were useful, so I attempted to recreate those methods for checkboxes (including assigning those methods to checkbox-type elements by using functions).

I also tried to use some CSS to make the checkboxes look like a select box.

Here’s one version of the project (in codepen.io) that’s probably finished.
link to the “pen” in CodePen here

I’d love some feedback or comments on how I can improve this.

I have another version in progress …
I hope to make the multiple-choice questions somewhat editable.

Here it is, using a Codecademy workspace:
https://www.codecademy.com/workspaces/6164d8ddbd2e4c6e5b218b59

It’s unfinished - I’m still working on it at the time of this post (Nov. 3)
But the stuff I did so far took a lot longer than expected - several days of work.

I’d appreciate any comments or suggestions.

As an exercise in form options, this is all fine and good. As a UX it is a fail; but, not to worry. One has crossed the threshold into web form nuance. Consider yourself esteemed.

The thing we never want to do is confuse users by going against their expectations. If the first question is multiple choice, then the second should be also. When formats change we should alert the user to it by grouping. This range of questions are multiple choice, single answer; this group of questions are multiple answer; and, so on.

You have advanced and should well see the open door that is before you. Web forms, as trivial as they may be, are a scalpel in the hands of a surgeon; a brush in the hands of an artist; a pen in the hand of a great writer. Written to engage, and following a sensible path of inquiry they can be both pleasant for the user and rewarding for the surveyor.

Users are not impressed by what we can do with HTML, but by how seamless their experience will be. That entails a considerable amount of intuition on our part in order to meet with theirs. Humans follow breadcrumbs most easily, when they know they are there. Each question we encounter in a web form should either satisfy a given requirement or lead the user to the next one. Changing the question format at that stage would be disastrous.

Thanks for the feedback.
(Yea, I should have put the select-one stuff together, and the select-multiple stuff together, and drawn more attention to the switch from one to the other.)

I’ll try to pay more attention to the user experience for future projects.

1 Like

The biggest challenge was trying to make the JavaScript stuff scalable - meaning it would work the same way whether there’s 2 questions or 200 of them without additional code.