How to Use - Quiz Galaxy Documentation

Run Quiz Galaxy - Pluggable widget

The Quiz Galaxy widget is a single file that can be imported into any project that runs inside a browser. It is a standalone widget that contains all the functionalities of the quiz game and it is highly customizable.

Prerequisites

You don't need to have anything installed on your machine to use the Quiz Galaxy widget. You can use it by importing it into any of your projects that run inside a browser. You can even import it into a plain HTML file, as the widget is a single file.

You will notice that you get 2 javascript files.

*widget.small.js - This file is the minified version of the widget, that DOES NOT contain the questions. It is recommended to use this file when you want to add your own questions.
widget.with-questions.js - This file contains all the questions already built-in. You can use this file if you want to use the default questions.

Steps

Import the widget file into your project. You can do this by adding the following script tag in your HTML file:

<script src="widget.with-questions.js" type="text/javascript"></script>

By importing this script, a new html tag will be available in your project.

You can add the widget to your project by adding the following tag:

<quiz-galaxy></quiz-galaxy>

Customize

Override the CSS classes

There are a few CSS classes that can be overridden to change the look of the widget. The classes are the following:

.custom-power-ups-list {
  /* Place here any styles you want to add to the power-ups list */
}
 
.custom-power-up-item {
  /* Place here any styles you want to add to the power-up item */
}
 
.custom-question-topic {
  /* Place here any styles you want to add to the question topic */
}
 
.custom-question-text {
  /* Place here any styles you want to add to the question text */
}
 
.custom-question-answers {
  /* Place here any styles you want to add to the question answers container */
}
 
.custom-answer-button {
  /* Place here any styles you want to add to the answer button */
}
 
.custom-correct-unanswered-answer {
  /* Place here any styles you want to add to the correct unanswered answer */
}
 
.custom-wrong-answer {
  /* Place here any styles you want to add to the wrong answer */
}
 
.custom-correct-answer {
  /* Place here any styles you want to add to the correct answer */
}
 
.custom-ask-audience-percentage {
  /* Place here any styles you want to add to the ask audience percentage */
}
 
.custom-ask-audience-progress {
  /* Place here any styles you want to add to the ask audience progress bar */
}

You can override one or more of these classes by adding the following:

<quiz-galaxy>
  <style quiz-galaxy="style">
    .custom-ask-audience-progress {
      background: green !important;
    }
    .custom-answer-button:active {
      box-shadow: #422800 2px 2px 0 0;
      transform: translate(2px, 2px);
    }
  </style>
</quiz-galaxy>

Configure the instance of the widget

The configuration object can contain the following properties:

 config = {
  // Default will be 30
  secondsAllowedPerQuestion?: number
  // Default will be 5
  maxPowerUps?: number
  // Allowed are all the power-ups
  allowedPowerUps?: ['FIFTY_FIFTY' | 'ASK_AUDIENCE' | 'FREEZE' | 'ELIMINATE_ONE']
  // If set to true, the lives will not be displayed
  shouldRenderLives?: boolean
  // If set to true, the stars background will be displayed
  withBackground?: boolean
  // If set to true, the confetti will be displayed when the user selects the correct answer
  showConfettiOnCorrectAnswer?: boolean
  // Default will be 3
  maxLives?: number
  // Default will be true
  showProgressBar?: boolean
  // If set to true, the seconds countdown will be displayed
  showSecondsCountdown?: boolean
 }

For example, if you want to set the number of seconds allowed per question to 20, you can create the widget like this:

<quiz-galaxy config='{"secondsAllowedPerQuestion": 20}'></quiz-galaxy>

If we also want to increase the maximum number of lives, we can do it like this:

<quiz-galaxy
  config='{"secondsAllowedPerQuestion": 20, "maxLives": 5}'
></quiz-galaxy>

Override the icons with anything you want.

The title that appears above the topic can also be changed. You can do this by adding the following:

<quiz-galaxy
  config='{"secondsAllowedPerQuestion": 20, "maxLives": 5}'
>
    <div quiz-galaxy="fifty-fifty-icon">😀</div>
    <div quiz-galaxy="ask-audience-icon">😅</div>
    <div quiz-galaxy="freeze-time-icon">😰</div>
    <div quiz-galaxy="eliminate-one-icon">👻</div>
 
    <div quiz-galaxy="empty-life-icon">🍬</div>
    <div quiz-galaxy="full-life-icon">🍿</div>
 
    <div quiz-galaxy="title">🍭 My Custom Title</div>
