Quiz Studio

1 What Quiz Studio is

Quiz Studio runs on your own hosting. You install it once, sign in to the admin panel and create quizzes. Players open a link or play inside any page of your site; they never install anything.

Everything is included and works offline from third parties: no account with us, no license tied to your domain, no external fonts or trackers.

1

Marks on the screenshot

1. 1 The right answers are never sent to the browser before the player answers, so scores cannot be faked by reading the page.

• Quizzes with multiple-choice, true/false and image questions, in as many languages as you need.
• Eleven ready-made themes in eight layouts, fully customizable with a live preview.
• Spreadsheet import and export (CSV or JSON) for large question banks.
• Results with charts, the hardest questions, an optional leaderboard and optional email capture with consent.
• Admin panel and player in 15 languages, including Arabic (right to left).
• A game feel players notice: points with a speed bonus, answer streaks, a progress bar that shows every right and wrong answer, and a result card they can save as an image and share.

2 Requirements

• PHP 8.1 or newer (8.4 recommended) with the extensions pdo_mysql, mbstring, json, fileinfo and openssl. Most hosts have them on by default.
• MySQL 8.0+ or MariaDB 10.6+ and one empty database.
• Shared hosting with Apache or LiteSpeed (cPanel, hPanel, Plesk…). On Nginx, read the security section first.
• HTTPS (a free SSL certificate) is recommended so links and embeds work everywhere.

3 Create the database

Before installing, create an empty database and a user for it in your hosting panel. Write down four things: database name, user, password and server (usually localhost).

cPanel

1. Open MySQL® Database Wizard (or MySQL® Databases).
2. Type a name for the database and click Next. cPanel adds your account prefix, for example account_quiz.
3. Create a user with a strong password and click Create User.
4. Tick ALL PRIVILEGES and finish. Use the full names shown by cPanel in the installer.

Hostinger hPanel

1. Go to Websites → Manage → Databases → Management.
2. Fill in the database name, user and password and click Create.
3. The list below shows the full names. The server is localhost.

Plesk

1. Open Databases → Add Database.
2. Choose MySQL, type the database name and create a database user on the same screen.
3. Plesk shows the server name next to the database; use it if it is not localhost.

4 Install

1. Unzip the package on your computer.
2. Upload the contents of the upload/ folder to your site with the hosting File Manager or FTP: to the site root, or to a folder such as public_html/quiz/.
3. Open the address in your browser, for example https://yoursite.com/quiz/. The installer starts on its own.
4. The server check lists anything missing in red with the fix. Fix it and click Check again.
5. Type the database details and click Test connection. If the database does not exist and your user may create databases, the installer offers to create it.
6. Enter your site name and your admin account, then click Install now. You will see a sample quiz ready to play.

1

Marks on the screenshot

1. 1 The server check lists anything missing in red with the fix. Fix it and click Check again.

After installing, the installer locks itself. You may delete the install/ folder for extra safety. If the installation stops in the middle, open it again and click Try again: every step is safe to repeat.

5 Create quizzes

In the panel, Quizzes lists your quizzes. Twenty-four example quizzes are installed, ready to play, edit, use as models or delete.

1. Click New quiz, type a title and choose the main language.
2. In Questions, click Add question. Mark the right answer with the green check. Add an explanation if you like; players see it after answering.
3. Drag questions (or use the arrows) to change their order. Choose the Image type to show a picture; images come from the media library.
4. Watch the preview at the right: it is the real quiz page and restarts after each change.
5. When ready, click Publish. Drafts are visible only to you.

1 2

Marks on the screenshot

1. 1 Several languages
2. 2 Watch the preview at the right: it is the real quiz page and restarts after each change.

1

Marks on the screenshot

1. 1 In Questions, click Add question. Mark the right answer with the green check. Add an explanation if you like; players see it after answering.

Several languages

Use the language buttons above the tabs to switch which language you are editing, or Add language. Each question shows a warning for languages still missing. Players get the language of their browser when available, and can switch with the selector on the quiz page.

Quiz settings

In Settings you change the title and introduction, address, seconds per question (0 turns the timer off), how many questions to draw per game, shuffling, showing the right answer, the final review, result messages by score, the leaderboard and email capture. Changing the address of a live quiz shows a warning, because links already shared stop working.

Turn on Show right and wrong only at the end to keep players guessing: after each question they only see that their answer was saved, with no right or wrong and no running score, and Show the right answer after each question disappears from the settings. The result screen then opens with a tally that counts the answers out one dot at a time, green for right and red for wrong, while the number of right answers climbs. A click or a key skips it, and the Answer tally switch in the theme's Effects card turns it off. This at-the-end mode also starts by itself when an email is asked before the result and in personality quizzes.

A look for each quiz

The Design tab chooses this quiz's theme: any theme, or Follow the site theme. The preview changes on the spot; save to make it live. A cover and a page background just for this quiz are set there too. Customize for this quiz makes a copy of the theme that only this quiz uses.

6 Import and export questions

