🏅 Badge Showcase

Earn Digital Badges for Your IoT Learning Achievements

Putting Numbers to It

Learner engagement can be monitored with a weighted score:

\[ E = 0.5\,Q + 0.3\,L + 0.2\,B \]

where \(Q\) is quiz completion rate, \(L\) is lab completion rate, and \(B\) is badge progress (all normalized 0 to 1).

Worked example: For \(Q=0.82\), \(L=0.55\), and \(B=0.40\), engagement score is \(E=0.5(0.82)+0.3(0.55)+0.2(0.40)=0.655\). Tracking this weekly helps detect drop-off early.

🏅 Badge System

Earn digital badges by completing chapters, mastering skills, and achieving milestones. All badges are Open Badges 2.0 compatible and can be shared on LinkedIn!

What are Digital Badges?

Digital badges are verifiable credentials that recognize your learning achievements. Each badge includes:

• Badge Image (3 style variants: geometric, modern, artistic)
• Criteria (what you need to do to earn it)
• XP Reward (experience points awarded)
• Open Badges 2.0 JSON (for portfolio/LinkedIn)

supportServices = {
  const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
  const waitFor = async (getter, timeoutMs = 5000) => {
    const deadline = Date.now() + timeoutMs;
    while (Date.now() < deadline) {
      const value = getter();
      if (value) {
        return value;
      }
      await wait(100);
    }
    return null;
  };

  const auth = await waitFor(() => {
    const candidate = window.Auth;
    return candidate &&
      typeof candidate.getCurrentUser === 'function' &&
      typeof candidate.isUserAuthenticated === 'function'
      ? candidate
      : null;
  });

  const api = await waitFor(() => {
    const candidate = window.IoTClassAPI;
    return candidate && candidate.User && candidate.Badge ? candidate : null;
  });

  const badgeSystem = await waitFor(() => {
    const candidate = window.BadgeSystem;
    return candidate && (candidate.badgeCatalog || typeof candidate.init === 'function')
      ? candidate
      : null;
  }, 3000);

  return {
    auth,
    api,
    badgeSystem,
    isAuthenticated: Boolean(auth?.isUserAuthenticated?.()),
  };
}

// Colors
colors = ({
  navy: '#2C3E50',
  teal: '#16A085',
  orange: '#E67E22',
  gray: '#7F8C8D',
  lightGray: '#ECF0F1'
})

normalizeCategoryKey = (value) => {
  return String(value || 'uncategorized')
    .trim()
    .toLowerCase()
    .replace(/[_\s]+/g, '-');
}

formatCategoryLabel = (key) => {
  return key
    .split('-')
    .filter(Boolean)
    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ');
}

// Check authentication
currentUser = {
  const auth = supportServices.auth;
  if (!auth) {
    return null;
  }

  const user = auth.getCurrentUser();
  if (!user) {
    return null;
  }

  // Get user profile from Supabase
  const userApi = supportServices.api?.User;
  const userData = userApi?.getProfile
    ? await userApi.getProfile(user.id)
    : {};

  return {
    ...user,
    ...userData
  };
}

// Badge catalog (all 15 badges)
badgeCatalog = {
  const badgeSystem = supportServices.badgeSystem;
  if (badgeSystem?.init) {
    await badgeSystem.init();
  }

  if (Array.isArray(badgeSystem?.badgeCatalog) && badgeSystem.badgeCatalog.length > 0) {
    return badgeSystem.badgeCatalog.map(badge => ({
      ...badge,
      emoji: badge.emoji || badge.icon || '🏅',
      rarity: badge.rarity || 'common',
      xp_reward: badge.xp_reward || 0
    }));
  }

  const badgeApi = supportServices.api?.Badge;
  if (badgeApi?.getAllBadgeDefinitions) {
    const definitions = await badgeApi.getAllBadgeDefinitions();
    if (definitions && definitions.length > 0) {
      return definitions.map(badge => ({
        ...badge,
        emoji: badge.emoji || badge.icon || '🏅',
        rarity: badge.rarity || 'common',
        xp_reward: badge.xp_reward || 0
      }));
    }
  }

  return [];
}

