https://github.com/alex-ray/qna
A simple library for interactive questions and answers.
https://github.com/alex-ray/qna
Last synced: 3 months ago
JSON representation
A simple library for interactive questions and answers.
- Host: GitHub
- URL: https://github.com/alex-ray/qna
- Owner: Alex-ray
- License: mit
- Created: 2015-06-12T05:09:19.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-01-04T13:00:51.000Z (about 9 years ago)
- Last Synced: 2025-08-09T13:49:40.900Z (5 months ago)
- Language: JavaScript
- Size: 2.09 MB
- Stars: 13
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# qna.js [](https://travis-ci.org/Alex-ray/qna) [](https://coveralls.io/r/Alex-ray/qna)
> Chat like questions and answers
## Usage
#### [Editable Example](http://jsfiddle.net/57xon9ov/14/)
```html
document.addEventListener('DOMContentLoaded', function() {
var questionText = [
{str: 'Hello, '},
{str: 'What\'s your name?', pauseDelay: 50}
];
var defaultAnswerText = [
{str: 'It\'s, great to meet you'}
];
var answerOpts = { responder: answerResponder };
var questionOpts = { form: '#question-form' };
var answer = new qna('.answer .snippet', defaultAnswerText, answerOpts);
var question = new qna('.question .snippet', questionText, questionOpts);
question.bindAnswer(answer) ;
question.respond( );
function answerResponder ( event, form ) {
event.preventDefault();
var input = form.querySelector('input');
var name = input.value.trim();
input.blur();
return [
{str: 'Hello, '+name},
{str: 'It\'s, great to meet you'}
];
}
});
```
## Api
In the browser, `qna` is a global variable. In Node, do:
```js
var qna = require('qna');
```
#### var q = new qna(nodeSelection, snippets [, opts]);
This will initialize a qna instance on the documents `nodeSelection` and corresponding `snippets` with the given options.
- `nodeSelection` — A DOM Node List or a query selector string (passed into `document.querySelectorAll()`).
- `snippets` — An ordered Array of `snippetObjects`.
- `snippetObject` — An Object literal with the following properties
- `str` — A String (required)
- `pauseDelay` — A Number representing the delay before typing in milliseconds (optional, default 750)
- `typeSpeed` — A Number representing the typing speed in milliseconds (optional, default 50)
- `opts` —
Key | Description | Value
:--|:--|:--
`responder` | A function for generating responses to form submissions | A function that returns a `snippetObject` Array
`form` | The form element to listen for a submit event. | A DOM Element or a selector String
`answer` | The answer to the question | An instance on qna
#### q.respond([callback, args])
Type the `snippets` to the corresponding `nodeSelection` list defined at initialization with an optional callback that will be called after all the snippets have been typed to the screen.
If a responder was specified at initialization the additional arguments will be passed through to the responder function. If the responder returns a `snippetObject` it will use those `snippetObjects` to type to the corresponding `nodeSelection`
#### q.bindAnswer(a, [callback])
`a` is a instance of qna.
`callback` is a function that will be called after the questions form has been submitted.
Assign an answer and optional callback to a question.
The answers `a.respond` method will be triggered when the questions form is submitted with that events parameters (formEvent, formEl).
## Installation
Install via [npm](https://npmjs.com):
```
$ npm i --save qna
```
Install via [bower](http://bower.io):
```
$ bower i --save alex-ray/qna
```
## License
[MIT](LICENSE)