Dairy Farmers of Wisconsin Trivia
Interactive Vue Web App
Tools Used
Challenges
- Ensuring each game session feels unique and replayable.
- Providing instant, clear feedback while maintaining a smooth user experience.
- Encouraging social sharing while maintaining performance and responsiveness.
Solutions
- Implemented logic to randomly select 10 questions from a 20-question API pool and randomize multiple-choice answer order. This ensures players cannot memorize patterns, keeping the game engaging on repeat plays.
- Designed and implemented dynamic feedback messages (“Oh curds!” / “Brie-lliant!”) and score updates in real-time using Vue’s reactivity system. The correct answer is shown briefly before automatically transitioning to the next question, reinforcing learning without interrupting game flow.
- Integrated share functionality that allows users to post their final score on social media. Built this feature to be lightweight and responsive, so sharing works seamlessly across desktop and mobile without slowing the app.
My Role
This project involved building an interactive trivia web app for the Dairy Farmers of Wisconsin using Vue.js. The game engages users with fun, brand-aligned messaging — displaying “Oh curds!” for incorrect answers and “Brie-lliant!” for correct answers — while testing knowledge of Wisconsin dairy products. Users can track their scores and share results on social media, increasing brand engagement and awareness.
The game pulls 10 questions at random from a larger API pool, with multiple-choice answers randomized each playthrough. Correct answers are displayed before moving to the next question, reinforcing learning while keeping gameplay dynamic and fun. Smooth transitions and responsive design ensure an engaging experience across devices.
As the Front-End Developer, I implemented dynamic state management, randomized question logic, and responsive interactivity using Vue.js. I integrated the game with a REST API to pull questions and answers, and built custom components for instant feedback, scoring, and social sharing. Attention was given to creating a seamless, visually appealing user experience with consistent messaging and animations that enhance engagement.
Disclaimer: The trivia game is currently only available on mobile, and the website does not have an SSL certificate (not part of my work). To access the app, users must click “Advanced” and proceed to the site.