A HINT Command: InvisiClues - ThePix/QuestJS GitHub Wiki
This is one approach to giving users hints. We could call it "InvisiClues" - a page with all the clues on it, but hidden unless the player wants to see them.
We need to tell the command we are using InvisiClues. Do this in settings.js.
settings.hintInvisiClues = trueThe command will now just prints a message, with a link to the file, game/hints.html.
The hints will go in another web page, which should be in the "game" folder. Call it "hints.html". Obviously in needs to be part of your ZIP file when you upload, but you will probably just include the whole folder.
This is the basic file contents, just paste the lot into your file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hints for My Game</title>
<meta http-equiv="Content-Security-Policy" content="
default-src 'self';
style-src 'unsafe-inline' 'self' https://fonts.googleapis.com https://ajax.googleapis.com https://cdnjs.cloudflare.com;
font-src 'self' https://fonts.gstatic.com https://cdnjs.cloudflare.com;
script-src 'unsafe-inline' 'self' https://ajax.googleapis.com https://html5shiv.googlecode.com;
img-src 'self' https://ajax.googleapis.com;">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous">
<link rel="stylesheet" href="../assets/css/default.css">
<link rel="stylesheet" href="../assets/css/sans-serif.css">
<link rel="stylesheet" href="../game/style.css">
</head>
<body>
<div id="main">
<div id="inner">
<div id="output">
<h2 class="default-h default-h2">Hints for My Game</h2>
Each section has a number of clues, getting more explicit down the list. Hopefully you can identify the section you are interested in from the title - without the title being too spoilery. Click on it to reveal the clue.
<hr/>
<!-- DATA HERE -->
</div>
</div>
</div>
</body>
</html>
A couple of places say "My Game"; I suggest you change that to the name of your game.
There are three lines that start <link rel="stylesheet". The second you might want to change to whatever theme you are using. Currently that means either "serif" or "sans-serif" (if you have not set that in setting.js, it will be the default, "sans-serif"). The third line should be set to your style file, including the path; the default should be fine.
There is an HTML code, details that does what we want, so this is not complicated at all. In fact, the hardest part is working out what clues to give. It all needs to go into the file where it says <!-- DATA HERE -->.
Break the game in to sections, perhaps corresponding to each puzzle. For each section, give it a name that will mean something to users wanting to solve this puzzle, but not to anyone else (easier said than done sometimes!).
I am going to do an example where the player needs to pick up a letter before the house will let her enter, so will call it "Into the house". The section title goes in the file like this:
<h4 class="default-h default-h4">Into the house</h2>
Then we have a series of clues, each getting more obvious than the last. These go inside details tags, with the clue number as a summary - what the user will see before clicking.
<details>
<summary>Clue one</summary>
Is that a letter on the ground?.
</details>
<details>
<summary>Clue two</summary>
Pick up the letter, and the house will let you inside.
</details>
Finally I suggest a line to indicate the end of this section.
<hr/>
You can see what this looks like at the very bottom of this page.
You can add as many clues to a section as you like, and as many sections too.
If you are like me you will be authoring several games at once, and your game files will be in a different folder. However, when they are uploaded, you need to rename that folder to "game". The HINT command uses the folder variable so will find the file anyway.
The only issue is that if you have a custom CSS file, Quest will not find it when running from your PC - but it should work fine when uploaded. When you get to beta-testing, do check yourself that this works!