From 216e87e9e60348a48ea4d45c1e0c9bc4ace7d90f Mon Sep 17 00:00:00 2001 From: LukePng Date: Tue, 13 Aug 2024 08:57:33 +0800 Subject: [PATCH] Minor bug fixes and created game template in test --- src/simulations/double_slit_diffraction.md | 2 +- src/text/interference/main.md | 27 ++++---- test/game/game.js | 72 ++++++++++++++++++++++ test/game/main.css | 43 +++++++++++++ test/game/main.html | 46 ++++++++++++++ test/game/question_bank.js | 23 +++++++ test/game/todo.txt | 19 ++++++ 7 files changed, 219 insertions(+), 13 deletions(-) create mode 100644 test/game/game.js create mode 100644 test/game/main.css create mode 100644 test/game/main.html create mode 100644 test/game/question_bank.js create mode 100644 test/game/todo.txt diff --git a/src/simulations/double_slit_diffraction.md b/src/simulations/double_slit_diffraction.md index 4410948..359c017 100644 --- a/src/simulations/double_slit_diffraction.md +++ b/src/simulations/double_slit_diffraction.md @@ -6,7 +6,7 @@
- Slit Separation: 500 μm + Slit Separation: 500 μm
diff --git a/src/text/interference/main.md b/src/text/interference/main.md index 8b14393..3b13350 100644 --- a/src/text/interference/main.md +++ b/src/text/interference/main.md @@ -4,9 +4,9 @@ ## History Of Interference In Ancient times, the concept of wave interference was not well understood, but early observations of light patterns can be traced back to ancient civilizations. -The understanding of interference began to take shape with the development of wave theory in the early 18th century, with the famous Thomas Young's Double-Slit Experiment (1801) showing the strange behaviours of light. While there were many mathematical approaches afterwards to calculate the interference patterns, it was only in the early 20th century that the concept of particle wave duelity slowly began to take shape. +The understanding of interference began to take shape with the development of wave theory in the early 18th century, with the famous **Thomas Young's Double-Slit Experiment (1801)** showing the strange behaviours of light. While there were many mathematical approaches afterwards to calculate the interference patterns, it was only in the early 20th century that the concept of **particle wave duelity** slowly began to take shape. -With that, more and more people started to accept the idea that small particles, such as the Electron and Photons, are able to exist in a superpositional state, both as a particle and a wave at the same time when unobserved. +With that, more and more people started to accept the idea that small particles, such as the **Electron and Photons**, are able to exist in a superpositional state, both as a particle and a wave at the same time when unobserved. ### Young's double slit experiment Thomas Young, an English scientist, conducted his famous double-slit experiment to demonstrate the wave nature of light. @@ -28,12 +28,12 @@ Similar experiments with photons (light particles) have shown that even single p ## Differences from Diffraction: Interference shares many similarities with diffraction. But if so what makes it different? ### Difference in Mechanism -- Diffraction occurs when a single wave interacts with itself -- Interference occurs between multiple waves +- Diffraction occurs when a **single** wave interacts with itself +- Interference occurs between **multiple** waves ### Difference in Formula -1. **Interference**
+1. **Interference** - Path Difference and Interference:
$\delta = r_2 - r_1$ @@ -72,11 +72,14 @@ Interference shares many similarities with diffraction. But if so what makes it ## Theory and Formulae: -The Principle of Superposition states that when TWO OR MORE waves of the same kind overlap, the resultant displacement at any point at any instant is given by the vector sum of the individual displacements that each individual wave would cause at that point at that instant. +The **Principle of Superposition** states that when **TWO OR MORE** waves of the same kind overlap, the resultant displacement at any point at any instant is given by the **vector sum** of the **individual** displacements that each individual wave would cause at that point at that instant. -$y_{\text{resultant}} = y_1 + y_2 + y_3 + \dots + y_N$, where $y_{\text{resultant}}$ is the displacement of the resultant wave and $y_1, y_2, y_3 \dots, y_N$ are the individual displacements of the waves at the point of consideration +$$y_{\text{resultant}} = y_1 + y_2 + y_3 + \dots + y_N$$ +Where +- $y_{\text{resultant}}$ is the displacement of the resultant wave and +- $y_1, y_2, y_3 \dots, y_N$ are the individual displacements of the waves at the point of consideration -Interference is the superposing of overlapping of TWO OR MORE waves to give a resultant wave whose displacement is given by the Principle of Superposition. +Interference is the **superposing** of overlapping of **TWO OR MORE** waves to give a resultant wave whose displacement is given by the **Principle of Superposition**. ### Path Difference Path difference ($\delta$) is the difference in the optical path lengths traveled by two waves from their respective sources to a specific point where interference is observed. It directly affects the phase relationship between the waves at that point. @@ -119,23 +122,23 @@ Phase Difference Δϕ = 0π ### Constructive Interference -Constructive interference occurs when the waves that meet are in phase at the point of consideration. +**Constructive interference** occurs when the waves that meet are in phase at the point of consideration. Phase difference between the two waves at that point = $0, 2\pi, 4\pi, \dots$ This happens under the following conditions:
-If $\delta = m \cdot \lambda$ (where $m$ is an integer), then the waves arrive at the point in phase, reinforcing each other. This leads to constructive interference and results in a maximum amplitude at that point. +If $\delta = m \cdot \lambda$ (where $m$ is an integer), then the waves arrive at the point **in phase**, reinforcing each other. This leads to **constructive interference** and results in a **maximum amplitude** at that point. Resultant amplitude $A_R = A_1 + A_2$ ### Destructive Interference -Destructive interference occurs when the waves that meet are in in antiphase (out of phase of difference 180 deg) at the point of consideration. +**Destructive interference** occurs when the waves that meet are in **in antiphase** (out of phase of difference 180 deg) at the point of consideration. Phase difference between the two waves at that point = $\pi, 3\pi, 5\pi$
This occurs under the following condition:
-If $\delta = (m + \frac{1}{2}) \cdot \lambda$ (where $m$ is an integer), then the waves arrive out of phase, leading to cancellation of amplitudes. This results in destructive interference and a minimum amplitude (or even complete cancellation) at that point. +If $\delta = (m + \frac{1}{2}) \cdot \lambda$ (where $m$ is an integer), then the waves arrive **out of phase**, leading to cancellation of amplitudes. This results in **destructive interference** and a **minimum amplitude** (or even complete cancellation) at that point. Resultant amplitude $A_R = A_1 - A_2$ diff --git a/test/game/game.js b/test/game/game.js new file mode 100644 index 0000000..1d2a55e --- /dev/null +++ b/test/game/game.js @@ -0,0 +1,72 @@ +let score = 0; +let combo = 0; +let currentQuestionIndex = 0; + +function loadQuestion() { + const questionElement = document.getElementById('question'); + const optionContainers = document.querySelectorAll('.option-container'); + const optionsElements = document.querySelectorAll('.option'); + + const currentQuestion = questions[currentQuestionIndex]; + questionElement.textContent = currentQuestion.question; + + optionsElements.forEach((option, index) => { + option.textContent = currentQuestion.options[index]; + option.style.backgroundColor = '#e0e0e0'; + option.disabled = false; + }); + + optionContainers.forEach((container, index) => { + const imgElement = container.querySelector('.option-image'); + imgElement.src = currentQuestion.images[index]; // Assuming you have an array of images in your question + imgElement.alt = `Option ${index + 1} Image`; + }); + + document.getElementById('explanation').classList.add('hidden'); + document.getElementById('next-button').classList.add('hidden'); +} + +function checkAnswer(selectedOption) { + const options = document.querySelectorAll('.option'); + const explanation = document.getElementById('explanation'); + const currentQuestion = questions[currentQuestionIndex]; + + if (selectedOption === currentQuestion.correctAnswer) { + options[currentQuestion.correctAnswer - 1].style.backgroundColor = 'green'; + combo += 1; + score += 100 + (100 * 25 * combo) / 100; + explanation.classList.add('hidden'); + } else { + options.forEach((option, index) => { + if (index === currentQuestion.correctAnswer - 1) { + option.style.backgroundColor = 'green'; + } else { + option.style.backgroundColor = 'red'; + } + }); + combo = 0; + explanation.textContent = currentQuestion.explanation; + explanation.classList.remove('hidden'); + } + + document.getElementById('score').textContent = `Score: ${Math.floor(score)}`; + + // Disable all options after one is selected + options.forEach(option => option.disabled = true); + + // Show the next question button + document.getElementById('next-button').classList.remove('hidden'); +} + +function nextQuestion() { + currentQuestionIndex += 1; + if (currentQuestionIndex < questions.length) { + loadQuestion(); + } else { + document.getElementById('question-container').innerHTML = '

Congratulations! You have completed the quiz.

'; + document.getElementById('next-button').classList.add('hidden'); + } +} + +// Directly call loadQuestion to initialize the first question +loadQuestion(); diff --git a/test/game/main.css b/test/game/main.css new file mode 100644 index 0000000..ecf793f --- /dev/null +++ b/test/game/main.css @@ -0,0 +1,43 @@ +.quiz-container { + max-width: 600px; + margin: auto; + text-align: center; + font-family: Arial, sans-serif; +} + +.options { + display: flex; + justify-content: space-around; + margin: 10px 0; +} + +.option-container { + display: flex; + flex-direction: column; + align-items: center; +} + +.option-image { + width: 100px; /* Adjust the size as needed */ + height: 100px; + object-fit: cover; + margin-bottom: 10px; +} + +.option { + padding: 10px 20px; + font-size: 16px; + background-color: #e0e0e0; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +.option:hover { + background-color: #d0d0d0; +} + +.hidden { + display: none; +} diff --git a/test/game/main.html b/test/game/main.html new file mode 100644 index 0000000..989657b --- /dev/null +++ b/test/game/main.html @@ -0,0 +1,46 @@ + + + + + + Quiz Game + + + +
+

Quiz Game

+
+

+
+
+ Option 1 Image + +
+
+ Option 2 Image + +
+
+
+
+ Option 3 Image + +
+
+ Option 4 Image + +
+
+
+ +

Score: 0

+ +
+ + + + + + + + diff --git a/test/game/question_bank.js b/test/game/question_bank.js new file mode 100644 index 0000000..bc8bb32 --- /dev/null +++ b/test/game/question_bank.js @@ -0,0 +1,23 @@ +const questions = [ + { + question: "What is the capital of France?", + options: ["Berlin", "Madrid", "Paris", "Rome"], + images: ["path/to/berlin.jpg", "path/to/madrid.jpg", "path/to/paris.jpg", "path/to/rome.jpg"], + correctAnswer: 3, + explanation: "The correct answer is Paris, the capital city of France." + }, + { + question: "Which planet is known as the Red Planet?", + options: ["Earth", "Mars", "Jupiter", "Saturn"], + images: ["path/to/earth.jpg", "path/to/mars.jpg", "path/to/jupiter.jpg", "path/to/saturn.jpg"], + correctAnswer: 2, + explanation: "Mars is known as the Red Planet due to its reddish appearance." + }, + { + question: "Who wrote 'Romeo and Juliet'?", + options: ["William Shakespeare", "Charles Dickens", "Mark Twain", "Jane Austen"], + images: ["path/to/shakespeare.jpg", "path/to/dickens.jpg", "path/to/twain.jpg", "path/to/austen.jpg"], + correctAnswer: 1, + explanation: "William Shakespeare is the author of 'Romeo and Juliet'." + } +]; diff --git a/test/game/todo.txt b/test/game/todo.txt new file mode 100644 index 0000000..02ca0f8 --- /dev/null +++ b/test/game/todo.txt @@ -0,0 +1,19 @@ +List of items to be completed +1. Create a question timer - around 2 mins long +2. Create question bank - can be randomly generated by code + - Randomly assigning the number of slits, wavelengths etc and ask them to guess + - Each Question has 4 options, one correct answer +3. Create a point system + - No combo: 100 point + - Combo formula: 100 * (100 + 25 * N)%, where N is the combo number + Combo 2: 100 * 150% = 150 pts + Combo 5: 100 * 225% = 225 pts + - Stars/tier system: + 1 star(Novice): 500 pts + 2 stars (Intermediate): 1000 pts + 3 stars (Expert): 1500 pts + 4 stars (Professional): 2000 pts + 5 stars (Einstein): 2500 pts + + + \ No newline at end of file