AI & Me: We Created a Family Feud/Wordle Style Game in Storyline!

Most of us know that an engaging and interactive e-learning experience often requires innovative solutions to keep learners motivated. Games can transform dry content into interactive, fun learning experiences. In this post, I’ll share how I developed a “Focus Feud” game using Storyline, leveraging triggers and variables and some JavaScript. I also created a companion guide in Rise featuring my digital twin. This project not only enhanced my storytelling and design skills, but also highlighted the power of AI tools in simplifying complex tasks.

My Motivation

I enjoy challenges that stretch my thinking and authoring skills. The recent release of the Articulate AI features inspired me to create a project that showcases the integration of these new tools alongside existing AI applications. My goal was to show how AI can enhance the development process, making it more efficient and creative.

The Concept

The idea was simple yet impactful: gamify an online article. I was reading a well-written article on maintaining focus at work and thought it would be interesting to transform this content into a game and a companion guide. While completing the game takes longer than reading the article, turning the information into an engaging format makes the learning process more enjoyable and memorable.

The Tools

To bring Focus Feud to life, I used a combination of tools:

• Articulate Storyline and Rise: For creating interactive slides and the companion guide.
• ChatGPT: Help summarize content, brainstorm game ideas and logistics, and co-creating JavaScript code and Storyline trigger flows.
• HeyGen: Generated a digital host avatar with a custom voice.
• Camtasia: Edited video clips and integrated them into Storyline.
• Canva/Photoshop: Enhanced graphics and visuals.
• Word/PowerPoint: Planned the storyboard and scripting.

A Word about JavaScript

Initially, I leveraged JavaScript to handle user input validation, scoring, and timers, believing it would offer more efficiency than Storyline’s triggers and variables. However, I encountered complications that were challenging to troubleshoot with my novice JavaScript skills. ChatGPT helped co-create and test scripts, but ultimately, I pivoted back to Storyline’s built-in triggers and variables for some parts of this game, just to keep things a little simpler.

Planning the Game

The development began with planning. I worked with ChatGPT to summarize and extract key points from the article, converting them into game objectives and goals. I paired each major concept with feedback, tips, and expert insights to enrich the learning experience. This structured approach not only guided the development process, but also provided a blueprint for gamifying other articles in the future.

Storyboard and Script

Using PowerPoint, I laid out the flow of content and created narration scripts. While programming details were handled separately, this initial layout ensured a clear vision of the game’s progression and interactions.

Graphics

I generated most graphics using Storyline's AI features, and they required minimal editing to fit the project's aesthetic. While AI-generated images provided a solid foundation, I fine-tuned them in Canva and Photoshop to maintain consistency and quality across the game.

Narration

Originally, I planned to narrate the entire project using Storyline’s new neural voices. In fact, I created all the voice tracks in Storyline, and they sounded natural and spot on. However, to emulate the dynamic presence of a game show host, I turned to HeyGen to create a digital host with a distinct voice. Edited in Camtasia, these video clips were seamlessly integrated into Storyline, enhancing the game’s interactive appeal.

Game Mechanics and Flow

Designing the game mechanics involved determining which content best suited each mini-game within Focus Feud—a single-word Wordle game, a three-word rapid round, and a five-question Fast Money round. Points were assigned based on the accuracy and relevance of user responses, mirroring the scoring systems of Wordle and Family Feud. The AI video avatar, on-screen tips, and expert insights derived from the original article provided immediate feedback.

Approaching Development

Variables are the backbone of any interactive project in Storyline. For Focus Feud, I set up many variables for each mini game, ensuring consistent naming conventions and trigger orders. Testing incrementally was crucial to isolate and resolve issues early, preventing them from compounding as development progressed.

Challenges

While AI-generated graphics were mostly usable, some inconsistencies required creative adjustments. JavaScript posed challenges because of my limited scripting skills, leading to troubleshooting difficulties. Collaborating with ChatGPT provided partial solutions, but ultimately, reverting to Storyline’s triggers and variables for some of the heavy lifting proved more effective. Storyline’s limitations in generating quizzes or summaries from external articles required this to be done with ChatGPT.

The Good

Despite the challenges, leveraging JavaScript with AI assistance was empowering, allowing me to implement complex functionalities with minimal coding. Storyline’s AI features significantly reduced the time needed to generate images, sounds, and edit text, streamlining the development process.

The Future

The extensive troubleshooting with ChatGPT was immensely helpful, teaching me valuable lessons in scripting and problem-solving. I envision Storyline integrating AI capabilities that help plan and troubleshooting triggers and variables, akin to ChatGPT’s support. Improvements in AI-generated videos and consistent character creation would further enhance the development experience, making the design of e-learning and learning games even more customizable.

Companion Guide in Rise

Besides the game, I created a companion guide in Rise featuring my digital twin. This guide explains the game’s content and includes an interactive digital avatar trained on the article’s material, acting as a live coach ready to answer questions. While an API could allow direct integration within Storyline slides or Rise blocks, the demo version launches into a new window, showcasing the potential for future enhancements.

Overall Thoughts

These are exciting times for learning professionals! Tools like ChatGPT can significantly aid in content creation and problem-solving, even for those with limited technical skills. The ability to leverage AI in multiple ways has given me an edge, reducing production time and enhancing creativity. Interactive conversations with digital avatars trained on any subject can revolutionize how we handle FAQs, glossaries, and manuals, making learning more dynamic and personalized.

Conclusion

Developing the Focus Feud game in Articulate Storyline was a rewarding journey that highlighted the immense potential of combining Storyline’s native and new AI features with external AI tools. By balancing the use of complex scripting and Storyline triggers and variables, I could create an e-learning experience that was beyond my technical skills. For fellow e-learning developers, this project serves as a testament to the power of leveraging AI assistance to create impactful educational content without the need for extensive programming knowledge.