https://bloqqer.onrender.com/js/core/tutorial.js

1/**
2 * Manages the interactive tutorial for the Bloch sphere visualizer
3 */
4class Tutorial {
5    constructor(blochSphere, quantumState, controls) {
6        this.blochSphere = blochSphere;
7        this.quantumState = quantumState;
8        this.controls = controls;
9        
10        this.currentStep = 0;
11        this.tutorialSteps = [
12            {
13                title: "Welcome to the Quantum Bloch Sphere",
14                content: `
15                    <p>Welcome to the Quantum Bloch Sphere Visualizer! This tool helps you visualize and understand 
16                    single-qubit quantum states and operations.</p>
17                    <p>The Bloch sphere is a geometric representation of the pure state space of a qubit.</p>
18                `
19            },
20            {
21                title: "Understanding the Bloch Sphere",
22                content: `
23                    <p>The Bloch sphere represents a qubit's state as a point on or inside a unit sphere.</p>
24                    <p>The north pole (top) represents the |0⟩ state, while the south pole (bottom) represents the |1⟩ state.</p>
25                    <p>The east point represents the |+⟩ state, while the west point represents the |-⟩ state.</p>
26                    <p>The front point (out of screen) represents the |i⟩ state, while the back point (into screen) represents the |-i⟩ state.</p>
27                `
28            },
29            {
30                title: "Quantum State Representation",
31                content: `
32                    <p>A qubit state is represented as: α|0⟩ + β|1⟩, where α and β are complex numbers with |α|² + |β|² = 1.</p>
33                    <p>You can input custom states using the "State in Ket Notation" field.</p>
34                    <p>For example, try entering: "0.7|0⟩ + 0.7i|1⟩"</p>
35                `
36            },
37            {
38                title: "Quantum Gates",
39                content: `
40                    <p>Quantum gates are operations that transform quantum states.</p>
41                    <p><strong>H (Hadamard)</strong>: Creates superpositions. Transforms |0⟩ to (|0⟩ + |1⟩)/√2.</p>
42                    <p><strong>X (Pauli-X)</strong>: Quantum NOT gate. Flips |0⟩ to |1⟩ and vice versa.</p>
43                    <p><strong>Y (Pauli-Y)</strong>: Rotation around Y-axis of the Bloch sphere.</p>
44                    <p><strong>Z (Pauli-Z)</strong>: Phase flip. Leaves |0⟩ unchanged but maps |1⟩ to -|1⟩.</p>
45                `
46            },
47            {
48                title: "Phase Gates",
49                content: `
50                    <p><strong>S (Phase Gate)</strong>: Applies a 90° phase shift. Maps |1⟩ to i|1⟩.</p>
51                    <p><strong>T (π/8 Gate)</strong>: Applies a 45° phase shift. Maps |1⟩ to e^(iπ/4)|1⟩.</p>
52                    <p>Phase gates are important for universal quantum computation.</p>
53                `
54            },
55            {
56                title: "Custom Rotations",
57                content: `
58                    <p>You can apply custom rotations using the θ (theta) and φ (phi) sliders.</p>
59                    <p>θ controls the polar angle (0° at north pole, 180° at south pole).</p>
60                    <p>φ controls the azimuthal angle around the equator.</p>
61                `
62            },
63            {
64                title: "Voice Commands",
65                content: `
66                    <p>You can control the visualization using voice commands:</p>
67                    <ul>
68                        <li>"Apply Hadamard gate" - Applies the H gate</li>
69                        <li>"Rotate sphere 30 degrees" - Rotates the visualization</li>
70                        <li>"Reset state" - Returns to the |0⟩ state</li>
71                    </ul>
72                    <p>Click "Start Voice Commands" to begin using voice control.</p>
73                `
74            },
75            {
76                title: "Experiment and Learn",
77                content: `
78                    <p>The best way to understand quantum states is to experiment!</p>
79                    <p>Try applying different gates in sequence and observe how the state changes.</p>
80                    <p>For example, apply H, then X, then H again to see what happens.</p>
81                    <p>Enjoy exploring the quantum world!</p>
82                `
83            }
84        ];
85        
86        this.initEventListeners();
87        this.updateTutorialContent();
88    }
89    
90    /**
91     * Initialize event listeners for tutorial navigation
92     */
93    initEventListeners() {
94        document.getElementById('next-tutorial').addEventListener('click', () => {
95            this.nextStep();
96        });
97        
98        document.getElementById('prev-tutorial').addEventListener('click', () => {
99            this.prevStep();
100        });
101    }
102    
103    /**
104     * Move to the next tutorial step
105     */
106    nextStep() {
107        if (this.currentStep < this.tutorialSteps.length - 1) {
108            this.currentStep++;
109            this.updateTutorialContent();
110        }
111    }
112    
113    /**
114     * Move to the previous tutorial step
115     */
116    prevStep() {
117        if (this.currentStep > 0) {
118            this.currentStep--;
119            this.updateTutorialContent();
120        }
121    }
122    
123    /**
124     * Update the tutorial content based on current step
125     */
126    updateTutorialContent() {
127        const step = this.tutorialSteps[this.currentStep];
128        const tutorialContent = document.getElementById('tutorial-content');
129        
130        // Update content
131        tutorialContent.innerHTML = `
132            <h3>${step.title}</h3>
133            ${step.content}
134            <p class="tutorial-progress">Step ${this.currentStep + 1} of ${this.tutorialSteps.length}</p>
135        `;
136        
137        // Update button states
138        document.getElementById('prev-tutorial').disabled = (this.currentStep === 0);
139        document.getElementById('next-tutorial').disabled = (this.currentStep === this.tutorialSteps.length - 1);
140    }
141}