Jonas12294/fun_small_projects
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Jonas12294:puzzlebox
Branches Tags
Jonas12294:main
Jonas12294:calculator
Jonas12294:DreamArchitect
Jonas12294:puzzlebox
..
compare: Jonas12294:main
Branches Tags
Jonas12294:calculator
Jonas12294:DreamArchitect
Jonas12294:puzzlebox
Jonas12294:main

No commits in common. "puzzlebox" and "main" have entirely different histories.
puzzlebox ... main

3 changed files with 13 additions and 330 deletions
Show Stats Expand all files Collapse all files

9
LICENSE Normal file
View File

@ -0,0 +1,9 @@
MIT License
Copyright (c) 2025 Jonas12294
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

4
README.md Normal file
View File

@ -0,0 +1,4 @@
# fun_small_projects
projects ive made
each in their own branch

330
puzzlebox.html
View File

@ -1,330 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Puzzlebox</title>
<style>
body {
font-family: 'Courier New', monospace;
background-color: #0a0a0a;
color: #00ff00;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.container {
background-color: #0f0f0f;
border: 1px solid #333;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}
h1, h2 {
color: #00ff00;
text-align: center;
}
.puzzle {
margin-bottom: 30px;
display: none;
}
.puzzle.active {
display: block;
}
input, button {
background-color: #0f0f0f;
color: #00ff00;
border: 1px solid #00ff00;
padding: 8px 12px;
margin: 5px 0;
font-family: 'Courier New', monospace;
}
button {
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #003300;
}
code {
display: block;
background-color: #151515;
padding: 10px;
border-radius: 5px;
white-space: pre;
overflow-x: auto;
}
.success-message {
color: #00ff00;
font-weight: bold;
}
.error-message {
color: #ff3333;
}
.hint {
color: #888;
font-style: italic;
margin-top: 10px;
cursor: pointer;
}
.hint-text {
display: none;
margin-top: 5px;
color: #aaa;
}
.puzzle-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.level-indicator {
font-size: 14px;
color: #888;
}
.progress-bar {
width: 100%;
background-color: #151515;
height: 10px;
margin: 20px 0;
border-radius: 5px;
overflow: hidden;
}
.progress {
height: 100%;
background-color: #00ff00;
width: 0%;
transition: width 0.5s;
}
#completion-message {
text-align: center;
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>CODE PUZZLEBOX</h1>
<p>Welcome to the Code Puzzlebox! Solve each puzzle to unlock the next level. Can you make it to the end?</p>
<div class="progress-bar">
<div id="progress" class="progress"></div>
</div>
</div>
<div id="puzzle-container">
<!-- Puzzle 1: Simple Pattern Recognition -->
<div id="puzzle1" class="puzzle active container">
<div class="puzzle-header">
<h2>Puzzle 1: Pattern Recognition</h2>
<span class="level-indicator">Level 1/5</span>
</div>
<p>Find the next number in this sequence:</p>
<code>2, 4, 8, 16, 32, ?</code>
<div>
<input type="text" id="puzzle1-answer" placeholder="Enter the next number">
<button onclick="checkPuzzle(1)">Submit</button>
</div>
<p id="puzzle1-feedback"></p>
<div class="hint" onclick="showHint(1)">Need a hint?</div>
<div id="hint1" class="hint-text">Think about what operation is being performed from one number to the next.</div>
</div>
<!-- Puzzle 2: Fix the Code -->
<div id="puzzle2" class="puzzle container">
<div class="puzzle-header">
<h2>Puzzle 2: Fix the Code</h2>
<span class="level-indicator">Level 2/5</span>
</div>
<p>This JavaScript function should return the factorial of a number, but it has a bug. Fix the code:</p>
<code>function factorial(n) {
if (n === 0) return 1;
return n - factorial(n - 1);
}</code>
<p>What is the correct operator to replace the "-" in the return statement?</p>
<div>
<input type="text" id="puzzle2-answer" placeholder="Enter the correct operator">
<button onclick="checkPuzzle(2)">Submit</button>
</div>
<p id="puzzle2-feedback"></p>
<div class="hint" onclick="showHint(2)">Need a hint?</div>
<div id="hint2" class="hint-text">The factorial of a number is the product of all positive integers less than or equal to that number.</div>
</div>
<!-- Puzzle 3: Decode the Message -->
<div id="puzzle3" class="puzzle container">
<div class="puzzle-header">
<h2>Puzzle 3: Decode the Message</h2>
<span class="level-indicator">Level 3/5</span>
</div>
<p>This encoded message contains a password. Decode it by shifting each letter backward by 3 positions in the alphabet:</p>
<code>frgh_flskhu</code>
<div>
<input type="text" id="puzzle3-answer" placeholder="Enter the decoded message">
<button onclick="checkPuzzle(3)">Submit</button>
</div>
<p id="puzzle3-feedback"></p>
<div class="hint" onclick="showHint(3)">Need a hint?</div>
<div id="hint3" class="hint-text">This is a Caesar cipher. For example, 'd' shifted backwards by 3 becomes 'a'.</div>
</div>
<!-- Puzzle 4: Logic Gate -->
<div id="puzzle4" class="puzzle container">
<div class="puzzle-header">
<h2>Puzzle 4: Logic Gate</h2>
<span class="level-indicator">Level 4/5</span>
</div>
<p>What is the output of this logic expression?</p>
<code>let a = true;
let b = false;
let c = true;
let result = (a && b) || (c && !b);</code>
<div>
<input type="text" id="puzzle4-answer" placeholder="Enter true or false">
<button onclick="checkPuzzle(4)">Submit</button>
</div>
<p id="puzzle4-feedback"></p>
<div class="hint" onclick="showHint(4)">Need a hint?</div>
<div id="hint4" class="hint-text">Break it down step by step: First evaluate (a && b), then (c && !b), then combine with OR.</div>
</div>
<!-- Puzzle 5: Missing Line -->
<div id="puzzle5" class="puzzle container">
<div class="puzzle-header">
<h2>Puzzle 5: Complete the Code</h2>
<span class="level-indicator">Level 5/5</span>
</div>
<p>This code should check if a string is a palindrome (reads the same forward and backward). What's the missing line?</p>
<code>function isPalindrome(str) {
// Normalize the string: lowercase and remove non-alphanumeric
str = str.toLowerCase().replace(/[^a-z0-9]/g, '');
// MISSING LINE HERE
// Compare the original with its reverse
return str === reversed;
}</code>
<p>What should the missing line be to create the reversed string?</p>
<div>
<input type="text" id="puzzle5-answer" placeholder="Enter the missing line of code">
<button onclick="checkPuzzle(5)">Submit</button>
</div>
<p id="puzzle5-feedback"></p>
<div class="hint" onclick="showHint(5)">Need a hint?</div>
<div id="hint5" class="hint-text">You need to create a variable called 'reversed' that holds the string in reverse order. In JavaScript, one way to reverse a string is to split it into an array, reverse the array, then join it back.</div>
</div>
</div>
<div id="completion-message" class="container">
<h2>🎉 Puzzlebox Solved! 🎉</h2>
<p>Congratulations! You've solved all the puzzles and unlocked the code puzzlebox.</p>
<p>Secret Code: <span style="color: #ff9900; font-weight: bold;">CODEMASTER2025</span></p>
<p>Feel free to inspect the source code to see how this puzzlebox was built!</p>
</div>
<script>
const puzzles = [
{ id: 1, answer: "64" },
{ id: 2, answer: "*" },
{ id: 3, answer: "code_cipher" },
{ id: 4, answer: "true" },
{ id: 5, answer: "let reversed = str.split('').reverse().join('');" }
];
const totalPuzzles = puzzles.length;
let solvedPuzzles = 0;
function checkPuzzle(puzzleId) {
const puzzle = puzzles.find(p => p.id === puzzleId);
const userAnswer = document.getElementById(`puzzle${puzzleId}-answer`).value.trim();
const feedbackElement = document.getElementById(`puzzle${puzzleId}-feedback`);
if (userAnswer.toLowerCase() === puzzle.answer.toLowerCase() ||
(puzzleId === 5 && isValidReverseLine(userAnswer))) {
feedbackElement.innerHTML = `<span class="success-message">Correct! Unlocking next puzzle...</span>`;
// If this puzzle wasn't already solved, increment the count
if (!document.getElementById(`puzzle${puzzleId}`).classList.contains('solved')) {
solvedPuzzles++;
updateProgress();
}
document.getElementById(`puzzle${puzzleId}`).classList.add('solved');
// Unlock next puzzle if not the last one
if (puzzleId < totalPuzzles) {
setTimeout(() => {
document.getElementById(`puzzle${puzzleId}`).classList.remove('active');
document.getElementById(`puzzle${puzzleId+1}`).classList.add('active');
window.scrollTo(0, 0);
}, 1500);
} else {
// Last puzzle solved
setTimeout(() => {
document.getElementById(`puzzle${puzzleId}`).classList.remove('active');
document.getElementById('completion-message').style.display = 'block';
window.scrollTo(0, 0);
}, 1500);
}
} else {
feedbackElement.innerHTML = `<span class="error-message">That's not quite right. Try again!</span>`;
}
}
function isValidReverseLine(answer) {
// Accept various ways to reverse a string in JavaScript
const lowerAnswer = answer.toLowerCase();
// Check for main solution
if (lowerAnswer.includes("split") &&
lowerAnswer.includes("reverse") &&
lowerAnswer.includes("join") &&
lowerAnswer.includes("reversed")) {
return true;
}
// Check for alternative solutions
if ((lowerAnswer.includes("reversed = ") || lowerAnswer.includes("reversed=")) &&
(lowerAnswer.includes("[...str]") || lowerAnswer.includes("spread") ||
lowerAnswer.includes("array.from") || lowerAnswer.includes("for") ||
lowerAnswer.includes("loop"))) {
return true;
}
return false;
}
function showHint(puzzleId) {
const hintElement = document.getElementById(`hint${puzzleId}`);
if (hintElement.style.display === 'block') {
hintElement.style.display = 'none';
} else {
hintElement.style.display = 'block';
}
}
function updateProgress() {
const progressPercent = (solvedPuzzles / totalPuzzles) * 100;
document.getElementById('progress').style.width = `${progressPercent}%`;
}
</script>
</body>
</html>