Spaces:

eaglelandsonce
/

DAX_Jeopardy

Running

App Files Files Community

eaglelandsonce commited on Dec 23, 2024

Commit

9e21b1d

verified ·

1 Parent(s): 24267a6

Update index.html

Browse files

Files changed (1) hide show

index.html +59 -115

index.html CHANGED Viewed

@@ -11,6 +11,7 @@
             flex-direction: column;
             align-items: center;
             background-color: #f0f0f0;
         }
         h1 {
             color: #0078D4;
@@ -18,22 +19,35 @@
         #game-board {
             display: grid;
             grid-template-columns: repeat(5, 1fr);
-            gap: 10px;
-            margin-bottom: 20px;
         }
         .card {
-            width: 150px;
-            height: 100px;
             background-color: #0078D4;
-            color: #ffffff;
             display: flex;
             justify-content: center;
             align-items: center;
             font-size: 16px;
             font-weight: bold;
             cursor: pointer;
-            transition: background-color 0.3s;
             text-align: center;
         }
         .card:hover {
             background-color: #005a9e;
@@ -63,7 +77,15 @@
 <body>
     <h1>DAX Jeopardy</h1>
     <p><strong>Learn More:</strong> <a href="https://learn.microsoft.com/en-us/dax/" target="_blank">DAX Documentation</a></p>
-    <div id="game-board"></div>
     <div id="question-display"></div>
     <div id="score">Score: 0</div>
@@ -71,117 +93,57 @@
         const categories = ['Basics', 'Functions', 'Context', 'Formulas', 'Troubleshooting'];
         const questions = [
             [
-                {
-                    q: "What does DAX stand for?",
-                    a: ["Data Analysis Expressions", "Dynamic Analysis Extensions", "Data Analytics Extra"],
-                    correct: 0
-                },
-                {
-                    q: "Which tool does NOT use DAX?",
-                    a: ["Power BI", "Excel", "Notepad++"],
-                    correct: 2
-                },
-                {
-                    q: "What is the primary use of DAX?",
-                    a: ["Creating relationships", "Performing advanced calculations", "Designing UIs"],
-                    correct: 1
-                }
             ],
             [
-                {
-                    q: "Which function calculates the sum of a column?",
-                    a: ["COUNT", "SUM", "AVERAGE"],
-                    correct: 1
-                },
-                {
-                    q: "What does the RELATED function do?",
-                    a: ["Creates relationships", "Fetches related table values", "Deletes relationships"],
-                    correct: 1
-                },
-                {
-                    q: "Which function calculates dynamic totals over a filtered table?",
-                    a: ["SUMX", "COUNT", "MIN"],
-                    correct: 0
-                }
             ],
             [
-                {
-                    q: "What are the types of context in DAX?",
-                    a: ["Row, Filter, Query", "Row, Column, Cell", "Table, Query, Function"],
-                    correct: 0
-                },
-                {
-                    q: "What is row context?",
-                    a: ["The entire table", "The current row being evaluated", "All rows in the column"],
-                    correct: 1
-                },
-                {
-                    q: "Which function allows access to an earlier row context?",
-                    a: ["EARLIER", "ROWCONTEXT", "PREVIOUS"],
-                    correct: 0
-                }
             ],
             [
-                {
-                    q: "What symbol starts every DAX formula?",
-                    a: ["=", "+", "*"],
-                    correct: 0
-                },
-                {
-                    q: "What does a calculated column do?",
-                    a: ["Applies filters", "Adds computed values to rows", "Creates relationships"],
-                    correct: 1
-                },
-                {
-                    q: "Which function creates a calculated table?",
-                    a: ["SUMMARIZECOLUMNS", "ADDCOLUMNS", "CALCULATETABLE"],
-                    correct: 2
-                }
             ],
             [
-                {
-                    q: "What error type occurs when a column is missing?",
-                    a: ["Syntax error", "Semantic error", "Calculation error"],
-                    correct: 1
-                },
-                {
-                    q: "What might cause unexpected results in a formula?",
-                    a: ["Data type mismatches", "Correct column names", "Updated data models"],
-                    correct: 0
-                },
-                {
-                    q: "What does AutoComplete help with in DAX?",
-                    a: ["Syntax validation", "Data refresh", "Efficient querying"],
-                    correct: 0
-                }
             ]
         ];
         let score = 0;
-        let timeoutId;
         const gameBoard = document.getElementById('game-board');
         const questionDisplay = document.getElementById('question-display');
         const scoreDisplay = document.getElementById('score');
         function createBoard() {
-            for (let i = 0; i < 5; i++) {
-                for (let j = 0; j < 3; j++) {
                     const card = document.createElement('div');
                     card.className = 'card';
-                    card.textContent = `${categories[i]} $${(j + 1) * 100}`;
-                    card.onclick = () => showQuestion(i, j, card);
                     gameBoard.appendChild(card);
                 }
             }
         }
         function showQuestion(category, difficulty, cardElement) {
             if (cardElement.classList.contains('disabled')) return;
-            if (timeoutId) {
-                clearTimeout(timeoutId);
-                timeoutId = null;
-            }
             const question = questions[category][difficulty];
-            let answerHtml = question.a.map((answer, index) =>
                 `<button class="answer-btn" onclick="checkAnswer(${category}, ${difficulty}, ${index})">${answer}</button>`
             ).join('');
             questionDisplay.innerHTML = `
                 <h2>${categories[category]} for $${(difficulty + 1) * 100}</h2>
                 <p>${question.q}</p>
@@ -189,36 +151,18 @@
             `;
             cardElement.classList.add('disabled');
             cardElement.style.backgroundColor = '#cccccc';
-            cardElement.style.cursor = 'default';
         }
         function checkAnswer(category, difficulty, selectedAnswer) {
-            const buttons = document.querySelectorAll('.answer-btn');
-            buttons.forEach(btn => btn.disabled = true);
             const question = questions[category][difficulty];
             const isCorrect = selectedAnswer === question.correct;
             const value = (difficulty + 1) * 100;
-            if (isCorrect) {
-                score += value;
-                questionDisplay.innerHTML += `<p style="color: green;">Correct! You earned $${value}.</p>`;
-            } else {
-                score -= value;
-                questionDisplay.innerHTML += `<p style="color: red;">Sorry, that's incorrect. You lost $${value}. The correct answer was: ${question.a[question.correct]}</p>`;
-            }
             scoreDisplay.textContent = `Score: ${score}`;
-            timeoutId = setTimeout(() => {
-                clearQuestion();
-                checkGameCompletion();
-            }, 2000);
-        }
-        function clearQuestion() {
-            questionDisplay.innerHTML = '';
-        }
-        function checkGameCompletion() {
-            const remainingCards = document.querySelectorAll('.card:not(.disabled)');
-            if (remainingCards.length === 0) {
-                questionDisplay.innerHTML = `<h2>Game Over!</h2><p>Your final score is $${score}.</p>`;
-            }
         }
         createBoard();
     </script>
 </body>

             flex-direction: column;
             align-items: center;
             background-color: #f0f0f0;
+            margin: 0;
         }
         h1 {
             color: #0078D4;
         #game-board {
             display: grid;
             grid-template-columns: repeat(5, 1fr);
+            grid-auto-rows: 100px;
+            gap: 2px;
+            margin: 20px 0;
+            background-color: #000;
+            border: 4px solid #000;
+        }
+        .category {
+            background-color: #005a9e;
+            color: #fff;
+            font-weight: bold;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            font-size: 18px;
+            border: 1px solid #000;
         }
         .card {
             background-color: #0078D4;
+            color: #fff;
             display: flex;
             justify-content: center;
             align-items: center;
             font-size: 16px;
             font-weight: bold;
             cursor: pointer;
+            border: 1px solid #000;
             text-align: center;
+            transition: background-color 0.3s;
         }
         .card:hover {
             background-color: #005a9e;
 <body>
     <h1>DAX Jeopardy</h1>
     <p><strong>Learn More:</strong> <a href="https://learn.microsoft.com/en-us/dax/" target="_blank">DAX Documentation</a></p>
+    <div id="game-board">
+        <!-- Categories -->
+        <div class="category">Basics</div>
+        <div class="category">Functions</div>
+        <div class="category">Context</div>
+        <div class="category">Formulas</div>
+        <div class="category">Troubleshooting</div>
+        <!-- Cards will be dynamically added here -->
+    </div>
     <div id="question-display"></div>
     <div id="score">Score: 0</div>
         const categories = ['Basics', 'Functions', 'Context', 'Formulas', 'Troubleshooting'];
         const questions = [
             [
+                { q: "What does DAX stand for?", a: ["Data Analysis Expressions", "Dynamic Analysis Extensions", "Data Analytics Extra"], correct: 0 },
+                { q: "Which tool does NOT use DAX?", a: ["Power BI", "Excel", "Notepad++"], correct: 2 },
+                { q: "What is the primary use of DAX?", a: ["Creating relationships", "Performing advanced calculations", "Designing UIs"], correct: 1 }
             ],
             [
+                { q: "Which function calculates the sum of a column?", a: ["COUNT", "SUM", "AVERAGE"], correct: 1 },
+                { q: "What does the RELATED function do?", a: ["Creates relationships", "Fetches related table values", "Deletes relationships"], correct: 1 },
+                { q: "Which function calculates dynamic totals over a filtered table?", a: ["SUMX", "COUNT", "MIN"], correct: 0 }
             ],
             [
+                { q: "What are the types of context in DAX?", a: ["Row, Filter, Query", "Row, Column, Cell", "Table, Query, Function"], correct: 0 },
+                { q: "What is row context?", a: ["The entire table", "The current row being evaluated", "All rows in the column"], correct: 1 },
+                { q: "Which function allows access to an earlier row context?", a: ["EARLIER", "ROWCONTEXT", "PREVIOUS"], correct: 0 }
             ],
             [
+                { q: "What symbol starts every DAX formula?", a: ["=", "+", "*"], correct: 0 },
+                { q: "What does a calculated column do?", a: ["Applies filters", "Adds computed values to rows", "Creates relationships"], correct: 1 },
+                { q: "Which function creates a calculated table?", a: ["SUMMARIZECOLUMNS", "ADDCOLUMNS", "CALCULATETABLE"], correct: 2 }
             ],
             [
+                { q: "What error type occurs when a column is missing?", a: ["Syntax error", "Semantic error", "Calculation error"], correct: 1 },
+                { q: "What might cause unexpected results in a formula?", a: ["Data type mismatches", "Correct column names", "Updated data models"], correct: 0 },
+                { q: "What does AutoComplete help with in DAX?", a: ["Syntax validation", "Data refresh", "Efficient querying"], correct: 0 }
             ]
         ];
         let score = 0;
         const gameBoard = document.getElementById('game-board');
         const questionDisplay = document.getElementById('question-display');
         const scoreDisplay = document.getElementById('score');
         function createBoard() {
+            for (let row = 0; row < 3; row++) {
+                for (let col = 0; col < 5; col++) {
                     const card = document.createElement('div');
                     card.className = 'card';
+                    card.textContent = `$${(row + 1) * 100}`;
+                    card.onclick = () => showQuestion(col, row, card);
                     gameBoard.appendChild(card);
                 }
             }
         }
         function showQuestion(category, difficulty, cardElement) {
             if (cardElement.classList.contains('disabled')) return;
             const question = questions[category][difficulty];
+            let answerHtml = question.a.map((answer, index) =>
                 `<button class="answer-btn" onclick="checkAnswer(${category}, ${difficulty}, ${index})">${answer}</button>`
             ).join('');
             questionDisplay.innerHTML = `
                 <h2>${categories[category]} for $${(difficulty + 1) * 100}</h2>
                 <p>${question.q}</p>
             `;
             cardElement.classList.add('disabled');
             cardElement.style.backgroundColor = '#cccccc';
         }
         function checkAnswer(category, difficulty, selectedAnswer) {
             const question = questions[category][difficulty];
             const isCorrect = selectedAnswer === question.correct;
             const value = (difficulty + 1) * 100;
+            score += isCorrect ? value : -value;
             scoreDisplay.textContent = `Score: ${score}`;
+            questionDisplay.innerHTML += `<p>${isCorrect ? 'Correct!' : 'Wrong!'}</p>`;
         }
         createBoard();
     </script>
 </body>