npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

pub-quiz-generator

v0.0.15

Published

Write a pub quiz as YAML, compile into HTML presentation

Downloads

17

Readme

Pub Quiz Generator npm version

Write your pub quiz questions and answers as YAML code and let this script generate a HTML presentation (using reveal.js) from it.

An example repository can be found here, with the rendered output:

Usage

./index.js -d example/

This will create an output directory with following files:

  • index.html Main Pub Quiz presentation
  • answers.html Pub Quiz presentation with answers visible
  • worksheet.html Worksheet for the player teams, intended for print
  • solutionsheet.html Solutions in worksheet form, intended for print

Options:

  • -d, --directory: Path to the question directory (required)
  • -o, --output: Path to output directory, where the HTML is written to
  • -t, --templates: Path to template directory, if custom templates are needed

Dependencies

Optional (for YouTube question type):

Question directory

Folder structure:

Example_Quiz
|_ config.yaml
|_ 1-Category.yaml    # will be read alphabetically
|_ 2-Category.yaml
|_ 3-Category.yaml
|_ media
  |_ c1q3.mp3
  |_ c1q3.png

Configuration

The configuration file has to be named config.yaml. Check out the example.

Options:

  • title (String): Used as <title>value for the HTML. Default: Pub Quiz
  • worksheet_title: Title on each worksheet
  • custom_css (String): Custom CSS to be injected into the HTML
  • revealjs_path (String): Path to reveal.js dependency. Default: ../node_modules/reveal.js/
  • revealjs_theme (String): Reveal.js theme. Default: black

Categories

All yaml files in the root directory of the question directory other than config.yaml will be treated as categories. They will be added to the quiz in alphabetical order. If you want to have regular slides in addition to categories, just add category yaml files wit no questions attribute. Check out the example directory!

YAML format:

title_page: # each category gets an title slide
  title: Category title
  image: media/category.jpg # optional, displayed below title
  caption: Some caption text # optional, displayed below image
  # if markdown is set, other properties than title will be ignored
  markdown: |
    - a
    - b
    - c

questions: # array of questions, if missing the category will be treated just as a slide
    - type: text # simple text question
      title: Capital cities # optional
      question: What is the capital of Germany?
      answer: Berlin
      source: https://en.wikipedia.org/wiki/Germany # optional, displayed on the bottom in small font
    
    - type: markdown # markdown allows more formatting options
      title: Best fruit? # optional, added as h2 title before markdown
      markdown: |
        1. Strawberry
        2. Apple
        3. Banana
      answer: Banana
      source: https://en.wikipedia.org/wiki/Fruit # optional, displayed on the bottom in small font
    
    - type: image # question with an image
      title: Some title # optional, displayed above image
      image: media/c1q3.png # path to image
      caption: A caption # optional, displayed below image
      answer_image: media/c1q3.png # path to answer_image, creates additional solution slide
      answer: An answer
      source: Artist, License # optional, displayed on the bottom in small font
    
    - type: audio # question with an audio file
      audio: media/c1q3.mp3 # path to audio file
      audio_type: audio/mp3 # mime type
      autoplay: true # default: true
      controls: true # display control buttons (volume, seeking, and pause/resume), default: true
      title: Some title # optional, displayed above image
      image: media/c1q3.png # optional,  path to image
      caption: A caption # optional, displayed below image
      answer_image: media/c1q3.png # path to answer_image, creates additional solution slide
      answer: An answer
      source: Artist, License # optional, displayed on the bottom in small font
    
    - type: video # question with a video file
      video: media/c1q3.webm # path to video file
      video_type: video/webm # mime type
      autoplay: true # default: true
      controls: true # display control buttons (volume, seeking, and pause/resume), default: true
      title: Some title # optional, displayed above video
      caption: A caption # optional, displayed below video
      answer_image: media/c1q3.png # path to answer_image, creates additional solution slide
      answer: An answer
      source: Artist, License # optional, displayed on the bottom in small font

    - type: youtube-dl # downloads media from YouTube
      url: https://www.youtube.com/watch?v=dQw4w9WgXcQ # YouTube URL
      hasVideo: true # default: true
      hasAudio: true # default: true
      start: 0:00 # default: 0:00
      end: 1:00 # default: until the end
      outputPath: media/
      fileBaseName: dQw4w9WgXcQ  # file extension (.mp4 for example) will be added automatically
      autoplay: true # default: true
      controls: true
      title: Some title # optional, displayed above video
      caption: A caption # optional, displayed below video
      answer_image: media/c1q3.png # path to answer_image, creates additional solution slide
      answer: An answer
      source: https://www.youtube.com/watch?v=dQw4w9WgXcQ # optional, displayed on the bottom in small font

Multiple title pages in a single category

A category can have multiple title pages. To achieve this, replace the title_page attribute with title_pages. There you can supply an array of title pages. Example:

title_pages:
  - title: Example Pub quiz

  - title: Rules
    markdown: |
      - No more than 5 people per team
      - No phones
      - Drink!

Media files

It is recommended to put all media files (images, audio, video) in a folder inside the question directory, like in the example.

Theme configuration

Can be done in the custom_css property of config.yaml.

Category/question numbering

To disable category/question numbering, add this rule to the custom_css property:

  #question_number {
      display: none;
  }