Inspiration
The inspiration for this idea came from my own experience creating slideshows for school presentations. As a presenter, it’s tough to gauge how well the audience is grasping concepts, so I often found myself using third-party sites like Kahoot to create quizzes and make the presentations more interactive. I recently switched to using Canva Slides because of the superior slide templates, but I was disappointed that there wasn’t an existing app on the marketplace to integrate beautiful quizzes and polls into presentations. I wanted to create a native experience that made managing and generating quizzes for presentations seamless, and integrated directly with the process of creating slides. This is what inspired me to create “If you know, you know!”
What it does
The app uses the Canva App Elements API to create interactive elements that update in real time, enhancing the presentation experience. The App UI Kit streamlines the quiz creation process, allowing users to easily design and manage quizzes directly from the sidebar with just a click of a button. During presentations, users can control the quiz from the side panel, while participants join by visiting iykyk.top to submit their answers. After each question, a bar chart displays the percentage of correct answers, and a leaderboard adds a fun, competitive element by gamifying participation.
How we built it
I began by integrating Canva’s SDK to add interactive elements directly into Canva Slides. Since Canvas API had limitations, I developed a custom framework inspired by React to create more complex UI components, such as rounded rectangles and a flexbox-like layout system. For the backend, I designed RESTful APIs to handle quiz creation, user responses, and real-time leaderboard updates, with a database to store all relevant data. One major challenge was ensuring smooth animations and real-time interactivity without hitting Canva’s rate limits, so I implemented a burst-update strategy to keep animations running seamlessly. Additionally, I dockerized the application to streamline deployment and ensure scalability, while rigorously testing with Jest to maintain high code quality.
Challenges we ran into
The App Elements API only allows basic shapes and text, so we hacked together an ad-hoc React-like framework to build things like:
- rounded rectangles (using SVG paths)
- a flexbox-like layout system that partitions space by percentages
Animations in bursts to avoid rate-limiting:
- We wanted to build animations onto some of the UI components we were adding, but updating the UI every 20ms was hitting Canva rate limits. So instead, we push updates in 40ms increments for a 1s “burst period” during which animations will occur. When the burst period ends, we go back to updating the app element every 1s. So long as the burst period is short enough, we’re able to render a smooth animation in the app element without hitting rate limits.
Accomplishments that we're proud of
We’re proud of what we've accomplished with "If you know, you know!" First, we overcame the limitations of Canva’s SDK by building a custom framework to create dynamic UI components like rounded rectangles and a flexbox-like layout system, which aren't natively supported. We also developed a clever solution to implement smooth animations without exceeding Canva’s rate limits, ensuring a seamless and interactive user experience. Our app allows presenters to easily create and manage quizzes directly from the Canva sidebar, making it simple to engage audiences. We're excited about the potential to enhance learning outcomes with interactive presentations and look forward to adding features like AI-generated quiz questions and more customization options.
What we learned
We realized in developing this app that Canva’s SDK today wasn’t designed to handle dynamic components, and the only way we could update the slides was by continuously repainting over top of the slide every second or so. We do believe that adding support for dynamic components like polls, charts, maps, and other visuals is a compelling area for Canva to invest in further, and I believe “If you know, you know” is a great first example of the innovative dynamic components to be unlocked.
What's next for If you know, you know
In terms of future enhancements:
- We’d want to add in the ability to leverage LLMs to auto-generate quiz questions based on the content in the slide show.
- We’d also love to add more flexibility in how users can customize individual questions with different fonts/pictures/colors
- And finally, being able to support splitting up the questions to be asked at different points in the presentation, versus having one big quiz at the end.
Log in or sign up for Devpost to join the conversation.