// User's earned badges - Using Supabase via BadgeSystem or direct API
userBadges = {
  if (!supportServices.isAuthenticated || !currentUser) {
    return [];
  }

  try {
    const badgeSystem = supportServices.badgeSystem;
    const badgeApi = supportServices.api?.Badge;

    // Try BadgeSystem first (it may have more details)
    if (badgeSystem?.getUserBadgesWithDetails) {
      const badges = await badgeSystem.getUserBadgesWithDetails(currentUser.id);
      return badges;
    }

    // Fallback to direct Supabase API
    if (!badgeApi?.getUserBadges) {
      return [];
    }

    const badges = await badgeApi.getUserBadges(currentUser.id);
    return badges.map(b => ({
      ...b,
      badgeId: b.badge_id,
      earnedDate: b.earned_at
    }));
  } catch (error) {
    console.error('Error loading user badges:', error);
    return [];
  }
}

categoryMeta = {
  const defaults = {
    milestone: { label: 'Milestone', emoji: '⭐', accent: '#E67E22' },
    achievement: { label: 'Achievement', emoji: '✅', accent: '#16A085' },
    streak: { label: 'Streak', emoji: '🔥', accent: '#C0392B' },
    specialty: { label: 'Specialty', emoji: '🧭', accent: '#2C3E50' },
    special: { label: 'Special', emoji: '🏅', accent: '#8E44AD' },
    uncategorized: { label: 'Other', emoji: '🏷️', accent: '#7F8C8D' }
  };

  const meta = {};
  const register = (rawCategory) => {
    const key = normalizeCategoryKey(rawCategory);
    if (!meta[key]) {
      const fallback = defaults.uncategorized;
      meta[key] = defaults[key] || {
        label: formatCategoryLabel(key),
        emoji: fallback.emoji,
        accent: fallback.accent
      };
    }
    return key;
  };

  badgeCatalog.forEach(badge => register(badge.category));
  userBadges.forEach(badge => {
    register(
      badge.category ||
      badge.badge_category ||
      badge.badgeCategory ||
      badge.badge_definition?.category ||
      badge.badgeDefinition?.category
    );
  });

  if (Object.keys(meta).length === 0) {
    register('milestone');
  }

  return meta;
}

// Badge progress statistics
badgeStats = {
  const earnedCount = userBadges.length;
  const totalCount = badgeCatalog.length;
  const completionPercent = totalCount > 0 ? Math.round((earnedCount / totalCount) * 100) : 0;

  const makeBucket = (key) => ({
    earned: 0,
    total: 0,
    label: categoryMeta[key]?.label || formatCategoryLabel(key),
    emoji: categoryMeta[key]?.emoji || '🏅',
    accent: categoryMeta[key]?.accent || colors.gray
  });

  const byCategory = {};
  Object.keys(categoryMeta).forEach((key) => {
    byCategory[key] = makeBucket(key);
  });

  const resolveBadgeCategory = (badge) => {
    return normalizeCategoryKey(
      badge.category ||
      badge.badge_category ||
      badge.badgeCategory ||
      badge.badge_definition?.category ||
      badge.badgeDefinition?.category
    );
  };

  badgeCatalog.forEach((badge) => {
    const key = resolveBadgeCategory(badge);
    if (!byCategory[key]) {
      byCategory[key] = makeBucket(key);
    }
    byCategory[key].total++;
  });

  userBadges.forEach((badge) => {
    const key = resolveBadgeCategory(badge);
    if (!byCategory[key]) {
      byCategory[key] = makeBucket(key);
    }
    byCategory[key].earned++;
  });

  // Total XP from badges
  const totalBadgeXP = userBadges.reduce((sum, badge) => sum + (badge.xp_reward || 0), 0);
  const categoryKeys = Object.keys(byCategory).sort((left, right) => {
    return byCategory[right].total - byCategory[left].total || left.localeCompare(right);
  });

  return {
    earnedCount,
    totalCount,
    completionPercent,
    byCategory,
    categoryKeys,
    totalBadgeXP
  };
}

// Filter state
viewState = {
  return {
    view: 'all', // all, earned, not-earned
    categoryFilter: 'all' // all or a normalized category key
  };
}

