Spaces:

eaglelandsonce
/

Puzzle_Reveal_Game

Running

App Files Files Community

eaglelandsonce commited on Jan 19

Commit

64df586

verified ·

1 Parent(s): 35b1535

Update index.html

Browse files

Files changed (1) hide show

index.html +323 -296

index.html CHANGED Viewed

@@ -1,318 +1,345 @@
-<!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <title>Azure Hierarchy Builder</title>
-  <style>
-    body {
-      font-family: Arial, sans-serif;
-      background: #f4f6f8;
-      margin: 0;
-      padding: 20px;
-      text-align: center;
-    }
-    h1 {
-      color: #0078d4;
-    }
-    #timer {
-      font-size: 1.2rem;
-      color: #d32f2f;
-      margin: 10px 0;
-    }
-    #game-container {
-      display: flex;
-      justify-content: center;
-      flex-wrap: wrap;
-      margin: 20px auto;
-      gap: 20px;
-    }
-    .drop-zone {
-      background: #ffffff;
-      border: 2px dashed #0078d4;
-      border-radius: 8px;
-      width: 200px;
-      min-height: 100px;
-      padding: 10px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      transition: background 0.3s, border-color 0.3s;
-    }
-    .drop-zone.correct {
-      background: #c8e6c9;
-      border-color: #388e3c;
-    }
-    .drop-zone.incorrect {
-      background: #ffcdd2;
-      border-color: #d32f2f;
-    }
-    .drop-zone-header {
-      font-weight: bold;
-      margin-bottom: 10px;
-      color: #0078d4;
-    }
-    #items-container {
-      display: flex;
-      justify-content: center;
-      flex-wrap: wrap;
-      gap: 10px;
-    }
-    .draggable-item {
-      background: #d9f3fc;
-      border: 1px solid #0078d4;
-      border-radius: 4px;
-      padding: 10px 15px;
-      cursor: grab;
-      user-select: none;
-      transition: transform 0.2s, background 0.3s;
-    }
-    .draggable-item.dragging {
-      opacity: 0.5;
-      transform: scale(1.1);
-    }
-    #feedback {
-      font-size: 1.1rem;
-      margin: 20px 0;
-      color: #333;
-    }
-    #scoreboard {
-      font-size: 1rem;
-      color: #004d40;
-      margin-bottom: 20px;
-    }
-    #restart-btn {
-      padding: 10px 20px;
-      font-size: 1rem;
-      cursor: pointer;
-      background-color: #00796b;
-      color: #fff;
-      border: none;
-      border-radius: 4px;
-      transition: background-color 0.3s;
-    }
-    #restart-btn:hover {
-      background-color: #004d40;
-    }
-  </style>
-</head>
-<body>
-  <h1>Azure Hierarchy Builder</h1>
-  <div id="timer">Time Left: <span id="time">120</span>s</div>
-  <div id="game-container"></div>
-  <div id="items-container">
-    <!-- Draggable items will be dynamically added here -->
-  </div>
-  <div id="feedback"></div>
-  <div id="scoreboard">Score: <span id="score">0</span>%</div>
-  <button id="restart-btn" class="hidden" onclick="restartGame()">Restart Game</button>
-  <script>
-    /*****************************************************
-     *            GAME DATA & SETUP
-     *****************************************************/
-    const levels = [
-      {
-        name: "Level 1: Basic Hierarchy",
-        description: "Arrange the hierarchy from Management Groups to Resources.",
-        hierarchy: [
-          { name: "Management Groups", order: 1, hint: "Top-level structure for organizing policies" },
-          { name: "Subscriptions", order: 2, hint: "Billing units with associated resource limits" },
-          { name: "Resource Groups", order: 3, hint: "Organizes resources into manageable units" },
-          { name: "Resources", order: 4, hint: "Actual Azure services like VMs and databases" }
-        ]
-      },
-      {
-        name: "Level 2: Policies and Budgets",
-        description: "Place policies and budgets at the appropriate levels.",
-        hierarchy: [
-          { name: "Security Policy", order: 1, hint: "Must be applied at the Management Group level" },
-          { name: "Budget", order: 2, hint: "Assigned to Subscriptions for cost control" },
-          { name: "Resource Groups", order: 3, hint: "Organizes resources into manageable units" },
-          { name: "Resources", order: 4, hint: "Actual Azure services like VMs and databases" }
-        ]
-      },
-      {
-        name: "Level 3: Azure Resources",
-        description: "Assign specific resources to the correct groups.",
-        hierarchy: [
-          { name: "Virtual Machines", order: 3, hint: "Placed under Resource Groups" },
-          { name: "SQL Databases", order: 3, hint: "Placed under Resource Groups" },
-          { name: "Budget", order: 2, hint: "Assigned to Subscriptions for cost control" },
-          { name: "Security Policy", order: 1, hint: "Applied at the Management Group level" }
-        ]
-      }
-    ];
-    let currentLevel = 0;
-    let correctCount = 0;
-    let totalItems = 0;
-    let timeLeft = 120; // seconds
-    let timerInterval;
-    const gameContainer = document.getElementById("game-container");
-    const itemsContainer = document.getElementById("items-container");
-    const feedbackDiv = document.getElementById("feedback");
-    const scoreSpan = document.getElementById("score");
-    const timerSpan = document.getElementById("time");
-    const restartBtn = document.getElementById("restart-btn");
-    function initGame() {
-      totalItems = levels.reduce((sum, level) => sum + level.hierarchy.length, 0);
-      startTimer();
-      loadLevel();
-    }
-    function loadLevel() {
-      const level = levels[currentLevel];
-      feedbackDiv.textContent = "";
-      gameContainer.innerHTML = "";
-      itemsContainer.innerHTML = "";
-      document.querySelector("h1").textContent = level.name;
-      feedbackDiv.textContent = level.description;
-      // Create drop zones in order
-      level.hierarchy.forEach(item => {
-        const dropZone = document.createElement("div");
-        dropZone.classList.add("drop-zone");
-        dropZone.id = `drop-zone-${item.order}`;
-        dropZone.setAttribute("ondragover", "allowDrop(event)");
-        dropZone.setAttribute("ondrop", `dropItem(event, 'drop-zone-${item.order}')`);
-        dropZone.innerHTML = `<div class="drop-zone-header">${item.name}</div>`;
-        gameContainer.appendChild(dropZone);
-      });
-      // Shuffle the draggable items
-      const shuffledItems = shuffleArray([...level.hierarchy]);
-      shuffledItems.forEach(item => {
-        const draggable = document.createElement("div");
-        draggable.classList.add("draggable-item");
-        draggable.setAttribute("draggable", "true");
-        draggable.setAttribute("data-order", item.order);
-        draggable.setAttribute("data-attempted", "false"); // Track if item has been attempted
-        draggable.textContent = item.hint;
-        draggable.addEventListener("dragstart", dragStart);
-        itemsContainer.appendChild(draggable);
-      });
-    }
-    function shuffleArray(array) {
-      for (let i = array.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        [array[i], array[j]] = [array[j], array[i]];
-      }
-      return array;
-    }
-    function allowDrop(event) {
-      event.preventDefault();
-    }
-    function dragStart(event) {
-      event.dataTransfer.setData("text/plain", event.target.getAttribute("data-order"));
-      event.dataTransfer.setData("attempted", event.target.getAttribute("data-attempted"));
-    }
-    function dropItem(event, zoneId) {
-      event.preventDefault();
-      const draggedOrder = parseInt(event.dataTransfer.getData("text/plain"));
-      const attempted = event.dataTransfer.getData("attempted") === "true";
-      const zoneNumber = parseInt(zoneId.replace("drop-zone-", ""));
-      const draggedElement = Array.from(itemsContainer.children).find(
-        (child) => parseInt(child.getAttribute("data-order")) === draggedOrder
-      );
-      if (draggedOrder === zoneNumber) {
-        event.currentTarget.appendChild(draggedElement);
-        event.currentTarget.classList.add("correct");
-        if (!attempted) {
-          correctCount++;
         }
-        draggedElement.setAttribute("data-attempted", "true");
-        feedbackDiv.textContent = `Correct! "${draggedElement.textContent}" placed correctly.`;
-      } else {
-        event.currentTarget.classList.add("incorrect");
-        draggedElement.setAttribute("data-attempted", "true");
-        feedbackDiv.textContent = `Incorrect! "${draggedElement.textContent}" doesn't belong here.`;
-      }
-      updateScoreboard();
-      checkEndLevel();
-    }
-    function startTimer() {
-      timerSpan.textContent = timeLeft;
-      clearInterval(timerInterval);
-      timerInterval = setInterval(() => {
-        timeLeft--;
-        timerSpan.textContent = timeLeft;
-        if (timeLeft <= 0) {
-          clearInterval(timerInterval);
-          endGame(false);
         }
-      }, 1000);
-    }
-    function updateScoreboard() {
-      const percentage = ((correctCount / totalItems) * 100).toFixed(2);
-      scoreSpan.textContent = percentage;
-    }
-    function checkEndLevel() {
-      const placedItems = document.querySelectorAll(".drop-zone .draggable-item");
-      if (placedItems.length === levels[currentLevel].hierarchy.length) {
-        currentLevel++;
-        if (currentLevel < levels.length) {
-          loadLevel();
-        } else {
-          endGame(true);
         }
-      }
-    }
-    function endGame(won) {
-      clearInterval(timerInterval);
-      const percentage = ((correctCount / totalItems) * 100).toFixed(2);
-      if (won && percentage >= 70) {
-        feedbackDiv.textContent = `Congratulations! You've completed all levels with a score of ${percentage}%.`;
-      } else {
-        feedbackDiv.textContent = `Try again! Your score was ${percentage}%.`;
-      }
-      restartBtn.classList.remove("hidden");
-    }
-    function restartGame() {
-      currentLevel = 0;
-      correctCount = 0;
-      timeLeft = 120;
-      initGame();
-    }
-    window.onload = initGame;
-  </script>
 </body>
 </html>

