chrisgannon

chrisgannon supports this item

Supported

This author's response time can be up to 5 business days.

Popular questions for this item

Can I add Spin2Win Wheel to WordPress?

Yes although please note that Spin2Win Wheel is not a WordPress plugin.

The simplest way to do it (and arguably the best because it allows you to update your wheel easily) is to host it on a server like a normal web page and use an iframe inside your WP post like this:

<iframe frameborder="0" height="800" src="https://yourhost.com/spin2win" width="100%"></iframe>

If you need it to be responsive you’ll need to remove the width and height attributes and style it using CSS instead.

How can I call a URL after a win or send the current result to a URL?

Ensure you have assigned the onResult event to your own function. The onResult event fires at the end of every spin.

You code might look like this:


//your own function to capture the spin results on every spin - call your URL call here or capture whatever you like
function myResult(e) {
  //e is the result object
    console.log('Spin Count: ' + e.spinCount + ' - ' + 'Win: ' + e.win + ' - ' + 'Message: ' +  e.msg);
}

var myWheel = new Spin2WinWheel();

myWheel.init({data:jsonData, onResult:myResult}); 

Now you can evaluate if it’s a win (e.win == true) and call a URL or pass data from the event object to a script.

How can I add an image or logo in the center of the wheel?

The simplest solution is to add it using SVG’s <image> tag.

First of all create a square image for your logo in Illustrator or PhotoShop. Square is the best aspect but if your logo is not square, create a square image and drop your non-square logo into it with transparency. If your logo is tall you will have more space on either side. If your logo is wide then you will have more transparent space top and bottom.

Save it in the ‘media’ folder.

Open the HTML page and locate the line with valueContainer. It looks like this:
<g class="valueContainer" />

Now add the image tag below it – it should point to your image. Your code should look like this:

<g class="valueContainer" />
<image xlink:href="media/my_logo.svg" width="360" height="360" x="360" y="290" / >

I suggest using an SVG because you can scale it up and down using the width and height attributes and you won’t lose quality. Just make sure both width and height are the same to maintain the square-ness.

You can also place the logo correctly using the X and Y attributes.

How can I set a segment to be a winning segment and then capture the result?

You can set the win/lose status in the JSON.

This is an example ‘segment’ entry in the ‘segmentValuesArray’ in the JSON:
{
"type": "image", 
"value": "images/mypic.jpg", 
"win": false, 
"resultText": "Sorry you lost this time!" 
}
If you want the segment to be a winning segment you set:
"win": true

When the wheel lands on that segment you can evaluate the result like this:

This is your own function to capture the spin results

