0.0.2 • Published 3 years ago

surveybuilder-js v0.0.2

Weekly downloads
5
License
Apache-2.0 Licens...
Repository
github
Last release
3 years ago

SurveyBuilder-JS

SurveyBuilder Now has a JavaScript Library now. You can import and Export codes from your work

Installment

$ npm install surveybuilerjs

Languages

LanguagesCurrent
English(En)Yes

How to use

Use can use a default base plate using this HTML code

<center id="Form-Center" onload="Autosave()">
	<form id="Editors-Form" method="post" action="">
		<div id="Insert-Object" contenteditable="true"></div>
	</form>

then set sel: to #Inser-Object

Use this code below

 let sb = new SurveyBuilder({
   lang: "en",
   sel: "#Insert-Object",
   public_key: "VmgzuAUN2hKjdr65Sxs3BOHQqeDXYlwfC0vMJypFkcoP9WGIL47nt81iRbTaEZ",
   privite_key: "Y0TkA$thxD4f5IldZj#aB?Wy*Hic%C8Ur3eMgRu9wvnON@So&b6^q2K7LFVJQX1mG!zEspP",
   full_setup: false,
   author: "",
   title: "",
   styles:[
	   "/SurveyBuilder/Builder/SurveyBuilder.css",
	   "/SurveyBuilder/Builder/FormInsert.css",
	   "/SurveyBuilder/Builder/SurveyBuilderMobile.css"
   ],
   scripts:[
       "/SurveyBuilder/Builder/Apps_Insert.js",
       "/SurveyBuilder/Builder/SurveyBuilder.js",
       "/SurveyBuilder/Builder/InsertItems.js",
	   "https://kit.fontawesome.com/46bb4793e2.js"
   ],
   el:[{
	type: "heading",
	dataType: 1,
	name: "heading",
    id: "test",
    classNames: "heading",
    val: "Hello World",
	editable: true
   },
   {
	type: "paragraph",
	name: "MyPara",
    id: "MyPara",
    classNames: "para",
    val: "Hello World",
	editable: true  
   },
   {
	type: "name",
	name: "input",
	id: "MyName",
	classNames: "Name",
	editable: false,
	required: true
   },
   {
	  type: "email",
	name: "input",
	id: "MyEmail",
	classNames: "Email",
	editable: false,
	required: true 
   },
   {
	    type: "address",
	name: "selectElement",
	id: "MyAddress",
	classNames: "Address",
	selectedIndex: 186,
	editable: false,
	required: true 
   },
   {
	 type: "phone",
	name: "input",
	id: "MyPhone",
	classNames: "Phone",
	editable: false,
	required: true   
   },
   {
	    type: "date-picker",
	name: "",
	id: "MyDate",
	val: "",
	classNames: "Date",
	editable: false,
	required: true   
   },
   {
	  type: "time-picker",
	name: "",
	id: "MyTime",
	val: "22:00:00",
	classNames: "Time",
	editable: false,
	required: true    
   }
  
  ]
   
   
});

Details about the script

new SurveyBuilder create a configeration for SurveyBuilder

Configeration

Configtypeinfo
langstringsets to a language
selstringset the data to a certin selector element
Public_keystringset you public API
Privite_keystringsets your privite API
full_setupbooleancreats an IFrame to display SurveyBuilder
authorstringsets your current username
titlestringgives a title to your survey
stylesarray + stringsets custom or default CSS files
scriptsarray + stringsets custom or default JavaScript files
el.typestringgives a element type
el.dataTypeintsets a dataType to an element ex. headings
el.namestringsets a name to an element
el.idstringsets a id to an element
el.classNamesstringsets a ClassName to an element
el.valstringsets a default value/text to an element
el.editablebooleanallow the element to be editable

Requirements

Will Require to download SurveyBuilder for API and Data Uses


Supported Element types

typerelase date
heading01/15/2021 7:20PM