1

wip

This is a demonstration of a system for making Choose Your Own Adventure (CYOA) works that can be played in browser on a single page, using only basic HTML and CSS (and no frames, unless you really want to.)

To learn more about making a CYOA in HTML/CSS, check out this tutorial!

Or, if you just want to play the game, click here to start.

2

?!?

Wait a minute! How did we get here?, you might be thinking, as you find yourself on a sudden new page. Huh! That's weird! (Okay, you are probably not thinking that, but let's pretend for a moment.)

The link didn't take you to a new page: it took you to a new part of the page, previously hidden by some carefully designed <div>s.

Now, you're on a new "page" of the CYOA narrative being written. (Well, it's not much of a narrative at this point, but you get the idea, I hope.)

Go to page 3 for a better explanation, or jump ahead to page 4 to skip to the code.

3

How It Works

This story is made up of a bunch of individual divs, with the "id" attribute used to let hyperlinks jump to specific sections.

You can actually see these ids in the address bar of your browser. Right now, for example, you should see the URL ends in '#3', because '3' is the id of this particular section.

By putting each 'page' of the story in a div of fixed size, and putting all the pages in a div that only shows one fixed-size section at a time, we can create the illusion of changing the content on the page, and traverse the pages via hyperlinks.

(You can achieve a similar effect by putting a metric crapton of <br> tags between page sections and putting all that in a fixed-size box that hides overflow, but this system looks a little more elegant.)

If you'd like to know more about the code, continue to page 4. Otherwise, check out the example, "The Tunnel and the Tomb", starting on page 6. (Minor heads-up for, uh, near-drowning and a fair number of bad endings.)

4

The Code

