an anticipatory story can an interactive web page
Goals
For the learner to have an opportunity to . . .
- Assess how an adventure can be constructed from a fact base
- Examine resource components of an interactive web page
- Use a plain text editor to modify a story into their own
- Construct meaningful distractor replacement text
- Integrate images as visual clues in the narrative
Content
Ridge Rescue is an adventure based on a science principle.
- The story is about a hiker who has to send an antidote down a steep ridge. Solution: toss a pie tin, carrying the antidote, down the ridge.
- A pie tin tossed upside-down will glide. Bernoulli’s principle is the basis for the solution. Air moving faster over the bulky side has less pressure, so the pie tin lifts up as it spins.
- The original Frisbee was a pie tin from the Frisbie Pie Company (1871-1958) tossed upside-down by college students.
The story consists of a web page, images, code, and stylesheet.
- The story is in the document: Ridge_Rescue.html. As a web page, it will run in any browser.
- The Ridge_Rescue.html document contains comments to help make an anticipatory story of your own.
Edit the story or write your own using Ridge Rescue as a template.
- Open Ridge_Rescue.html in a plain text editor, such as BBEdit (Mac OS) or Notepad++ (Windows). Don’t use a word processor.
- Make changes in the Ridge_Rescue.html document and save it as a story of your own.
- If you have Ridge_Rescue.html open in a browser and in a text editor at the same time, when you save changes in the text editor, the browser view will update to show the changes.
<!--This is a comment; comments do not affect the story. This first part tells a browser that this is a web page and the language is English. Nothing to change here. -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- In the heading section, change the story's title, author, and description. -->
<title>Ridge Rescue</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="author" content="Roger Kenyon">
<meta name="description" content="Rescue from the ridge above.">
<!-- This part fetches the stylesheet of how things look. If you know a bit of CSS, you can change styles. It is located in the assets folder. -->
<style>@import url('./assets/iQuiz.css');</style>
<!-- This part starts the hypertext engine that makes the iQuiz interactive. RAMUS, by Felix Pleșoianu, https://notimetoplay.org/engines/ramus/ Nothing to change here. -->
<script src="./assets/Ramus.js"></script>
</head>
<body id="body">
<!-- The transcript is the story scroll. If a browser does not have Javascript enabled, this message will appear instead of the transcript. -->
<div role="log" id="transcript">Please enable Javascript to play.</div>
<!-- All sections are hidden at the beginning; that is, their display is none -->
<div style="display: none;">
<!-- A story has sections, like scenes. Name the first section "start" -->
<section id="start">
<!-- This story shows how many steps the player has taken. To begin, set the number of steps to zero using a #do command. -->
#do steps = 0;
<!-- For more information on commands, see https://notimetoplay.org/engines/ramus/scripting.html -->
<!-- The start section, like a cover page, has introductory text. <h5> is heading level 5. There are levels 1 to 6; 1 is largest. <br> is a break or line return -->
<h5>The cure, so fragile in its wrap, <br>soft leather worn and brown.<br><br>We cannot climb the ridge in time, <br>nor could you make it down.</h5>
<!-- The ridge graphic from the images folder is centered on the cover page. -->
<img src="./assets/images/ridge.svg" alt="ridge" class="centerCover" >
<!-- The text 'START' continues to the next section, named sec_00. -->
<h3><a rel="continue" href="#sec_00">START</a></h3>
<!-- A break at the end of a section puts space between the sections. -->
<br>
</section>
<!-- A section must have an id for links to work. The title is optional, but helps organize sections. -->
<section id="sec_00" title="Hiking">
<!-- The hiker image is imgSmL, which means small image on the left. -->
<img src="assets/images/hiking.svg" alt="hiker" class="imgSmL">
<!-- <p class="initial"> means the paragraph starts with a red letter for visual appeal. -->
<p class="initial">Hiking a ridge through August Forest, you happen upon a campsite. There is a fire-pit with silvery ash. In it, a nail as if from a horse cart. Nearby is a table covered with a cloth, secured with string. A pie is on the table. Pumpkin, it seems.
<!-- rel="replace" says, when clicked by the user, replace this link with what is in the article below called "sec_00verse" -->
<a rel="replace" href="#sec_00verse">A plea for help rises from below.</a></p>
<p>
<!-- In this paragraph (between the <p> and </p> tags), there are three links. Two are distractors. The third link says to continue to the next section. -->
<a rel="replace" href="#opt_00A">Empty the satchel of its contents?</a>
<a rel="continue" href="#sec_01"> Flip the pumpkin pie onto the table cloth?</a>
<a rel="replace" href="#opt_00B"> Wind up and pitch the pouch?</a>
</p>
<br>
</section>
<!-- Articles contain text that replaces what is a selected link. This first one is a short verse. -->
<article id="sec_00verse">
<p class="say">My lady’s allergic to bee stings,<br>
but now she has been stung.<br>
Our gear is near the table,<br>
or so it was when flung.<br>
<p class="say">We left our goods at the site,<br>
all placed beside the table<br>
She needs her venom antidote,<br>
hurry fast as you are able.<br>
<p class="say">The cure, so fragile in its wrap,<br>
soft leather worn and brown.<br>
We cannot climb the ridge in time,<br>
nor could you make it down.<br>
</article>
<!-- These two articles replace text in distractor options. They add detail or feedback to the user, but do not advance the story. -->
<article id="opt_00A">Emptying the satchel is tempting, but you need a means of sending the antidote down.</article>
<article id="opt_00B">Pitching the pouch would surely break the antidote inside.</article>
<!-- Sections and articles follow a pattern similar to the above. The only change is in the last section, which restarts the story. -->
<section id="sec_01" title="Pie Tin">
<img src="assets/images/pie.svg" alt="pie" class="imgSmR">
<p class="initial">Send down the pie tin like a spinning saucer. <a rel="replace" href="#add_01">Tossed upside-down it glides.</a></p>
<p>Not with a pie in it, of course. You flip the pie onto the table cloth. A sweet sacrifice of pumpkin.</p>
<p>A spinning tin can glide, but it also has to carry the allergy antidote.</p>
<p><a rel="replace" href="#opt_01A">Fill the tin with ash from the fire pit?</a> <a href="#sec_02">Punch the bottom of the pie tin with the nail?</a> <a rel="replace" href="#opt_01B">Slide the pouch in the tin down the ridge?</a></p>
<br>
</section>
<article id="opt_01A">Filling the tin with ash would add a bit of stability — until it all flies out.</article>
<article id="opt_01B">The tin resists sliding on the tall grasses of the ridge.</article>
<article id="add_01"><p>The top of the over-turned pie tin is curved, forcing air to go over it faster than the air going under it. Faster air means less pressure. Less pressure on top means relatively more pressure on bottom, thus lift — keeping the inverted pie tin aloft. The spin of the inverted pie tin adds flight stability similar to the way a gyroscope is stabilized by its rotation.</p></article>
• • • [sections omitted]
<section id="sec_08" title="Hero">
<img src="assets/images/heroShield.svg" alt="hero shield" class="imgSmL">
<p class="initial">What a shame had the knave not caught the tossed tin. You wait and see the lady revived. Your reward: their thanks, of course. Plus any pie you care to salvage.</p>
<!-- rel="reset" will clear the screen, reset any values set (e.g., number of steps) and return to the cover "start" section. -->
<h4><a rel="reset" href="#start">Replay?</a></h4>
<br>
</section>
<!-- This is the end of the transcript. -->
</div>
</body>
</html>
What do you Think?
- Graphics in this course are from Flaticon. Does an anticipatory story need graphics? Do they help comprehension?
- You can change the font to suit your story genre with Google Fonts. Which font would work well for a horror story? How do fonts help or get in the way of reading?