Large question banks are easier in a spreadsheet. In Questions, use Import CSV or JSON: the window explains the columns, offers a template to download and checks the file before anything is saved. The Download menu exports the current questions in the same format. A CSV saved by Excel with commas or semicolons both work.

id,category,type,media,correct,text_en,text_pt,answer1_en,answer1_pt,answer2_en,answer2_pt,answer3_en,answer3_pt
geo-001,geography,multiple,,1,Capital of Brazil?,Capital do Brasil?,Brasília,Brasília,Rio de Janeiro,Rio de Janeiro,São Paulo,São Paulo
sci-001,science,truefalse,,1,The Sun is a star.,O Sol é uma estrela.,True,Verdadeiro,False,Falso,,

• One row per question. text_<language> and answerN_<language> hold the texts, for example text_en, answer1_en.
• correct is the right answer as a letter (B), a number (2) or its text (Paris). More than one right answer: 1;3.
• type is multiple (2 to 6 answers), truefalse (exactly 2) or image (needs media, the file name from the media library).
• A row with an id that already exists updates that question instead of adding a copy. Leave id empty for new questions.
• If some rows have a problem, the check lists them with their line numbers. Fix the file and try again, or click Import the valid rows to skip the broken ones.

The same questions in JSON, the format shared by every Polar Games quiz product:

{
  "format": "quiz-studio.questions",
  "version": 1,
  "questions": [
    {
      "id": "geo-001",
      "category": "geography",
      "type": "multiple",
      "media": null,
      "text": { "en": "Capital of Brazil?" },
      "explanation": { "en": "Since 1960." },
      "answers": [
        { "text": { "en": "Brasília" }, "correct": true },
        { "text": { "en": "Rio de Janeiro" }, "correct": false }
      ]
    }
  ]
}

7 Appearance and themes

Appearance shows the themes. Use on site sets the theme every quiz follows; each quiz can also pick its own theme in its Design tab. Choose quizzes, in a theme's menu, applies one theme to several quizzes at once.

1

Marks on the screenshot

1. 1 Customize changes colors, fonts, corner roundness, background (solid, soft glow, one of the ready-made scenes or your own image), sounds and animation, with a live preview. Text colors are adjusted automatically so they stay readable on any colors you choose. Ready-made themes stay intact: saving creates your own copy, so updates can improve them safely.

Customize changes colors, fonts, corner roundness, background (solid, soft glow, one of the ready-made scenes or your own image), sounds and animation, with a live preview. Text colors are adjusted automatically so they stay readable on any colors you choose. Ready-made themes stay intact: saving creates your own copy, so updates can improve them safely.

Effects: switch off what you don't want

Every theme has an Effects card in its editor (Appearance, then Customize on a ready-made theme or Edit on your own). Each effect has its own switch. Turn off whatever you don't like: the preview changes at once, and Save keeps your choice for every quiz that uses the theme. No support request needed.

1 2

Marks on the screenshot

1. 1 Restore defaults: every switch goes back to the layout's starting point.
2. 2 A switch turns one effect on or off. Effects for a single layout are listed first.

All layouts: these work in every layout.

