初めに
あるクイズで、答えの画像にマウスをホバーすると alt テキストに「これが正解」と書かれているのを見つけたことがあります。alt の本来の使い方を完全に無視したこのヒーロー級の使えないアプリさに、クイズは一瞬でクリアできる速度ゲーになっていました。これぞだめアプリの極み…と思い、自然と自分でも作ってみることに。
このクイズは、普通にやるとほぼ解けませんが、ブラウザの dev tools を覗けば全て解ける設計です。HTML、コンソール、クッキー、ネットワーク…あらゆるところに答えが隠されています。少しの好奇心と、恥知らずなカンニング心で、全問正解を目指してみてください。
例
最初の問題はデモ用に簡単に作ってあります。答えを“カンニング”してみましょう。
- Dev tools を開き、「Elements」タブを選択
- 各選択肢にマウスを重ねて HTML/CSS を確認
- 答え ４ の上に
correctAnswerというクラスの span があるのを発見
つまり、開発者（私）が使えないものです！無駄な span を置いたおかげで、答えが dev tools に丸見えになっていました。
他の問題
1 問目はウォームアップ。簡単で HTML から丸見えでした。残りの問題はそうはいきません。直感や調査スキルを駆使して全問正解を目指してください。
答えはコンソール、クッキー、ネットワーク、あるいは dev tools のどこかに隠れているかもしれません。HTML に見えなくても、ヒントがちょっとだけ隠されていることがあります。宝探し感覚で探してみましょう。
テクニカル明細
正直に言うと、特別に技術的なことは何もしていません。ただ、作るのも使うのも楽しく、同時にクソで無駄なものを作りたかっただけです。
- 言語: TypeScript
- 環境: Next.js（ワンページにしては完全にオーバーキル。でもサーバーコンポーネントを使って dev tools で見やすくしてみたかった）
- ホスティング: Vercel 無料プラン
- その他: 答えを動的に変える簡単な外部 API を数件使用
- 自分にも入れた部分もありますが、基本生成AIツールでバイブコーディングしました
co-pilot のコード品質は酷すぎて笑ってしまいます。自分で修正しようかとも思いましたが、テーマを考えるとセキュリティ漏れなどがないか確認した上でそのままにしておくことにしました。
クイズのリンク
下記からチェックしてみてください：
https://a-quiz-engineers-can-cheat-on.vercel.app/quiz
楽しむためのルール
- Googleなど、AIに答えきかないでください
- 全問正解を目指して、得点をコメントで自慢してください
- ネタバレ厳禁！ヒントや答えはコメントに書かないでください
- 楽しんでくれたら、このクイズを楽しめそうな人にぜひシェアしてください