The Color Wheel: Interactive Story

Learning Game

Through illustrated storytelling, the learner will be exposed to a multimedia experience discovering vocabulary, relationships, and the obstacles of using color in art.

  • Target audience: Elementary art students (K - 5th) with very little knowledge of color theory. Learners are interested in storytelling and art

  • Tools used: Twine, Procreate, Google Drive, HTML5, and CSS

  • Year: 2022




Overview

Learners will use the interactive story as an introduction to color mixing and color theory. Although the mechanics of color mixing are simple, mastering intentional mixing occurs through practice. The introduction of these elements occur in a ‘choose-your-own-adventure’ story written, illustrated, and published by me. Coupled with a face-to-face assessment, this interactive story-game is one part of a larger unit on color theory.

EMDT Program Learning Goal(s):

Students will evaluate and create instructional media and technology to support teaching and learning.

Students will identify and critically examine educational technology trends for practical application.

Students will analyze and evaluate effective teaching strategies in the design and development of curricula.

Instructional Goal of the Artifact:

Learners will use the interactive story as an introduction to color mixing and color theory.




Process

At the beginning of this project, I did not have a good scope on the amount of moving parts this game will have. I need to write the story, compile the Twine file, illustrate scenes, and troubleshoot issues. I have never used Twine to create an interactive story, but the new format was an exciting project to tackle.

Beginning with a general plot, I set out to write dialogue and build the world of the Color Wheel. I used Google Doc Script to compile all of my thoughts. I have also asked for the help of a peer, who has a creative writing background, to review my writing and act as an editor.

Script and Planning Document

Twine’s interface shows visual map of the story progress, including Act 1, Act 2, and Act 3 of the story. This visual overview helps organize story elements and create an easy path to follow the narration.

Twine Story Scaffold

The entire story will be showcased through a series of text and image passages with ‘links’ to new sections. The following image displays the default style of Twine. The blue “Ready for a colorful adventure?” is the link to start the game/story.

The user interface for the program is simple to navigate and uses a standard text box to create the story. Certain text conventions (code) are used to tell the program whether the text being entered is used for macros, JavaScript, HMTL, or plain text. The following screenshots showcase the product and the Twine editing interface.

Story Passage

Twine Editing Interface

Playtesting

I was not able to secure target users for the play-test of my game, which will need to be remedied. However, Bowler and Kapp (2017) suggest that going through three major phases of play-testing turns the development stage of a game into an iterative process. Rather than beginning with the target audience, I have shared the initial stages of my game with a team for a concept test, including a pre-k educator, artist/engineer, and art instructor. For this reflection, each will be assigned a user number.

User 1 and 2 were confused about the basic game mechanics and took a prompt to click through past the title page. After that initial hint, the rest of the gameplay went smoothly for User 1 and 2. Most of the feedback I collected was through observation and post-play-test interviews and interview questions, as suggested by Bowler and Kapp (2017).

All three users chose different paths through the story and were impressed by the unique narrative. User 3 commented that the ‘return’ button used in Twine is helpful if a student wants return to a prior passage and choose a different outcome. When asked about the complexity, User 3 shares that although the story is complex, the smaller passages and hidden lines help break the narration up.

Another consensus among the players was the concern for the length of the second act. It took just under 2 minutes for each player to complete the Act 2, no matter the path. With two more story acts and one final act to complete, this would put the total game time at 8-10 minutes, depending on the speed of the reader. User 1 and 3 shared that color theory is a difficult topic to cover in just ten minutes, especially for the target learner group. With limited space and time, the current learning content takes a backstage to the narrative. They also shared that the illustrations may help prolong the user’s stay on a particular passage and provide a visual to accompany the learning content.

With this feedback to guide design choices and the specificity of the program, I edited the script to reduce the complexity and added more illustrations. With these changes, I was able to fully build out the Twine story. Embedding the story on my website took more troubleshooting and CSS changes, but the end result was a seamless experience without leaving my website. This story can be shared or published in a learning management system, depending on the modality of the class.

Color Wheel

Final Learning Game (Click ‘Ready…’ to play)

Results and Takeaways

This project was a robust learning experience that allowed me to combine storytelling, illustration, and game-based learning theory to an interactive learning experience. This story-game can be used to support teaching and learning in conjunction with additional instruction. Although this was the first time I used Twine to build instructional media, it won’t be the last.


References

Boller, S., & Kapp, K. (2017). Play to learn: Everything you need to know about designing effective learning games. Association for Talent Development.

Clark, R. C., & Mayer, R. E. (2016). e-Learning and the Science of Instruction: Proven Guidelines for Consumers and Designers of Multimedia Learning. John Wiley & Sons, Inc.

Ohler, J.B. (2013). Digital storytelling in the classroom: New media pathways to literacy, learning, and creativity (2nd ed.). Corwin.

 

You may also like…

Action Research Project

Web 2.0 Tools for Physical Education Teachers