Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

Let the host download the final leaderboard as CSV or PDF

Aberta
  • Algo errado?
#201 1 comentário 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
54/100
Tipo de issue
Funcionalidade
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
react, typescript
Domínio
frontend

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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
Linguagem predominante
TypeScript
Estrelas
21
Forks
7
Merge médio
5h 35min
PRs com merge (30d)
33

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de TheCodeHeist-Coder/Rexial

Todas as issues de TheCodeHeist-Coder/Rexial

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.