Selamat siang teman!
Saya berikan kepada Anda kuis JavaScript interaktif kecil, yang saat ini terdiri dari 50 pertanyaan.
Menurut pendapat saya, menyelesaikan masalah seperti itu adalah cara terbaik untuk menentukan tingkat keahlian Anda.
Berlanjut ke sini .
Kata pengantar
Bagian ini didasarkan pada repositori ini . Penulisnya, Lydia Hallie, memposisikan proyeknya sebagai daftar pertanyaan tingkat lanjut dan, memang, di antara mereka ada beberapa yang, saya pikir, bahkan seorang pengembang JavaScript yang berpengalaman akan kesulitan. Namun, di antara pertanyaan-pertanyaan ini ada juga yang cukup untuk memiliki pengetahuan dasar untuk menjawab. Ada terjemahan bahasa Rusia di repositori, tetapi, secara sederhana, ia meninggalkan banyak yang diinginkan, sehingga sebagian besar jawaban (penjelasan) harus diterjemahkan lagi.
Perlu dicatat bahwa penjelasan (jawaban) yang diberikan tidak selalu sepenuhnya mengungkapkan esensi masalah. Ini karena bentuk proyek - ini adalah daftar periksa, bukan tutorial. Jawabannya agak merupakan petunjuk untuk pencarian lebih lanjut di MDN atauJavascript.ru . Namun, banyak penjelasan berisi jawaban yang komprehensif.
Terlepas dari kenyataan bahwa kode tersebut telah diuji berulang kali, tidak ada yang kebal dari kesalahan, tentu saja, kecuali bagi mereka yang tidak melakukan apa pun. Karena itu, jika Anda menemukan kesalahan, kesalahan pengetikan, ketidakakuratan, pengkalimatan yang salah, dll., Serta jika Anda ingin meningkatkan terjemahan, silakan menulis secara pribadi, saya akan berterima kasih (aktivitas di GitHub juga dianjurkan).
Sebenarnya, hanya itu yang ingin saya katakan sebagai kata pengantar.
aturan
Aturannya sederhana: 50 pertanyaan, 3-4 kemungkinan jawaban, peringkat: jumlah jawaban benar dan salah, kemajuan: jumlah dan jumlah pertanyaan.
Berdasarkan hasil, persentase jawaban yang benar ditentukan dan kesimpulan dibuat tentang tingkat kecakapan JavaScript: lebih dari 80% sangat baik, lebih dari 50% tidak buruk, kurang dari 50% ... well, Anda mengerti.
Penjelasan dilampirkan pada setiap pertanyaan. Jika jawabannya salah, penjelasan ini terungkap.
Karena kenyataan bahwa jumlah jawaban yang benar dan salah, serta nomor seri dari pertanyaan, dicatat di penyimpanan lokal, Anda memiliki kesempatan untuk berhenti, istirahat, dan kapan saja melanjutkan dari tempat Anda tinggalkan.
Mari kita beralih dari kuis itu sendiri.
Ulangan
Kode proyek ada di sini .
Kami membagikan hasilnya di komentar.
Mekanika
Beberapa kata tentang bagaimana kuis diimplementasikan bagi mereka yang tertarik.
Markupnya terlihat seperti ini:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>200+ JavaScript</title>
<!-- -->
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
<!-- -->
<link rel="stylesheet" href="style.css">
<!-- "" -->
<script type="module" src="script.js"></script>
</head>
<body></body>
Tambahkan gaya minimal:
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Ubuntu, sans-serif;
font-size: 1em;
text-align: center;
letter-spacing: 1.05px;
line-height: 1.5em;
color: #111;
user-select: none;
}
@media (max-width: 512px) {
* {
font-size: .95em;
}
}
html {
position: relative;
}
body {
padding: 1em;
min-height: 100vh;
background: radial-gradient(circle, skyblue, steelblue);
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
}
h1 {
margin: .5em;
font-size: 1.05em;
}
output {
margin: .5em;
display: block;
}
.score {
font-size: 1.25em;
}
form {
text-align: left;
}
form p {
text-align: left;
white-space: pre;
}
form button {
position: relative;
left: 50%;
transform: translateX(-50%);
}
button {
margin: 2em 0;
padding: .4em .8em;
outline: none;
border: none;
background: linear-gradient(lightgreen, darkgreen);
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
font-size: .95em;
cursor: pointer;
transition: .2s;
}
button:hover {
color: #eee;
}
label {
cursor: pointer;
}
input {
margin: 0 10px 0 2em;
cursor: pointer;
}
details {
font-size: .95em;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 90%;
background: #eee;
border-radius: 4px;
cursor: pointer;
}
details h3 {
margin: .5em;
}
details p {
margin: .5em 1.5em;
text-align: justify;
text-indent: 1.5em;
}
.right {
color: green;
}
.wrong {
color: red;
}
Aset adalah larik objek, di mana setiap objek memiliki properti pertanyaan (pertanyaan), jawaban (jawaban), rightAnswer (jawaban yang benar) dan penjelasan (penjelasan):
[
{
question: `
function sayHi() {
console.log(name);
console.log(age);
var name = "Lydia";
let age = 21;
}
sayHi();
`,
answers: `
A: Lydia undefined
B: Lydia ReferenceError
C: ReferenceError 21
D: undefined ReferenceError
`,
rightAnswer: `D`,
explanation: `
name var. , name . Name undefined , , Lydia. name, , undefined. , let ( const), , var, . . " ". , JavaScript ReferenceError.
`
},
...
]
Skrip utama:
JavaScript
// -
import assets from './assets.js'
// IIFE
;((D, B) => {
// -
const title = D.createElement('h1')
B.append(title)
// :
const score = D.createElement('output')
score.className = 'score'
B.append(score)
// :
const progress = D.createElement('output')
progress.className = 'progress'
B.append(progress)
// ,
const div = D.createElement('div')
B.append(div)
//
// 0
let rightAnswers = +localStorage.getItem('rightAnswers') || 0
let wrongAnswers = +localStorage.getItem('wrongAnswers') || 0
//
// 0
let i = +localStorage.getItem('i') || 0
//
showQuestion()
//
updateScoreAndProgress()
function showQuestion() {
//
// , ,
//
if (i === assets.length) {
return showResult()
}
// - -
const titleText = {
4: ` ?`,
9: ` ?`,
12: ` `,
13: ` ?`,
14: ` ?`,
20: ` sum?`,
21: ` cool_secret?`,
23: ` ?`,
25: ` : this`,
27: ` ?`,
29: ` ?`,
30: ` event.target ?`,
33: ` ?`,
34: ` ""?`,
38: ` JavaScript `,
39: ` ?`,
40: ` ?`,
41: ` setInterval?`,
42: ` ?`,
48: ` num?`,
49: ` ?`
}
title.textContent = titleText[i] || ` ?`
// - ,
// , ,
const {
question,
rightAnswer,
explanation
} = assets[i]
// - input type="radio",
// ( - \n)
// - ,
// slice(1, -1),
//
const answers = assets[i].answers
.split('\n')
.slice(1, -1)
.map(i => i.trim())
// HTML-
const template = `
<form action="#">
<p><em>:</em><br> ${question}</p>
<p><em> :</em></p><br>
${answers.reduce((html, item) => html += `<label><input type="radio" name="answer" value="${item}">${item}</label><br>`, '')}
<button type="submit"></button>
</form>
<details>
<summary> </summary>
<section>
<h3> : ${rightAnswer}</h3>
<p>${explanation}</p>
</section>
</details>`
//
div.innerHTML = template
//
const form = div.querySelector('form')
//
form.querySelector('input').setAttribute('checked', '')
//
form.addEventListener('submit', ev => {
//
ev.preventDefault()
//
const chosenAnswer = form.querySelector('input:checked').value.substr(0, 1)
//
checkAnswer(chosenAnswer, rightAnswer)
})
}
function checkAnswer(chosenAnswer, rightAnswer) {
//
let isRight = true
// ,
// ,
// ,
// ,
//
// false
if (chosenAnswer === rightAnswer) {
rightAnswers++
localStorage.setItem('rightAnswers', rightAnswers)
} else {
wrongAnswers++
localStorage.setItem('wrongAnswers', wrongAnswers)
isRight = false
}
//
const button = div.querySelector('button')
//
if (isRight) {
//
title.innerHTML = `<h1 class="right">!</h1>`
//
button.disabled = true
//
//
//
const timer = setTimeout(() => {
updateScoreAndProgress()
showQuestion()
clearTimeout(timer)
}, 1000)
//
} else {
//
title.innerHTML = `<h1 class="wrong">!</h1>`
//
div.querySelectorAll('input').forEach(input => input.disabled = true)
//
div.querySelector('details').setAttribute('open', '')
//
button.textContent = ''
//
//
//
button.addEventListener('click', () => {
updateScoreAndProgress()
showQuestion()
}, {
once: true
})
}
//
i++
//
localStorage.setItem('i', i)
}
function updateScoreAndProgress() {
//
score.innerHTML = `<span class="right">${rightAnswers}</span> - <span class="wrong">${wrongAnswers}</span>`
//
progress.innerHTML = `${i + 1} / ${assets.length}`
}
function showResult() {
//
const percent = (rightAnswers / assets.length * 100).toFixed()
//
let result
//
// result
if (percent >= 80) {
result = ` ! JavaScript.`
} else if (percent > 50) {
result = ` , .`
} else {
result = `, JavaScript.`
}
//
B.innerHTML = `
<h1> </h1>
<div>
<p> : <span class="right">${rightAnswers}</span></p>
<p> : <span class="wrong">${wrongAnswers}</span></p>
<p> : ${percent}</p>
<p>${result}</p>
<button></button>
</div>
`
//
//
// ,
//
B.querySelector('button').addEventListener('click', () => {
localStorage.clear()
location.reload()
}, {
once: true
})
}
})(document, document.body)
Terima kasih atas perhatian Anda.