Quantum Dots Experiment

Quantum Dot Simulations

Photon Attenuation in Quantum Dots

Simulate how gamma rays attenuate through different thicknesses of quantum dot materials.

Select Quantum Dot Material

Quantum Dot Thickness (nm)

Thickness: 10 nm

Results: Absorbed Fraction: 0, Usable Energy: 0 keV

Photoelectric Effect in Quantum Dots

Simulation Results

Work Function (Φ):

Ejected Electron Kinetic Energy (K.E.): eV

Will Electron Be Ejected?

Pair Production in Quantum Dots

Simulate pair production for high-energy gamma rays and see if electron-positron pairs are produced.

Gamma Ray Energy (MeV):

1.02 MeV

Material Thickness (cm):

2 cm

Scattering Angle (degrees):

30°

Gamma Energy: 1.02 MeV - Pair production possible!

Electron Energy: 0.51 MeV

Positron Energy: 0.51 MeV

Electron Velocity: 300,000,000 m/s

Positron Velocity: 300,000,000 m/s

Quantum Dot Simulations README

This web application simulates three quantum mechanical experiments related to quantum dots:

Photon Attenuation: Simulates the absorption and attenuation of gamma rays through various thicknesses of quantum dot materials.
Photoelectric Effect: Demonstrates how photon energy ejects electrons from quantum dots based on their material's work function.
Pair Production: Models the creation of electron-positron pairs when high-energy gamma rays interact with quantum dot materials.

The interface is built using HTML5, Bootstrap 5.3, and Chart.js for interactive graphs, providing an intuitive way to explore these quantum phenomena.

Project Structure

HTML Structure

The webpage is divided into three sections, each representing an experiment. The layout is responsive and styled with Bootstrap. Users interact with the experiments via form elements like select inputs, sliders, and dynamic content containers that display results in real-time.

Scripts and Libraries

Bootstrap 5.3: Ensures responsive layout and styling.
Chart.js: Powers the real-time graphing functionalities in each experiment.

JavaScript functions dynamically update graph data, simulate behaviors, and display results based on user input.

Detailed Explanation of Code

1. HTML Structure

The HTML starts with a <!DOCTYPE html> declaration to define the document as HTML5. A <div> with the class container centers the page content.

Head Section: Includes meta tags for viewport settings and links to Bootstrap CSS and Chart.js for styling and chart functionality.

Tab Navigation: The experiments are grouped under tabs for smooth transitions. Bootstrap's nav-tabs are used to switch between the experiments without reloading the page.

2. Photon Attenuation Simulation

This simulation allows users to select materials like Cadmium Selenide (CdSe) or Lead Sulfide (PbS) and adjust the thickness of the material. A graph displays the relationship between thickness and photon attenuation.

Key Functions

updatePhotonAttenuation(): Calculates the attenuation of photons through a material based on an exponential decay model.

Important Calculations

Absorbed Fraction: 1 - Math.exp(-attenuationCoeff * thickness / 10)
Usable Energy: Calculated as a fraction of the total absorbed energy.

Charts

Attenuation Chart: Shows the photon intensity decay with material thickness.
Usable Energy Chart: Displays how much energy remains usable as thickness changes.

3. Photoelectric Effect Simulation

In this section, users can select a material and adjust the photon energy to observe the photoelectric effect in real-time.

Key Functions

updatePhotoelectric(): Determines if the photon energy exceeds the work function, and if so, calculates the electron's kinetic energy.

Important Calculations

Kinetic Energy: photonEnergyEV - workFunction, where photonEnergyEV is converted from keV to eV.
Electron Ejection: If kinetic energy is positive, the electron is ejected.

Charts

Kinetic Energy Graph: Displays the electron’s kinetic energy after photon interaction.
Photon Energy vs. Kinetic Energy: Shows how photon energy affects the kinetic energy of the ejected electron.

4. Pair Production Simulation

This section simulates pair production, which occurs when gamma ray energy exceeds 1.02 MeV, resulting in electron-positron pairs.

Key Functions

updatePairProduction(): Determines whether pair production is possible based on gamma ray energy and calculates electron/positron energy.

Important Calculations

Scattering Energy: The Compton scattering formula calculates the energy of scattered photons based on the scattering angle.

Charts

Pair Production Chart: Shows the energy distribution of the electron and positron.
Scattering Energy Chart: Displays scattering energy based on the angle.

Explore the Code (Interactive)

