This module was designed to be facilitated by instructors with an interest in:

• Fostering communities of practice
• Teaching creative writing
• STEAM (technology, art)

Learning Objectives:

By the end of the module, participants should be able to:

• Navigate an interactive story
• Define aspects of their character's personality
• Understand the elements of a story
• Write the following parts of a story: characters, exposition, rising action, climax, falling action, and resolution
• Develop personalized conflict statements and decisions based on the work of others
• Work within an HTML editor
• Define multiple HTML tags
• Complete a quiz about HTML
• Use appropriate HTML for formatting and linking multiple web pages

Skills/Experience Required:

• Experience navigating websites
• Teaching basics of storytelling

Materials:

Computer with internet access (for each participant)

Optional:

​In Session 4, participants will learn how to embed multimedia in their story. You can encourage them to create their own images, videos, and/or audio, using the following:

• Digital camera
• Audio recorder
• Drawing materials (paper, pencil, pen, etc.)

Please note that if participants create their own media items, they will need to first upload them to an online service before they can be used in their stories.

Common Core State Standards:

The content and activities in this module were developed to address the following Common Core State Standards:

READING: LITERATURE

1. CCSS.ELA-LITERACY.RL.6.3 - Describe how a particular story's or drama's plot unfolds in a series of episodes as well as how the characters respond or change as the plot moves toward a resolution.

READING: INFORMATIONAL TEXT

1. CCSS.ELA-LITERACY.RI.6.7 - Integrate information presented in different media or formats (e.g., visually, quantitatively) as well as in words to develop a coherent understanding of a topic or issue.

WRITING: HISTORY/SOCIAL STUDIES, SCIENCE, & TECHNICAL SUBJECTS

1. CCSS.ELA-LITERACY.WHST.6-8.2.D - Use precise language and domain-specific vocabulary to inform about or explain the topic.

WRITING​

1. CCSS.ELA-LITERACY.W.6.3 - Write narratives to develop real or imagined experiences or events using effective technique, relevant descriptive details, and well-structured event sequences.
2. CCSS.ELA-LITERACY.W.6.4 - Produce clear and coherent writing in which the development, organization, and style are appropriate to task, purpose, and audience. (Grade-specific expectations for writing types are defined in standards 1-3 above.)
3. CCSS.ELA-LITERACY.W.6.5 - With some guidance and support from peers and adults, develop and strengthen writing as needed by planning, revising, editing, rewriting, or trying a new approach. (Editing for conventions should demonstrate command of Language standards 1-3 up to and including grade 6 here.)
4. CCSS.ELA-LITERACY.W.6.6 - Use technology, including the Internet, to produce and publish writing as well as to interact and collaborate with others; demonstrate sufficient command of keyboarding skills to type a minimum of three pages in a single sitting.

LANGUAGE

1. CCSS.ELA-LITERACY.L.6.1 - Demonstrate command of the conventions of standard English grammar and usage when writing or speaking.
2. CCSS.ELA-LITERACY.L.6.2 - Demonstrate command of the conventions of standard English capitalization, punctuation, and spelling when writing.
3. CCSS.ELA-LITERACY.L.6.3 - Use knowledge of language and its conventions when writing, speaking, reading, or listening.

Additional Resources:

Similar instructions for creating interactive stories are also available using other technologies:

• Google Slides - Write an If-Then Adventure Story using Google Slides
• Google Forms - Video: Creating Choose your own adventure with Google Forms

Before posting the Lesson 1 Participant content, survey the participants on their existing narrative and website development skills. The purpose of the survey is to gauge interest, experience, and understand the talents each participant can contribute to the creation of a story. In communities of practice, participants learn not only from the provided materials, but also from experts within the community.

Survey Questions:

Please let me know if you've done any of the following:

• Written, told, illustrated, or acted out a story? (checkboxes)
• Read a book where you can control the character? (y/n)
• Created a webpage? (y/n)

Pre-Course Survey: Build your own interactive, nonlinear, online stories

