Spaces:

eaglelandsonce
/

GitHub_Copilot_Basics

Running

App Files Files Community

eaglelandsonce commited on 17 days ago

Commit

3d1507e

verified ·

1 Parent(s): 33a0b2e

Update index.html

Browse files

Files changed (1) hide show

index.html +442 -18

index.html CHANGED Viewed

@@ -1,19 +1,443 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>RDD Hangman</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background: #f0f2f5;
+      margin: 0;
+      padding: 0;
+      text-align: center;
+    }
+    header {
+      background-color: #0078d4;
+      color: #fff;
+      padding: 1rem;
+    }
+    h1 {
+      margin: 0;
+      font-size: 1.8rem;
+    }
+    .container {
+      max-width: 900px;
+      margin: 2rem auto;
+      background: #fff;
+      padding: 2rem;
+      border-radius: 8px;
+      box-shadow: 0 0 10px rgba(0,0,0,0.1);
+      text-align: left;
+    }
+    #hangman-container {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: flex-start;
+    }
+    /* SVG container */
+    #svg-container {
+      width: 250px;
+      margin-right: 2rem;
+      margin-bottom: 2rem;
+    }
+    #quiz-content {
+      flex: 1;
+      margin: 0 1rem;
+      min-width: 250px;
+    }
+    #question {
+      font-size: 1.2rem;
+      font-weight: bold;
+      margin-bottom: 1rem;
+    }
+    .btn-row {
+      margin-top: 1rem;
+    }
+    button {
+      padding: 0.6rem 1.2rem;
+      font-size: 1rem;
+      margin: 0.5rem;
+      cursor: pointer;
+      border: none;
+      border-radius: 4px;
+      background-color: #0078d4;
+      color: #fff;
+      transition: background-color 0.3s ease;
+    }
+    button:hover {
+      background-color: #005fa3;
+    }
+    #feedback {
+      font-weight: bold;
+      margin-top: 1rem;
+      min-height: 24px;
+    }
+    #explanation {
+      margin-top: 1rem;
+      padding: 1rem;
+      border: 1px solid #ccc;
+      border-radius: 6px;
+      display: none;
+      background: #fafafa;
+    }
+    #next-btn, #restart-btn {
+      margin-top: 1rem;
+    }
+    #restart-btn {
+      background-color: #ff7675;
+    }
+    #restart-btn:hover {
+      background-color: #d63031;
+    }
+    #hint-btn {
+      background-color: #f1c40f;
+      color: #000;
+    }
+    #hint-btn:hover {
+      background-color: #d4ac0d;
+      color: #fff;
+    }
+    /* Cheat Sheet styling */
+    #cheat-sheet {
+      display: none;
+      position: fixed;
+      top: 10%;
+      left: 50%;
+      transform: translateX(-50%);
+      background: #fff;
+      padding: 20px;
+      border: 2px solid #444;
+      box-shadow: 0 0 10px rgba(0,0,0,0.5);
+      z-index: 999;
+      width: 80%;
+      max-width: 600px;
+    }
+    #cheat-sheet h2 {
+      margin-top: 0;
+    }
+    #cheat-sheet ul {
+      list-style: disc;
+      margin: 1rem 0 0 1.5rem;
+      padding: 0;
+      text-align: left;
+    }
+    #close-cheat {
+      float: right;
+      cursor: pointer;
+      font-weight: bold;
+      font-size: 18px;
+      color: red;
+    }
+    /* Responsive layout */
+    @media (max-width: 600px) {
+      #hangman-container {
+        flex-direction: column;
+        align-items: center;
+      }
+      #svg-container {
+        margin-right: 0;
+        margin-bottom: 1.5rem;
+      }
+      #quiz-content {
+        margin: 0;
+      }
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>RDD Hangman</h1>
+  </header>
+  <div class="container">
+    <div id="hangman-container">
+      <!-- SVG Hangman -->
+      <div id="svg-container">
+        <svg
+          width="250"
+          height="300"
+          viewBox="0 0 250 300"
+          style="border:1px solid #ccc;"
+        >
+          <!-- Base line -->
+          <line id="base-line" x1="10" y1="280" x2="240" y2="280" stroke="#444" stroke-width="4" style="display:none;" />
+          <!-- Upright post -->
+          <line id="upright-post" x1="60" y1="280" x2="60" y2="40" stroke="#444" stroke-width="4" style="display:none;" />
+          <!-- Top beam -->
+          <line id="top-beam" x1="60" y1="40" x2="160" y2="40" stroke="#444" stroke-width="4" style="display:none;" />
+          <!-- Rope -->
+          <line id="rope" x1="160" y1="40" x2="160" y2="80" stroke="#444" stroke-width="4" style="display:none;" />
+          <!-- Head -->
+          <circle id="head" cx="160" cy="100" r="20" stroke="#444" stroke-width="4" fill="none" style="display:none;" />
+          <!-- Body -->
+          <line id="body" x1="160" y1="120" x2="160" y2="180" stroke="#444" stroke-width="4" style="display:none;" />
+          <!-- Left arm -->
+          <line id="left-arm" x1="160" y1="140" x2="120" y2="120" stroke="#444" stroke-width="4" style="display:none;" />
+          <!-- Right arm -->
+          <line id="right-arm" x1="160" y1="140" x2="200" y2="120" stroke="#444" stroke-width="4" style="display:none;" />
+          <!-- Left leg -->
+          <line id="left-leg" x1="160" y1="180" x2="130" y2="220" stroke="#444" stroke-width="4" style="display:none;" />
+          <!-- Right leg -->
+          <line id="right-leg" x1="160" y1="180" x2="190" y2="220" stroke="#444" stroke-width="4" style="display:none;" />
+        </svg>
+      </div>
+      <!-- Quiz Section -->
+      <div id="quiz-content">
+        <div id="question">Loading question...</div>
+        <div class="btn-row">
+          <button id="yes-btn">YES</button>
+          <button id="no-btn">NO</button>
+        </div>
+        <div id="feedback"></div>
+        <div id="explanation"></div>
+        <button id="hint-btn">Hint</button>
+        <button id="next-btn" style="display:none;">Next</button>
+        <button id="restart-btn" style="display:none;">Restart</button>
+      </div>
+    </div>
+  </div>
+  <!-- Cheat Sheet Popup -->
+  <div id="cheat-sheet">
+    <span id="close-cheat">X</span>
+    <h2>Key RDD Concepts</h2>
+    <ul>
+      <li><b>Fault Tolerance:</b> RDDs automatically recover from node failures.</li>
+      <li><b>Lazy Evaluation:</b> Transformations are computed only when an action is invoked.</li>
+      <li><b>Caching:</b> Use persist() or cache() to keep RDDs in memory.</li>
+      <li><b>Transformations &amp; Actions:</b> Transformations create new RDDs; actions return results to the driver.</li>
+      <li><b>Partitioning:</b> Data is divided across nodes for parallel processing.</li>
+      <li><b>Shared Variables:</b> Broadcast variables and accumulators help manage data and counters.</li>
+      <li><b>Shuffling:</b> Redistribution of data during aggregations or joins.</li>
+      <li><b>SparkContext:</b> Entry point for Spark functionality.</li>
+      <li><b>Data Sources:</b> RDDs can be created from files, collections, and various storage systems.</li>
+      <li><b>Efficient Aggregation:</b> Operations like reduceByKey optimize data processing.</li>
+    </ul>
+  </div>
+  <script>
+    /****************************************************
+     *              QUIZ QUESTIONS
+     ****************************************************/
+    const quizData = [
+      {
+        question: "Does GitHub Copilot dramatically accelerate developer productivity?",
+        correctAnswer: "yes",
+        explanation: "Yes. Research from GitHub and Microsoft shows a 55% increase in overall productivity when using GitHub Copilot."
+      },
+      {
+        question: "Is GitHub Copilot limited to only one programming language?",
+        correctAnswer: "no",
+        explanation: "No. GitHub Copilot supports all popular programming languages, helping developers regardless of language choice."
+      },
+      {
+        question: "Was GitHub Copilot developed solely by GitHub?",
+        correctAnswer: "no",
+        explanation: "No. GitHub Copilot was developed through a collaboration between GitHub and OpenAI, and it’s powered by OpenAI Codex."
+      },
+      {
+        question: "Is GitHub Copilot powered by OpenAI Codex?",
+        correctAnswer: "yes",
+        explanation: "Yes. GitHub Copilot leverages OpenAI Codex, an AI system more capable than GPT-3 in generating code completions."
+      },
+      {
+        question: "Does GitHub Copilot integrate with multiple IDEs such as Visual Studio Code, Visual Studio, Vim/Neovim, and JetBrains?",
+        correctAnswer: "yes",
+        explanation: "Yes. GitHub Copilot is available as an extension for these popular integrated development environments."
+      },
+      {
+        question: "Does GitHub Copilot Free offer unlimited code completions and chat messages?",
+        correctAnswer: "no",
+        explanation: "No. The free tier is limited to 2000 code completions and 50 chat messages per month."
+      },
+      {
+        question: "Is GitHub Copilot Pro free for verified students, teachers, and maintainers of popular open source projects?",
+        correctAnswer: "yes",
+        explanation: "Yes. Verified students, teachers, and open source maintainers can access GitHub Copilot Pro for free."
+      },
+      {
+        question: "Do organizations benefit from features like policy management and audit logs with GitHub Copilot Business?",
+        correctAnswer: "yes",
+        explanation: "Yes. GitHub Copilot Business adds organization-wide controls such as policy management and audit logs."
+      },
+      {
+        question: "Does GitHub Copilot Enterprise provide additional features like fine tuning a custom large language model?",
+        correctAnswer: "yes",
+        explanation: "Yes. In addition to Business features, GitHub Copilot Enterprise includes capabilities such as fine tuning a custom large language model."
+      },
+      {
+        question: "Is GitHub Copilot Chat completely free from biases and inaccuracies?",
+        correctAnswer: "no",
+        explanation: "No. While powerful, Copilot Chat can exhibit biases from its training data and may sometimes generate inaccurate code."
+      }
+    ];
+    /****************************************************
+     *              HANGMAN PARTS
+     ****************************************************/
+    const hangmanParts = [
+      "base-line",
+      "upright-post",
+      "top-beam",
+      "rope",
+      "head",
+      "body",
+      "left-arm",
+      "right-arm",
+      "left-leg",
+      "right-leg"
+    ];
+    const maxMistakes = hangmanParts.length; // 10 parts
+    /****************************************************
+     *              GAME STATE VARIABLES
+     ****************************************************/
+    let currentQuestionIndex = 0;
+    let mistakes = 0;
+    let gameOver = false;
+    // DOM references
+    const questionDiv = document.getElementById("question");
+    const yesBtn = document.getElementById("yes-btn");
+    const noBtn = document.getElementById("no-btn");
+    const nextBtn = document.getElementById("next-btn");
+    const restartBtn = document.getElementById("restart-btn");
+    const feedbackDiv = document.getElementById("feedback");
+    const explanationDiv = document.getElementById("explanation");
+    const hintBtn = document.getElementById("hint-btn");
+    const cheatSheet = document.getElementById("cheat-sheet");
+    const closeCheat = document.getElementById("close-cheat");
+    // Get references to the SVG parts
+    const svgParts = hangmanParts.map(id => document.getElementById(id));
+    /****************************************************
+     *              INIT GAME
+     ****************************************************/
+    function initGame() {
+      mistakes = 0;
+      currentQuestionIndex = 0;
+      gameOver = false;
+      feedbackDiv.textContent = "";
+      explanationDiv.style.display = "none";
+      restartBtn.style.display = "none";
+      nextBtn.style.display = "none";
+      // Hide all hangman parts
+      svgParts.forEach(part => {
+        if (part) part.style.display = "none";
+      });
+      loadQuestion();
+    }
+    /****************************************************
+     *              LOAD QUESTION
+     ****************************************************/
+    function loadQuestion() {
+      if (currentQuestionIndex >= quizData.length) {
+        // All questions answered
+        endGame(true);
+        return;
+      }
+      feedbackDiv.textContent = "";
+      explanationDiv.style.display = "none";
+      nextBtn.style.display = "none";
+      const currentQ = quizData[currentQuestionIndex];
+      questionDiv.textContent = currentQ.question;
+    }
+    /****************************************************
+     *              HANDLE ANSWER
+     ****************************************************/
+    function handleAnswer(userAnswer) {
+      if (gameOver || currentQuestionIndex >= quizData.length) return;
+      const currentQ = quizData[currentQuestionIndex];
+      explanationDiv.textContent = currentQ.explanation;
+      explanationDiv.style.display = "block";
+      if (userAnswer === currentQ.correctAnswer) {
+        feedbackDiv.textContent = "Correct!";
+      } else {
+        feedbackDiv.textContent = "Incorrect!";
+        mistakes++;
+        updateHangman();
+        if (mistakes >= maxMistakes) {
+          // Reached maximum mistakes
+          endGame(false);
+          return;
+        }
+      }
+      // Show Next button if not the last question
+      if (currentQuestionIndex < quizData.length) {
+        nextBtn.style.display = "inline-block";
+      }
+    }
+    /****************************************************
+     *              UPDATE HANGMAN (DRAW)
+     ****************************************************/
+    function updateHangman() {
+      // Reveal the next part
+      const partToShow = hangmanParts[mistakes - 1];
+      if (partToShow) {
+        document.getElementById(partToShow).style.display = "block";
+      }
+    }
+    /****************************************************
+     *              END GAME
+     ****************************************************/
+    function endGame(userCompletedAll) {
+      gameOver = true;
+      yesBtn.disabled = true;
+      noBtn.disabled = true;
+      nextBtn.style.display = "none";
+      restartBtn.style.display = "inline-block";
+      if (userCompletedAll && mistakes < maxMistakes) {
+        feedbackDiv.textContent = `Congratulations! You answered all ${quizData.length} questions with ${mistakes} mistake(s).`;
+        explanationDiv.textContent = "Game Complete!";
+        explanationDiv.style.display = "block";
+      } else {
+        questionDiv.textContent = "Game Over!";
+        feedbackDiv.textContent = `You made ${mistakes} mistake(s).`;
+        explanationDiv.textContent = "The game has ended.";
+        explanationDiv.style.display = "block";
+      }
+    }
+    /****************************************************
+     *              NEXT QUESTION
+     ****************************************************/
+    function loadNextQuestion() {
+      currentQuestionIndex++;
+      loadQuestion();
+    }
+    /****************************************************
+     *              RESTART GAME
+     ****************************************************/
+    function restartGame() {
+      yesBtn.disabled = false;
+      noBtn.disabled = false;
+      initGame();
+    }
+    /****************************************************
+     *              CHEAT SHEET
+     ****************************************************/
+    function showCheatSheet() {
+      cheatSheet.style.display = "block";
+    }
+    function hideCheatSheet() {
+      cheatSheet.style.display = "none";
+    }
+    /****************************************************
+     *              EVENT LISTENERS
+     ****************************************************/
+    yesBtn.addEventListener("click", () => handleAnswer("yes"));
+    noBtn.addEventListener("click", () => handleAnswer("no"));
+    nextBtn.addEventListener("click", loadNextQuestion);
+    restartBtn.addEventListener("click", restartGame);
+    hintBtn.addEventListener("click", showCheatSheet);
+    closeCheat.addEventListener("click", hideCheatSheet);
+    // Initialize the game on page load
+    initGame();
+  </script>
+</body>
 </html>