\n
🎨

CSS Practical Exam

Style a Professional Webpage

📋 Your Challenge:

You'll be given an HTML webpage that needs styling. Write CSS to transform it into a beautiful, professional design. Watch your changes appear in real-time!

Tasks5
Time40 min
Pass60%
🏆
PASSED
85%

🎨 CSS Practical Exam

1/5
40:00
\n

M.T.T.I

Learn Tech Skills

Start your career in technology with our practical training programs.

Our Courses

Web Development

HTML, CSS, JavaScript

Graphic Design

Photoshop, Illustrator

Cyber Security

Network Security, Ethical Hacking

`; const tasks = [ { title: "Style Body & Typography", desc: "Set up the base styles including font family, colors, and remove default margins.", requirements: [ {text: "Set body margin to 0", check: c => /body\s*\{[^}]*margin\s*:\s*0/i.test(c)}, {text: "Set font-family to 'Segoe UI' or sans-serif", check: c => /body\s*\{[^}]*font-family\s*:/i.test(c)}, {text: "Set body background color (any dark color)", check: c => /body\s*\{[^}]*background(-color)?\s*:/i.test(c)}, {text: "Set body text color (light color)", check: c => /body\s*\{[^}]*[^-]color\s*:/i.test(c)} ], points: 20 }, { title: "Style the Header", desc: "Create a professional navigation header with flexbox layout.", requirements: [ {text: "Set .header display to flex", check: c => /\.header\s*\{[^}]*display\s*:\s*flex/i.test(c)}, {text: "Add justify-content: space-between", check: c => /\.header\s*\{[^}]*justify-content\s*:\s*space-between/i.test(c)}, {text: "Add padding to header", check: c => /\.header\s*\{[^}]*padding\s*:/i.test(c)}, {text: "Set header background color", check: c => /\.header\s*\{[^}]*background/i.test(c)}, {text: "Style .logo with larger font-size", check: c => /\.logo\s*\{[^}]*font-size\s*:/i.test(c)} ], points: 20 }, { title: "Style the Hero Section", desc: "Create an eye-catching hero section with centered content.", requirements: [ {text: "Set .hero text-align to center", check: c => /\.hero\s*\{[^}]*text-align\s*:\s*center/i.test(c)}, {text: "Add padding to .hero (at least 60px)", check: c => /\.hero\s*\{[^}]*padding\s*:/i.test(c)}, {text: "Set .hero background color", check: c => /\.hero\s*\{[^}]*background/i.test(c)}, {text: "Style .hero-title with large font-size", check: c => /\.hero-title\s*\{[^}]*font-size\s*:/i.test(c)}, {text: "Style .btn with background, padding, border-radius", check: c => /\.btn\s*\{[^}]*background/i.test(c) && /\.btn\s*\{[^}]*padding/i.test(c)} ], points: 20 }, { title: "Create Card Grid Layout", desc: "Use CSS Grid to create a responsive card layout for courses.", requirements: [ {text: "Set .card-grid display to grid", check: c => /\.card-grid\s*\{[^}]*display\s*:\s*grid/i.test(c)}, {text: "Add grid-template-columns (3 columns)", check: c => /\.card-grid\s*\{[^}]*grid-template-columns\s*:/i.test(c)}, {text: "Add gap between grid items", check: c => /\.card-grid\s*\{[^}]*gap\s*:/i.test(c)}, {text: "Style .card with padding", check: c => /\.card\s*\{[^}]*padding\s*:/i.test(c)}, {text: "Add border-radius to .card", check: c => /\.card\s*\{[^}]*border-radius\s*:/i.test(c)}, {text: "Set .card background color", check: c => /\.card\s*\{[^}]*background/i.test(c)} ], points: 20 }, { title: "Style Footer & Navigation Links", desc: "Complete the design with footer styles and navigation link effects.", requirements: [ {text: "Style .footer with background color", check: c => /\.footer\s*\{[^}]*background/i.test(c)}, {text: "Center .footer text", check: c => /\.footer\s*\{[^}]*text-align\s*:\s*center/i.test(c)}, {text: "Add padding to .footer", check: c => /\.footer\s*\{[^}]*padding\s*:/i.test(c)}, {text: "Style .nav-link (remove underline)", check: c => /\.nav-link\s*\{[^}]*text-decoration\s*:\s*none/i.test(c)}, {text: "Add .nav-link:hover effect", check: c => /\.nav-link:hover\s*\{/i.test(c)} ], points: 20 } ]; let current = 0, timeLeft = 40 * 60, timer, scores = Array(tasks.length).fill(0); const $ = id => document.getElementById(id); $('studentName').oninput = e => $('startBtn').disabled = !e.target.value.trim(); $('startBtn').onclick = startExam; function startExam() { $('startScreen').style.display = 'none'; $('mainContainer').style.display = 'grid'; renderTask(); updatePreview(); timer = setInterval(tick, 1000); setInterval(() => { updatePreview(); checkAll(); }, 1500); } function tick() { timeLeft--; $('timer').textContent = `${Math.floor(timeLeft/60)}:${(timeLeft%60).toString().padStart(2,'0')}`; if (timeLeft <= 300) $('timer').classList.add('warn'); if (timeLeft <= 0) submitExam(); } function renderTask() { const t = tasks[current]; $('taskNum').textContent = `Task ${current + 1}`; $('taskTitle').textContent = t.title; $('taskDesc').textContent = t.desc; $('reqList').innerHTML = t.requirements.map(r => `
  • ${r.text}
    • `).join(''); $('taskProgress').textContent = `${current + 1}/${tasks.length}`; $('progressFill').style.width = `${((current+1)/tasks.length)*100}%`; $('prevBtn').style.visibility = current === 0 ? 'hidden' : 'visible'; $('nextBtn').textContent = current === tasks.length - 1 ? 'Finish' : 'Next →'; checkAll(); } function checkAll() { const css = $('codeEditor').value; let totalScore = 0; tasks.forEach((t, ti) => { let passed = 0; t.requirements.forEach(r => { if (r.check(css)) passed++; }); scores[ti] = Math.round((passed / t.requirements.length) * t.points); totalScore += scores[ti]; }); // Update current task checklist const t = tasks[current]; $('checklist').innerHTML = t.requirements.map(r => { const ok = r.check(css); return `
    ${ok?'✓':''}
    ${r.text}
    `; }).join(''); $('currentScore').textContent = totalScore; } function updatePreview() { const css = $('codeEditor').value; const frame = $('previewFrame'); const doc = frame.contentDocument || frame.contentWindow.document; const html = baseHTML.replace('', ``); doc.open(); doc.write(html); doc.close(); } function prevTask() { if (current > 0) { current--; renderTask(); } } function nextTask() { if (current < tasks.length - 1) { current++; renderTask(); } else submitExam(); } function submitExam() { clearInterval(timer); checkAll(); const total = scores.reduce((a,b) => a+b, 0); const pass = total >= 60; $('mainContainer').style.display = 'none'; $('resultsScreen').style.display = 'flex'; $('resultsIcon').textContent = pass ? '🏆' : '📚'; $('resultsStatus').textContent = pass ? 'PASSED!' : 'KEEP PRACTICING'; $('resultsStatus').className = `results-status ${pass?'pass':'fail'}`; $('resultsScore').textContent = `${total}%`; $('resultsBreakdown').innerHTML = tasks.map((t,i) => `
    ${t.title}${scores[i]}/${t.points}
    ` ).join(''); // Save results to MTTI system if (typeof submitExamToMTTI === 'function') { const questionResults = tasks.map((t, i) => ({ question: t.title, correct: scores[i] >= t.points * 0.6 })); submitExamToMTTI( document.title.split('|')[0].trim(), total, 100, questionResults, 0 ).then(result => { if (result.success) console.log('✅ Results saved to MTTI:', result.data); else console.error('❌ Failed to save results:', result.message); }); } } $('codeEditor').addEventListener('keydown', e => { if (e.key === 'Tab') { e.preventDefault(); const s = e.target.selectionStart; e.target.value = e.target.value.substring(0,s) + ' ' + e.target.value.substring(e.target.selectionEnd); e.target.selectionStart = e.target.selectionEnd = s + 2; } });