+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 @@ + + + + + +
+
+
+
+
+
+
+
+
+
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
Quiz Game
+
+
+
+
+
+
+
+ ![Option 1 Image]()
+
+
+
+ ![Option 2 Image]()
+
+
+
+
+
+ ![Option 3 Image]()
+
+
+
+ ![Option 4 Image]()
+
+
+ Score: 0
+ +