function myResult(event) {
  //event is the result event object
    console.log('Your win result is: ' + event.win;
}
This is your Spin2Win Wheel instance with the onResult listener assigned to your own function myResult
var myWheel = new Spin2WinWheel();
myWheel.init({
   data:jsonData, 
   onResult:myResult
});

The Usage part of the documentation is here

How can I set the wheel to land on specific segments?

You can set the destinations in the JSON.

Open the JSON file and locate the ‘spinDestinationArray’. This is an array that you can populate with winning segments.

So if you want segments 3, 7, 8, 1 to win (in that order) then you would write:

"spinDestinationArray":[3, 7, 8, 1]

Note that because you have set four destinations the game will finish after those four spins.

See the JSON properties in the documentation here

How can I add a link to the result text popup?

In the JSON you can add an HREF link in the usual way. Below is an example entry in the segmentValuesArray:

{"type": "string", "value": "HOORAY!", "win": true, "resultText": "YOU WON A <a href="http://prize.com">PRIZE!</a>"}

Note: this FAQ field is replacing a single quote with a double quote around the URL. Use single quotes around your URL string or escape a double quote with a backslash \

Find the CSS where .toast has its pointer events set with pointer-events:none;. Now remove .toast from that declaration otherwise the result link won’t be clickable.

Your CSS block now looks like this:

.wheelOutline, .valueContainer,  .centerCircle{
  pointer-events:none;
}

How can I hide the peg/pin at the top?

The easiest way to do this is the open the HTML and inside the SVG you will find the line:
<g class="pegContainer" >
Set its opacity to zero like this:
<g class="pegContainer" opacity="0" >
If you don’t want the sound either you can open the JSON and set:
"hasSound":false

How can I assign a button to make it spin?

First of all you need to create something to click on. Give it an id (or class name) so you can refer to it. Here we’ll call it myNewButton

Next find the init(); function in the index.js and pass the button reference into the wheel’s init function.

function init() {
  loadJSON(function(response) {

    // Parse JSON string to an object
    var jsonData = JSON.parse(response);

    //if you want to spin it using your own button, then create a reference and pass it in as spinTrigger
    var mySpinBtn = document.querySelector('#myNewButton');

    //create a new instance of Spin2Win Wheel and pass in the vars object
    var myWheel = new Spin2WinWheel();

    //WITH your own button
    myWheel.init({data:jsonData, onResult:myResult, onGameEnd:myGameEnd, onError:myError, spinTrigger:mySpinBtn});

  });
}

If you want to reference your button elsewhere in your code then set the var outside the function like this:


var mySpinBtn;

function init() {
  loadJSON(function(response) {

    // Parse JSON string to an object
    var jsonData = JSON.parse(response);

    //if you want to spin it using your own button, then create a reference and pass it in as spinTrigger
    mySpinBtn = document.querySelector('#myNewButton');

    //create a new instance of Spin2Win Wheel and pass in the vars object
    var myWheel = new Spin2WinWheel();

    //WITH your own button
    myWheel.init({data:jsonData, onResult:myResult, onGameEnd:myGameEnd, onError:myError, spinTrigger:mySpinBtn});

  });
}

Important:

Don’t forget to set "clickToSpin":true in the JSON file.
https://snag.gy/6YHQmZ.jpg

Binding a click to the toast popup doesn’t work – why?

If you look in the CSS at around line 37 you will find this:
.wheelOutline, .valueContainer, .toast, .centerCircle{
  pointer-events:none;
}

Just remove the .toast entry and that will enable interactions.

How can I run Spin2Win Wheel offline

Here’s a gist of an offline version in its most simplest form. This would be the code in your index.js:

https://gist.github.com/chrisgannon/7d6e46b1b51dba305520dbd3a8ac1354

Spin2Win Wheel is populated by JSON data which must be served on a web server (over HTTP).

However you can convert the JSON data into a JavaScript object and pass that variable into the init(); function instead, like this:

var wheelDataObject = {
colorArray:[ "#364C62", "#F1C40F", "#E67E22", "#E74C3C", "#ECF0F1", "#95A5A6", "#16A085", "#27AE60", "#2980B9", "#8E44AD", "#2C3E50", "#F39C12", "#D35400", "#C0392B", "#BDC3C7","#1ABC9C", "#2ECC71", "#E87AC2", "#3498DB", "#9B59B6", "#7F8C8D"],

segmentValuesArray : [
  {type: "string", value : "HOLIDAY^FOR TWO", win : false, resultText : "YOU WON A HOLIDAY!"},
  {type: "image", value : "media/tip_star.svg", win : false, resultText : "A STAR"},
  {type: "image", value : "media/tip_sqr.svg", win : false, resultText : "A SQUARE"},
  {type: "image", value : "media/tip_oct.svg", win : false, resultText : "AN OCTAGON"},
  {type: "image", value : "media/tip_triangle.svg", win : true, resultText : "A TRIANGLE"},
  {type: "image", value : "media/tip_circle.svg", win : false, resultText : "A CIRCLE"},
  {type: "image", value : "media/tip_hex.svg", win : false, resultText : "A HEXAGON"}, 
  {type: "string", value : "LOSE ALL", win : false, resultText : "LOSE ALL"}
],

  svgWidth: 1024,
  svgHeight: 768,
  wheelStrokeColor: "#D0BD0C",
  wheelStrokeWidth: 18,
  wheelSize: 700,
  wheelTextOffsetY: 80,
  wheelTextColor: "#EDEDED",  
  wheelTextSize: "2.3em",
  wheelImageOffsetY: 40,
  wheelImageSize: 50,
  centerCircleSize: 360,
  centerCircleStrokeColor: "#F1DC15",
  centerCircleStrokeWidth: 12,
  centerCircleFillColor: "#EDEDED",
  segmentStrokeColor: "#E2E2E2",
  segmentStrokeWidth: 4,
  centerX: 512,
  centerY: 384,  
  hasShadows: false,
  numSpins: 2 ,
  spinDestinationArray:[],
  minSpinDuration:6,
  gameOverText:"THANK YOU FOR PLAYING SPIN2WIN WHEEL. COME AND PLAY AGAIN SOON!",
  invalidSpinText:"INVALID SPIN. PLEASE SPIN AGAIN.",
  introText:"YOU HAVE TO<br />SPIN IT <span style="color:#F282A9;">2</span> WIN IT!",
  hasSound:true,
  gameId:"9a0232ec06bc431114e2a7f3aea03bbe2164f1aa",
  clickToSpin:false
}

Here we’ve created a variable wheelDataObject which we can now pass into the Spin2WinWheel.init() function like this:

function init() {
  loadJSON(function(response) {
    var myWheel = new Spin2WinWheel();
    myWheel.init({data:wheelDataObject});
  });
}

How can I set the probability of winning?

This is an entry for a segment in the JSON:

{"type": "string", 
"value": "HOLIDAY^FOR TWO", 
"win": false, 
"resultText": "YOU WON A HOLIDAY!" 
}

Now imagine you have 10 entries in the JSON (so 10 segments on the wheel).

If you set 6 to win (win:true) and 4 to lose (win:false) the probability is 60-40 or 60% (AKA 6 in 10 or 3 in 5).

Similarly if you have 1 win and 9 loses it’s a 10% chance of winning (1 in 10).

In my opinion this method is the correct way to set probability and is more accurate than performing complex calculations on every spin.

How can I set a maximum spin duration?

Spin2Win Wheel comes with a minimum spin duration property which can be set in the JSON.

If you want to set a maximum spin duration you will need to add in a property to Spin2WinWheel.js as follows:

    createDraggable = function() {
      wheelDragger = Draggable.create(wheel, {
        type: 'rotation',
        bounds: {
          minRotation: -9999999999999999,
          maxRotation: 0
        },
        throwProps: true,
        ease: Back.easeOut.config(0.2),
        snap: (randomSpins) ?  getRandomSpinFunction(0) : [spinDestinationArray[spinCount]],
        throwResistance: 0,
        //minDuration: minSpinDuration,
        maxDuration:2,
        onThrowComplete: throwComplete,
        onPress: onWheelPress,
        onDrag: throwUpdate,
        onThrowUpdate: throwUpdate,
        overshootTolerance: 1,
        onDragEnd: onWheelDragEnd

      })
    }

Here we have added in maxDuration:1 meaning it will spin for no more than 2 seconds.

If you leave minDuration in AND it has a value greater than maxDuration then maxDuration will have no effect.

Therefore it is better to either hard code them both (with max higher than min) OR remove minDuration altogether.

How can I make the wheel spin automatically, just with code?

In index.js you create a button instance (no need to add it to the page), then pass it in as a reference for the spinTrigger and then call its onclick function like this:

function init() {
  loadJSON(function(response) {
    // Parse JSON string to an object
    var jsonData = JSON.parse(response);
    //creates an invisible button so its onclick can be called. Note it's not necessary to be added to the page.
    var mySpinBtn = document.createElement('button');
    //create a new instance of Spin2Win Wheel and pass in the vars object
    var myWheel = new Spin2WinWheel();

    //pass in the button instance as the spinTrigger
    myWheel.init({data:jsonData, onResult:myResult, onGameEnd:myGameEnd, onError:myError, spinTrigger:mySpinBtn});

    //immediately makes the wheel spin
    mySpinBtn.onclick();
  });
}

Note: In the JSON make sure you set "clickToSpin":true. This disables the ability to spin the wheel manually by throwing.

How can I change the URL of the peg sound?

There are two ways.

You can either look in Spin2WinWheel.js and find the line
pegSnd = new Audio('media/wheel_tick.mp3'),

Change the URL to whatever you want. Next you can either minify that file and rename it to Spin2WinWheel.min.js or use Spin2WinWheel.js in your HTML (currently it’s probably loading the minified version without the change applied).

Or

Open Spin2WinWheel.min.js and do a Find and Replace on ‘media/wheel_tick.mp3’ and replace it with your absolute URL for the new sound.

How can I populate Spin2Win Wheel using PHP?

I have created PHP code that does just that.

You can find it here.

How can I set the number of segments?

A segment is an entry in segmentValuesArray .

An entry looks like this: {"type": "string", "value": "HOLIDAY^FOR TWO", "win": false, "resultText": "YOU WON A HOLIDAY!"},

The number of segments depends on the number of entries in segmentValuesArray in the JSON.

If you want more then copy an entry and change its properties.

type can be ‘string’ or ‘image’. If you use ‘image’ then ‘value’ must be an image URL.

I double clicked the index.html and the project is blank – HALP!

When you double click index.html it runs the project in the file system.

Spin2Win Wheel is populated using JSON data which will only load over HTTP. This means you must run the project on a web server.

Can I use an image as the background to Spin2Win Wheel?

Yes!

In the SVG in the HTML locate the group tag with class wheel.

Now remove the self closing angle bracket and add in an image tag as your background image like this:

https://snag.gy/cK06DU.jpg
  <g class="mainContainer">   
    <g class="wheel">
      <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://example.com/wheel_image.png" x="0%" y="0%" height="100%" width="100%"></image>
    </g> 

Now in your JSON find the colorArray and remove all entries except one transparent one like this:

https://snag.gy/i4XcH5.jpg
"colorArray":[ "rgba(0,0,0,0)"],

How can I place the wheel at the top of the page?

In the attributes for the SVG tag in the HTML change the preserveAspectRatio to preserveAspectRatio="xMidYMin meet"

Notice the YMid is now YMin

https://snag.gy/gloyMr.jpg

Be aware that you will have to change the CSS for the popup to match the new position of the wheel with media queries as it’s currently designed to be in the centre of the page.

How can I change the amount/speed Spin2Win Wheel spins?

You need to open the Spin2WinWheel.js (and make sure your HTML page is loading it, otherwise you won’t see any changes).

Find the variable numRevsPerDestination. Currently it looks like this:
numRevsPerDestination = 3 * 360
https://snag.gy/VUoaRb.jpg

This means it rotates at least 3 times before stopping.

If you want it to rotate 10 times before stopping change it to 10 like this:

numRevsPerDestination = 10 * 360
https://snag.gy/L7XKOJ.jpg


Warning: Don’t change the 360 value – this is a full revolution and MUST stay as this value.

Can I add Spin2Win Wheel to a Blogger post?

Yes but with caveats. You will need to host your spin2win folder online somewhere – there are lots of free hosting sites like http://000webhost.com for example.

Upload your folder to your hosting and make a note of the URL for it. It might be something like https://yoursite.000webhostapp.com/spin2win/

Now create a new post in Blogger and click the HTML pane (next to the Compose button).

Now assuming the URL above is the right one, paste this into your HTML pane:

<iframe frameborder="0" height="800" src="https://yoursite.000webhostapp.com/spin2win/" width="100%"></iframe>

When you preview it, it won’t appear to be clickable – it will only work once you publish it.

Can I make the segment text vertical?

Yes try adding this to the index.js after the myWheel.init() call:

TweenMax.set('.wheelText', {
  rotation:90,
  transformOrigin:'50% 50%'
})

If the positioning isn’t right try doing:

TweenMax.set('.wheelText', {
  rotation:90,
  transformOrigin:'50% 50%',
  x:'-=20',
  y:'+=10'
})

Bear in mind the SVG text is in a tspan and its currently set to text-anchor:middle; (the CSS equivalent is text-align:center;) so you might need to add this to your CSS file:

.wheelText tspan{
  text-anchor: start;
}

Remember the wheel must be loaded before this will work.

Can I put the peg on the right instead of at the top?

Yes, the simplest way is to rotate the entire wheel. Add the following to the main index.js:

TweenMax.set('.wheelSVG', {
  rotation:90,
  transformOrigin:'50% 50%'
})

How can I have a key trigger a spin?

First off make sure you have a button triggering the spin – pop over to this FAQ to find out how to use a button as a trigger..

In index.js you will be referencing the button outside the init(); function so make sure you set the var outside it (the second example in that FAQ).

Once you have a button you can hide it if you like as you won’t be needing it visually. Place it off the page or set its CSS to visibility: hidden; – however you want.

Still in index.js, just after the main init() call add this code. It captures key presses and, in this example, if it’s the spacebar (keycode 32) then it triggers the mySpinBtn’s click function:


document.body.onkeyup = function(evt){
  switch(evt.keyCode){
    //Spacebar is keycode 32
    case 32:
    mySpinBtn.click();
    break;
  }
}

Your final code should look something like this:

var mySpinBtn;

function init() {
  loadJSON(function(response) {
    // Parse JSON string to an object
    var jsonData = JSON.parse(response);
    //if you want to spin it using your own button, then create a reference and pass it in as spinTrigger
    mySpinBtn = document.querySelector('.mySpinBtn');
    //create a new instance of Spin2Win Wheel and pass in the vars object
    var myWheel = new Spin2WinWheel();

    //WITH your own button
    myWheel.init({data:jsonData, onResult:myResult, onGameEnd:myGameEnd, onError:myError, spinTrigger:mySpinBtn});

    //WITHOUT your own button
    //myWheel.init({data:jsonData, onResult:myResult, onGameEnd:myGameEnd, onError:myError});

    document.body.onkeyup = function(evt){
      switch(evt.keyCode){
        //Spacebar is keycode 32
        case 32:
        mySpinBtn.click();
        break;
      }
    }

  });

}

//And finally call it
init();

Here’s a screenshot too:

Does Spin2Win Wheel prevent cheating by code injection via the dev console?

We have purposely left out the prevention of dev console injection but you can very easily add it yourself.

Open Spin2WinWheel.js and add the following code as the very last function at the bottom (but inside the last curly brace):


  window.console.log = function(){
    console.error('Sorry , developers tools are blocked here....');
    window.console.log = function() {
        return false;
    }
  }

Read more about a more involved solution here.

The end of your code block would look something like this:

Be aware that this code also prevents ALL console logging so you won’t be able to debug your work with console.log();

test

test

Why is the FAQ cut off?

Because Envato ’s FAQ scrolling is broken

How can I change the font?

First off the font is a Google font called Fjalla and is loaded in the HTML at the top:

https://snag.gy/SzMqWJ.jpg

Remove this or change this to point to your own font.

Secondly open the CSS file and change any references to Fjalla to refernce your font.

https://snag.gy/HAGKf0.jpg

How can I refresh the page at the end of a game

Make sure you have the onGameEnd event assigned to a function like this:

myWheel.init({data:jsonData, onGameEnd:myGameEnd});

And in the myGameEnd function set a time out using GreenSock like this:

function myGameEnd(e){
  //e is gameResultsArray
  TweenMax.delayedCall(5, function(){
    location.reload();
  })

}

I’m getting an error in IE10 – Object doesn’t support property or method ‘overrideMimeType’

In index.js replace your loadJSON() call with this:

function loadJSON(callback) {
  var xobj = new XMLHttpRequest();
  if (xobj.overrideMimeType) {
      xobj.overrideMimeType("application/json");
  }  

  xobj.open('GET', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/wheel_data_008.json', true); 
  xobj.onreadystatechange = function() {
    if (xobj.readyState == 4 && xobj.status == "200") {
      //Call the anonymous function (callback) passing in the response
      callback(xobj.responseText);
    }
  };
  xobj.send(null);
}

Note the addition of the if (xobj.overrideMimeType)... statement.

Don’t forget to change back to your own JSON URL! :)

How can I make the popup text selectable?

Open style.css and find the first .toast p line (around line 74).

Remove the user-select:none code.

https://snag.gy/hI7mqD.jpg

How do I add Spin2Win Wheel to Joomla?

1) Create a HIDDEN menu item and select IFrame Wrapper as the Menu Item Type *

2) Write an alias of what I want the website page to be called. E.g. “spin2win”