The code used to build this page is very simple. (Well, this page also uses a teeny tiny bit of my site skin for this sections' font and the page's overall background, but otherwise it's all just one tiny file.)

The class story-container is used to create the 'window' that the whole story is viewed through -- you'll see it as the black-outlined box this text appears in. It uses overflow: hidden to conceal any pages other than the one currently scrolled to.

The class page contains the contents of the page itself. It has the exact same height and width as story-container, to ensure that the whole page and only the current page is visible inside the box. It also uses overflow: auto to allow the individual page to scroll if there's too much text to fit inside the story box. (This ideally should not happen, though.)

The class page-number is pretty self-explanatory. It uses position: absolute to appear in a consistent position at the top of the page (page uses position: relative to keep it inside the page boundaries.)

The class page-content contains the body text of the page itself, such as the paragraph you're reading right now.

You can check out some more code on page 5, or hop over to the example minigame on page 6.

5

Example In Action

Take a look at the source code of this page and see what it looks like!

You can also see the CSS stylesheet here, which has both the basic style template, and a variation used for an example game which you can play here! (Note: it does have several death game overs.)

1

The Tunnel And The Tomb


You're an adventurer in search of treasure, deep in the bowels of the forgotten alien temple of GYTHRFTHSTZ. The expedition has been long and grueling, but at long last, you've reached a tiny gilded antechamber, seemingly undisturbed.

On an altar at its center lies a silvery statue of an alien figure, barely the height of your little finger.

Do you attempt to take it?

Or do you investigate first?

Note: keyboard users and screenreaders beware! Much like thumbing through a CYOA book, tab-navigating beyond the limits of a page may lead to unwanted spoilers! You Have Been Warned!

2

You step forward, relishing the sweet flavor of success. You've spent countless hours navigating these deadly halls, and now, at last, its treasures are yours to discover.

As you step near to the altar, through, a floor tile clicks underfoot, and a steely rattle sounds from above. A trap!

But what kind? There's no time to check. You'll have to trust your reflexes and your gut to keep you alive.

3

You jump back, just in time for an iron cage to drop down around the altar, right where you were standing. You're alive (for now), but the statue may be out of your reach.

With cautious tread, you return towards the cage. A long iron chain leads up into the shadowed cathedral-like ceiling, connected to some unknown source in the darkness above you. The cage itself is large enough you don't think anything else could fit up there, at least, so hopefully that's the last thing to fall on your head today.

The cage itself is of small enough radius and wide enough spacing that you could, perhaps, just about reach inside and pull the statue back through the bars. Alternately, you could find some other means to extract the statue, without risking quite so much life or limb.

4

With some grunting and manouvering, you manage to stick your arm between the bars.

Your fingers brush the statue's surface, and you lean forward, trying to get a grip. However, your fumbling efforts only knock the statue on its side, where it rattles and rolls off the central niche of the altar. Something clicks.

A terrible sound, that click. You've learned too well by now what it means. A second later, you hear the grave stone thud of the single door behind you falling shut, and something cold begins to drip onto your head.

As you look up, a deluge of ice-cold water pours from the central ceiling where the cage had fallen from. You splutter and cough amid the spray.

Freeing yourself from the bars will take more time than you can afford. As you struggle, your vision darkens, and soon all you can see is bubbles, obscuring the shadows of that deadly, vaulted ceiling above.

YOU HAVE DIED.

(Would you like to try again?)

5

No worries! This looks like a job for your second favorite trick: creative use of your trusty ADVENTURER'S WHIP. (Your first favorite trick is breaking and entering.)

Sticking the handle through the bars, you flick the whip, and after a few tries, manage to knock the statue off the altar, where it rolls along the floor to edge of the cage. Easy as pie.

Or so you think, until you hear another terrible click.

Your body moves before you think. You...

6

With lightning-quick reflexes, you scurry backward through the door like a panicked crab, just in time for a stone slab to drop in front of you and seal the exit shut.

Behind it, you hear the telltale rush of water as the room begins to flood.

On one hand, you're not stuck in there with the water.

On the other, now you're stuck outside, without the statue.

YOU'VE ESCAPED... BUT AT WHAT COST?

(Or would you like to try again?)

7

With lightning-quick reflexes, you lunge to the side, snatching the statue from the floor as you go.

Behind you, a stone slab slams down over the exit with an ominous thud. Not a moment later, a gush of water falls from the central shaft of the ceiling, splattering you with icy spray.

The trap is obvious, and very nasty: the room will fill with water, and you'll drown.

Luckily, you're not incapacitated, so you might still have a chance to turn things around.

8

Right. If you wait for the room to fill up, you can tread water use the chain to pull yourself up to that hole in the ceiling. And if you're right (and goodness, you hope you are), if there's a way for the water to get in, then wherever the water comes from must also be a way out.

In practice, it actually takes a few minutes for the room to fill high enough that you can't stand on the ground anymore, and by then you're thoroughly chilled. If you don't drown, hypothermia might do you in anyway -- not exactly how you planned that to go.

Soon enough, though, you're floating, and the water carries you bobbing up toward the ceiling as you push against the current, shoving yourself toward the center. It's dark, and still freezing, but the stream of water through the shaft is narrow enough you've got room to breathe. You grip as tightly as you can to the chain, shimmying up it like a vine, but it's getting difficult to see.

You can only continue.

9

You grip the chain with all your might, and start shimmying up against the deluge.

It nearly threatens to freeze you as much as drown you, but there's just enough gap to breathe, and you make slow, struggling progress up the shaft.

Near the top, you encounter an issue: you don't see a mechanism you can operate. Your headlight, waterproof little soldier it is, illuminates only a grate above, and a metal plate slid recessed into the wall. You try and grab at it to pull it back out, maybe to cover the gap again, but it won't budge.

Below you, the room continues to flood ever higher. It's probably up to neck-level, by now.

Well, rats.

10

As you reach the top, your hands make contact with a rusted iron grate. You expect the worst for several seconds, fumbling around for a latch, before you realize it's already open -- the chain's gotten wedged in the gap, and only the rust has stopped it from swinging the rest of the way.

All it takes is a solid tug, and it swings free, giving you a gap just wide enough to shimmy through.

You're running out of air, though, and with one last inhale you hold your breath as the rooms finally fills.

As it fills, though, so does it reach some sort of equilibrium -- there's pressure, sure, but it's not whacking you in the face anymore. The chain makes a good reinforcer, too, and without too much issue, you shove yourself through that tiny trapdoor hole, and into the raging current above.

It's all you can do, then, to hold your breath, and keep swimming.

11

Your hands make contact with the rusted iron grate, and for several seconds you expect the worst, fumbling around for a latch, before you realize it's already open -- the chain's gotten wedged in the gap, and only the rust has stopped it from swinging the rest of the way.

All it takes is a solid tug, and it swings free, giving you a gap just wide enough to shimmy through.

You're running out of air, though, and with one last inhale you hold your breath as the rooms finally fills.

As it fills, though, so does it reach some sort of equilibrium -- there's pressure, sure, but it's not whacking you in the face anymore. The chain makes a good reinforcer, too, and without too much issue, you shove yourself through that tiny trapdoor hole, and into the raging current above.

It's all you can do, then, to hold your breath, and keep swimming.

12

You leap forward, landing on the altar, just in time for an iron cage to drop down around you with an ear-rattling thud.

Well. The good news is, you've got easy access to the statue! The bad news is, you're not sure how you're going to get out.

13

Thumbing through your adventure novel, you flip a page too far and find yourself on the dreaded PAGE THIRTEEN.

Page thirteen does not exist. It never has, and never will.

FOOL, says a hollow, terrible voice.
14

The cage bars are sturdy and unyielding, and the bars are too close together to admit anything wider than your arm.

You're not getting out without moving the cage itself, which you find is far too heavy to overturn.

You could still take the statue, but it seems a bit of a moot point.

15

Might as well.

You pick up the statue, and something clicks the moment it's lifted. Behind you, a stone slab slams shut over the exit, and a moment later, it begins to rain.

You look up, just in time to catch the deluge from above, straight to your face. The weight of the water shoves you down off the altar, onto the floor, where you gurgle and thrash, fighting to stand amid the rapid-rising flood.

Iron bars bruise your sides as the water fills your lungs, and you realize there's no escape.

YOU HAVE DIED.

(Would you like to try again?)

16

You freeze in place, and duck.

This proves to be a horrible, horrible mistake.

Something large, heavy, and probably solid metal bashes into the back of your downturned head like a lead pipe, and your face meets the floor with a stomach-flipping crunch. This is, in all likelihood, the last thing you ever hear.

YOU ARE DEAD.

(Now that was quick!)

(Would you like to try again?)

17

You decide to investigate the room a bit, first. You're an experienced treasure-hunter, and caution, not time, is of the essence.

Scrutinizing the floor and walls, you find what might be a hidden switch in the tiles around the altar. You'd better take care not to step on them, then.

There also looks to be something in the niche under the statue itself, but the base of the statue makes it difficult to see what. It could just be a natural part of the altar, or it could be a deadly trap. Like most booby-traps, there's no way to be sure.

18

Carefully stepping over the tiles around the altar, you lean onto the altar itself, up close and personal with the statue.

At this distance, you can see a depressed bit of stone under the statue, cut separate from the surface. Looks like another trap.

19

Throwing caution to the wind, you grab the statue, and instantly, something clicks.

More specifically, the niche under the statue clicks, and a faint clunk above you is your only warning before a rush of ice-cold water comes crashing down on your head, like the world's worst bucket-over-the-door prank.

It nearly knocks you to the ground, and as you splutter through the soaking stream, you see (and feel) a stone slab come slamming down in front of the only exit.

Well. Crap.

20

You've got this.

Fishing around in your pockets, you find a few things that could cover the niche (not counting your trusty whip, which you don't plan on parting with any time soon.)

Do you try...

... a carabiner?

... your flashlight?

... or a a piece of lead? (Why do you even have that?)

21

With impeccable precision and care, you set the carabiner onto the niche at the exact second you yank the statue off of it, and pray the carabiner's weight will be enough to hold.

The statue is heavier than you estimated, though, and you realize you only have a split second to move before whatever trap it triggers is released.

22

You bolt for the exit, but too late -- a stone slab nearly skins your nose off as it drops down in front of you, boxing you in.

A second later, a deluge of icy water comes pouring down from the center of the room, flooding the floor in an instant. You can't see the source, but you have no doubt it's meant to fill up the whole room, with you in it.

Luckily, you're not incapacitated, and your wits are still about you.

23

Luckily, you've got a headlamp, so your flashlight was only ever for backup.

With impeccable precision and care, you slide the flashlight onto the niche exactly as you whisk the statue off of it, leaving the weight of the flashlight to hold down the switch. You hold your breath.

Nothing changes

You lift the statue in the air, and take a cautious step back, avoiding the trapped tiles, until you're at the exit, and you duck out of the room with statue in hand.

You've got it. Now all that's left to do is get back out the way you came.

24

With as much care as you can muster, you place the hunk of lead onto the niche at exact moment you pull the statue away.

The difference in weight is palpable, though -- you've clearly overestimated the statue's heft. Maybe that won't matter, though, so long as the switch stays pressed?

You take a cautious step toward the door, ready to bolt or crouch at a moment's notice.

25

With your trusty ADVENTURER'S WHIP, you snap out and snag the statue, yanking it back toward your hand. It sails through the air, and you catch it with ease, only to hear a faint click from the altar.

You've triggered another trap, it seems, and now your survival is up to reflex once again.

26

With lightning-quick reflexes, you bolt for the door.

In a dash and skid across the floor that would make a major league baseball batter jealous, you slip out through the antechamber's sole exit just as a great stone slab comes slamming down onto the threshold, narrowly missing your basically everything.

The impact of untold tons of stone rattles your bones and shakes you to your core, but as you catch your breath, you realize you are, in fact, outside the room. So clearly you've done something right.

You stand, brushing archeological debris from your probably skinned knees, and weigh the silvery statue in your hand. It's the genuine article, alright.

You've got it. Now all that's left to do is get back out the way you came.

27

With lightning-quick reflexes, you take a step back into the doorway, out of range of any surprise traps. Or so you assume, until something scrapes above you...

... and about ten tons of solid stone slab come down on your head.

Your only consolation (though you lack to cognizance to appreciate it) is that your death is very quick.

YOU HAVE DIED.

(Would you like to try again?)

28

You freeze in place and duck low to the ground, in case anything tries coming out of the walls to take a swing at your head. (Arrow-traps, man.)

Nothing of the sort happens, but something huge and heavy slams into the ground behind you. When you uncurl enough to look around, you find the exit now blocked by solid stone.

And then, because your day needed to get worse, a gush of ice-cold water comes down from the vaulted ceiling, filling the center of the room. You have a nasty suspicion it's going to flood the place, with you still in it.

Time to consider your options.

29

You circle the room, searching for exits, but find none. The walls are seamless; no secret passages unveil themselves. The water reaches your knees, and then your waist, and soon you can barely do anything but stand on your tiptoes and try to keep your head above the surface.

Looks like you'll have to swim.

Or, you suppose you could keep looking?

30

You begin to tread water. The central shaft might have an exit -- the water must come from somewhere -- but there's no guarantee it'll be one you can traverse.

31

With limited options, you begin to swim toward the center of the room. The current fights you, but you fight back with your weakening, chilled, but utterly desperate strength. Ah, adrenaline.

Soon, you manage to position yourself under the waterfall, using the water level and the stone edges of the shaft to keep yourself bobbing in place. There's room enough to breathe, but it's a narrow fit, and your vision grows dim as you rise.

You can only continue.

32

Right. If you wait for the room to fill up, you can tread water and rise up to that hole in the ceiling. If you're right (and goodness, you hope you are), if there's a way for the water to get in, then wherever the water comes from must also be a way out.

It actually takes a few minutes for the room to fill high enough that you can't stand on the ground anymore, and by then you're thoroughly chilled. If you don't drown, hypothermia might do you in anyway -- not exactly how you planned that to go.

Soon enough, though, you're floating, and the water carries you bobbing up toward the ceiling as you push against the current, shoving yourself toward the center. It's dark, and still freezing, but the stream of water through the shaft is narrow enough you've got room to breathe. Your hands find some paltry friction on the slick stone walls, and you try to pull yourself up. It's getting difficult to see.

You can only continue.

33

Reaching above your head, the flow of water pushes back, until you find purchase on something solid and metal.

The good news: you've reached the top of the shaft.

The bad news: there's no open exit for you. The water flows in through a grating, holes so small they'll hardly admit your fist, let alone the rest of you, even if the water wasn't shoving you down like a grade-school bully over the toilet. (Now that you think about it, you're not sure where this water comes from-- ugh, let's not think of that.)

It's a dire choice, and you must choose quickly.

34

Dismantle isn't the right word, exactly.

Dismantle, you see, would imply taking the grate apart with in an orderly fashion, perhaps with a screwdriver or something.

This grate is several hundred years old, very rusty, and the most useful thing you have to hand right now is a flashlight. (Your not-actually-all-that-trusty hunk of lead is somewhere at the bottom of the room right now, and bouyancy is currently your top priority, so you're not diving for it.)

But it seems fortune smiles upon you, in a sarcastic sort of way, because after a few solid thwacks, a brittle corner gives way, and suddenly the whole grate comes swinging down, showering you in bits of rust, grime, and probably the remains of an ancient broken lock.

It's a struggle to ascend, but you brace yourself against the walls, pull with all your failing arm-strength, and heave yourself into the deluge.

The current takes you in an instant.

You can only keep swimming.

35

This is a terrible choice, you think to yourself, almost before you make it.

You dive under the surface, squinting into the murk and shadows. The water has doused any remaining light, and you can't see for beans. You follow along the walls by touch, but all your find is torch alcoves and the dead-end seams of what must be the door.

You try to swim back to the central shaft, but you're swimming blindly, and at some point you lose the walls and there is nothing but water, endless water in every direction.

The last thing you find before losing consciousness is the altar. The force of the water shoves you down, down, down, into the darkness...

YOU HAVE DIED.

(Would you like to try again?)

36

At first you can't even tell which way is up. Most people mean this metaphorically; you mean it quite literally. Water is everywhere. It is up and down and north and south and east and west, and you tumble and turn in the current, struggling to hold your breath until a sudden, solid rock bashes all the air out of you like a balloon run over by a truck.

You scrabble for purchase, and heave yourself onto solid, slippery stone with a drowning, hypothermic gasp.

Would you look at that! You're alive! And, as you frantically pat yourself down, you find the statue is, by some miracle of fluid dynamics, still in your pockets, unharmed.

Not too far away, barely half a mile by your reckoning, the smoke of the archeologist's campsite you've been calling home base all week rises in the sky -- to the north, you realize, because this must be a tributary of the river just south of where you've been.

With unsteady legs, you hop from the rock to the riverbank, and begin the trek back to camp.

37

SUCCESS

You have escaped the antechamber alive with the statue in hand, which will be sold over to the local GYTHRFTHSTZ museum for a handsome sum.

(And you didn't even almost drown!)

Give yourself a pat on the back!

Now, it's time to let this story come to an end.

(Or would you like to play again?)

38

SUCCESS

You have escaped the antechamber alive with the statue in hand, which will be sold over to the local GYTHRFTHSTZ museum for a handsome sum.

(You do come back to camp half-drowned and with the start of hypothermia, though, and worry your employer and all your colleagues sick. But hey, all's well that ends well, right?)

Give yourself a pat on the back!

Now, it's time to let this story come to an end.

(Or would you like to play again?)

39

That's All, Folks

Have fun making your own CYOA games!

Credits Note

The general code concept of this system/stylesheet was inspired by the clever workarounds of an AO3 user whose work I can no longer find. I would thank them for it if I knew how.