Click-based events in a gamebook

I'm using the desktop version of Quest and am trying to implement two different types of click-based events.

1) When certain coordinates of an image are clicked, the player is sent to a different page. (In other words, the player has to locate a hidden item in the image in order to move on.)
This thread mentioning html imagemaps is pretty close to what I'm trying to do. However, I'm having all kinds of errors trying to port this over. Is a script like this even possible to implement in a gamebook?

2) When certain text is clicked 10 times, the player is sent to a different page.

Current page script:
SetCounter ("chargeup", 0)
if (GetInt(game, "chargeup") >= 10) {MovePlayer (Page24)}

description:
<a class="cmdlink" onclick="ASLEvent('lasercharge','null')">Charge up!</a><br>

functions:
<function name="lasercharge" type="int">
chargeup = chargeup + 1
</function>

The cmdlink displays, but the player doesn't move after repeated clicks, so assumedly there's something wrong with the counter (unsurprising, since I'm a code amateur). I'm starting to feel my brain numb from searching nonstop through the forums for hours, so some expert advice would be greatly appreciated.


SetCounter ("chargeup", 0)
if (GetInt(game, "chargeup") >= 10) MovePlayer (Page24)

So you set the counter to 0, and then immediately check if it's 10 or higher. It's never going to be true at that point.
You've also got a function increasing a local variable, chargeup, which is discarded as soon as the function ends.

I think what you want is:
Page script:

game.chargeup = 0

Function:

<function name="lasercharge" type="int">
  game.chargeup = game.chargeup + 1
  if (game.chargeup >= 10) {
    MovePlayer (Page24)
  }
</function>

So it increases the same counter, and then checks if its value is 10 or higher every time it is increased, rather than once at the beginning.


Ahh, no wonder it wasn't working. Your changes did the trick! The function started working once I entered in the parameters as well.

As for the first question, I finally got that one working too.
I thought that since the sample in the linked thread at had the image set as an editor_object, it wouldn't work in a gamebook where that type doesn't exist. Turns out that just setting it to scripttext instead does work, once the javascript file is loaded in. After that, all the function has to do (for my purposes) is move the player.

Thanks so much for the help! It's a huge relief to move on from this.


Following up a month later:
I've started testing my game in browsers and it's been working great, except for the usemap. I was using quest://local/ while testing in the Quest software, but that doesn't display in the browser.
However, the alternative GetFileURL only seems to work in the script box--which requires some different formatting than the description box (what I was using before). I've tried both SVGs and usemaps to little avail.

Things that don't work when entered into the script box:

s0 = "<svg width=\"648\" height=\"3547\"> <img src=\"" + GetFileURL("MyPage.jpg") + "\" width=\"648\" height=\"3547\" /><circle cx=\"450\" cy=\"3000\" r=\"20\" fill=\"red\" fill-opacity=\"0.8\" onmousedown=\"javascript:troom('null')\"></circle></svg>"
msg (s0)
(Stacks an empty svg on top of the inserted image and doesn't display the red circle.)

s0 = "<img src=\"" + GetFileURL("MyPage.jpg") + "\" usemap=\"#EasterEgg\"><map name=\"EasterEgg\"><area shape=\"rect\" coords=\"620,840,800,1020\" href=\"javascript:troom('null')\" alt=\"Found it!\" title=\"What's that?\"> </map0>"
msg (s0)
(Displays the image, but doesn't initialize the javascript.)

Things that work when entered into the description box:

<svg width="648" height="3547"> <image xlink:href="(EXTERNAL LINK)" width="648" height="3547" /> <circle cx="450" cy="3000" r="20" fill="red" fill-opacity="0.5" onmousedown="javascript:troom('null')"></circle></svg>
(The simple method of using an externally-hosted image has size/color display issues on some mobile devices.)

I have a feeling I'm overlooking something incredibly fundamental here. How can I get my image to display correctly on all devices and have a working page redirect when part of the image is clicked?


Log in to post a reply.

Support

Forums