Building Infinite Fourth Trivia

Hey there, fellow developers and trivia enthusiasts! Martin Bowling here, and I'm excited to share the story behind my latest project: Infinite Fourth Trivia. As we celebrate Independence Day, I wanted to create something that combines my love for technology, American history, and good old-fashioned fun. Let me take you through the journey of building this never-ending patriotic quiz game!

The Spark of Inspiration

It all started when I was thinking about how to make this year's Fourth of July celebration a bit more special. As an indie developer always looking to push the boundaries, I thought, "What if we could have an AI-powered trivia game that never runs out of questions?" And thus, Infinite Fourth Trivia was born!

Leveraging Cutting-Edge AI

The heart of this project lies in its ability to generate an endless stream of USA-themed questions. To make this possible, I turned to two incredible technologies:

1. Groq's Lightning-Fast Inference: Groq's API allowed me to generate questions at breakneck speeds, ensuring a smooth user experience.

2. Google's Gemma 2 9b Model: This powerful language model provides the brains behind our questions, ensuring they're diverse, accurate, and engaging.

Here's a snippet of how I set up the Groq client in my FastAPI backend:

from groq import AsyncGroq
import os

client = AsyncGroq(api_key=os.environ.get("GROQ_API_KEY"))
GROQ_MODEL = "gemma2-9b-it"

Crafting the Perfect Question

One of the most crucial parts of the project was designing the prompt for our AI model. I wanted to ensure that questions were not only factual but also engaging and appropriate for a Fourth of July celebration. Here's a simplified version of the prompt I used:

trivia_prompt = f"""Generate a Fourth of July themed trivia multiple-choice question. The question should be {difficulty} difficulty, focusing on US independence, American Revolution, patriotic symbols, or Fourth of July traditions.

Format the response as a JSON object with the following structure:
{{
    "question": "The full text of the question",
    "options": ["A. First option", "B. Second option", "C. Third option", "D. Fourth option"],
    "correct_answer": "The letter of the correct answer (A, B, C, or D)",
    "explanation": "A brief explanation of the correct answer"
}}

Ensure that the question is factual, engaging, and appropriate for a Fourth of July celebration. Aim for a mix of historical facts, cultural traditions, and interesting tidbits about American independence and patriotism.

IMPORTANT: Do not repeat any of the following recent questions:
{recent_questions_str}

Reply only with the JSON object, no additional comments or explanations.
"""

Building a Responsive Frontend

For the frontend, I wanted something that was both visually appealing and easy to use. I opted for a combination of HTML, CSS (with Tailwind for quick styling), and JavaScript. Here's a small taste of the JavaScript that powers the game logic:

async function fetchAndDisplayQuestion(difficulty) {
    console.log('Fetching and displaying question with difficulty:', difficulty);
    try {
        const response = await axios.post('/fourth_trivia', { difficulty }, {
            headers: {
                'Content-Type': 'application/json'
            }
        });
        console.log('Response received:', response.data);
        if (response.data.error) {
            console.error('Error from server:', response.data.error);
            displayError("Sorry, there was an error fetching the question. Please try again.");
        } else {
            displayQuestion(response.data);
            prefetchNextQuestion(difficulty);  // Prefetch the next question after displaying current one
        }
    } catch (error) {
        console.error('Error fetching question:', error);
        displayError("Sorry, there was an error connecting to the server. Please check your internet connection and try again.");
    }
}

Challenges and Learnings

Building Infinite Fourth Trivia wasn't without its challenges. Ensuring question uniqueness, handling various edge cases, and optimizing for performance were all hurdles I had to overcome. But with each challenge came a learning opportunity, and I'm excited to apply these lessons to future projects.

The Road Ahead

This is just the beginning for Infinite Fourth Trivia. I have plans to expand the game with more features, such as multiplayer modes, themed question sets, and perhaps even voice-activated gameplay. The possibilities are as endless as the questions themselves!

Try It Out!

I'm thrilled to share Infinite Fourth Trivia with all of you. Whether you're a history buff, a casual trivia fan, or just looking for a fun way to celebrate the Fourth, I hope you'll give it a try. You can find the game at https://infinite4thtrivia.replit.app, and the source code is available on Replit.

Happy Fourth of July, and happy trivia-ing!