CSS: Fill in the Blank Game

I needed a game for my book release party. So I thought a fill-in-the-blank game like it would be a nice way to let people participate.

 
What you'll need:
a story/text to tweak
some WA code and CSS
     

BBCode

(Click on the spoiler buttons to reveal the examples. I left the spoilers there so you can copy/paste the example and have it print nice. A closed spoiler button doesn't print in my example. So you can print one section at a time.)  
Show spoiler

Word List

  1 (noun)
2 (noun)
 
[spoiler] [h2]Word List[/h2]
 
[section:madlib-list]1 (noun)[/section][br]
 
[section:madlib-list]2 (noun)[/section][br]
 
[/spoiler]
Show spoiler
 

The Story

A small 1 (noun) in Nonoku (Nono District) north of Okayama City in Okayama Prefecture, nestled in the top third of the 2 (noun) Valley.
 
[spoiler]
 
[h2]The Story[/h2]
 
[container:HLBox madlib-box]
A small [section:madlib]1 (noun)[/section] in Nonoku (Nono District) north of Okayama City in Okayama Prefecture, nestled in the top third of the [section:madlib]2 (noun)[/section] Valley.
[/container]
 
[/spoiler]
 
     

CSS

 

For the Word List and Fill in the Blank Sections

.madlib {
border-bottom: 2px solid #bbbbbb;
font-weight: bold;
padding-left: 5px;
padding-right: 20em;
color:#bbbbbb99;
font-size: .5em;
white-space: nowrap; }   .madlib-list {
display: inline-block;
border-bottom: 2px solid #bbbbbb;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
padding-top: 1em;
color:#bbbbbb99;
font-size: .5em;
width: 30em; }   .madlib-box, .madlib-box dd {
line-height: 2em;
}
.madlib - the word to be filled in on the story page

.madlib-list - the word in the list that will be transferred into the story

.HLbox - my generic CSS box style. I will let you define yours or take this out.

.madlib-box - the style of the box that holds the story.

.madlib-box dd - on one of my stories, I used the value/phrase WA code and needed the same formatting for that.

  I will leave looking up the various attributes to you.


   

CSS to Print the Page Nicely

For printing, I hid anything that wasn't needed. I would like NOT to have to do this, as I feel it's questionable to WA's policies. But currently there's not an easy way to print a page and make it look nice. See image below for how a page looks when printed. (I've tried in different browsers, in incognito mode so there aren't plugins, and from my ipad.)
  As an alternative, you can also simply select the part you want to print and it will print nicely.
  This code should go in the page only CSS.   You may need to add or subtract elements as needed to only display what you need printed. And remember to change the Font Awesome to a real (at) symbol for your code, since WA uses them for the article mention system. For Sage+ the following code is fine. But GM and lower you will need to be sure you are in the bounds of the CSS rules for your guild level, by adding .user-css or the like and verifying you aren't hiding elements you shouldn't.  
 media print {
.header-bar-home, .row.cover, .world-editor-bar, .form-inline.search-form, .world-navigation-sidebar, .world-navigation-palette-trigger, .user-css-whitelabel, #super-image-button-container, #super-button-container, .backtoworld, .article-horizontal-navigation, .article-footer, #super-article-button-container, #backtotop, .article-social-media, .user-css-extended, .btn, .copyright-attribution, .cover-credits, .row hr, .article-content-bottom { display: none !important }   .no-print { display: none }   h1 { font-size: 20pt !important }
}
media print - CSS specifically for printing

.header-bar-home, .row.cover, .world-editor-bar, (etc.) - These are the parts of the page I needed to hide from being printed. I had to use !important on most of them

.no-print - my own class that holds items not to be printed. (The directions in the example game page. For reading the code simplicity, it made sense to me to separate out the WA classes and my own.)

h1 - To get things to fit on the page, I resized the H1 (page title) element.

 
 

Usage Tips

On my page I put instructions for how to print the game. It needs to be printed one part at a time (word list, then story) if a single player plays the game. Otherwise it's not as effective. For multiple players, you can just print the story page.
 

Notes

Perhaps a character sheet might have been a better way to do this. But that would have taken me longer. I was crunched for time. I'd love to try to figure out if we can get a form to fill out live on the site. (But that might require java-script. Not everyone can use that.) I'll let it keep tumbling in my mind and see if I find a way to do it. Or poke Tillerz to see if he has any brilliant insights.

For Grandmasters +

Grandmaster Icon


Containers and Sections are for guild members Grandmaster and above. If you're not subscribed at that level, you can upgrade your membership on your account page.


(Grandmaster icon property of World Anvil.)

CSS Reference


If you'd like to learn more about CSS, check out FreeCodeCamp and w3schools' CSS Reference.
 
The WA Codex is a good place to start learning about how to play in WA.
 
WA's discord #guild-css-help channel is also great. I hang out there just to learn from what people ask about.

 

Updates:

  • 5/14/2021 - Added a screenshot of what printing looks like. Also submitted bug for printing. *Hopefully* we can get the ugly printing issue resolved so my (at)media call isn't required.


  • Cover image: Hacks and Help Cover by krzysztof-m

    Comments

    Please Login in order to comment!
    14 May, 2021 04:35

    I'll have to give this a try with some of my friends! Is there a way to change the color of prompts in the words list? I'm not near a printer at the moment, but they display as a light gray to me and might be hard to see against a white page.   As an aside, I think it'd be totally rad to have a version of madlibs we could play with other members of the site live - maybe a monthly game where the most humorous results get ranked by the community.

    14 May, 2021 14:30

    Yes. the .madlib and .madlib-list color attribute.   Though, I set mine to a light grey so it the story/article would stand out more than the fill in the blank bits. I didn't have troubles printing it. (I'm also going to modify my printing bit, because one can select the area to print and we don't have to go through the (at) media rigamarole to print a nice page.)   Yeah, an online playable version would be much fun. I'd have to tinker and probably poke someone to help me figure out editable RPG sheets, because I'm not sure exactly how it would work.

    Author of Rise: Liminal Chronicles |
    14 May, 2021 14:38

    Actually, I'm going to put in a bug report on the printing of articles. It should be easy to print articles. But they turn up ugly without doing the questionable (at) media call.

    Author of Rise: Liminal Chronicles |
    Powered by World Anvil