Тест: 27. Язык HTML. Практическая разработка веб-страницы

впишите свой Е-mail, для получения результата теста

1. Что означает HTML?

HyperText Markup Language

HyperTool Markup Language

HighText Machine Language

Home Tool Markup Language

2. Какой тег задаёт заголовок страницы?

</label></div> <div class="option"><label><input type="radio" name="q2" value="2"> <head></label></div> <div class="option"><label><input type="radio" name="q2" value="3"> <h1></label></div> <div class="option"><label><input type="radio" name="q2" value="4"> <meta></label></div> </div> <div class="card" data-type="single" data-answer="1"> <h3>3. Какой тег задаёт абзац?</h3> <div class="option"><label><input type="radio" name="q3" value="1"> <p></label></div> <div class="option"><label><input type="radio" name="q3" value="2"> <br></label></div> <div class="option"><label><input type="radio" name="q3" value="3"> <div></label></div> <div class="option"><label><input type="radio" name="q3" value="4"> <span></label></div> </div> <div class="card" data-type="single" data-answer="1"> <h3>4. Какой тег задаёт ссылку?</h3> <div class="option"><label><input type="radio" name="q4" value="1"> <a></label></div> <div class="option"><label><input type="radio" name="q4" value="2"> <link></label></div> <div class="option"><label><input type="radio" name="q4" value="3"> <href></label></div> <div class="option"><label><input type="radio" name="q4" value="4"> <src></label></div> </div> <div class="card" data-type="single" data-answer="1"> <h3>5. Какой тег задаёт изображение?</h3> <div class="option"><label><input type="radio" name="q5" value="1"> <img></label></div> <div class="option"><label><input type="radio" name="q5" value="2"> <src></label></div> <div class="option"><label><input type="radio" name="q5" value="3"> <picture></label></div> <div class="option"><label><input type="radio" name="q5" value="4"> <image></label></div> </div> <div class="card" data-type="single" data-answer="1"> <h3>6. Какой атрибут тега <a> задаёт адрес ссылки?</h3> <div class="option"><label><input type="radio" name="q6" value="1"> href</label></div> <div class="option"><label><input type="radio" name="q6" value="2"> src</label></div> <div class="option"><label><input type="radio" name="q6" value="3"> link</label></div> <div class="option"><label><input type="radio" name="q6" value="4"> alt</label></div> </div> <div class="card" data-type="multi" data-answer="1,2,3,4"> <h3>7. Какие теги относятся к заголовкам?</h3> <div class="option"><label><input type="checkbox" value="1"> <h1></label></div> <div class="option"><label><input type="checkbox" value="2"> <h2></label></div> <div class="option"><label><input type="checkbox" value="3"> <h3></label></div> <div class="option"><label><input type="checkbox" value="4"> <h6></label></div> </div> <div class="card" data-type="multi" data-answer="1,2,3,4"> <h3>8. Какие элементы входят в структуру HTML-документа?</h3> <div class="option"><label><input type="checkbox" value="1"> <html></label></div> <div class="option"><label><input type="checkbox" value="2"> <head></label></div> <div class="option"><label><input type="checkbox" value="3"> <body></label></div> <div class="option"><label><input type="checkbox" value="4"> <title></label></div> </div> <div class="card" data-type="text" data-answer="HTML"> <h3>9. Введите ключевое слово темы — язык ...</h3> <input type="text" placeholder="Введите ответ" style="width:100%;padding:10px;border:1px solid #e5e7eb;border-radius:8px;margin-top:8px;"> </div> <div class="card" data-type="number" data-answer="6"> <h3>10. Сколько уровней заголовков поддерживает HTML?</h3> <input type="number" placeholder="Введите число" style="width:100%;padding:10px;border:1px solid #e5e7eb;border-radius:8px;margin-top:8px;"> </div> </div> <script> function onCheck(){ const cards = document.querySelectorAll('.card[data-type]'); let score=0, total=cards.length; cards.forEach((card)=>{ const type=card.dataset.type, ans=card.dataset.answer; let picked='', ok=false; if(type==='single'){ const sel=card.querySelector('input[type=radio]:checked'); picked=sel?sel.value:''; ok=(picked===ans); } else if(type==='multi'){ const picks=Array.from(card.querySelectorAll('input[type=checkbox]:checked')).map(el=>el.value); picked=picks.sort().join(','); const ansSorted=ans.split(',').sort().join(','); ok=(picked===ansSorted); } else if(type==='text'){ const val=card.querySelector('input[type=text]')?.value||''; picked=val.trim(); const norm=(s)=>s.toUpperCase().replace(/\s+/g,'').replace(/Ё/g,'Е'); ok=(norm(picked)===norm(ans)); } else if(type==='number'){ const val=card.querySelector('input[type=number]')?.value||''; picked=val.trim(); ok=(picked===ans); } if(type==='single' || type==='multi'){ if(ok){ card.querySelectorAll('.option').forEach(opt=>{ if(opt.querySelector('input')?.value===ans) opt.classList.add('correct'); }); } else{ card.querySelectorAll('.option').forEach(opt=>{ const inp=opt.querySelector('input'); if(inp?.value===ans || (type==='multi' && ans.split(',').includes(inp?.value))) opt.classList.add('correct'); else if(inp?.checked) opt.classList.add('incorrect'); }); } } else if(type==='text' || type==='number'){ const input=card.querySelector('input'); if(input){ input.style.outline='2px solid '+(ok?'rgba(22,163,74,.5)':'rgba(239,68,68,.5)'); input.style.background=ok?'#ecfdf5':'#fef2f2'; } } if(ok) score++; }); const pct=Math.round((score/total)*100); const progressBar=document.querySelector('.progress>div'); const resultsDiv=document.getElementById('results'); progressBar.style.width=pct+'%'; resultsDiv.style.display='block'; resultsDiv.innerHTML=`<strong>Результат:</strong> ${score} из ${total} (${pct}%)`; document.getElementById('sendBtn').disabled=false; document.getElementById('emailBtn').disabled=false; } async function onSend(){ const firstName=document.getElementById('firstName').value.trim(); const lastName=document.getElementById('lastName').value.trim(); const classValue=document.getElementById('class').value.trim(); if(!firstName || !lastName || !classValue){ alert('Заполните все поля (Фамилия, Имя, Класс)'); return; } const cards=document.querySelectorAll('.card[data-type]'); let score=0, total=cards.length; const answers=[]; cards.forEach((card,idx)=>{ const type=card.dataset.type, ans=card.dataset.answer; let picked='', ok=false; if(type==='single'){ const sel=card.querySelector('input[type=radio]:checked'); picked=sel?sel.value:''; ok=(picked===ans); } else if(type==='multi'){ const picks=Array.from(card.querySelectorAll('input[type=checkbox]:checked')).map(el=>el.value); picked=picks.sort().join(','); const ansSorted=ans.split(',').sort().join(','); ok=(picked===ansSorted); } else if(type==='text'){ const val=card.querySelector('input[type=text]')?.value||''; picked=val.trim(); const norm=(s)=>s.toUpperCase().replace(/\s+/g,'').replace(/Ё/g,'Е'); ok=(norm(picked)===norm(ans)); } else if(type==='number'){ const val=card.querySelector('input[type=number]')?.value||''; picked=val.trim(); ok=(picked===ans); } if(ok) score++; answers.push({ q: 'q'+(idx+1), picked: picked || '(не отвечено)', correct: ans, isCorrect: ok }); }); const pct=Math.round((score/total)*100); const testName=document.querySelector('[data-test-name]')?.dataset.testName||'Тест'; function transliterate(text) { const map = { 'а':'a','б':'b','в':'v','г':'g','д':'d','е':'e','ё':'e', 'ж':'zh','з':'z','и':'i','й':'y','к':'k','л':'l','м':'m', 'н':'n','о':'o','п':'p','р':'r','с':'s','т':'t','у':'u', 'ф':'f','х':'h','ц':'ts','ч':'ch','ш':'sh','щ':'sch', 'ъ':'','ы':'y','ь':'','э':'e','ю':'yu','я':'ya' }; return text.toLowerCase().split('').map(c => map[c] || c).join(''); } const testId=transliterate(testName).replace(/[^\w]+/g,'_').replace(/^_+|_+$/g,''); const payload = { testId: testId, title: testName, lastName: lastName, firstName: firstName, class: classValue, score: score, total: total, percent: pct, answers: answers, timestamp: new Date().toISOString(), agent: navigator.userAgent }; console.log('📦 Отправка результата:', payload); const sendBtn=document.getElementById('sendBtn'); const originalText=sendBtn.textContent; sendBtn.textContent='Отправка...'; sendBtn.disabled=true; try { const endpoint = window.location.origin + '/wp-json/ru40-tests/v1/result'; const response = await fetch(endpoint, { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify(payload) }); let data = {}; try { data = await response.json(); } catch(e) { console.error('Ошибка парсинга JSON:', e); } console.log('📥 Ответ сервера:', data); if(!response.ok || data?.status === 'error') { throw new Error(data?.msg || ('HTTP ' + response.status)); } sendBtn.textContent='✓ Отправлено!'; sendBtn.style.background='#16a34a'; alert('✅ Результат успешно отправлен учителю!'); } catch(err) { console.error('❌ Ошибка отправки:', err); alert('❌ Не удалось отправить результат.\\n\\nОшибка: ' + err.message + '\\n\\nПроверьте:\\n1. Плагин ru40-tests-results активен\\n2. Тест открыт через сайт (не локально)'); sendBtn.textContent=originalText; sendBtn.disabled=false; } } document.getElementById('sendBtn')?.addEventListener('click', onSend); // --- АВТО-ДОБАВЛЕНИЕ: ФУНКЦИЯ ОТПРАВКИ НА ПОЧТУ --- async function onSendEmail(){ const emailInput = document.getElementById('studentEmail'); const email = emailInput.value.trim(); if(!email || !email.includes('@')){ alert('Пожалуйста, введите корректный Email адрес.'); return; } const firstName = document.getElementById('firstName').value.trim() || 'Ученик'; const testName = document.querySelector('[data-test-name]')?.dataset.testName || 'Тест'; // Сбор данных const cards = document.querySelectorAll('.card[data-type]'); let score = 0, total = cards.length; cards.forEach((card)=>{ const type=card.dataset.type, ans=card.dataset.answer; let ok=false; if(type==='single'){ const sel=card.querySelector('input[type=radio]:checked'); ok=(sel && sel.value===ans); } else if(type==='multi'){ const picks=Array.from(card.querySelectorAll('input[type=checkbox]:checked')).map(el=>el.value); const ansSorted=ans.split(',').sort().join(','); ok=(picks.sort().join(',')===ansSorted); } else if(type==='text'){ const val=card.querySelector('input[type=text]')?.value||''; const norm=(s)=>s.toUpperCase().replace(/\s+/g,'').replace(/Ё/g,'Е'); ok=(norm(val.trim())===norm(ans)); } else if(type==='number'){ const val=card.querySelector('input[type=number]')?.value||''; ok=(val.trim()===ans); } if(ok) score++; }); const pct = Math.round((score/total)*100); const payload = { action: 'send_student_email', email: email, title: testName, name: firstName, score: score, total: total, percent: pct }; const btn = document.getElementById('emailBtn'); const originalText = btn.textContent; btn.textContent = '⏳ Отправка...'; btn.disabled = true; try { const endpoint = window.location.origin + '/wp-json/ru40-tests/v1/send-email'; const response = await fetch(endpoint, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload) }); if(!response.ok) throw new Error('Server Error'); btn.textContent = '✓ Отправлено'; alert(`Результаты отправлены на ${email}`); } catch(err) { console.error(err); alert('Не удалось отправить письмо. Обратитесь к учителю.'); btn.textContent = originalText; btn.disabled = false; } } </script> </body></html>