Author Topic: Escape Room christmas game (& gift)  (Read 754 times)

jo552006

  • Stubble
  • **
  • Posts: 162
Escape Room christmas game (& gift)
« on: November 12, 2021, 09:40:35 AM »
Hi all,

Our larger family has decided to skip doing gifts for all kids from all families and gone to a draw name options.  This is great, but I'd like to something more special for my cousin who's quite intellectual than just get him a normal present.  I've decided to hide his present within an escape room style game (home made).  I've created a web site and am working on other parts.  I plan to put the rough details on here after I'm done so if anybody else thinks this would be fun they can go ahead and do it as well.

My question:

I am hoping somebody can help me make a very small HTML code as part of the game.

I know this is easy in basic, but have no idea how to write this in html.  In short I want to have the HTML code Display, "Input Code" and then have a user input a code.  If the code is right, I want the program to display the next clue.  I know how to do this in basic on my graphing calculator.  I have NO idea how to do this on a web site.

Here's the program I made that works and does what I want on my graphing calculator written in Basic.  Note that "Hooray" text will be replaced by my jumble.

Program:Programname
:Lbl B
:ClrHome
:Disp "INPUT CODE"
:Input A
:If A=1234
:Then
:Disp "Hooray!"
:Pause
:End
:If A(= doesn't equal)1234
:Then
:Disp "Try Again"
:Pause
:Goto B

fell-like-rain

  • Stubble
  • **
  • Posts: 187
  • Location: Massachusetts
Re: Escape Room christmas game (& gift)
« Reply #1 on: November 12, 2021, 11:05:06 AM »
I don't think you could do this easily (if at all) with pure HTML, though I'm not really a web dev, so someone feel free to correct me. HTML could do input validation and only accept a correct answer, but to then conditionally display the next option, you'd want some kind of script. That'd be in either PHP or Javascript, generally.

 If I was doing this, I would just make the whole site as a React JS app, which can be set up pretty simply and then allows a very easy logical flow for what you're trying to do (take an input, conditionally render a component based on that input). But if you don't want to learn React, you could just do it in HTML and set a JS script as the action for the input form.

seattlecyclone

  • Walrus Stache
  • *******
  • Posts: 7254
  • Age: 39
  • Location: Seattle, WA
    • My blog
Re: Escape Room christmas game (& gift)
« Reply #2 on: November 12, 2021, 11:08:56 AM »
Agreed that HTML alone won't do it. React seems to be a bit of overkill for this application. Here's a solution with vanilla JavaScript.

Code: [Select]
<html>
  <head>
    <title>Escape the Room</title>
    <script type="text/javascript">
      let currentQuestion = 0;

      const questions = [
        "1) What is your name?",
        "2) What is your quest?",
        "3) What is your favorite color?"
      ];

      const answers = [
        "Sir Lancelot of Camelot",
        "To seek the Holy Grail",
        "Blue"
      ];

      function checkAnswer() {
        if (currentQuestion >= questions.length) {
          return;
        }
        const guess = document.getElementById('answer').value;
        if (guess === answers[currentQuestion]) {
          currentQuestion++;
          document.getElementById('answer').value = '';

          if (currentQuestion < questions.length) {
            document.getElementById('message').innerText = "Correct!";
            document.getElementById('question').innerText = questions[currentQuestion];
          } else {
            document.getElementById('message').innerText = "All done!";
          }
        } else {
          document.getElementById('message').innerText = "Try Again";
        }
      }

      setTimeout(() => {document.getElementById('question').innerText = questions[0]}, 100);

    </script>
  </head>
  <body>
    <p id="question"></p>
    <input id="answer" type="text" />
    <button type="button" onclick="checkAnswer()">Guess</button>
    <p id="message"></p>
  </body>
</html>

gooki

  • Magnum Stache
  • ******
  • Posts: 2917
  • Location: NZ
    • My FIRE journal
Re: Escape Room christmas game (& gift)
« Reply #3 on: November 14, 2021, 10:16:45 PM »
Html with a little jQuery should be pretty easy.

Or do it with a online form builder like Jot Form to add conditional logic.