The code below is the backbone of the Quantum Dot Simulations project. Feel free to scroll and explore!

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quantum Dot Simulations</title>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

</head>

<body>

<div class="container">
        <h1 class="text-center mb-4">Quantum Dot Simulations</h1>

<ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="experiment1-tab" data-bs-toggle="tab" data-bs-target="#experiment1"
                    type="button" role="tab" aria-controls="experiment1" aria-selected="true">Photon
                    Attenuation</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="experiment2-tab" data-bs-toggle="tab" data-bs-target="#experiment2"
                    type="button" role="tab" aria-controls="experiment2" aria-selected="false">Photoelectric
                    Effect</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="experiment3-tab" data-bs-toggle="tab" data-bs-target="#experiment3"
                    type="button" role="tab" aria-controls="experiment3" aria-selected="false">Pair Production</button>
            </li>
        </ul>

<div class="tab-content mt-4" id="myTabContent">
            
            <div class="tab-pane fade show active" id="experiment1" role="tabpanel" aria-labelledby="experiment1-tab">
                <h3>Photon Attenuation in Quantum Dots</h3>
                <p>Simulate how gamma rays attenuate through different thicknesses of quantum dot materials.</p>

<div class="mb-3">
                    <label for="material1" class="form-label">Select Quantum Dot Material</label>
                    <select class="form-select" id="material1" onchange="updatePhotonAttenuation()">
                        <option value="CdSe">Cadmium Selenide (CdSe)</option>
                        <option value="PbS">Lead Sulfide (PbS)</option>
                        <option value="Si">Silicon (Si)</option>
                    </select>
                </div>

<div class="mb-3">
                    <label for="thickness1" class="form-label">Quantum Dot Thickness (nm)</label>
                    <input type="range" class="form-range" min="1" max="100" id="thickness1" value="10"
                        oninput="updatePhotonAttenuation()">
                    <div class="slider-value" id="thicknessValue1">Thickness: 10 nm</div>
                </div>

<div class="result-box">
                    <p id="attenuationResult">Results: Absorbed Fraction: 0, Usable Energy: 0 keV</p>
                </div>
            </div>

<div class="tab-pane fade" id="experiment2" role="tabpanel" aria-labelledby="experiment2-tab">
                <h3>Photoelectric Effect in Quantum Dots</h3>
                <form>
                    <div class="mb-3">
                        <label for="material2" class="form-label">Select Quantum Dot Material</label>
                        <select id="material2" class="form-select" onchange="updatePhotoelectric()">
                            <option value="CdSe">Cadmium Selenide (CdSe) - Work Function: 4.3 eV</option>
                            <option value="PbS">Lead Sulfide (PbS) - Work Function: 4.1 eV</option>
                            <option value="SiO2">Silicon Dioxide (SiO₂) - Work Function: 5.1 eV</option>
                            <option value="custom">Custom Material - Enter Work Function</option>
                        </select>
                    </div>

<div id="custom-work-function" class="mb-3" style="display:none;">
                        <label for="workFunctionInput" class="form-label">Enter Custom Work Function (eV):</label>
                        <input type="number" id="workFunctionInput" class="form-control" value="4.0"
                            onchange="updatePhotoelectric()">
                    </div>

<div class="mb-3">
                        <label for="photonEnergy" class="form-label">Photon Energy (keV): <span id="photonEnergyValue"
                                class="fw-bold">10 keV</span></label>
                        <input type="range" class="form-range" id="photonEnergy" min="1" max="100" value="10"
                            oninput="updatePhotoelectric()">
                    </div>
                </form>

<div class="result-box">
                    <h3>Simulation Results</h3>
                    <p class="mb-1">Work Function (Φ): <span id="workFunction" class="fw-bold"></span></p>
                    <p class="mb-1">Ejected Electron Kinetic Energy (K.E.): <span id="kineticEnergy"
                            class="fw-bold"></span> eV</p>
                    <p>Will Electron Be Ejected? <span id="electronEjected" class="fw-bold threshold-indicator"></span>
                    </p>
                </div>

<div class="tab-pane fade" id="experiment3" role="tabpanel" aria-labelledby="experiment3-tab">
                <h3>Pair Production in Quantum Dots</h3>
                <p>Simulate pair production for high-energy gamma rays and see if electron-positron pairs are produced.
                </p>

<div class="mb-3">
                    <label for="gammaEnergy" class="form-label">Gamma Ray Energy (MeV):</label>
                    <input type="range" class="form-range" id="gammaEnergy" min="1.02" max="10" step="0.01" value="1.02"
                        oninput="updatePairProduction()">
                    <div class="slider-value" id="gammaEnergyValue">1.02 MeV</div>
                </div>

