Initial Code

.github/workflows/static.yml

@@ -0,0 +1,47 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Inject Secrets into HTML
+        run: |
+          echo "Replacing placeholders with secrets"
+          sed -i "s|{{ SDK_KEY }}|${{ secrets.DEVCYCLE_CLIENT_SDK_KEY }}|g" ./scripts/devcycle.js
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: '.'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Bert Cafecito
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1 +1,104 @@
-# devcycle-feature-flag-challenge
+# DevCycle Feature Flag Challenge DEV Challenge
+
+[DevCycle Feature Flag Challenge DEV Challenge][4] is a project about building an app that showcases the most unique, creative, or fun way to use feature flags in an application by leveraging a [DevCycle SDK][1], [OpenFeature Provider][2] or [the API][2]!
+
+This project will not be maintained after the DEV Challenges is finished. Feel free to fork and maintain your own version.
+
+[1]: https://docs.devcycle.com/sdk/
+[2]: https://docs.devcycle.com/integrations/openfeature
+[3]: https://docs.devcycle.com/management-api/
+[4]: https://dev.to/challenges/devcycle
+
+## What are DEV Challenges?
+
+DEV Challenges are like miniature Hackathons, and provide a fun opportunity for you to build up experience using new tools or to publicly show off your best skills to the community, potential employers and more. You can find more information about DEV Challenges [here](https://dev.to/challenges).
+
+## What I Built
+
+The app that I built for this challenge is a Trivia Game that allows users to answer multiple-choice trivia questions. The app features a frontend using HTML, CSS, and JavaScript. The frontend provides an interactive interface for users to engage with the trivia questions.
+
+### Features
+
+- **Time-Based Mechanics**: Control the availability of timers, speed bonuses, and time-based challenges.
+- **Scoring System**: Configure scoring logic for the trivia app, including streak bonuses and difficulty-based points.
+- **Power-Ups**: Allow players to use tools like 50/50, hints, or skip functionality.
+- **Progression System**: Manage levels, XP, achievements, and content unlocks.
+- **Accessibility**: Manage user accessibility options.
+
+## Live Demo
+
+You can view the live demo of the app [here](https://bert-cafecito.github.io/devcycle-feature-flag-challenge/).
+
+### Question Screen 
+
+![Trivia Question](images/devcycle-feature-flag-challenge-question-screen.png)
+
+### Mechanics Screen
+
+![Game Mechanics](images/devcycle-feature-flag-challenge-mechanics-screen.png)
+
+### Accessibility Screen
+
+![Game Accessibility](images/devcycle-feature-flag-challenge-accessibility-screen.png)
+
+### Accessibility Feature
+![Accessibility Feature](images/devcycle-feature-flag-challenge-accessibility.png)
+
+### Power-Ups Feature
+![Power-Ups Feature](images/devcycle-feature-flag-challenge-power-ups.png)
+
+### Progression System Feature
+![Progression System Feature](images/devcycle-feature-flag-challenge-progression-system.png)
+
+### Scoring System Feature
+![Scoring System Feature](images/devcycle-feature-flag-challenge-scoring-system.png)
+
+### Time-Based Mechanics Feature
+![Time-Based Mechanics Feature](images/devcycle-feature-flag-challenge-time-based-mechanics.png)
+
+## My DevCycle Experience
+
+Integrating DevCycle into my application proved to be an insightful and valuable experience. Initially, understanding how to effectively leverage feature flags presented a challenge. Feature flags enable the activation or deactivation of specific features without requiring a code deployment—a powerful capability that necessitates a solid understanding of the system to fully utilize.
+
+A key challenge was learning how to properly configure and manage features within the DevCycle platform. After several attempts, I developed a deeper understanding of how to create and control features. This process involved setting up feature variations to deliver a more dynamic and tailored user experience.
+
+Additionally, I encountered the challenge of utilizing user targeting to personalize the user experience. I believe that leveraging user targeting could have significantly enhanced the interactivity and engagement of the trivia experience.
+
+- **Feature Flag Evaluation:** By implementing targeting rules based on custom properties, I could have presented different feature variables based on the user’s progress in the trivia game.
+
+- **Dynamic Adjustments:** Using feature flag values, I could have adjusted trivia question difficulty and time limits to create a personalized experience for each user. This would have made the app more engaging and challenging for users of varying skill levels.
+
+- **User Accessibility Options:** A great idea I had at the last minute, but didn't implement, was managing user accessibility options via a feature flag. This would have allowed me to dynamically adjust accessibility features, such as font size, color contrast, or other visual adjustments, based on user preferences. This could greatly enhance the user experience for individuals with specific needs or preferences.
+
+As a software engineer primarily focused on backend (server-side) development, I found that DevCycle is more tailored to frontend applications. However, I aimed to create the best static website possible that would leverage the advantages of DevCycle.
+
+## Suggestions for Improving DevCycle
+
+Based on my experience, here are a few suggestions for improving DevCycle:
+
+- **Enhanced Documentation:** Providing more detailed documentation and examples for setting up and managing feature flags would help new users get up to speed more quickly.
+
+- **SDK Key Permissions:** I would appreciate a section that explains how to configure client SDK key permissions. In reviewing the documentation, I found limited information on the permissions granted to SDK keys. For enterprise-level implementations, especially for CISOs, having clear details on SDK key permissions is essential.
+
+- **Discord Community:** The DevCycle Discord community felt somewhat lackluster and could benefit from more engagement and resources. A more active and resourceful Discord channel would help users feel more connected and supported. If you’d like to reach out, feel free to connect with me through your Discord server..
+
+By addressing these areas, DevCycle can further enhance its platform and provide an even better experience for its users.
+
+## Support
+
+If you would like to support this project or me, you can do so in the following ways:
+
+### Follow Me on Social Media
+
+- [**Bluesky**](https://bsky.app/profile/bert-cafecito.bsky.social)
+- [**Dev Community**](https://dev.to/bert-cafecito)
+- [**GitHub**](https://github.com/bert-cafecito)
+
+
+### Star the Repository
+
+If you find this project useful, please consider starring the repository on GitHub. Starring a repository helps increase its visibility and lets others know that the project is valuable. It also provides motivation and support to the maintainers to continue improving the project.
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.

index.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Trivia Game</title>
+  <link rel="stylesheet" href="style.css">
+  <script src="https://js.devcycle.com/devcycle.min.js" type="text/javascript"></script>
+</head>
+<body>
+  <header>
+    <nav class="navbar">
+      <div class="navbar-brand">Trivia Game</div>
+      <ul class="navbar-nav">
+        <li class="nav-item"><a href="#" id="homeLink">Home</a></li>
+        <li class="nav-item"><a href="#" id="mechanicsLink">Mechanics</a></li>
+        <li class="nav-item"><a href="#" id="accessibilityLink">Accessibility</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <main>
+    <div id="startScreen">
+      <button id="startGame" class="btn">Start Game</button>
+    </div>
+    <div id="game" style="display: none;">
+      <div class="game-info">
+        <p id="score">Score: 0</p>
+        <p id="level">Level: 1</p>
+        <p id="xp">XP: 0</p>
+      </div>
+      <div class="question-container">
+        <h2>Question</h2>
+        <p id="question"></p>
+        <div id="answers" class="answers"></div>
+        <p id="timer"></p>
+      </div>
+      <div id="powerUps" class="power-ups">
+        <button id="fiftyFifty" class="btn">50/50</button>
+        <button id="hint" class="btn">Hint</button>
+        <button id="skip" class="btn">Skip Question</button>
+      </div>
+    </div>
+    <div id="mechanics" style="display: none;">
+      <h2>Game Mechanics</h2>
+      <button id="fetchMechanics" class="btn">Load Mechanics</button>
+      <pre id="output"></pre>
+    </div>
+    <div id="accessibility" style="display: none;">
+      <h2>Accessibility Features</h2>
+      <pre id="accessibilityOutput"></pre>
+    </div>
+  </main>
+
+  <script src="scripts/questionBank.js"></script>
+  <script src="scripts/devcycle.js"></script>
+  <script src="scripts/questions.js"></script>
+  <script src="scripts/timer.js"></script>
+</body>
+</html>

scripts/devcycle.js

@@ -0,0 +1,103 @@
+// Initialize DevCycle SDK
+const { initializeDevCycle } = DevCycle;
+
+const sdkKey = "{{ SDK_KEY }}"; // Placeholder for the secret
+
+let devcycleClient;
+let gameMechanics = {}; // Store game mechanics
+let gameAccessibility = {}; // Store game accessibility settings
+
+// The user object needs either a user_id, or isAnonymous set to true
+const user = { isAnonymous: true };
+
+async function init() {
+    try {
+        // Call initialize with the client key and a user object
+        devcycleClient = await initializeDevCycle(sdkKey, user).onClientInitialized();
+        useDevCycleVariable();
+    } catch (ex) {
+        console.log(`Error initializing DevCycle: ${ex}`);
+    }
+}
+
+function useDevCycleVariable() {
+    if (!devcycleClient) return;
+
+    gameMechanics = {
+        "time_based_mechanics": {
+            "timer_enabled": devcycleClient.variableValue("timer_enabled", false),
+            "timer_duration": devcycleClient.variableValue('timer_duration', 10),
+            "speed_bonus_active": devcycleClient.variableValue('speed_bonus_active', false)
+        },
+        "scoring_system": {
+            "base_points": devcycleClient.variableValue('base_points', 10),
+            "streak_bonus": devcycleClient.variableValue('streak_bonus', false),
+            "difficulty_bonus": devcycleClient.variableValue('difficulty_bonus', 10),
+            "max_score_per_round": devcycleClient.variableValue('max_score_per_round', 10),
+            "streak_multiplier": devcycleClient.variableValue('streak_multiplier', 1.0)
+        },
+        "power_ups": {
+            "fifty_fifty_enabled": devcycleClient.variableValue('fifty_fifty_enabled', true),
+            "hint_enabled": devcycleClient.variableValue('hint_enabled', true),
+            "skip_question": devcycleClient.variableValue('skip_question', false),
+            "power_up_cost": devcycleClient.variableValue('power_up_cost', 50)
+        },
+        "progression_system": {
+            "xp_per_correct": devcycleClient.variableValue('xp_per_correct', 10),
+            "level_threshold": devcycleClient.variableValue('level_threshold', 100),
+            "streak_achievements": devcycleClient.variableValue('streak_achievements', false),
+            "unlock_new_categories": devcycleClient.variableValue('unlock_new_categories', true),
+            "max_level": devcycleClient.variableValue('max_level', 50)
+        }
+    };
+    console.log('Game Mechanics Loaded:', gameMechanics);
+    document.getElementById('output').textContent = JSON.stringify(gameMechanics, null, 2);
+
+    // Hide the "Load Mechanics" button
+    document.getElementById('fetchMechanics').style.display = 'none';
+
+    // Set timer duration based on game mechanics
+    if (gameMechanics.time_based_mechanics.timer_enabled) {
+        timerDuration = gameMechanics.time_based_mechanics.timer_duration;
+    }
+
+    gameAccessibility = {
+        "high_contrast_mode_enabled": devcycleClient.variableValue('high_contrast_mode_enabled', false),
+    };
+    console.log('Game Accessibility Loaded:', gameAccessibility);
+    document.getElementById('accessibilityOutput').textContent = JSON.stringify(gameAccessibility, null, 2)
+
+}
+
+document.getElementById('fetchMechanics').addEventListener('click', () => {
+    useDevCycleVariable();
+});
+
+document.getElementById('startGame').addEventListener('click', () => {
+    document.getElementById('startScreen').style.display = 'none';
+    document.getElementById('game').style.display = 'block';
+    loadNextQuestion(gameMechanics);
+});
+
+document.getElementById('homeLink').addEventListener('click', () => {
+    document.getElementById('startScreen').style.display = 'block';
+    document.getElementById('game').style.display = 'none';
+    document.getElementById('mechanics').style.display = 'none';
+    document.getElementById('accessibility').style.display = 'none';
+});
+
+document.getElementById('mechanicsLink').addEventListener('click', () => {
+    document.getElementById('startScreen').style.display = 'none';
+    document.getElementById('game').style.display = 'none';
+    document.getElementById('mechanics').style.display = 'block';
+    document.getElementById('accessibility').style.display = 'none';
+});
+
+document.getElementById('accessibilityLink').addEventListener('click', () => {
+    document.getElementById('startScreen').style.display = 'none';
+    document.getElementById('game').style.display = 'none';
+    document.getElementById('mechanics').style.display = 'none';
+    document.getElementById('accessibility').style.display = 'block';
+});
+
+init();