web-dev-qa-db-ja.com

アイテムのリストを照合するための優れたUXウィジェットはありますか?

ユーザーが一致するアイテムがあるウェブサイトに質問をしたいのですが。

例えば:

Match the animal with its sound:
Cow    Bark
Dog    Neigh
Horse  Moo

これが紙の質問である場合、ユーザーに一方から他方に線を引くように依頼します。この質問に答えるためのインターフェースは、どのようにWebサイトに表示する必要がありますか。これのために誰かがすでに作成した既存のJavaScriptウィジェットはありますか?

5
Adam

より単純な実装では、色を使用します。

それらは単なるボタンです。 1つをクリックしてから、反対側からもう1つをクリックしてペアリングします。これは、パズルゲームのようなものです。

enter image description here

5
Andy

線を引くことは、ドラッグアンドドロップのように感じることができます...鉛筆をドラッグして、2つのものを結び付けます。

左側のオブジェクトを右側のオブジェクトの上にドラッグしてみませんか?次に、それらは「スタック」として表示されますか?スタッキングは、左側に行くにつれてオプションが少なくなり、残りのオプションが読みやすくなることも意味します。

もちろん、これは人々がドラッグアンドドロップに慣れていることを前提としています...

4
daydalis