<div class="mb-3">
                    <label for="materialThickness" class="form-label">Material Thickness (cm):</label>
                    <input type="range" class="form-range" id="materialThickness" min="0.1" max="10" step="0.1"
                        value="2" oninput="updatePairProduction()">
                    <div class="slider-value" id="materialThicknessValue">2 cm</div>
                </div>

<div class="mb-3">
                    <label for="scatteringAngle" class="form-label">Scattering Angle (degrees):</label>
                    <input type="range" class="form-range" id="scatteringAngle" min="0" max="180" step="1" value="30"
                        oninput="updatePairProduction()">
                    <div class="slider-value" id="scatteringAngleValue">30°</div>
                </div>

<div class="result-box">
                    <p id="pairProductionResult">Gamma Energy: 1.02 MeV - Pair production possible!</p>
                    <p>Electron Energy: <span id="electronEnergy">0.51 MeV</span></p>
                    <p>Positron Energy: <span id="positronEnergy">0.51 MeV</span></p>
                    <p>Electron Velocity: <span id="electronVelocity">300,000,000 m/s</span></p>
                    <p>Positron Velocity: <span id="positronVelocity">300,000,000 m/s</span></p>
                </div>

<div class="graph-container">
                    <canvas id="pairProductionChart"></canvas>
                </div>

// Call the function to update the scatter plot
                    updateScatterPlot();
                    updateHeatmap();
                </script>
            </div>
        </div>
    </div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

let attenuationChart = null, usableEnergyChart = null;
        let kineticEnergyChart = null, photonVsKineticChart = null;
        let pairProductionChart = null, scatteringEnergyChart = null;

const materialProperties = {
            'CdSe': 4.3,   // Work function for Cadmium Selenide
            'PbS': 4.1,    // Work function for Lead Sulfide
            'SiO2': 5.1    // Work function for Silicon Dioxide
        };

const pairProductionThreshold = 1.02; // MeV

// Function to create or update a Chart.js chart dynamically
        function updateChart(chartInstance, canvasId, data, label, xLabel, yLabel) {
            const ctx = document.getElementById(canvasId).getContext('2d');
            if (!chartInstance) {
                chartInstance = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: Array.from({ length: 100 }, (_, i) => i + 1),
                        datasets: [{
                            label: label,
                            data: data,
                            borderColor: '#007bff',
                            borderWidth: 2
                        }]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            x: {
                                title: { display: true, text: xLabel }
                            },
                            y: {
                                title: { display: true, text: yLabel }
                            }
                        }
                    }
                });
            } else {
                chartInstance.data.datasets[0].data = data;
                chartInstance.update();
            }
            return chartInstance; // Return the updated chart instance
        }

// PHOTON ATTENUATION EXPERIMENT
        function updatePhotonAttenuation() {
            const material = document.getElementById("material1").value;
            const thickness = document.getElementById("thickness1").value;
            document.getElementById("thicknessValue1").textContent = `Thickness: ${thickness} nm`;

const attenuationCoeff = 0.05;  // Placeholder for linear attenuation coefficient
            const absorbedFraction = 1 - Math.exp(-attenuationCoeff * thickness / 10);
            const photonEnergy = 100; // Assume a default photon energy of 100 keV for simulation
            const energyAbsorbed = photonEnergy * absorbedFraction;
            const usableEnergy = energyAbsorbed * 0.3; // Assume 30% efficiency

document.getElementById("attenuationResult").textContent = `Absorbed Fraction: ${absorbedFraction.toFixed(2)}, Usable Energy: ${usableEnergy.toFixed(2)} keV`;

// Update Attenuation Chart
            attenuationChart = updateChart(attenuationChart, 'attenuationChart', Array.from({ length: 100 }, (_, i) => Math.exp(-attenuationCoeff * (i + 1) * thickness / 100)), 'Photon Attenuation', 'Thickness (nm)', 'Photon Intensity');

// Update Usable Energy vs Thickness Chart
            usableEnergyChart = updateChart(usableEnergyChart, 'usableEnergyChart', Array.from({ length: 100 }, (_, i) => photonEnergy * (1 - Math.exp(-attenuationCoeff * (i + 1) / 100)) * 0.3), 'Usable Energy', 'Thickness (nm)', 'Energy (keV)');
        }