• Suspense before the answer: A half-second drumroll after the pick, then the reveal.
• Sparks and confetti: Sparks fly from a right answer; confetti on a score of 80% or more.
• Shake on a wrong answer: The card shakes briefly when the answer is wrong.
• Fade the other answers: After the reveal, the answers that don't matter lose their color and step back.
• On fire streak: Five right answers in a row make the card glow, with its own sound.
• 3-2-1 countdown: Counts down before the first question. When off, a short "Ready?" shows instead.
• Result reveal: The score ring fills, the trophy lands, then the numbers appear one by one.
• Answer tally: When a quiz keeps right and wrong for the end, the answers are counted out one by one before the result.
• Personal best: Remembers each player's best score in their browser and celebrates a new one.
• Extra sounds: Whoosh between questions, heartbeat in the last seconds, ticks while the score counts.
• Vibration on phones: A short buzz on each answer (Android; iPhones don't allow it).
• Next question on its own: After a right answer, moves on after 2.6 seconds. Touching the screen or a key stops it.

These effects belong to one layout. The card lists only the ones for the layout the theme uses; change the layout and the list changes with it.

• Card leans toward the mouse (Card): A subtle 3D tilt that follows the pointer (computers only).
• Spotlight (Stage): A beam of light sweeps across the right answer.
• Podium (Stage): The top three of the leaderboard stand on a podium on the result screen.
• Ink underline (Editorial): A line draws under the answer you point at and the one you pick.
• Counting question number (Editorial): The big question number rolls up from the previous one (01, 02…).
• Tap to continue (Stories): After the answer, a tap anywhere moves to the next question, like the next story.
• Typing dots (Chat): The host "types" for a moment before each question appears.
• Answer as a message (Chat): The picked answer becomes the player's chat bubble and the other options leave.
• Slow camera move (Split): The picture slowly zooms while the question is open.
• Page slide (Focus): Each question slides up like turning a page.
• Scan lines (Arcade): Thin horizontal lines over the page, like an old arcade screen.
• Glitch on a wrong answer (Arcade): A split-color jolt instead of a plain shake.
• Arcade score (Arcade): The score rolls digit by digit like an old cabinet, with a coin sound.

Restore defaults puts every switch back to what the layout starts with and the volume to 80%. The calm layouts (Editorial and Focus) start with “Sparks and confetti”, “Shake on a wrong answer”, “On fire streak”, “Extra sounds”, “Fade the other answers” off; Next question on its own starts off everywhere, and 3-2-1 countdown starts on only in Stage and Arcade.

Under the preview, the Result tab shows the end screen with its score reveal, and Play by itself plays three sample rounds by itself so you can watch every switch at work without answering anything.

If Animation under Sound and motion is set to None, the moving effects are off for that theme; sounds, vibration and personal best still work. Players who ask their device to reduce motion never see the moving effects either.

A few touches have no switch because they only help: the timer starts after the question has fully appeared, answers appear one after another, long titles wrap evenly, the score bar stays at the top and the sounds are balanced, with a different ending for each score range.

8 Share and embed

The Share tab of each quiz has the public link and an embed code. The embed adjusts its height to the quiz automatically.

On your own pages

1. Edit the page or post and add a Custom HTML block.
2. Paste the embed code from the Share tab.
3. Update the page. The quiz appears with its own theme and language.

9 Results, leaderboard and emails

Results shows finished games, finish rate, average correct answers and score, games per day and every question from the hardest to the easiest, all for the period you choose. Your own previews never count. Games and emails can be exported as CSV.

1

Marks on the screenshot

1. 1 Results shows finished games, finish rate, average correct answers and score, games per day and every question from the hardest to the easiest, all for the period you choose. Your own previews never count. Games and emails can be exported as CSV.

Leaderboard

When turned on, players may save a nickname to the top 10 after a game. You can remove any nickname in Results.

Email capture

When turned on, the result screen asks for the email (and name, if you want) with a consent checkbox. The exact consent text the player accepted is stored with each email. You can delete an email when someone asks.

10 Settings and diagnostics

Settings changes the site name, panel language, main language for new quizzes, time zone and your password.

Diagnostics checks PHP, the database, extensions, folder permissions, HTTPS, upload limits and two security points. When asking for support, click Copy report and paste it in your message; it never includes passwords.

1

Marks on the screenshot

1. 1 Diagnostics checks PHP, the database, extensions, folder permissions, HTTPS, upload limits and two security points. When asking for support, click Copy report and paste it in your message; it never includes passwords.

11 Update to a new version

1. Back up your database in the hosting panel (export with phpMyAdmin or the backup tool).
2. Upload the new contents of upload/ over the old files, except the config/ folder and your images in uploads/.
3. Open the panel. If the database needs changes, a yellow bar asks you to run the update: click Update now.
4. Check Settings → Diagnostics. Everything should be green.

Clearing the cache without losing progress

Progress is stored in this browser, not on the server. Clearing cached images and files, or doing a hard reload, keeps your progress.

Computer: press Ctrl+F5 on Windows and Linux, or Cmd+Shift+R on macOS. Phone: in the browser settings, choose the option to clear cached images and files.

Do not choose cookies and site data, or clear site data, for the game's address. That deletes the local save.

12 Security

• Passwords are stored as secure hashes; sign-in is limited to 5 failed attempts per 15 minutes.
• Uploaded images are checked by their content and renamed; files with code are refused.
• The folders app/, config/ and uploads/ include protection for Apache and LiteSpeed. On Nginx, ask your host to deny /app/ and /config/ and to disable PHP in /uploads/; Diagnostics tells you if it is needed.
• The right answers are never sent to the browser before the player answers, so scores cannot be faked by reading the page.
• Every change in the panel is protected against forged requests.

13 Package contents

quiz-studio-1.0.0.zip
├─ START-HERE.txt
├─ upload/            ← upload this folder's contents to your hosting
│  ├─ index.php
│  ├─ install/
│  ├─ app/            (PHP: never needs to be opened in a browser)
│  ├─ assets/         (compiled panel, player, fonts)
│  ├─ config/         (empty: the installer writes here)
│  └─ uploads/        (your images)
├─ source/            ← optional: panel and player source (TypeScript)
└─ documentation/     ← this guide

source/ holds the TypeScript source of the panel and the player for developers. You never need it to install or use Quiz Studio; the compiled files are already in upload/assets/.

14 Questions and fixes

15 Support

We help with installation, errors and questions about the features. Include the Diagnostics report and the address of your site.

Support request

When you write to support, include the browser and device, the game version, the page address, the steps that caused the problem, a screenshot and the first error shown in the browser console. Never send passwords, payment details or secret keys.

Quiz Studio uses React (MIT) in the admin panel and the Nunito and Fredoka fonts (SIL Open Font License 1.1, license files in upload/assets/fonts/). Sound effects are generated in the browser; no audio files are included.