https://github.com/molefrog/ficus.io
Instant polls in your presentations
https://github.com/molefrog/ficus.io
Last synced: 3 months ago
JSON representation
Instant polls in your presentations
- Host: GitHub
- URL: https://github.com/molefrog/ficus.io
- Owner: molefrog
- License: mit
- Created: 2023-03-25T15:32:23.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-26T13:50:40.000Z (over 2 years ago)
- Last Synced: 2025-03-29T07:22:22.289Z (4 months ago)
- Language: JavaScript
- Homepage: https://ficus.io
- Size: 113 KB
- Stars: 14
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ficus.io
Ficus **was** an app for creating online presentations with interactive real-time slides, such as
polls, comments, and ratings. It was built in 2014, but it is currently discontinued.
## Embeddable Ficus polls
The web app isn't available anymore, however you are free to use embeddable components in your code:
```js
// import ESM directly from ficus.io CDN
import { createPoll } from "https://ficus.io/widget.js";
const [update, unmount] = createPoll(rootElement, {
type: "classic", // see configuration section below
config: {
question: "Yes or No?",
// optional, where the poll is being presented
url: "ficus.io",
answers: [
{ id: "n", color: "red", label: "NO!" },
{ id: "y", color: "blue", label: "YES!" },
],
},
// optional, you can use `update` to populate the poll new the new responces later on
votes: [
{ id: "1", answer: "y" },
{ id: "1", answers: ["n", "y"] }, // multiple answers per response are allowed!
],
});
// update the poll with the new responses
update({ votes: [...] })
// destroy the widget when you're done
umount()
```
### Configuration & Theming
Poll configuration is flexible and supports both short and verbose forms. See examples below:
```js
createPoll(el, {
config: {
question: "Cats or dogs?",
answers: ["Cats!", "Dogs!"], // ficus will assign ids ('0' and '1') and colors automatically
},
});
update({ votes: ["0", "0", "1"] }); // two votes for 'Cats' and one for 'Dogs'
```
There are 4 types of polls (e.g. the graphic visualization of the polling process):
- `"classic"`
- `"bar"`
- `"cloud"`
- `"bubble`
Check ficus.io website for reference.
```js
createPoll(el, {
type: "bar", // or "classic", "cloud", "bubble". Default: "classic"
config: { ... },
});
```
Fonts and colors are also customizable:
```js
createPoll(el, {
config: { ... },
// override default theme settings (every prop is optional here)
theme: {
font: 'Comic Sans MS', // default: system-ui
backgroundColor: 'blue', // default: white
textColor: 'red', // default: black
// default: 4:3
// Ficus will automatically resize the poll to fill the parent container's width
aspectRatio: '16:9'
}
});
```
### How `widget.js` is deployed
Website and widget are built separately by Vite. Widget build outputs `manifest.json` that contains
a mapping between the entry point name and hashed chunk name. All static assets and chunks are
cached indefinitely, except for `/widget.js` which is a serverless endpoint that returns an ESM
shim.
## Credits
Built by the former members of Code Hipsters: Eugene, Sam, Tikhon, Alexey, Victor and Boris.