3. Upload the contents of the ZIP to a directory on your site via FTP. Let’s say the directory you uploaded it to is called ‘wheel’.

4) Select the full URL of point 3 (E.g. http://yoursite.com/wheel) – this is what will be displayed at http://yoursite.com/spin2win

Is Safari for Windows supported?

No – Safari for Windows was killed in 2012 (the last version updated in 2012). Browsers older than 3 versions back are not supported either.

Can I add an image and text to the popups after each spin?

Yes you can add a normal HTML image tag to the entry for that segment in the "segmentValuesArray" in the JSON like this:

https://snag.gy/DA4fXs.jpg

Can I add a URL to the popups after each spin?

Yes you can add a normal HTML HREF tag to the entry for that segment in the "segmentValuesArray" in the JSON like this:

https://snag.gy/YLwSOu.jpg

How can I reduce the amount of time it spins for (when clicked)?

Locate the variable spinMultiplier at line 56 of Spin2WinWheel.js and change it to 1. This will halve the spin duration.

https://snag.gy/zVkNKZ.jpg

Alternatively you can speed the ENTIRE wheel (ALL animations) by adding this to the index.js:

TweenMax.globalTimeScale(2);

This will play everything back at twice the speed.

Can I add text AND an image into the segments?

Not at the moment but it’s under consideration.

How can I do multiline text in a segment?

SVG doesn’t support multiline text – however you can specify a new line by adding the caret ^ symbol like this:

WIN A^HOLIDAY

This will look like this:

WIN A HOLIDAY

Use Ctrl (or CMD on MacOS) + 6 to type it.

Show more

Contact the author

This author provides limited support for this item through this item's comments.

Item support includes:

  • Availability of the author to answer questions
  • Answering technical questions about item’s features
  • Assistance with reported bugs and issues
  • Help with included 3rd party assets

However, item support does not include:

  • Customization services
  • Installation services

View the item support policy

by
by
by
by
by
by