Was bored reading my sailing 101 book and thought it’d be easier to learn the material if I could set up a quiz on the go. After much duckduckgoing, came up with a quick-and-dirty solution to hide the answers until you hover (on desktop) or activate (on mobile). The styling I’m using is pretty ugly, but you can switch up the colors; just be sure that the background and hide-me colors are the same.
<html>
<head>
<style>
body {
background: #000000;
}
.hide-me {
color: #000000;
border-bottom: 3px dotted blue;
}
.hide-me:hover {
color: yellow;
background: green;
}
p {
color: #c0c0c0;
font-family:"Verdana","Arial","sans-serif";
font-size: 20pt;
}
</style>
</head>
<body>
<p>When turning the boat toward the wind, the sails should be <a href="#" class="hide-me">trimmed</a> in</p>
<p>When turning the boat away from the wind, the sails should be <a href="#" class="hide-me">eased</a> out</p>
<p>"Fluttering" sails are said to be <a href="#" class="hide-me">luffing</a></p>
...
</body>
</head>
Here it is in its crufty action:
When turning the boat toward the wind, the sails should be in
When turning the boat away from the wind, the sails should be out
"Fluttering" sails are said to be
…