So I've managed to create a functioning keyboard in my game, by setting up 26 links (each coding for a picture of a letter) and using absolute positioning to manipulate where those links show up on the page. The game is able to keep track of the letters the player has entered, thus far. The result looks something like this:
The problem is: I can't figure out how to get rid of all those little arrows. The positioning of the links works fine (e.g. clicking on the letter "M" will result in "M" displaying on the keypad), but the hyperlinked arrows themselves will not disappear.
Edit: Got this working by setting the page script to indent all text by -9999 px, and putting absolute positioning in the html source code to not negatively indent the text I wanted to appear on the page.
Thanks, Ogre and Mizal.
Would either of you mind checking if the keyboard works for you? You should be able to type any combination of letters (up to 5), press "enter" to submit the password, or press "clear" to reset the keyboard. Right now, the password is set to "QWERT". I would appreciate it if someone could try using a few incorrect combinations as well as the correct combination to see if it works.
It's availble in my story at: https://chooseyourstory.com/story/recursion~20theory~20 . (On the front page, instead of clicking on the quote, click on "Beta-test Padlock").
I appreciate you checking it out. Yeah, it was coded to only remember up to five letters. I had to create a new page every time a new character was inputted, and the coding involved was meticulous. I'm not sure if there's a way I can notify the reader it only requires 5 or less digits.
Hi Mayana, thank-you for taking a look. Since solving this puzzle is necessary to progress through my story (and comes relatively early on in the story), I was considering making an alternate version of the page in which all 26 letters are simply displayed as links. If you're having trouble with the page, I will try and implement some more accessible option, such as this.
Hey, @Mayana, how would I go about using alt text to make an image description for you and other players? I know that in the HTML source code, I have the following snippet:
<img alt = "" src = "insert website here" style = "height:600px; width:550px" />. Do I just need to put a text decription next to img alt? Or will that not work so long as the image is still appearing on your screen?
Thanks Adelynn and Mizal.
Thanks for the suggestion. I tried that; but it resulted in the keyboard disappearing. (The actual pictures themselves are embedded as individual links). The reason the arrows are appearing is because when I embedded the pictures as limks, the website ignored the HTML code and tried to align them vertically along the page. By using absolute positioning in the HTML code for each link, i forced the letters to be in the right place (and the alignment of the links is still correctly associated with the letters), but those little arrows appeared. Technically, theyre not actually gone, just shifted left by -9999px so they're not visible. That's why Mayana said they were showing up as arrows, most likely.
Thanks for the code; I'll try testing it out. I'm not sure it would work for what I was intending, though. I really need all 28 links, because the passlock mechanism and ability of the keyboard to display what you typed depends upon six variables. (Five of these encode the letters themselves, and can range from one through twenty-six. Depending on which letter the character types, these will need to be set to different values. The last one detects if any of the characters entered so far was incorrect). Using your code seems feasible if I managed to encode variable restrictions and changes into the HTML code itself, but that sounds more complicated. I managed to get the keyboard itself working now, so I will stick with that for the moment.
Then again, I have basically no skill in HTML. (In fact, the little bits that I know were learned exclusively for this storygame). So I appreciate the code – it is useful information to know, and I might be able to use it in another puzzle.
For me, the password function itself seems to work, saying when I enter it correctly vs. incorrectly. It's not explicitly stated that I needed to clear the incorrect password, but it seemed pretty intuitive that clearing starts it over.
The only thing that threw me off was actually the text up top, the "you entered..." the first part of the passcode instead of something like "you enter..." or even just "enter..." It was just a little confusing for it to say I'd "entered" the first part when I had yet to input anything.
But kudos on figuring out how to make this!
Thanks, Camelon! I appreciate you taking a look. I actually thought about the titles when I was making it. The story itself is told in the past tense, so I thought those would be the most fitting titles. If it's confusing, I'll shift the order of the titles so that it doesn't say "you entered the first digit" until after you've actually entered it - or just change the titles entirely.