diff --git a/Games/Linux_Command_Challenge/README.md b/Games/Linux_Command_Challenge/README.md new file mode 100644 index 000000000..3d9454778 --- /dev/null +++ b/Games/Linux_Command_Challenge/README.md @@ -0,0 +1,73 @@ +# Linux Command Challenge + +Linux Command Challenge is an educational browser game that helps users +practice common Linux terminal commands through a multiple-choice quiz. + +## Project Purpose + +The purpose of the game is to make Linux command practice interactive and +accessible. Players answer questions about common terminal operations and +receive immediate feedback explaining each command. + +## Features + +- Ten Linux command questions +- Multiple-choice answers +- Immediate correct and incorrect feedback +- Score tracking +- Question progress indicator +- Final results screen +- Restart functionality +- Responsive desktop and mobile design +- Keyboard-accessible buttons + +## Commands Covered + +- `pwd` +- `ls` +- `mkdir` +- `cd` +- `cp` +- `mv` +- `rm` +- `chmod` +- `ps` +- `systemctl` + +## Technologies Used + +- HTML5 +- CSS3 +- JavaScript + +No external frameworks, packages, or libraries are required. + +## How to Run the Game + +1. Open the `Linux_Command_Challenge` folder. +2. Open `index.html` in a web browser. +3. Select **Start Challenge**. +4. Answer each question and review the feedback. +5. View the final score or restart the challenge. + +## Testing + +The game should be tested for the following: + +- The start button opens the quiz. +- All ten questions appear. +- Correct answers increase the score. +- Incorrect answers do not increase the score. +- Feedback appears after every answer. +- The progress indicator updates. +- The final result screen displays the correct score. +- The restart button resets the game. +- The layout works on desktop and mobile screens. +- The browser console contains no errors. + +## Use Cases + +- A beginner practices basic Linux commands. +- A student reviews terminal commands before a quiz or lab. +- A user receives immediate feedback after selecting an answer. +- A player repeats the quiz to improve their score. \ No newline at end of file diff --git a/Games/Linux_Command_Challenge/index.html b/Games/Linux_Command_Challenge/index.html new file mode 100644 index 000000000..c3aadba55 --- /dev/null +++ b/Games/Linux_Command_Challenge/index.html @@ -0,0 +1,126 @@ + + + + + + + + Linux Command Challenge + + + + + +
+
+ + +
+

Linux Command Challenge

+

Test your knowledge of common Linux terminal commands.

+
+
+ +
+

Ready to begin?

+ +

+ Answer 10 multiple-choice questions about Linux commands. + You will receive immediate feedback after each answer. +

