Clicking on text1 hides text1 and shows text2; clicking on text 2 hides text2 and shows text1

Question

I have Latin vocab terms that I give the player the option to click upon, revealing the definition.

But first you must consider the (link-replace: "decem stipendia.")[ten military campaigns required before you are eligible to run for offices.]

What I would like is an ability to go back and forth: clicking on Latin term shows the English definition and hides the Latin term. Clicking on the English definition shows the Latin term and hides the English definition. I would also like this to be able to be repeated as many times as the player likes.

I'm guessing hidden and named hooks can help here, but even so  I'm not sure if there is a really simple solution.

Answer 1

So after all these great suggestions, I fooled around a little with the code snippet from the manual that Greyelf provided in answer to my question about hiding named hooks. I have a solution now, and while it really disrupts the flow of the text from the design standpoint, it does what I want.

You have the {|cognomenEng)[(link: "nickname")[(show: ?cognomenLat)]] 
|cognomenLat)[(link: "cognomen")[(show: ?cognomenEng)]]
(link:"Cognomen")[(show: ?cognomenEng)]} Barbatus

This does the trick, allowing indefinite numbers of clicks to go back and forth between English and Latin.

Comments? Problems I'm not seeing?

Comments

This is a flawed solution.  If you open your development tools, you'll notice that your recursion is filling up the DOM with junk elements.  This means that at some point, you'll experience slowdown / crashing.

Copied from my inspect view in Chrome:

Before clicking:
<tw-collapsed><tw-hook name="cognomeneng"></tw-hook><tw-hook name="cognomenlat"></tw-hook><tw-expression type="macro" name="link"></tw-expression><tw-hook><tw-link tabindex="0" data-raw="">Cognomen</tw-link></tw-hook></tw-collapsed>

After clicking several times:

<tw-collapsed><tw-hook name="cognomeneng"><tw-expression type="macro" name="link"></tw-expression><tw-hook><tw-expression type="macro" name="show"></tw-expression></tw-hook><tw-expression type="macro" name="link"></tw-expression><tw-hook><tw-expression type="macro" name="show"></tw-expression></tw-hook><tw-expression type="macro" name="link"></tw-expression><tw-hook><tw-expression type="macro" name="show"></tw-expression></tw-hook><tw-expression type="macro" name="link"></tw-expression><tw-hook><tw-expression type="macro" name="show"></tw-expression></tw-hook><tw-expression type="macro" name="link"></tw-expression><tw-hook><tw-expression type="macro" name="show"></tw-expression></tw-hook><tw-expression type="macro" name="link"></tw-expression><tw-hook><tw-expression type="macro" name="show"></tw-expression></tw-hook><tw-expression type="macro" name="link"></tw-expression><tw-hook><tw-expression type="macro" name="show"></tw-expression></tw-hook><tw-expression type="macro" name="link"></tw-expression><tw-hook><tw-expression type="macro" name="show"></tw-expression></tw-hook><tw-expression type="macro" name="link"></tw-expression><tw-hook><tw-expression type="macro" name="show"></tw-expression></tw-hook><tw-expression type="macro" name="link"></tw-expression><tw-hook><tw-expression type="macro" name="show"></tw-expression></tw-hook><tw-expression type="macro" name="link"></tw-expression><tw-hook><tw-expression type="macro" name="show"></tw-expression></tw-hook><tw-expression type="macro" name="link"></tw-expression><tw-hook><tw-expression type="macro" name="show"></tw-expression></tw-hook><tw-expression type="macro" name="link"></tw-expression><tw-hook><tw-expression type="macro" name="show"></tw-expression></tw-hook><tw-expression type="macro" name="link"></tw-expression><tw-hook><tw-expression type="macro" name="show"></tw-expression></tw-hook><tw-expression type="macro" name="link"></tw-expression><tw-hook><tw-expression type="macro" name="show"></tw-expression></tw-hook><tw-expression type="macro" name="link"></tw-expression><tw-hook>.... etc for very, very many lines

Recursion should generally be controlled.

Don't get me wrong, this will work to a point, but I would personally recommend my solution (admittedly more work) over this one to avoid potential issues, especially if you plan to have multiple links like these in a given passage, and expect them to be clicked back and forth a handful of times each.

Answer 2

I've tried something with a hidden hook and a click-replace, and I think it might be doing what you want it to do? 

{
Think about this latin word.
[english definition.](hook|
(click: "latin word.")[(replace: "latin word.")[(show: ?hook)(click-replace: ?hook)[latin word.]]]
}

I'm still learning how to use Harlowe, so do feel free to tell me if it works or if any simpler, more efficient way around this exists :)

Comments

Thanks for the suggestion faneet! I tried it out and it is a start, but does not fully work. In your code, I can click the first term to get the second, and the second to get back to the first, but then the first term can no longer be clicked. What I'd like is any time Text1 is clicked on, Text2 appears and vice versa, for as long as the player wants to keep clicking in Text1 or Text2.

Thanks so much for the effort, though; much appreciated!

Answer 3

Is this what you are looking for? It's kind of simplistic but you can go back and forth between words. There are two passages for each word and a link to the next word.

Passage name: Latin corpus

This is your word in Latin: [[corpus|English body]]

[[Next word|Latin deus]]

Passage name: English body

This is your word in English: [[body|Latin corpus]]

[[Next word|Latin deus]]

Passage name: Latin deus

This is your word in Latin: [[deus|English god]]

Passage name: English god

This is your word in English: [[god|Latin deus]]

So on and so forth...

Comments

Thanks, Danny; I truly appreciate the effort. This won't get the effect right because it jumps to another passage. Right now I have words in context that the player can click on to get the English translation in context. 

So, for example, the game passage looks like this:

Scion of an aristocratic Roman family, you are Marcus Aemilius Barbatus. That last part, Barbatus, refers to the exceptionally thick and full beard one of your ancestors had, and now the cognomen is used to distinguish your branch of the Aemilius family. The res publica, set on course by the good men who ousted that most despicable of kings, Tarquinius Superbus, has thrived for several centuries and your family has played an important role in leading the Republic.

And if the player clicks on cognomen  or res publica the bold Latin text is replaced within the passage by it's English translation. So click on both of those words in game and the text now looks like this:

Scion of an aristocratic Roman family, you are Marcus Aemilius Barbatus. That last part, Barbatus, refers to the exceptionally thick and full beard one of your ancestors had, and now the nickname is used to distinguish your branch of the Aemilius family. The Republic, set on course by the good men who ousted that most despicable of kings, Tarquinius Superbus, has thrived for several centuries and your family has played an important role in leading the Republic.

What I'd like is for players to click on the English terms ("nickname" and "Republic" in these cases) to get back to their corresponding text "cognomen"  and "res publica". And then, if they really wanted to, they could click on the Latin terms again to get to the English.

Again, though, I really appreciate your help.

 

 

Answer 4

Here's an example that uses some passage recursion and an array to generate the desired output:

::Passage
(set: $word1 to (array: 'decem stipendia', 'ten military campaigns required before you are eligible to run for offices'))
(set: $wordState to 0)

But first you must consider the |change>[(print: $word1's 1st)].

|code>[{(display: 'wordLink')}]

::wordLink
(click: ?change)[
	(set: $wordState to it + 1)
	(set: _change to ($wordState % 2) + 1)
	(replace: ?change)[(print: $word1's (_change))]
	(replace: ?code)[(display: 'wordLink')]
]

Note that this code is written in Twee notation: the double colon (::) denotes a passage.

Each word appearing in the same passage will need it's own array and state variable, and it's own little (display:) system, unfortunately.  I can't think of a better way right now, but someone else will likely think of something better.