Footnotes/Hovertext? | How to define words without annoyance

[Niki_Christopherson]

Yeah, that’s how I did it, and it yielded the info from the previous post I put up here.

: 
""
align
: 
""
alt
: 
""
attributeStyleMap
: 
StylePropertyMap {size: 0}
attributes
: 
NamedNodeMap {0: src, 1: class, 2: classname, src: src, class: class, classname: classname, length: 3}
attributionSrc
: 
""
autocapitalize
: 
""
autofocus
: 
false
baseURI
: 
"file:///C:/Users/Niki/OneDrive/Desktop/ChoiceScript/dfabulich-choicescript-3a7255e/web/mygame/Phoenix_Rising1.4.html"
border
: 
""
childElementCount
: 
0
childNodes
: 
NodeList(0)
length
: 
0
[[Prototype]]
: 
NodeList
children
: 
HTMLCollection []
classList
: 
DOMTokenList ['aligncenter', value: 'aligncenter']
className
: 
"aligncenter"
clientHeight
: 
16
clientLeft
: 
0
clientTop
: 
0
clientWidth
: 
689
complete
: 
true
contentEditable
: 
"inherit"
currentSrc
: 
"file:///C:/Users/Niki/OneDrive/Desktop/ChoiceScript/dfabulich-choicescript-3a7255e/web/mygame/images/phoenixrising.png"
dataset
: 
DOMStringMap {}
decoding
: 
"auto"
dir
: 
""
draggable
: 
true
elementTiming
: 
""
enterKeyHint
: 
""
fetchPriority
: 
"auto"
height
: 
16
hidden
: 
false
hspace
: 
0
id
: 
""
inert
: 
false
innerHTML
: 
""
innerText
: 
""
inputMode
: 
""
isConnected
: 
true
isContentEditable
: 
false
isMap
: 
false
lang
: 
""
loading
: 
"auto"
localName
: 
"img"
longDesc
: 
""
lowsrc
: 
""
name
: 
""
namespaceURI
: 
"http://www.w3.org/1999/xhtml"
naturalHeight
: 
0
naturalWidth
: 
0
nextElementSibling
: 
p
nextSibling
: 
p
nodeName
: 
"IMG"
nodeType
: 
1
nonce
: 
""
offsetHeight
: 
16
offsetLeft
: 
0
offsetParent
: 
div#container1.container
offsetTop
: 
137
offsetWidth
: 
689
outerHTML
: 
"<img src=\"images/phoenixrising.png\" class=\"aligncenter\" classname=\"aligncenter\">"
outerText
: 
""
ownerDocument
: 
document
parentElement
: 
div#text
parentNode
: 
div#text
part
: 
DOMTokenList [value: '']
referrerPolicy
: 
""
scrollHeight
: 
16
scrollLeft
: 
0
scrollTop
: 
0
scrollWidth
: 
689
sizes
: 
""
slot
: 
""
spellcheck
: 
true
src
: 
"file:///C:/Users/Niki/OneDrive/Desktop/ChoiceScript/dfabulich-choicescript-3a7255e/web/mygame/images/phoenixrising.png"
srcset
: 
""
style
: 
CSSStyleDeclaration {accentColor: '', additiveSymbols: '', alignContent: '', alignItems: '', alignSelf: '', …}
tabIndex
: 
-1
tagName
: 
"IMG"
textContent
: 
""
title
: 
""
translate
: 
true
useMap
: 
""
virtualKeyboardPolicy
: 
""
vspace
: 
0
width
: 
689
x
: 
14
y
: 
219```

This is what I got when I right clicked and inspected after compiling the game and opening it in Chrome, without going through VSCode.

[jojo]

Well, in any case, the inspect shows the problem:

“file:///C:/Users/Niki/OneDrive/Desktop/ChoiceScript/dfabulich-choicescript-3a7255e/web/mygame/images/phoenixrising.png”

It’s trying to find the image in mygame/images/ instead of scenes/images. Try moving the folder and then recompile.

[Niki_Christopherson]

I’m sorry, I don’t… really understand. Could you show me what you mean in screenshots? I’m a visual learner, and I’m afraid to mess this one up. Here, I’ll show you screenshots of each file, so that we can figure out what to do.

There, that should be all of the files/folders necessary. What do I do?

[jojo]

Hmm, it looks correct to me. Your image is in the right folder:

So it should show the image when you open index.html. I’m not sure what’s going wrong but I’ve just tried from first principles to make the minimum working version with a project file I don’t mind if I mess up. What I did was:

1. download the latest version of choicescript..
2. extract the .zip:

3. created a folder called images in the mygame folder:

4. Placed my png in the images folder:

5. Opened startup.txt in the scenes folder and replaced everything with this line:
   *image images/bee.png center Alt text

6. And then I opened the index.html in the mygame folder as I described in my previous post. The image displays as expected:

If this test approach works for you (it should!) then you made a mis-step before somewhere and that can be discovered. If it doesn’t work then the problem is arising from your setup: your browser could have an extension blocking things for example.

[Niki_Christopherson]

So I just tested something, and I don’t think it should’ve worked? But it did???

As you can see, the code has not changed, it’s still looking for images/phoenixrising.png

But I added the pic to the scenes folder:

And suddenly it worked. I don’t know why. But I guess I just can’t use image folders for some reason…? I dunno.

On the bright side, it will still work! Now I just have to make a list of all the words I’mma be using, and then make the images for them. …this is gonna be a lot. XD

Edit:
ANNNND I JUST BROKE IT. It was working just fine, and then I added an img_ in front of each of the photo names, so that they’d at least all be in order together, for some sort of organisation? AND NOW IT DOESNT WORK AGAIN.
Edit-Edit: AND NOW IT WORKS AGAIN. TAT I’m so annoyed. I refreshed it and it worked??? I dunno why the FIRST refresh didn’t work, but okay then I guess.

[will]

I did a glossary like this in the stats screen for my abandoned* project Ansible Station 24:

*for now

[malinryden]

@Niki_Christopherson

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.

I am just using some very basic commands. Let’s say we have two variables: translation on and translation off. Then we need a single tag: ton (translation on), which is if true adds translation. So the code we need is:

*create ton false
*set ton true (if the reader chooses aided translations)

And the text code would look like this:

“Lika bra att ta en test mening på svenska,” 
*if ton
  [“Might as well use a Swedish test sentence,”]
they said, sitting at their computer.

[Niki_Christopherson]

@malinryden

I am just using some very basic commands. Let’s say we have two variables:

This is a very sweet and simple option, if the language you’re working with works with only the roman alphabet (or something equiavalent). But because I’m working with Cantonese, whos alphabet is pictographical, there are actually 3 levels of translation I would need, English, Pinyin, and then the ACTUAL Cantonese alphabet. @Phenrex’ system is similar to this but uses arrays to hold the variables. It’s quite elegant!

[Phenrex]

I am planning on making a thread once a public version of my new demo is up but the system I’m currently doing is not overly complex in my mind. The automatic translation is the most obnoxious part since it relies on a loop set up with an array that serves as an index for other arrays. Talking through coming up with it would be pretty laborious so I am putting it off until a time where I am confident it’s in a more finalised state.

I’m sure it’s nothing that hasn’t been done before, but I’m pretty proud of how it’s turning out! I am getting some ideas from what people are talking about for incorporating definitions/clarity into terms as they are used.