Upload filament
📦 BAMU LAB
✨ The Prompt Phrase
Upload the filament in the device tab of the Bamboo Lab 3D printer application. The image preview before the report shows where to do this.
💻 Code Preview
📦 All-in-One Code
<img src="/imgs/Screenshot 2026-01-20 134807.png" alt="Image">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Interactive tutorial for uploading filament in Bambu Lab 3D printer application">
<title>Upload Filament - Interactive Tutorial 🎮</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&family=Fira+Code:wght@400;600&display=swap');
:root {
--primary: #667eea;
--secondary: #764ba2;
--accent: #f093fb;
--success: #4ade80;
--warning: #fbbf24;
--danger: #f87171;
--info: #3b82f6;
--dark: #1a1a2e;
--darker: #0f0f1e;
--light: #eaeaea;
--glass: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
--shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, var(--dark) 0%, var(--darker) 100%);
color: var(--light);
line-height: 1.6;
overflow-x: hidden;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Progress Bar */
.progress-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: rgba(0, 0, 0, 0.3);
z-index: 1000;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--accent));
width: 0%;
transition: width 0.3s ease;
box-shadow: 0 0 10px var(--accent);
}
/* Floating Particles */
.particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: var(--accent);
border-radius: 50%;
opacity: 0.3;
animation: float 20s infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0) translateX(0);
}
25% {
transform: translateY(-100px) translateX(50px);
}
50% {
transform: translateY(-200px) translateX(-50px);
}
75% {
transform: translateY(-100px) translateX(100px);
}
}
/* Hero Section */
.hero {
text-align: center;
padding: 100px 20px 80px;
position: relative;
z-index: 1;
}
.hero::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
opacity: 0.15;
animation: rotate 30s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.hero-badge {
display: inline-block;
padding: 8px 20px;
background: var(--glass);
backdrop-filter: blur(10px);
border: 2px solid var(--glass-border);
border-radius: 50px;
font-size: 0.9rem;
margin-bottom: 20px;
animation: fadeInDown 1s ease;
}
.hero h1 {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 800;
background: linear-gradient(135deg, var(--primary), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 20px;
animation: fadeInDown 1s ease 0.2s backwards;
line-height: 1.2;
}
.hero-subtitle {
font-size: clamp(1rem, 2vw, 1.3rem);
color: var(--light);
opacity: 0.8;
margin-bottom: 40px;
animation: fadeInUp 1s ease 0.4s backwards;
}
.phrase-box {
background: var(--glass);
backdrop-filter: blur(10px);
border: 2px solid var(--glass-border);
border-radius: 20px;
padding: 30px;
margin: 40px auto;
max-width: 900px;
box-shadow: var(--shadow);
animation: fadeIn 1s ease 0.6s backwards;
position: relative;
overflow: hidden;
}
.phrase-box::before {
content: '🎯';
position: absolute;
top: 20px;
right: 20px;
font-size: 2rem;
opacity: 0.3;
}
.phrase-box code {
font-family: 'Fira Code', monospace;
font-size: clamp(1rem, 2vw, 1.2rem);
color: var(--accent);
display: block;
padding: 20px;
background: rgba(0, 0, 0, 0.3);
border-radius: 10px;
border-left: 4px solid var(--primary);
line-height: 1.8;
}
/* Section Styles */
.section {
background: var(--glass);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 40px;
margin: 40px 0;
box-shadow: var(--shadow);
animation: fadeInUp 0.8s ease;
position: relative;
z-index: 1;
}
.section-icon {
display: inline-block;
font-size: 2.5rem;
margin-bottom: 10px;
}
.section h2 {
font-size: clamp(2rem, 4vw, 2.5rem);
margin-bottom: 25px;
background: linear-gradient(135deg, var(--primary), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.section h3 {
font-size: clamp(1.5rem, 3vw, 1.8rem);
margin: 30px 0 15px;
color: var(--accent);
}
.section p {
font-size: clamp(1rem, 2vw, 1.1rem);
margin-bottom: 15px;
opacity: 0.9;
line-height: 1.8;
}
/* Step Cards */
.steps-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin: 30px 0;
}
.step-card {
background: rgba(102, 126, 234, 0.1);
border: 2px solid var(--primary);
border-radius: 15px;
padding: 25px;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.step-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.5s ease;
}
.step-card:hover::before {
left: 100%;
}
.step-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4);
border-color: var(--accent);
}
.step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary), var(--accent));
border-radius: 50%;
font-weight: 700;
font-size: 1.5rem;
margin-bottom: 15px;
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
/* Game Container */
.game-container {
background: rgba(0, 0, 0, 0.3);
border-radius: 20px;
padding: 40px;
margin: 30px 0;
border: 2px solid var(--primary);
}
.game-header {
text-align: center;
margin-bottom: 30px;
}
.game-header h3 {
color: var(--accent);
font-size: 2rem;
margin-bottom: 10px;
}
.game-score {
display: inline-block;
padding: 10px 25px;
background: linear-gradient(135deg, var(--primary), var(--accent));
border-radius: 50px;
font-weight: 700;
font-size: 1.2rem;
margin-top: 10px;
}
/* Drag and Drop Game */
.drag-drop-game {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin: 30px 0;
}
.drag-items, .drop-zones {
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
padding: 20px;
min-height: 300px;
}
.drag-item {
background: linear-gradient(135deg, var(--primary), var(--secondary));
padding: 15px 20px;
margin: 10px 0;
border-radius: 10px;
cursor: grab;
transition: all 0.3s ease;
text-align: center;
font-weight: 600;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.drag-item:hover {
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
}
.drag-item.dragging {
opacity: 0.5;
cursor: grabbing;
}
.drop-zone {
background: rgba(255, 255, 255, 0.05);
border: 3px dashed var(--glass-border);
border-radius: 10px;
padding: 20px;
margin: 10px 0;
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.drop-zone.drag-over {
background: rgba(102, 126, 234, 0.2);
border-color: var(--accent);
transform: scale(1.02);
}
.drop-zone.correct {
background: rgba(74, 222, 128, 0.2);
border-color: var(--success);
animation: correctDrop 0.5s ease;
}
@keyframes correctDrop {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* Memory Game */
.memory-game {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
margin: 30px 0;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.memory-card {
aspect-ratio: 1;
background: linear-gradient(135deg, var(--primary), var(--secondary));
border-radius: 15px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
transition: all 0.3s ease;
transform-style: preserve-3d;
position: relative;
}
.memory-card:hover {
transform: scale(1.05);
}
.memory-card.flipped {
transform: rotateY(180deg);
}
.memory-card.matched {
background: linear-gradient(135deg, var(--success), #22c55e);
animation: matchedCard 0.5s ease;
}
@keyframes matchedCard {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px;
}
.card-back {
transform: rotateY(180deg);
background: rgba(255, 255, 255, 0.1);
}
/* Click Sequence Game */
.sequence-game {
text-align: center;
margin: 30px 0;
}
.sequence-buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
max-width: 400px;
margin: 30px auto;
}
.sequence-btn {
aspect-ratio: 1;
background: linear-gradient(135deg, var(--primary), var(--secondary));
border: none;
border-radius: 15px;
font-size: 2rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.sequence-btn:hover {
transform: scale(1.05);
}
.sequence-btn.active {
background: linear-gradient(135deg, var(--warning), #f59e0b);
transform: scale(1.1);
box-shadow: 0 0 30px var(--warning);
}
.sequence-btn.correct {
background: linear-gradient(135deg, var(--success), #22c55e);
animation: correctClick 0.3s ease;
}
.sequence-btn.wrong {
background: linear-gradient(135deg, var(--danger), #ef4444);
animation: shake 0.5s ease;
}
@keyframes correctClick {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
}
/* Quiz Section */
.quiz-container {
background: rgba(102, 126, 234, 0.1);
border-radius: 20px;
padding: 40px;
margin: 30px 0;
border: 2px solid var(--primary);
}
.quiz-question {
background: rgba(0, 0, 0, 0.3);
border-radius: 15px;
padding: 30px;
margin: 25px 0;
border: 2px solid transparent;
transition: all 0.3s ease;
}
.quiz-question.answered {
border-color: var(--success);
}
.quiz-question h4 {
font-size: 1.3rem;
margin-bottom: 20px;
color: var(--accent);
display: flex;
align-items: flex-start;
gap: 10px;
}
.question-number {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 30px;
background: linear-gradient(135deg, var(--primary), var(--accent));
border-radius: 50%;
font-size: 0.9rem;
flex-shrink: 0;
}
.quiz-options {
display: flex;
flex-direction: column;
gap: 12px;
}
.quiz-option {
padding: 18px 24px;
background: rgba(255, 255, 255, 0.05);
border: 2px solid var(--glass-border);
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 12px;
}
.quiz-option:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--primary);
transform: translateX(5px);
}
.quiz-option.correct {
background: rgba(74, 222, 128, 0.2);
border-color: var(--success);
}
.quiz-option.incorrect {
background: rgba(248, 113, 113, 0.2);
border-color: var(--danger);
}
.option-letter {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: var(--primary);
border-radius: 50%;
font-weight: 700;
flex-shrink: 0;
}
.quiz-feedback {
margin-top: 15px;
padding: 15px 20px;
border-radius: 10px;
display: none;
}
.quiz-feedback.show {
display: block;
animation: fadeIn 0.5s ease;
}
.quiz-feedback.correct {
background: rgba(74, 222, 128, 0.2);
border: 2px solid var(--success);
color: var(--success);
}
.quiz-feedback.incorrect {
background: rgba(248, 113, 113, 0.2);
border: 2px solid var(--danger);
color: var(--danger);
}
/* Code Block */
.code-block {
background: rgba(0, 0, 0, 0.5);
border-radius: 15px;
padding: 25px;
margin: 20px 0;
position: relative;
overflow-x: auto;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.code-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.copy-btn {
padding: 8px 16px;
background: var(--primary);
border: none;
border-radius: 8px;
color: white;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 5px;
}
.copy-btn:hover {
background: var(--accent);
transform: scale(1.05);
}
.copy-btn.copied {
background: var(--success);
}
/* Mistake & Tip Cards */
.mistake-card {
background: rgba(248, 113, 113, 0.1);
border-left: 4px solid var(--danger);
border-radius: 10px;
padding: 20px;
margin: 15px 0;
transition: all 0.3s ease;
}
.mistake-card:hover {
background: rgba(248, 113, 113, 0.15);
transform: translateX(5px);
}
.mistake-card h4 {
color: var(--danger);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.tip-card {
background: rgba(74, 222, 128, 0.1);
border-left: 4px solid var(--success);
border-radius: 10px;
padding: 20px;
margin: 15px 0;
transition: all 0.3s ease;
}
.tip-card:hover {
background: rgba(74, 222, 128, 0.15);
transform: translateX(5px);
}
.tip-card h4 {
color: var(--success);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
/* Summary Card */
.summary-card {
background: linear-gradient(135deg, var(--primary), var(--secondary));
border-radius: 25px;
padding: 50px;
margin: 40px 0;
box-shadow: 0 15px 50px rgba(102, 126, 234, 0.4);
}
.summary-card h2 {
color: white;
text-align: center;
margin-bottom: 40px;
}
.summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
}
.summary-item {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 25px;
text-align: center;
transition: all 0.3s ease;
}
.summary-item:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.2);
}
/* Footer */
.footer {
text-align: center;
padding: 60px 20px 40px;
margin-top: 80px;
border-top: 2px solid var(--glass-border);
}
.footer h3 {
font-size: 2rem;
margin-bottom: 20px;
background: linear-gradient(135deg, var(--primary), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.badge {
display: inline-block;
padding: 8px 18px;
background: linear-gradient(135deg, var(--primary), var(--accent));
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
margin: 5px;
transition: all 0.3s ease;
}
.badge:hover {
transform: scale(1.1);
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Confetti */
.confetti {
position: fixed;
width: 10px;
height: 10px;
background: var(--accent);
pointer-events: none;
z-index: 9999;
animation: confettiFall 3s ease-out forwards;
}
@keyframes confettiFall {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(720deg);
opacity: 0;
}
}
/* Responsive */
@media (max-width: 768px) {
.drag-drop-game {
grid-template-columns: 1fr;
}
.memory-game {
grid-template-columns: repeat(3, 1fr);
}
.sequence-buttons {
grid-template-columns: repeat(2, 1fr);
}
.summary-card {
padding: 30px 20px;
}
}
/* Tooltip */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted var(--primary);
cursor: help;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 220px;
background: var(--darker);
color: var(--light);
text-align: center;
border-radius: 10px;
padding: 12px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -110px;
opacity: 0;
transition: opacity 0.3s;
border: 2px solid var(--primary);
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
/* Scroll to Top */
.scroll-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary), var(--accent));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
z-index: 999;
font-size: 1.5rem;
}
.scroll-top.show {
opacity: 1;
pointer-events: all;
}
.scroll-top:hover {
transform: translateY(-5px);
}
</style>
</head>
<body>
<!-- Progress Bar -->
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
<!-- Floating Particles -->
<div class="particles" id="particles"></div>
<!-- Scroll to Top -->
<div class="scroll-top" id="scrollTop" onclick="scrollToTop()">↑</div>
<div class="container">
<!-- Hero Section -->
<section class="hero">
<div class="hero-badge">🎮 Interactive Gaming Tutorial</div>
<h1>🧵 Upload Filament in Bambu Lab</h1>
<p class="hero-subtitle">Master filament management through fun interactive games!</p>
<div class="phrase-box">
<code>Upload the filament in the device tab of the Bambu Lab 3D printer application. The image preview before the report shows where to do this.</code>
</div>
</section>
<!-- What Is It Section -->
<section class="section">
<div class="section-icon">🤔</div>
<h2>What Is It?</h2>
<p>
This instruction guides you through <strong>uploading filament information</strong> to your Bambu Lab 3D printer. Think of it as "telling" your printer what type and color of plastic thread (filament) you've loaded! 🧵
</p>
<p>
The <span class="tooltip">Device Tab<span class="tooltiptext">The hardware control center where you manage printer settings</span></span> is where you manage all physical aspects of your printer, including filament configuration.
</p>
<div class="tip-card">
<h4>💡 Why "Upload"?</h4>
<p>You're not physically uploading filament - you're uploading the INFORMATION about your filament to the printer's software so it knows what material you're using!</p>
</div>
</section>
<!-- Why Use It Section -->
<section class="section">
<div class="section-icon">🌟</div>
<h2>Why Use It?</h2>
<div class="steps-container">
<div class="step-card">
<div class="step-number">1</div>
<h4>🎯 Accurate Tracking</h4>
<p>The printer knows exactly what filament is loaded and can adjust settings automatically!</p>
</div>
<div class="step-card">
<div class="step-number">2</div>
<h4>🌡️ Perfect Temperature</h4>
<p>Different materials need different temperatures. PLA melts at 200°C, ABS at 240°C!</p>
</div>
<div class="step-card">
<div class="step-number">3</div>
<h4>📊 Material Management</h4>
<p>Track how much filament you have left and when to reorder!</p>
</div>
<div class="step-card">
<div class="step-number">4</div>
<h4>🎨 Color Preview</h4>
<p>See accurate color representations in your print previews!</p>
</div>
</div>
</section>
<!-- How It Works Section -->
<section class="section">
<div class="section-icon">⚙️</div>
<h2>How Does It Work?</h2>
<p>Follow these simple steps:</p>
<div class="steps-container">
<div class="step-card">
<div class="step-number">📱</div>
<h4>Step 1: Open Bambu Lab Studio</h4>
<p>Launch the application and ensure your printer is connected</p>
</div>
<div class="step-card">
<div class="step-number">🎯</div>
<h4>Step 2: Navigate to Device Tab</h4>
<p>Click on the "Device" tab in the top navigation bar</p>
</div>
<div class="step-card">
<div class="step-number">🧵</div>
<h4>Step 3: Find Filament Section</h4>
<p>Look for the filament management area (usually with a spool icon)</p>
</div>
<div class="step-card">
<div class="step-number">📤</div>
<h4>Step 4: Upload Filament Info</h4>
<p>Click "Upload" or "Add Filament" and enter the details</p>
</div>
<div class="step-card">
<div class="step-number">👁️</div>
<h4>Step 5: Check Preview</h4>
<p>The image preview shows your filament configuration before finalizing</p>
</div>
<div class="step-card">
<div class="step-number">💾</div>
<h4>Step 6: Save & Confirm</h4>
<p>Save your settings and you're ready to print!</p>
</div>
</div>
</section>
<!-- Interactive Games Section -->
<section class="section">
<div class="section-icon">🎮</div>
<h2>Practice Through Games!</h2>
<p>Learn by playing! Complete these games to master filament uploading:</p>
<!-- Game 1: Drag and Drop -->
<div class="game-container">
<div class="game-header">
<h3>🎯 Game 1: Step Sequence Challenge</h3>
<p>Drag the steps to the correct order!</p>
<div class="game-score">Score: <span id="dragScore">0</span>/6</div>
</div>
<div class="drag-drop-game">
<div class="drag-items">
<h4 style="color: var(--accent); margin-bottom: 15px;">📋 Steps (Drag Me!)</h4>
<div class="drag-item" draggable="true" data-step="1">Open Bambu Lab Studio</div>
<div class="drag-item" draggable="true" data-step="2">Navigate to Device Tab</div>
<div class="drag-item" draggable="true" data-step="3">Find Filament Section</div>
<div class="drag-item" draggable="true" data-step="4">Click Upload/Add Filament</div>
<div class="drag-item" draggable="true" data-step="5">Check Preview Image</div>
<div class="drag-item" draggable="true" data-step="6">Save Configuration</div>
</div>
<div class="drop-zones">
<h4 style="color: var(--accent); margin-bottom: 15px;">🎯 Correct Order (Drop Here!)</h4>
<div class="drop-zone" data-order="1">Step 1</div>
<div class="drop-zone" data-order="2">Step 2</div>
<div class="drop-zone" data-order="3">Step 3</div>
<div class="drop-zone" data-order="4">Step 4</div>
<div class="drop-zone" data-order="5">Step 5</div>
<div class="drop-zone" data-order="6">Step 6</div>
</div>
</div>
</div>
<!-- Game 2: Memory Match -->
<div class="game-container">
<div class="game-header">
<h3>🧠 Game 2: Filament Memory Match</h3>
<p>Match the filament types with their properties!</p>
<div class="game-score">Moves: <span id="memoryMoves">0</span> | Matches: <span id="memoryMatches">0</span>/6</div>
</div>
<div class="memory-game" id="memoryGame">
<!-- Cards will be generated by JavaScript -->
</div>
<div style="text-align: center; margin-top: 20px;">
<button class="copy-btn" onclick="resetMemoryGame()">🔄 Reset Game</button>
</div>
</div>
<!-- Game 3: Click Sequence -->
<div class="game-container">
<div class="game-header">
<h3>⚡ Game 3: Tab Navigation Speed Challenge</h3>
<p>Click the tabs in the correct sequence as fast as you can!</p>
<div class="game-score">Time: <span id="sequenceTime">0</span>s | Level: <span id="sequenceLevel">1</span></div>
</div>
<div class="sequence-game">
<p id="sequenceInstruction" style="font-size: 1.2rem; margin-bottom: 20px;">Click START to begin!</p>
<div class="sequence-buttons">
<button class="sequence-btn" data-tab="prepare">📝<br>Prepare</button>
<button class="sequence-btn" data-tab="device">🖨️<br>Device</button>
<button class="sequence-btn" data-tab="preview">👁️<br>Preview</button>
<button class="sequence-btn" data-tab="filament">🧵<br>Filament</button>
<button class="sequence-btn" data-tab="settings">⚙️<br>Settings</button>
<button class="sequence-btn" data-tab="upload">📤<br>Upload</button>
</div>
<button class="copy-btn" onclick="startSequenceGame()" style="font-size: 1.1rem; padding: 12px 30px;">
🚀 Start Challenge
</button>
</div>
</div>
</section>
<!-- Code Breakdown Section -->
<section class="section">
<div class="section-icon">📝</div>
<h2>Phrase Breakdown</h2>
<div class="code-block">
<div class="code-header">
<span style="color: var(--accent); font-weight: 600;">Annotated Instruction</span>
<button class="copy-btn" onclick="copyCode(this)">📋 Copy</button>
</div>
<pre style="font-family: 'Fira Code', monospace; color: #e0e0e0; line-height: 1.8;"><span style="color: #50fa7b;">"Upload the filament"</span>
<span style="color: #6272a4;">// ACTION: Enter filament information into the system</span>
<span style="color: #ff79c6;">in the device tab</span>
<span style="color: #6272a4;">// LOCATION: Hardware control section of the app</span>
<span style="color: #8be9fd;">of the Bambu Lab 3D printer application</span>
<span style="color: #6272a4;">// SOFTWARE: Official Bambu Lab Studio software</span>
<span style="color: #f1fa8c;">"The image preview before the report shows where to do this"</span>
<span style="color: #6272a4;">// HINT: Visual guide appears before confirmation screen</span></pre>
</div>
</section>
<!-- Common Mistakes Section -->
<section class="section">
<div class="section-icon">⚠️</div>
<h2>Common Mistakes</h2>
<div class="mistake-card">
<h4>❌ Wrong Tab</h4>
<p>Looking in the "Prepare" or "Preview" tabs instead of "Device". Remember: Device = Hardware = Filament!</p>
</div>
<div class="mistake-card">
<h4>❌ Skipping Preview</h4>
<p>Not checking the image preview before confirming. Always verify your settings!</p>
</div>
<div class="mistake-card">
<h4>❌ Wrong Filament Type</h4>
<p>Selecting PLA when you loaded ABS. This causes print failures and potential damage!</p>
</div>
<div class="mistake-card">
<h4>❌ Not Saving</h4>
<p>Forgetting to click "Save" or "Apply" after entering filament information.</p>
</div>
</section>
<!-- Pro Tips Section -->
<section class="section">
<div class="section-icon">🚀</div>
<h2>Pro Tips</h2>
<div class="tip-card">
<h4>💎 Tip #1: Create Filament Profiles</h4>
<p>Save profiles for your frequently-used filaments to upload them instantly next time!</p>
</div>
<div class="tip-card">
<h4>💎 Tip #2: Use RFID Tags</h4>
<p>If your Bambu Lab printer supports RFID, use tagged spools for automatic filament detection!</p>
</div>
<div class="tip-card">
<h4>💎 Tip #3: Track Remaining Amount</h4>
<p>Always enter how much filament is left on the spool to avoid mid-print failures!</p>
</div>
<div class="tip-card">
<h4>💎 Tip #4: Double-Check Material Type</h4>
<p>PLA, PETG, ABS, and TPU all need different settings. Wrong selection = failed print!</p>
</div>
</section>
<!-- Quiz Section -->
<section class="section">
<div class="section-icon">🎯</div>
<h2>Knowledge Check Quiz</h2>
<div class="quiz-container">
<div class="quiz-question">
<h4><span class="question-number">1</span> Where do you upload filament information in Bambu Lab Studio?</h4>
<div class="quiz-options">
<div class="quiz-option" onclick="checkQuizAnswer(this, false, 0)">
<span class="option-letter">A</span>
<span>Prepare Tab</span>
</div>
<div class="quiz-option" onclick="checkQuizAnswer(this, true, 0)">
<span class="option-letter">B</span>
<span>Device Tab</span>
</div>
<div class="quiz-option" onclick="checkQuizAnswer(this, false, 0)">
<span class="option-letter">C</span>
<span>Preview Tab</span>
</div>
<div class="quiz-option" onclick="checkQuizAnswer(this, false, 0)">
<span class="option-letter">D</span>
<span>Settings Menu</span>
</div>
</div>
<div class="quiz-feedback" id="feedback0"></div>
</div>
<div class="quiz-question">
<h4><span class="question-number">2</span> What should you check before finalizing filament upload?</h4>
<div class="quiz-options">
<div class="quiz-option" onclick="checkQuizAnswer(this, false, 1)">
<span class="option-letter">A</span>
<span>The weather forecast</span>
</div>
<div class="quiz-option" onclick="checkQuizAnswer(this, true, 1)">
<span class="option-letter">B</span>
<span>The image preview</span>
</div>
<div class="quiz-option" onclick="checkQuizAnswer(this, false, 1)">
<span class="option-letter">C</span>
<span>Your email</span>
</div>
<div class="quiz-option" onclick="checkQuizAnswer(this, false, 1)">
<span class="option-letter">D</span>
<span>The printer manual</span>
</div>
</div>
<div class="quiz-feedback" id="feedback1"></div>
</div>
<div class="quiz-question">
<h4><span class="question-number">3</span> Why is uploading filament information important?</h4>
<div class="quiz-options">
<div class="quiz-option" onclick="checkQuizAnswer(this, false, 2)">
<span class="option-letter">A</span>
<span>It makes the printer look cooler</span>
</div>
<div class="quiz-option" onclick="checkQuizAnswer(this, false, 2)">
<span class="option-letter">B</span>
<span>It's not important at all</span>
</div>
<div class="quiz-option" onclick="checkQuizAnswer(this, true, 2)">
<span class="option-letter">C</span>
<span>It ensures correct temperature and settings for the material</span>
</div>
<div class="quiz-option" onclick="checkQuizAnswer(this, false, 2)">
<span class="option-letter">D</span>
<span>It speeds up the internet connection</span>
</div>
</div>
<div class="quiz-feedback" id="feedback2"></div>
</div>
</div>
</section>
<!-- Summary Card -->
<section class="summary-card">
<h2>📚 Quick Reference Guide</h2>
<div class="summary-grid">
<div class="summary-item">
<div style="font-size: 3rem; margin-bottom: 15px;">📍</div>
<h4 style="color: white; margin-bottom: 10px;">Location</h4>
<p style="color: white; opacity: 0.9;">Device Tab → Filament Section</p>
</div>
<div class="summary-item">
<div style="font-size: 3rem; margin-bottom: 15px;">📤</div>
<h4 style="color: white; margin-bottom: 10px;">Action</h4>
<p style="color: white; opacity: 0.9;">Upload/Add Filament Information</p>
</div>
<div class="summary-item">
<div style="font-size: 3rem; margin-bottom: 15px;">👁️</div>
<h4 style="color: white; margin-bottom: 10px;">Verify</h4>
<p style="color: white; opacity: 0.9;">Check Image Preview</p>
</div>
<div class="summary-item">
<div style="font-size: 3rem; margin-bottom: 15px;">💾</div>
<h4 style="color: white; margin-bottom: 10px;">Finalize</h4>
<p style="color: white; opacity: 0.9;">Save Configuration</p>
</div>
</div>
<div style="background: rgba(0,0,0,0.3); border-radius: 15px; padding: 30px; margin-top: 30px;">
<h3 style="color: white; margin-bottom: 20px; text-align: center;">✅ Key Takeaways</h3>
<ul style="list-style: none; max-width: 700px; margin: 0 auto; line-height: 2.5; text-align: left;">
<li style="color: white;">✓ Always use the Device Tab for filament management</li>
<li style="color: white;">✓ Check the preview image before confirming</li>
<li style="color: white;">✓ Match virtual settings to physical filament</li>
<li style="color: white;">✓ Save filament profiles for quick access</li>
<li style="color: white;">✓ Track remaining filament to avoid failures</li>
</ul>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<h3>🎉 Congratulations on Completing the Tutorial!</h3>
<p>You're now a Bambu Lab filament management expert!</p>
<div style="margin: 30px 0;">
<div class="badge">🎮 Gaming Tutorial</div>
<div class="badge">🖨️ 3D Printing</div>
<div class="badge">🧵 Filament Management</div>
<div class="badge">📚 Interactive Learning</div>
</div>
<p style="margin-top: 30px; font-size: 1rem;">
📖 Generated by <strong>AI Prompt Dictionary</strong> - Making Learning Fun & Interactive
</p>
<p style="font-size: 0.9rem; opacity: 0.6; margin-top: 10px;">
© 2026 Interactive Tutorial System | Powered by AI
</p>
</footer>
</div>
<script>
// Progress Bar
window.addEventListener('scroll', () => {
const windowHeight = window.innerHeight;
const documentHeight = document.documentElement.scrollHeight - windowHeight;
const scrolled = window.scrollY;
const progress = (scrolled / documentHeight) * 100;
document.getElementById('progressBar').style.width = progress + '%';
});
// Scroll to Top Button
window.addEventListener('scroll', () => {
const scrollTop = document.getElementById('scrollTop');
if (window.scrollY > 300) {
scrollTop.classList.add('show');
} else {
scrollTop.classList.remove('show');
}
});
function scrollToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
// Generate Particles
const particlesContainer = document.getElementById('particles');
for (let i = 0; i < 50; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = Math.random() * 100 + '%';
particle.style.top = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 20 + 's';
particlesContainer.appendChild(particle);
}
// Drag and Drop Game
let dragScore = 0;
const dragItems = document.querySelectorAll('.drag-item');
const dropZones = document.querySelectorAll('.drop-zone');
dragItems.forEach(item => {
item.addEventListener('dragstart', dragStart);
item.addEventListener('dragend', dragEnd);
});
dropZones.forEach(zone => {
zone.addEventListener('dragover', dragOver);
zone.addEventListener('drop', drop);
zone.addEventListener('dragleave', dragLeave);
});
function dragStart(e) {
e.dataTransfer.setData('text/plain', e.target.dataset.step);
e.target.classList.add('dragging');
}
function dragEnd(e) {
e.target.classList.remove('dragging');
}
function dragOver(e) {
e.preventDefault();
e.currentTarget.classList.add('drag-over');
}
function dragLeave(e) {
e.currentTarget.classList.remove('drag-over');
}
function drop(e) {
e.preventDefault();
const dropZone = e.currentTarget;
dropZone.classList.remove('drag-over');
const draggedStep = e.dataTransfer.getData('text/plain');
const correctOrder = dropZone.dataset.order;
if (draggedStep === correctOrder && !dropZone.classList.contains('correct')) {
dropZone.classList.add('correct');
const draggedItem = document.querySelector(`.drag-item[data-step="${draggedStep}"]`);
dropZone.textContent = draggedItem.textContent;
draggedItem.style.opacity = '0.3';
draggedItem.draggable = false;
dragScore++;
document.getElementById('dragScore').textContent = dragScore;
if (dragScore === 6) {
setTimeout(() => {
createConfetti();
alert('🎉 Perfect! You\'ve mastered the step sequence!');
}, 500);
}
}
}
// Memory Match Game
const memoryCards = [
{ id: 1, content: '🔴', pair: 'PLA' },
{ id: 2, content: 'PLA', pair: '🔴' },
{ id: 3, content: '🔵', pair: 'ABS' },
{ id: 4, content: 'ABS', pair: '🔵' },
{ id: 5, content: '🟢', pair: 'PETG' },
{ id: 6, content: 'PETG', pair: '🟢' },
{ id: 7, content: '🟡', pair: 'TPU' },
{ id: 8, content: 'TPU', pair: '🟡' },
{ id: 9, content: '🟣', pair: 'ASA' },
{ id: 10, content: 'ASA', pair: '🟣' },
{ id: 11, content: '🟠', pair: 'Nylon' },
{ id: 12, content: 'Nylon', pair: '🟠' }
];
let memoryMoves = 0;
let memoryMatches = 0;
let flippedCards = [];
let canFlip = true;
function initMemoryGame() {
const shuffled = memoryCards.sort(() => Math.random() - 0.5);
const gameContainer = document.getElementById('memoryGame');
gameContainer.innerHTML = '';
shuffled.forEach((card, index) => {
const cardElement = document.createElement('div');
cardElement.className = 'memory-card';
cardElement.dataset.pair = card.pair;
cardElement.dataset.index = index;
cardElement.innerHTML = `
<div class="card-front">?</div>
<div class="card-back">${card.content}</div>
`;
cardElement.addEventListener('click', flipCard);
gameContainer.appendChild(cardElement);
});
}
function flipCard() {
if (!canFlip || this.classList.contains('flipped') || this.classList.contains('matched')) return;
this.classList.add('flipped');
flippedCards.push(this);
if (flippedCards.length === 2) {
canFlip = false;
memoryMoves++;
document.getElementById('memoryMoves').textContent = memoryMoves;
setTimeout(checkMatch, 800);
}
}
function checkMatch() {
const [card1, card2] = flippedCards;
if (card1.dataset.pair === card2.querySelector('.card-back').textContent &&
card2.dataset.pair === card1.querySelector('.card-back').textContent) {
card1.classList.add('matched');
card2.classList.add('matched');
memoryMatches++;
document.getElementById('memoryMatches').textContent = memoryMatches;
if (memoryMatches === 6) {
setTimeout(() => {
createConfetti();
alert(`🎉 Amazing! You matched all pairs in ${memoryMoves} moves!`);
}, 500);
}
} else {
card1.classList.remove('flipped');
card2.classList.remove('flipped');
}
flippedCards = [];
canFlip = true;
}
function resetMemoryGame() {
memoryMoves = 0;
memoryMatches = 0;
flippedCards = [];
canFlip = true;
document.getElementById('memoryMoves').textContent = '0';
document.getElementById('memoryMatches').textContent = '0';
initMemoryGame();
}
initMemoryGame();
// Sequence Game
let sequenceLevel = 1;
let sequencePattern = [];
let playerSequence = [];
let sequenceStartTime = 0;
let sequenceTimer = null;
let isSequencePlaying = false;
function startSequenceGame() {
sequenceLevel = 1;
sequencePattern = [];
playerSequence = [];
document.getElementById('sequenceLevel').textContent = sequenceLevel;
document.getElementById('sequenceTime').textContent = '0';
generateSequence();
}
function generateSequence() {
const tabs = ['prepare', 'device', 'preview', 'filament', 'settings', 'upload'];
sequencePattern = [];
for (let i = 0; i < 3 + sequenceLevel; i++) {
sequencePattern.push(tabs[Math.floor(Math.random() * tabs.length)]);
}
showSequence();
}
async function showSequence() {
isSequencePlaying = true;
document.getElementById('sequenceInstruction').textContent = 'Watch the sequence...';
for (let tab of sequencePattern) {
const btn = document.querySelector(`[data-tab="${tab}"]`);
btn.classList.add('active');
await sleep(600);
btn.classList.remove('active');
await sleep(200);
}
isSequencePlaying = false;
playerSequence = [];
sequenceStartTime = Date.now();
document.getElementById('sequenceInstruction').textContent = 'Now repeat the sequence!';
sequenceTimer = setInterval(() => {
const elapsed = Math.floor((Date.now() - sequenceStartTime) / 1000);
document.getElementById('sequenceTime').textContent = elapsed;
}, 100);
document.querySelectorAll('.sequence-btn').forEach(btn => {
btn.onclick = () => handleSequenceClick(btn.dataset.tab);
});
}
function handleSequenceClick(tab) {
if (isSequencePlaying) return;
const btn = document.querySelector(`[data-tab="${tab}"]`);
playerSequence.push(tab);
if (playerSequence[playerSequence.length - 1] === sequencePattern[playerSequence.length - 1]) {
btn.classList.add('correct');
setTimeout(() => btn.classList.remove('correct'), 300);
if (playerSequence.length === sequencePattern.length) {
clearInterval(sequenceTimer);
const time = Math.floor((Date.now() - sequenceStartTime) / 1000);
createConfetti();
sequenceLevel++;
document.getElementById('sequenceLevel').textContent = sequenceLevel;
setTimeout(() => {
alert(`🎉 Perfect! Level ${sequenceLevel - 1} completed in ${time} seconds!`);
if (sequenceLevel <= 5) {
generateSequence();
} else {
document.getElementById('sequenceInstruction').textContent = '🏆 You\'re a master! Game complete!';
}
}, 500);
}
} else {
btn.classList.add('wrong');
setTimeout(() => btn.classList.remove('wrong'), 500);
clearInterval(sequenceTimer);
document.getElementById('sequenceInstruction').textContent = '❌ Wrong sequence! Click START to try again.';
playerSequence = [];
}
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
// Quiz Functions
let quizScore = 0;
let answeredQuestions = new Set();
function checkQuizAnswer(option, isCorrect, questionIndex) {
if (answeredQuestions.has(questionIndex)) return;
answeredQuestions.add(questionIndex);
const feedback = document.getElementById('feedback' + questionIndex);
const options = option.parentElement.querySelectorAll('.quiz-option');
options.forEach(opt => {
opt.style.pointerEvents = 'none';
if (opt === option) {
opt.classList.add(isCorrect ? 'correct' : 'incorrect');
}
});
feedback.classList.add('show', isCorrect ? 'correct' : 'incorrect');
if (isCorrect) {
feedback.innerHTML = '🎉 Correct! Excellent work!';
quizScore++;
createConfetti();
} else
Live Preview