Slide: Poll

Engage your audience or class in real time. Involve them to contribute to your presentations with their smartphones and show the results live.

Add a slide "Poll" to your presentation.

Table of contents

Layout

Do you like my presentation so far?

It is super

Meh

I could'nt care less

Tell me why

Go to deckdeckgo.com/poll and use the code 0

Awaiting first votes

Ain't nothin' but a heartache

0%0/0

Nota bene

This template does not currently save the results of the voting. Each time you will refresh or launch your presentation, the poll start again.

If you would have this requirement, let us now with a new feature request in our GitHub issue tracker.

Installation

This template could be added to your presentation using the following methods.

If you are using our Starter Kit, no need to worry about this, this template is included, therefore you could skip the "Installation" chapter.

From a CDN

It's recommended to use unpkg to use this template from a CDN. To do so, add the following include script in the main HTML file of your project:

<script type="module" src="https://unpkg.com/@deckdeckgo/slide-poll@latest/dist/deckdeckgo-slide-poll/deckdeckgo-slide-poll.esm.js"></script> <script nomodule="" src="https://unpkg.com/@deckdeckgo/slide-poll@latest/dist/deckdeckgo-slide-poll/deckdeckgo-slide-poll.js"></script>

From NPM

To install this template in your project from npm run the following command:

npm install @deckdeckgo/slide-poll

Framework integration

The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.

That being said, commonly, you might either import or load it:

Import

import '@deckdeckgo/slide-poll';

Loader

import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-poll/dist/loader'; deckDeckGoSlideElement();

Usage

The "Poll" slide's Web Component could be integrated using the tag <deckgo-slide-poll/>.

<deckgo-slide-poll poll-link="https://deckdeckgo.com" socket-url="https://api.deckdeckgo.com"> <h1 slot="question">Do you like my presentation so far?</h1> <p slot="answer-1">It is super</p> <p slot="answer-2">Meh</p> <p slot="answer-3">I could'nt care less</p> <p slot="answer-4">Tell me why</p> <p slot="answer-5">Ain't nothin' but a heartache</p> <p slot="how-to">Go to <a href="https://deckdeckgo.com/poll">deckdeckgo.com/poll</a> and use the code {0}</p> <p slot="awaiting-votes">Awaiting first votes</p> </deckgo-slide-poll>

Slots

The slots question and at least one answer should be provided. Answer slots have to be provided as answer-x where x is a number bigger than 0.

The slot how-to and awaiting-votes are optional, still, it's probably for best of your audience to provide these.

Note also that if you provide a string 0 in the content of your slot how-to, the information will be automatically converted to the real key of your poll (the key your audience could use to reach it and vote).

Notes

Optionally a slot notes could be use to add some notes regarding the particular slide. These will be automatically displayed in the remote control.

If you are using the DeckDeckGo starter kit and wish to make your notes accessible to anyone, you would need to mark them with an attribute show.

Attributes

This component offers the following options which could be set using attributes:

AttributeTypeDefaultDescription
socketUrlstringhttps://api.deckdeckgo.comThe url of the socket (server) where the poll (chat room) is going to be created.
socketPathstring/pollThe path to reach the socket server
connectPollSocketbooleantrueIn case you would not like that the template try to reach the socket server
pollLinkstringhttps://deckdeckgo.com/pollThe url which leads to the voting application respectively where your audience will be available to make their voice heard aka where they will be able to vote.
pollKeystringPer default the template will always try to create a new poll but if you set this value, it will try to retrieve an existing poll

Theming

The following theming options will affect this component if set on its host or parent.

CSS4 variableDefaultNote
--background
--color
--slide-padding-top16pxPadding top of the all slide
--slide-padding-end32pxPadding right of the all slide
--slide-padding-bottom16pxPadding bottom of the all slide
--slide-padding-start32pxPadding left of the all slide
--slide-poll-grid-column-gap32pxThe column gap between the QR code and the chart
--slide-poll-justify-contentcenterThe QR code column content justify position
--slide-poll-align-itemscenterThe QR code column content items alignment
--slide-poll-text-aligncenterThe QR code column text alignment
--slide-poll-backgroundThe background behind the QR code component
--slide-poll-how-to-max-widthcalc(100% - 64px)The maximal width of the "how-to" slot
--slide-poll-how-to-font-size0.8emThe font-size of the text of thee slot "how-to"
--slide-poll-awaiting-votes-z-index1The z-index of the "awaiting-votes" slot
--slide-poll-awaiting-votes-backgroundrgba(255,255,255,0.9)The background of the "awaiting-votes" slot
--slide-poll-awaiting-votes-border-radius8pxThe border-radios of the "awaiting-votes" slot
--slide-poll-awaiting-votes-padding8pxThe padding of the "awaiting-votes" slot

Moreover, this component is using the Web Components "QR Code" and "Bar chart". Their respective CSS4 variables could be applied too.

Methods

The slide "Poll" offers some extra methods.

Update

Update not in progress, update the answers and chart of the poll.

const slide = deck.getElementsByTagName('deckgo-slide-poll'); await slide.update();

Is answered

Test if the poll has been at least answered once by a member of your audience.

const slide = deck.getElementsByTagName('deckgo-slide-poll'); await slide.isAnswered(); // resolve a boolean