Hi – have you changed anything at all since you downloaded it?

no, just uploaded all files on my server

onResult function also not working. I added there alert(e.msg); but nothing happens

You could decide a spin destination ID in the backend to begin with and send it via a PHP script.

Then send it back using the onResult event and if you receive a different result ID then you know it’s been tampered with.

Make sense?

Yes use the ‘colorArray’ in the JSON.

Check the docs here:

Hi Chris. Yes I’ve seen that and I understand arrays a bit but I do not see how to assign a specific color from the colorArray to a specific segment in the segmentValuesArray. Thanks!

If you want the 3rd segment to be blue (where the segment at 12 o’clock is segment 1), make sure the 3rd entry in the array is a blue colour.

This is the 3rd entry:

Got it! The many colors in the original array really had me confused and though I kept trying different things, I wasn’t getting it. But I see it’s pretty obvious. Spinning the wheel over and over kept me from seeing the color pattern. My client wanted two alternating colors and one special one in 7 segments so I put the colors in the array like this— color1 color2 color3 color1 color2 color1 color2—And they all line up! Thanks!

I think this is going to be my last question--This spinner is just for fun to see funny answers so I want it to be completely random. So do I understand that to do that, I would delete probability from the segmentArrayValues so this— {probability, “type”: “string”, “value”: “HOLIDAY FOR^{TWO”, “win”: true, “resultText”: “You won a holiday!”, “userData”: {score}},}

would become this—- {“type”: “string”, “value”: “HOLIDAY FORTWO”, “win”: true, “resultText”: “You won a holiday!”, “userData”: {score}},

