Update analytic-solution-of-the-harmonic-oscillator

'include' syntax not working properly, replaced with iframe

Author: yunseo-kim

_posts/de/2024-12-03-analytic-solution-of-the-harmonic-oscillator.md

@@ -220,9 +220,25 @@ Je größer $n$ wird, desto ähnlicher wird der Quantenoszillator dem klassische
 ### Interaktive Visualisierung der Wahrscheinlichkeitsverteilungen des Quantenoszillators
 Das Folgende ist eine reaktive Visualisierung basierend auf Plotly.js, die ich selbst erstellt habe. Sie können den $n$-Wert mit dem Schieberegler anpassen und die klassische Wahrscheinlichkeitsverteilung sowie die Form von $\|\psi_n\|^2$ für die Position $x$ überprüfen.
 
-{% include quantum-harmonic-oscillator.html %}
-
-> - Originalvisualisierung: [yunseo-kim/physics-visualization Repository](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum-harmonic-oscillator.html)
+<div class="responsive-iframe-container" style="position: relative; padding-bottom: 100%; overflow: hidden;">
+    <iframe id="responsive-iframe"
+            src="/physics-visualization/quantum-harmonic-oscillator.html" 
+            style="position: absolute; top: 0; left: 0; width: 100%; border: none;" 
+            allow="fullscreen">
+    </iframe>
+</div>
+<script>
+  document.getElementById('responsive-iframe').addEventListener('load', function() {
+    var iframe = this;
+    var iframeDocument = iframe.contentWindow.document;
+    // Get the scrollHeight of the iframe's document
+    var height = iframeDocument.documentElement.scrollHeight || iframeDocument.body.scrollHeight;
+    iframe.style.height = height + 'px';
+  });
+</script>
+
+> - Originalvisualisierung: <{{site.url}}/physics-visualization/quantum-harmonic-oscillator>
+> - Quellcode: [yunseo-kim/physics-visualization Repository](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum-harmonic-oscillator.html)
 > - Lizenz: [Siehe hier](https://github.com/yunseo-kim/physics-visualization?tab=readme-ov-file#license)
 
 Wenn Sie Python auf Ihrem eigenen Computer verwenden können und eine Umgebung mit den Bibliotheken Numpy, Plotly und Dash installiert haben, können Sie auch das Python-Skript [`/src/quantum_oscillator.py`{: .filepath}](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum_oscillator.py) im selben Repository ausführen, um die Ergebnisse zu sehen.

_posts/en/2024-12-03-analytic-solution-of-the-harmonic-oscillator.md

@@ -218,9 +218,25 @@ As $n$ increases, the quantum oscillator becomes more similar to a classical osc
 ### Interactive Visualization of Quantum Oscillator Probability Distributions
 The following is a responsive visualization based on Plotly.js that I created myself. You can adjust the $n$ value using the slider to check the classical probability distribution and the shape of $\|\psi_n\|^2$ with respect to position $x$.
 
-{% include quantum-harmonic-oscillator.html %}
-
-> - Original visualization: [yunseo-kim/physics-visualization repository](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum-harmonic-oscillator.html)
+<div class="responsive-iframe-container" style="position: relative; padding-bottom: 100%; overflow: hidden;">
+    <iframe id="responsive-iframe"
+            src="/physics-visualization/quantum-harmonic-oscillator.html" 
+            style="position: absolute; top: 0; left: 0; width: 100%; border: none;" 
+            allow="fullscreen">
+    </iframe>
+</div>
+<script>
+  document.getElementById('responsive-iframe').addEventListener('load', function() {
+    var iframe = this;
+    var iframeDocument = iframe.contentWindow.document;
+    // Get the scrollHeight of the iframe's document
+    var height = iframeDocument.documentElement.scrollHeight || iframeDocument.body.scrollHeight;
+    iframe.style.height = height + 'px';
+  });
+</script>
+
+> - Original visualization page: <{{site.url}}/physics-visualization/quantum-harmonic-oscillator>
+> - Source code: [yunseo-kim/physics-visualization repository](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum-harmonic-oscillator.html)
 > - License: [See here](https://github.com/yunseo-kim/physics-visualization?tab=readme-ov-file#license)
 
 Also, if you can use Python on your computer and have the Numpy, Plotly, and Dash libraries installed, you can run the [`/src/quantum_oscillator.py`{: .filepath}](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum_oscillator.py) Python script in the same repository to see the results.

_posts/es/2024-12-03-analytic-solution-of-the-harmonic-oscillator.md

@@ -218,9 +218,25 @@ A medida que $n$ aumenta, el oscilador cuántico se asemeja más al oscilador cl
 ### Visualización interactiva de las distribuciones de probabilidad del oscilador cuántico
 La siguiente es una visualización reactiva basada en Plotly.js que he creado personalmente. Puedes ajustar el valor de $n$ con el deslizador para ver la forma de la distribución de probabilidad clásica y $\|\psi_n\|^2$ en función de la posición $x$.
 
-{% include quantum-harmonic-oscillator.html %}
-
-> - Visualización original: [Repositorio yunseo-kim/physics-visualization](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum-harmonic-oscillator.html)
+<div class="responsive-iframe-container" style="position: relative; padding-bottom: 100%; overflow: hidden;">
+    <iframe id="responsive-iframe"
+            src="/physics-visualization/quantum-harmonic-oscillator.html" 
+            style="position: absolute; top: 0; left: 0; width: 100%; border: none;" 
+            allow="fullscreen">
+    </iframe>
+</div>
+<script>
+  document.getElementById('responsive-iframe').addEventListener('load', function() {
+    var iframe = this;
+    var iframeDocument = iframe.contentWindow.document;
+    // Get the scrollHeight of the iframe's document
+    var height = iframeDocument.documentElement.scrollHeight || iframeDocument.body.scrollHeight;
+    iframe.style.height = height + 'px';
+  });
+</script>
+
+> - Visualización original: <{{site.url}}/physics-visualization/quantum-harmonic-oscillator>
+> - Código fuente: [Repositorio yunseo-kim/physics-visualization](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum-harmonic-oscillator.html)
 > - Licencia: [Ver aquí](https://github.com/yunseo-kim/physics-visualization?tab=readme-ov-file#license)
 
 Además, si tienes Python instalado en tu computadora y un entorno con las bibliotecas Numpy, Plotly y Dash instaladas, también puedes ejecutar el script Python [`/src/quantum_oscillator.py`{: .filepath}](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum_oscillator.py) en el mismo repositorio para ver los resultados.

_posts/fr/2024-12-03-analytic-solution-of-the-harmonic-oscillator.md

@@ -218,9 +218,25 @@ Plus $n$ est grand, plus l'oscillateur quantique ressemble à un oscillateur cla
 ### Visualisation interactive des distributions de probabilité de l'oscillateur quantique
 Voici une visualisation réactive basée sur Plotly.js que j'ai créée moi-même. Vous pouvez ajuster la valeur de $n$ avec le curseur pour voir la forme de la distribution de probabilité classique et de $\|\psi_n\|^2$ en fonction de la position $x$.
 
-{% include quantum-harmonic-oscillator.html %}
-
-> - Visualisation originale : [Dépôt yunseo-kim/physics-visualization](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum-harmonic-oscillator.html)
+<div class="responsive-iframe-container" style="position: relative; padding-bottom: 100%; overflow: hidden;">
+    <iframe id="responsive-iframe"
+            src="/physics-visualization/quantum-harmonic-oscillator.html" 
+            style="position: absolute; top: 0; left: 0; width: 100%; border: none;" 
+            allow="fullscreen">
+    </iframe>
+</div>
+<script>
+  document.getElementById('responsive-iframe').addEventListener('load', function() {
+    var iframe = this;
+    var iframeDocument = iframe.contentWindow.document;
+    // Get the scrollHeight of the iframe's document
+    var height = iframeDocument.documentElement.scrollHeight || iframeDocument.body.scrollHeight;
+    iframe.style.height = height + 'px';
+  });
+</script>
+
+> - Page de visualisation originale : <{{site.url}}/physics-visualization/quantum-harmonic-oscillator>
+> - Code source : [Dépôt yunseo-kim/physics-visualization](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum-harmonic-oscillator.html)
 > - Licence : [Voir ici](https://github.com/yunseo-kim/physics-visualization?tab=readme-ov-file#license)
 
 De plus, si vous pouvez utiliser Python sur votre propre ordinateur et que vous avez un environnement avec les bibliothèques Numpy, Plotly et Dash installées, vous pouvez également exécuter le script Python [`/src/quantum_oscillator.py`{: .filepath}](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum_oscillator.py) dans le même dépôt pour voir les résultats.

_posts/ja/2024-12-03-analytic-solution-of-the-harmonic-oscillator.md

@@ -224,9 +224,25 @@ $n$が大きくなるほど、量子振動子は古典的振動子に類似し
 ### 量子振動子の確率分布のインタラクティブな可視化
 以下は私が直接作成したPlotly.jsベースのレスポンシブな可視化です。スライダーで$n$値を調整しながら、位置$x$に対する古典的な確率分布および$\|\psi_n\|^2$の概形を確認できます。
 
-{% include quantum-harmonic-oscillator.html %}
-
-> - オリジナルの可視化：[yunseo-kim/physics-visualization リポジトリ](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum-harmonic-oscillator.html)
+<div class="responsive-iframe-container" style="position: relative; padding-bottom: 100%; overflow: hidden;">
+    <iframe id="responsive-iframe"
+            src="/physics-visualization/quantum-harmonic-oscillator.html" 
+            style="position: absolute; top: 0; left: 0; width: 100%; border: none;" 
+            allow="fullscreen">
+    </iframe>
+</div>
+<script>
+  document.getElementById('responsive-iframe').addEventListener('load', function() {
+    var iframe = this;
+    var iframeDocument = iframe.contentWindow.document;
+    // Get the scrollHeight of the iframe's document
+    var height = iframeDocument.documentElement.scrollHeight || iframeDocument.body.scrollHeight;
+    iframe.style.height = height + 'px';
+  });
+</script>
+
+> - オリジナルの可視化ページ：<{{site.url}}/physics-visualization/quantum-harmonic-oscillator>
+> - ソースコード：[yunseo-kim/physics-visualization リポジトリ](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum-harmonic-oscillator.html)
 > - ライセンス：[こちらを参照](https://github.com/yunseo-kim/physics-visualization?tab=readme-ov-file#license)
 
 また、もしご自身のコンピュータでPythonを使用でき、Numpy、Plotly、Dashライブラリがインストールされている環境であれば、同じリポジトリ内の[`/src/quantum_oscillator.py`{: .filepath}](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum_oscillator.py) Pythonスクリプトを実行して結果を見ることもできます。

_posts/ko/2024-12-03-analytic-solution-of-the-harmonic-oscillator.md

@@ -224,9 +224,25 @@ $n$이 클수록 양자진동자는 고전적 진동자와 유사한 양상을 
 ### Interactive Visualization of Quantum Oscillator Probability Distributions
 다음은 내가 직접 작성한 Plotly.js 기반의 반응형 시각화이다. 슬라이더로 $n$값을 조절해 가며 위치 $x$에 대한 고전적인 확률분포 및 $\|\psi_n\|^2$의 개형을 확인할 수 있다.
 
-{% include quantum-harmonic-oscillator.html %}
-
-> - 원본 시각화: [yunseo-kim/physics-visualization 리포지터리](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum-harmonic-oscillator.html)
+<div class="responsive-iframe-container" style="position: relative; padding-bottom: 100%; overflow: hidden;">
+    <iframe id="responsive-iframe"
+            src="/physics-visualization/quantum-harmonic-oscillator.html" 
+            style="position: absolute; top: 0; left: 0; width: 100%; border: none;" 
+            allow="fullscreen">
+    </iframe>
+</div>
+<script>
+  document.getElementById('responsive-iframe').addEventListener('load', function() {
+    var iframe = this;
+    var iframeDocument = iframe.contentWindow.document;
+    // Get the scrollHeight of the iframe's document
+    var height = iframeDocument.documentElement.scrollHeight || iframeDocument.body.scrollHeight;
+    iframe.style.height = height + 'px';
+  });
+</script>
+
+> - 원본 시각화 페이지: <{{site.url}}/physics-visualization/quantum-harmonic-oscillator>
+> - 소스코드: [yunseo-kim/physics-visualization 리포지터리](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum-harmonic-oscillator.html)
 > - 라이선스: [See here](https://github.com/yunseo-kim/physics-visualization?tab=readme-ov-file#license)
 
 또한, 만약 본인 컴퓨터에서 Python을 사용할 수 있고 Numpy, Plotly, Dash 라이브러리가 설치된 환경이라면 동일한 리포지터리 내 [`/src/quantum_oscillator.py`{: .filepath}](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum_oscillator.py) Python 스크립트를 실행하여 결과를 볼 수도 있다.

_posts/pt-BR/2024-12-03-analytic-solution-of-the-harmonic-oscillator.md

@@ -218,9 +218,25 @@ Quanto maior o $n$, mais o oscilador quântico se assemelha ao oscilador clássi
 ### Visualização Interativa das Distribuições de Probabilidade do Oscilador Quântico
 A seguir está uma visualização responsiva baseada em Plotly.js que eu mesmo criei. Você pode ajustar o valor de $n$ usando o controle deslizante para verificar a forma da distribuição de probabilidade clássica e $\|\psi_n\|^2$ em relação à posição $x$.
 
-{% include quantum-harmonic-oscillator.html %}
-
-> - Visualização original: [Repositório yunseo-kim/physics-visualization](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum-harmonic-oscillator.html)
+<div class="responsive-iframe-container" style="position: relative; padding-bottom: 100%; overflow: hidden;">
+    <iframe id="responsive-iframe"
+            src="/physics-visualization/quantum-harmonic-oscillator.html" 
+            style="position: absolute; top: 0; left: 0; width: 100%; border: none;" 
+            allow="fullscreen">
+    </iframe>
+</div>
+<script>
+  document.getElementById('responsive-iframe').addEventListener('load', function() {
+    var iframe = this;
+    var iframeDocument = iframe.contentWindow.document;
+    // Get the scrollHeight of the iframe's document
+    var height = iframeDocument.documentElement.scrollHeight || iframeDocument.body.scrollHeight;
+    iframe.style.height = height + 'px';
+  });
+</script>
+
+> - Página de visualização original: <{{site.url}}/physics-visualization/quantum-harmonic-oscillator>
+> - Código fonte: [Repositório yunseo-kim/physics-visualization](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum-harmonic-oscillator.html)
 > - Licença: [Veja aqui](https://github.com/yunseo-kim/physics-visualization?tab=readme-ov-file#license)
 
 Além disso, se você puder usar Python em seu próprio computador e tiver um ambiente com as bibliotecas Numpy, Plotly e Dash instaladas, você também pode executar o script Python [`/src/quantum_oscillator.py`{: .filepath}](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum_oscillator.py) no mesmo repositório para ver os resultados.