【ツールチップ連動＆レスポンシブなプログレスバー】

達成率を表すとき使われるプログレスバー。
バーの表示原理は意外とシンプルです。
　
・背景色の違う２枚のボックスを重ねる
・手前のボックスに style="width:80%;" のように
　横幅をパーセントで指定する
　
これだけです。
バーの幅をCSSファイルに記述しないのは、
パーセンテージを変更する際にHTMLを動的に
書き換える必要があるためです。
　
ちょっと工夫したのは進捗率の数字と
平均点を表すツールチップの表示位置が、
進捗率の数値に応じて自動的に最適化される
という仕組み。
　
レスポンシブなので、画面サイズが変わると
位置を再計算しなければなりません。
　
進捗率とツールチップの座標を再計算する
関数を作り、loadイベントとresizeイベントが
発生したときに関数を呼び出すように仕込む。
　
肩がこります・・・