Intermediate Web Literacy II: Storytelling with Scripts

Multi-colored stacked blocks

Learn to use buttons, forms, and inputs alongside JavaScript functions to tell stories on the web.

Learning Objectives

Learners will understand how different elements of a webpage can work together with JavaScript to show off their creativity and storytelling.

Writing the Web

Buttons and Alerts

Communication, Creativity, Compose, Code, Remix

Learn how HTML, CSS, and JavaScript connect to one another by using buttons and scripts to tell a simple story.

Storytelling with Three Buttons

Communication, Creativity, Code, Compose, Remix

Learn how to write multiple, short functions that each connect to a button on a webpage.

Simple Story Generator

Communication, Creativity, Code, Compose, Remix

Learn how to use arrays and the document method to generate random stories and add them to a webpage.

Storytelling with Pictures

Communication, Creativity, Code, Compose, Remix

Use HTML, CSS, and JavaScript to tell a simple story using three sequential pictures.

Storytelling with User Input

Communication, Creativity, Code, Compose, Remix

Learn how to use HTML, CSS, and JavaScript to turn user input into a brand new story on a webpage.

Storytelling with Color

Communication, Creativity, Code, Compose, Remix

Learn how HTML, CSS, and JavaScript connect to one another by using buttons and scripts to inspire storytelling in response to different colors.

Creating a Storytelling Resource

Communication, Creativity, Code, Compose, Remix

Learn how HTML, CSS, and JavaScript connect to one another by using buttons and scripts to create storytelling prompts.

Storytelling with Interactive Fiction

Communication, Creativity, Code, Compose, Remix

Learn how HTML, CSS, and JavaScript connect to one another by creating an interactive story that responds to user input.