A library to make data-driven interactive web-experiences with support for video, sound, data collection, decision-trees and animations.
iVXjs uses different rendering libraries to create the experience. Currently, this repository utilizes Angular to build and render the experience and this "Getting Started" will focus on that implementation.
- Clone this repository or download zip
- Via npm
npm install ivx-js-angular --save
<!-- Data Modules -->
<!-- iVX-io Module
<script src="https://060adad2995367c8e229-2340761377b5351a53198a462113b619.ssl.cf2.rackcdn.com/ivx-js/0.7.0/iVXjs.data.ivx-io.min.js"></script>
<script src="https://060adad2995367c8e229-2340761377b5351a53198a462113b619.ssl.cf2.rackcdn.com/ivx-js/0.7.0/iVXjs.data.firebase.min.js"></script>
<!-- UI Modules -->
<!-- Bootstrap UI Module -->
<script src="https://060adad2995367c8e229-2340761377b5351a53198a462113b619.ssl.cf2.rackcdn.com/ivx-js/0.7.0/iVXjs.ui.bootstrap.min.js"></script>
<!-- Materialize UI Module -->
<script src="https://060adad2995367c8e229-2340761377b5351a53198a462113b619.ssl.cf2.rackcdn.com/ivx-js/0.7.0/iVXjs.ui.materialize.min.js"></script>
<!-- Semantic UI UI Module -->
<script src="https://060adad2995367c8e229-2340761377b5351a53198a462113b619.ssl.cf2.rackcdn.com/ivx-js/0.7.0/iVXjs.ui.semantic-ui.min.js"></script>
The Angular iVXjs instance--iVXjs for this documentation--has the following script dependencies:
To get started, follow the steps below:
- Add the following HTML to the working project file:
<!-- Angular application for this page -->
<div ng-app="app"></div>
<!-- Container for an iVXjs Experience -->
<div id='ivx'></div>
<!-- iVXjs Angular Library Dependencies -->
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-alpha.5/angular-ui-router.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.6/angular-sanitize.min.js'></script>
<script src='[PATH-TO-JS]/angular.ivx.js'></script>
<!-- Youtube iFrame API -->
<script src='https://www.youtube.com/iframe_api'></script>
<script>
angular
.module('app', ['ivx-js'])
.config(['iVXjs', function(iVXjs){
iVXjs.init({
config:"sample-experience.json"
})
}]);
</script>
<!-- Angular Templates -->
<!-- Form Header Template -->
<script type="text/ng-template" id="form-header.html">
<h1>Welcome to an iVXjs Sample Experience</h1>
</script>
<!-- Name Personalization Template -->
<script type="text/ng-template" id="name-personalization.html">
<h1>Hey, {{experience.fullName}}, finding this cool?</h1>
</script>
<!-- Helpful Links Header Template -->
<script type="text/ng-template" id="helpful-links-header.html">
<h1>Now that you have seen it {{experience.fullName}}, create an experience of your own!</h1>
</script>
- Copy the following contents into a file in your project root called "sample-experience.json"
{
"defaultState": [
{
"stateId": "welcome-form"
}
],
"states": [
{
"id": "welcome-form",
"name": "Welcome Form",
"url": "/",
"type": "input",
"header": {
"templateUrl": "form-header.html"
},
"form": {
"classes": "",
"submit": {
"label": "Get started!"
}
},
"next": [
{
"stateId": "video-sample"
}
],
"inputs": [
{
"id": "full-name",
"name": "fullName",
"type": "text",
"label": "Your name:",
"settings": {
"container": {},
"input": {}
},
"attributes": {
"placeholder": "Enter your name here...",
"required": true
}
}
]
},
{
"id": "video-sample",
"name": "Video Sample",
"url": "/video-sample",
"type": "video",
"next": [
{
"stateId": "helpful-links"
}
],
"playerSettings": {
"youtubeId": "oErhFh4AyZ0"
},
"personalizations": [
{
"id": "name-personalization",
"templateUrl": "name-personalization.html"
}
],
"cuePoints": [
{
"timeAt": 0,
"eventName": "animateElement",
"args": {
"element": "#name-personalization",
"animationClasses": "show"
}
},
{
"timeAt": 5,
"eventName": "animateElement",
"args": {
"element": "#name-personalization",
"animationClasses": "hide"
}
}
]
},
{
"id": "helpful-links",
"name": "Helpful Links",
"url": "/helpful-links",
"type": "navigation",
"header": {
"templateUrl": "helpful-links-header.html"
},
"links": [
{
"href": "https://influencetech.github.io/ivx-js/developer/tutorial.hello-world/",
"attributes": {
"target": "_blank"
},
"label": "Getting Started with iVXjs",
"classes": "btn",
"onClick": []
},
{
"href": "https://influencetech.github.io/ivx-js/developer/tutorials/",
"attributes": {
"target": "_blank"
},
"label": "Tutorials",
"classes": "btn",
"onClick": []
},
{
"href": "https://influencetech.github.io/ivx-js/developer/configuration/",
"attributes": {
"target": "_blank"
},
"label": "JSON Specs and Configurations",
"classes": "btn",
"onClick": []
}
]
}
]
}
- The result should look like this:
To make it look a little better, let's add some styling. There are some default styles provided in these css files:
- core.css (tools/utilities/css/core.css) - Core styling with iVXjs styling components such as a input grid system, YouTube video sizing, etc.
- basic-style.css (tools/utilities/css/core.css) - A basic style for iVXjs
After adding these css files, the experience should look something like this:
Here are some great places to start to create your own unique iVXjs experience: