The capabilities of what a web component can do aesthetically and functionally can be boundless. As an expression of what one can do, a group project team of ours has decided to create a web component that involves a variety of user inputs and visual outputs.

What It Does

The user is prompted a question to sort four statements in chronological order. The user will use up/down arrows to sort the statements in order, and then the question will tell the user what they got right and/or wrong. The user is provided a submit button and a reset button.

If they get at least one statement wrong, an error sound will play along with flaming visuals. If they get all statements correct, a cheer sound will play along with confetti visuals.

How It's Done

The first thing that the group did was design the interface and card layout of the sorting question on a piece of scratch paper. This helps to guide the design process. Based on some questions we posed ourselves in terms of the component's features, we laid out the expected elements, their states, and the properties of the component.

One sticking point was how we should implement dragging the sorting element, as opposed to just using the arrows. We did end up consulting Stack Overflow, which told us that the "draggable" attribute can be used, but based on our current iteration, that has not been implemented.

You can find the sorting question component in its current iteration here: https://github.com/Viable-Slime/slime-the-web