採点マークの描画を美しく — 波線・ジグザグの統一

一括採点では、答案の採点時に波線やジグザグなどの採点マークを描くことができます。 今回のアップデートで、これらのマークの描画ロジックをcos波ベースに統一し、 中央揃えで始点と終点がきれいに揃うように改善しました。 この記事では、改善の背景と仕組みをわかりやすくご紹介します。

採点マーク（波線・ジグザグ）とは

先生が答案を採点するとき、正誤を示す丸やバツだけでなく、 解答の一部に波線やジグザグの線を引くことがあります。 波線（～～～）は「惜しい」「部分的に正しい」といった意味合いで使われることが多く、 ジグザグ（∧∧∧）は取り消し線や注意を促す記号として使われます。

一括採点では、個別採点画面でこれらの採点マークを答案上に直接描くことができます。 マウスでドラッグするだけで、解答欄の任意の場所に波線やジグザグを配置でき、 紙の答案に赤ペンで書き込むのと同じ感覚で採点記号を付けられます。

以前の描画の問題点

以前の波線・ジグザグの描画には、いくつかの見た目の問題がありました。 マークの始点と終点が上下にずれて、線の両端が揃わないことがあったのです。 たとえば、波線の左端は上に飛び出しているのに右端は下に沈んでいる、 といった不揃いが起きていました。

また、マークの長さによって波の形が変わってしまうこともありました。 短い波線では波が詰まりすぎ、長い波線では波が間延びする、 という具合です。 同じ種類のマークなのに、長さによって見た目の印象が異なるのは不自然でした。

cos波（コサイン波）とは

今回の改善で描画の基盤にしたのが、cos波（コサイン波）という数学的なカーブです。 難しそうな名前ですが、身近なところにたくさんある「なめらかに繰り返す波」のことです。

海の波を思い浮かべてみてください。 波は上がったあと自然に下がり、また上がるという動きを繰り返します。 振り子時計の振り子も同じです。右に振れたあと左に戻り、また右に振れる。 この「行って戻って」を滑らかにつなげた形が、cos波の形そのものです。

cos波の大きな特徴は、始まりと終わりが同じ高さになることです。 波が1周期分ちょうど収まれば、左端と右端がぴったり揃います。 この性質が、採点マークの描画にとても都合が良いのです。

中央揃えの工夫

cos波を使えば波の形はきれいになりますが、 もうひとつ解決すべき問題があります。 マークの長さは先生がドラッグする距離によって変わるため、 波がちょうど整数回繰り返すとは限らないのです。

たとえば、波が2.3回分の長さでドラッグが終わると、 0.3回分の波が中途半端に切れてしまいます。 これでは端が揃わず、以前と同じ問題が起きてしまいます。

波の数を自動調整する

そこで今回の改善では、マークの長さに応じて波の繰り返し回数を自動的に整数に丸める仕組みを入れました。 たとえば2.3回分の長さなら波を2回に、2.7回分なら3回に調整します。 こうすることで、どんな長さのマークでも波がちょうど収まり、 始点と終点が同じ高さで揃います。

中央揃えで左右対称に

波の回数を調整すると、実際に描画される長さとドラッグした長さにわずかな差が出ます。 この差をマークの左右に均等に振り分けることで、 マーク全体がドラッグ範囲の中央に配置されます。 結果として、マークが左右対称に見え、自然な仕上がりになります。

実際の改善効果

描画ロジックの統一により、波線もジグザグも見た目が大きく改善されました。 どの長さのマークでも波の形が均一で、端が揃った状態で描画されます。 同じ種類のマークは常に同じ雰囲気に仕上がるため、 答案全体に統一感が生まれます。

印刷時の仕上がり

採点結果を印刷して生徒に返却する場面では、マークの見た目がそのまま紙面に反映されます。 端が揃い、中央に配置されたマークは、紙面上でもきれいに見えます。 一括採点で効率よく採点しながら、返却物の品質も保てるのは先生にとって嬉しいポイントです。

採点のテンポを妨げない

描画ロジックの改善は内部的な変更であり、操作方法は以前と全く同じです。 マウスでドラッグするだけで、美しいマークが自動的に描かれます。 先生が採点のテンポを崩すことなく、見た目の良いマークを使えるようになりました。