BitcoinQuizFlow: AI-Powered Quiz Generation with Storyblok

This is a submission for the Storyblok Challenge

What I Built

I built BitcoinQuizFlow, an automated system that transforms Bitcoin blog content into interactive, educational quizzes using AI and Storyblok as the content management backbone. The project addresses a real problem: making cryptocurrency education more engaging and accessible through gamified learning experiences.

The system automatically:

• 🕷️ Scrapes Bitcoin content from educational blogs
• 🤖 Generates quiz questions using Google Gemini AI
• 📚 Stores structured content in Storyblok CMS
• 🎮 Delivers interactive quizzes through a responsive web interface

What makes this special is the complete automation pipeline - from raw blog content to polished, shareable quizzes - all orchestrated through Storyblok's powerful content management capabilities.

Demo

• Live Demo: https://quiz.kheai.com | backup
• Storyblok Space: https://app.storyblok.com/#!/me/spaces/343567
• Code Repository: https://github.com/kheAI/bitcoinquizflow

kheAI / bitcoinquizflow

BitcoinQuizFlow

Auto-generate interactive Bitcoin quizzes from blog posts using Storyblok CMS + AI

Transform Bitcoin educational content into engaging quizzes automatically. Scrapes blog posts, generates questions with AI, stores in Storyblok, and delivers through a responsive quiz interface.

✨ Features

• 🤖 AI Quiz Generation - Gemini AI creates contextual questions from blog content
• 📚 Storyblok CMS - Structured content management with custom components
• 🎮 Interactive Interface - Responsive quiz experience with real-time feedback
• 🔄 Automated Workflow - End-to-end content transformation pipeline
• 📊 Performance Analytics - Detailed results with achievement badges
• 📱 Social Sharing - Share quiz results on Twitter/LinkedIn

🚀 Quick Start

1. Clone & Install

git clone https://github.com/kheAI/bitcoinquizflow
cd bitcoinquizflow
npm install

2. Environment Setup

cp .env.example .env

Add your API keys to .env:

STORYBLOK_OAUTH_TOKEN=your_oauth_token
STORYBLOK_SPACE_ID=your_space_id  
STORYBLOK_ACCESS_TOKEN=your_access_token 
GEMINI_API_KEY=your_gemini_key
VITE_STORYBLOK_TOKEN=your_preview_token

3. Setup Storyblok Schema

node src/utils/storyblokSchemas.cjs

4. Generate Quizzes

…

View on GitHub

Demo Video:

Screenshots:

Quiz Generation Workflow

Automated workflow: Blog content → AI processing → Storyblok storage

Interactive Quiz Interface

Responsive quiz interface with real-time feedback and explanations

Results and Analytics

Detailed results with performance analytics and social sharing

Storyblok Content Management

Structured quiz content in Storyblok with custom components

Code Preview

Tech Stack

Backend & Automation

• Node.js with TypeScript for the automation pipeline
• Google Gemini AI for intelligent quiz question generation
• Cheerio for web scraping and content extraction
• Storyblok Management API for content creation and updates

Frontend

• Vite for fast development and optimized builds
• TypeScript for type safety and better developer experience
• Vanilla JavaScript for lightweight, performant quiz interactions
• CSS Grid/Flexbox for responsive, mobile-first design

Content Management

• Storyblok CMS as the central content hub
• Custom component schemas for quizzes and questions
• RESTful API for content delivery to the frontend

DevOps & Deployment

• GitHub Actions for automated quiz generation
• Vercel for frontend deployment
• Environment-based configuration for different stages

How I Used Storyblok

Storyblok serves as the central nervous system of BitcoinQuizFlow, and I leveraged several key features:

🏗️ Custom Component Architecture

I created a sophisticated content model with two main components:

Quiz Component:

{
  "name": "quiz",
  "display_name": "Quiz",
  "schema": {
    "title": {
      "type": "text",
      "required": true,
      "display_name": "Quiz Title"
    },
    "difficulty": {
      "type": "text",
      "required": true,
      "display_name": "Difficulty"
    },
    "source_url": {
      "type": "text",
      "display_name": "Source URL"
    },
    "source_title": {
      "type": "text",
      "display_name": "Source Title"
    },
    "created_date": {
      "type": "text",
      "display_name": "Created Date"
    },
    "questions": {
      "type": "bloks",
      "required": true,
      "display_name": "Questions",
      "restrict_components": true,
      "component_whitelist": ["question"]
    }
  },
  "is_root": true,
  "is_nestable": false
}