+\<!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Puzzle Quiz Game</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            background-color: #f4f4f9;
+            padding: 20px;
+        }
+        .puzzle-container {
+            position: relative;
+            width: 400px;
+            height: 300px;
+            margin: 0 auto;
+        }
+        .puzzle {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            grid-template-rows: repeat(3, 1fr);
+            gap: 2px;
+        }
+        .piece {
+            background-color: #444;
+            border: 1px solid #333;
+            cursor: pointer;
+        }
+        .piece.hidden {
+            visibility: hidden;
+        }
+        .background-image {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: url('kesslerimage.jpg');
+            background-size: cover;
+            z-index: -1;
+        }
+        #question {
+            margin-top: 20px;
+            font-size: 18px;
+        }
+        .answers {
+            margin-top: 10px;
+        }
+        .answer {
+            margin: 5px;
+            padding: 10px 20px;
+            border: none;
+            cursor: pointer;
+            background-color: #007BFF;
+            color: white;
+            font-size: 16px;
+            border-radius: 5px;
+        }
+        .answer:hover {
+            background-color: #0056b3;
+        }
+        #result {
+            margin-top: 15px;
+            font-size: 20px;
+        }
+        #timer {
+            font-size: 18px;
+            margin-top: 10px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Puzzle Quiz Game</h1>
+    <p>Answer questions to remove pieces and reveal the hidden image!</p>
+    <div class="puzzle-container">
+        <div class="background-image"></div>
+        <div class="puzzle" id="puzzle-board">
+            <!-- Puzzle pieces -->
+            <div class="piece" id="piece-1"></div>
+            <div class="piece" id="piece-2"></div>
+            <div class="piece" id="piece-3"></div>
+            <div class="piece" id="piece-4"></div>
+            <div class="piece" id="piece-5"></div>
+            <div class="piece" id="piece-6"></div>
+            <div class="piece" id="piece-7"></div>
+            <div class="piece" id="piece-8"></div>
+            <div class="piece" id="piece-9"></div>
+            <div class="piece" id="piece-10"></div>
+            <div class="piece" id="piece-11"></div>
+            <div class="piece" id="piece-12"></div>
+        </div>
+    </div>
+    <div id="timer">Time Remaining: 120 seconds</div>
+    <div id="question">Click on the start button to begin!</div>
+    <div class="answers" id="answers">
+        <button class="answer" id="start-btn">Start</button>
+    </div>
+    <div id="result"></div>
+    <script>
+        const questions = [
+            {
+                question: "What is a key benefit of Azure ExpressRoute?",
+                answers: [
+                    "Faster speeds and higher security",
+                    "Free data storage",
+                    "Unlimited users",
+                    "Global internet access"
+                ],
+                correct: 0
+            },
+            {
+                question: "Which protocol does ExpressRoute use for dynamic routing?",
+                answers: [
+                    "TCP",
+                    "UDP",
+                    "BGP",
+                    "HTTP"
+                ],
+                correct: 2
+            },
+            {
+                question: "What is the ExpressRoute premium add-on used for?",
+                answers: [
+                    "Increased data storage",
+                    "Global connectivity",
+                    "Unlimited bandwidth",
+                    "Free Microsoft 365 access"
+                ],
+                correct: 1
+            },
+            {
+                question: "How many connections are required for redundancy in ExpressRoute?",
+                answers: [
+                    "1",
+                    "2",
+                    "3",
+                    "4"
+                ],
+                correct: 1
+            },
+            {
+                question: "What does ExpressRoute Global Reach allow you to do?",
+                answers: [
+                    "Connect multiple data centers via Microsoft's network",
+                    "Access Microsoft services for free",
+                    "Increase bandwidth limits",
+                    "Enable dynamic scaling"
+                ],
+                correct: 0
+            },
+            {
+                question: "Which Microsoft service supports ExpressRoute?",
+                answers: [
+                    "Microsoft 365",
+                    "Xbox Live",
+                    "LinkedIn",
+                    "GitHub"
+                ],
+                correct: 0
+            },
+            {
+                question: "What is the minimum bandwidth for an ExpressRoute circuit?",
+                answers: [
+                    "50 Mbps",
+                    "100 Mbps",
+                    "200 Mbps",
+                    "500 Mbps"
+                ],
+                correct: 0
+            },
+            {
+                question: "What protocol does Microsoft use for routing in ExpressRoute?",
+                answers: [
+                    "OSPF",
+                    "RIP",
+                    "BGP",
+                    "EIGRP"
+                ],
+                correct: 2
+            },
+            {
+                question: "What feature does ExpressRoute Direct provide?",
+                answers: [
+                    "Dual 100-Gbps connectivity",
+                    "Single point of failure",
+                    "Free support",
+                    "Global internet access"
+                ],
+                correct: 0
+            },
+            {
+                question: "Which of the following is a connectivity option for ExpressRoute?",
+                answers: [
+                    "Point-to-point Ethernet",
+                    "Wi-Fi",
+                    "Bluetooth",
+                    "Satellite"
+                ],
+                correct: 0
+            },
+            {
+                question: "What is the purpose of the Local SKU in ExpressRoute?",
+                answers: [
+                    "Cost-effective data transfer",
+                    "Global connectivity",
+                    "Increased bandwidth",
+                    "Free cloud services"
+                ],
+                correct: 0
+            },
+            {
+                question: "What does ExpressRoute offer over public internet connections?",
+                answers: [
+                    "Higher security and reliability",
+                    "Faster hardware upgrades",
+                    "Global service guarantees",
+                    "Lower latency for gaming"
+                ],
+                correct: 0
+            }
+        ];
+        let currentQuestionIndex = 0;
+        let remainingPieces = Array.from({ length: 12 }, (_, i) => `piece-${i + 1}`);
+        let score = 0;
+        let totalQuestions = 0;
+        let timer;
+        let timeLeft = 120;
+        const puzzleBoard = document.getElementById("puzzle-board");
+        const questionElement = document.getElementById("question");
+        const answersElement = document.getElementById("answers");
+        const resultElement = document.getElementById("result");
+        const timerElement = document.getElementById("timer");
+        function updateTimer() {
+            timerElement.textContent = `Time Remaining: ${timeLeft} seconds`;
+            if (timeLeft <= 0) {
+                clearInterval(timer);
+                endGame(false);
+            }
+            timeLeft--;
+        }
+        function getRandomHiddenPiece() {
+            const randomIndex = Math.floor(Math.random() * remainingPieces.length);
+            const pieceId = remainingPieces.splice(randomIndex, 1)[0];
+            return document.getElementById(pieceId);
+        }
+        function showQuestion() {
+            const question = questions[currentQuestionIndex];
+            questionElement.textContent = question.question;
+            answersElement.innerHTML = "";
+            question.answers.forEach((answer, index) => {
+                const button = document.createElement("button");
+                button.textContent = answer;
+                button.classList.add("answer");
+                button.addEventListener("click", () => checkAnswer(index));
+                answersElement.appendChild(button);
+            });
+        }
+        function checkAnswer(selected) {
+            const question = questions[currentQuestionIndex];
+            totalQuestions++;
+            if (selected === question.correct) {
+                resultElement.textContent = "Correct! A puzzle piece is removed.";
+                score++;
+                revealPiece();
+            } else {
+                resultElement.textContent = "Incorrect. Try again.";
+            }
+            currentQuestionIndex++;
+            if (currentQuestionIndex < questions.length && remainingPieces.length > 0) {
+                showQuestion();
+            } else {
+                clearInterval(timer);
+                endGame(true);
+            }
+        }
+        function revealPiece() {
+            const piece = getRandomHiddenPiece();
+            if (piece) {
+                piece.classList.add("hidden");
+            }
         }
