Need help writing in markupese

I find my game could benefit from modern editing tools.

I have core rules (A) and optional rules (1,2,3).
At the moment, the rules document is in this form :
"Optional rules"

What I would like is the user to be able to tick multiple checkboxes in the "Optional rules" page and see the changes in the text of the main rules. Like this (example with checkbox 2 but various rules could be added or ignored) :
"Optional rules"
2 *ticked*

I know I will have to face pagination problems as a consequence, but I'll worry about that later...

For now I am wondering how to do this.
I think the following keywords are close to what I want : change style when checkbox is not ticked ; display:none.

I would be glad with code, but obviously I need direction first.


  • Are you writing this in HTML?
    You're going to need some Javascript. I recommend the jQuery library.

    (BTW, I'm available for web development work; this is what I do when I'm not writing or designing games.)

  • Hello, and thank you for your kind reply AsIf : adding JQuery as a keyword yields good results for a first approach. Like :


    With the above code, I see I can have multiple checkboxes identified, so this part works for me. I know the syntax is incorrect but is there a way to trigger a multiple event, like :
    $("div#div_id1").toggle() AND ("div#div_id2").toggle() ;
    If the idea works, here is how I think I will implement it :
    I will plant tag 3 divs with the code shown first, and try to toggle them "by hand".
    I will add 3 checkboxes and try to check/uncheck them with a visual tick as verification output.
    I will finally add an Apply button to check the state of the boxes, with a readable output for verification.

    If I show too much confusion, just let me know, and I will look for a JQuery forum.
  • edited November 2017
    This is roughly the simplest way to do this, in high-level terms:
    1) Give each of your optional rules an unique name that works as a CSS class name. List all of these classes in your CSS file, and give them the attribute "display: none;" or something similar so they are all hidden by default.
    2) Make a HTML file of your rules-text where all rules are in their final relative positions - the places where you want them to show up when they are visible. If you need some text to jump around depending on the options checked, then you'll need a more involved technique, but we can talk about that separately if this is the case.
    3) Stylize your HTML markup so that every paragraph (or other text element) that belongs in some optional rule has the appropriate assigned CSS class. It's possible to deal with overlapping classes as well, if you have text bits that should show up in multiple optional rules, but let's discuss that separately if it is the case.
    4) Put your checkboxes into the HTML file, wherever you want them to show up.
    5) Instruct each checkbox to run a javascript snippet when it gets checked. There are many ways to handle the details, but what you want the code snippet to do is to toggle the CSS style rule for the class associated with that checkbox. So when you toggle the "Optional Combat Rules" checkbox, the CSS class "optionalcombatrules" gets toggled to "display: block" or whatever.
    6) Remember to add a second javascript snippet for when the box gets untoggled. You'll probably want to write this as a little logic tree: the code checks first to see if the box just got toggled or untoggled, and then it changes the class visibility to the appropriate direction.

    Did you understand that in general terms? Are the HTML and CSS parts of this plan easy, and the javascript is the only part you're struggling with? (I'm asking to get a better handle of your overall web coding skill level.)

    If the above seems difficult, it might not be a bad idea to hire AsIf to help you out. I can't see something simple like this taking much coding time at all - I could do this in an hour, and 45 minutes of that would be me freshening up on javascript syntax so I could reference the checkbox correctly. Then again, learning is both fun and useful, so if you're entertained by the minutiae of javascripting, this is definitely the sort of little project that's good for learning stuff.
  • ^^^ What he said.
  • edited November 2017
    OK, I already ruled out the optional 2 and 3 as fancy.
    I can write my main document in a way so the optional rules are blocks.
    Most of the time there will be just one block of text, but not always, so what your answer tells me is : I am aiming at the class level, not at each individual div per ID.
    I understand it in general terms. It is really like using a text editor.

    2 is like changing a bulb : it requires method and minutia but it's only tagging.
    1, 3 and 4 are more like changing bulbs in car lights : I know I can do it, I also know by experience it will take more time the first time I do it. But I am willing to learn more about CSS and class, I know it will be useful for later. So yes, I will take it.
    5 and 6 are more problematic because of this part : I have no idea how to alter the CSS display value for a whole class. In theory its is very clear, but I haven't found the right keywords yet.

    So, I will work on the first steps, and then, whether I am successful or not, I will be better equipped to understand how 5 and 6 are dealt with.

    Thank you guys for these precious directions ! Now it's time for me to try out.
  • edited December 2017
    It's possible to create a simple generic script without using id attributes.

    1. Create a CSS class called 'hidden' that includes display: none.
    2. Create a script that, when called, takes the component's ([input type="checkbox"]) parent ([div]) and then do a querySelectorAll for all paragraphs ([p]) within that parent. If the checkbox is ticked, then remove the CSS "hidden" from all paragraphs ([p]), otherwise add it.
    3. Add the script to each check box. When clicked, send it's own element (with this) as a parameter, and execute 2).
    4. If the optional rules contains multiple paragraphs, it's smarter to add all of them in a [div] (blue dashed box in the image below) and then just toggle the CSS class "hidden" for that div. Otherwise you need to add the "hidden" CSS class to all optional paragraphs.
    5. You don't even need the CSS class. All HTML elements got a property called hidden that you can toggle with javascript, but if you want a fancy animation for showing/hiding the optional rule then use a CSS class.

    I estimate that this can be accomplished with less than 10 lines of vanilla javascript code without having to use a framework.

    Click to enlargeIf you're going to use a framework, at least use one that can create custom elements, such as Vue, X-tag, Angular 2, or Polymer 2 (order from simplest to most complex). It will keep your HTML code clean, and save you time when building your HTML page, but it will take a couple of hours (days, if unexperienced) to set up.
    [p]Game text[/p]
    [p]Game text[/p]
    |p]Game text[/p]

    [p]Game text[/p]
    [p]Game text[/p]
    [p]Game text[/p]
  • edited November 2017
    OK, it's like when you ask directions and you get two possible itineraries. I am confused.
    What I will do : I will try to hack my way through what Rickard proposes. That will be how I practice. On another front, I will follow the steps provided by Eero and Tod. That will be me learning.
    At some point, one will profit to the other.
  • Both suggestions are doing the same thing in the same way, but mine is more generic. It's like comparing a specific example with an abstract example that talks about the same thing.
  • edited November 2017
    Some useful links:

    The checked property
    Use this instead of document.getElementById in the example, if sending in this as a parameter to your javascript function.

    Use the example below, and change if(this.checked){myFunction()} to myFunction(this) and the function declaration function myFunction() to function myFunction(checkboxElement). Now, use toLowerCase() to toggle the text (Donald) to uppercase and lowercase, using checkboxElement.checked.

    Parents in HTML and javascript

    this and scope is essential to learn and understand in all programming languages.

    The hidden property

    A more versatile method than getElementById.

  • edited November 2017
    Hey, thank you Rickard ! this is very detailed !
    Thanks to your indications I now understand how to declare and select a class. And how to set display value to "none". I did it with BlueF* and it is nothing complicated. It's really like using styles in a text editor. Cue the T in HTML and the S in CSS :blush:

    edited again : I see the scripts are included in the pages. Gee, this is a security issue if I leave my document open to everyone for modification.

    Also, I think I understand the use for each snippet and find the demos super clear. I still have to practice to combine them. Then I will have a better grasp of points 5 and 6 I now realize you focused upon.
  • I'm a little more old-school; and my own modular game has a LOT of toggles, options, and an overarching 'tone' that makes many of the former available/illegal.
    So I've already decided to do it with a database and custom-assembly of the final output for each user (technically, for each defined "game type").
    * So they get a big 'worksheet' whose first control is a radio button to toggle the primary tone.
    * That toggle enables and disables dependent toggles (radio buttons) and options (check boxes).
    * Many of the options, in turn, allow the user to set a (positive integer) value for the maximum Starting Experience that can be spent on each instance of a given 'rule' (Attribute, Ability, Defect, etc). No value means no maximum.
    * They make their selections and give the game type a name. It is saved.
    * When they want a quick reference guide for distribution in-game or pre-play, the game type view has a "generate PDF" or similar button that builds the book (likely as the output of a db query).
    * When a player chooses that game type (or a game that forces that game type) in the character creator, all and only the rules in play can be seen and bought.

    I suppose one could do that with static-text snippets, divs, etc... but I prefer the scalability of a db with maybe 1 or 2 queries/stored procedures and on-demand output generator.

    Extra bonus goal:
    * The game-type creator can choose a 'style sheet' for the game-type rules when they instantiate it into a specific Event... and the rules will thus be 'colorful' for the genre, tone, style, etc that naturally emerges from the choice of rules and the genre conventions of the final game. Little touches like display fonts changing, primary color sets being 'light' or 'dark', and so forth... but ALL of it handled by style manipulation somewhere post-query, pre-final-output (In DITA terms, at the FO stage).

    No biggie, right? :wink:
  • edited November 2017
    Seems really meta cool ! I picture your rules framework as a tech-tree (not limited to 2D) for character (because of your examples) and system building.

    My intent is to make a light game with very little framing. These optional rules are not much (3 pages), but they are 20-30, a dozen of them with a setup and a payoff (2 perfect occasions for players to forget about them), and it's perfectly viable to play with half of them. So if I can make managing these procedures easier for the players AND learn a bit of java...

    On the other hand I think the themes (police, illustrations, etc.) that will work for flavour aren't that many, so "handcrafting" each one of them is a must for me.
  • edited December 2017
    With a few attempts I see I don't know precisely the arguments I have to pass to the function.
    I found some code using JQuery. How safe and efficient would that be ?
  • As it happens, you don't really need much in the way of safety or efficiency for this kind of project [grin]. Not that I recommend using any code you don't understand yourself, but JQuery itself doesn't harbour inimical exploits (that I know of, at least), and your hypertext is unlikely to be so heavy on the microprocessor that the efficiency of your code would matter.

    In practice this means that if it seems that you're getting what you need with a particular script, then it is likely to be a fit solution to your problem - the superficial result is all that matters. There's relatively little technological room for secret pitfalls in javascript coding. (Managing to implement something that's too inefficient to be practical is one of the big ones, but your described project simply isn't anywhere near processing-heavy enough for that to be a concern.)
  • Thanks. I am already implementing it with a toggle function.
Sign In or Register to comment.