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

slidev-component-poll_mmathias01

v2.2.1

Published

Poll component for Slidev

Downloads

30

Readme

slidev-component-poll

NPM version

Poll and quiz component for Slidev.

Question

Results

See below for more examples.

Installation

npm i slidev-component-poll

Slidev Configuration

Define this package into your slidev addons.

In your slides metadata (using Front Matter):

---
addons:
  - slidev-component-poll
---

Or in your package.json:

{
  "slidev": {
    "addons": [
      "slidev-component-poll"
    ]
  }
}

Using serverRef

slidev-component-poll can use built-in slidev capabilities to allow communication with multiple clients.

By using serverRef, the communication with multiple clients is only possible in dev mode!

This won't work if you build and deploy to a static host.

To use serverRef you will need to define the default value in your own project.

For that you need to create a vite.config.ts file with (see here for more information):

import { defineConfig } from 'vite';

export default defineConfig({
  slidev: {
    serverRef: {
      state: {
        polls: {},
        users: {},
      }
    }
  }
});

Using a server

You can use a Server Sent Events server or a WebSocket server to allow communication with multiple clients.

Take at look at this custom implementation: https://github.com/Smile-SA/slidev-poll-server

In that case you need to use the pollSettings config in your markdown file Front Matter to set the server URL (Update the value of server using your own URL).

For HTTP Server Sent Events server:

---
pollSettings:
  server: http://localhost:8080
---

Or for WebSocket server:

---
pollSettings:
  server: ws://localhost:8080
---

Then, in the presentation, click on the connect icon.

Connect control icon

Type in a hash that you can share with other peoples and press enter. (you can use the proposed hash: everybody that are on the same presentation will have the same)

Connect control hash

You are connected!

Connected

You can also use the autoConnect settings to automatically connect to the server:

---
pollSettings:
  server: http://localhost:8080
  autoConnect: true
---

Or provide a number of seconds. In that case you will need to connect the first time, and then if you refresh the page it will automatically reconnect you if the number of seconds since the last connection has not be elapsed:

---
pollSettings:
  server: http://localhost:8080
  autoConnect: 86400 # one day
---

Anonymous

If you prefer that users answer polls anonymously, or prefer to skip the step of defining a name when answering polls, add in the Front Matter:

---
pollSettings:
  anonymous: true
---

Components

You can create a poll by using the Poll component.

But if this component does not suit your needs, you can use individual sub-components.

Poll

All in one component for poll:

<Poll question="What is your favorite color ?" :answers="['Red', 'Green', 'Blue']" />

Or with markdown answers:

<Poll question="What is your favorite color ?">

**Red**

**Green**

**Blue**

</Poll>

Parameters:

  • answers (string[]): The available answers to the question (can also be provided using the default slot).
  • clearable (boolean, default: false): Can the poll be cleared after being closed ? (results will be cleared and poll can be reopened again). For controlled polls only.
  • controlled (boolean, default: false): If true the poll will not be opened at the start, use controls to open and close the poll (see below for more information).
  • correctAnswer (number | number[]): Highlight the corresponding answer(s) in the results (index starts at 0).
  • displayResults ('poll' | 'quiz' | 'publicQuiz', default 'quiz'): Display results as poll or quiz (see below for more information).
  • editable (boolean, default: false): Can someone's answer be edited by this same person ?
  • id ('string'): Unique identifier for poll (if not provided, the system will generate an id based on the page number).
  • multiple (boolean, default: false): Can someone select multiple answers (displays checkbox instead of radio buttons).
  • question (string, required): The question displayed as title.
  • reOpenable (boolean, default: false): Can the poll be reopened after being closed ? (old results are kept).
  • showResults ('free' | 'auto' | 'none', default 'auto'):
    • 'free': User can see results before submitting
    • 'auto': Results are only shown after user submission
    • 'none': Results are only accessible for user that have access to controls

Poll and quiz

You can use this addon to either create polls or quizzes mostly base on the displayResults props.

Here is an example when displayResults="poll" (left side show slideshow view and right side show presenter view).

  • Poll not answered: Poll not answered
  • Poll results (when answered): Poll results

Code example:

<Poll question="What is your favorite color ?" :answers="['Red', 'Green', 'Blue']" displayResults="poll" />

Here is an other example when displayResults="quiz" or displayResults="publicQuiz".

  • Quiz not answered: Poll not answered
  • Quiz results (when answered): Poll results

Code example:

<Poll question="What is your favorite color ?" :answers="['Red', 'Green', 'Blue']" correctAnswer="0" />

People names will be shown in front of the results for the presenter or if displayResults="publicQuiz".

Controlled forms

When using controlled=true the poll can be controlled meaning that its state can be changed.

The poll can have three state:

  • CLEARED: Starting state, no results recorded and no result can be recorded, waiting to be opened.
  • OPEN: Poll is open, and results can be received.
  • CLOSED: Poll is closed, and results can not be received anymore.

Here is an example when controlled=true and clearable=true (left side show slideshow view and right side show presenter view).

  • Poll is not yet open: Clearable poll not open
  • Poll is open: Clearable poll open
  • Answer has been submitted: Clearable poll answer submitted
  • Poll is closed: Clearable poll closed

If you run the slidev server with remote access (and you should if you don't use a server but want other people to answer your polls), then you can control the state of the poll from the presenter view.

When remote control is enabled, the presenter button is not shown, so people does not have direct access to the presenter view.

But anyone who tap the presenter view URL in its browser can access the presenter view, and then control the state of your poll.

If you want to prevent that, you can start the server with --remote=[your_password] and in that case the presenter view is a little more secured.

When using a password, the controls will also be displayed on the slideshow but only if the password query parameter in the URL is correct.

We can sum up the following cases:

  • slideshow view without password (or wrong password): controls are not shown
  • slideshow view with correct password (if any is set): controls are shown
  • presenter view: controls are shown