// Filtered badges
filteredBadges = {
  const earnedBadgeIds = new Set(
    userBadges.map((badge) => badge.badgeId || badge.badge_id || badge.id).filter(Boolean)
  );
  let badges = badgeCatalog;

  // Apply view filter
  if (viewState.view === 'earned') {
    badges = badges.filter(badge =>
      earnedBadgeIds.has(badge.id)
    );
  } else if (viewState.view === 'not-earned') {
    badges = badges.filter(badge =>
      !earnedBadgeIds.has(badge.id)
    );
  }

  // Apply category filter
  if (viewState.categoryFilter !== 'all') {
    badges = badges.filter(badge => normalizeCategoryKey(badge.category) === viewState.categoryFilter);
  }

  // Merge with earned data
  return badges.map(badge => {
    const earned = userBadges.find(e => (e.badgeId || e.badge_id || e.id) === badge.id);
    const categoryKey = normalizeCategoryKey(badge.category);
    const categoryInfo = categoryMeta[categoryKey] || {
      label: formatCategoryLabel(categoryKey),
      emoji: '🏷️',
      accent: colors.gray
    };
    return {
      ...badge,
      category: categoryKey,
      categoryLabel: categoryInfo.label,
      categoryEmoji: categoryInfo.emoji,
      categoryAccent: categoryInfo.accent,
      earned: earnedBadgeIds.has(badge.id),
      earnedDate: earned?.earnedDate || earned?.earned_at,
      emoji: badge.emoji || badge.icon || '🏅'
    };
  });
}

// Render login prompt if not authenticated
html`${!supportServices.isAuthenticated ? `
  <div style="
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  ">
    <div style="font-size: 64px; margin-bottom: 20px;">🔒</div>
    <h2 style="color: ${colors.navy}; margin-bottom: 16px;">Sign in to Earn Badges</h2>
    <p style="color: ${colors.gray}; margin-bottom: 24px;">
      Track your achievements and earn digital credentials!
    </p>
    <button
      onclick="window.Auth && typeof window.Auth.login === 'function' && window.Auth.login('google')"
      style="
        padding: 12px 32px;
        background: ${colors.teal};
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 600;
      "
    >
      <span aria-hidden="true" style="font-weight: 700;">G</span> Sign in with Google
    </button>
  </div>
` : ''}`

// Render badge progress section
html`${supportServices.isAuthenticated ? `
  <div class="progress-section">
    <h3 style="margin: 0 0 24px 0; color: ${colors.navy};">Your Badge Progress</h3>

    <div class="progress-stats">
      <div class="progress-stat">
        <div class="progress-stat-value">${badgeStats.earnedCount}/${badgeStats.totalCount}</div>
        <div class="progress-stat-label">Badges Earned</div>
      </div>

      <div class="progress-stat">
        <div class="progress-stat-value">${badgeStats.completionPercent}%</div>
        <div class="progress-stat-label">Completion</div>
      </div>

      <div class="progress-stat">
        <div class="progress-stat-value">${badgeStats.totalBadgeXP.toLocaleString()}</div>
        <div class="progress-stat-label">XP from Badges</div>
      </div>

      ${badgeStats.categoryKeys.map(key => `
        <div class="progress-stat">
          <div class="progress-stat-value">
            ${badgeStats.byCategory[key].earned}/${badgeStats.byCategory[key].total}
          </div>
          <div class="progress-stat-label">
            ${badgeStats.byCategory[key].emoji} ${badgeStats.byCategory[key].label}
          </div>
        </div>
      `).join('')}
    </div>

    <!-- View Tabs -->
    <div class="badge-tabs">
      <button class="badge-tab ${viewState.view === 'all' ? 'active' : ''}" onclick="viewState.view = 'all'">
        All Badges (${badgeCatalog.length})
      </button>
      <button class="badge-tab ${viewState.view === 'earned' ? 'active' : ''}" onclick="viewState.view = 'earned'">
        Earned (${badgeStats.earnedCount})
      </button>
      <button class="badge-tab ${viewState.view === 'not-earned' ? 'active' : ''}" onclick="viewState.view = 'not-earned'">
        Not Earned (${badgeCatalog.length - badgeStats.earnedCount})
      </button>
    </div>

    <!-- Category Filters -->
    <div class="category-filter">
      <button class="filter-btn ${viewState.categoryFilter === 'all' ? 'active' : ''}" onclick="viewState.categoryFilter = 'all'">
        All Categories
      </button>
      ${badgeStats.categoryKeys.map(key => `
        <button class="filter-btn ${viewState.categoryFilter === key ? 'active' : ''}" onclick="viewState.categoryFilter = '${key}'">
          ${badgeStats.byCategory[key].emoji} ${badgeStats.byCategory[key].label}
        </button>
      `).join('')}
    </div>
  </div>
