I’m trying to find information on how to set up a Footnote/Hovertext system in Choicescript or if it’s even possible, really. I have a lot of non-english words that I would like to use without crowding the narrative text with definitions. I would prefer a way to create hovertext boxes where the player could just hover their mouse or click on a link, and then the box shows the meaning in english. If that doesn’t work, I was also considering making the word a link that then takes them to a specific scene file where the word is defined, and then taking them BACK to where they were in the story (kind of like a gosub, maybe? Not sure how it would work.)
I’ve done multiple searches for similar things in Choicescript forums and couldn’t find anyone trying to do this. Most people Iv’e talked to about it say to go to Twine Sugarcube for this capability, which I have to admit, I’m kind of considering? But at the same time, I don’t want to make that kind of transition with this much of the game already made.
The important part is that I don’t want to make it a *choice because that would look super clunky and take away from the narrative. Its not even an option, guys. So please don’t say “Just make it a choice” because I will ignore you.
I remember War for the West by Lucas Zaper had a glossary system in place for its in-universe dialect. If you went to Stats → Glossary it had a list of terms and their definitions. This sytem worked fine, even considering there were more than a few uses of the dialect as you progress through the story.
If that isn’t sufficient, what you can do is try to write using more context so that readers can intuitively pick up the meaning of words based on the meaning surrounding the word so that readers don’t have to keep jumping back and forth. Zaper did this really well to the point where I only had to visit the glossary a couple of times and then I was set for the entire story. It wasn’t a burden at all.
Alternatively, you can also ask players in the beginning, or in a configuration page in the Stats menu, if they want definitions 1. all the time 2. only when the word is first shown or 3. never, that way they can choose for themselves how to read the story. Any subsequent annoyance would therefore be a shared responsibility.
Other than that, hoverable tooltips wouldn’t feasibly work, considering much of the Choice of Games and Hosted Games playerbase is on mobile.
Then again, you can go full Anthony Burgess and never define your words, at all. A Clockwork Orange was still a fun read even though you encounted an English-Russian word hybrid every page!
When considering the migration to Twine, it is of a cost-benefit analysis. Ask yourself if the benefit of switching over to Twine in order to implement just this one feature worth the work to migrate everything over?
Better off with twine tbh if you want bells and whistles like that. I’ve had indexes for words but usually just lob them into a section accessible via the stats screen as to my knowledge there’s no way you can have something publishable through CS with what you want. (It’d likely need a script written.)
I think a glossary is probably your best bet, or to write in a way that makes it clear what’s going on with context. It is possible to use *link for inline links to a definition, but that would be more unwieldy than a hover link.
One thing you can do is to allow the option at the start to have translations/definitions or not. I had that with a screenreader friendly option, that transformed emojis and degenerated text to normal text.
That way you could have something like:
“Lika bra att ta en test mening på svenska,” they said, sitting at their computer.
Which would show up something like this for someone who picked the assisted translation option:
“Lika bra att ta en test mening på svenska,” [“Might as well use a Swedish test sentence,”] they said, sitting at their computer.
Or even a third no foreign word version just showing up as
“Might as well use a Swedish test sentence,” they said in Swedish, sitting at their computer.
I’ve got a fun solution. You can write the definition as an image and then have that left aligned so that the text wraps around it, like in the example below. The code is just:
You walk towards the strange creature. It has six legs and a pair of tiny gossamer wings.
*image bee.png left Definition: Honey Bee Apis Mellifera, A winged insect
Could this be a fairy? Or could it be the fabled honey bee? Lorem ipsum etc
With appropriate alt-text, it’s still screen-readable, and you could play around with borders/fonts etc. so the sidebars look nice but don’t intrude too much on the main text.
This is the system I have now, and I’m worried that it’s not useful enough for the kind of integration I’m wanting.
This is a system I considered but honestly, it’s not that great? Like, it’s a LOT of work (a friend of mine @Phenrex is putting together one like this, and there’s a LOT of work put into it.) with databases and shit.
If it’s possible, how can it be done? I can’t find any documentation that allows for the link to send a person to another part of the game, instead of to a url.
This is INDEED a very fun option! And I’d love to use it! But I can’t get Images to work. TAT I’ve tried following the tutorials online, and I legit just can’t get them to work at all. TAT It’s super frustrating.
Let’s see if we can’t troubleshoot this… the *image needs to be on a line all by itself (same as *return, *label etc.), it has to name the image correctly (same capitalisation and file format like .png or .jpg), and the image needs to be in the mygame folder. If you get these three ingredients right, images should appear. This line:
*image bee.png left
bee.png in your mygames folder:
The first time I tried to do it myself, it didn’t appear when I opened index.html and I wondered where I’d gone wrong… It turned out I had forgot to save the text file for the scene where the image appeared.
It looks like Chrome is correctly reading the *image line but either not finding the image described there. What happens when you right click the broken image and select Inspect? Even if the image name is fine, if you hover your cursor over it, it should tell you what folder its trying to find it in. This is what it should look like:
Searching the forum, it looks like images were broken on some old versions of ChoiceScript, so if you haven’t downloaded the latest version of ChoiceScript in a long time that might be the culprit.
I wish it did, but from what I can tell, it doesn’t?
:
""
attributeStyleMap
:
StylePropertyMap {size: 0}
attributes
:
NamedNodeMap {length: 0}
autocapitalize
:
""
autofocus
:
false
baseURI
:
"http://localhost:52330/?id=11d105aac85ab7813c2bbbb743504e3d"
childElementCount
:
2
childNodes
:
NodeList(4) [comment, head, text, body]
children
:
HTMLCollection(2) [head, body]
classList
:
DOMTokenList [value: '']
className
:
""
clientHeight
:
563
clientLeft
:
0
clientTop
:
0
clientWidth
:
709
contentEditable
:
"inherit"
dataset
:
DOMStringMap {}
dir
:
""
draggable
:
false
elementTiming
:
""
enterKeyHint
:
""
firstChild
:
comment
firstElementChild
:
head
hidden
:
false
id
:
""
inert
:
false
innerHTML
:
"<!--\nCopyright 2010 by Dan Fabulich.\n\nDan Fabu
innerText
:
"Phoenix Rising\nby Niki Eaton\n\nAbout\n\nShow Stats Restart Settings\n\nPhoenix Rising\n\nEmbark on a captivating journey through ancient China! Choose your path in a Tang Dynasty-inspired low-fantasy era, as you navigate harem intrigue or seek genuine love. Play as male, female or nonbinary, and romance four love interests. Be Heterosexual, Homosexual, Bisexual or Asexual and choose the genders of your love interests or leave them random! Finish out your time in the Imperial Palace and then live with your loved one, or scheme your way to the top of the harem!\n\nView the General Disclaimer\nView the Trigger Warnings\nStart the Alpha Demo\nNext"
inputMode
:
""
isConnected
:
true
isContentEditable
:
false
lang
:
""
lastChild
:
body
lastElementChild
:
body
localName
:
"html"
namespaceURI
:
"http://www.w3.org/1999/xhtml"
nodeName
:
"HTML"
nodeType
:
1
nonce
:
""
offsetHeight
:
583
offsetLeft
:
0
offsetTop
:
0
offsetWidth
:
709
outerHTML
:
"<html><!--\nCopyright 2010 by Dan Fabulich.\n\nDa
outerText
:
"Phoenix Rising\nby Niki Eaton\n\nAbout\n\nShow Stats Restart Settings\n\nPhoenix Rising\n\nEmbark on a captivating journey through ancient China! Choose your path in a Tang Dynasty-inspired low-fantasy era, as you navigate harem intrigue or seek genuine love. Play as male, female or nonbinary, and romance four love interests. Be Heterosexual, Homosexual, Bisexual or Asexual and choose the genders of your love interests or leave them random! Finish out your time in the Imperial Palace and then live with your loved one, or scheme your way to the top of the harem!\n\nView the General Disclaimer\nView the Trigger Warnings\nStart the Alpha Demo\nNext"
ownerDocument
:
document
parentNode
:
document
part
:
DOMTokenList [value: '']
previousSibling
:
<!DOCTYPE html>
scrollHeight
:
637
scrollLeft
:
0
scrollTop
:
0
scrollWidth
:
709
slot
:
""
spellcheck
:
true
style
:
CSSStyleDeclaration {accentColor: '', additiveSymbols: '', alignContent: '', alignItems: '', alignSelf: '', …}
tabIndex
:
-1
tagName
:
"HTML"
textContent
:
"\n\n\n\n\n\nwindow.version=\"UNKNOWN\"\n\n\n\n\n.
title
:
""
translate
:
true
version
:
""
virtualKeyboardPolicy
:
""
BUT!
Putting it into the Scenes folder fixed it!
Okay, so now I just gotta figure out if I can put an Image folder in the scenes folder to store the images cleanly… I think I saw something on the forum that said you could…
So that’s an option now! WOO! Now I gotta figure out how to add alt-text, and implement an on-off system.
This is how you’d do the alt text and image folder. It goes image name, position on screen, and then alt text. Note that you have to specific the images folder in the filename if you want to pull things from the folder:
*image images/phoneixrising.png left Phoenix Rising
And I’m sure you’ve figured it out already but for anyone who reads this later, this is how you could do the optional images:
*choice
#I don't want to see images.
*set imagedisplayed false
#I want to see images.
*set imagedisplayed true
*if (imagedisplayed)
*image bee.png
You need to also tell it if you want the image left, right or center I think
Edit- Oh I see, misread that. Sorry can’t help with the redirect for the folder within folder issue. Have you tried running it through Dashingdon’s? If the images work there, then it wont be an issue for publishing even if there’s something local going on.
Hey question, What’s the dimensions of that picture you use to the side? Like, pixels, height width, etc? I want it to be about that size, so it’s not intrusive, but I’m not sure what they should be…
Your folder issue in Visual Studio could be because VS might not want to open files from folders you haven’t said it can trust. Have you tried it in the browser just opening directly from your folder?
As for the alternative text, you can see in the image here what inspecting an element should appear as if you’ve done it right:
*image images/bee.png center This is the alternative text.
I’m not sure why inspecting the element wasn’t working properly for you before (but it could point to why you’re having these issues). If you just open the game in a browser and right-click the image and click inspect you should be able to see the html that produces that image.
