Skip to content

Customization

Colors

The default theme is a dark background with green accents. To change the accent color, search and replace in both presenter.html and student.html:

Find Replace with What it affects
#4ade80 Your primary color Buttons, join code, highlights
#22c55e Your primary hover color Button hover states
#1a1a2e Your background start Page gradient (dark end)
#16213e Your background end Page gradient (light end)

Fonts

The default is the system font stack. To use a custom font, add a Google Fonts <link> in the <head> of both HTML files and update font-family in the CSS.

Branding

Add your institution's logo to the setup screen:

  1. Place your logo file in the project directory
  2. Add an <img> tag inside the <div class="setup-screen"> in presenter.html
  3. Optionally add it to the join screen in student.html

Session codes

Codes are 6 characters from ABCDEFGHJKLMNPQRSTUVWXYZ23456789 (excluding characters that look similar: 0/O, 1/I/L). To change the length or character set, edit generateCode() in presenter.html and quiz_manager.py.

Adding a new question type

The three built-in types are multiple_choice, word_cloud, and open_ended. To add a new type:

  1. Add it to the CHECK constraint in schema.sql
  2. Handle rendering in renderResults() in presenter.html
  3. Handle student input in displayQuestion() in student.html