Problem: Javascript "dice roll" not working on wordpress site with touch screen devices

Hello all,

I have designed a simple snakes and ladders game, and used a simple dice roll javascript function for the user to ‘roll’ during the game. It works a treat on a desktop device with a mouse/mouse pad, but on touch screen devices it seems to get ‘stuck’. I’ve been learning javascript since monday (i.e. less than a week!). So I’m perhaps punching above my weight somewhat trying to do this.

I used this js code from codepen:

And inserted the final Hype doc here, (as an OAM widgit via the Hype wordpress plugin):

The js function is initiated when the user clicks on “Click here to roll the dice”. This initiates a ‘dice roll’ timeline (i.e. whereby the dice and placeholder text rotate), and the function generates and prints a random number between 1 and 6 in the placeholder text element, which is revealed just as the dice roll finishes.

But on touch screen devices, the code just doesn’t seem to update the number displayed. Or it only works sporadically. Are there any known issues that spring to mind? I can upload the Hype doc for someone more expert than me to dig into if that helps?

I appreciate any help form you clever folks!


My guess is that you’re targeting an element in your desktop layout that is different than in your smaller layout. You’ll need to insert the random number in the correct element ID depending on what layout is appearing.

1 Like

Thanks Daniel. I’m not sure that is the problem though. The code refers to the correct unique element IDs in each layout. And the problem is specific to touchscreen devices – I can resize the browser on a desktop to any of the cut off points and it all works fine.

Can you share your Hype document?

1 Like

Yes, sure. Here it is. I’ve removed the background artwork to reduce the file size for upload. Otherwise, this includes all the javascript, timelines and layouts. Skipp ropes and (2.0 MB)

You have three layouts: iPhone, iPad Portrait, and iPad Landscape – you need three different scripts that take into account the unique element IDs of the three different elements.

1 Like

Hmm… I thought that’s what I had done: Each layout uses its own script, and each script calls on the Unique element IDs in each layout. E.g. iPhone layout uses rollDiceMobile(), which pulls on buttonMobile and placeholderMobile as the element IDs. The other two layouts each use their own scripts, with their own element IDs. I’m sure I’m missing something obvious!

It may seem that iPad Portrait is the same layout as iPad Landscape, but it is not. You need to setup iPad Landscape to have a function as well. You currently have three layouts, and two different functions handling only 2 of 3 layouts.

1 Like

Sorry Daniel, I’m not sure about this. I set up 3 functions, one for each layout:

  1. Ipad Landscape:
    diceRoll(), calling on placeholder and button as unique element IDs.

  2. Ipad portrait:
    rollDiceIpad(), calling on placeHolderIpad and buttonIpad as unique element IDs.

  3. Iphone:
    rollDiceMobile(), calling on placeHolderMobile and buttonMobile as unique element IDs.

And the problem persists if I strip everything back to just one layout (checking that the function and element IDs are all corresponding to each other): It works on a desktop/laptop with a mouse click, but not on a touchscreen device. The timeline animation works on both, but the dice roll and print number doesn’t.

Here’s the stripped back document.Skipp ropes and ladders_small Phone (1.8 MB)
And I updated the live demo with this stripped back, single layout version:

I’m hosting it in on a wordpress website (running on a GeneratePress theme, and Elementor theme builder) using the Tumult Hype Animations (version 1.8.1) wordpress plugin. All other hype animations (built in Hype 3) on another website work wonderfully with the exact same setup.

1 Like

Try setting the actions on Touch Start instead of Mouse Click.


Thanks Mark – unfortunately, that doesn’t seem to fix it. :pensive:

you’re attaching the behaviour twice. so load your script on sceneload …


Thanks Hans. I’m a total js novice, and I’m not sure if I have understood your comment. You think I should remove the javascript function from where it is now and only have it triggered on scene load?

PROBLEM SOLVED. :muscle::clap:

Thanks for all the advice folks. I’m still not sure what the problem was, but I found an alternative approach from an old forum post of Daniel’s that uses a ‘jump to time in timeline’ function. This now replaces the script I was using, to generate the random number needed for the dice roll. I combined this with my an additional timeline to actually ‘roll’ the dice and reveal the number when the dice lands.

Here’s Daniel’s post: Jump to random time in timeline
You can view my final game here:
And here is a stripped back single-layout version of the game if anyone wants to see the final set up I used.Skipp ropes and ladders_small_Phone (1.8 MB)

1 Like

Glad you resolved this… sorry my answer was not actaullly helpful,
I misread you issue ( did not read it properly :woozy_face:)

1 Like