Question Component:

{
  "name": "question",
  "display_name": "Question",
  "schema": {
    "question": {
      "type": "text",
      "required": true,
      "display_name": "Question"
    },
    "options": {
      "type": "textarea",
      "required": true,
      "display_name": "Answer Options"
    },
    "correct_answer": {
      "type": "text",
      "required": true,
      "display_name": "Correct Answer"
    },
    "explanation": {
      "type": "textarea",
      "required": true,
      "display_name": "Explanation"
    }
  },
  "is_root": false,
  "is_nestable": true
}

This structure allows for flexible content management while maintaining strict data validation.

📡 Management API Integration

The automation pipeline uses Storyblok's Management API to:

// Automated content creation
const storyblokQuiz = {
  name: quiz.title,
  slug: generateSlug(quiz.title),
  content: {
    component: 'quiz',
    title: quiz.title,
    difficulty: quiz.difficulty,
    questions: quiz.questions.map(formatQuestion)
  }
};

await storyblok.post(`spaces/${SPACE_ID}/stories`, {
  story: storyblokQuiz,
  publish: 1
});

🔄 Content Delivery API

The frontend consumes content through Storyblok's blazing-fast CDN:

// Real-time quiz loading
const response = await fetch(
  `https://api.storyblok.com/v2/cdn/stories?token=${token}&filter_query[component][in]=quiz`
);
const quizzes = response.data.stories;

🎯 Advanced Features Utilized

• Content Filtering: Using filter_query to fetch only quiz content
• Slug Generation: Automatic URL-friendly slugs for SEO
• Publishing Workflow: Automated publishing of generated content
• Version Control: Leveraging Storyblok's built-in versioning
• Preview Mode: Testing content before public release

🔧 Schema Management

I built a sophisticated schema management system that automatically creates and updates Storyblok components:

// Automated schema deployment
async function createComponents() {
  await storyblok.post(`spaces/${SPACE_ID}/components`, {
    component: questionSchema
  });

  await storyblok.post(`spaces/${SPACE_ID}/components`, {
    component: quizSchema  
  });
}

This ensures consistent content structure across different environments and makes the project easily deployable.

kafechew@Kais-MacBook-Pro bitcoinquizflow % node src/utils/storyblokSchemas.cjs
🔧 Creating Storyblok components...
🗑️ Deleting existing component: question
🗑️ Deleting existing component: quiz
✅ Created question component
✅ Created quiz component

AI Integration

The AI integration is where BitcoinQuizFlow truly shines, creating a seamless content transformation pipeline:

🧠 Intelligent Content Analysis

Google Gemini AI analyzes Bitcoin blog content and generates contextually relevant quiz questions:

const prompt = `
You are a Bitcoin education expert. Create a quiz based on this content:

Title: ${post.title}
Content: ${post.content}

Generate exactly 4 multiple choice questions that test understanding of key concepts.

Requirements:
- Questions should be specific to the content
- Each question should have 4 options (A, B, C, D)  
- Include explanations for correct answers
- Focus on practical Bitcoin knowledge

Return valid JSON in this format: {...}
`;

🎯 Smart Question Generation

The AI creates questions that:

• Test comprehension rather than memorization
• Focus on key concepts mentioned in the source content
• Provide educational value through detailed explanations
• Maintain consistent difficulty across different topics

🔄 Quality Assurance Pipeline

I implemented multiple validation layers:

// JSON parsing with error recovery
let jsonString = aiResponse;
jsonString = jsonString.replace(/,(\s*[}\]])/g, '$1'); // Remove trailing commas
jsonString = jsonString.replace(/,(\s*,)/g, ',');     // Fix double commas

const quizData = JSON.parse(jsonString);

// Content validation
const validQuestions = quizData.questions.filter(q => 
  q.question && 
  Array.isArray(q.options) && 
  q.options.length === 4 &&
  q.correctAnswer && 
  q.explanation
);