+ + +
+ + + + + + +
+ + + + \ No newline at end of file diff --git a/Games/Linux_Command_Challenge/script.js b/Games/Linux_Command_Challenge/script.js new file mode 100644 index 000000000..f3a7f98ab --- /dev/null +++ b/Games/Linux_Command_Challenge/script.js @@ -0,0 +1,229 @@ +"use strict"; + +const questions = [ + { + question: "Which command displays the current working directory?", + answers: ["ls", "pwd", "cd", "whoami"], + correctAnswer: "pwd", + explanation: "The pwd command prints the full path of the current directory." + }, + { + question: "Which command lists files and directories?", + answers: ["ls", "mkdir", "touch", "clear"], + correctAnswer: "ls", + explanation: "The ls command lists the contents of a directory." + }, + { + question: "Which command creates a new directory?", + answers: ["cp", "mkdir", "mv", "rmdir"], + correctAnswer: "mkdir", + explanation: "The mkdir command creates one or more new directories." + }, + { + question: "Which command changes the current directory?", + answers: ["cd", "pwd", "cat", "grep"], + correctAnswer: "cd", + explanation: "The cd command moves the user to another directory." + }, + { + question: "Which command copies a file or directory?", + answers: ["mv", "rm", "cp", "nano"], + correctAnswer: "cp", + explanation: "The cp command creates a copy of a file or directory." + }, + { + question: "Which command moves or renames a file?", + answers: ["mv", "ls", "touch", "echo"], + correctAnswer: "mv", + explanation: "The mv command moves files and can also rename them." + }, + { + question: "Which command removes a file?", + answers: ["rm", "cat", "chmod", "ps"], + correctAnswer: "rm", + explanation: "The rm command permanently removes files." + }, + { + question: "Which command changes file permissions?", + answers: ["chown", "grep", "chmod", "sudo"], + correctAnswer: "chmod", + explanation: "The chmod command modifies read, write, and execute permissions." + }, + { + question: "Which command displays currently running processes?", + answers: ["ps", "pwd", "man", "history"], + correctAnswer: "ps", + explanation: "The ps command displays information about active processes." + }, + { + question: "Which command manages systemd services?", + answers: ["systemctl", "servicefile", "process", "apt"], + correctAnswer: "systemctl", + explanation: "The systemctl command starts, stops, and checks systemd services." + } +]; + +const startScreen = document.getElementById("start-screen"); +const quizScreen = document.getElementById("quiz-screen"); +const resultScreen = document.getElementById("result-screen"); + +const startButton = document.getElementById("start-button"); +const nextButton = document.getElementById("next-button"); +const restartButton = document.getElementById("restart-button"); + +const questionNumber = document.getElementById("question-number"); +const totalQuestions = document.getElementById("total-questions"); +const scoreElement = document.getElementById("score"); +const questionText = document.getElementById("question-text"); +const answerButtons = document.getElementById("answer-buttons"); +const feedback = document.getElementById("feedback"); +const progressFill = document.getElementById("progress-fill"); + +const finalScore = document.getElementById("final-score"); +const finalTotal = document.getElementById("final-total"); +const resultMessage = document.getElementById("result-message"); + +let currentQuestionIndex = 0; +let score = 0; +let answerSelected = false; + +totalQuestions.textContent = questions.length; +finalTotal.textContent = questions.length; + +startButton.addEventListener("click", startGame); +nextButton.addEventListener("click", moveToNextQuestion); +restartButton.addEventListener("click", startGame); + +function startGame() { + currentQuestionIndex = 0; + score = 0; + answerSelected = false; + + scoreElement.textContent = score; + + startScreen.classList.add("hidden"); + resultScreen.classList.add("hidden"); + quizScreen.classList.remove("hidden"); + + displayQuestion(); +} + +function displayQuestion() { + resetQuestionState(); + + const currentQuestion = questions[currentQuestionIndex]; + + questionNumber.textContent = currentQuestionIndex + 1; + questionText.textContent = currentQuestion.question; + + const progressPercentage = + ((currentQuestionIndex + 1) / questions.length) * 100; + + progressFill.style.width = `${progressPercentage}%`; + + currentQuestion.answers.forEach((answer) => { + const button = document.createElement("button"); + + button.type = "button"; + button.className = "answer-button"; + button.textContent = answer; + + button.addEventListener("click", () => { + checkAnswer(button, answer); + }); + + answerButtons.appendChild(button); + }); +} + +function resetQuestionState() { + answerSelected = false; + + nextButton.classList.add("hidden"); + feedback.classList.add("hidden"); + feedback.classList.remove("correct", "incorrect"); + feedback.textContent = ""; + + answerButtons.replaceChildren(); +} + +function checkAnswer(selectedButton, selectedAnswer) { + if (answerSelected) { + return; + } + + answerSelected = true; + + const currentQuestion = questions[currentQuestionIndex]; + const isCorrect = + selectedAnswer === currentQuestion.correctAnswer; + + const buttons = answerButtons.querySelectorAll(".answer-button"); + + buttons.forEach((button) => { + button.disabled = true; + + if (button.textContent === currentQuestion.correctAnswer) { + button.classList.add("correct"); + } + }); + + if (isCorrect) { + score += 1; + scoreElement.textContent = score; + + feedback.textContent = + `Correct! ${currentQuestion.explanation}`; + + feedback.classList.add("correct"); + } else { + selectedButton.classList.add("incorrect"); + + feedback.textContent = + `Incorrect. The correct answer is "${currentQuestion.correctAnswer}". ` + + currentQuestion.explanation; + + feedback.classList.add("incorrect"); + } + + feedback.classList.remove("hidden"); + nextButton.classList.remove("hidden"); + + nextButton.textContent = + currentQuestionIndex === questions.length - 1 + ? "View Results" + : "Next Question"; +} + +function moveToNextQuestion() { + currentQuestionIndex += 1; + + if (currentQuestionIndex < questions.length) { + displayQuestion(); + } else { + showResults(); + } +} + +function showResults() { + quizScreen.classList.add("hidden"); + resultScreen.classList.remove("hidden"); + + finalScore.textContent = score; + + const percentage = (score / questions.length) * 100; + + if (percentage === 100) { + resultMessage.textContent = + "Perfect score! You have excellent Linux command knowledge."; + } else if (percentage >= 80) { + resultMessage.textContent = + "Great work! You have a strong understanding of Linux commands."; + } else if (percentage >= 60) { + resultMessage.textContent = + "Good attempt. Review a few commands and try the challenge again."; + } else { + resultMessage.textContent = + "Keep practicing. Repeating the challenge will strengthen your skills."; + } +} \ No newline at end of file diff --git a/Games/Linux_Command_Challenge/style.css b/Games/Linux_Command_Challenge/style.css new file mode 100644 index 000000000..48a39c5d6 --- /dev/null +++ b/Games/Linux_Command_Challenge/style.css @@ -0,0 +1,275 @@ +:root { + --background: #111827; + --surface: #1f2937; + --surface-light: #374151; + --primary: #22c55e; + --primary-dark: #16a34a; + --text: #f9fafb; + --muted: #d1d5db; + --correct: #22c55e; + --incorrect: #ef4444; + --border: #4b5563; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + padding: 24px; + background: + radial-gradient(circle at top, #1f2937, var(--background)); + color: var(--text); + font-family: + Arial, + Helvetica, + sans-serif; +} + +button { + font: inherit; +} + +.game-container { + width: min(100%, 760px); + overflow: hidden; + background-color: var(--surface); + border: 1px solid var(--border); + border-radius: 18px; + box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); +} + +.game-header { + display: flex; + align-items: center; + gap: 18px; + padding: 28px; + background-color: #0f172a; + border-bottom: 1px solid var(--border); +} + +.game-header h1 { + margin-bottom: 6px; + font-size: clamp(1.6rem, 4vw, 2.3rem); +} + +.game-header p { + color: var(--muted); + line-height: 1.5; +} + +.terminal-icon { + flex-shrink: 0; + padding: 12px 14px; + background-color: #020617; + color: var(--primary); + border: 1px solid var(--primary); + border-radius: 10px; + font-family: "Courier New", monospace; + font-size: 1.4rem; + font-weight: bold; +} + +.screen { + padding: 32px; +} + +.screen h2 { + margin-bottom: 16px; + line-height: 1.4; +} + +.screen p { + color: var(--muted); + line-height: 1.7; +} + +.hidden { + display: none; +} + +.quiz-status { + display: flex; + justify-content: space-between; + gap: 16px; + margin-bottom: 12px; +} + +.quiz-status p { + font-weight: bold; +} + +.progress-bar { + width: 100%; + height: 10px; + overflow: hidden; + margin-bottom: 28px; + background-color: var(--surface-light); + border-radius: 999px; +} + +.progress-fill { + width: 0%; + height: 100%; + background-color: var(--primary); + transition: width 0.3s ease; +} + +.question-card { + padding: 26px; + background-color: #111827; + border: 1px solid var(--border); + border-radius: 14px; +} + +.command-prompt { + margin-bottom: 8px; + color: var(--primary) !important; + font-family: "Courier New", monospace; + font-weight: bold; +} + +.answer-buttons { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 14px; + margin-top: 24px; +} + +.answer-button { + min-height: 58px; + padding: 14px 18px; + cursor: pointer; + background-color: var(--surface-light); + color: var(--text); + border: 2px solid transparent; + border-radius: 10px; + text-align: left; + transition: + transform 0.15s ease, + border-color 0.15s ease, + background-color 0.15s ease; +} + +.answer-button:hover:not(:disabled) { + transform: translateY(-2px); + border-color: var(--primary); +} + +.answer-button:focus-visible, +.primary-button:focus-visible { + outline: 3px solid #facc15; + outline-offset: 3px; +} + +.answer-button:disabled { + cursor: not-allowed; +} + +.answer-button.correct { + background-color: rgba(34, 197, 94, 0.2); + border-color: var(--correct); +} + +.answer-button.incorrect { + background-color: rgba(239, 68, 68, 0.2); + border-color: var(--incorrect); +} + +.feedback { + margin-top: 22px; + padding: 14px; + border-radius: 8px; + font-weight: bold; +} + +.feedback.correct { + background-color: rgba(34, 197, 94, 0.15); + color: #86efac; + border: 1px solid var(--correct); +} + +.feedback.incorrect { + background-color: rgba(239, 68, 68, 0.15); + color: #fca5a5; + border: 1px solid var(--incorrect); +} + +.primary-button { + display: inline-block; + margin-top: 24px; + padding: 13px 22px; + cursor: pointer; + background-color: var(--primary); + color: #052e16; + border: none; + border-radius: 9px; + font-weight: bold; + transition: + background-color 0.15s ease, + transform 0.15s ease; +} + +.primary-button:hover { + background-color: var(--primary-dark); + color: white; + transform: translateY(-1px); +} + +.final-score { + margin: 20px 0; + color: var(--text) !important; + font-size: 1.5rem; + font-weight: bold; +} + +footer { + padding: 18px 28px; + background-color: #0f172a; + border-top: 1px solid var(--border); + text-align: center; +} + +footer p { + color: var(--muted); + font-size: 0.9rem; +} + +@media (max-width: 600px) { + body { + padding: 12px; + align-items: flex-start; + } + + .game-container { + margin-top: 12px; + } + + .game-header { + align-items: flex-start; + padding: 22px; + } + + .screen { + padding: 22px; + } + + .question-card { + padding: 20px; + } + + .answer-buttons { + grid-template-columns: 1fr; + } + + .quiz-status { + flex-direction: column; + gap: 2px; + } +} \ No newline at end of file diff --git a/README.md b/README.md index 7c75d9bc0..83fe35f02 100644 --- a/README.md +++ b/README.md @@ -462,7 +462,7 @@ Terms and conditions for use, reproduction and distribution are under the [Apach | [Block_Vault](https://github.com/kunjgit/GameZone/tree/main/Games/Block_Vault) | | [Random_Choice_Picker](https://github.com/kunjgit/GameZone/tree/main/Games/Random_Choice_Picker) | | [Drummer_Kit](https://github.com/kunjgit/GameZone/tree/main/Games/Drummer_Kit) | - +| [Linux Command Challenge](./Games/Linux_Command_Challenge/) |

Back to top

diff --git a/assets/images/Linux_Command_Challenge.png b/assets/images/Linux_Command_Challenge.png new file mode 100644 index 000000000..6afd46abd Binary files /dev/null and b/assets/images/Linux_Command_Challenge.png differ diff --git a/assets/js/gamesData.json b/assets/js/gamesData.json index 07dfe9fdd..b82c7abe7 100644 --- a/assets/js/gamesData.json +++ b/assets/js/gamesData.json @@ -3254,5 +3254,10 @@ "gameTitle" : "Drummer Kit", "gameUrl": "Drummer_Kit", "thumbnailUrl": "Drummer_Kit.png" - } + }, + "650":{ + "gameTitle": "Linux Command Challenge", + "gameUrl": "Linux_Command_Challenge", + "thumbnailUrl": "Linux_Command_Challenge.png" + } }