live-quiz 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -13
- package/dist/participant/index.d.ts +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Add live audience quizzes to your [Reveal.js](https://revealjs.com) presentations. Powered by [AnyCable](https://anycable.io).
|
|
4
4
|
|
|
5
|
+
**[Live Demo](https://livequizdemo.netlify.app/)** — open the presenter view in one tab and the [audience page](https://livequizdemo.netlify.app/quiz.html) on your phone.
|
|
6
|
+
|
|
5
7
|
## What You Get
|
|
6
8
|
|
|
7
9
|
You build a Reveal.js deck with quiz slides, deploy it to the web, and present it. When you land on a quiz slide, your audience sees a QR code, scans it on their phones, and votes — results animate on your slides in real time.
|
|
@@ -11,6 +13,7 @@ You build a Reveal.js deck with quiz slides, deploy it to the web, and present i
|
|
|
11
13
|
- **Live bar chart** that updates as votes come in (sub-second via WebSockets)
|
|
12
14
|
- **Participant counter** showing how many people are connected
|
|
13
15
|
- **Mobile-friendly voting page** — no app install, just a browser
|
|
16
|
+
- **Automatic question sync** — define questions once on your slides, the audience page receives them automatically
|
|
14
17
|
- **Theming** — inherits your Reveal.js theme's fonts and colors automatically
|
|
15
18
|
|
|
16
19
|
## How It Works
|
|
@@ -27,13 +30,16 @@ Your presentation needs to be **deployed to the web** (not just opened locally)
|
|
|
27
30
|
Presenter's slides AnyCable Audience phones
|
|
28
31
|
│ │ │
|
|
29
32
|
│ show quiz slide │ │
|
|
30
|
-
|
|
33
|
+
├── broadcast state ───────►│── push state ─────────►│
|
|
34
|
+
│ (questions + results) │ (questions + results) │
|
|
31
35
|
│ │ │
|
|
32
36
|
│ │◄──── submit vote ──────┤
|
|
33
37
|
│◄── broadcast results ─────┤ (serverless fn) │
|
|
34
38
|
│ update bar chart │ │
|
|
35
39
|
```
|
|
36
40
|
|
|
41
|
+
Questions are defined once — as `data-quiz-*` attributes on your slides. The presenter broadcasts them to the audience page via the sync channel, so the participant widget doesn't need its own copy.
|
|
42
|
+
|
|
37
43
|
## Getting Started
|
|
38
44
|
|
|
39
45
|
There are two ways to set up: the **interactive CLI** (recommended) or **manual setup**.
|
|
@@ -137,21 +143,11 @@ import 'live-quiz/participant.css';
|
|
|
137
143
|
createParticipantUI('#quiz-root', {
|
|
138
144
|
wsUrl: 'wss://your-cable.anycable.io/cable',
|
|
139
145
|
quizGroupId: 'my-talk',
|
|
140
|
-
questions: [
|
|
141
|
-
{
|
|
142
|
-
quizId: 'q1',
|
|
143
|
-
question: 'Where are you joining from?',
|
|
144
|
-
options: [
|
|
145
|
-
{ label: 'A', text: 'San Francisco' },
|
|
146
|
-
{ label: 'B', text: 'New York' },
|
|
147
|
-
{ label: 'C', text: 'Europe' },
|
|
148
|
-
{ label: 'D', text: 'Elsewhere' },
|
|
149
|
-
]
|
|
150
|
-
}
|
|
151
|
-
]
|
|
152
146
|
});
|
|
153
147
|
```
|
|
154
148
|
|
|
149
|
+
That's it — questions are synced automatically from your presentation slides. No need to duplicate them here.
|
|
150
|
+
|
|
155
151
|
#### 6. Add serverless functions and deploy
|
|
156
152
|
|
|
157
153
|
Your presentation must be deployed — the audience needs to reach it from their phones.
|
|
@@ -7,13 +7,13 @@
|
|
|
7
7
|
* import 'live-quiz/participant.css';
|
|
8
8
|
*
|
|
9
9
|
* createParticipantUI('#quiz-root', {
|
|
10
|
-
* wsUrl: 'wss://your-cable.
|
|
10
|
+
* wsUrl: 'wss://your-cable.anycable.io/cable',
|
|
11
11
|
* quizGroupId: 'my-talk',
|
|
12
12
|
* });
|
|
13
13
|
*
|
|
14
14
|
* Usage (static — backward compatible):
|
|
15
15
|
* createParticipantUI('#quiz-root', {
|
|
16
|
-
* wsUrl: 'wss://your-cable.
|
|
16
|
+
* wsUrl: 'wss://your-cable.anycable.io/cable',
|
|
17
17
|
* quizGroupId: 'my-talk',
|
|
18
18
|
* questions: [
|
|
19
19
|
* {
|