-
Notifications
You must be signed in to change notification settings - Fork 407
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
90849c7
commit 15140d9
Showing
3 changed files
with
222 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| #particles-js { | ||
| position: absolute; | ||
| width: 100%; | ||
| height: 100%; | ||
| z-index: -1; | ||
| } | ||
|
|
||
| .text-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| position: relative; | ||
| } | ||
|
|
||
| .text { | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .error-code { | ||
| font-size: 8rem; | ||
| line-height: 1; | ||
| } | ||
|
|
||
| .error-message { | ||
| font-size: 3rem; | ||
| } | ||
|
|
||
| .quiz-container { | ||
| margin-top: 20px; | ||
| font-size: 2rem; | ||
| padding: 20px; | ||
| border-radius: 5px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| backdrop-filter: blur(10px); | ||
| width: 400px; | ||
| height: 280px; | ||
| justify-content: center; | ||
| background: rgba(255, 255, 255, 0.1); | ||
| box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); | ||
| } | ||
|
|
||
| #answer { | ||
| font-size: 2rem; | ||
| padding: 8px; | ||
| text-align: center; | ||
| width: 100px; | ||
| margin: 10px; | ||
| border: none; | ||
| border-radius: 5px; | ||
| outline: none; | ||
| } | ||
|
|
||
| button { | ||
| font-size: 1.5rem; | ||
| font-weight: 600; | ||
| padding: 9px 15px; | ||
| border: none; | ||
| border-radius: 5px; | ||
| background: #ff4081; | ||
| color: white; | ||
| cursor: pointer; | ||
| transition: 0.3s; | ||
| } | ||
|
|
||
| button:hover { | ||
| background: #e91e63; | ||
| } | ||
|
|
||
| .home-button { | ||
| margin-top: 20px; | ||
| font-size: 1.8rem; | ||
| font-weight: 600; | ||
| padding: 12px 20px; | ||
| border: none; | ||
| border-radius: 5px; | ||
| background: #00bcd4; | ||
| color: white; | ||
| cursor: pointer; | ||
| transition: 0.3s; | ||
| display: none; | ||
| } | ||
|
|
||
| .home-button.show { | ||
| display: inline-block; | ||
| background: green; | ||
| } | ||
|
|
||
| .home-button:hover { | ||
| background: darkgreen; | ||
| } | ||
|
|
||
| #result { | ||
| margin-top: 10px; | ||
| font-size: 2rem; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| #question { | ||
| font-size: 3rem; | ||
| font-weight: bold; | ||
| color: white; | ||
| text-align: center; | ||
| display: inline-block; | ||
| } | ||
|
|
||
| .dark-mode .text { | ||
| text-shadow: 4px 4px 10px black; | ||
| } | ||
|
|
||
| .dark-mode .question2 .equal2 { | ||
| text-shadow: 4px 4px 10px black; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| const jokes = [ | ||
| "What did the server say to the website? 404 you!", | ||
| "Why did the browser break up with the server? Too many 404s!", | ||
| "Why was the web page late? It got stuck in a 404 traffic jam!", | ||
| "I just saw a 404 error page... It was a real site for sore eyes!", | ||
| "Why did the 404 error fail the test? It just couldn't find the answer!" | ||
| ]; | ||
|
|
||
| document.addEventListener("DOMContentLoaded", function () { | ||
| generateQuestion(); // ✅ Ensure question appears only after DOM loads | ||
| }); | ||
|
|
||
| function generateQuestion() { | ||
| const num1 = Math.floor(Math.random() * 10) + 1; | ||
| const num2 = Math.floor(Math.random() * 10) + 1; | ||
| const operators = ['+', '-', '*']; | ||
| const operator = operators[Math.floor(Math.random() * operators.length)]; | ||
| const expression = `${num1} ${operator} ${num2}`; | ||
|
|
||
| // console.log("Generated Expression:", expression); // ✅ Debugging Log | ||
|
|
||
| const questionElement = document.getElementById("question"); | ||
|
|
||
| if (questionElement) { | ||
| questionElement.textContent = expression; | ||
| questionElement.dataset.answer = eval(expression); | ||
| } else { | ||
| console.error("❌ Element #question not found in the DOM!"); | ||
| } | ||
| } | ||
|
|
||
| function checkAnswer() { | ||
| const answer = document.getElementById("answer").value; | ||
| const correctAnswer = document.getElementById("question").dataset.answer; | ||
| const result = document.getElementById("result"); | ||
| const homeButton = document.getElementById("homeButton"); | ||
|
|
||
| if (parseInt(answer) === parseInt(correctAnswer)) { | ||
| result.textContent = "✅ Correct!"; | ||
| result.style.color = "green"; | ||
| homeButton.classList.add("show"); | ||
| } else { | ||
| result.textContent = jokes[Math.floor(Math.random() * jokes.length)]; | ||
| result.style.color = "red"; | ||
| homeButton.classList.remove("show"); | ||
| } | ||
| } | ||
|
|
||
| particlesJS("particles-js", { | ||
| particles: { | ||
| number: { | ||
| value: 100 | ||
| }, | ||
| size: { | ||
| value: 9, | ||
| random: true | ||
| }, | ||
| shape: { | ||
| type: "circle" | ||
| }, | ||
| opacity: { | ||
| value: 0.8, | ||
| random: true | ||
| }, | ||
| move: { | ||
| speed: 2, | ||
| direction: "none", | ||
| random: true, | ||
| out_mode: "out" | ||
| }, | ||
| line_linked: { | ||
| enable: false | ||
| }, | ||
| }, | ||
| interactivity: { | ||
| events: { | ||
| onhover: { | ||
| enable: true, | ||
| mode: "repulse" | ||
| } | ||
| }, | ||
| modes: { | ||
| repulse: { | ||
| distance: 100 | ||
| } | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| document.addEventListener("DOMContentLoaded", generateQuestion); |