simulations/index.html at main · wishmaur2/simulations · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Determining Wavelength Using Diffraction Grating</title>
    <link rel="stylesheet" href="./css/main.css">
</head>

<body>
    <div class="container">
        <div class="header">Determining Wavelength Using Diffraction Grating</div>
        <div class="experiment-area">
            <div class="display-area" id="displayArea">
                <div class="screen-overlay" id="diffractionScreen">
                    <div class="dot" id="dot1"></div>
                    <div class="dot" id="dot2"></div>
                    <div class="dot" id="dot3"></div>
                    <div class="dot" id="dot4"></div>
                    <div class="dot" id="dot5"></div>
                </div>
                <!-- Base line for alignment -->
                <div id="base-line"></div>

                <img id="laser" src="./images/laser-image.png" alt="Laser Source">
                <img id="grating" src="./images/grating-image.png" alt="Diffraction Grating">
                <img id="grating" src="./images/grating-image1.png" alt="Diffraction Grating">
                <img id="screen" src="./images/screen-image.png" alt="Screen">

                <!-- Procedure Info Button -->
                <div id="procedureToggle">
                    <span class="info-icon">!</span>
                    <span class="info-label">Procedure (Simulation Working)</span>
                </div>

                <!-- Procedure Content -->
                <div id="procedureBox">
                    <h4>Procedure (Simulation Working)</h4>
                    <ol>
                        <li>Click on <b>Laser Source</b> button to add the laser in the experimental setup.</li>
                        <li>Click on <b>Grating</b> button to place the diffraction grating between laser and screen.</li>
                        <li>Click on <b>Screen</b> button to add the observation screen.</li>
                        <li>After adding Laser, Grating, and Screen, click on <b>Turn On</b> to start the simulation.</li>
                        <li>A diffraction pattern consisting of a central maximum and higher order maxima appears on the screen.</li>
                        <li>Adjust the distance between the screen and grating using the slider provided.</li>
                        <li>Note the distances between the central (0th order) maximum and <b>S₁</b> (first order) and <b>S₂</b> (second order) maxima.</li>
                        <li>Click on <b>Add Observation</b> to record the readings in the observation table.</li>
                        <li>Change the distance and repeat the above steps to take multiple readings.</li>
                    </ol>
                </div>

            </div>
            <div class="controls">
                <button id="laserBtn" onclick="toggleLaser()">Laser Source</button>
                <button id="gratingBtn" onclick="toggleGrating()">Grating</button>
                <button id="screenBtn" onclick="toggleScreen()">Screen</button>
                <button class="start" id="turnOn" onclick="startSimulation()" disabled>Turn On</button>
                <button class="reset" onclick="resetSimulation()">Reset All</button>
                <div class="range-container" id="range-container">
                    <label for="distance">Adjust Distance Between Screen and Grating (0-40 cm):</label>
                    <input type="range" id="distance" min="0" max="40" value="5">
                    <span id="distance-value">5 cm</span>
                </div>
            </div>
        </div>
        <div class="message-box" id="message">>> Simulator Stopped</div>


        <!-- ===== Observation & Calculation Table (Table-1) ===== -->
        <div id="observationTableContainer">
            <h3>Observation & Calculation Table</h3>

            <table id="observationTable">
                <thead>
                    <tr>
                        <th>S. No.</th>
                        <th>Order (n)</th>
                        <th>Distance between Screen & Grating L(cm)</th>
                        <th>Distance of nth maxima from central maxima S(cm)</th>
                        <th>Angle θ (deg)</th>
                        <th>Grating Spacing d(cm)</th>
                        <th>Wavelength λ (nm)</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>

            <button id="addObservationBtn" disabled>Add Observation</button>
            <button id="clearObservationBtn">Clear Table</button>
        </div>


    </div>
    <!-- Add JS at the bottom of HTML file -->
    <script src="./js/main.js"></script>
</body>

</html>