Overview:

Participants will watch a video introducing interactive storytelling before engaging in an interactive story. In their update, they will begin developing a character for their story, and in their comments they will take the character traits of other participants into account to develop personalized conflict statements. Contributing to the creation of stories with other cohort members will be a continued theme throughout the learning module.

Objective(s):

By the end of the lesson, participants should be able to:

1. Navigate an interactive story
2. Define aspects of their character's personality
3. Develop personalized conflict statements based on the work of others

Procedure(s):

Post the Lesson 1 Participant content.

Common Core Standard(s):

None (yet)

Customization(s):

By altering the story prompts, this module could be used as a creative writing exercise for multiple subjects. For example, participants could write about:

• Science: what happens when you mix different chemicals
• Geography: let the reader travel through real world locations
• History: put the reader in the shoes of a historical figure
• Social/Emotional: how do you navigate difficult situations

Overview:

Participants will watch a video introducing interactive basic website development with HTML, and then apply their knowledge in the online HTML editor that's built into the learning environment. Each participant can see their results immediately for self-assessment and the learning environment provides examples and thorough instruction for reference. In their update, they will define two HTML tags, and in their comments they will explain or demonstrate their knowledge of HTML. Optional comments are encouraged throughout the lesson to foster community and knowledge sharing.

Objective(s):

By the end of the lesson, participants should be able to:

• Work within an HTML editor
• Define multiple HTML tags
• Complete a short quiz about HTML

Procedure(s):

Post the Lesson 2 Participant content.

Common Core Standard(s):

1. CCSS.ELA-LITERACY.WHST.6-8.2.D - Use precise language and domain-specific vocabulary to inform about or explain the topic.

Customization(s):

None. 

HTML Quiz Answer Key

What does HTML stand for?

• High-Tech Material Language
• HyperText Markup Language (correct)
• Historical Typed Manuscript Libraries

What is the <h1> tag used for?

• hyperlinks
• help
• headings (correct)

What is the <p> tag used for?

• paragraphs (correct)
• properties
• print

Which of these is largest heading size?

• <h1> (correct)
• <h10>
• <h100>

Where should you put your paragraphs so the website visitor can see them?

• <head></head>
• <body></body> (correct)
• <toes></toes>

Overview:

Participants will watch videos and read supporting content explaining story structure and how to format text with HTML. They will then apply their knowledge by creating the start of their story in the online HTML editor. In their update, participants will craft the start of their story, and in their comments they will create personalized decisions that characters in at least two other stories should make. As a facilitator, it's important to enforce the rule that comments be made on someone's update that the participant hasn't comment on before, in the hopes of providing a more diverse set of outcomes. Optional comments are encouraged throughout the lesson to foster community and knowledge sharing.

Objective(s):

By the end of the lesson, participants should be able to:

• Understand the elements of a story
• Write the start of a story: characters, settings and conflict
• Use appropriate HTML for formatting their story
• Develop personalized decisions based on the work of others

Procedure(s):

Post the Lesson 3 Participant content.

Common Core Standard(s):

1. CCSS.ELA-LITERACY.W.6.3 - Write narratives to develop real or imagined experiences or events using effective technique, relevant descriptive details, and well-structured event sequences.
2. CCSS.ELA-LITERACY.W.6.4 - Produce clear and coherent writing in which the development, organization, and style are appropriate to task, purpose, and audience. (Grade-specific expectations for writing types are defined in standards 1-3 above.)
3. CCSS.ELA-LITERACY.W.6.6 - Use technology, including the Internet, to produce and publish writing as well as to interact and collaborate with others; demonstrate sufficient command of keyboarding skills to type a minimum of three pages in a single sitting.
4. CCSS.ELA-LITERACY.L.6.1 - Demonstrate command of the conventions of standard English grammar and usage when writing or speaking.
5. CCSS.ELA-LITERACY.L.6.2 - Demonstrate command of the conventions of standard English capitalization, punctuation, and spelling when writing.
6. CCSS.ELA-LITERACY.L.6.3 - Use knowledge of language and its conventions when writing, speaking, reading, or listening.