And this—- array( “probability” => 20, “type” => “string”, “value” => “HOLIDAY^{FOR TWO”, “win” => false, “resultText” => “YOU WON A HOLIDAY!”, “userData” => array(“score” => 10)}

would become this—- array( “type” => “string”, “value” => “HOLIDAYFOR TWO”, “win” => false, “resultText” => “YOU WON A HOLIDAY!”, “userData” => array(“score” => 10)

Since it is just for fun, no win or lose, no scores, I assume I could also take out the win/lose? Should I also take out userData? Or just the score part??

I WILL keep a max number of spins with gameOverText.

Thank you, Chris!

Why not wrap everything in a DIV with a class name and change the wheel’s CSS to have that class name at the start of all declarations

I kind of know what you’re talking about but I’ve never done that.

Then it’s time to try!

If you have a CSS property like:

.spinBtn {

  color: red;

}

Make sure you wrap it inside another DIV with an id of, say, wheelWrapper.

Now change the CSS to:

#wheelWrapper .spinBtn {

  color: red;

}

Very straight-forward.

Yes, I thought of this yesterday when I saw what the wheel did to my site. I know I’ve seen this and have been trying to find examples.

What would the attributes of #wheelWrapper be?

Whatever fits your site or the area the wheel is displaying.

Try

width: 100%;
height: 100%;

Yes you can embed it using Code blocks (just bear in mind it’s not a WP plugin).

Just so you know, the wheel comprises HTML, CSS, JavaScript and a JSON text file (although you can feed it with PHP if you want).

If you are a newbie with code you might need a little help, depending on what you use to manage your pages in WP (WPBakery, Elementor etc).

I have removed your comment purely because it contains a link to the wheel. Please shares links in a direct message – thanks!

Here’s what you wrote (minus the link)

Hi Chris, thanks for the quick reply. So I unzipped the file to modify the values in wheel_data.json, compressed it again as spin2win.zip and uploaded it to public_html in my wordpress file manager but it doesn’t seem to work as it says ‘file not found’ and it prompts my browser to download the zip. Would you mind taking a quick look at the page that I’m meant to implement this in? (the existing wheel is from another website)

As I said in the previous message, this is not a WP plugin. Uploading a ZIP to a public folder won’t do anything. You have unzip it first into a folder called, say, ‘wheel’.

Then in your browser you visit:

www.yoursite.com/wheel

Does that make sense?

Hi Chris, Yes, so I’ve already unzipped it to modifiy wheel_data.json but then where do I upload it again if not the public_html folder so I can refer www.mysite.com/wheel?

You have to create a folder called ‘wheel’ and unzip the files into that folder.

If you create it on the top level folder (public_html or web) then it should be accessible at www.mysite.com/wheel

let me give u an example.

$(’.ThisIsSpinButton’).click(function(e){

/* once user click .ThisIsSpinButton, inside this function, i want to check user balance FIRST, if balance is okay, then to trigger the spin process. like myWheel.start(); or something. so how can i trigger wheel spin here? That’s what i am asking? Thanks. */

})

In your case you need to assign your own click event first and let the user click it to get back the balance.

Once you get back the result (has balance) you can then trigger the init(); function with the same button.

It’s just a question of sequencing – just intercept with your own functionality first. Does that make sense?

I did assign my own click event. once click, it checks the user balance and return response. everything fine till here.

but i want user to see the wheel as soon as open the page, so i need to call the init function on page load so user can see the wheel.. Just tell me, how can i trigger the wheel when i want manually on my own?

user clicks the button, if check balance response TRUE, then trigger the spin.

getTrigger() function does not fire outside. Thanks in advance!

I did assign my own click event. once click, it checks the user balance and return response. everything fine till here.

but i want user to see the wheel as soon as open the page, so i need to call the init function on page load so user can see the wheel.. Just tell me, how can i trigger the wheel when i want manually on my own?

user clicks the button, if check balance response TRUE, then trigger the spin.

getTrigger() function does not fire outside. Thanks in advance!

I’m currently on holiday until next Monday. I can offer some help when I get back.

Okay, look forward to your help. kinda urgent. Thanks in advance.

Ok just please be aware that support is for help with the wheel’s standard operation. Your question is outside of that scope. If I can help I will but I my help will be a suggestion, not a definite ‘fix’.

One way would be to set a sessionStorage variable which is a temporary ‘cookie’ (it’s not a cookie though) that persists as long as the tab/window is open.

When the user clicks, you check if the variable exists. (let’s call it clickCount)

If clickCount does not exist, create it and set it to 1 clickCount=1..

If clickCount does exist, increment it by 1 clickCount=2.

When the wheel spins and lands, it will pass back the spinCount on the onResult event, which, assuming they can only ever spin once, will always be 1.

Now you can compare the clickCount to spinCount. If they are not the same, they have clicked more than once.

Thank you Chris, this is very helpful! I think the only piece I’m missing here is exactly where I can put this code. Can you help me understand where to put JS code that would execute after the user clicks the button but before the wheel spins? Thanks!

Look in the Spin2WinWheel.js and find the getTrigger function.

That’s probably a good place to try.

Thanks and I’m sorry to keep asking questions—but my thought had been that best practice would forbid any edits to Spin2WinWheel.js, so that my code could never be clobbered by some potential future release of the “product” code. Are you saying I should put my code right in there?

Sorry for the delay – I’ve been on a much needed holiday.

You could put this functionality in the index.js.

Not sure why I suggested putting it in the getTrigger function (probably tired and in need of a holiday!).

So add the session variable code to the spin button. Now set the variable whenever it’s clicked. When the wheel finishes a spin the onResult function will send back the spinCount. If the click session variable should equal the spinCount.

Thanks for the follow-up Chris, and I hope you enjoyed your time off. I beat my head against this for a while but just now made a breakthrough. I was struggling to attach my own JavaScript to the button because I was trying to use the button’s onclick() event … but since (as far as I can tell) your code is overriding that event handler, my code never executed. I switched to onmousedown() and I was able to get my own custom JavaScript (currently “hello world”) to execute prior to the wheel spin. If you don’t hear from me again, it means I was able to build out my solution without any further obstacles. Thanks again.

I’m not sure what you’re asking. Please clarify, thanks!

Sorry for not being clear enough. For example, my wheel consists of 5 segments, with values 1, 2, 3, 4 and 5. I have 3 spins. I want the total value to always be 10 after 3 spins. Is it doable?

You can retrieve any data you want from the winning segment (using onResult event, check the docs).

Therefore you could either set a custom userData value or just use the main segment value as the value to be included. Then on each spin you add up the segment values and do something if it equals your winning amount.

So if the winning amount is 50 and you land on 10, 25, 10 and 5 then do something.

So let’s say I want the total amount to be 50. I have 3 spins. My first 2 spins are 10 and 15. How do I ensure the third spin lands on 25? So that the total amount is exactly 50, not less and not more.

I changed it to this configuration as most buyers like to place the wheel in their own container and control that.

In the CSS try this

.wheelSVG {
    position: relative;
    overflow: visible;
    height: 75vh;

}

And change .wheelContainer to

 .wheelContainer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0;
    width: 100vw
    height: 100vh;

} 

Hi,

The wheel needs at least 2 segments to operate – otherwise it wouldn’t spin.

Regarding the size, try this change in the CSS for .wheelSVG

.wheelSVG {
    position: relative;
    overflow: visible;
    height: 75vh;

}

And change .wheelContainer to

 .wheelContainer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0;
    width: 100vw
    height: 100vh;

} 

No probs at all. Oh you solved it? Great! I saw your 5 star rating – thanks! Just a reminder — your license covers one project use. If you want to use it in multiple projects you’ll need to purchase more licenses.