` : ''}`

// Render badges grid
html`${supportServices.isAuthenticated ? `
  <div class="badges-grid">
    ${filteredBadges.map(badge => {
      const rarityClass = `rarity-${badge.rarity}`;
      const categoryClass = `category-${badge.category}`;

      return `
        <div class="badge-card ${badge.earned ? 'earned' : 'locked'}">
          <div class="badge-emoji ${!badge.earned ? 'badge-locked-emoji' : ''}">
            ${badge.emoji}
          </div>

          <h3 class="badge-name">${badge.name}</h3>

          <div class="badge-category ${categoryClass}" style="background: ${badge.categoryAccent}; color: white;">
            ${badge.categoryEmoji} ${badge.categoryLabel}
          </div>

          <div class="badge-rarity ${rarityClass}">
            ${badge.rarity}
          </div>

          <div class="badge-xp-reward">
            +${badge.xp_reward} XP
          </div>

          <p class="badge-criteria">
            ${badge.earning_logic?.criteria || badge.criteria || badge.description || 'Complete the requirements to earn this badge'}
          </p>

          ${badge.earned ? `
            <div class="badge-earned-date">
              Earned: ${new Date(badge.earnedDate).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
            </div>

            <div class="badge-actions">
              <button
                class="badge-action-btn btn-download"
                onclick="window.BadgeSystem && window.BadgeSystem.downloadBadge && window.BadgeSystem.downloadBadge('${currentUser.id}', '${badge.id}', 'modern')"
              >
                📥 Download
              </button>
              <button
                class="badge-action-btn btn-share"
                onclick="window.BadgeSystem && window.BadgeSystem.shareBadgeOnLinkedIn && window.BadgeSystem.shareBadgeOnLinkedIn('${badge.id}')"
              >
                <i class="fab fa-linkedin"></i> Share
              </button>
              <button
                class="badge-action-btn btn-json"
                onclick="window.BadgeSystem && window.BadgeSystem.downloadBadgeJSON && window.BadgeSystem.downloadBadgeJSON('${currentUser.id}', '${badge.id}')"
              >
                {} JSON
              </button>
            </div>
          ` : `
            <div style="color: ${colors.gray}; font-size: 14px; margin-top: 12px;">
              🔒 Not earned yet
            </div>
          `}
        </div>
      `;
    }).join('')}
  </div>
` : ''}`

Badge Categories

⭐ Milestone Badges

Track major completion and XP thresholds such as finishing your first chapter, completing large chapter counts, or reaching major point milestones.

✅ Achievement Badges

Reward specific accomplishments like quiz excellence, hands-on lab completion, or standout performance on a focused activity.

🔥 Streak Badges

Recognize consistent learning habits over time, such as maintaining multi-day study streaks.

🧭 Specialty Badges

Highlight depth in a technical area such as protocols, security, or architecture once you complete a targeted body of work.

🏅 Special Badges

Reserve a small set of badges for exceptional recognition that does not fit the normal milestone or activity pathways.

Open Badges 2.0

All IoT Class badges are Open Badges 2.0 compliant. Each badge includes:

• Badge Image (SVG format, 3 style variants)
• Badge Metadata (JSON format with issuer, criteria, evidence)
• Verifiable (hosted assertion for verification)
• Shareable (on LinkedIn, portfolio, resume)

How to Use Your Badges

1. Download: Click “Download” to save the badge image (SVG)
2. Share on LinkedIn: Click “Share” to post to your LinkedIn profile
3. Get JSON: Click “JSON” to download Open Badges 2.0 metadata
4. Add to Portfolio: Use the hosted JSON URL for your digital portfolio

Badge Rarity Levels

Rarity	Color	Description	Percentage
Common	Gray	Easy to earn	60-70%
Uncommon	Green	Moderate effort	20-30%
Rare	Blue	Significant achievement	5-10%
Legendary	Gold	Exceptional mastery	<1%