Customization(s):

Depending on the grade level or capabilities of the entire cohort, you can increase the amount or complexity of writing that participants need to complete.

Overview:

Participants will watch videos and read supporting content explaining story structure and how to embed multimedia into their story, before applying that knowledge to their story in the online HTML editor. In their update, participants will write the middle of their story, and in their comments they will create decisions that characters in at least two other stories should make. Please remember that as a facilitator, it's important to enforce the rule that comments be made on someone's update that the participant hasn't comment on before, in the hopes of providing a more diverse set of outcomes. This time, participants are being challenged to incorporate story decisions that aren't dictated by their character's personalities. Optional comments are encouraged throughout the lesson to foster community and knowledge sharing.

Objective(s):

By the end of the lesson, participants should be able to:

• Understand the elements of a story
• Write the middle of a story: rising action, climax
• Use appropriate HTML for formatting their story and embedding multimedia
• Develop personalized decisions loosely based on the work of others

Procedure(s):

Post the Lesson 4 Participant content.

Common Core Standard(s):

1. CCSS.ELA-LITERACY.W.6.3 - Write narratives to develop real or imagined experiences or events using effective technique, relevant descriptive details, and well-structured event sequences.
2. CCSS.ELA-LITERACY.W.6.4 - Produce clear and coherent writing in which the development, organization, and style are appropriate to task, purpose, and audience. (Grade-specific expectations for writing types are defined in standards 1-3 above.)
3. CCSS.ELA-LITERACY.W.6.6 - Use technology, including the Internet, to produce and publish writing as well as to interact and collaborate with others; demonstrate sufficient command of keyboarding skills to type a minimum of three pages in a single sitting.
4. CCSS.ELA-LITERACY.L.6.1 - Demonstrate command of the conventions of standard English grammar and usage when writing or speaking.
5. CCSS.ELA-LITERACY.L.6.2 - Demonstrate command of the conventions of standard English capitalization, punctuation, and spelling when writing.
6. CCSS.ELA-LITERACY.L.6.3 - Use knowledge of language and its conventions when writing, speaking, reading, or listening.
7. CCSS.ELA-LITERACY.RI.6.7 - Integrate information presented in different media or formats (e.g., visually, quantitatively) as well as in words to develop a coherent understanding of a topic or issue.

Customization(s):

Depending on the grade level or capabilities of the entire cohort, you can increase the amount or complexity of writing that participants need to complete. If resources are available, you can also encourage students to create their own multimedia elements to include in their story and/or offer as a shared resource to others in the cohort.

Overview:

Participants will watch videos and read supporting content explaining story structure and how to link together the parts of their story, before applying that knowledge to their story in the online HTML editor. In their update, participants will write the end of their story. There are no assigned comments, but just as in previous lessons, optional comments are encouraged throughout the lesson to foster community and knowledge sharing.

Objective(s):

By the end of the lesson, participants should be able to:

• Understand the elements of a story
• Write the end of a story: falling action, resolution
• Use appropriate HTML for formatting their story and link between its various parts

Procedure(s):

Post the Lesson 5 Participant content.

Common Core Standard(s):

1. CCSS.ELA-LITERACY.W.6.3 - Write narratives to develop real or imagined experiences or events using effective technique, relevant descriptive details, and well-structured event sequences.
2. CCSS.ELA-LITERACY.W.6.4 - Produce clear and coherent writing in which the development, organization, and style are appropriate to task, purpose, and audience. (Grade-specific expectations for writing types are defined in standards 1-3 above.)
3. CCSS.ELA-LITERACY.W.6.6 - Use technology, including the Internet, to produce and publish writing as well as to interact and collaborate with others; demonstrate sufficient command of keyboarding skills to type a minimum of three pages in a single sitting.
4. CCSS.ELA-LITERACY.L.6.1 - Demonstrate command of the conventions of standard English grammar and usage when writing or speaking.
5. CCSS.ELA-LITERACY.L.6.2 - Demonstrate command of the conventions of standard English capitalization, punctuation, and spelling when writing.
6. CCSS.ELA-LITERACY.L.6.3 - Use knowledge of language and its conventions when writing, speaking, reading, or listening.

