Forums » Advanced Editor Forum » Read Thread

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. 

I think you'd better start tagging BradinDvorak, BerkaZerka or Killa_Robot to these kinds of questions, because you've already transcended past the ability of any of us mortals to help you my dude.

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.

I checked it out, but didn't have much luck in getting it to work. All the links display as just the < symbol. When I chose one at random (the last link) to move onto the second digit, the first one displayed correctly (apparently I had chosen m), so in theory, I could get it right with a lot of random link pressing and going back. But that would be a pain, since I can't see what logic this follows; the third, fourth and fifth "<" links all lead to y, then the next 3 to h, etc.

Please note that this likely doesn't mean that your keyboard doesn't work. Screen readers just have trouble interpreting link labels correctly, I suppose. There's only a few blind people on this site, so you wouldn't lose many readers if you can't figure out how to fix it. Just thoguht I'd let you know in case you could fix it with something easy, like alt text.

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. 

I always just use < img src = blahblah.jpg alt = "alt text" > You don't need to fool around height width, it's a lot easier just to resize the image itself and then not worry about that.

What are the arrows for anyway? Because if they represent the actual links you can just make the links themselves hidden instead by using a variable restriction.

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. 

Oh... I mean you don't need to put images inside the links themselves. Links, even when hidden, still have a code that can be used in the following format:

[a onclick="PostBack('FollowLink','257');return false;" href="#"]Unlock Secret Character[/a]

Which means you just need to create a link, play the game, inspect that link element to find the code, replace "257" with that code, and you can them make as many links as you want on the actual page itself.

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. 

Very cool!

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.