Help with making extensions go to new pages?

Hello, so I’m working on a website where you start off on one page and then you solve puzzles to move along throughout the website and unlock other puzzles, find hidden lore, stuff like that. I’ll also say now that I’m extremely new to coding in general, and I’m pretty much googling how to do every single thing in HTML, I just haven’t found how to solve this problem. The problem is, I just started on this website today, and I’ve got my first two pages ready. To progress through my website, you have to solve different puzzles, each puzzle giving you a 4 digit code made up of numbers and letters. I’d like to make it so you just have to go to example-example-example.glitch.me/HSBE for example, while having the actual HTML files in my project numbered so it’s easier to keep track of. The only way I’ve been able to do this so far is by naming the HTML file what the 4 digit code is, and then you have to go to example-example-example.glitch.me/HSBE.html. Is there any way at all to have just a 4 letter extension go to these different pages, while still keeping the html files numbered to make it easier to organise? Thanks!

You don’t. The only way to do so is by using Express which would make your project not static and go to sleep after 5 minutes of inactivity.

Not true, you can do this using a static site.

If you want your link to be /HSBE, you would create a folder called HBSE and add an index.html file with the your HTML code. Upon visitng /HSBE you would see that code.

1 Like

No like make it so that if you have a wrong code then it would say wrong code or something like that

You can do that with client side javascript.

No I mean like he said you type in the URL and if it’s 404 say wrong code

:point_up_2:

So you can make a 404 page with client side js.

You can write 404: Not Found to the screen on an incorrect answer.

Hmm… I think people would find the code easier that way.

But it’s like let’s say I made some random code I wanted it to go to 404 in client js like

puzzles.glitch.me/34534

The best way to solve your problem would be to use Express, as code-alt stated. However, if you really want to do it using a static project it can be done (but it is a little bit hacky).

For every valid code, you would need to create a folder of that name, and create an index.html file inside that folder. E.g. /ABCD/index.html.
These index files would then redirect to the numbered puzzle files using the following meta tag:

<meta http-equiv="refresh" content="0; url=PUT_URL_HERE">

This should be enough to make it work, but if you want to go even further you could also add the following JavaScript to your numbered puzzle files to hide the redirect:

history.replaceState('', '', 'PUT_CODE_URL_HERE')

It may be a little hard to see how it all fits together, so I have made a little proof of concept to better illustrate it. I have also included the full code of each file type below.

/ABCD/index.html:

<!DOCTYPE html>
<html>

  <!-- This is an example of a code files -->
  <!-- For every solution create a copy of this file -->
  <!-- Put the file in a folder with the 4 character code as the name -->
  <!-- As you can see in the file tree the solution to get to this file is ABCD -->

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Redirects to the numbered puzzle file -->
    <!-- Change /puzzle/1.html to the numbered file path -->
    <meta http-equiv="refresh" content="0; url=/puzzle/1.html">

    <title>&nbsp;</title>
  </head>
  <body></body>
</html>

/puzzle/1.html:

<!DOCTYPE html>
<html lang="en">

  <!-- This is an example of a numbered puzzle file -->
  <!-- When creating a new file remember to redirect to it from a code file -->
  <!-- E.g. this file is redirected to from the file /ABCD/index.html -->

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Puzzle 1</title>

    <link rel="stylesheet" href="/style.css">

    <!-- Changes the URL to hide the redirect -->
    <!-- Change /ABCD to the pre redirect path -->
    <script>
      history.replaceState('', '', '/ABCD')
    </script>

    <script src="/script.js" defer></script>
  </head>
  <body>
    <h1>Puzzle 1</h1>
  </body>
</html>

Note that since the numbered puzzle files will have to be accessible on the internet, it is possible for people to cheat by going directly to the file if they know the name. However, there is no way to prevent this without using Express (or similar).

5 Likes

Well actually I figured out a new idea based on how a PWA intercepts page requests. Maybe if a request is sent to a page and a 404 is returned the service worker can override the request content with a custom 404