qna v1.0.1
qna.js 
Chat like questions and answers
Usage
Editable Example
<body>
<p class="question">
<span class="snippet"></span>
<span class="snippet"></span>
</p>
<form id="question-form" name="question">
<input name="name" type="text" placeholder="Your Name">
</form>
<p class="answer">
<span class="answer-snippet"></span>
<span class="answer-snippet"></span>
</p>
<script src="dist/qna.min.js"></script>
<script>
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'}
];
}
});
</script>
</body>Api
In the browser, qna is a global variable. In Node, do:
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 intodocument.querySelectorAll()).snippets— An ordered Array ofsnippetObjects. -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:
$ npm i --save qnaInstall via bower:
$ bower i --save alex-ray/qna