Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Let the host download the final leaderboard as CSV or PDF

Đang mở
  • Có gì không ổn?
#201 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
54/100
Loại issue
Tính năng
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Start in apps/frontend/src/screens/LiveQuiz.tsx at the GameState.ENDED results screen and inspect sortedLeaderboard and the host-only controls; check apps/frontend/src/index.css for the theme and apps/frontend/package.json for available dependencies. Implement CSV escaping and the two downloads, choosing and documenting a PDF approach that supports the stated theme and pagination. Done means both host-only files identify the quiz and date, CSV names with commas open correctly, and long PDFs paginate without clipping.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

enhancement help wanted UI & UX

When a quiz ends, the final leaderboard appears and that is the only place it exists. Leave the page and it is gone — there is no way to keep a copy.

A teacher who has just run a quiz usually needs the results outside Rexial: into a gradebook, attached to an email, or printed for a noticeboard. Right now the only options are a screenshot or retyping the names.

What to add

Two buttons on the final results screen (GameState.ENDED in apps/frontend/src/screens/LiveQuiz.tsx, around line 893), next to the existing Back to Dashboard link:

  • Download CSV — for spreadsheets and gradebooks
  • Download PDF — for printing and sharing

Only the host should see them. Participants do not need everyone else's scores.

The data is already on screen

sortedLeaderboard holds every row, already ranked by score and then by total answer time. Each row has:

id, username, score, totalTimeMs

So no backend work is needed for a first version. A sensible CSV:

Rank,Name,Score,Time (s)
1,Aisha,47,38.2
2,Marco,44,41.0
3,Lena,44,46.7

Note rank 2 and 3 tie on score — the time column explains the order, so include it rather than leaving the ordering unexplained.

A filename with the quiz title and date is much more useful than leaderboard.csv when several are sitting in a downloads folder.

The PDF has to look like Rexial

This is the part worth taking care over. A default library-styled PDF will look nothing like the app and makes the export feel bolted on.

It should carry the platform theme:

  • Dark background, as the app has, not white
  • The pink gradient used throughout — the wordmark runs #f9a8d4 → #ec4899 → #be185d
  • The fonts from @theme in apps/frontend/src/index.css: Rubik Gemstones for the Rexial mark and headings, Delius for body text, IBM Plex Sans otherwise
  • The podium treatment for the top three, matching the on-screen colours: gold yellow-500, silver gray-300, bronze amber-600
  • Quiz title, date and player count in a header

Fonts are the usual trap here — a PDF library will not pick up the Google Fonts the page uses unless they are embedded, so the output silently falls back to Helvetica. Worth checking that early rather than at the end.

Approach

No PDF or CSV library is in apps/frontend/package.json today, so this adds a dependency. A few directions, and the PR should say which was chosen and why:

  • CSV needs no library at all — build the string and trigger a Blob download.
  • For the PDF, rendering the existing leaderboard markup to canvas and placing it in a page keeps the styling automatically, at the cost of a bitmap rather than selectable text.
  • Drawing the PDF directly gives crisp text and a smaller file, but the theme has to be rebuilt by hand.

Either is acceptable. What matters is that the result looks like it came from Rexial.

Worth considering
  • A long leaderboard needs pagination in the PDF — 751 players will not fit on one page, and that is a real session size here.
  • Long usernames should wrap or truncate rather than overflow.
  • A name containing a comma or a quote has to be escaped properly in the CSV, or the file opens misaligned.
Definition of done
  • The host can download the final leaderboard as CSV and as PDF
  • The CSV opens correctly in Excel and Google Sheets, including names with commas
  • The PDF uses the platform theme, with the podium colours for the top three
  • A long leaderboard spans multiple pages without clipping
  • Participants do not see the buttons
  • Both filenames identify the quiz and date
Ngôn ngữ chính
TypeScript
Star
21
Fork
7
Merge trung bình
5 giờ 19 phút
Pull request đã merge (30 ngày)
29

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của TheCodeHeist-Coder/Rexial

Tất cả issue của TheCodeHeist-Coder/Rexial

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.