点と点を線で結ぶだけの簡単なお仕事です

ちょっと頭の中に変なものが浮かんだので、JavascriptとHTML5を使ってプログラムを組んでみた。

問題
左と中央、中央と右の◯を正しく結んでください。
個数が異なる場合、複数に枝分かれするものが紛れています。
列のデータは、昇順、五十音順にソートしてあります。

問題1


問題2


問題3


問題4



ではでは

PS：
地上の星とか、ジブリはどっかで見たことあるだろう。
ネタになってたからね。
まったく同じは嫌なので、3つの列にしてみました。
更に難易度があがって、プレゼント、スーパー戦隊の新ネタも追加。
プレゼントを歌詞カードを見ずに歌える人はすごいな。
スーパー戦隊は、データ入力してて、ソートさせたら頭が混乱してきた。
まったく知らない人だと、
轟轟戦隊＋ゴーゴーファイブ
電磁戦隊＋デンジマン
救急戦隊＋キュウレンジャー
とか繋げちゃいそうだなw
おっと、ヒントになっちゃうな。

PS：
プログラムを組んだといっても、
ctx.fillText(a)で表示するワードを、ctx.measureText(a,b,c).widthで横幅を調べて、最大のものをしらべて、表示させただけ。
座標計算はしっかり考えてやったが、かなり適当ｗ。
プログラムでは正解を表示するように点と点を直線で結ばせたのだが、かなり見づらい。
1色の線ではぐちゃぐちゃになってしまう。
かといって、曲線を描かせるのは手間がかかる。
色数を増やして線で結んでも、まだしっくりこないな。
さて、どうしたものか。