Guten Tag, Freunde!
Ich mache Sie auf ein kleines interaktives JavaScript-Quiz aufmerksam, das derzeit aus 50 Fragen besteht.
Meiner Meinung nach ist die Lösung solcher Probleme der beste Weg, um Ihr Können zu bestimmen.
Fortsetzung hier .
Vorwort
Dieser Teil basiert auf diesem Repository . Die Autorin, Lydia Hallie, positioniert sein Projekt als eine Liste fortgeschrittener Fragen, und in der Tat gibt es einige, die meiner Meinung nach selbst einem erfahrenen JavaScript-Entwickler schwer fallen werden. Zu diesen Fragen gehören jedoch auch Fragen, für die Grundkenntnisse zur Beantwortung ausreichen. Es gibt eine russische Übersetzung im Repository, aber, gelinde gesagt, lässt es zu wünschen übrig, so dass die meisten Antworten (Erklärungen) erneut übersetzt werden mussten.
Es ist zu beachten, dass die bereitgestellten Erklärungen (Antworten) das Wesentliche des Problems nicht immer vollständig offenbaren. Dies liegt an der Form des Projekts - es ist eine Checkliste, kein Tutorial. Die Antworten sind eher ein Hinweis für weitere Suchen auf MDN oderJavascript.ru . Viele der Erklärungen enthalten jedoch umfassende Antworten.
Trotz der Tatsache, dass der Code viele Male getestet wurde, ist natürlich niemand vor Fehlern gefeit, außer denen, die nichts tun. Wenn Sie daher Fehler, Tippfehler, Ungenauigkeiten, falsche Formulierungen usw. finden und die Übersetzung verbessern möchten, schreiben Sie bitte persönlich. Ich bin Ihnen dankbar (Aktivitäten auf GitHub werden ebenfalls empfohlen).
Eigentlich ist das alles, was ich als Vorwort sagen wollte.
Regeln
Die Regeln sind einfach: 50 Fragen, 3-4 mögliche Antworten, Bewertung: Anzahl der richtigen und falschen Antworten, Fortschritt: Anzahl und Anzahl der Fragen.
Basierend auf den Ergebnissen wird der Prozentsatz der richtigen Antworten bestimmt und eine Schlussfolgerung über den Grad der JavaScript-Kenntnisse gezogen: Mehr als 80% sind ausgezeichnet, mehr als 50% sind nicht schlecht, weniger als 50% ... nun, Sie verstehen.
Jeder Frage ist eine Erklärung beigefügt. Wenn die Antwort falsch ist, wird diese Erklärung offengelegt.
Aufgrund der Tatsache, dass die Anzahl der richtigen und falschen Antworten sowie die Seriennummer der Frage im lokalen Speicher aufgezeichnet sind, haben Sie die Möglichkeit, eine Pause einzulegen, eine Pause einzulegen und jederzeit an der Stelle fortzufahren, an der Sie aufgehört haben.
Fahren wir mit dem Quiz selbst fort.
Quiz
Der Projektcode ist hier .
Wir teilen die Ergebnisse in den Kommentaren.
Mechanik
Ein paar Worte darüber, wie das Quiz für Interessierte umgesetzt wird.
Das Markup sieht folgendermaßen aus:
<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>
Minimale Stile hinzufügen:
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;
}
Assets sind ein Array von Objekten, wobei jedes Objekt Eigenschaften wie Frage (Frage), Antworten (Antworten), rechte Antwort (richtige Antwort) und Erklärung (Erklärung) hat:
[
{
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.
`
},
...
]
Hauptskript:
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)
Vielen Dank für Ihre Aufmerksamkeit.