AtCoderProblems icon indicating copy to clipboard operation
AtCoderProblems copied to clipboard

feat: ユーザのモチベーションを高める機能

Open reminjp opened this issue 4 years ago • 14 comments

漠然と、ユーザの問題を解く・精進するモチベーションを高める機能を充実させたいと考えており、ここでアイデアの共有や検討をできると嬉しいです。

ゲーミフィケーションはプログラミング学習においても、学習者の意欲を高めることが知られています。(AtCoder Problemsでも既に、進捗の可視化やランキングがゲーミフィケーションの要素になっています。)

簡単そうなところですと、バッジ(実績, トロフィー)でしょうか。「解いた問題がX問以上のときA色のメダルを表示する」ような機能はフロントエンドのみの改修で実現できそうです。

より簡単なところでは、フロントエンドの見た目の単純な改善でも、モチベーションの向上に貢献すると思われます。

参考

  • Paiza (https://twitter.com/paiza_official/status/510415756438151168)
    • バッジ
    • 派手なのはAtCoderのイメージに合わなそう
  • Project Euler
    • レベル, 進捗表示

reminjp avatar May 19 '20 09:05 reminjp

Project Euler の全問題どのくらい埋まってるかを1ページで見れるのは面白そうかも。 1*4ax2EjYPOFHdVHrI7AbxpQ

kenkoooo avatar May 19 '20 15:05 kenkoooo

効果が実感できると良くて、Heatmap みたいなやつで、各マスを「その日に解いた最大の diff の色で塗る」とかやると、やりこんでいる人は灰からだんだん茶、緑、…と色が変わっていくさまが見えるかもしれない。

kenkoooo avatar May 19 '20 15:05 kenkoooo

効果が実感できると良くて、Heatmap みたいなやつで、各マスを「その日に解いた最大の diff の色で塗る」とかやると、やりこんでいる人は灰からだんだん茶、緑、…と色が変わっていくさまが見えるかもしれない。

作ってみました。いいですね。

image

image

southball avatar May 21 '20 09:05 southball

Heatmap 作ってみました。いいですね。

いいですね!眺めるのが楽しそう。

Project Euler の全問題どのくらい埋まってるかを1ページで見れるのは面白そうかも。

これほしいです。 現在のTableの縮小表示みたいなものを思い浮かべました。

reminjp avatar May 21 '20 13:05 reminjp

始めたての人は Bootcamp と streak で軌道に乗せられそうという気持ちがあって、そこから先の緑〜水くらいの人がハマれる機能を作りたい(漠然とした気持ち)。 状況としては週1でratedがあって、解くべき問題もたくさんあるので、コンテストとコンテストの間の平日で効率よく問題を解かせる仕組みが欲しい。よるかつバチャみたいなのを自動生成するとか?

kenkoooo avatar Jun 10 '20 18:06 kenkoooo

https://twitter.com/kenkoooo/status/1274960644479922176

埋める系

  • 全完コンテスト数
  • unrated な問題を解いた数
  • デイリー/ウィークリーAC数
  • [x] 言語/diff別streak

AtCoder コンテスト系

  • リアタイ参加で解いた数
  • リアタイ参加で全完した数
  • リアタイ参加で優勝した数
  • 連続コンテスト参加数

その他

  • AC時刻を分析して生活習慣の乱れを可視化するやつ
  • バチャ参加回数

kenkoooo avatar Jun 24 '20 07:06 kenkoooo

新しい言語の習得にatcoderを利用しようと思っていまして、もともと別言語で簡単な問題をだいたい解いていると、streakも増えないので、上に記載のある言語別streak実装していただけると、モチベーション維持に非常にありがたいです。 β版として、C++/C/Java/Python/Go/Rust/Typescript等、習得しようとする人が多そうな言語だけでも先に対応してもらえるとうれしいです。

fangji0310 avatar Jul 03 '20 14:07 fangji0310

@fangji0310 言語別 streak や言語別 AC マイルストーンはある程度簡易的なものですが、Trophy として実装されています。 Screenshot_2020-07-04 AtCoder Problems

kenkoooo avatar Jul 03 '20 15:07 kenkoooo

@kenkoooo そうですね。Trophy実装されて最高って思いました。 ただ、絶対無理だと思ってコメントしますが、私のイメージはArchivement, Atcoder Pie Charts, Difficulty Pies, Progress Chartsのタブの右上とかにlanguageのプルダウンがあり、defaultはallで、他に選択可能なものとして、C, C++, Java, Go, Rust, Typescriptみたいなものがあり、ユーザが言語を選択すると、その言語にフィルタしたそれぞれのタブが見れるというイメージでした。 Trophyだと毎日1日づつ伸びている実感が見えないのでArchivementだけでも対応されると非常に嬉しいですが他にも似たような機能欲しいという人がいれば検討いただければ幸いです。

fangji0310 avatar Jul 03 '20 16:07 fangji0310

@fangji0310 なるほど、User ページ内の各タブは独立していてほしくて、将来的な(発想の)拡張性を損なわないためにも、全部に適用するプルダウンは微妙な感じがします。User 内のLanguagesが、今は特に説明なくAC数を表示していますが、そこにStreakを入れるのはどうでしょう?それなら割と自然な感じがします。

kenkoooo avatar Jul 03 '20 18:07 kenkoooo

LanguagesにAC数だけでなく、streak数も言語ごとに表示してくれれば、私の最低限の要望は満たされます! 余裕がある時に対応検討いただけると嬉しいです。自分も貢献できればいいんですが、Rustなんですね。 ちょうどRust勉強中なのでソース見て勉強します。

fangji0310 avatar Jul 04 '20 15:07 fangji0310

LanguagesにAC数だけでなく、streak数も言語ごとに表示してくれれば、私の最低限の要望は満たされます!

@fangji0310 これについて別にissueを作っていただけますと、誰かが実装する作業に入りやすいと思います。

kenkoooo avatar Jul 04 '20 17:07 kenkoooo

「diff埋めなどの円グラフ埋めをしたい、でも流石にやってられない...」 「円グラフ埋めやってたけど、疲れた...」 と考えている人をターゲットにしたものですが円グラフに区切りをつけるというのはどうですか? とりあえず25, 50, 75, 100%で区切りを付けています。

image

image

100%埋めより達成しやすい目標をはっきり表示させることでユーザのモチベーションを保てるのではないか、と考えています。

sirogamichandayo avatar Aug 02 '20 13:08 sirogamichandayo

今見ると少々奇抜すぎた感もあります。 割合を表示させるという目的ならこのぐらいにしておいたほうがいいのかもしれません。 image

sirogamichandayo avatar Aug 03 '20 08:08 sirogamichandayo