Howdy, Stranger!

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

How to create a spoiler button?

So, to begin the game, I have a section for Content Warning in case people would like to skip certain scenes. In the content warning section, I'd like to have a spoiler tag-esque button that shows text only when pressed. I've tried importing some macros, but I seem to be pretty inept at that (the last time I tried, it really messed up Twine something fierce. Must've done something really wrong.) I know the solution is super easy, I'm just really new to all of this. P: Thanks!

Comments

  • The following is a very simple example of how to create a macro to do what you asked, it has very little error checking and the javascript and CSS has not been minified so that you can see how it works.

    Add the following to a Script Passage:

    version.extensions['spoilerMacro'] = {
    major:1, minor:0, revision:0
    };
    macros['spoiler'] = {
    handler: function(place, macroName, params, parser) {
    var spoiler = insertElement(place,"span",null,"spoiler");
    var link = insertElement(spoiler,"span",null,"spoiler-link","Spoiler");
    insertElement(spoiler,"span",null,"spoiler-text hidden",params);
    link.onclick = function(event){
    event = event || window.event;
    var text = event.target.parentNode.getElementsByTagName('span')[1];
    text.classList.toggle("hidden");
    };
    },
    init: function() { },
    };
    Add the following to a Stylesheet Passage:

    .hidden {
    display: none;
    }
    .spoiler {
    }
    .spoiler-link {
    cursor: pointer;
    background: blue;
    padding: 5px;
    }
    .spoiler-text {
    }
    .spoiler-text:before {
    content: "\a";
    white-space: pre;
    }
    To use the macro add the following to your story:

    <<spoiler "This is where you place the text that will be hidden until the user clicks on the Spoiler button">>
    notes:
    1.  You can use the different CSS selectors in the example above to style the generated HTML anyway you like.

    2. The HTML code created by the macro looks like the following: (without the line feeds between each span tag)

    <span class="spoiler">
    <span class="spoiler-link">Spoiler</span>
    <span class="spoiler-text">This is where you place the text that will be hidden until the user clicks on the Spoiler button</span>
    </span>
Sign In or Register to comment.