</quiz-galaxy>

Change the CSS variables that are used in the widget.

The variables are the following:

--quiz-galaxy-font: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe
    UI Emoji, Segoe UI Symbol, Noto Color emoji;
 
--quiz-galaxy-background: #1c2434;
 
--quiz-galaxy-placeholder: #b4b4b4;
--quiz-galaxy-border: #2a2f36;
 
--quiz-galaxy-progress-color: #2196f3;
--quiz-galaxy-text: #ffffff;
 
--quiz-galaxy-stars-color: #00c1fb;
--quiz-galaxy-clr-red: #f44336;
 
# Used for topic colors
--quiz-galaxy-clr-bg-card1: #f45c43;
--quiz-galaxy-clr-bg-card2: #dc4973;
--quiz-galaxy-clr-bg-card3: #ab4f8f;
--quiz-galaxy-clr-bg-card4: #5438dc;
--quiz-galaxy-clr-bg-card5: #357ded;
--quiz-galaxy-clr-bg-card6: #008072;

You can override one or more of these variables by adding the following:

<quiz-galaxy
  config='{"secondsAllowedPerQuestion": 20, "maxLives": 5}'
>
  <style quiz-galaxy="style">
    :root {
      --quiz-galaxy-background: #000000;
      --quiz-galaxy-progress-color: #ff0000;
    }
  </style>
</quiz-galaxy>

Use different questions

The widget comes with a set of questions that are used by default. If you want to use your own questions, you can do this by adding the following:

const questions = [
  {
    id: 1,
    question: "What is 1 + 1?",
    correctAnswer: "2",
    answers: ["1", "2", "3", "4"],
    topic: "Easy things"
  }
]
const striginfiedQuestions = JSON.stringify(questions)
 
return <quiz-galaxy
config='{"secondsAllowedPerQuestion": 20, "maxLives": 5}'
questions={striginfiedQuestions}
</quiz-galaxy>

Events

The widget emits events that can be listened to. The events are the following:

const triggeredEvents = {
'quiz-galaxy:answer': This event is emitted when the user selects an answer. The event contains the
    following properties: { answer: string, isCorrect: boolean },
'quiz-galaxy:use-power-up': This event is emitted when the user uses a power-up. The event contains the
    following properties: { powerUp: string },
'quiz-galaxy:correct-answers': This event is emitted when the user selects a correct answer. The event
    contains the following properties: { correctAnswers: number },
'quiz-galaxy:lives-update': This event is emitted when the user loses a life. The event contains the
    following properties: { lives: number },
'quiz-galaxy:no-more-questions': This event is emitted when there are no more questions to answer and
    the widget cannot fetch any more.
'quiz-galaxy:load-more-questions': This event is emitted when the user has answered all the questions
    and the widget tries to load more questions.
'quiz-galaxy:next-question': This event is emitted when the user has answered a question and the widget
    displays the next question.
'quiz-galaxy:game-end': This event is emitted when the user has answered all the questions and the game
    ends.
}

You can listen to these events by adding the following:

<quiz-galaxy id="my-quiz-galaxy"></quiz-galaxy>
 
<script>
  const quizGalaxy = document.getElementById('my-quiz-galaxy')
 
  window.addEventListener('message', (el) => {
    if (!el.data.type) {
      return
    }
 
    switch (el.data.type) {
      case 'quiz-galaxy:answer':
        console.log('Answer:', el.data.payload)
        break
      case 'quiz-galaxy:use-power-up':
        console.log('Power up:', el.data.payload)
        break
      case 'quiz-galaxy:correct-answers':
        console.log('Correct answers:', el.data.payload)
        break
      case 'quiz-galaxy:lives-update':
        console.log('Lives update:', el.data.payload)
        break
      case 'quiz-galaxy:no-more-questions':
        console.log('No more questions')
        break
      case 'quiz-galaxy:load-more-questions':
        console.log('Load more questions')
        break
      case 'quiz-galaxy:next-question':
        console.log('Next question')
        break
      case 'quiz-galaxy:game-end':
        console.log('Game end')
        break
    }
  })
</script>

Run Locally