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 +


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
    Powered by World Anvil