Acesta este un paragraf de text.

(paragraph) defineste un paragraf de text. Browserul adauga automat spatiu deasupra si dedesubtul fiecarui paragraf pentru a-l separa de restul continutului." }, { text: "Care este diferenta dintre <ul> si <ol> in HTML?", options: [ "Nu exista diferenta", "<ul> creeaza o lista nebifata; <ol> creeaza o lista ordonata (numerotata)", "<ol> este pentru imagini; <ul> pentru text", "<ul> este mai vechi si nu se mai foloseste" ], correct: 1, explanation: "

(unordered list) afiseaza o lista cu puncte/buline.
(ordered list) afiseaza o lista numerotata. Fiecare element din lista se marcheaza cu
1. in ambele cazuri." }, { text: "Cum se creeaza o legatura (link) catre un alt site in HTML?", hasCode: true, codeContent: "Mergi la Google", options: [ "<link>text</link>", "<a href=\"URL\">text</a>", "<url>text</url>", "<go href=\"URL\">text</go>" ], correct: 1, explanation: "Tag-ul (anchor) creeaza o legatura. Atributul href specifica adresa destinatiei. Textul dintre taguri este textul afisat pe care utilizatorul da click." } ] }, 3: { title: "Nivel 3: Imagini si tabele", description: "Adauga imagini si organizeaza date in tabele", xpReward: 100, questions: [ { text: "Care atribut al tag-ului <img> specifica adresa imaginii?", hasCode: true, codeContent: "", options: [ "alt", "href", "src", "link" ], correct: 2, explanation: "Atributul src (source = sursa) specifica calea sau adresa imaginii. Atributul alt ofera un text alternativ afisat daca imaginea nu se incarca si ajuta persoanele cu dizabilitati vizuale." }, { text: "Care tag defineste un rand intr-un tabel HTML?", hasCode: true, codeContent: "\n \n \n \n

   Date

   ", options: [ "<table>", "<tr>", "<td>", "<th>" ], correct: 1, explanation: " (table row) defineste un rand in tabel. (table data) defineste o celula obisnuita. (table header) defineste o celula de antet. Impreuna formeaza structura tabelului." }, { text: "Ce atribut al tag-ului <img> ofera text alternativ la imagine?", options: [ "src", "title", "alt", "name" ], correct: 2, explanation: "Atributul alt (alternative text) descrie imaginea in cuvinte. Este afisat daca imaginea nu se incarca si este citit de programele de citire a ecranului pentru persoanele cu vederea slaba." } ] }, 4: { title: "Nivel 4: Formatare text si paragraf", description: "Controleaza aspectul textului cu CSS", xpReward: 125, questions: [ { text: "Ce proprietate CSS controleaza culoarea textului?", hasCode: true, codeContent: "p {\n color: blue;\n}", options: [ "background-color", "text-color", "color", "font-color" ], correct: 2, explanation: "Proprietatea CSS color seteaza culoarea textului. Valoarea poate fi un cuvant cheie (red, blue, green), un cod hex (#ff0000) sau o valoare rgb(255, 0, 0)." }, { text: "Ce proprietate CSS seteaza culoarea de fundal a unui element?", hasCode: true, codeContent: "body {\n background-color: #f0f0f0;\n}", options: [ "color", "background-color", "bg-color", "fill" ], correct: 1, explanation: "background-color seteaza culoarea de fundal a unui element. Poate fi aplicata pe orice element HTML — body pentru fundal pagina, div, p, h1 etc." }, { text: "Ce proprietate CSS controleaza marimea textului?", options: [ "text-size", "font-size", "letter-size", "size" ], correct: 1, explanation: "font-size controleaza marimea caracterelor. Se poate specifica in pixeli (16px), puncte (12pt) sau procente (100%). Valoarea implicita in browsere este de obicei 16px." } ] }, 5: { title: "Nivel 5: Formatare avansata — font, aliniere, spatiere", description: "Finiseaza aspectul paginii cu proprietati CSS esentiale", xpReward: 150, questions: [ { text: "Ce proprietate CSS aliniaza textul la centrul paginii?", hasCode: true, codeContent: "h1 {\n text-align: center;\n}", options: [ "text-position: center;", "align: center;", "text-align: center;", "center: true;" ], correct: 2, explanation: "text-align controleaza alinierea orizontala a textului: left (stanga, implicit), right (dreapta), center (centru), justify (aliniere pe ambele margini)." }, { text: "Ce proprietate CSS seteaza tipul de font (familia de caractere)?", hasCode: true, codeContent: "body {\n font-family: Arial, sans-serif;\n}", options: [ "font-style", "font-type", "text-font", "font-family" ], correct: 3, explanation: "font-family specifica fontul de afisat. Se pot lista mai multe fonturi separate de virgula — browserul va folosi primul disponibil. sans-serif este o categorie generica de rezerva." }, { text: "Ce proprietate CSS face textul aldin (bold)?", options: [ "text-style: bold;", "font-weight: bold;", "text-bold: true;", "bold: yes;" ], correct: 1, explanation: "font-weight controleaza grosimea caracterelor. Valori posibile: normal, bold, sau valori numerice (100-900). bold este echivalent cu 700 si face textul mai gros/mai ingrosat." } ] } }; let currentLevel = 1; let currentQuestion = 0; let score = 0; let totalXP = 0; let levelScores = {}; let unlockedLevels = [1]; function loadProgress() { const saved = localStorage.getItem('web_quiz5_recap_cls8'); if (saved) { const data = JSON.parse(saved); totalXP = data.totalXP || 0; unlockedLevels = data.unlockedLevels || [1]; levelScores = data.levelScores || {}; updateXPDisplay(); updateLevelMap(); } } function saveProgress() { localStorage.setItem('web_quiz5_recap_cls8', JSON.stringify({ totalXP, unlockedLevels, levelScores })); } function updateXPDisplay() { document.getElementById('totalXP').textContent = totalXP; } function updateLevelMap() { document.querySelectorAll('.level-node').forEach((node, index) => { const level = index + 1; node.classList.remove('locked', 'active', 'completed'); if (levelScores[level] !== undefined) { node.classList.add('completed'); } else if (unlockedLevels.includes(level)) { if (level === Math.max(...unlockedLevels.filter(l => levelScores[l] === undefined))) { node.classList.add('active'); } } else { node.classList.add('locked'); } }); document.querySelectorAll('.level-connector').forEach((conn, index) => { if (levelScores[index + 1] !== undefined) { conn.classList.add('completed'); } else { conn.classList.remove('completed'); } }); } function selectLevel(level) { if (!unlockedLevels.includes(level)) return; currentLevel = level; currentQuestion = 0; score = 0; showLevelIntro(); } function showLevelIntro() { const levelData = levels[currentLevel]; document.getElementById('quizArea').innerHTML = `

   ${levelData.title}

   ${levelData.description}

   +${levelData.xpReward} XP

   Incepe Nivelul
   `; } function startLevel() { showQuestion(); } function showQuestion() { // HTML-escape to prevent < > from breaking option rendering function escHtml(s) { return s.replace(/&/g,'&').replace(//g,'>'); } const levelData = levels[currentLevel]; const q = levelData.questions[currentQuestion]; let progressDots = ''; for (let i = 0; i < levelData.questions.length; i++) { let dotClass = 'progress-dot'; if (i === currentQuestion) dotClass += ' current'; progressDots += `
   `; } let questionContent = `

   ${q.text}

   `; if (q.hasCode) { questionContent += `

   ${q.codeContent}

   `; } let optionsHTML = ''; q.options.forEach((opt, i) => { optionsHTML += `
   ${escHtml(opt)}
   `; }); document.getElementById('quizArea').innerHTML = `
   ${progressDots}

   ${questionContent}

   ${optionsHTML}

   Urmatoarea Intrebare
   `; } function selectAnswer(index) { const levelData = levels[currentLevel]; const q = levelData.questions[currentQuestion]; const options = document.querySelectorAll('.option'); const feedback = document.getElementById('feedback'); const nextBtn = document.getElementById('nextBtn'); options.forEach(opt => opt.style.pointerEvents = 'none'); options[index].classList.add(index === q.correct ? 'correct' : 'wrong'); if (index !== q.correct) { options[q.correct].classList.add('correct'); } const dots = document.querySelectorAll('.progress-dot'); dots[currentQuestion].classList.remove('current'); dots[currentQuestion].classList.add(index === q.correct ? 'correct' : 'wrong'); if (index === q.correct) { score++; feedback.className = 'feedback-box show correct'; feedback.innerHTML = `
   🎉
   Corect! Excelent!
   ${q.explanation}
   `; } else { feedback.className = 'feedback-box show wrong'; feedback.innerHTML = `
   😅
   Nu e chiar asa...
   ${q.explanation}
   `; } nextBtn.style.display = 'inline-flex'; nextBtn.textContent = currentQuestion < levelData.questions.length - 1 ? 'Urmatoarea Intrebare' : 'Vezi Rezultatul'; } function nextQuestion() { const levelData = levels[currentLevel]; currentQuestion++; if (currentQuestion >= levelData.questions.length) { showLevelComplete(); } else { showQuestion(); } } function showLevelComplete() { const levelData = levels[currentLevel]; const percentage = Math.round((score / levelData.questions.length) * 100); const passed = percentage >= 66; let stars = ''; if (percentage >= 100) stars = '⭐⭐⭐'; else if (percentage >= 80) stars = '⭐⭐'; else if (percentage >= 66) stars = '⭐'; else stars = '💪'; let earnedXP = 0; if (passed) { earnedXP = levelData.xpReward; if (percentage === 100) earnedXP = Math.round(earnedXP * 1.5); if (!levelScores[currentLevel] || levelScores[currentLevel] < percentage) { if (!levelScores[currentLevel]) { totalXP += earnedXP; } levelScores[currentLevel] = percentage; } if (currentLevel < 5 && !unlockedLevels.includes(currentLevel + 1)) { unlockedLevels.push(currentLevel + 1); } saveProgress(); updateXPDisplay(); updateLevelMap(); } let nextButton = ''; if (passed && currentLevel < 5) { nextButton = ` Nivelul Urmator `; } else if (passed && currentLevel === 5) { nextButton = ` Inapoi la Modulul 4 `; } let completionMessage = ''; if (passed && currentLevel === 5) { completionMessage = `
   🏆

   Felicitari!

   Ai completat recapitularea HTML si CSS din Modulul 4!

   `; } document.getElementById('quizArea').innerHTML = `
   ${passed ? '🏆' : '📚'}

   ${passed ? 'Nivel Completat!' : 'Mai incearca!'}

   ${stars}

   ${score}/${levelData.questions.length} raspunsuri corecte (${percentage}%)

   ${passed ? `

   +${earnedXP} XP

   ` : ''} ${completionMessage}

   Reincearca ${nextButton}
   `; } loadProgress(); showLevelIntro();