Presenting access codes on a website with limited formatting options?
I am making a game that has a free demo and a full version. When you are playing the free demo, you can enter an access code to unlock the full version.
My issue is, when users go to the webpage with the access codes on it, I'm getting a lot of messages about how the access codes don't work. Here's a screenshot of the page:
The codes below are in this format:
version = access code
As an example, let's say you want to unlock the full version of v0.15.00. Below, you'd find "v0.15" in the list, then copy "Foo Bar Baz" (without quotes) into the game's Access Code text box and click submit.
Access Codes
v0.16.xx = This is the second access code. L33T!
v0.15.xx = Foo Bar Baz
Above this is a picture of my game showing how to get the version number. People don't seem to be having trouble with that part. Here are the mistakes I'm seeing:
- People copying the whole line
- People copying one of many words in the access code. I suspect that was just a boneheaded move on my part though, as the latest code starts with the phrase "This is the second..." Next release, I won't be making that same mistake.
It's worth knowing that the phrase in the example surrounded by quotes isn't bolded. I'm going to try that and see if it makes a difference, but I think there is a much better way to present these access codes than I'm doing it.
It's worth noting, it is important to show previous versions and I need to update this list every month with a new line.
I asked a user who struggled, and they suggested I present the access codes like this:
------------------------------------
access code goes here
------------------------------------
That sounds like a good idea to me, though I don't know where I would put the version number. Maybe embedded in that first dotted line? With that uncertainty, I decided to ask on here to get some opinions from people who are much smarter about UX than I am.
Important context: It is an HTML game. The access codes are on a Patreon page, so I think that means I have limited HTML features. It uses a WYSIWYG editor that lets me bold text and italicize it or create a link or list or image. Maybe I could have a link go back to the game and fill in the access code, but the game can be played online or downloadable, and I don't know how that could work in the latter. Either way, it wouldn't know how to take you back to where you were because I can't pass a usable parameter from the game to Patreon.
Also worth noting that Patreon doesn't use a monospaced font, and its editor doesn't allow me to change the font. I bring this up because one of the answers suggested an ASCII table. Here's how the generated table looks with a monospaced font:
+--------------+---------------------------------------+
| Game Version | Access Code |
+--------------+---------------------------------------+
| v0.16 | This is the second access code. L33T! |
| v0.15 | Foo Bar Baz |
+--------------+---------------------------------------+
But here's how it looks on the website:
For what it's worth, a table that looks like this in ASCII:
Game Version Access Code
-------------- ---------------------------------------
v0.16 This is the second access code. L33T!
v0.15 Foo Bar Baz
Looks like this on Patreon:
That's still misaligned, but maybe it's good enough to get the job done?