Very appropriate questions Allan,
My apologies for not making this clear earlier.
"I assume that the link that will appear leads to other parts of the website. "
Yes, exactly right.
"How does the user know which words to type into the textbox? "
The game will present highlighted words to the user in the text on the same page where they need to submit those words. This will allude to the user using those words to progress from page to page.
“Wouldn’t it be better to give them a list to choose from”
That’s not the direction I would like to take the game. These highlighted words will give a clue that these words can be used in a text box at the bottom of the page for submission (or this will be explained, more clearly at some other page of the game).
“Why are these links hidden?”
Think of this like those old DOS text-based games. For example, the screen will say “You find yourself in a cave with a troll and old axe near the entrance.” Then the user types “Swing axe at troll.” and then something happens, in this case, the troll dies and hidden link appears offering a pathway out of that webpage to another webpage, progressing the adventure further. You can’t get that link until the trolls dies, hence the need for JS conditionals and operators.
As a side note, I would love to make a canvas based game that mimics something like the retro NES version of The Legend of Zelda, but I don’t know HTML5 that well yet. My hope is that I can get better at this soon enough so I can.
“Can you give an example of a word and the corresponding link that is generated?”
Yes and no. I can create several “words” I was thinking about that mimics my above example. However, I am certain that code won’t look perfectly right nor work the way I want it to. But here goes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Toggle example</title>
<style>
.hidden{
display: none;
}
</style>
</head>
<body>
<p>You enter a cave with a troll that sits next to an <b>axe</b>. You wonder if the troll will <b>attack</b>, <b>swing</b> or <b>hit</b> you but you quickly notice that it is asleep.</p>
<a href="http://www.google.com" class="toggle">You see a cave opening that leads outside</a>
<br>
<script>
var highlightedWord = "hit" , "attack" , "swing";
function toggle(hit, swing, attack){
var target = el.nextElementSibling;
if(target.classList.contains("hit")){
target.classList.remove("hit");
} else {
target.classList.add("hit");
}
}
if(target.classList.contains("attack")){
target.classList.remove("attack");
} else {
target.classList.add("attack");
}
}
if(target.classList.contains("swing")){
target.classList.remove("swing");
} else {
target.classList.add("swing");
}
}
})
}
</script>
</body>
</html>