+        function endGame(isTimeRemaining) {
+            const percentage = Math.round((score / totalQuestions) * 100);
+            if (isTimeRemaining && percentage >= 70) {
+                resultElement.textContent = `Congratulations! You passed with a score of ${percentage}%.`;
+            } else {
+                resultElement.textContent = `Game Over! You scored ${percentage}%. Try again!`;
+                const retryButton = document.createElement("button");
+                retryButton.textContent = "Train Again";
+                retryButton.classList.add("answer");
+                retryButton.addEventListener("click", () => {
+                    resetGame();
+                });
+                answersElement.innerHTML = "";
+                answersElement.appendChild(retryButton);
+            }
         }
+        function resetGame() {
+            currentQuestionIndex = 0;
+            score = 0;
+            totalQuestions = 0;
+            timeLeft = 120;
+            remainingPieces = Array.from({ length: 12 }, (_, i) => `piece-${i + 1}`);
+            resultElement.textContent = "";
+            const pieces = document.querySelectorAll(".piece");
+            pieces.forEach(piece => {
+                piece.classList.remove("hidden");
+            });
+            timer = setInterval(updateTimer, 1000);
+            updateTimer();
+            showQuestion();
         }
+        document.getElementById("start-btn").addEventListener("click", () => {
+            resetGame();
+        });
+    </script>
 </body>
 </html>