ETEC 510 Playing with Design

For my Playing with Design project, I decided to choose a metronome as my object and to build an interactive how to guide using Twine. I had never used Twine before, but I chose it because it seemed both technical and creative as it allowed me to make use of my existing knowledge of HTML, CSS, and JavaScript in a new way. I built this with introductory musicians and music-lovers in mind as my users.

As a digital tool, Twine mixes storytelling and interactivity through a "choose-your-own-adventure" style interface which I found to be a good fit for a guided, step-by-step learning process The multimodality of Twine, combined with HTML, CSS, and JS, allowed me to build a learning experience that was part story and part tool. For this project I was able to create an adjustable metronome with visual feedback and three functioning instruments (snare drum, cowbell, and triangle) for the user to interact with.

I discovered that Twine's flexibility comes from how the tool supports both simple and complex workflows depending on the user's pre-existing technical abilities. The different story formats Twine allows for on the platform make it so that web development languages and syntax can be either simplified or expanded on depending on the functionality desired between text passages and the user's level of computer literacy. I initially started out with the built-in Harlowe story format in Twine but eventually had to restart my project and switch to the SugarCube story format as Harlow couldn't script the audio and interactivity I had hoped for in the design of my metronome guide.

To make this project work, I had to combine several technologies to create the level of interactivity I wanted. This included using pre-constructed sound files and animations from CodePen and Universal Soundbank, as well as ChatGPT and DeepSeek to help me wrap my head around the coding, formatting, and troubleshooting aspects of how everything had to come together for this to be functional.

One of the biggest challenges I faced in this was making the instruments play audio instantly when clicked. In the Harlowe format, I could call sounds via .mp3 files and the Web Audio API, but I found that audio clips would not overlap correctly which caused for a laggy user experience. In making the switch to the SugarCube story format I was able to solve this problem but had to redo much of my previous syntax and formatting as the two different story formats had different ways of putting things together. I also ran into issues embedding the exported Twine HTML into my blog. I eventually found success in making the Twine HTML document pop out into a new window as I could not accomodate rendering the file in an iframe inside the blog.

If I had more time, I would fix how the Twine HTML file appears on my blog post, I would make the Twine window more responsive to different screen sizes, and lastly I would improve text styling to make things a little easier to read.

Looking at my project through educational frameworks from ETEC510 helped me to apply a greater foundational and theoretical perspective in my understanding of educational design as it related to the experiential learning outcomes I wanted achieve using this digital tool.

From an instructionist perspective, Twine provided a clear, step-by-step learning process where users followed structured prompts and tasks as they were instructed towards a predetermined learning objective.

From a constructivist perspective, the interactive affordances of Twine encouraged learners to explore at their own pace which was valuable for my choice of object. As users were able to adjust metronome parameters and make sounds with the virutal instruments, I believe that the experimental and low-stakes learning environment I was able to create became significant in allowing users to build individualized understandings and self-confidence in using a metronome.

From a constructionist perspective, the Twine I had created allows for users to create short rhythms through which users can play with making beats and sounds in a real-time context. One future improvement towards this would be to modify the project to allow users to visually display and save these rhythms on a backend server, making participation more artifactual and shareable overall. It would also be interesting to add a skill-testing checkpoint or mini-game at the end, where users could share their skills on a leaderboard amongst eachother for fun in the future, and perhaps incorporate video instruction within the Twine in order to demonstrate the examples further and provide greater mix of modalities.

I found working with Twine to be challenging but insightful. Despite the learning curve and technical problems I encountered, I found its ability to present information while allowing for different outcomes/directions to take the user fascinating and engaging. Overall, I found this project to be a good exercise in patience, persistence, and educational design (especially since I chose a complex setup with audio and interactive elements beyond text).

With that said, I see value in how approachable Twine could be as an educational tool for anyone regardless of technical ability or know-how as it offers a simple and accessible workflow allowing users to jump right in and make something interesting. Despite the challenges, I see Twine as being a powerful creative media production and educational tool for educators and students alike, and would encourage others to experiment with it regardless of any past computer or coding experience.