Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Let the host download the final leaderboard as CSV or PDF

Offen
  • Stimmt etwas nicht?
#201 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
54/100
Issue-Typ
Feature
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
react, typescript
Bereich
frontend

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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
Vorherrschende Sprache
TypeScript
Sterne
21
Forks
7
Ø Merge
5 Std. 35 Min.
Gemergte PRs (30 T.)
33

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TheCodeHeist-Coder/Rexial

Alle Issues in TheCodeHeist-Coder/Rexial

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.