Spaces:

eaglelandsonce
/

Git_Matching_Game

Running

App Files Files Community

eaglelandsonce commited on Jan 10

Commit

dd0c381

verified ·

1 Parent(s): 434619c

Update index.html

Browse files

Files changed (1) hide show

index.html +270 -18

index.html CHANGED Viewed

@@ -1,19 +1,271 @@
-<!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">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Git Terminology Matching Game</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            line-height: 1.6;
+            color: #333;
+            max-width: 1000px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        h1 {
+            color: #0078D4;
+        }
+        #score {
+            font-size: 18px;
+            font-weight: bold;
+            margin-bottom: 20px;
+        }
+        .game-container {
+            display: flex;
+            justify-content: space-between;
+        }
+        .column {
+            padding: 10px;
+        }
+        #elements {
+            width: 30%;
+        }
+        #descriptions {
+            width: 65%;
+        }
+        .item {
+            background-color: #f0f0f0;
+            border: 1px solid #ddd;
+            padding: 10px;
+            margin-bottom: 10px;
+            cursor: pointer;
+            border-radius: 4px;
+            transition: background-color 0.3s ease;
+        }
+        .item:hover {
+            background-color: #e0e0e0;
+        }
+        .item.selected {
+            background-color: #0078D4;
+            color: white;
+        }
+        .item.correct {
+            background-color: #107C10;
+            color: white;
+        }
+        .item.incorrect {
+            background-color: #D83B01;
+            color: white;
+        }
+        #result {
+            margin-top: 20px;
+            font-weight: bold;
+        }
+        button {
+            background-color: #0078D4;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            cursor: pointer;
+            font-size: 16px;
+            margin-top: 20px;
+            margin-right: 10px;
+            border-radius: 4px;
+            transition: background-color 0.3s ease;
+        }
+        button:hover {
+            background-color: #106EBE;
+        }
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0,0,0,0.4);
+        }
+        .modal-content {
+            background-color: #fefefe;
+            margin: 15% auto;
+            padding: 20px;
+            border: 1px solid #888;
+            width: 80%;
+            max-width: 800px;
+            border-radius: 8px;
+        }
+        .close {
+            color: #aaa;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+            cursor: pointer;
+        }
+        .close:hover,
+        .close:focus {
+            color: black;
+            text-decoration: none;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <h1>Git Terminology Matching Game</h1>
+    <div id="score">Score: 0 / 15</div>
+    <p>Match the Git terms with their descriptions. Click on an item from each column to make a match.</p>
+    <div class="game-container">
+        <div class="column" id="elements"></div>
+        <div class="column" id="descriptions"></div>
+    </div>
+    <div id="result"></div>
+    <button id="replay">Replay Game</button>
+    <button id="showSolution">Show Solution</button>
+    <div id="solutionModal" class="modal">
+        <div class="modal-content">
+            <span class="close">&times;</span>
+            <h2>Solution</h2>
+            <div id="solutionContent"></div>
+        </div>
+    </div>
+    <script>
+        const gameData = [
+            { element: "Working Tree", description: "A directory structure that contains all of the project's files." },
+            { element: "Repository (Repo)", description: "The directory located at the top level of a working tree, hosting all of the project's files along with their version history." },
+            { element: "Clone", description: "The action of creating a copy of a remote repository on a local machine to work on a project to which you have access." },
+            { element: "Fork", description: "The action of creating a GitHub-hosted copy of a remote repository to work on a project to which you don't have access." },
+            { element: "Commit", description: "A snapshot of the changes made to the files in a repository at a specific point in time." },
+            { element: "Staging Area", description: "An intermediate location where changes to files in the working tree are prepared before being committed." },
+            { element: "Branch", description: "A named series of linked commits representing a distinct version of a project." },
+            { element: "Merge", description: "The process of combining changes from one branch (or commit) into another." },
+            { element: "Object", description: "One of four types of entities in a repo: blobs, trees, commits, and tags." },
+            { element: "Hash", description: "A unique, fixed-length identifier representing the contents of an object." },
+            { element: "Remote", description: "A reference to another repository, typically pointing to a service-hosted instance of the repo." },
+            { element: "Pull", description: "The action that fetches changes from a remote repository and merges them into the current branch." },
+            { element: "Push", description: "The action that sends local commits to a remote repository, updating it with local changes." },
+            { element: "Fetch", description: "The action that retrieves changes from a remote repository without automatically merging them." },
+            { element: "Pull Request", description: "A feature in Git-based hosting platforms allowing developers to propose changes to be merged into a target branch." }
+        ];
+        let selectedElement = null;
+        let selectedDescription = null;
+        let correctMatches = 0;
+        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]];
+            }
+        }
+        function createGameBoard() {
+            const elementsContainer = document.getElementById('elements');
+            const descriptionsContainer = document.getElementById('descriptions');
+            elementsContainer.innerHTML = '';
+            descriptionsContainer.innerHTML = '';
+            const shuffledElements = [...gameData];
+            const shuffledDescriptions = [...gameData];
+            shuffleArray(shuffledElements);
+            shuffleArray(shuffledDescriptions);
+            shuffledElements.forEach((item, index) => {
+                const elementDiv = document.createElement('div');
+                elementDiv.className = 'item';
+                elementDiv.textContent = item.element;
+                elementDiv.dataset.index = index;
+                elementDiv.onclick = () => selectItem(elementDiv, 'element');
+                elementsContainer.appendChild(elementDiv);
+            });
+            shuffledDescriptions.forEach((item, index) => {
+                const descriptionDiv = document.createElement('div');
+                descriptionDiv.className = 'item';
+                descriptionDiv.textContent = item.description;
+                descriptionDiv.dataset.index = index;
+                descriptionDiv.onclick = () => selectItem(descriptionDiv, 'description');
+                descriptionsContainer.appendChild(descriptionDiv);
+            });
+        }
+        function selectItem(item, type) {
+            if (type === 'element') {
+                if (selectedElement && selectedElement.classList) {
+                    selectedElement.classList.remove('selected');
+                }
+                selectedElement = item;
+            } else {
+                if (selectedDescription && selectedDescription.classList) {
+                    selectedDescription.classList.remove('selected');
+                }
+                selectedDescription = item;
+            }
+            item.classList.add('selected');
+            if (selectedElement && selectedDescription) {
+                checkMatch();
+            }
+        }
+        function checkMatch() {
+            const elementIndex = gameData.findIndex(item => item.element === selectedElement.textContent);
+            const descriptionIndex = gameData.findIndex(item => item.description === selectedDescription.textContent);
+            if (elementIndex === descriptionIndex) {
+                selectedElement.classList.add('correct');
+                selectedDescription.classList.add('correct');
+                correctMatches++;
+                updateScore();
+                if (correctMatches === gameData.length) {
+                    document.getElementById('result').textContent = 'Congratulations! You\'ve matched all items correctly!';
+                }
+            } else {
+                selectedElement.classList.add('incorrect');
+                selectedDescription.classList.add('incorrect');
+                setTimeout(() => {
+                    if (selectedElement && selectedElement.classList) {
+                        selectedElement.classList.remove('incorrect');
+                    }
+                    if (selectedDescription && selectedDescription.classList) {
+                        selectedDescription.classList.remove('incorrect');
+                    }
+                }, 1000);
+            }
+            if (selectedElement && selectedElement.classList) {
+                selectedElement.classList.remove('selected');
+            }
+            if (selectedDescription && selectedDescription.classList) {
+                selectedDescription.classList.remove('selected');
+            }
+            selectedElement = null;
+            selectedDescription = null;
+        }
+        function updateScore() {
+            document.getElementById('score').textContent = `Score: ${correctMatches} / ${gameData.length}`;
+        }
+        function replayGame() {
+            correctMatches = 0;
+            selectedElement = null;
+            selectedDescription = null;
+            createGameBoard();
+            updateScore();
+            document.getElementById('result').textContent = '';
+        }
+        function showSolution() {
+            const modal = document.getElementById('solutionModal');
+            const solutionContent = document.getElementById('solutionContent');
+            solutionContent.innerHTML = '';
+            gameData.forEach(item => {
+                solutionContent.innerHTML += `<p><strong>${item.element}:</strong> ${item.description}</p>`;
+            });
+            modal.style.display = 'block';
+        }
+        document.getElementById('replay').onclick = replayGame;
+        document.getElementById('showSolution').onclick = showSolution;
+        document.querySelector('.close').onclick = function() {
+            document.getElementById('solutionModal').style.display = 'none';
+        }
+        window.onclick = function(event) {
+            if (event.target == document.getElementById('solutionModal')) {
+                document.getElementById('solutionModal').style.display = 'none';
+            }
+        }
+        createGameBoard();
+        updateScore();
+    </script>
+</body>
 </html>