# f3

> Form tree (AKA F3), is a module to create dynamic (client-side) decision trees (D3) with forms

Latest version **0.0.23** (published 2015-04-28) · 0 weekly downloads

## Install

```sh
npm install f3
pnpm add f3
yarn add f3
bun add f3
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.23 |
| Published | 2015-04-28 |
| First published | 2014-08-04 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | ~0.10.1 |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Rodati Team |
| Maintainers | rodati |

## Links

- npm: https://www.npmjs.com/package/f3
- Repository: https://github.com/rodati/f3
- Issues: https://github.com/rodati/f3/issues
- npm.io page: https://npm.io/package/f3

## Recent versions

- 0.0.23 (latest) — 2015-04-28
- 0.0.22 — 2014-12-18
- 0.0.21 — 2014-10-31
- 0.0.20 — 2014-10-21
- 0.0.19 — 2014-10-16
- 0.0.18 — 2014-10-14
- 0.0.17 — 2014-10-09
- 0.0.16 — 2014-09-10
- 0.0.15 — 2014-09-10
- 0.0.14 — 2014-09-10
- 0.0.13 — 2014-09-08
- 0.0.12 — 2014-09-02
- 0.0.11 — 2014-09-02
- 0.0.10 — 2014-09-01
- 0.0.9 — 2014-09-01
- … 8 more at https://npm.io/package/f3/versions

## README

# F3

Form tree (AKA F3), is a module to create dynamic (client-side) decision trees (D3) with forms.

## Dependencies

This first implementation of F3 has some several dependencies:

- [jQuery](http://jquery.com/) for DOM manipulation.
- [jQuery.dForm](https://github.com/daffl/jquery.dform) for dynamic form creation.
- [jQuery.validate](http://jqueryvalidation.org/) for form validation.
- [PubSubJS](https://github.com/mroderick/PubSubJS): for pub/sub events.
- [Bootstrap](http://getbootstrap.com/): for form styles and utilities.
- [bootstrap-datepicker](https://github.com/eternicode/bootstrap-datepicker) and [moment](http://momentjs.com/): for date and time components.

## Instalation

#### With NPM (using Browserify):

```bash
npm install f3 --save
```
 
Then, in your front-end module:

```js
var formTree = require('f3')();
```

#### Standalone

Copy the file `dist/f3.js` or `dist/f3.min.js` in your project.

Then, in your .js:

```js
var formTree = f3();
```

Finaly, to use the `formTree` variable, see the available methods, configurations and examples.

## Methods

- `formTree.init()`: This method load all F3 components/types, subscribers and validations.

- `formTree.render($target, tree)`: This method allow render an instance of F3 inside a specific jQuery selector (`$target`) using the description of the `tree` object. 

## Configuration

### The tree object 

This object has all the definitions for the creation of the decision tree. For example, the follow object create a F3 with 3 branches:

- The first branch show a question with two options
- If the user select `Yes`, another question/branch appears
- Else, if the user select `No`, the user see the final branch to send the responses

```js
var tree = {
	
	//Every branch is an object inside the array branches
	'branches': [
		
		//First visible branch
		{
			//Every branch need an ID
			'branch': '1',

			//Form components are inside the html array
			'html': [

				//A decision component 
				{

					//Component type
					'type': 'decision',

					//The question for the user
					'question': 'Do you like ice cream?',

					//The options to answer
					'options': [

						{
							//Label to show
							'text': 'Yes',
							//If the user select this option, show the branch 1.1
							'branch': '1.1'
						},

						{
							//Label to show
							'text': 'No',
							//If the user doen't like ice cream, show the branch 2
							'branch': '2'
						}

					]

				}

			]

		},

		//Branch 1.1
		{
			//The ID has to be in the format x.x
			'branch': '1.1',
			'html': [

				//This branch has a text component
				{

					'type': 'text',
					'question': 'What flavor do you like?',

					//Validation rules
					'validation': {
						'rules': {
							'required': true
						},
						'messages': {
							'required': 'You need write a flavor'
						}
					}

				},

				//And a next component
				{
					'type': 'next',

					//Label of the button
					'text': 'Next',

					//Go to the final branch
					'branch': '2',

					//But before validate if the user complete the flavor 
					'validate': true

				}

			]

		},

		//The final branch
		{
			'branch': '2',

			//This branch has only an send component
			'html':
			[

				//This component allow know when the user finish the F3
				{
					'type': 'send',
					'text': 'Send'
				}

			]

		}

	]

};
```

**[See this example working](https://cdn.rawgit.com/rodati/f3/master/examples/ice-cream/index.html)**.


## TODO

- Explain every F3 component and configuration
- Add more examples
- Use less dependencies
- Add tests

---
_Source: https://npm.io/package/f3 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._