Goals, Hints, and Scores:Hintcard Shorthand

Example Code Cheatsheet Explained Example Game

Hintcards are a system for creating and managing hints, which are displayed in a modal dialog managed by the HintManager. The shorthand shown here uses a form of markdown to define a set of hints organized hierarchically (in this example, by chapter and location). Shorthand accepts text in a markdown format, and uses it to build hint data objects. Each hint consists of a string of text. Each hint group consists of a name and optional description.

Example Code

MyGame.hintcard.set({
  introduction: `Welcome to the hints for my awesome game. `,
  hints: `
    # Chapter 1 | In which a strange knight comes to town. | +
    ## The Castle | In which our hero explores the castle grounds. | +
    ## - Have you tried looking in the wizard's bedroom? | +
    ## - Look in the wizard's bedroom. | +
    ### The Wizard's Bedroom | In which our hero explores a magical boudoir. | x
    ### - Have you tried looking under the bed?
    ### - Have you tried looking in the closet?
    ### - Have you tried looking in the chest?
    ### - Wear the wizard's bathrobe.
  `,
});

Shorthand Cheatsheet

Use a | as a separator in the text of a hint to define an optional name (only used for groups) and text.
Use # to define a group.
Use # - to define a hint under a group.
Use multiple ## to define nested groups.
End a hint with |+ to mark it as initially active.

Shorthand Explained

Hints are always grouped into hint groups (aka chapters or topics or sections, as you prefer). Use a leading # to define a group of hints.
Expand for example
```
MyGame.goalcard.set({
  introduction: `Welcome to the hints for my awesome game. `,
  hints: `
    # The Wizard's Bedroom | +
  `,
});
```
And here's how that would display in the hints window.

Welcome to the hints for my awesome game.

The Wizard's Bedroom3
When defining a hint group, the text you supply will be used as a hint.name. Optionally place a | in the text to divide the text into hint.name and hint.description, which will be broken into a new line below the name.
Expand for example
```
MyGame.hintcard.set({
  introduction: `Welcome to the hints for my awesome game. `,
  hints: `
    # The Wizard's Bedroom | In which our hero explores a magical boudoir. | +
  `,
});
```
And here's how that would display in the hints window.

Welcome to the hints for my awesome game.

The Wizard's Bedroom3

In which our hero explores a magical boudoir.
Single hints don't have names, just text. Use a leading # - followed by a string of text to define an individual hint under a group.
Expand for example
```
MyGame.goalcard.set({
  introduction: `Welcome to the hints for my awesome game. `,
  hints: `
    # The Wizard's Bedroom | In which our hero explores a magical boudoir.
    # - Have you tried looking under the bed?
  `,
});
```
And here's how that would display in the hints window.

Welcome to the hints for my awesome game.

The Wizard's Bedroom3

In which our hero explores a magical boudoir.

Have you tried looking under the bed?
Use multiple ## to define nested groups of hints.
Expand for example
```
MyGame.goalcard.set({
  introduction: `Welcome to the hints for my awesome game. `,
  hints: `
    # The Wizard's Bedroom | In which our hero explores a magical boudoir. | +
    # - Have you tried looking under the bed? | +
    ## Beneath the Bed | Is it bigger underneath than above? | +
  `,
});
```
And here's how that would display in the hints window.

Welcome to the hints for my awesome game.

The Wizard's Bedroom3

In which our hero explores a magical boudoir.

Have you tried looking under the bed?

Beneath the Bed3

Is it bigger underneath than above?
To place individual hints under a nested group, use the same number of hash marks followed by a dash: ## -.
Expand for example
```
MyGame.goalcard.set({
  introduction: `Welcome to the hints for my awesome game. `,
  hints: `
    # The Wizard's Bedroom | In which our hero explores a magical boudoir. | +
    # - Have you tried looking under the bed? | +
    ## Beneath the Bed | Is it bigger underneath than above? | +
    ## - Have you shined a light beneath the bed? | +
  `,
});
```
And here's how that would display in the hints window.

Welcome to the hints for my awesome game.

The Wizard's Bedroom3

In which our hero explores a magical boudoir.

Have you tried looking under the bed?

Beneath the Bed3

Is it bigger underneath than above?

Have you shined a light beneath the bed?

End a hint with | + to mark it as initially active. It must be the last item, regardless of how many pipes the goal text has.

Expand for example

MyGame.goalcard.set({
  introduction: `Welcome to the hints for my awesome game. `,
  hints: `
    # The Wizard's Bedroom | In which our hero explores a magical boudoir. | +
    # - Have you tried looking under the bed? | +
    ## Beneath the Bed | Is it bigger underneath than above?
    ## - Have you shined a light beneath the bed?
  `,
});

And here's how that would display in the hints window.

Welcome to the hints for my awesome game.

The Wizard's Bedroom3

In which our hero explores a magical boudoir.

Have you tried looking under the bed?

#TMI Why would I deactivate a hint?

Hints are made active by default unless specified otherwise. This means that all hints are available by default at the start of the game. However, you may find that the visibility of a hint is itself a spoiler, as in the case of a topic that refers to a part of the game that the player hasn't been introduced to yet. So you might want to activate certain hints only when the player reaches a relevant level of progress, via the game.hintcard.activateHint() method.

example game

var MyGame = new adventurejs.Game("MyGame", "MyGameDisplay");
      
MyGame.hintcard.set({
  introduction: `Welcome to the hints for my awesome game.  `,
  hints: `
    # Chapter 1 | In which a strange knight comes to town. | +
    ## The Castle | In which our hero explores the castle grounds. | +
    ## - Have you tried looking in the wizard's bedroom?
    ## - Look in the wizard's bedroom.
    ### The Wizard's Bedroom | In which our hero explores a magical boudoir. | +
    ### - Have you tried looking under the bed?
    ### - Have you tried looking in the closet?
    ### - Have you tried looking in the chest?
    ### - Wear the wizard's bathrobe.
    ## The Square | In which our hero does some shopping. | +
    ### The Butcher's | In which our hero looks for a fifth meat. | +
    ### - Have you tried eating the beef?
    ### - Have you tried eating the chicken?
    ### - Have you tried eating the pork?
    ### - Have you tried eating the lamb?
    ### - Eat the fifth meat.
    ### The Baker's | In which our hero pinches some loafs. | +
    ### - Have you tried pinching the focaccia?
    ### - Have you tried pinching the bolo?
    ### - Have you tried pinching the pastry?
    ### - Eat the black bread.
    ### The Candlestick Maker's | In which our hero explores some hot wax. | +
    ### - Have you tried smelling the wax?
    ### - Have you tried tasting the wax?
    ### - Have you tried eating the wax?
    ### - Bite the wax tadpole.
    # Chapter 2 | In which our hero explores beyond the castle walls. | +
    ## The Wilds | In which our hero enters the unknown wilds. | +
    ### The Moors | In which our hero explores the moors. | +
    ### - Have you tried looking in the muck?
    ### - Have you tried looking in the mud?
    ### - Have you tried looking in the silt?
    ### - Look in the peat bog.
    ### The Forest | In which our hero is lost in a dark wood. | +
    ### - Have you tried looking up the oak tree?
    ### - Have you tried looking in the dark bole?
    ### - Have you tried looking under the tree roots?
    ### - Go under the tree.
  `,
})