Simple HTML5+CSS3+Javascript game, ideal for quizzes.
FlowPie is an interactive game which can be used for different purposes. It creates route experience which basically allows users to go throught different steps between a set of items defined for the game.
- Cross browser
- Resposive UI
- Beautiful UI/UX
- Easy initialization
- Can be used for multiple games (quizzes, learning games, etc.)
- Add the external libraries references into your HTML page: jQuery, Underscore.js and FontAwesome
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>- Add the internal resources references into your HTML page:
flowPie.cssandflowPie.js
<link rel="stylesheet" href="flowPie.css">
<script src="flowPie.js"></script>- Initialize your flow items and the flow itself:
/* Initialize the items of the flow */
var items = [
{id: 1, sortOrder: 0, showShadow: false, isAnswered: false, image: "https://placeimg.com/200/200/animals/1"},
{id: 2, sortOrder: 1, showShadow: true, isAnswered: false, image: "https://placeimg.com/200/200/animals/2"},
{id: 3, sortOrder: 2, showShadow: true, isAnswered: false, image: "https://placeimg.com/200/200/animals/3"},
{id: 4, sortOrder: 3, showShadow: true, isAnswered: false, image: "https://placeimg.com/200/200/animals/4"},
{id: 5, sortOrder: 4, showShadow: true, isAnswered: false, image: "https://placeimg.com/200/200/animals/5"}
]
/* Initialize the flow */
flowPie.init($('body'), items, ''); // Init the flow passing the DOM element container, the flow items and the path where the badge image is located
flowPie.buildFlow(); // Build the flow
/* Initialize the callback to be executed when clicking any element in the flow */
flowPie.callbackOnClickElement = function (element, event) {
// Make awesome stuffs here, like open a modal with a question
// ...
// Set the current element as done and move to the next
flowPie.answerCurrentElement();
flowPie.goNextElement();
};
- id
{Number}: Unique identifier of each flow item - sortOrder
{Number}: Defines the order of the item in the flow - isDone
{Boolean}: Indicates if the flow item is done - showShadow
{Boolean}: Defines if the DOM element representing the item will be covered by a shadow (represents that the item isn't done) - image
{String}: Image URL of the item
- currentItem
{Object}: Represent the current active item of the flow- isDone
{Boolean}: Indicates if the item is done - isLast
{Boolean}: Indicates if the item is the last in the flow - order
{Number}: Indicates the order of the item in the flow - position
{Object}: Indicates theX,Yposition of the item in the flow
- isDone
- utils
{Object}: Utility object in the flow- isFlowFinished
{Boolean}: Indicates if flow is finished - rows
{Number}: Indicates the number of rows within the flow - itemsPerRow
{Number}: Indicates the number of items in a row in the flow - windowWidth
{Number}: Indicates the current window width
- isFlowFinished
- init
function(container, dataSource, imagePath): Initializes the flow with 3 parameters- container: DOM element that will contain the flow
- dataSource: Data source of items that the flow will contain
- imagePath: Path wehere the bagde image/icon is located (badge icon is shown where the flow is finished)
- buildFlow
function(): Build all the DOM elements that shapes the flow - callbackOnClickElement
function(element, event): Callback to be executed when clicking any element in the flow - answerCurrentElement
function(): Set the current element as done. This means that the current DOM element will not have the shadow any more and will have the check icon active - goNextElement
function(): Move to the next element in the flow (calling this method will update thecurrentItemproperty)