🚀 Storyblok + AI Synergy

The magic happens when AI-generated content meets Storyblok's structure:

1. AI generates raw quiz content from blog posts
2. Validation layer ensures content quality and format
3. Storyblok stores structured, manageable content
4. Frontend consumes polished, interactive quizzes

This creates a self-sustaining content ecosystem where new educational material automatically becomes engaging quiz content.

kafechew@Kais-MacBook-Pro bitcoinquizflow % npm run generate

> bitcoinquizflow@1.0.0 generate
> node src/workflow.js

🚀 Starting BitcoinQuizFlow workflow...
⏰ 2025-06-20T11:43:50.595Z

📰 Step 1: Scraping blog posts...
🔍 Scraping Bitcoin posts from kheai.com...
⚠️ No posts found with standard selectors, trying manual approach...
📖 Scraping content for: Understanding Bitcoin: A Comprehensive Guide
✅ Found 1 new Bitcoin posts
✅ Found 1 blog posts

🧠 Step 2: Generating quizzes with AI...
🧠 Generating quiz for: Understanding Bitcoin: A Comprehensive Guide
🔍 Raw AI response preview: ```

json
{
  "questions": [
    {
      "question": "What was the primary problem Kai faced in Argentina that sparked his interest in money?",
      "options": [
        "A) He lost his wallet.",
     ...
🧹 Cleaned JSON: {
  "questions": [
    {
      "question": "What was the primary problem Kai faced in Argentina that sparked his interest in money?",
      "options": [
        "A) He lost his wallet.",
        "B) H...
✅ Generated quiz with 4 questions
✅ Generated 1 quizzes

📤 Step 3: Pushing to Storyblok...
📤 Pushing quiz to Storyblok: Bitcoin Quiz: Understanding Bitcoin: A Comprehensive Guide
📋 Storyblok quiz structure: {
  "name": "Bitcoin Quiz: Understanding Bitcoin: A Comprehensive Guide",
  "slug": "bitcoin-quiz-understanding-bitcoin-a-comprehensive",
  "content": {
    "component": "quiz",
    "title": "Bitcoin Quiz: Understanding Bitcoin: A Comprehensive Guide",
    "difficulty": "medium",
    "source_url": "https://www.kheai.com/posts/bitcoin-lightning-liquidity-service-provider",
    "source_title": "Understanding Bitcoin: A Comprehensive Guide",
    "created_date": "2025-06-20T11:43:54.775Z",
    "questions": [
      {
        "component": "question",
        "question": "What was the primary problem Kai faced in Argentina that sparked his interest in money?",
        "options": "A) He lost his wallet.\nB) He couldn't find a job.\nC) Inflation eroded the value of his savings.\nD) He was scammed online.",
        "correct_answer": "C",
        "explanation": "Kai's savings lost value over time due to inflation, a key problem that motivated him to learn more about money."
      },
      {
        "component": "question",
        "question": "Which of the following is NOT one of the three essential functions of money described in the text?",
        "options": "A) Store of Value\nB) Medium of Exchange\nC) Unit of Account\nD) Source of Investment Returns",
        "correct_answer": "D",
        "explanation": "The text specifically mentions Store of Value, Medium of Exchange, and Unit of Account as the three essential functions of money. Source of Investment Returns is not mentioned as a core function."
      },
      {
        "component": "question",
        "question": "According to the text, what happens when a currency's supply increases excessively?",
        "options": "A) Each unit of currency becomes more valuable.\nB) Each unit of currency becomes less valuable.\nC) The economy always benefits.\nD) The purchasing power of the currency remains the same.",
        "correct_answer": "B",
        "explanation": "The text indicates that when more of a currency is printed, each unit becomes worth less, as was the case with the Argentine peso."
      },
      {
        "component": "question",
        "question": "What is a characteristic of 'good' money, as implied by the text?",
        "options": "A) It is easy to counterfeit.\nB) Its supply is unlimited.\nC) It is scarce.\nD) It is issued by a central bank.",
        "correct_answer": "C",
        "explanation": "The text mentions that good money should be scarce, meaning its supply cannot be easily increased."
      }
    ]
  }
}
✅ Successfully created quiz in Storyblok (ID: 690403247)
✅ Successfully created 1/1 quizzes in Storyblok

📊 Final Result: {
  success: true,
  message: 'Workflow complete! Created 1 quizzes',
  stats: { postsScraped: 1, quizzesGenerated: 1, quizzesCreated: 1 }
}
kafechew@Kais-MacBook-Pro bitcoinquizflow % npm run frontend       

> bitcoinquizflow@1.0.0 frontend
> vite serve src/frontend --port 3000 --host


  VITE v5.4.19  ready in 536 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: http://192.168.0.191:3000/
  ➜  press h + enter to show help

📊 Performance Optimization

• Batch processing to respect API rate limits
• Intelligent caching to avoid regenerating existing content
• Fallback mechanisms when AI generation fails
• Error handling with detailed logging for debugging

Learnings and Takeaways

Building BitcoinQuizFlow was an incredible journey that taught me valuable lessons about modern content management, AI integration, and automated workflows.

🎉 What I'm Proud Of

1. Seamless Integration Architecture The way Storyblok, AI, and the frontend work together feels magical. Content flows from blog posts to interactive quizzes without any manual intervention, yet maintains high quality and structure.

2. Real-World Problem Solving This isn't just a tech demo - it addresses the genuine challenge of making cryptocurrency education more engaging. The automated pipeline can scale to process hundreds of articles into educational content.

3. Developer Experience The project is highly configurable and easy to deploy. The schema management system means anyone can set up their own instance with minimal configuration.

4. User Experience The quiz interface is genuinely fun to use, with smooth animations, detailed explanations, and social sharing features that encourage learning and engagement.

🚧 Challenges I Overcame

1. AI Response Consistency Getting reliable, parseable JSON from AI was trickier than expected. I solved this with:

• Robust JSON cleaning and validation
• Multiple parsing attempts with different strategies
• Fallback content when AI generation fails
• Detailed error logging for continuous improvement

2. Content Schema Design Balancing flexibility with structure in Storyblok required several iterations:

• Started with overly complex schemas that were hard to manage
• Simplified to essential fields while maintaining functionality
• Added validation at both the API and frontend levels
• Created automated schema deployment for consistency

3. Web Scraping Reliability Different websites have different structures, making scraping challenging:

• Implemented multiple CSS selector strategies
• Added fallback content for testing and development
• Built caching to avoid re-processing the same content
• Created manual content injection for edge cases

4. Frontend State Management Managing quiz state without a heavy framework required careful planning:

• Used TypeScript interfaces for type safety
• Implemented clear separation between data and UI logic
• Added comprehensive error handling and user feedback
• Created responsive design that works across all devices

💡 Key Insights About Storyblok

1. Component-First Thinking Storyblok's component architecture encouraged me to think about content structure upfront, leading to cleaner, more maintainable code.

2. API-First Approach Having both Management and Delivery APIs made it easy to build automated workflows while maintaining a fast, responsive frontend.

3. Developer-Friendly The documentation is excellent, and the API responses are well-structured and predictable, making integration smooth.

4. Scalability Built-In Storyblok's CDN and caching handled the load beautifully, even when generating multiple quizzes simultaneously.

🔮 Future Enhancements

This project has opened up exciting possibilities:

• Multi-source content aggregation from various Bitcoin blogs
• User accounts with progress tracking and personalized recommendations
• Community features where users can submit their own quiz questions
• Advanced analytics to understand learning patterns and optimize content
• Mobile app version for on-the-go learning
• Integration with learning management systems for educational institutions

🌟 Why This Matters

BitcoinQuizFlow demonstrates how modern headless CMS architecture can power intelligent, automated content workflows. It's not just about managing content - it's about transforming content into more valuable, engaging formats.

The combination of Storyblok's flexibility, AI's intelligence, and thoughtful UX design creates something greater than the sum of its parts: a platform that makes learning about Bitcoin genuinely enjoyable and accessible.

This project proves that with the right tools and architecture, we can build systems that automatically create educational value from existing content, opening up new possibilities for content creators, educators, and learners alike.

Ready to try it yourself? Check out the live demo and test your Bitcoin knowledge!

Built with ❤️ for the Bitcoin community and the Storyblok Challenge