diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
new file mode 100644
index 0000000..435dc52
--- /dev/null
+++ b/.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
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..8586e28
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/README.md b/README.md
index c1b126e..8cc3d6d 100644
--- a/README.md
+++ b/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
+
+
+
+### Mechanics Screen
+
+
+
+### Accessibility Screen
+
+
+
+### Accessibility Feature
+
+
+### Power-Ups Feature
+
+
+### Progression System Feature
+
+
+### Scoring System Feature
+
+
+### Time-Based Mechanics Feature
+
+
+## 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.
\ No newline at end of file
diff --git a/images/devcycle-feature-flag-challenge-accessibility-screen.png b/images/devcycle-feature-flag-challenge-accessibility-screen.png
new file mode 100644
index 0000000..3b231c9
Binary files /dev/null and b/images/devcycle-feature-flag-challenge-accessibility-screen.png differ
diff --git a/images/devcycle-feature-flag-challenge-accessibility.png b/images/devcycle-feature-flag-challenge-accessibility.png
new file mode 100644
index 0000000..5f78f36
Binary files /dev/null and b/images/devcycle-feature-flag-challenge-accessibility.png differ
diff --git a/images/devcycle-feature-flag-challenge-mechanics-screen.png b/images/devcycle-feature-flag-challenge-mechanics-screen.png
new file mode 100644
index 0000000..bcc61c6
Binary files /dev/null and b/images/devcycle-feature-flag-challenge-mechanics-screen.png differ
diff --git a/images/devcycle-feature-flag-challenge-power-ups.png b/images/devcycle-feature-flag-challenge-power-ups.png
new file mode 100644
index 0000000..e4474f9
Binary files /dev/null and b/images/devcycle-feature-flag-challenge-power-ups.png differ
diff --git a/images/devcycle-feature-flag-challenge-progression-system.png b/images/devcycle-feature-flag-challenge-progression-system.png
new file mode 100644
index 0000000..1fc76ff
Binary files /dev/null and b/images/devcycle-feature-flag-challenge-progression-system.png differ
diff --git a/images/devcycle-feature-flag-challenge-question-screen.png b/images/devcycle-feature-flag-challenge-question-screen.png
new file mode 100644
index 0000000..496fee2
Binary files /dev/null and b/images/devcycle-feature-flag-challenge-question-screen.png differ
diff --git a/images/devcycle-feature-flag-challenge-scoring-system.png b/images/devcycle-feature-flag-challenge-scoring-system.png
new file mode 100644
index 0000000..4899521
Binary files /dev/null and b/images/devcycle-feature-flag-challenge-scoring-system.png differ
diff --git a/images/devcycle-feature-flag-challenge-time-based-mechanics.png b/images/devcycle-feature-flag-challenge-time-based-mechanics.png
new file mode 100644
index 0000000..01c49e8
Binary files /dev/null and b/images/devcycle-feature-flag-challenge-time-based-mechanics.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..04398f0
--- /dev/null
+++ b/index.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+ Trivia Game
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Score: 0
+
Level: 1
+
XP: 0
+
+
+
Question
+
+
+
+
+
+
+
+
+
+
+
+
Game Mechanics
+
+
+
+
+
Accessibility Features
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/scripts/devcycle.js b/scripts/devcycle.js
new file mode 100644
index 0000000..090f0d0
--- /dev/null
+++ b/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();
\ No newline at end of file
diff --git a/scripts/questionBank.js b/scripts/questionBank.js
new file mode 100644
index 0000000..ab60480
--- /dev/null
+++ b/scripts/questionBank.js
@@ -0,0 +1,127 @@
+const questionBank = [
+ {
+ question: "What type is Pikachu?",
+ answers: ["Electric", "Fire", "Water", "Grass"],
+ correctAnswer: "Electric"
+ },
+ {
+ question: "Which Pokémon is known as the 'Fire Lizard'?",
+ answers: ["Charmander", "Charizard", "Magmar", "Torchic"],
+ correctAnswer: "Charmander"
+ },
+ {
+ question: "What is the evolved form of Bulbasaur?",
+ answers: ["Ivysaur", "Venusaur", "Vileplume", "Oddish"],
+ correctAnswer: "Ivysaur"
+ },
+ {
+ question: "Which Pokémon evolves into Gyarados?",
+ answers: ["Magikarp", "Feebas", "Goldeen", "Seaking"],
+ correctAnswer: "Magikarp"
+ },
+ {
+ question: "What type is weak to Water moves?",
+ answers: ["Fire", "Rock", "Ground", "All of the above"],
+ correctAnswer: "All of the above"
+ },
+ {
+ question: "Who is the mascot of Pokémon?",
+ answers: ["Pikachu", "Charizard", "Mewtwo", "Jigglypuff"],
+ correctAnswer: "Pikachu"
+ },
+ {
+ question: "What region do Pokémon Red and Blue take place in?",
+ answers: ["Kanto", "Johto", "Sinnoh", "Hoenn"],
+ correctAnswer: "Kanto"
+ },
+ {
+ question: "Which Pokémon is a Legendary Bird?",
+ answers: ["Articuno", "Pidgeot", "Talonflame", "Fearow"],
+ correctAnswer: "Articuno"
+ },
+ {
+ question: "Which Pokémon has the ability 'Levitate'?",
+ answers: ["Gastly", "Gengar", "Weezing", "Bronzong"],
+ correctAnswer: "Gastly"
+ },
+ {
+ question: "What does Eevee evolve into with a Water Stone?",
+ answers: ["Vaporeon", "Flareon", "Jolteon", "Umbreon"],
+ correctAnswer: "Vaporeon"
+ },
+ {
+ question: "What type of move is 'Hyper Beam'?",
+ answers: ["Normal", "Fighting", "Flying", "Dragon"],
+ correctAnswer: "Normal"
+ },
+ {
+ question: "Which Pokémon is #001 in the Pokédex?",
+ answers: ["Bulbasaur", "Charmander", "Pikachu", "Squirtle"],
+ correctAnswer: "Bulbasaur"
+ },
+ {
+ question: "Which of these is a Fighting-type Pokémon?",
+ answers: ["Machop", "Gastly", "Geodude", "Ponyta"],
+ correctAnswer: "Machop"
+ },
+ {
+ question: "What move restores HP for Grass-type Pokémon?",
+ answers: ["Synthesis", "Solar Beam", "Giga Drain", "Leech Seed"],
+ correctAnswer: "Synthesis"
+ },
+ {
+ question: "What Pokémon is known as the 'Sleeping Pokémon'?",
+ answers: ["Snorlax", "Jigglypuff", "Slowpoke", "Slakoth"],
+ correctAnswer: "Snorlax"
+ },
+ {
+ question: "Which team is the main villain in Pokémon Ruby and Sapphire?",
+ answers: ["Team Magma", "Team Rocket", "Team Aqua", "Team Galactic"],
+ correctAnswer: "Team Magma"
+ },
+ {
+ question: "Which Pokémon evolves with a Moon Stone?",
+ answers: ["Clefairy", "Jigglypuff", "Nidorina", "All of the above"],
+ correctAnswer: "All of the above"
+ },
+ {
+ question: "Who is the Champion in Pokémon Gold and Silver?",
+ answers: ["Lance", "Red", "Blue", "Cynthia"],
+ correctAnswer: "Lance"
+ },
+ {
+ question: "What Pokémon has the National Dex number 150?",
+ answers: ["Mewtwo", "Mew", "Dragonite", "Zapdos"],
+ correctAnswer: "Mewtwo"
+ },
+ {
+ question: "Which of these Pokémon can learn 'Fly'?",
+ answers: ["Pidgeot", "Zubat", "Pikachu", "Gyarados"],
+ correctAnswer: "Pidgeot"
+ },
+ {
+ question: "What is the main color of Shiny Charizard?",
+ answers: ["Black", "Red", "Blue", "Gold"],
+ correctAnswer: "Black"
+ },
+ {
+ question: "Which Pokémon evolves into Lucario?",
+ answers: ["Riolu", "Zoroark", "Growlithe", "Beldum"],
+ correctAnswer: "Riolu"
+ },
+ {
+ question: "Which type is resistant to Dragon-type moves?",
+ answers: ["Steel", "Fairy", "Ice", "None"],
+ correctAnswer: "Steel"
+ },
+ {
+ question: "What item is used to evolve Scyther into Scizor?",
+ answers: ["Metal Coat", "King's Rock", "Dragon Scale", "Upgrade"],
+ correctAnswer: "Metal Coat"
+ },
+ {
+ question: "Who created the Pokémon franchise?",
+ answers: ["Satoshi Tajiri", "Ken Sugimori", "Shigeru Miyamoto", "Junichi Masuda"],
+ correctAnswer: "Satoshi Tajiri"
+ }
+];
\ No newline at end of file
diff --git a/scripts/questions.js b/scripts/questions.js
new file mode 100644
index 0000000..b237649
--- /dev/null
+++ b/scripts/questions.js
@@ -0,0 +1,122 @@
+let score = 0;
+let streak = 0;
+let xp = 0;
+let level = 1;
+let currentQuestion = {};
+let correctAnswer = "";
+let timerInterval;
+
+function loadNextQuestion(gameMechanics) {
+ const questionElement = document.getElementById('question');
+ const answersElement = document.getElementById('answers');
+ const timerElement = document.getElementById('timer');
+ const scoreElement = document.getElementById('score');
+ const levelElement = document.getElementById('level');
+ const xpElement = document.getElementById('xp');
+
+ // Select a random question from the question bank
+ const randomIndex = Math.floor(Math.random() * questionBank.length);
+ currentQuestion = questionBank[randomIndex];
+
+ questionElement.textContent = currentQuestion.question;
+ answersElement.innerHTML = '';
+ timerElement.textContent = `Time left: ${gameMechanics.time_based_mechanics.timer_duration} seconds`;
+
+ currentQuestion.answers.forEach(answer => {
+ const button = document.createElement('button');
+ button.textContent = answer;
+ button.setAttribute('aria-label', `Answer: ${answer}`);
+ button.addEventListener('click', () => {
+ clearInterval(timerInterval);
+ handleAnswer(answer, gameMechanics);
+ });
+ answersElement.appendChild(button);
+ });
+
+ if (gameMechanics.time_based_mechanics.timer_enabled) {
+ startTimer(gameMechanics.time_based_mechanics.timer_duration, timerElement, gameMechanics);
+ } else {
+ timerElement.style.display = 'none';
+ }
+
+ // Enable power-ups
+ enablePowerUps(gameMechanics);
+}
+
+function handleAnswer(answer, gameMechanics) {
+ const scoreElement = document.getElementById('score');
+ const levelElement = document.getElementById('level');
+ const xpElement = document.getElementById('xp');
+
+ if (answer === currentQuestion.correctAnswer) {
+ streak++;
+ let points = gameMechanics.scoring_system.base_points;
+ if (gameMechanics.scoring_system.streak_bonus) {
+ points += streak * gameMechanics.scoring_system.streak_multiplier;
+ }
+ points += gameMechanics.scoring_system.difficulty_bonus;
+ score += points;
+
+ // Update XP and level
+ xp += gameMechanics.progression_system.xp_per_correct;
+ if (xp >= gameMechanics.progression_system.level_threshold) {
+ level++;
+ xp = 0; // Reset XP after leveling up
+ }
+ } else {
+ streak = 0;
+ }
+ scoreElement.textContent = `Score: ${score}`;
+ levelElement.textContent = `Level: ${level}`;
+ xpElement.textContent = `XP: ${xp}`;
+ loadNextQuestion(gameMechanics);
+}
+
+function enablePowerUps(gameMechanics) {
+ const fiftyFiftyButton = document.getElementById('fiftyFifty');
+ const hintButton = document.getElementById('hint');
+ const skipButton = document.getElementById('skip');
+
+ if (gameMechanics.power_ups.fifty_fifty_enabled) {
+ fiftyFiftyButton.style.display = 'inline-block';
+ fiftyFiftyButton.addEventListener('click', useFiftyFifty);
+ } else {
+ fiftyFiftyButton.style.display = 'none';
+ }
+
+ if (gameMechanics.power_ups.hint_enabled) {
+ hintButton.style.display = 'inline-block';
+ hintButton.addEventListener('click', useHint);
+ } else {
+ hintButton.style.display = 'none';
+ }
+
+ if (gameMechanics.power_ups.skip_question) {
+ skipButton.style.display = 'inline-block';
+ skipButton.addEventListener('click', () => skipQuestion(gameMechanics));
+ } else {
+ skipButton.style.display = 'none';
+ }
+}
+
+function useFiftyFifty() {
+ const answersElement = document.getElementById('answers');
+ const buttons = Array.from(answersElement.getElementsByTagName('button'));
+ const incorrectAnswers = buttons.filter(button => button.textContent !== currentQuestion.correctAnswer);
+
+ // Remove two incorrect answers
+ for (let i = 0; i < 2 && incorrectAnswers.length > 0; i++) {
+ const index = Math.floor(Math.random() * incorrectAnswers.length);
+ incorrectAnswers[index].remove();
+ incorrectAnswers.splice(index, 1);
+ }
+}
+
+function useHint() {
+ alert(`Hint: The correct answer is ${currentQuestion.correctAnswer}`);
+}
+
+function skipQuestion(gameMechanics) {
+ clearInterval(timerInterval);
+ loadNextQuestion(gameMechanics);
+}
\ No newline at end of file
diff --git a/scripts/timer.js b/scripts/timer.js
new file mode 100644
index 0000000..9a14a4a
--- /dev/null
+++ b/scripts/timer.js
@@ -0,0 +1,14 @@
+function startTimer(duration, display, gameMechanics) {
+ let timer = duration;
+ display.textContent = `Time left: ${timer} seconds`;
+
+ timerInterval = setInterval(() => {
+ timer--;
+ display.textContent = `Time left: ${timer} seconds`;
+
+ if (timer <= 0) {
+ clearInterval(timerInterval);
+ handleAnswer(null, gameMechanics); // Move to the next question when time is up
+ }
+ }, 1000);
+}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..4e5648c
--- /dev/null
+++ b/style.css
@@ -0,0 +1,120 @@
+/* Base styles */
+body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #f4f4f9;
+ color: #333;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ transition: background-color 0.3s, color 0.3s;
+}
+
+header {
+ width: 100%;
+ background-color: #6200ea;
+ color: #fff;
+}
+
+.navbar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1em;
+}
+
+.navbar-brand {
+ font-size: 1.5em;
+ font-weight: bold;
+}
+
+.navbar-nav {
+ list-style: none;
+ display: flex;
+ gap: 1em;
+}
+
+.nav-item a {
+ color: #fff;
+ text-decoration: none;
+ transition: color 0.3s;
+}
+
+.nav-item a:hover {
+ color: #bb86fc;
+}
+
+main {
+ padding: 1em;
+ text-align: center;
+ width: 100%;
+ max-width: 600px;
+}
+
+.btn {
+ margin: 0.5em;
+ padding: 0.5em 1em;
+ cursor: pointer;
+ background-color: #6200ea;
+ color: #fff;
+ border: none;
+ border-radius: 5px;
+ transition: background-color 0.3s;
+}
+
+.btn:hover {
+ background-color: #3700b3;
+}
+
+.game-info {
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1em;
+}
+
+.question-container {
+ background-color: #fff;
+ padding: 1em;
+ border-radius: 10px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ margin-bottom: 1em;
+}
+
+.answers {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.answers button {
+ margin: 0.5em 0;
+ padding: 0.5em 1em;
+ cursor: pointer;
+ background-color: #03dac6;
+ color: #000;
+ border: none;
+ border-radius: 5px;
+ transition: background-color 0.3s;
+}
+
+.answers button:hover {
+ background-color: #018786;
+}
+
+.power-ups {
+ display: flex;
+ justify-content: space-around;
+ margin-top: 1em;
+}
+
+#timer {
+ font-size: 1.2em;
+ margin-top: 1em;
+}
+
+#mechanics, #accessibility {
+ margin-top: 2em;
+}
\ No newline at end of file