StructuralSensei.github.io/game.html at main · StructuralSensei/StructuralSensei.github.io · 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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Structural Sensei | Full Game Suite</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body { background: #050505; color: #f5f5f0; font-family: 'Inter', sans-serif; }
        .view { display: none; }
        .active { display: block; animation: fadeIn 0.4s ease-in-out; }
        .glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px); }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* Animation Track Styles */
        #track { position: relative; width: 100%; height: 120px; border-bottom: 2px solid #333; margin-bottom: 20px; }
        #character {
            position: absolute;
            bottom: 0;
            left: 0;
            font-size: 3rem;
            transition: left 1s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth walking motion */
            z-index: 10;
        }
        .milestone-marker {
            position: absolute; bottom: -10px; width: 4px; height: 20px; background: #666;
        }
    </style>
</head>
<body class="p-4 md:p-8">

    <div id="menu" class="view active max-w-2xl mx-auto text-center mt-12 md:mt-24">
        <h1 class="text-5xl font-bold mb-4 tracking-tighter">SENSEI <span class="text-red-600">HUB</span></h1>
        <p class="text-stone-400 mb-12 uppercase tracking-widest text-xs">Engineering · STEM · Mastery</p>

        <div class="grid md:grid-cols-3 gap-4">
            <button onclick="loadQuiz('hard')" class="glass p-8 hover:bg-red-900/50 hover:border-red-500 transition rounded-xl flex flex-col items-center gap-3">
                <span class="text-3xl">⚙️</span>
                <span class="font-bold text-sm tracking-widest">HARD MODE</span>
            </button>
            <button onclick="loadQuiz('gen')" class="glass p-8 hover:bg-orange-900/50 hover:border-orange-500 transition rounded-xl flex flex-col items-center gap-3">
                <span class="text-3xl">🧠</span>
                <span class="font-bold text-sm tracking-widest">STEM TRIVIA</span>
            </button>
            <button onclick="loadStory()" class="glass p-8 hover:bg-blue-900/50 hover:border-blue-500 transition rounded-xl flex flex-col items-center gap-3">
                <span class="text-3xl">🛤️</span>
                <span class="font-bold text-sm tracking-widest">THE JOURNEY</span>
            </button>
        </div>
    </div>

    <div id="quiz-view" class="view max-w-xl mx-auto glass p-8 rounded-xl mt-10 shadow-2xl">
        <div class="flex justify-between items-center mb-6 border-b border-white/10 pb-4">
            <h2 id="quiz-title" class="text-xl font-bold uppercase tracking-widest text-red-500">Quiz</h2>
            <span id="score-counter" class="text-sm font-mono text-stone-400">Score: 0 / 10</span>
        </div>

        <div id="q-text" class="text-lg md:text-xl mb-8 leading-relaxed font-medium"></div>
        <div id="btns" class="grid gap-3 mb-8"></div>

        <button onclick="switchView('menu')" class="text-stone-500 hover:text-white text-xs uppercase tracking-widest transition">← Abandon Protocol</button>
    </div>

    <div id="story-view" class="view max-w-3xl mx-auto glass p-8 rounded-xl mt-10 shadow-2xl">
        <h2 class="text-xl font-bold uppercase tracking-widest text-blue-500 mb-8 text-center">Path to Mastery</h2>

        <div id="track">
            <div id="character">🚶</div>
            <div class="milestone-marker" style="left: 0%;"></div>
            <div class="milestone-marker" style="left: 33%;"></div>
            <div class="milestone-marker" style="left: 66%;"></div>
            <div class="milestone-marker" style="left: 95%;"></div>
        </div>

        <div class="text-center mt-8">
            <h3 id="story-title" class="text-2xl font-bold mb-2">Stage 1: The Foundation</h3>
            <p id="story-text" class="text-stone-400 h-16">Mastering the fundamentals of static loads and material strength.</p>

            <button id="walk-btn" onclick="advanceJourney()" class="bg-blue-600 hover:bg-blue-500 px-8 py-4 rounded font-bold uppercase tracking-widest transition mt-4 w-full md:w-auto">
                Advance Career
            </button>
        </div>

        <div class="mt-8 text-center border-t border-white/10 pt-6">
            <button onclick="switchView('menu')" class="text-stone-500 hover:text-white text-xs uppercase tracking-widest transition">← Return to Hub</button>
        </div>
    </div>

    <script>
        // --- 1. DATA DICTIONARY ---
        const data = {
            hard: [
                {q: "STRUCTURAL: What is the primary factor in Euler's Column Buckling formula (π²EI/L²)?", a: ["Tensile Load", "Effective Length", "Shear Modulus", "Torsional Yield"], c: 1},
                {q: "FLUIDS: In open channel flow, which equation relies heavily on the roughness coefficient 'n'?", a: ["Bernoulli's", "Manning's Equation", "Darcy-Weisbach", "Reynold's Number"], c: 1},
                {q: "AUTOMATION: In Python, what is the primary purpose of the __init__ method within a class structure?", a: ["To delete objects", "To initialize attributes of an object", "To import external libraries", "To compile the script"], c: 1},
                {q: "MATERIALS: The point on a stress-strain curve where a material undergoes irreversible deformation is called?", a: ["Ultimate Tensile Strength", "Modulus of Elasticity", "Yield Point", "Fracture Point"], c: 2},
                {q: "HYDROLOGY: In the Rational Method (Q = CiA), what does the 'C' represent?", a: ["Catchment Area", "Capillary Action", "Runoff Coefficient", "Channel Velocity"], c: 2},
                {q: "GEOTECH: Which tool is used graphically to determine principal stresses and maximum shear stress in soil?", a: ["Mohr's Circle", "Atterberg Limits", "Proctor Curve", "Boussinesq Equation"], c: 0},
                {q: "ELECTRICAL: According to Ohm's Law, Voltage (V) is equal to?", a: "Current / Resistance", a: ["Current x Resistance", "Power x Time", "Resistance / Current", "Current x Resistance"], c: 3},
                {q: "COMPUTER SCIENCE: What is the time complexity (Big O) of a binary search algorithm?", a: ["O(1)", "O(n)", "O(log n)", "O(n²)"], c: 2},
                {q: "MECHANICAL: The Second Law of Thermodynamics states that the total entropy of an isolated system can never?", a: ["Increase", "Decrease", "Equal zero", "Generate heat"], c: 1},
                {q: "STRUCTURAL: The mathematical derivative of the Bending Moment diagram gives you what?", a: ["Deflection", "Rotation", "Axial Force", "Shear Force"], c: 3}
            ],
            gen: [
                {q: "What is the primary alloy element combined with Iron to create Steel?", a: ["Zinc", "Carbon", "Copper", "Titanium"], c: 1},
                {q: "Who is widely considered the first computer programmer?", a: ["Alan Turing", "Bill Gates", "Ada Lovelace", "Steve Wozniak"], c: 2},
                {q: "What does the acronym S.T.E.M. stand for?", a: ["Science, Technology, Engineering, Math", "Software, Testing, Evaluation, Metrics", "Systems, Technology, Environment, Mechanics", "Science, Teaching, Education, Math"], c: 0},
                {q: "Currently, what is the tallest man-made structure in the world?", a: ["Shanghai Tower", "Merdeka 118", "Burj Khalifa", "One World Trade Center"], c: 2},
                {q: "What is the hardest known natural mineral on Earth?", a: ["Quartz", "Graphene", "Diamond", "Tungsten"], c: 2},
                {q: "Who created the Python programming language in 1991?", a: ["Linus Torvalds", "Guido van Rossum", "James Gosling", "Dennis Ritchie"], c: 1},
                {q: "What is the most abundant gas in the Earth's atmosphere?", a: ["Oxygen", "Carbon Dioxide", "Hydrogen", "Nitrogen"], c: 3},
                {q: "Force equals Mass times Acceleration (F=ma) is which of Newton's laws?", a: ["First Law", "Second Law", "Third Law", "Law of Gravitation"], c: 1},
                {q: "Which ancient Greek mathematician is known as the 'Father of Geometry'?", a: ["Pythagoras", "Archimedes", "Euclid", "Socrates"], c: 2},
                {q: "Approximately how fast does light travel in a vacuum?", a: ["300,000 km/s", "150,000 km/s", "1,000,000 km/s", "343 m/s"], c: 0}
            ]
        };

        // --- 2. GAME STATE LOGIC ---
        let currentType = '';
        let currentQIdx = 0;
        let score = 0;

        function switchView(id) {
            document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
            document.getElementById(id).classList.add('active');
        }

        // --- 3. QUIZ ENGINE ---
        function loadQuiz(type) {
            currentType = type;
            currentQIdx = 0;
            score = 0;
            document.getElementById('quiz-title').innerText = type === 'hard' ? "Hard Mode Protocol" : "STEM Trivia Protocol";
            updateScoreDisplay();
            switchView('quiz-view');
            renderQuestion();
        }

        function updateScoreDisplay() {
            document.getElementById('score-counter').innerText = `Score: ${score} / 10`;
        }

        function renderQuestion() {
            const quizData = data[currentType];

            // Check for end of game
            if (currentQIdx >= quizData.length) {
                document.getElementById('q-text').innerHTML = `<span class="text-green-500">Protocol Complete.</span> Final Score: ${score}/10.`;
                document.getElementById('btns').innerHTML = `<button onclick="loadQuiz('${currentType}')" class="glass p-4 text-center hover:bg-white/10">Restart Test</button>`;
                return;
            }

            const q = quizData[currentQIdx];
            document.getElementById('q-text').innerText = `${currentQIdx + 1}. ${q.q}`;

            const btnContainer = document.getElementById('btns');
            btnContainer.innerHTML = '';

            q.a.forEach((opt, index) => {
                const btn = document.createElement('button');
                btn.className = 'glass p-4 rounded hover:bg-white/10 hover:border-white/40 text-left transition';
                btn.innerText = opt;
                btn.onclick = () => handleAnswer(index, q.c);
                btnContainer.appendChild(btn);
            });
        }

        function handleAnswer(selectedIndex, correctIndex) {
            if (selectedIndex === correctIndex) score++;
            currentQIdx++;
            updateScoreDisplay();
            renderQuestion();
        }

        // --- 4. INTERACTIVE STORY ENGINE ---
        const journeyStages = [
            { pos: "0%", icon: "👷", title: "Stage 1: The Foundation", text: "Mastering the fundamentals of structural engineering, calculations, and concrete." },
            { pos: "33%", icon: "💻", title: "Stage 2: The Automator", text: "Hitting the 'Technical Wall'. Discovering Python to write scripts and automate repetitive design tasks." },
            { pos: "66%", icon: "🚀", title: "Stage 3: Systems Architect", text: "Bridging disciplines. Building high-level systems, web apps, and data pipelines for infrastructure." },
            { pos: "95%", icon: "🧘", title: "Stage 4: The Sensei", text: "Achieving leverage. Translating technical mastery into financial independence and teaching others." }
        ];

        let journeyStep = 0;

        function loadStory() {
            journeyStep = 0;
            updateJourneyUI();
            switchView('story-view');
        }

        function advanceJourney() {
            if (journeyStep < journeyStages.length - 1) {
                journeyStep++;
                updateJourneyUI();
            } else {
                // Loop back or finish
                alert("You have reached mastery. Now, teach the next generation.");
                journeyStep = 0;
                updateJourneyUI();
            }
        }

        function updateJourneyUI() {
            const stage = journeyStages[journeyStep];
            const character = document.getElementById('character');

            // Move character physically across the track
            character.style.left = stage.pos;

            // Update text after a slight delay to match walking animation
            setTimeout(() => {
                character.innerText = stage.icon;
                document.getElementById('story-title').innerText = stage.title;
                document.getElementById('story-text').innerText = stage.text;

                const btn = document.getElementById('walk-btn');
                if (journeyStep === journeyStages.length - 1) {
                    btn.innerText = "Restart Journey";
                    btn.classList.replace('bg-blue-600', 'bg-green-600');
                } else {
                    btn.innerText = "Advance Career";
                    btn.classList.replace('bg-green-600', 'bg-blue-600');
                }
            }, 300); // 300ms delay feels natural
        }
    </script>
</body>
</html>