Understanding the basic HTML structure of Degen Boy OS
<div id="device-container">
<div id="screen">
<div id="app-window"></div>
</div>
<div id="controls">
</div>
</div>
`;
break;
case 'CSS':
guideContent.innerHTML = `
Styling with CSS
Learn how to style your Degen Boy OS
:root {
--main-bg-color: #9bbc0f;
--main-text-color: #0f380f;
}
#device-container {
width: 320px;
height: 560px;
background-color: #8b8b8b;
}
`;
break;
case 'JavaScript':
guideContent.innerHTML = `
Adding Functionality with JavaScript
Learn how to add interactivity to your Degen Boy OS
function updateScreen() {
const appWindow = document.getElementById('app-window');
appWindow.innerHTML = apps[currentApp].content;
appWindow.className = 'fade-in';
if (apps[currentApp].init) {
apps[currentApp].init();
}
}
`;
break;
case 'Quiz':
guideContent.innerHTML = `
Test Your Knowledge
What does CSS stand for?
A. Computer Style Sheets
B. Creative Style Sheets
C. Cascading Style Sheets
D. Colorful Style Sheets
`;
break;
}
}
function checkAnswer(answer) {
const result = document.getElementById('quiz-result');
if (answer === 'C') {
result.textContent = 'Correct! CSS stands for Cascading Style Sheets.';
result.style.color = 'green';
} else {
result.textContent = 'Incorrect. Try again!';
result.style.color = 'red';
}
}
// P5.js sketch
function p5sketch(p) {
let x = 100;
let y = 100;
p.setup = function() {
p.createCanvas(300, 200);
};
p.draw = function() {
p.background(51);
p.fill(255);
p.rect(x, y, 50, 50);
x = x + p.random(-1, 1);
y = y + p.random(-1, 1);
};
}
// Three.js scene
function initThreeScene() {
const container = document.getElementById('three-container');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
}
// Initial screen update
updateScreen();