Zoomやオンラインのビデオ会議システムを使って遠隔の友達とクイズ番組的パネルクイズを楽しめるLoungeのスコア計算ツールを作りました。
困っていたこと
Lounge（ラウンジ）って知っていますか？テレビのクイズ番組みたいなのをオンラインでできるサービスです。
このゲーム、面白いのですけど集計機能がないのですよね。
20人で10問くらいのクイズをやろうと思ったのですけど、200問分ぐらいの正誤を自分で集計しないといけないので、クイズの運営側が大変すぎます。
この悩みを解決するために、集計機能を追加した話です。
点数集計ツールの機能の紹介
javascriptを使って、画面内に落書きをします。ブックマークレットという仕組みで実現しています。
動画をみていただくのが早いです。
こんな感じで画面にコントローラが差し込まれます。問題番号と点数を指定し問題ごとに点数の集計をします。最後に合計点数が表示できます。
画面イメージ
機能
- 問題ごとの正解者を記録することができます。
- 問題の点数は出題者が決めることができます。難易度によって点数を増やしたり、最終問題で100点にするとか逆転の演出ができます。
- 参加者ごとに点数が集計できます。途中段階でも集計ができるので、最終問題前に点数の確認ができます
細かいところだと、
- 正解発表ボタンと同時に得点を記録します
- 回答リセットを押すと、左上の問題の番号が1つ増えます
使ったもの
- Javascript (ブックマークレット 170行くらい)
- jQuery (LoungeのHTMLに埋まっていたのでつい）
- Bulma CSS Framework
コードはここに公開
https://github.com/kanaxx/kanaxx.github.io/blob/master/xlounge/export_lounge_score.js
点数集計ツールの使い方
コントローラーを表示するまで
アドレスバーを全部消し、下にあるjavascriptのコードを貼り付けてenterキーを押します。
貼り付けるコード
javascript: void (import('https://kanaxx.github.io/xlounge/export_lounge_score.js').then(m => m.default()));
これだけです。
※過去のスコアが残っているときは、このダイアログが出ます。
OKを押すと過去のスコアは消します。キャンセルを選ぶと過去のスコアの続きで遊べます。
表示させる操作は1回だけやれば大丈夫です。画面にずっと残っているので、そのまま遊べます。
コントローラーを表示したあと
ゲームの進行
Loungeの指示どおりに新しい問題を開始します。
左上の問題番号は1から始まります。
正解したときの点数は、正解発表をするまでに変えておいてください。次の問題は50点です！みたいな逆転の演出も出題者側でコントロールできます。
正解発表
回答オープンボタンを押して、全員の回答から正解のパネルを選択したあとに、正解発表ボタンを押します（LOUNGEのゲームの進行方法と変わりありません）
正解発表ボタンを押したタイミングで、パネルが赤になっている人を探して点数を保存しています。
回答クリア
正解発表が終わったら、回答クリアボタンを押します。回答者の回答パネルがクリアされ出題者の画面もクリアされます。これもLoungeの進行どおりです。
このタイミングで、左上の問題番号がひとつ繰り上がります。
点数の集計ボタン
ボタンを押すと、保存されている点数を集計して表示します。
クイズ大会の途中で点数を発表することにも使えますし、最後の結果発表でも使えます。
点数の保存ボタン
画面に表示されている問題番号、点数、正解者の情報で保存してあるスコアを上書きします。
正解発表後に正解者が増えた場合や、点数設定を誤った場合などに押します。
（あんまり使いません）
さいごにまとめ
会社の懇親会イベント用に作ったツールを紹介しました。参加者12人でゲーム大会をやりましたけど、スムーズにゲームの進行と順位の発表ができました。
websoketもハックして回答者の画面に点数を送り込みたいけど、今回はここまで。
と思ったら、「てがきパネル」ゲームは8月末で公開終了らしい。残念です。
『手書き回答パネル』に関するご報告
— ラウンジ_ZOOMしながらみんなで遊ぼう♪ (@Lounge06) 2020年8月2日
バスキュースさんのサービスと酷似しユーザ様の混乱を招いている状況を踏まえ『手書き回答パネル』は今月中で公開停止と致します。@boku様 関係者の皆様大変失礼致しました。
※利用に関しても個人利用限定となります。商用・教育現場でのご利用は不可となります
参考資料など
LOUNGEのサイトトップページ
loungegame.site
