Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Modifying Jonah to not display links after click

Hi everyone,

Another question I had regarding story format - I like how Jonah flows and if the player likes, they can scroll up and read the whole story. I figured out how to hide the titles of passages to make the text flow better, but I would also like to get ride of the links [[choices]] after the player has made a choice. This would help make the story read, well, more like a story with the options removed except for the current passage ones.

How can this be done?


  • I added a line explaining how to do this to the wiki page fairly recently.
  • Sorry to revive this thread, but my question is related to this. 

    Is there a way in Jonah to either remove the choices that weren't selected?  I know I can achieve this by setting .disabled { display:none; } and having the .passage.title show, but as my choices tend to be quite long it would be helpful to not show the passage title and just show the choice (which would mean I could have shorter passage titles which is helpful for organisation purposes).

    Failing that, I have used .disabled { display:none; } for the time being, but I'm getting a lot of white space where the choices used to be?  I'm not sure that should be happening as from what I understood display:none should remove the text entirely, meaning no whitespace? 
  • Twine insert a break after all code lines (at least that I've noticed).

    You can probably avoid this happening by using a <nobr> tag in you passage and manually adding your line returns using \ where needed.
  • Thanks, but I've already tried tagging the passage as nobr, and also with manual nobr tags and breaks, the whitespace still persists.  :)
  • Add a backslash '\' to the end of the lines you wish to remove the trailing line-feeds from. This can be done to either text or macros.


    :: Some Passage
    I want the next line of text to appear on the same line as this text.\
    I made it happen by ending the previous line with a backslash.

    The following macros will not add extra lines to the generated output because of the backslashes. See the \
    <<set $var to 1>>\
    <<if $var is 1>>continuous <<endif>>\
  • Thanks, but that's not what I'm after.  The story is in Jonah format, so I still want my choices to be on multiple lines rather than all bunched up on one line...but after the choice has been made, there is a three line gap in the story.  From what I've read setting the .disabled css to display;none; should hide the whitespace but it doesn't?
  • Sorry I misunderstood which line-feeds you were talking about, the following should help with your problem.

    Your code probably looks something like the following, with each choice on its own line based on your "I still want my choices to be on multiple lines rather than all bunched up on one line" comment.
    (note: Im using TWEE notation)

    :: Start
    Select one of the three choices below.

    <<choice [[choice 1|Next Passage]]>>
    <<choice [[choice 2|Next Passage]]>>
    <<choice [[choice 3|Next Passage]]>>

    :: Next Passage
    Text for the Next Passage.

    :: Stylesheet [stylesheet]
    .disabled { display:none; }
    The above Start passage produces the following HTML, which you cans see yourself using the "Inspect Element" feature built into both of Firefox and Chrome's Debugger.
    (note: The <br> tags are the line-feeds and the <a> tags are the choice links.)

    Select one of the three choices below.
    <a class="internalLink choice">choice 1</a>
    <a class="internalLink choice">choice 2</a>
    <a class="internalLink choice">choice 3</a>
    When you select one of the links the HTML changes to the following:

    Select one of the three choices below.
    <span class="disabled">choice 1</span>
    <span class="disabled">choice 2</span>
    <span class="disabled">choice 3</span>
    As you can see the choice <a> tags have been replaced with <span> tags which are marked as disabled and the .disabled CSS rule in your stylesheet will make them disapear but the <br> tags between each of the disabled choices are unchanged and it is these <br> tags that you are seeing.

    Adding the following CSS rule to your stylesheet passage will hide any <br> tags that appear directly after a disabled <span> tag.
    span.disabled + br { display:none; }
    I hope that helps.
  • Thanks, that seems to do the trick in combination with .disabled { display:none; } :)  Also, the explanation was really helpful too!  Much appreciated!
  • edited October 2016
    Going to story settings and disabling undo will help in disabling links in previous passages.(Jonah)
Sign In or Register to comment.