Customization(s):

Depending on the grade level or capabilities of the entire cohort, you can increase the amount or complexity of writing that participants need to complete.

Overview:

Participants will share their story and complete two assessments. There are no assigned updates or comments, but interested parties are encouraged to continue their studies independently on W3Schools.com. 

Objective(s):

By the end of the lesson, participants should be able to:

• Complete a peer review
• Complete a quiz of their storytelling and HTML knowledge

Procedure(s):

Post the Lesson 6 Participant content.

Common Core Standard(s):

• CCSS.ELA-LITERACY.RL.6.3 - Describe how a particular story's or drama's plot unfolds in a series of episodes as well as how the characters respond or change as the plot moves toward a resolution.

Customization(s):

Compile a list of links to the various stories and distribute it to the cohort after peer reviews, so they can enjoy each other's creativity, not just the one story they're reviewing.

Peer Review Rubric:
Grade: 15/15

TECHNOLOGY (Weight 1/5)
Rating: 0 to 3

• [3] Every decision link led to the corresponding next page in the story.
• [2] There were 1-2 decision links that were either broken or led to the wrong next page in the story.
• [1] There were 3+ decision links that were either broken or led to the wrong next page in the story.

LAYOUT (Weight 1/5)
Rating: 0 to 3

• [3] Each page had a heading and paragraph(s). Start and middle pages also had decision links.
• [2] More than half of all pages had a heading and paragraph(s). More than half of start and middle pages had decision links.
• [1] Less than half of all pages had a heading and paragraph(s). Less than half of start and middle pages had decision links.

SEQUENCING (1/5)
Rating: 0 to 3

• [3] There was a clear start, middle, and end to the story.
• [2] It was sometimes unclear where I was in the story.
• [1] I never understood where I was in the story.

GRAMMAR (1/5)
Rating: 0 to 3

• [3] There were no errors in capitalization, grammar, punctuation, or spelling.
• [2] There were 1-3 errors, but the story was still easy to read.
• [1] There were 4+ errors that distract from the story.

CREATIVITY (1/5)
Rating: 0 to 3

• [3] The writer showed creative use of language, HTML formatting, and embedded media.
• [2] The writer showed creative use of two items: language, HTML formatting, or embedded media.
• [1] The writer showed creative use of one item: language, HTML formatting, or embedded media.

HTML and Story Element Quiz Answer Key

​This quiz builds on the previous quiz from Session 2, so you can guage the participants new level of understanding. Five additional questions are included based on knowledge acquired after Session 2.

What does HTML stand for?

• High-Tech Material Language
• HyperText Markup Language (correct)
• Historical Typed Manuscript Libraries

What is the <h1> tag used for?

• hyperlinks
• help
• headings (correct)

What is the <p> tag used for?

• paragraphs (correct)
• properties
• print

Which of these is largest heading size?

• <h1> (correct)
• <h10>
• <h100>

Where should you put your paragraphs so the website visitor can see them?

• <head></head>
• <body></body> (correct)
• <toes></toes>

What is the action of adding an image, video, or audio file you a webpage, typically called:

• attaching
• copy/pasting
• embedding (correct)

What's wrong with this tag <img src="image.jpg"></img>:

• images do not have a closing tag (correct)
• the source file is incorrect
• nothing, it's fine

What is the <a> tag used for?

• attributes
• audio
• hyperlinks (correct)

Which of these shows the correct order for story elements:

• exposition > conflict > rising action > climax > falling action > resolution (correct)
• climax > rising action > conflict > exposition > resolution > falling action
• resolution > conflict > exposition > rising action > climax > falling action

Which of these is the smallest heading size?

• <h.25>
• <h1>
• <h6> (correct)