// PHOTOELECTRIC EFFECT EXPERIMENT
        function updatePhotoelectric() {
            const photonEnergyKeV = document.getElementById("photonEnergy").value;
            const material = document.getElementById("material2").value;
            let workFunction = materialProperties[material];

if (material === 'custom') {
                document.getElementById("custom-work-function").style.display = 'block';
                workFunction = parseFloat(document.getElementById("workFunctionInput").value);
            } else {
                document.getElementById("custom-work-function").style.display = 'none';
            }

const photonEnergyEV = photonEnergyKeV * 1000;  // Convert keV to eV
            const kineticEnergy = photonEnergyEV > workFunction ? photonEnergyEV - workFunction : 0;
            const electronEjected = kineticEnergy > 0 ? "Yes" : "No";

// Update Kinetic Energy Chart
            kineticEnergyChart = updateChart(kineticEnergyChart, 'kineticEnergyGraph', [kineticEnergy], 'Kinetic Energy (eV)', 'Photon Energy (keV)', 'Kinetic Energy (eV)');

// Update Photon Energy vs Kinetic Energy Chart
            photonVsKineticChart = updateChart(photonVsKineticChart, 'photonVsKineticChart', [photonEnergyKeV], 'Photon Energy (keV)', 'Photon Energy (keV)', 'Kinetic Energy (eV)');
        }

// PAIR PRODUCTION EXPERIMENT
        function updatePairProduction() {
            const gammaEnergy = parseFloat(document.getElementById("gammaEnergy").value);
            const materialThickness = document.getElementById("materialThickness").value;
            const scatteringAngle = document.getElementById("scatteringAngle").value;

const isPairProductionPossible = gammaEnergy >= pairProductionThreshold;

let resultText = `Gamma Energy: ${gammaEnergy} MeV - `;
            if (isPairProductionPossible) {
                resultText += "Pair production possible!";
                document.getElementById("pairProductionResult").style.color = "green";

const electronEnergy = (gammaEnergy / 2).toFixed(2);
                const positronEnergy = electronEnergy;
                document.getElementById("electronEnergy").textContent = `${electronEnergy} MeV`;
                document.getElementById("positronEnergy").textContent = `${positronEnergy} MeV`;
                document.getElementById("electronVelocity").textContent = `300,000,000 m/s`;
                document.getElementById("positronVelocity").textContent = `300,000,000 m/s`;

// Update Pair Production Chart
                pairProductionChart = updateChart(pairProductionChart, 'pairProductionChart', [electronEnergy, positronEnergy], 'Energy Distribution', 'Particles', 'Energy (MeV)');

// Update Scattering Energy Chart
                const scatteringEnergy = gammaEnergy / (1 + (gammaEnergy / electronMassEnergy) * (1 - Math.cos(scatteringAngle * Math.PI / 180)));
                scatteringEnergyChart = updateChart(scatteringEnergyChart, 'scatteringEnergyChart', [scatteringEnergy], 'Scattered Photon Energy', 'Scattering Angle (degrees)', 'Energy (MeV)');

// Update Scatter Plot
                updateScatterPlot();
            } else {
                resultText += "Pair production not possible.";
                document.getElementById("pairProductionResult").style.color = "red";
                document.getElementById("electronEnergy").textContent = `-`;
                document.getElementById("positronEnergy").textContent = `-`;
                document.getElementById("electronVelocity").textContent = `-`;
                document.getElementById("positronVelocity").textContent = `-`;
            }

document.getElementById("pairProductionResult").textContent = resultText;

// Log values for debugging
            console.log(`Gamma Energy: ${gammaEnergy} MeV`);
            console.log(`Material Thickness: ${materialThickness} cm`);
            console.log(`Scattering Angle: ${scatteringAngle} degrees`);
            console.log(`Is Pair Production Possible: ${isPairProductionPossible}`);
            if (isPairProductionPossible) {
                console.log(`Electron Energy: ${electronEnergy} MeV`);
                console.log(`Positron Energy: ${positronEnergy} MeV`);
                console.log(`Scattering Energy: ${scatteringEnergy} MeV`);
            }
        }

// Initialize all experiments with default values
        updatePhotonAttenuation();
        updatePhotoelectric();
        updatePairProduction();
    </script>

</body>

</html>

Running the Project

To run the simulation:

Download the entire HTML code.
Open the HTML file in a web browser.
Interact with the simulation by selecting different materials, adjusting the sliders for thickness and energy, and observing the results.