Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ubc/emoji-feedback
General emoji-driven feedback eliciting tool 💀 👻 👽 🤖 💩
https://github.com/ubc/emoji-feedback
emoji feedback javascript pure-javascript
Last synced: 2 months ago
JSON representation
General emoji-driven feedback eliciting tool 💀 👻 👽 🤖 💩
- Host: GitHub
- URL: https://github.com/ubc/emoji-feedback
- Owner: ubc
- License: mit
- Created: 2019-01-08T00:11:23.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-07-15T19:53:41.000Z (5 months ago)
- Last Synced: 2024-08-11T00:47:52.655Z (5 months ago)
- Topics: emoji, feedback, javascript, pure-javascript
- Language: JavaScript
- Homepage: https://jsfiddle.net/justin0022/pd4oczva/18/
- Size: 5.06 MB
- Stars: 2
- Watchers: 6
- Forks: 0
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://standardjs.com)
[](https://github.com/facebook/jest)
[](https://img.shields.io/badge/gzip%20size-6.4kB-green.svg)
[](http://vanilla-js.com/)
# Emoji-Feedback 💀 👻 👽 🤖 💩
[Working Prototype](https://jsfiddle.net/justin0022/pd4oczva/18/) | [Example of integration into dashboard (click "GIVE FEEDBACK" button)](https://justin0022.github.io/dashboard/)
A delightful tool for eliciting feedback via emojis, featuring a feedback form. 0 dependencies, written in pure vanilla JavaScript.
## Getting Started
These instructions will get you a copy of the project up and running on your local machine.
### Prerequisites
1. **Install [Node 8.0.0 or greater](https://nodejs.org)**.
2. **Install [Git](https://git-scm.com/downloads)**.
### Installing and Setup
1. First, clone this repo. `git clone https://github.com/ubc/emoji-feedback.git`
1. Then cd into the repo. `cd emoji-feedback`
1. Run the installation script. `npm install` (If you see `babel-node: command not found`, you've missed this step.)
1. Run using `npm start`. Webpack Dev Server will host a hot-loading webpage.
1. To build for production, `npm run build` will output the production-ready, minified, tree-shaken bundle in `/dist`.
### Usage
Emoji-Feedback can be installed via `npm`. Since this app requires the DOM, it will not run via Node. I highly recommend using something like Webpack or Rollup to produce a bundle that will be executed by the browser.
`npm i @justin0022/emoji-feedback`
```javascript
const emojiFeedback = require('@justin0022/emoji-feedback')
const app = emojiFeedback()
const endpoints = {
emoji: 'http://127.0.0.1:5000/emoji',
feedback: 'http://127.0.0.1:5000/feedback',
votes: 'http://127.0.0.1:5000/votes'
}
const caliper = {
object: {
'id': 'urn:uuid:42db09b6-98fc-4ea6-87f3-fd2f85b9b12a',
'type': 'DigitalResource'
},
questionId: 'urn:uuid:450f0d09-4c87-414e-87d2-29df60ae3b39',
scaleId: 'urn:uuid:450f0d09-4c87-414e-87d2-29df60ae3b39'
}
app.init('entry', endpoints, caliper, {
introText: 'I can customize this!',
feedbackTextPrompt: 'Please write down below',
feedbackThankYou: 'Thanks again!',
emojis: [
{ emojicon: '💀', emotion: 'skull' },
{ emojicon: '👻', emotion: 'ghost' },
{ emojicon: '👽', emotion: 'alien' },
{ emojicon: '🤖', emotion: 'robot' },
{ emojicon: '💩', emotion: 'pile of poo' }
]
})
```
`emojiFeedback` has one method, `init`. Init takes 3 arguments: `entry`, `endpoints`, `options`
* `entry` is the HTML id attribute that should be unique to the document. This is the entry point of Emoji Feedback.
* `endpoints` is an object that contains 3 endpoints: `emoji`, `feedback` and `votes`. `emoji` and `feedback` send POST requests that contain the selected emoji(s) and the written feedback in the body of the request, respectively. `votes` sends a GET request for retrieving the number of times students have voted.
* `options` is an *optional* object that contains `introText`, `feedbackTextPrompt`, `feedbackThankYou`, which allow for configurations of the text, as well as `emojis`, which can be used to configure the emojis to your liking. It is highly recommend to set the value of `emotion` to the CLDR short name of the emoji, which can be found at [https://unicode.org/emoji/charts/full-emoji-list.html](https://unicode.org/emoji/charts/full-emoji-list.html). For example,
```javascript
const myConfiguredEmoji = [
{ emojicon: '💀', emotion: 'skull' },
{ emojicon: '👻', emotion: 'ghost' },
{ emojicon: '👽', emotion: 'alien' },
{ emojicon: '🤖', emotion: 'robot' },
{ emojicon: '💩', emotion: 'pile of poo' }
]
app.init('entry', endpoints, caliper, {
emojis: myConfiguredEmoji
})
```
### Tests
To run the tests, first ensure that the application is running locally (`npm start`), then `npm test` will run the Jest unit and UI tests (in Puppeteer's headless mode).
If the app is not running locally, then the UI tests will fail, as they rely on the DOM.
Code coverage is >90%, and more tests will be added over time.